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",[134],"bf7e91ae-802f-41b6-8cab-8d1f686a20da","client.js","33ae5f24-7569-11f1-9e3b-1607ee4eb77e",["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",[142],"pulls","forks","envVars",{"_153":54,"_155":54},"connections",{"_153":54,"_154":54},"count","unfilledCount","emptyCount",{"_20":141,"_13":142,"_118":143,"_120":-5,"_121":21,"_122":30,"_124":50,"_22":166,"_29":137,"_126":127,"_128":145,"_130":38,"_131":-5,"_160":167,"_90":168},{"_20":133,"_13":134,"_118":48,"_120":-5,"_121":21,"_122":135,"_124":50,"_22":163,"_29":137,"_126":138,"_128":139,"_130":38,"_131":14,"_160":164,"_90":165},{"_20":116,"_13":117,"_118":119,"_120":-5,"_121":21,"_122":123,"_124":50,"_22":159,"_29":54,"_126":127,"_128":129,"_130":38,"_131":-5,"_160":161,"_90":162},["D",1782922997255],"children",[],[117],["D",1782923039811],[],[134],["D",1782930389202],[],[142],["D",1782922786222],{"_11":12,"_88":84},{"_11":12,"_82":-5,"_83":84,"_45":46,"_85":86,"_87":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_77":-5,"_78":-5,"_79":-5,"_80":14,"_81":12},"ctx",{"_70":-5,"_110":206,"_207":208,"_209":210,"_211":38,"_212":38,"_213":38,"_214":50,"_215":-5,"_216":-7,"_217":-7,"_218":54,"_219":38,"_220":38,"_221":-5,"_222":38,"_223":38,"_224":38,"_225":-5},"ENV",{"_177":178,"_179":180,"_181":26,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","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"]

Branches1

Branches
1