### Define Quiz and Simulator Data Structures in TypeScript

Source: https://context7.com/antropos17/theaimuseum/llms.txt

Defines interfaces for `QuizQuestion` and `SimulatorEra` to structure data for interactive experiences. `QuizQuestion` includes question text, options, and the correct answer index. `SimulatorEra` contains era information and an array of prompts with AI responses and quality ratings.

```typescript
// data/models.ts exports

// Quiz questions with answers
import { quizQuestions } from '@/data/models';

interface QuizQuestion {
  q: string;                     // Question text
  options: string[];             // 4 answer options
  answer: number;                // Correct answer index (0-3)
}

// Example question
const sampleQuestion = quizQuestions[0];
// { 
//   q: "Who proposed the 'Turing Test'?",
//   options: ["Alan Turing", "John McCarthy", "Marvin Minsky", "Claude Shannon"],
//   answer: 0
// }

// Simulator eras with prompts
import { simulatorEras } from '@/data/models';

interface SimulatorEra {
  era: string;                   // Year (e.g., "1966", "2024")
  label: string;                 // Display name (e.g., "ELIZA", "GPT-4")
  prompts: {
    prompt: string;              // User input
    response: string;            // AI response
    quality: number;             // Response quality (0-100)
  }[];
}

// Example era
const eliza = simulatorEras[0];
// { 
//   era: "1966",
//   label: "ELIZA",
//   prompts: [
//     { prompt: "I feel lonely", response: "Do you often feel lonely?", quality: 8 }
//   ]
// }

```

--------------------------------

### Quiz Component (TypeScript)

Source: https://context7.com/antropos17/theaimuseum/llms.txt

The QuizView component provides a gamified quiz experience with animations, timed challenges, and score tracking. It includes a boot sequence, visual feedback, confetti effects, and social sharing options. This client component manages quiz progression and results.

```typescript
// components/quiz/quiz-view.tsx
"use client";

import { quizQuestions } from "@/data/models";
import confetti from "canvas-confetti";

// Quiz phases: boot -> quiz -> results

// Rank system based on score percentage
const RANKS = [
  { min: 90, label: "SUPREME NEURAL ARCHITECT" },
  { min: 70, label: "SENIOR SYSTEMS ANALYST" },
  { min: 50, label: "JUNIOR DATA OPERATIVE" },
  { min: 30, label: "UNTRAINED INTERN" },
  { min: 0, label: "SECURITY BREACH DETECTED" },
];

// Features:
// - Boot sequence animation
// - Timer tracking
// - Visual feedback for correct/incorrect
// - Confetti on completion
// - Social sharing (X, WhatsApp, copy link)
// - Challenge a friend functionality

// Access at /quiz
// Example: Score 8/10 -> "SENIOR SYSTEMS ANALYST" rank

```

--------------------------------

### Model Exhibit Page Generation (TypeScript)

Source: https://context7.com/antropos17/theaimuseum/llms.txt

Dynamically generates pages for individual AI model exhibits using Next.js. It includes static path generation, dynamic metadata creation (title, description, Open Graph image), and fetches model data to render the exhibit page with navigation to previous and next models.

```typescript
// app/model/[slug]/page.tsx
import { notFound } from "next/navigation";
import { models, categories } from "@/data/models";
import { ModelExhibit } from "@/components/model/model-exhibit";

interface Props {
  params: Promise<{ slug: string }>;
}

// Generate static paths for all models
export async function generateStaticParams() {
  return models.map((m) => ({ slug: m.slug }));
}

// Generate dynamic metadata
export async function generateMetadata({ params }: Props) {
  const { slug } = await params;
  const model = models.find((m) => m.slug === slug);
  if (!model) return {};

  return {
    title: `${model.name} (${model.year})`,
    description: model.description.slice(0, 160),
    openGraph: {
      title: `${model.name} (${model.year}) | The AI Museum`,
      images: [{ url: `/api/og?title=${encodeURIComponent(model.name)}` }],
    },
  };
}

// Page component
export default async function ModelPage({ params }: Props) {
  const { slug } = await params;
  const model = models.find((m) => m.slug === slug);
  if (!model) notFound();

  // Get prev/next for navigation
  const sorted = [...models].sort((a, b) => a.year - b.year);
  const idx = sorted.findIndex((m) => m.id === model.id);

  return (
    <ModelExhibit
      model={model}
      category={categories[model.category]}
      prevModel={idx > 0 ? sorted[idx - 1] : null}
      nextModel={idx < sorted.length - 1 ? sorted[idx + 1] : null}
    />
  );
}

// Navigate to model pages:
// /model/chatgpt - ChatGPT exhibit
// /model/deepseek-r1 - DeepSeek R1 exhibit
// /model/turing-test - Turing Test exhibit

```

