Spot the Model

\n Two answers to the same prompt — one from Claude Opus, one from Claude Sonnet.\n Can you tell which is which?\n

\n \n

\n \n \n \n );\n}\n\napp.get(\"/\", (c) => c.html(\"\" + String()));\n\nexport default app.fetch;\n",[62],"bf7e91ae-802f-41b6-8cab-8d1f686a20da",["D",1782930389202],"const KEY = \"spotthemodel_v1\";\nconst app = document.getElementById(\"app\");\n\nlet rounds = [];\nlet order = [];\nlet idx = 0;\nlet answered = false;\nlet items = [];\nlet headerEl = null;\nconst score = load();\n\nfunction fresh() { return { correct: 0, total: 0, streak: 0, best: 0 }; }\nfunction load() {\n try { return JSON.parse(localStorage.getItem(KEY)) || fresh(); }\n catch (e) { return fresh(); }\n}\nfunction save() { localStorage.setItem(KEY, JSON.stringify(score)); }\n\nfunction h(tag, attrs, ...kids) {\n const e = document.createElement(tag);\n const a = attrs || {};\n for (const k in a) {\n if (k === \"class\") e.className = a[k];\n else if (k === \"onclick\") e.onclick = a[k];\n else e.setAttribute(k, a[k]);\n }\n for (const kid of kids) if (kid != null) e.append(kid);\n return e;\n}\n\nfunction shuffle(a) {\n for (let i = a.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const t = a[i]; a[i] = a[j]; a[j] = t;\n }\n return a;\n}\n\nfunction header() {\n const acc = score.total ? Math.round((score.correct / score.total) * 100) : 0;\n return h(\"div\", { class: \"flex items-center justify-between text-sm text-neutral-400 mb-6\" },\n h(\"span\", {}, \"Streak \" + score.streak + \" · Best \" + score.best),\n h(\"span\", {}, score.total ? (score.correct + \"/\" + score.total + \" · \" + acc + \"%\") : \"no guesses yet\"),\n h(\"button\", { class: \"text-neutral-500 hover:text-neutral-200 underline\", onclick: share }, \"share\"),\n );\n}\n\nfunction render() {\n answered = false;\n const r = rounds[order[idx]];\n const opusLeft = Math.random() < 0.5;\n items = [\n { text: opusLeft ? r.opus : r.sonnet, isOpus: opusLeft },\n { text: opusLeft ? r.sonnet : r.opus, isOpus: !opusLeft },\n ];\n\n const cards = h(\"div\", { class: \"grid gap-3\" });\n const result = h(\"div\", { class: \"mt-5 min-h-[4rem]\" });\n\n for (const it of items) {\n it.btn = h(\"button\", {\n class: \"w-full text-left p-4 rounded-xl border border-neutral-700 bg-neutral-900 hover:border-neutral-400 transition leading-relaxed\",\n onclick: (function (item) { return function () { if (!answered) { answered = true; reveal(item.isOpus, result); } }; })(it),\n }, it.text);\n it.label = h(\"div\", { class: \"mt-2 mb-1 text-xs font-semibold tracking-wider h-4\" }, \"\");\n cards.append(h(\"div\", {}, it.btn, it.label));\n }\n\n headerEl = header();\n app.replaceChildren(h(\"div\", {},\n headerEl,\n h(\"div\", { class: \"text-center text-xs uppercase tracking-widest text-neutral-500 mb-2\" }, \"Which one is Claude Opus?\"),\n h(\"div\", { class: \"text-neutral-300 mb-5 text-center leading-relaxed\" }, r.prompt),\n cards,\n result,\n ));\n}\n\nfunction reveal(correct, result) {\n score.total++;\n if (correct) { score.correct++; score.streak++; if (score.streak > score.best) score.best = score.streak; }\n else score.streak = 0;\n save();\n\n for (const it of items) {\n it.btn.disabled = true;\n it.btn.classList.add(it.isOpus ? \"border-emerald-500\" : \"border-neutral-800\");\n it.label.textContent = it.isOpus ? \"OPUS\" : \"SONNET\";\n it.label.classList.add(it.isOpus ? \"text-emerald-400\" : \"text-neutral-500\");\n }\n\n result.replaceChildren(\n h(\"div\", { class: (correct ? \"text-emerald-400\" : \"text-rose-400\") + \" font-medium\" },\n correct ? \"Correct — you spotted Opus.\" : \"Nope — that one was Sonnet.\"),\n h(\"button\", {\n class: \"mt-3 w-full p-3 rounded-xl bg-neutral-100 text-neutral-900 font-medium hover:bg-white\",\n onclick: next,\n }, \"Next →\"),\n );\n\n const nh = header();\n if (headerEl) headerEl.replaceWith(nh);\n headerEl = nh;\n}\n\nfunction next() {\n const prev = order[idx];\n idx++;\n if (idx >= order.length) {\n shuffle(order);\n // don't let a prompt repeat back-to-back across the reshuffle\n if (order.length > 1 && order[0] === prev) {\n const t = order[0]; order[0] = order[1]; order[1] = t;\n }\n idx = 0;\n }\n render();\n}\n\nfunction share() {\n const acc = score.total ? Math.round((score.correct / score.total) * 100) : 0;\n const text = \"I can tell Claude Opus from Sonnet \" + acc + \"% of the time (\" + score.correct + \"/\" + score.total + \"). Can you? \" + location.origin;\n if (navigator.share) { navigator.share({ text: text }).catch(function () { copy(text); }); }\n else copy(text);\n}\nfunction copy(text) {\n if (navigator.clipboard) navigator.clipboard.writeText(text);\n}\n\nasync function init() {\n try {\n const res = await fetch(\"/rounds.json\");\n rounds = await res.json();\n } catch (e) {\n app.textContent = \"Failed to load rounds.\";\n return;\n }\n order = shuffle(rounds.map(function (_, i) { return i; }));\n render();\n}\n\ninit();\n",[87],"pulls","branches","forks","envVars",{"_198":20,"_200":20},"connections",{"_198":20,"_199":20},"count","unfilledCount","emptyCount",{"_31":187,"_13":87,"_60":86,"_41":-5,"_33":34,"_176":97,"_177":114,"_35":211,"_37":38,"_63":78,"_179":189,"_65":24,"_181":-5,"_205":212,"_150":213},{"_31":183,"_13":62,"_60":61,"_41":-5,"_33":34,"_176":90,"_177":114,"_35":208,"_37":38,"_63":64,"_179":185,"_65":24,"_181":14,"_205":209,"_150":210},{"_31":175,"_13":77,"_60":76,"_41":-5,"_33":34,"_176":71,"_177":114,"_35":204,"_37":20,"_63":78,"_179":180,"_65":24,"_181":-5,"_205":206,"_150":207},["D",1782922997255],"children",[],[77],["D",1782923039811],[],[62],["D",1782930389202],[],[87],["D",1782922786222],{"_11":12,"_149":68},{"_11":12,"_145":-5,"_67":68,"_25":66,"_146":147,"_148":24},{"_37":97,"_13":16,"_31":34,"_137":102,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":14,"_144":12},"ctx",{"_49":-5,"_169":251,"_252":253,"_254":255,"_256":24,"_257":24,"_258":24,"_259":114,"_260":-5,"_261":-7,"_262":-7,"_263":20,"_264":24,"_265":24,"_266":-5,"_267":24,"_268":24,"_269":24,"_270":-5},"ENV",{"_222":223,"_224":225,"_226":16,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","a3e067d4463eea85f6334f8e583e8516ae58c4f6","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