Mitch's Multifarious Three-Headed Hydra Chatbot

\n Ask a question. Three different LLMs from different companies will\n take turns answering one word at a time. They have\n not\n been told they are playing a turn-taking game; this is just how they\n work. You can see which model produced each word from the pretty\n colors.\n

\n Many people assume that LLMs have something akin to consciousness that\n persists during each session, but this experiment shows that that\n assumption is unnecessary. The reality is simpler; LLMs have separate\n thought processes for each individual token (i.e. a fragment of a\n word) that they produce.\n

\n\n

\n \n Claude\n (anthropic/claude-haiku-4.5)\n \n \n Gemini\n (google/gemini-2.5-flash)\n \n \n Llama\n (meta-llama/llama-3.1-8b-instruct)\n \n

\n\n \n\n

\n Ask a question below to watch the three heads write an answer\n together.\n

\n\n

\n\n \n\n \n \n",[137],"1f870eda-610c-4ba6-a305-e4c602df5af9","app.js","af03c952-852c-11f1-8306-1607ee4eb77e",5,["D",1784656238638],"script","// Frontend for the three-headed hydra. Opens an SSE stream and paints each\n// word as it arrives, colour-coded by the model that produced it.\n\nconst form = document.getElementById(\"chat-form\");\nconst input = document.getElementById(\"prompt-input\");\nconst sendButton = document.getElementById(\"send-button\");\nconst transcript = document.getElementById(\"transcript\");\nconst banner = document.getElementById(\"mode-banner\");\n\nconst HEAD_LABELS = { claude: \"Claude\", gemini: \"Gemini\", llama: \"Llama\" };\n\nlet streaming = false;\n\n// Show whether the server is using real models or the built-in simulation,\n// and fill the legend with the exact model names in use.\nasync function loadStatus() {\n try {\n const res = await fetch(\"/api/status\");\n const status = await res.json();\n\n for (const [head, model] of Object.entries(status.models || {})) {\n const el = document.querySelector(`.legend-model[data-head=\"${head}\"]`);\n if (el) el.textContent = `(${model})`;\n }\n\n // Only surface a banner when we're NOT live, to explain the simulation.\n if (status.mode !== \"live\") {\n banner.textContent =\n \"Demo mode: no OPENROUTER_API_KEY is set, so a simulated response plays back instead. The word-by-word, head-by-head mechanics are identical.\";\n banner.hidden = false;\n }\n } catch {\n /* status is a nicety; ignore failures */\n }\n}\n\nfunction clearEmptyState() {\n const empty = transcript.querySelector(\".empty-state\");\n if (empty) empty.remove();\n}\n\nfunction addMessage(role, roleLabel) {\n const wrap = document.createElement(\"div\");\n wrap.className = `message ${role}`;\n\n const label = document.createElement(\"div\");\n label.className = \"role\";\n label.textContent = roleLabel;\n\n const bubble = document.createElement(\"div\");\n bubble.className = \"bubble\";\n\n wrap.append(label, bubble);\n transcript.append(wrap);\n transcript.scrollTop = transcript.scrollHeight;\n return bubble;\n}\n\nfunction scrollToBottom() {\n transcript.scrollTop = transcript.scrollHeight;\n}\n\nfunction setStreaming(on) {\n streaming = on;\n sendButton.disabled = on;\n input.disabled = on;\n sendButton.textContent = on ? \"Writing…\" : \"Send\";\n}\n\nfunction submitPrompt(prompt) {\n clearEmptyState();\n addMessage(\"user\", \"You\").textContent = prompt;\n\n const bubble = addMessage(\"assistant\", \"The Hydra\");\n const cursor = document.createElement(\"span\");\n cursor.className = \"cursor\";\n bubble.append(cursor);\n\n setStreaming(true);\n\n const url = `/api/generate?prompt=${encodeURIComponent(prompt)}`;\n const source = new EventSource(url);\n\n const finish = () => {\n cursor.remove();\n source.close();\n setStreaming(false);\n input.focus();\n };\n\n source.addEventListener(\"token\", (event) => {\n const { head, text } = JSON.parse(event.data);\n const span = document.createElement(\"span\");\n span.className = `token head-${head}`;\n span.textContent = text;\n span.title = HEAD_LABELS[head] || head;\n bubble.insertBefore(span, cursor);\n scrollToBottom();\n });\n\n source.addEventListener(\"error\", (event) => {\n // Distinguish a server-sent \"error\" event from a dropped connection.\n let message = \"The connection was interrupted.\";\n if (event.data) {\n try {\n message = JSON.parse(event.data).message || message;\n } catch {\n /* keep default */\n }\n }\n const err = document.createElement(\"div\");\n err.className = \"error\";\n err.textContent = message;\n bubble.parentElement.append(err);\n finish();\n });\n\n source.addEventListener(\"done\", finish);\n}\n\nform.addEventListener(\"submit\", (event) => {\n event.preventDefault();\n if (streaming) return;\n const prompt = input.value.trim();\n if (!prompt) return;\n input.value = \"\";\n submitPrompt(prompt);\n});\n\nloadStatus();\n",[144],"pulls","branches","forks","envVars",{"_158":42,"_160":121},"connections",{"_158":121,"_159":121},"count","unfilledCount","emptyCount",{"_18":143,"_20":144,"_113":145,"_115":-5,"_116":68,"_117":146,"_119":38,"_22":175,"_65":121,"_122":148,"_123":149,"_125":26,"_126":-5,"_166":176,"_85":177},{"_18":136,"_20":137,"_113":138,"_115":-5,"_116":68,"_117":66,"_119":38,"_22":172,"_65":140,"_122":96,"_123":141,"_125":26,"_126":-5,"_166":173,"_85":174},{"_18":128,"_20":129,"_113":36,"_115":-5,"_116":68,"_117":130,"_119":38,"_22":169,"_65":42,"_122":132,"_123":133,"_125":26,"_126":134,"_166":170,"_85":171},{"_18":111,"_20":112,"_113":114,"_115":-5,"_116":68,"_117":118,"_119":38,"_22":165,"_65":121,"_122":96,"_123":124,"_125":26,"_126":-5,"_166":167,"_85":168},["D",1784656237214],"children",[],[112],["D",1784656228395],[],[129],["D",1784656688180],[],[137],["D",1784656238638],[],[144],["D",1784656158273],{"_16":17,"_83":79},{"_16":17,"_77":-5,"_78":79,"_33":34,"_80":81,"_82":26},{"_65":66,"_20":67,"_18":68,"_69":19,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":21,"_76":17},"ctx",{"_58":-5,"_104":215,"_216":217,"_218":219,"_220":26,"_221":26,"_222":26,"_223":38,"_224":-5,"_225":-7,"_226":-7,"_227":121,"_228":26,"_229":26,"_230":-5,"_231":26,"_232":26,"_233":26,"_234":-5},"ENV",{"_186":187,"_188":189,"_190":67,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Search