--------------------------------

### AI Simulator Component (TypeScript)

Source: https://context7.com/antropos17/theaimuseum/llms.txt

The SimulatorView component simulates conversations with AI systems across historical eras. It features typewriter effects, era-specific themes, and response quality ratings. This client component handles era selection and visual feedback.

```typescript
// components/simulator/simulator-view.tsx
"use client";

import { simulatorEras } from "@/data/models";

// Era themes with visual styling
const ERA_THEMES = {
  "1966": { text: "text-green-400", label: "ELIZA // 1966" },
  "2022": { text: "text-cyan-300", label: "ChatGPT // 2022" },
  "2025": { text: "text-rose-300", label: "o3 / DeepSeek R1 // 2025" },
};

// SimulatorView handles:
// - Era selection (1966, 2020, 2022, 2024, 2025)
// - Typewriter animation for prompts/responses
// - Quality score visualization
// - Share functionality

// Example conversation flow:
// 1. User selects era (e.g., "1966 - ELIZA")
// 2. System displays available prompts
// 3. User clicks prompt: "I feel lonely"
// 4. Typewriter effect types: "> I feel lonely"
// 5. AI responds: "Do you often feel lonely?"
// 6. Quality bar shows: 8/100

// Access at /simulator

```

--------------------------------

### Define AIModel Interface in TypeScript

Source: https://context7.com/antropos17/theaimuseum/llms.txt

Defines the `AIModel` interface, a core data structure for representing AI systems. It includes properties for metadata, capabilities, opinions, bugs, and media references. This interface is crucial for organizing and accessing information about each AI model within the museum.

```typescript
// data/models.ts

interface AIModel {
  id: string;                    // Unique identifier (e.g., "chatgpt", "deepseek")
  slug: string;                  // URL-friendly name (e.g., "chatgpt", "deepseek-r1")
  name: string;                  // Display name (e.g., "ChatGPT", "DeepSeek R1")
  year: number;                  // Release year (1950-2025)
  era: string;                   // Historical era (e.g., "Genesis", "The Explosion")
  category: "chatbot" | "image" | "video" | "music" | "code" | "game" | "concept" | "science";
  status: "active" | "historic" | "declining";
  open: boolean;                 // Open source status
  color: string;                 // Hex color for UI theming
  creator: string;               // Company/person (e.g., "OpenAI", "DeepMind")
  params: string;                // Parameter count (e.g., "175B", "671B MoE")
  cost: string;                  // Training/running cost
  capability: number;            // Capability score (0-100)
  hype: number;                  // Hype level score (0-100)
  safety: number;                // Safety rating (0-100)
  description: string;           // Detailed description
  example: string;               // Example output/interaction
  opinions: { sentiment: "+" | "-"; text: string; source: string; url?: string }[];
  bugs: { text: string; severity: string }[];
  media: { type: "paper" | "yt" | "link"; title: string; url: string }[];
  lineage: string[];             // Parent model IDs
  stickers: Record<string, number>;
}

// Example: Accessing model data
import { models, categories } from '@/data/models';

// Get all active chatbots
const activeChatbots = models.filter(
  m => m.category === 'chatbot' && m.status === 'active'
);

// Find model by slug
const chatgpt = models.find(m => m.slug === 'chatgpt');
console.log(chatgpt?.capability); // 60

// Get category info
const chatbotCategory = categories['chatbot'];
// { label: "Chatbots", icon: "💬", color: "#10A37F" }

// Sort by year
const timeline = [...models].sort((a, b) => a.year - b.year);

```

--------------------------------

### Museum Wings Navigation Component (TypeScript)

Source: https://context7.com/antropos17/theaimuseum/llms.txt

The HallsGrid component displays museum wings with animated card entrances and retro terminal styling. It uses Next.js Link for navigation and Lucide React for icons. The component is designed for client-side rendering.

