"use client"; import { useState, useEffect, useMemo } from "react"; import { Check } from "lucide-react"; import { cn } from "@/lib/utils"; import { useTranslations, useLocale } from "next-intl"; import { getLocaleField } from "./locales"; // Tokenizer Demo Component - simulates BPE-style tokenization function simulateTokenization(text: string): string[] { if (!text) return []; const tokens: string[] = []; let i = 0; while (i < text.length) { if (text[i] === ' ') { let chunk = ' '; i++; const chunkLen = Math.min(2 + Math.floor(Math.random() * 3), text.length - i); for (let j = 0; j < chunkLen && i < text.length && text[i] !== ' '; j++) { chunk += text[i]; i++; } tokens.push(chunk); } else if (/[.,!?;:'"()\[\]{}]/.test(text[i])) { tokens.push(text[i]); i++; } else { const chunkLen = Math.min(2 + Math.floor(Math.random() * 3), text.length - i); let chunk = ''; for (let j = 0; j < chunkLen && i < text.length && text[i] !== ' ' && !/[.,!?;:'"()\[\]{}]/.test(text[i]); j++) { chunk += text[i]; i++; } if (chunk) tokens.push(chunk); } } return tokens; } const sampleTokenizations: Record = { "Hello, world!": ["Hel", "lo", ",", " wor", "ld", "!"], "Unbelievable": ["Un", "bel", "iev", "able"], "ChatGPT is amazing": ["Chat", "GPT", " is", " amaz", "ing"], "The quick brown fox": ["The", " qui", "ck", " bro", "wn", " fox"], "Prompt engineering": ["Prom", "pt", " eng", "ine", "ering"], "Artificial Intelligence": ["Art", "ific", "ial", " Int", "ell", "igen", "ce"], }; export function TokenizerDemo() { const t = useTranslations("book.interactive"); const locale = useLocale(); const currentData = getLocaleField(locale, "tokenizer"); // Get the default sample's text and tokens const defaultSample = currentData.samples[currentData.default]; const [input, setInput] = useState(defaultSample?.text || ""); const [tokens, setTokens] = useState(defaultSample?.tokens || []); // Update input and tokens when locale changes useEffect(() => { const sample = currentData.samples[currentData.default]; if (sample) { setInput(sample.text); setTokens(sample.tokens); } }, [locale, currentData]); const handleInputChange = (value: string) => { setInput(value); // Check if input matches any sample text const matchingSample = Object.values(currentData.samples).find(s => s.text === value); if (matchingSample) { setTokens(matchingSample.tokens); } else { setTokens(simulateTokenization(value)); } }; const tokenColors = [ "bg-blue-100 dark:bg-blue-900/50 border-blue-300 dark:border-blue-700", "bg-green-100 dark:bg-green-900/50 border-green-300 dark:border-green-700", "bg-purple-100 dark:bg-purple-900/50 border-purple-300 dark:border-purple-700", "bg-amber-100 dark:bg-amber-900/50 border-amber-300 dark:border-amber-700", "bg-pink-100 dark:bg-pink-900/50 border-pink-300 dark:border-pink-700", "bg-cyan-100 dark:bg-cyan-900/50 border-cyan-300 dark:border-cyan-700", ]; return (

{t("tokenizerDemo")} {t("seeHowTextIsSplit")}

{t("enterText")} handleInputChange(e.target.value)} className="w-full px-3 py-2 border rounded-lg bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="Type something..." />

{t("tokens")} ({tokens.length}):

{tokens.map((token, i) => ( {token === " " ? "␣" : token} ))}

{currentData.tryExamples}

); } // Context Window Demo Component export function ContextWindowDemo() { const [promptLength, setPromptLength] = useState(2000); const [responseLength, setResponseLength] = useState(1000); const contextLimit = 8000; const t = useTranslations("book.interactive"); const totalUsed = promptLength + responseLength; const remaining = Math.max(0, contextLimit - totalUsed); const isOverLimit = totalUsed > contextLimit; return (

{t("contextWindowVisualizer")} {t("understandHowContextIsConsumed")}

{t("contextWindow")}: {contextLimit.toLocaleString()} tokens {remaining.toLocaleString()} {t("remaining")}

{promptLength > 500 && t("prompt")}

{responseLength > 500 && t("response")}

0 {(contextLimit / 2).toLocaleString()} {contextLimit.toLocaleString()}

{t("yourPrompt")} {promptLength.toLocaleString()} tokens setPromptLength(Number(e.target.value))} className="w-full accent-blue-500" />

