[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":21,"_26":27,"_28":27,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68dcbab6714c8191ae1b955bea8827a3","versionInt","title","Sandsynligheds-eksperimentet – Interaktiv Artefakt (react)","type","code/react","content","import React, { useMemo, useState, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nconst clamp = (n, min, max) => Math.max(min, Math.min(max, n));\n\nconst PRESETS = [\n {\n id: \"mj\",\n label: \"Michael Jordan\",\n prompt: \"Michael Jordan\",\n options: [\n { key: \"basketballspiller\", label: \"Basketballspiller\", base: 0.8, synonyms: [\"basketball\", \"chicago bulls\", \"nba\", \"spiller\", \"bulls\"] },\n { key: \"filmstjerne\", label: \"Filmstjerne\", base: 0.7, synonyms: [\"film\", \"skuespiller\", \"space jam\", \"hollywood\", \"black panther\"] },\n { key: \"tvstjerne\", label: \"Tv-stjerne\", base: 0.6, synonyms: [\"tv\", \"show\", \"program\", \"serie\"] },\n ],\n contextExamples: [\"(ingen)\", \"basketball\", \"skuespiller\", \"black panther\"],\n },\n {\n id: \"taylor\",\n label: \"Taylor Swift\",\n prompt: \"Taylor Swift\",\n options: [\n { key: \"sanger\", label: \"Sanger\", base: 0.85, synonyms: [\"musik\", \"sang\", \"album\", \"tour\", \"eras\"] },\n { key: \"skuespiller\", label: \"Skuespiller\", base: 0.35, synonyms: [\"film\", \"cameo\", \"rolle\"] },\n { key: \"forfatter\", label: \"Forfatter\", base: 0.15, synonyms: [\"bog\", \"tekst\", \"lyrics\"] },\n ],\n contextExamples: [\"(ingen)\", \"musik\", \"tour\", \"album\"],\n },\n {\n id: \"python\",\n label: \"Python\",\n prompt: \"Python\",\n options: [\n { key: \"programmeringssprog\", label: \"Programmeringssprog\", base: 0.75, synonyms: [\"kode\", \"programmering\", \"script\", \"pandas\", \"numpy\"] },\n { key: \"slange\", label: \"Slange\", base: 0.55, synonyms: [\"dyr\", \"krybdyr\", \"zoo\"] },\n { key: \"monty\", label: \"Monty Python (komik)\", base: 0.4, synonyms: [\"komedie\", \"sketch\", \"britisk\", \"flycircus\"] },\n ],\n contextExamples: [\"(ingen)\", \"programmering\", \"dyr\", \"komik\"],\n },\n];\n\n// Special regler for demo: hvis specifik kontekst, så tving en tolkning højt (pp)\nconst FORCED_RULES = [\n // Michael Jordan\n { presetId: \"mj\", keyword: \"basketball\", targetKey: \"basketballspiller\", targetPercent: 96 },\n { presetId: \"mj\", keyword: \"skuespiller\", targetKey: \"filmstjerne\", targetPercent: 96 },\n { presetId: \"mj\", keyword: \"black panther\", targetKey: \"filmstjerne\", targetPercent: 98 },\n\n // Taylor Swift\n { presetId: \"taylor\", keyword: \"musik\", targetKey: \"sanger\", targetPercent: 96 },\n { presetId: \"taylor\", keyword: \"tour\", targetKey: \"sanger\", targetPercent: 96 },\n { presetId: \"taylor\", keyword: \"album\", targetKey: \"sanger\", targetPercent: 96 },\n\n // Python\n { presetId: \"python\", keyword: \"programmering\", targetKey: \"programmeringssprog\", targetPercent: 96 },\n { presetId: \"python\", keyword: \"dyr\", targetKey: \"slange\", targetPercent: 96 },\n { presetId: \"python\", keyword: \"komik\", targetKey: \"monty\", targetPercent: 96 },\n];\n\nfunction normalize(scores) {\n const min = 0.0001;\n const clipped = scores.map((s) => Math.max(min, s));\n const maxVal = Math.max(...clipped);\n return clipped.map((s) => clamp(s / (maxVal || 1), 0, 1));\n}\n\nfunction percentify(arr) {\n const sum = arr.reduce((a, b) => a + b, 0) || 1;\n return arr.map((v) => (v / sum) * 100);\n}\n\nfunction explainAdjustment(matches) {\n if (matches.length === 0) return \"Ingen kontekst-match. Basis-sandsynligheder vises.\";\n return \"Kontekst boostede: \" + matches.join(\", \") + \".\";\n}\n\nexport default function ProbabilityExperiment() {\n const [presetId, setPresetId] = useState(PRESETS[0].id);\n const preset = useMemo(() => PRESETS.find((p) => p.id === presetId), [presetId]);\n\n const [prompt, setPrompt] = useState(preset.prompt);\n const [context, setContext] = useState(\"\");\n const [contextPreset, setContextPreset] = useState(\"(ingen)\");\n\n const [prevMap, setPrevMap] = useState({});\n const [showInterpretations, setShowInterpretations] = useState(true);\n\n const compute = useMemo(() => {\n const text = (prompt + \" \" + context).toLowerCase();\n\n const matchedKeys = [];\n const boosted = preset.options.map((o) => {\n const hit = o.synonyms.some((s) => text.includes(s));\n if (hit) matchedKeys.push(o.label);\n const boost = hit ? 0.2 * (1 - o.base) : 0;\n return o.base + boost;\n });\n\n const normalized = normalize(boosted);\n const percents = percentify(normalized);\n\n // Konverter til procent og byg metadata\n let withMeta = percents.map((p, i) => ({\n key: preset.options[i].key,\n label: preset.options[i].label,\n value: Math.round(p),\n raw: p,\n }));\n\n // Sorter efter rå værdi for visning\n withMeta.sort((a, b) => b.raw - a.raw);\n\n // Anvend eventuelle \"tvungne\" regler (demonstrationsformål)\n const rule = FORCED_RULES.find((r) => r.presetId === presetId && text.includes(r.keyword));\n if (rule) {\n const total = 100;\n const targetIdx = withMeta.findIndex((x) => x.key === rule.targetKey);\n if (targetIdx !== -1) {\n const rest = total - rule.targetPercent;\n // fordel resten proportionalt mellem de andre\n const others = withMeta.filter((_, i) => i !== targetIdx);\n const otherSum = others.reduce((acc, x) => acc + x.value, 0) || 1;\n const adjustedOthers = others.map((x) => ({ ...x, value: Math.round((x.value / otherSum) * rest) }));\n // opdater target til rule.targetPercent\n const target = { ...withMeta[targetIdx], value: rule.targetPercent };\n // byg ny liste og sortér igen\n withMeta = [target, ...adjustedOthers];\n withMeta.sort((a, b) => b.value - a.value);\n }\n }\n\n // Beregn delta ift. tidligere visning\n const withDelta = withMeta.map((b) => ({\n ...b,\n delta: prevMap[b.key] !== undefined ? Math.round(b.value - prevMap[b.key]) : 0,\n }));\n\n return { bars: withDelta, matches: matchedKeys };\n }, [preset, prompt, context, prevMap, presetId]);\n\n const { bars, matches } = compute;\n\n useEffect(() => {\n const next = {};\n bars.forEach((b) => (next[b.key] = b.value));\n setPrevMap(next);\n }, [bars.map((b) => b.key + \":\" + b.value).join(\"|\")]);\n\n const resetToPreset = () => {\n setPrompt(preset.prompt);\n setContext(\"\");\n setContextPreset(\"(ingen)\");\n };\n\n // Opdater context, når brugeren vælger en kontekst fra dropdown\n const onSelectContextPreset = (val) => {\n setContextPreset(val);\n if (val === \"(ingen)\") {\n setContext(\"\");\n } else {\n setContext(val);\n }\n };\n\n return (\n

Sandsynligheds-eksperimentet

En enkel, interaktiv artefakt der viser, hvordan kontekst påvirker en sprogmodels sandsynligheder.

\n\n

\n Prompt\n {\n const id = e.target.value;\n setPresetId(id);\n const p = PRESETS.find((x) => x.id === id);\n setPrompt(p ? p.prompt : \"\");\n setContext(\"\");\n setContextPreset(\"(ingen)\");\n }}\n >\n {PRESETS.map((p) => (\n \n ))}\n \n\n

\n Kontekst (eksempler)\n onSelectContextPreset(e.target.value)}\n >\n {preset.contextExamples.map((opt) => (\n \n ))}\n \n

Eksempel: vælg \"Michael Jordan\" og derefter \"black panther\" for at se Filmstjerne stige kraftigt.

\n\n

\n \n Nulstil\n \n

\n\n

\n Info\n

Vælg en prompt i dropdown'en. Brug kontekst-dropdown for at justere sandsynlighederne.

\n\n

Fortolkninger

\n {explainAdjustment(matches)}\n setShowInterpretations((v) => !v)}\n className=\"ml-auto text-xs px-2 py-1 rounded-md border bg-white hover:bg-gray-50\"\n aria-pressed={showInterpretations}\n title={showInterpretations ? 'Skjul fortolkninger' : 'Vis fortolkninger'}\n >\n {showInterpretations ? 'Skjul' : 'Vis'}\n \n

\n\n

\n {showInterpretations ? (\n \n {bars.map((b) => (\n \n

{b.label}

\n {b.delta !== 0 && (\n 0 ? 6 : -6 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0 }}\n className={`text-[11px] px-1.5 py-0.5 rounded-md ${b.delta > 0 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}\n title={b.delta > 0 ? 'Stiger' : 'Falder'}\n >\n {b.delta > 0 ? '+' : '-'} {Math.abs(b.delta)} pp\n \n )}\n

{b.value}%

\n \n

\n \n ))}\n \n ) : (\n

Fortolkninger er skjult. Tryk \"Vis\" for at se dem igen.

\n )}\n

\n\n

\n *Dette er en pædagogisk simulering. \"Sandsynlighederne\" tilpasser sig i realtid, men er heuristiske - ikke beregnet af en rigtig sprogmodel.\n

\n\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch","shouldPrefetchAccount",true,"shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","5624241932162467261","traceTime",1776440476067]