```typescript
// components/landing/halls-grid.tsx
"use client";

import Link from "next/link";
import { Compass, Terminal, Skull, Swords, Trophy } from "lucide-react";

const wings = [
  { icon: Compass, name: "Timeline", desc: "All 25 AI models", tag: "25 models", href: "/explore", featured: true },
  { icon: Terminal, name: "Simulator", desc: "Chat with AI across eras", tag: "5 eras", href: "/simulator", featured: true },
  { icon: Skull, name: "Graveyard", desc: "Dead AI projects", tag: "6 tombs", href: "/graveyard" },
  { icon: Swords, name: "AI Wars", desc: "Corporate arms race", tag: "5 wars", href: "/battles" },
  { icon: Trophy, name: "Leaderboard", desc: "Top ranked models", tag: "rank", href: "/leaderboard" },
  // ... more wings
];

// Usage - renders a bento grid of museum sections
<HallsGrid />

// Routes available:
// /explore - Interactive AI timeline (1950-2025)
// /simulator - Chat with AI from different eras
// /evolution - AI family tree visualization
// /graveyard - Discontinued AI projects
// /battles - Corporate AI competition tracker
// /memes - Iconic AI moments
// /victims - Jobs displaced by AI
// /predictions - Expert forecast scorecard
// /leaderboard - Model capability rankings
// /quiz - AI history knowledge test

```

--------------------------------

### Newsletter Subscription API - TypeScript

Source: https://context7.com/antropos17/theaimuseum/llms.txt

Handles newsletter signups via a POST request. It validates the email format and returns a success or error response. This endpoint is implemented using Next.js API routes.

```typescript
// POST /api/newsletter
// Request body: { email: string }
// Response: { success: boolean, error?: string }

// Example using fetch
const subscribeToNewsletter = async (email: string) => {
  const response = await fetch('/api/newsletter', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email })
  });

  const data = await response.json();

  if (!response.ok) {
    throw new Error(data.error || 'Subscription failed');
  }

  return data; // { success: true }
};

// Usage
try {
  await subscribeToNewsletter('user@example.com');
  console.log('Successfully subscribed!');
} catch (error) {
  console.error('Subscription failed:', error.message);
}

// curl example
// curl -X POST https://v0-theaimuseum.vercel.app/api/newsletter \
//   -H "Content-Type: application/json" \
//   -d '{"email": "user@example.com"}'
// Response: {"success":true}
```

--------------------------------

### Newsletter Subscription API

Source: https://context7.com/antropos17/theaimuseum/llms.txt

Handles email newsletter signups with validation. The endpoint accepts POST requests with a JSON body containing an email address, validates the format, and returns a success response.

```APIDOC
## POST /api/newsletter

### Description
Handles email newsletter signups with validation. The endpoint accepts POST requests with a JSON body containing an email address, validates the format, and returns a success response.

### Method
POST

### Endpoint
/api/newsletter

### Parameters
#### Request Body
- **email** (string) - Required - The email address to subscribe.

### Request Example
```json
{
  "email": "user@example.com"
}
```

### Response
#### Success Response (200)
- **success** (boolean) - Indicates if the subscription was successful.
- **error** (string) - Optional - Provides an error message if the subscription failed.

#### Response Example
```json
{
  "success": true
}
```
```

--------------------------------

### Open Graph Image Generation API

Source: https://context7.com/antropos17/theaimuseum/llms.txt

Generates dynamic Open Graph images for social media sharing. This edge function creates custom 1200x630 images with a retro terminal aesthetic, supporting customizable title and subtitle parameters.

```APIDOC
## GET /api/og

### Description
Generates dynamic Open Graph images for social media sharing. This edge function creates custom 1200x630 images with a retro terminal aesthetic, supporting customizable title and subtitle parameters.

### Method
GET

### Endpoint
/api/og

### Parameters
#### Query Parameters
- **title** (string) - Optional - The main heading text for the image. Defaults to "75 Years of Artificial Intelligence".
- **subtitle** (string) - Optional - Secondary text to display below the title.

### Request Example
```
https://v0-theaimuseum.vercel.app/api/og?title=ChatGPT%20(2022)&subtitle=The%20AI%20Revolution
```

### Response
#### Success Response (200)
- Returns a PNG image with dimensions 1200x630.

#### Response Example
(Binary image data)
```

--------------------------------

### useInView Hook for Scroll Animations (TypeScript)

Source: https://context7.com/antropos17/theaimuseum/llms.txt