{t("aiResponse")} {responseLength.toLocaleString()} tokens setResponseLength(Number(e.target.value))} className="w-full accent-green-500" />

{isOverLimit ? (

{t("contextOverflow")} {t("contextOverflowMessage")}

) : (

{t("tipLabel")} {t("contextTip")}

)}

); } // Temperature Demo Component export function TemperatureDemo() { const [temperature, setTemperature] = useState(0.7); const t = useTranslations("book.interactive"); const locale = useLocale(); // Get locale-specific temperature examples const currentExamples = useMemo(() => { return getLocaleField(locale, "temperatureExamples"); }, [locale]); const getOutputExamples = (temp: number): string[] => { if (temp <= 0.2) return currentExamples.lowTemp; if (temp <= 0.5) return currentExamples.mediumLowTemp; if (temp <= 0.8) return currentExamples.mediumHighTemp; return currentExamples.highTemp; }; const getLabel = (temp: number): { textKey: string; color: string } => { if (temp <= 0.3) return { textKey: "deterministic", color: "text-blue-600 dark:text-blue-400" }; if (temp <= 0.6) return { textKey: "balanced", color: "text-green-600 dark:text-green-400" }; if (temp <= 0.8) return { textKey: "creative", color: "text-amber-600 dark:text-amber-400" }; return { textKey: "veryCreative", color: "text-pink-600 dark:text-pink-400" }; }; const label = getLabel(temperature); const examples = getOutputExamples(temperature); return (

{t("temperatureDemo")} {t("seeHowRandomnessAffects")}

{t("temperature")}

{temperature.toFixed(1)} {t(label.textKey)}

setTemperature(Number(e.target.value))} className="w-full" />

0.0 ({t("focused")}) 1.0 ({t("random")})

Prompt: "{currentExamples.prompt}"

{t("possibleResponsesAtThisTemp")}

{examples.map((example, i) => (

{example}

))}

{t("useLowTemperature")} {t("forFactualAnswers")} {t("useHighTemperature")} {t("forCreativeWriting")}

); } // Structured Output Demo Component export function StructuredOutputDemo() { const [activeFormat, setActiveFormat] = useState<'unstructured' | 'json' | 'table'>('unstructured'); const t = useTranslations("book.interactive"); const outputs = { unstructured: `Here are some popular programming languages: Python is great for data science and AI. JavaScript is used for web development. Rust is known for performance and safety. Go is good for backend services. Each has its strengths depending on your use case.`, json: `{ "languages": [ { "name": "Python", "best_for": ["data science", "AI"], "difficulty": "easy" }, { "name": "JavaScript", "best_for": ["web development"], "difficulty": "medium" }, { "name": "Rust", "best_for": ["performance", "safety"], "difficulty": "hard" }, { "name": "Go", "best_for": ["backend services"], "difficulty": "medium" } ] }`, table: `| Language | Best For | Difficulty | |------------|---------------------|------------| | Python | Data science, AI | Easy | | JavaScript | Web development | Medium | | Rust | Performance, Safety | Hard | | Go | Backend services | Medium |`, }; const benefits = { unstructured: [ { text: t("parseProgrammatically"), supported: false }, { text: t("compareAcrossQueries"), supported: false }, { text: t("integrateIntoWorkflows"), supported: false }, { text: t("validateForCompleteness"), supported: false }, ], json: [ { text: t("parseProgrammatically"), supported: true }, { text: t("compareAcrossQueries"), supported: true }, { text: t("integrateIntoWorkflows"), supported: true }, { text: t("validateForCompleteness"), supported: true }, ], table: [ { text: t("parseProgrammatically"), supported: true }, { text: t("compareAcrossQueries"), supported: true }, { text: t("integrateIntoWorkflows"), supported: false }, { text: t("validateForCompleteness"), supported: true }, ], }; return (

{t("structuredOutputDemo")} {t("seeTheDifferenceStructureMakes")}

{(['unstructured', 'json', 'table'] as const).map((format) => ( ))}

{t("output")}

              {outputs[activeFormat]}

{t("youCan")}

{benefits[activeFormat].map((benefit, i) => (

{benefit.supported ? ( ) : ( ✗ )} {benefit.text}

))}

{t("parseProgrammaticallyLabel")}

