Last Model Standing

OpenRouter OpenMic

Hosted by $\"Val$

Prepare the show, then press play.

\n \n \n \n live jokes\n

\n 😐\n \n 🤣\n

5.0/10

\n \n

Final Ranking

\n \n

\n view source\n \n\n\n","label",[155,67],"frontend","pulls","branches","forks","envVars",{"_163":165,"_166":165},"connections",{"_163":26,"_164":26},"count","unfilledCount",2,"emptyCount",{"_32":222,"_13":155,"_65":147,"_42":-5,"_34":35,"_148":39,"_149":86,"_36":223,"_38":26,"_68":202,"_151":-5,"_69":24,"_153":-5,"_180":224,"_17":225},{"_32":146,"_13":67,"_65":66,"_42":147,"_34":35,"_148":39,"_149":86,"_36":219,"_38":26,"_68":21,"_151":152,"_69":24,"_153":-5,"_180":220,"_17":221},{"_32":212,"_13":213,"_65":214,"_42":147,"_34":35,"_148":39,"_149":86,"_36":215,"_38":26,"_68":195,"_151":216,"_69":24,"_153":-5,"_180":217,"_17":218},{"_32":205,"_13":206,"_65":207,"_42":147,"_34":35,"_148":39,"_149":86,"_36":208,"_38":26,"_68":21,"_151":209,"_69":24,"_153":-5,"_180":210,"_17":211},{"_32":200,"_13":199,"_65":193,"_42":-5,"_34":35,"_148":39,"_149":86,"_36":201,"_38":26,"_68":202,"_151":-5,"_69":24,"_153":-5,"_180":203,"_17":204},{"_32":190,"_13":191,"_65":192,"_42":193,"_34":35,"_148":39,"_149":86,"_36":194,"_38":26,"_68":195,"_151":196,"_69":24,"_153":-5,"_180":197,"_17":198},{"_32":183,"_13":184,"_65":185,"_42":-5,"_34":35,"_148":39,"_149":86,"_36":186,"_38":26,"_68":21,"_151":187,"_69":24,"_153":-5,"_180":188,"_17":189},{"_32":175,"_13":176,"_65":84,"_42":-5,"_34":35,"_148":39,"_149":86,"_36":177,"_38":26,"_68":178,"_151":179,"_69":24,"_153":-5,"_180":181,"_17":182},"dae3e8e6-5a1f-11f1-a81f-ee650bb23af1","main.tsx",["D",1779922828699],"http","// Last Model Standing — OpenRouter OpenMic.\n// HTTP entrypoint. Serves the static frontend and exposes /api/lineup, /api/joke, /api/audio.\n\nimport { Hono } from \"npm:hono\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { cleanJoke, FAKE_JOKES, MODELS, PROMPT } from \"./shared/models.ts\";\n\nconst app = new Hono();\n\n// Surface full stack traces in val logs.\napp.onError((err) => Promise.reject(err));\n\n// Static frontend — index.html at root, everything else under /frontend/*.\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path));\n\n// View source — required for remixability.\napp.get(\"/source\", (c) => c.redirect(parseVal(import.meta.url).links.self.val));\n\n// Lineup — single source of truth for client + server.\napp.get(\"/api/lineup\", (c) => c.json({ prompt: PROMPT, models: MODELS }));\n\n// Joke generator. Falls back to a canned joke in test mode or when no key is set.\napp.post(\"/api/joke\", async (c) => {\n const body = await c.req.json().catch(() => ({})) as {\n modelId?: string;\n testMode?: boolean;\n };\n const model = MODELS.find((m) => m.id === body.modelId) ?? MODELS[0];\n const testMode = body.testMode !== false;\n const key = Deno.env.get(\"OPENROUTER_API_KEY\");\n\n if (testMode || !key) {\n const index = Math.max(0, MODELS.findIndex((m) => m.id === model.id));\n return c.json({ joke: FAKE_JOKES[index % FAKE_JOKES.length], mode: \"test\", model });\n }\n\n const response = await fetch(\"https://openrouter.ai/api/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"content-type\": \"application/json\",\n authorization: `Bearer ${key}`,\n \"http-referer\": new URL(c.req.url).origin,\n \"x-title\": \"Last Model Standing OpenMic\",\n },\n body: JSON.stringify({\n model: model.id,\n messages: [\n { role: \"system\", content: \"Return exactly one original joke. No setup explanation, no commentary, no markdown.\" },\n { role: \"user\", content: PROMPT },\n ],\n temperature: 0.95,\n max_tokens: 90,\n }),\n });\n\n if (!response.ok) {\n return c.json(\n { error: \"OpenRouter request failed\", detail: (await response.text()).slice(0, 400) },\n 424,\n );\n }\n const data = await response.json();\n return c.json({\n joke: cleanJoke(data?.choices?.[0]?.message?.content ?? \"\"),\n mode: \"live\",\n model,\n });\n});\n\n// Audio synthesis via ElevenLabs. Returns a 409 with browserVoiceFallback when no key,\n// so the client can fall back to the Web Speech API.\napp.post(\"/api/audio\", async (c) => {\n const body = await c.req.json().catch(() => ({})) as {\n modelId?: string;\n text?: string;\n };\n const text = String(body.text ?? \"\").slice(0, 1200);\n const model = MODELS.find((m) => m.id === body.modelId) ?? MODELS[0];\n const key = Deno.env.get(\"ELEVENLABS_API_KEY\") ?? Deno.env.get(\"XI_API_KEY\");\n\n if (!text) return c.json({ error: \"Missing text\" }, 400);\n if (!key) return c.json({ error: \"No ElevenLabs key configured\", browserVoiceFallback: true }, 409);\n\n const response = await fetch(\n `https://api.elevenlabs.io/v1/text-to-speech/${model.voiceId}`,\n {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\", \"xi-api-key\": key, accept: \"audio/mpeg\" },\n body: JSON.stringify({\n text,\n model_id: \"eleven_multilingual_v2\",\n voice_settings: {\n stability: 0.44,\n similarity_boost: 0.78,\n style: 0.32,\n use_speaker_boost: true,\n },\n }),\n },\n );\n\n if (!response.ok) {\n return c.json(\n { error: \"ElevenLabs request failed\", detail: (await response.text()).slice(0, 400) },\n 424,\n );\n }\n return new Response(response.body, {\n headers: { \"content-type\": \"audio/mpeg\", \"cache-control\": \"no-store\" },\n });\n});\n\nexport default app.fetch;\n","children",[],[176],"dae3d766-5a1f-11f1-a81f-ee650bb23af1","README.md","019e6baa-fded-755b-bced-2f4f20228c13",["D",1779922828699],"# Last Model Standing — OpenRouter OpenMic\n\nA comedy roast eval: 10 LLMs each tell one joke. You rate them 1–10. Highest score wins.\n\nModels are called via [OpenRouter](https://openrouter.ai/); each gets a distinct [ElevenLabs](https://elevenlabs.io/) voice for delivery. Falls back to canned jokes and the browser's Web Speech API when keys aren't configured.\n\n## Architecture\n\n```mermaid\nflowchart LR\n UI[frontend/index.html
+ script.ts + style.css]\n API[main.tsx
Hono server]\n SHARED[shared/models.ts]\n OR[OpenRouter]\n EL[ElevenLabs]\n\n UI -->|GET /api/lineup| API\n UI -->|POST /api/joke| API\n UI -->|POST /api/audio| API\n API -->|imports| SHARED\n UI -->|imports via /api/lineup| SHARED\n API -->|OPENROUTER_API_KEY| OR\n API -->|ELEVENLABS_API_KEY| EL\n OR -->|joke text| API\n EL -->|mp3 stream| API\n```\n\n## File layout\n\n| File | Purpose |\n| --- | --- |\n| `main.tsx` | Hono server, routes, OpenRouter + ElevenLabs proxies |\n| `shared/models.ts` | `MODELS` lineup, `PROMPT`, `FAKE_JOKES`, `cleanJoke` — shared between server and (via `/api/lineup`) client |\n| `frontend/index.html` | Stage scaffold |\n| `frontend/script.ts` | Client logic — fetches lineup, prepares show, plays audio, scores |\n| `frontend/style.css` | Theme |\n\n## Env vars\n\n| Var | Effect when missing |\n| --- | --- |\n| `OPENROUTER_API_KEY` | Falls back to canned jokes from `FAKE_JOKES` |\n| `ELEVENLABS_API_KEY` (or `XI_API_KEY`) | Falls back to browser TTS via `SpeechSynthesisUtterance` |\n\n## Modes\n\n- **Test mode** (default): canned jokes, no API calls to OpenRouter.\n- **Live mode**: toggle the \"live jokes\" checkbox in the UI, or append `?live=1`. Hits OpenRouter for real model jokes.\n\n## Routes\n\n| Method | Path | Returns |\n| --- | --- | --- |\n| GET | `/` | The stage UI |\n| GET | `/frontend/*` | Static assets (CSS, transpiled TS) |\n| GET | `/source` | Redirect to this val's source on Val Town |\n| GET | `/api/lineup` | `{ prompt, models }` |\n| POST | `/api/joke` | `{ joke, mode, model }` |\n| POST | `/api/audio` | `audio/mpeg` stream (or JSON error with `browserVoiceFallback`) |\n\n## Remix\n\nClick \"view source\" in the bottom-right of the live page, or fork from Val Town directly.\n",[],[184],"dae3bbfa-5a1f-11f1-a81f-ee650bb23af1","models.ts","019e6baa-fded-755b-bced-26455988a5da","019e6baa-fded-755b-bced-28f459af30a2",["D",1779922828699],"script","// Shared model lineup, prompt, and helpers used by both the server (main.tsx)\n// and exposed to the client via /api/lineup.\n\nconst ICON = (slug: string) =>\n `https://api.iconify.design/simple-icons:${slug}.svg?color=%23fff6df`;\n\nexport const PROMPT =\n \"Tell me your funniest joke. No preamble, no postamble. The goal is to make me laugh.\";\n\nexport type Model = {\n id: string;\n house: string;\n logo: string;\n mark: string;\n color: string;\n voiceId: string;\n};\n\n// Order matches the live show order — opening acts first, headliners last.\nexport const MODELS: Model[] = [\n { id: \"x-ai/grok-4.3\", house: \"xAI\", logo: ICON(\"x\"), mark: \"xAI\", color: \"#f97316\", voiceId: \"pNInz6obpgDQGcFmaJgB\" },\n { id: \"meta-llama/llama-4-maverick\", house: \"Meta\", logo: ICON(\"meta\"), mark: \"L4\", color: \"#1877f2\", voiceId: \"MF3mGyEYCl7XYWbV9V6O\" },\n { id: \"deepseek/deepseek-v4-pro\", house: \"DeepSeek\", logo: ICON(\"deepseek\"), mark: \"DS\", color: \"#38bdf8\", voiceId: \"TxGEqnHWrfWFTfGW9XjX\" },\n { id: \"qwen/qwen3.7-max\", house: \"Qwen\", logo: ICON(\"qwen\"), mark: \"Q\", color: \"#34d399\", voiceId: \"yoZ06aMxZJJ28mfd3POQ\" },\n { id: \"mistralai/mistral-medium-3-5\", house: \"Mistral\", logo: ICON(\"mistralai\"), mark: \"M\", color: \"#e879f9\", voiceId: \"21m00Tcm4TlvDq8ikWAM\" },\n { id: \"openai/gpt-4o\", house: \"OpenAI\", logo: ICON(\"openai\"), mark: \"4o\", color: \"#a78bfa\", voiceId: \"VR6AewLTigWG4xSOukaG\" },\n { id: \"~anthropic/claude-haiku-latest\", house: \"Anthropic\", logo: ICON(\"anthropic\"), mark: \"A\", color: \"#fb7185\", voiceId: \"AZnzlk1XvdvUeBnXmlld\" },\n { id: \"google/gemini-3.5-flash\", house: \"Google\", logo: ICON(\"googlegemini\"), mark: \"G\", color: \"#8ab4ff\", voiceId: \"EXAVITQu4vr4xnSDxMaL\" },\n { id: \"anthropic/claude-opus-4.7\", house: \"Anthropic\", logo: ICON(\"anthropic\"), mark: \"A\", color: \"#ff6b4a\", voiceId: \"ErXwobaYiN019PkySvjV\" },\n { id: \"openai/gpt-5.5\", house: \"OpenAI\", logo: ICON(\"openai\"), mark: \"OA\", color: \"#2dd4bf\", voiceId: \"21m00Tcm4TlvDq8ikWAM\" },\n];\n\nexport const FAKE_JOKES = [\n \"I only know 25 letters of the alphabet. I don't know y.\",\n \"I used to hate facial hair, but then it grew on me.\",\n \"Why did the scarecrow win an award? Because he was outstanding in his field.\",\n \"I asked my dog what's two minus two. He said nothing.\",\n \"I don't trust stairs. They're always up to something.\",\n \"Why don't skeletons fight each other? They don't have the guts.\",\n \"I ordered a chicken and an egg online. I'll let you know.\",\n \"A cheese factory exploded in France. Da brie was everywhere.\",\n \"I told my suitcase there would be no vacation this year. Now I'm dealing with emotional baggage.\",\n \"Why did the coffee file a police report? It got mugged.\",\n];\n\nexport function cleanJoke(text: string): string {\n return text\n .replace(/^(['\"“”]+|joke:\\s*)/i, \"\")\n .replace(/(['\"“”]+)$/g, \"\")\n .trim()\n .slice(0, 900);\n}\n",[],[199,191],"shared","dae3d572-5a1f-11f1-a81f-ee650bb23af1",["D",1779922828699],"directory",[172],[199],"dae37514-5a1f-11f1-a81f-ee650bb23af1","style.css","019e6baa-fded-755b-bced-1c708aa3ca96",["D",1779922828699],":root {\n --ink: #fff6df;\n --muted: #b9a280;\n --gold: #f2c166;\n --panel: rgba(18, 8, 8, 0.78);\n --line: rgba(242, 193, 102, 0.25);\n --active: #2dd4bf;\n}\n* { box-sizing: border-box; }\nhtml, body {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n min-height: 100%;\n background: #130707;\n color: var(--ink);\n font-family: Georgia, 'Times New Roman', serif;\n overflow: hidden;\n}\nbody {\n background:\n radial-gradient(circle at 50% 0%, rgba(255, 219, 146, 0.16), transparent 28rem),\n repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 42px),\n repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 84px),\n linear-gradient(135deg, #210b0d, #080505 48%, #24090d);\n}\nbody:before, body:after {\n content: \"\";\n position: fixed;\n top: 0;\n height: 100vh;\n width: clamp(52px, 10vw, 132px);\n z-index: 0;\n background: repeating-linear-gradient(90deg, #5f0d15 0 15px, #9b1f27 15px 29px, #420912 29px 43px);\n box-shadow: inset 0 0 44px rgba(0, 0, 0, 0.72);\n}\nbody:before { left: 0; clip-path: polygon(0 0, 100% 0, 55% 100%, 0 100%); }\nbody:after { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 45% 100%); }\n\nbutton, input { font: inherit; }\n\n.app {\n position: relative;\n z-index: 1;\n height: 100vh;\n width: 100%;\n max-width: 100vw;\n overflow: hidden;\n padding: 14px 16px;\n display: grid;\n grid-template-rows: 130px minmax(0, 1fr);\n gap: 12px;\n}\n.marquee { display: grid; place-items: center; text-align: center; min-width: 0; overflow: hidden; }\n.kicker { color: var(--gold); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; margin-bottom: 2px; }\n.subkicker { color: var(--gold); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; margin-top: 6px; opacity: 0.85; display: inline-flex; align-items: center; gap: 6px; }\n.vt-inline { height: 36px; width: auto; vertical-align: middle; border-radius: 4px; }\nh1 { margin: 0; font-size: clamp(35px, 5.2vw, 70px); line-height: 0.84; letter-spacing: 0; text-shadow: 0 12px 34px rgba(0, 0, 0, 0.65); }\n\n.main {\n min-height: 0;\n min-width: 0;\n width: 100%;\n max-width: 100%;\n overflow: hidden;\n display: grid;\n grid-template-columns: minmax(0, 1fr) 330px;\n gap: 12px;\n}\n.stage, .lineup {\n min-width: 0;\n min-height: 0;\n border: 1px solid var(--line);\n background: var(--panel);\n box-shadow: 0 22px 70px rgba(0, 0, 0, 0.44), inset 0 1px rgba(255, 255, 255, 0.05);\n border-radius: 7px;\n}\n.stage {\n position: relative;\n padding: 16px 22px 13px;\n display: grid;\n grid-template-rows: auto minmax(0, 1fr) auto;\n overflow: hidden;\n}\n.stage:before {\n content: none;\n}\n.prompt {\n position: relative;\n z-index: 1;\n margin: 0 auto 4px;\n max-width: 920px;\n text-align: center;\n color: #ffeabd;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: clamp(18px, 1.7vw, 24px);\n line-height: 1.25;\n}\n.performer {\n position: relative;\n z-index: 1;\n min-height: 0;\n display: grid;\n align-content: center;\n justify-items: center;\n text-align: center;\n gap: 8px;\n}\n.logo-orb {\n width: min(26vh, 250px);\n aspect-ratio: 1;\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: radial-gradient(circle, color-mix(in srgb, var(--active) 42%, transparent), rgba(0, 0, 0, 0.12) 62%, transparent 70%);\n box-shadow: 0 0 80px color-mix(in srgb, var(--active) 34%, transparent);\n}\n.vt-curtain-logo { display: none; }\n.logo-stage {\n width: 46%;\n height: 46%;\n object-fit: contain;\n filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));\n}\n.logo-fallback {\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n font-size: clamp(38px, 5vw, 72px);\n color: var(--ink);\n}\n.logo-hidden { display: none !important; }\n.model-id {\n margin: 0;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: clamp(28px, 4.1vw, 58px);\n line-height: 0.96;\n color: var(--ink);\n overflow-wrap: anywhere;\n}\n.house { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; }\n.status {\n min-height: 39px;\n display: grid;\n place-items: center;\n padding: 7px 16px;\n border-top: 1px solid var(--line);\n border-bottom: 1px solid var(--line);\n color: #ffeabd;\n font-size: clamp(21px, 2.2vw, 31px);\n}\ncanvas {\n width: min(610px, 100%);\n height: 64px;\n border-radius: 4px;\n background: rgba(0, 0, 0, 0.25);\n border: 1px solid rgba(255, 255, 255, 0.08);\n}\n.controls, .score-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }\n.action {\n border: 1px solid rgba(255, 255, 255, 0.16);\n border-radius: 999px;\n color: #180b05;\n background: linear-gradient(#ffe4a1, #d79b38);\n padding: 10px 15px;\n cursor: pointer;\n box-shadow: 0 9px 26px rgba(0, 0, 0, 0.27);\n}\n.action.secondary { color: var(--ink); background: rgba(255, 255, 255, 0.08); }\n.action:disabled { opacity: 0.48; cursor: not-allowed; }\n.mode { color: var(--muted); font-size: 14px; display: inline-flex; gap: 7px; align-items: center; }\n.mode input { accent-color: var(--gold); }\n\n.scorebar {\n position: relative;\n z-index: 1;\n display: grid;\n grid-template-columns: 52px minmax(190px, 1fr) 52px 92px 138px;\n gap: 12px;\n align-items: center;\n padding-top: 10px;\n border-top: 1px solid var(--line);\n}\n.emoji { font-size: 40px; text-align: center; }\n#score { width: 100%; accent-color: var(--gold); }\n.score-readout { color: var(--gold); font-size: 30px; text-align: center; font-variant-numeric: tabular-nums; }\n\n.lineup { padding: 12px; overflow: hidden; }\n.lineup h3 { margin: 2px 3px 9px; color: var(--gold); font-size: 25px; }\n.contestant {\n display: grid;\n grid-template-columns: 30px minmax(0, 1fr) 48px;\n gap: 8px;\n align-items: center;\n min-height: 52px;\n padding: 7px 6px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n}\n.contestant.active { background: rgba(255, 255, 255, 0.08); outline: 1px solid var(--line); }\n.logo-mini {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n display: grid;\n place-items: center;\n background: color-mix(in srgb, var(--c) 22%, rgba(255, 255, 255, 0.06));\n border: 1px solid color-mix(in srgb, var(--c) 48%, rgba(255, 255, 255, 0.1));\n}\n.logo-mini img { width: 17px; height: 17px; object-fit: contain; }\n.mini-fallback { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--ink); }\n.model-name {\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-weight: 700;\n font-size: 13px;\n line-height: 1.06;\n overflow-wrap: anywhere;\n}\n.provider { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }\n.score-pill {\n text-align: center;\n color: var(--gold);\n border: 1px solid rgba(242, 193, 102, 0.26);\n border-radius: 999px;\n padding: 4px 6px;\n font-variant-numeric: tabular-nums;\n}\n\n.results {\n display: none;\n position: fixed;\n z-index: 4;\n inset: 16px;\n border: 1px solid var(--line);\n border-radius: 8px;\n background: rgba(18, 8, 8, 0.95);\n padding: 28px;\n overflow: hidden;\n}\n.results.show { display: block; }\n.results h2 { margin: 0 0 12px; font-size: 70px; line-height: 0.9; }\n.rank {\n display: grid;\n grid-template-columns: 48px 1fr 78px;\n gap: 10px;\n align-items: center;\n padding: 10px 0;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n font-size: 21px;\n}\n.rank span:nth-child(2) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }\n\n.toast {\n position: fixed;\n left: 50%;\n bottom: 16px;\n transform: translateX(-50%);\n z-index: 5;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s;\n background: #fff1c5;\n color: #1b0c06;\n border-radius: 999px;\n padding: 9px 13px;\n}\n.toast.show { opacity: 1; }\n\n.source-link {\n position: fixed;\n bottom: 8px;\n right: 12px;\n z-index: 6;\n color: var(--muted);\n font-size: 11px;\n text-decoration: none;\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n.source-link:hover { color: var(--gold); }\n\n@media (max-width: 1050px) {\n html, body { overflow: auto; }\n .app { height: auto; min-height: 100vh; grid-template-rows: auto auto; }\n .main { grid-template-columns: 1fr; overflow: visible; }\n .stage, .lineup { min-height: 620px; }\n .lineup { min-height: 0; }\n .scorebar { grid-template-columns: 42px 1fr 42px; }\n .score-readout, .score-controls { grid-column: 1 / -1; }\n}\n@media (max-height: 760px) and (min-width: 1051px) {\n .app { padding: 10px 13px; grid-template-rows: 112px minmax(0, 1fr); gap: 10px; }\n .main { grid-template-columns: minmax(0, 1fr) 315px; gap: 10px; }\n h1 { font-size: 52px; }\n .kicker { font-size: 11px; }\n .stage { padding: 12px 18px 10px; }\n .prompt { font-size: 23px; }\n .logo-orb { width: 190px; }\n .model-id { font-size: 39px; }\n .status { font-size: 23px; min-height: 34px; }\n canvas { height: 56px; }\n .contestant { min-height: 47px; }\n .model-name { font-size: 12px; }\n .emoji { font-size: 32px; }\n .score-readout { font-size: 26px; }\n .lineup h3 { font-size: 23px; margin-bottom: 6px; }\n}\n",[],[155,206],"dae32532-5a1f-11f1-a81f-ee650bb23af1","script.ts","019e6baa-fded-755b-bced-18732f1ca08e",["D",1779922828699],"// Client logic — fetches lineup from /api/lineup on load, drives the stage UI.\n// Behavior intentionally identical to the previous inline script; only structure changed.\n\ntype Model = {\n id: string;\n house: string;\n logo: string;\n mark: string;\n color: string;\n voiceId: string;\n};\n\ntype Prepared = {\n joke: string;\n audioUrl: string | null;\n audioMode: string;\n mode: string;\n} | null;\n\nlet MODELS: Model[] = [];\nlet PROMPT = \"\";\n\nconst state = {\n index: 0,\n scores: [] as (number | null)[],\n prepared: [] as Prepared[],\n preparing: false,\n playing: false,\n revealed: false,\n};\n\nconst els = {\n stage: document.getElementById(\"stage\") as HTMLElement,\n logoOrb: document.getElementById(\"logoOrb\") as HTMLElement,\n currentName: document.getElementById(\"currentName\") as HTMLElement,\n currentMeta: document.getElementById(\"currentMeta\") as HTMLElement,\n status: document.getElementById(\"status\") as HTMLElement,\n prepareBtn: document.getElementById(\"prepareBtn\") as HTMLButtonElement,\n revealBtn: document.getElementById(\"revealBtn\") as HTMLButtonElement,\n playBtn: document.getElementById(\"playBtn\") as HTMLButtonElement,\n submitBtn: document.getElementById(\"submitBtn\") as HTMLButtonElement,\n score: document.getElementById(\"score\") as HTMLInputElement,\n scoreValue: document.getElementById(\"scoreValue\") as HTMLElement,\n lineup: document.getElementById(\"lineup\") as HTMLElement,\n liveToggle: document.getElementById(\"liveToggle\") as HTMLInputElement,\n wave: document.getElementById(\"wave\") as HTMLCanvasElement,\n results: document.getElementById(\"results\") as HTMLElement,\n ranking: document.getElementById(\"ranking\") as HTMLElement,\n resetBtn: document.getElementById(\"resetBtn\") as HTMLElement,\n toast: document.getElementById(\"toast\") as HTMLElement,\n prompt: document.getElementById(\"prompt\") as HTMLElement,\n};\n\nlet audioCtx: AudioContext | null = null;\nlet analyser: AnalyserNode | null = null;\nlet dataArray: Uint8Array | null = null;\nlet sourceNode: MediaElementAudioSourceNode | null = null;\nlet currentAudio: HTMLAudioElement | null = null;\n\nconst model = () => MODELS[state.index];\nconst ready = (i = state.index) => !!state.prepared[i];\n\nfunction toast(message: string) {\n els.toast.textContent = message;\n els.toast.classList.add(\"show\");\n setTimeout(() => els.toast.classList.remove(\"show\"), 2200);\n}\n\nfunction logoMarkup(m: Model, stage = false) {\n const fallbackCls = stage ? \"logo-fallback\" : \"mini-fallback\";\n const fallback = `${m.mark}`;\n if (m.logo) {\n const imgCls = stage ? \"logo-stage\" : \"\";\n return ` $\"${m.house}$ ${fallback}`;\n }\n return `${m.mark}`;\n}\n\nfunction hydrateLogos(root: ParentNode = document) {\n root.querySelectorAll(\"img[data-fallback]\").forEach((img) => {\n const fallback = img.nextElementSibling;\n const fail = () => {\n img.style.display = \"none\";\n if (fallback) fallback.classList.remove(\"logo-hidden\");\n };\n img.addEventListener(\"error\", fail, { once: true });\n if (img.complete && img.naturalWidth === 0) fail();\n });\n}\n\nfunction renderLineup() {\n els.lineup.innerHTML = MODELS.map((m, i) => {\n const scored = state.scores[i] !== null && state.scores[i] !== undefined;\n const isCurrent = i === state.index && state.revealed;\n // Hide contestants that haven't gone yet — only show current performer and already-scored.\n if (!scored && !isCurrent) return \"\";\n return `\n

\n ${logoMarkup(m, false)}\n \n ${m.id}\n ${m.house}${ready(i) ? \" · ready\" : \"\"}\n \n ${state.scores[i]?.toFixed(1) ?? \"–\"}\n

\n `;\n }).join(\"\");\n hydrateLogos(els.lineup);\n}\n\nfunction render() {\n const m = model();\n if (!m) return;\n\n const allPrepped = state.prepared.length > 0 && state.prepared.every((p) => !!p);\n\n // Pre-show curtain: don't reveal the first act until host manually brings them up.\n if (!state.revealed) {\n els.stage.style.setProperty(\"--active\", \"var(--gold)\");\n els.logoOrb.innerHTML = \"\";\n els.currentName.textContent = \"\";\n els.currentMeta.textContent = \"\";\n els.scoreValue.textContent = Number(els.score.value).toFixed(1);\n\n els.prepareBtn.hidden = false;\n els.prepareBtn.disabled = state.preparing || allPrepped;\n els.revealBtn.hidden = !allPrepped;\n els.revealBtn.textContent = state.index === 0 ? \"Bring up first act\" : \"Bring up next act\";\n els.playBtn.hidden = true;\n els.submitBtn.hidden = true;\n\n els.status.textContent = state.preparing\n ? \"Hang tight — prepping all ten acts.\"\n : allPrepped\n ? state.index === 0\n ? \"Show is ready. Bring up the first act when you are.\"\n : `Ready for act ${state.index + 1} of ${MODELS.length} when you are.`\n : \"Hit Prepare show to begin.\";\n\n renderLineup();\n drawIdle();\n return;\n }\n\n // Showtime.\n els.stage.style.setProperty(\"--active\", m.color);\n els.logoOrb.innerHTML = logoMarkup(m, true);\n hydrateLogos(els.logoOrb);\n els.currentName.textContent = m.id;\n els.currentMeta.textContent = m.house;\n els.scoreValue.textContent = Number(els.score.value).toFixed(1);\n\n els.prepareBtn.hidden = true;\n els.revealBtn.hidden = true;\n els.playBtn.hidden = false;\n els.submitBtn.hidden = false;\n els.playBtn.disabled = !ready() || state.playing;\n els.submitBtn.disabled = !ready() || state.playing;\n\n els.status.textContent = ready() ? `Joke ready for ${m.id}` : \"Prepare the show, then press play.\";\n renderLineup();\n drawIdle();\n}\n\nfunction drawIdle() {\n if (!MODELS.length) return;\n const ctx = els.wave.getContext(\"2d\")!;\n const w = els.wave.width;\n const h = els.wave.height;\n const c = model().color;\n ctx.clearRect(0, 0, w, h);\n ctx.fillStyle = \"rgba(0,0,0,.14)\";\n ctx.fillRect(0, 0, w, h);\n for (let x = 0; x < w; x += 13) {\n const y = h / 2 + Math.sin(x / 42 + performance.now() / 900) * 12;\n const bar = 7 + Math.abs(Math.sin(x / 69 + state.index)) * 25;\n ctx.fillStyle = c;\n ctx.globalAlpha = 0.32 + (x % 39) / 100;\n ctx.fillRect(x, y - bar / 2, 6, bar);\n }\n ctx.globalAlpha = 1;\n}\n\nfunction animateWave() {\n const ctx = els.wave.getContext(\"2d\")!;\n const w = els.wave.width;\n const h = els.wave.height;\n const c = model().color;\n function frame() {\n ctx.clearRect(0, 0, w, h);\n ctx.fillStyle = \"rgba(0,0,0,.16)\";\n ctx.fillRect(0, 0, w, h);\n if (analyser && dataArray) {\n analyser.getByteFrequencyData(dataArray);\n const step = Math.max(1, Math.floor(dataArray.length / 74));\n for (let i = 0; i < 74; i++) {\n const v = dataArray[i * step] / 255;\n const bar = Math.max(5, v * h * 0.9);\n const x = i * (w / 74) + 2;\n ctx.fillStyle = c;\n ctx.globalAlpha = 0.35 + v * 0.65;\n ctx.fillRect(x, (h - bar) / 2, Math.max(4, w / 100), bar);\n }\n } else {\n drawIdle();\n }\n ctx.globalAlpha = 1;\n if (state.playing) requestAnimationFrame(frame);\n }\n frame();\n}\n\nasync function prepareOne(i: number) {\n const m = MODELS[i];\n els.status.textContent = `Preparing act ${i + 1} of ${MODELS.length}…`;\n renderLineup();\n const jokeRes = await fetch(\"/api/joke\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ modelId: m.id, testMode: !els.liveToggle.checked }),\n });\n const jokeData = await jokeRes.json();\n if (!jokeRes.ok) throw new Error(jokeData.error || \"joke failed\");\n\n let audioUrl: string | null = null;\n let audioMode = \"elevenlabs\";\n try {\n const audioRes = await fetch(\"/api/audio\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ modelId: m.id, text: jokeData.joke }),\n });\n if (!audioRes.ok) throw new Error(\"audio fallback\");\n audioUrl = URL.createObjectURL(await audioRes.blob());\n } catch {\n audioMode = \"browser\";\n }\n state.prepared[i] = { joke: jokeData.joke, audioUrl, audioMode, mode: jokeData.mode };\n}\n\nasync function prepareShow() {\n state.preparing = true;\n els.prepareBtn.disabled = true;\n try {\n for (let i = 0; i < MODELS.length; i++) {\n if (!state.prepared[i]) {\n await prepareOne(i);\n render();\n }\n }\n els.status.textContent = \"Show is ready. Bring up the first act when you are.\";\n toast(\"Show prepared. Reveal when ready.\");\n } catch (e) {\n els.status.textContent = \"Prep stopped: \" + (e as Error).message;\n toast(\"Prep stopped. You can retry.\");\n } finally {\n state.preparing = false;\n render();\n }\n}\n\nasync function play() {\n if (!ready()) return;\n const item = state.prepared[state.index]!;\n if (currentAudio) {\n currentAudio.pause();\n currentAudio = null;\n }\n state.playing = true;\n render();\n animateWave();\n if (item.audioUrl) {\n currentAudio = new Audio(item.audioUrl);\n try {\n audioCtx = audioCtx || new AudioContext();\n analyser = audioCtx.createAnalyser();\n analyser.fftSize = 256;\n dataArray = new Uint8Array(analyser.frequencyBinCount);\n sourceNode = audioCtx.createMediaElementSource(currentAudio);\n sourceNode.connect(analyser);\n analyser.connect(audioCtx.destination);\n } catch {}\n currentAudio.onended = () => {\n state.playing = false;\n render();\n };\n await currentAudio.play();\n } else {\n const utter = new SpeechSynthesisUtterance(item.joke);\n utter.rate = 0.95 + (state.index % 4) * 0.04;\n utter.pitch = 0.78 + (state.index % 5) * 0.09;\n utter.onend = () => {\n state.playing = false;\n render();\n };\n speechSynthesis.cancel();\n speechSynthesis.speak(utter);\n }\n}\n\nfunction submitScore() {\n state.scores[state.index] = Number(els.score.value);\n speechSynthesis.cancel();\n if (currentAudio) currentAudio.pause();\n state.playing = false;\n if (state.index === MODELS.length - 1) return showResults();\n state.index++;\n state.revealed = false;\n els.score.value = \"5.0\";\n render();\n}\n\nfunction showResults() {\n const ranked = MODELS\n .map((m, i) => ({ ...m, score: state.scores[i] ?? 0 }))\n .sort((a, b) => b.score - a.score);\n els.ranking.innerHTML = ranked.map((m, i) => `\n

\n #${i + 1}\n ${m.id}${m.house}\n ${m.score.toFixed(1)}\n

\n `).join(\"\");\n els.results.classList.add(\"show\");\n}\n\nasync function init() {\n const res = await fetch(\"/api/lineup\");\n const data = await res.json() as { prompt: string; models: Model[] };\n MODELS = data.models;\n PROMPT = data.prompt;\n state.scores = Array(MODELS.length).fill(null);\n state.prepared = Array(MODELS.length).fill(null);\n els.prompt.textContent = `\"${PROMPT}\"`;\n els.liveToggle.checked = new URL(location.href).searchParams.get(\"live\") === \"1\";\n\n els.prepareBtn.addEventListener(\"click\", prepareShow);\n els.revealBtn.addEventListener(\"click\", () => {\n state.revealed = true;\n render();\n });\n els.playBtn.addEventListener(\"click\", play);\n els.submitBtn.addEventListener(\"click\", submitScore);\n els.score.addEventListener(\"input\", () => {\n els.scoreValue.textContent = Number(els.score.value).toFixed(1);\n });\n els.resetBtn.addEventListener(\"click\", () => {\n state.index = 0;\n state.scores.fill(null);\n state.prepared.forEach((p) => p?.audioUrl && URL.revokeObjectURL(p.audioUrl));\n state.prepared = Array(MODELS.length).fill(null);\n state.revealed = false;\n els.results.classList.remove(\"show\");\n els.score.value = \"5.0\";\n render();\n });\n setInterval(() => {\n if (!state.playing) drawIdle();\n }, 140);\n render();\n}\n\ninit();\n",[],[155,213],["D",1779922828699],[],[155,67],"dae3b9a2-5a1f-11f1-a81f-ee650bb23af1",["D",1779922828699],[168,169,170],[155],["D",1779922828699],{"_11":12,"_124":72},{"_11":12,"_119":120,"_71":72,"_30":70,"_121":122,"_123":24},{"_38":39,"_13":16,"_32":35,"_109":74,"_110":-5,"_111":-5,"_112":113,"_114":115,"_116":41,"_117":14,"_118":12},"ctx",{"_51":-5,"_143":263,"_264":265,"_266":267,"_268":24,"_269":24,"_270":24,"_271":86,"_272":-5,"_273":-7,"_274":-7,"_275":26,"_276":24,"_277":24,"_278":-5,"_279":24,"_280":24,"_281":24,"_282":-5},"ENV",{"_234":235,"_236":237,"_238":16,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html