A custom React hook that utilizes the Intersection Observer API to detect when an element scrolls into view. It returns a ref to attach to the element and a boolean indicating its visibility. Useful for triggering animations or loading content.

```typescript
"use client";

import { useEffect, useRef, useState } from "react";

export function useInView(threshold = 0.1) {
  const ref = useRef<HTMLDivElement>(null);
  const [isInView, setIsInView] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsInView(true);
          observer.unobserve(el);  // Only trigger once
        }
      },
      { threshold }
    );

    observer.observe(el);
    return () => observer.disconnect();
  }, [threshold]);

  return { ref, isInView };
}

// Usage in a component
function AnimatedCard() {
  const { ref, isInView } = useInView(0.2);  // Trigger at 20% visibility

  return (
    <div
      ref={ref}
      className={cn(
        'transition-all duration-700',
        isInView
          ? 'opacity-100 translate-y-0'
          : 'opacity-0 translate-y-8'
      )}
    >
      Content appears when scrolled into view
    </div>
  );
}

// Usage with staggered animations
function CardGrid({ items }: { items: string[] }) {
  const { ref, isInView } = useInView();

  return (
    <div ref={ref} className="grid grid-cols-3 gap-4">
      {items.map((item, i) => (
        <div
          key={item}
          style={{
            opacity: isInView ? 1 : 0,
            transform: isInView ? 'translateY(0)' : 'translateY(16px)',
            transitionDelay: `${i * 100}ms`,
          }}
          className="transition-all duration-500"
        >
          {item}
        </div>
      ))}
    </div>
  );
}

```

--------------------------------

### Open Graph Image Generation API - TypeScript

Source: https://context7.com/antropos17/theaimuseum/llms.txt

Generates dynamic Open Graph images for social media sharing using an edge function. It supports customizable titles and subtitles with a retro terminal aesthetic. The output is a 1200x630 PNG image.

```typescript
// GET /api/og?title=<string>&subtitle=<string>
// Returns: ImageResponse (PNG image 1200x630)

// URL Parameters:
// - title: Main heading text (default: "75 Years of Artificial Intelligence")
// - subtitle: Secondary text below title (optional)

// Example URLs:
// Default OG image
// https://v0-theaimuseum.vercel.app/api/og

// Custom title
// https://v0-theaimuseum.vercel.app/api/og?title=ChatGPT%20(2022)

// Title with subtitle
// https://v0-theaimuseum.vercel.app/api/og?title=AI%20Timeline&subtitle=25%20Landmark%20AI%20Systems

// Usage in HTML meta tags
// <meta property="og:image" content="/api/og?title=DeepSeek%20R1&subtitle=The%20$5.6M%20Revolution" />

// Usage in Next.js metadata
// export const metadata: Metadata = {
//   openGraph: {
//     images: [{
//       url: '/api/og?title=AI%20Graveyard&subtitle=Dead%20Projects',
//       width: 1200,
//       height: 630
//     }],
//   },
// };
```

--------------------------------

### Implement cn() Utility for Tailwind CSS Class Merging in TypeScript

Source: https://context7.com/antropos17/theaimuseum/llms.txt

Provides the `cn()` utility function, which merges CSS class names using `clsx` and `tailwind-merge`. This function is essential for dynamically applying and managing Tailwind CSS classes, especially in components with conditional styling and potential class conflicts.

```typescript
// lib/utils.ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// Usage examples
import { cn } from '@/lib/utils';

// Basic class merging
cn('px-4 py-2', 'text-primary')
// => "px-4 py-2 text-primary"

// Conditional classes
const isActive = true;
cn(
  'border px-4 py-2 font-mono text-xs',
  isActive ? 'border-primary bg-primary/10 text-primary' : 'border-border text-muted-foreground'
)
// => "border px-4 py-2 font-mono text-xs border-primary bg-primary/10 text-primary"

// Handling conflicts (twMerge resolves them)
cn('px-4', 'px-8')
// => "px-8" (later class wins)

// Complex component styling
function Button({ variant, className }: { variant: 'primary' | 'ghost', className?: string }) {
  return (
    <button className={cn(
      'px-4 py-2 font-mono transition-colors',
      variant === 'primary' && 'bg-primary text-primary-foreground',
      variant === 'ghost' && 'bg-transparent hover:bg-primary/10',
      className
    )}>
      Click me
    </button>
  );
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.