{activeFormat === 'unstructured' ? (

{`// ❌ ${t("complexRegexRequired")} const languages = text.match(/([A-Z][a-z]+) is (?:great for|used for|known for|good for) (.+?)\\./g); // ${t("unreliableBreaksWithChanges")}`}

) : activeFormat === 'json' ? (

{`// ✓ ${t("simpleAndReliable")} const data = JSON.parse(response); const pythonInfo = data.languages.find(l => l.name === "Python"); console.log(pythonInfo.best_for); // ["data science", "AI"]`}

) : (

{`// ✓ ${t("parseableWithMarkdown")} const rows = parseMarkdownTable(response); const pythonRow = rows.find(r => r.Language === "Python"); console.log(pythonRow["Best For"]); // "Data science, AI"`}

)}

); } // Few-Shot Demo Component export function FewShotDemo() { const [exampleCount, setExampleCount] = useState(0); const t = useTranslations("book.interactive"); const locale = useLocale(); // Locale-specific few-shot examples const fewShotData = useMemo(() => ({ en: { examples: [ { input: "I love this product!", output: "Positive" }, { input: "Terrible experience, waste of money", output: "Negative" }, { input: "It's okay, nothing special", output: "Neutral" }, ], testCase: { input: "Great quality but shipping was slow", expected: "Mixed" }, labels: { positive: "Positive", negative: "Negative", neutral: "Neutral", mixed: "Mixed" }, }, tr: { examples: [ { input: "Bu ürünü çok sevdim!", output: "Olumlu" }, { input: "Berbat bir deneyim, para israfı", output: "Olumsuz" }, { input: "Fena değil, özel bir şey yok", output: "Nötr" }, ], testCase: { input: "Kalitesi harika ama kargo yavaştı", expected: "Karışık" }, labels: { positive: "Olumlu", negative: "Olumsuz", neutral: "Nötr", mixed: "Karışık" }, }, }), []); const currentData = fewShotData[locale as keyof typeof fewShotData] || fewShotData.en; const examples = currentData.examples; const testCase = currentData.testCase; const getModelConfidence = (count: number): { label: string; confidence: number; correct: boolean } => { const { labels } = currentData; if (count === 0) return { label: labels.positive, confidence: 45, correct: false }; if (count === 1) return { label: labels.positive, confidence: 62, correct: false }; if (count === 2) return { label: labels.mixed, confidence: 71, correct: true }; return { label: labels.mixed, confidence: 94, correct: true }; }; const result = getModelConfidence(exampleCount); return (

{t("fewShotLearningDemo")} {t("seeHowExamplesImproveAccuracy")}

{t("numberOfExamples")} {exampleCount}

setExampleCount(Number(e.target.value))} className="w-full" />

{t("zeroShot")} {t("oneShot")} {t("twoShot")} {t("threeShot")}

{exampleCount > 0 && (

{t("examplesProvided")}

{examples.slice(0, exampleCount).map((ex, i) => (

"{ex.input}" → {ex.output}

))}

)}

{t("testInput")}

"{testCase.input}"

{t("modelPrediction")}

{result.label} {result.correct ? "✓" : "✗"}

{t("confidence")}

{result.confidence}%

{t("expected")} {testCase.expected}

); } // JSON/YAML Format Demo Component export function JsonYamlDemo() { const [activeFormat, setActiveFormat] = useState<'json' | 'yaml' | 'typescript'>('typescript'); const t = useTranslations("book.interactive"); const typeDefinition = `interface ChatPersona { name?: string; role?: string; tone?: PersonaTone | PersonaTone[]; expertise?: PersonaExpertise[]; personality?: string[]; background?: string; }`; const jsonOutput = `{ "name": "CodeReviewer", "role": "Senior Software Engineer", "tone": ["professional", "analytical"], "expertise": ["coding", "engineering"], "personality": ["thorough", "constructive"], "background": "10 years in backend systems" }`; const yamlOutput = `name: CodeReviewer role: Senior Software Engineer tone: - professional - analytical expertise: - coding - engineering personality: - thorough - constructive background: 10 years in backend systems`; const outputs = { typescript: typeDefinition, json: jsonOutput, yaml: yamlOutput, }; const descriptions = { typescript: t("defineStructureWithTypeScript"), json: t("machineReadableStrictSyntax"), yaml: t("humanReadableSupportsComments"), }; return (

{t("formatComparison")} {t("sameDataDifferentFormats")}

{(['typescript', 'json', 'yaml'] as const).map((format) => ( ))}

{descriptions[activeFormat]}

          {outputs[activeFormat]}

TypeScript

{t("defineSchema")}

JSON

{t("apisAndParsing")}

YAML

{t("configFiles")}

); } // Iterative Refinement Demo Component const iterationsLocale: Record> = { en: [ { version: 1, prompt: "Write a product description.", additions: null, output: "This is a great product. It has many features. You should buy it.", issue: "Too vague, no specific details", quality: 20 }, { version: 2, prompt: "Write a product description for wireless earbuds.", additions: ["for wireless earbuds"], output: "These wireless earbuds offer great sound quality and comfortable fit. They have long battery life and come in multiple colors.", issue: "Better, but still generic", quality: 45 }, { version: 3, prompt: "Write a 50-word product description for premium wireless earbuds. Highlight: noise cancellation, 8-hour battery, water resistance.", additions: ["50-word", "premium", "Highlight: noise cancellation, 8-hour battery, water resistance"], output: "Experience pure audio bliss with our premium wireless earbuds. Advanced noise cancellation blocks distractions while delivering crystal-clear sound. With 8-hour battery life and IPX5 water resistance, they're perfect for workouts or commutes. Ergonomic design ensures all-day comfort.", issue: "Good details, needs stronger hook", quality: 72 }, { version: 4, prompt: "Write a compelling 50-word product description for premium wireless earbuds.\n\nKey features: noise cancellation, 8-hour battery, IPX5 water resistance\nTone: Premium but approachable\nStart with a benefit, end with a call to action.", additions: ["compelling", "Tone: Premium but approachable", "Start with a benefit, end with a call to action"], output: "Escape the noise and immerse yourself in studio-quality sound. Our premium wireless earbuds feature advanced noise cancellation, 8-hour battery life, and IPX5 water resistance for any adventure. Ergonomically designed for all-day comfort. Elevate your listening experience today.", issue: null, quality: 95 }, ], tr: [ { version: 1, prompt: "Bir ürün açıklaması yaz.", additions: null, output: "Bu harika bir ürün. Birçok özelliği var. Satın almalısınız.", issue: "Çok belirsiz, özel detay yok", quality: 20 }, { version: 2, prompt: "Kablosuz kulaklıklar için bir ürün açıklaması yaz.", additions: ["Kablosuz kulaklıklar için"], output: "Bu kablosuz kulaklıklar harika ses kalitesi ve rahat kullanım sunar. Uzun pil ömrüne sahip ve birden fazla renkte mevcut.", issue: "Daha iyi, ama hala genel", quality: 45 }, { version: 3, prompt: "Premium kablosuz kulaklıklar için 50 kelimelik bir ürün açıklaması yaz. Vurgula: gürültü engelleme, 8 saat pil, su dayanıklılığı.", additions: ["50 kelimelik", "Premium", "Vurgula: gürültü engelleme, 8 saat pil, su dayanıklılığı"], output: "Premium kablosuz kulaklıklarımızla saf ses keyfini yaşayın. Gelişmiş gürültü engelleme, dikkat dağıtıcıları engellerken kristal netliğinde ses sunar. 8 saatlik pil ömrü ve IPX5 su dayanıklılığı ile antrenman veya yolculuk için mükemmel. Ergonomik tasarım tüm gün konfor sağlar.", issue: "İyi detaylar, daha güçlü giriş gerekli", quality: 72 }, { version: 4, prompt: "Premium kablosuz kulaklıklar için etkileyici 50 kelimelik bir ürün açıklaması yaz.\n\nAna özellikler: gürültü engelleme, 8 saat pil, IPX5 su dayanıklılığı\nTon: Premium ama ulaşılabilir\nBir fayda ile başla, harekete geçirici mesajla bitir.", additions: ["etkileyici", "Ton: Premium ama ulaşılabilir", "Bir fayda ile başla, harekete geçirici mesajla bitir"], output: "Gürültüden kaçın ve stüdyo kalitesinde sese kendinizi bırakın. Premium kablosuz kulaklıklarımız gelişmiş gürültü engelleme, 8 saatlik pil ömrü ve her macera için IPX5 su dayanıklılığı sunar. Tüm gün konfor için ergonomik tasarım. Dinleme deneyiminizi bugün yükseltin.", issue: null, quality: 95 }, ], }; export function IterativeRefinementDemo() { const [step, setStep] = useState(0); const [isPlaying, setIsPlaying] = useState(false); const t = useTranslations("book.interactive"); const locale = useLocale(); const iterations = iterationsLocale[locale] || iterationsLocale.en; const currentIteration = iterations[step]; const renderPromptWithHighlights = (prompt: string, additions: string[] | null) => { if (!additions || additions.length === 0) return prompt; const parts: { text: string; highlighted: boolean }[] = []; let remaining = prompt; const sortedAdditions = [...additions].sort((a, b) => { const posA = prompt.indexOf(a); const posB = prompt.indexOf(b); return posA - posB; }); for (const addition of sortedAdditions) { const index = remaining.indexOf(addition); if (index !== -1) { if (index > 0) { parts.push({ text: remaining.substring(0, index), highlighted: false }); } parts.push({ text: addition, highlighted: true }); remaining = remaining.substring(index + addition.length); } } if (remaining) { parts.push({ text: remaining, highlighted: false }); } return parts.map((part, i) => part.highlighted ? ( {part.text} ) : ( {part.text} ) ); }; useEffect(() => { let timer: NodeJS.Timeout; if (isPlaying && step < iterations.length - 1) { timer = setTimeout(() => setStep(s => s + 1), 2500); } else if (step >= iterations.length - 1) { setIsPlaying(false); } return () => clearTimeout(timer); }, [isPlaying, step, iterations.length]); const handlePlay = () => { if (step >= iterations.length - 1) { setStep(0); } setIsPlaying(true); }; return (

{t("iterativeRefinementDemo")} {t("watchAPromptEvolve")}

{iterations.map((_, i) => (

{t("versionXOfY", { current: currentIteration.version, total: iterations.length })}

{t("prompt")} v{currentIteration.version}

            {renderPromptWithHighlights(currentIteration.prompt, currentIteration.additions)}

{currentIteration.additions && (

{t("newInThisVersion")}

)}

{t("output")}

{currentIteration.output}

{t("quality")}

= 80 ? "bg-green-500" : currentIteration.quality >= 50 ? "bg-amber-500" : "bg-red-500" )} style={{ width: `${currentIteration.quality}%` }} />

{currentIteration.quality}%

{currentIteration.issue ? (

{t("issue")} {currentIteration.issue}

) : (

{t("success")} {t("successMessage")}

)}

); } // Cost Calculator Component export function CostCalculatorDemo() { const t = useTranslations("book.interactive"); const [inputTokens, setInputTokens] = useState(500); const [outputTokens, setOutputTokens] = useState(200); const [requestsPerDay, setRequestsPerDay] = useState(1000); const [inputPrice, setInputPrice] = useState(0.15); // $ per 1M tokens const [outputPrice, setOutputPrice] = useState(0.60); // $ per 1M tokens const costPerRequest = (inputTokens * inputPrice / 1_000_000) + (outputTokens * outputPrice / 1_000_000); const dailyCost = costPerRequest * requestsPerDay; const monthlyCost = dailyCost * 30; const formatCurrency = (amount: number) => { if (amount < 0.01) return `$${amount.toFixed(4)}`; if (amount < 1) return `$${amount.toFixed(3)}`; if (amount < 100) return `$${amount.toFixed(2)}`; return `$${amount.toLocaleString(undefined, { maximumFractionDigits: 0 })}`; }; return (

{t("apiCostCalculator")}

{/* Input Tokens */}

{t("inputTokens")} setInputTokens(Math.max(0, parseInt(e.target.value) || 0))} className="w-full px-3 py-2 text-sm border rounded-md bg-background" />

{/* Input Price */}

{t("inputPrice")} setInputPrice(Math.max(0, parseFloat(e.target.value) || 0))} className="w-full px-3 py-2 text-sm border rounded-md bg-background" />

{/* Output Tokens */}

{t("outputTokens")} setOutputTokens(Math.max(0, parseInt(e.target.value) || 0))} className="w-full px-3 py-2 text-sm border rounded-md bg-background" />

{/* Output Price */}

{t("outputPrice")} setOutputPrice(Math.max(0, parseFloat(e.target.value) || 0))} className="w-full px-3 py-2 text-sm border rounded-md bg-background" />

{/* Requests per Day */}

{t("requestsPerDay")} setRequestsPerDay(Math.max(0, parseInt(e.target.value) || 0))} className="w-full px-3 py-2 text-sm border rounded-md bg-background" />

{/* Results */}

{t("perRequest")}

{formatCurrency(costPerRequest)}

{t("dailyCost")}

{formatCurrency(dailyCost)}

{t("monthlyCost")}

{formatCurrency(monthlyCost)}

{/* Formula */}

({inputTokens.toLocaleString()} × ${inputPrice}/1M) + ({outputTokens.toLocaleString()} × ${outputPrice}/1M) = {formatCurrency(costPerRequest)}/request

); }