[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68edf2c8c090819193d97fedd92d5930","versionInt","title","EE274 Arithmetic coding (simple)","type","code/react","content","import React, { useState } from \"react\";\nimport 'katex/dist/katex.min.css';\nimport katex from 'react-katex';\n\nconst BlockMath = (() => {\n try {\n if (!katex) return null;\n if (katex.BlockMath) return katex.BlockMath;\n if (katex.default && katex.default.BlockMath) return katex.default.BlockMath;\n if (typeof katex === 'function' || typeof katex === 'object') return katex;\n } catch (e) {}\n return function FallbackBlockMath({ math }) {\n return

{math}

;\n };\n})();\n\nexport default function ArithmeticCodingCanvas() {\n const [symbolsText, setSymbolsText] = useState(\"A,B,C\");\n const [freqsText, setFreqsText] = useState(\"0.7,0.2,0.1\");\n const [messageText, setMessageText] = useState(\"A A B C A\");\n const [log, setLog] = useState(\"\");\n const [result, setResult] = useState(null);\n const [steps, setSteps] = useState([]);\n const [decodedSteps, setDecodedSteps] = useState([]);\n const [decodedMessage, setDecodedMessage] = useState(\"\");\n const [decodeBits, setDecodeBits] = useState(\"\");\n const [numSymbols, setNumSymbols] = useState(5);\n\n function parseSymbols(text) {\n return text.split(/[\\s,]+/).map(s => s.trim()).filter(s => s.length > 0);\n }\n\n function parseFreqs(text) {\n return text.split(/[\\s,]+/).map(s => s.trim()).filter(s => s.length > 0).map(x => Number(x));\n }\n\n function encodeArithmeticSteps(symbols, freqs, msgSymbols) {\n const sum = freqs.reduce((a, b) => a + b, 0);\n const probs = freqs.map(f => f / sum);\n const cum = [0];\n for (let p of probs) cum.push(cum[cum.length - 1] + p);\n let low = 0.0, high = 1.0;\n const stepLog = [];\n for (let t = 0; t < msgSymbols.length; t++) {\n const s = msgSymbols[t];\n const idx = symbols.indexOf(s);\n const range = high - low;\n const newHigh = low + range * cum[idx + 1];\n const newLow = low + range * cum[idx];\n stepLog.push({ step: t + 1, symbol: s, low: newLow, high: newHigh, cumLow: cum[idx], cumHigh: cum[idx + 1] });\n low = newLow;\n high = newHigh;\n }\n return { low, high, steps: stepLog, probs, cum };\n }\n\n function computeDyadicByFormula(low, high, extra = 2) {\n const width = high - low;\n const raw = -Math.log2(width) + extra;\n const n = Math.max(1, Math.ceil(raw));\n const denom = Math.pow(2, n);\n const k = Math.max(0, Math.min(denom - 1, Math.ceil(low * denom - 1e-15)));\n const value = k / denom;\n const bits = k.toString(2).padStart(n, '0');\n const midpoint = low + width / 2;\n const midpointBits32 = Math.floor(midpoint * Math.pow(2, 32)).toString(2).padStart(32, '0');\n const truncatedBits = midpointBits32.slice(0, n);\n return { n, value, bits, width, raw, midpoint, midpointBits32, truncatedBits };\n }\n\n function handleRun() {\n setLog(\"\"); setResult(null); setSteps([]);\n try {\n const symbols = parseSymbols(symbolsText);\n const freqs = parseFreqs(freqsText);\n let msgSymbols = parseSymbols(messageText);\n if (msgSymbols.length === 1) {\n const raw = messageText.replace(/\\s+/g, \"\");\n if (symbols.every(s => s.length === 1)) {\n const chars = raw.split('').filter(c => symbols.includes(c));\n if (chars.length > 0) msgSymbols = chars;\n }\n }\n const fpEncoding = encodeArithmeticSteps(symbols, freqs, msgSymbols);\n const approxDyadic = computeDyadicByFormula(fpEncoding.low, fpEncoding.high, 2);\n setResult({ symbols, freqs, fpEncoding, approxDyadic });\n setSteps(fpEncoding.steps);\n setLog(\"Success\");\n } catch (e) {\n setLog(String(e));\n }\n }\n\n function decodeArithmetic(symbols, freqs, bits, nSymbols) {\n const sum = freqs.reduce((a, b) => a + b, 0);\n const probs = freqs.map(f => f / sum);\n const cum = [0];\n for (let p of probs) cum.push(cum[cum.length - 1] + p);\n\n const value = parseInt(bits, 2) / Math.pow(2, bits.length);\n let low = 0.0, high = 1.0;\n const steps = [];\n const decoded = [];\n\n for (let i = 0; i < nSymbols; i++) {\n const range = high - low;\n const scaled = (value - low) / range;\n let symbolIndex = cum.findIndex((c, idx) => scaled >= c && scaled < cum[idx + 1]);\n if (symbolIndex === -1 || symbolIndex >= symbols.length) symbolIndex = symbols.length - 1;\n const s = symbols[symbolIndex];\n decoded.push(s);\n const newHigh = low + range * cum[symbolIndex + 1];\n const newLow = low + range * cum[symbolIndex];\n steps.push({ step: i + 1, symbol: s, low: newLow, high: newHigh, scaled });\n low = newLow;\n high = newHigh;\n }\n\n return { decoded, steps, value };\n }\n\n function handleDecode() {\n if (!result) return;\n const { symbols, freqs } = result;\n const { decoded, steps, value } = decodeArithmetic(symbols, freqs, decodeBits, numSymbols);\n setDecodedSteps(steps);\n setDecodedMessage(decoded.join(' '));\n }\n\n function IntervalVisualization({ steps, width = 300 }) {\n return (\n \n );\n }\n\n return (\n

Arithmetic Coding Explorer

\n\n

\n Alphabet\n setSymbolsText(e.target.value)} />\n\n Frequencies (probabilities or weights)\n setFreqsText(e.target.value)} />\n\n Message\n setMessageText(e.target.value)} />\n\n

\n \n \n

\n\n

\n Log:\n

{log}

\n\n {result && (\n

Final interval & dyadic bits

Interval: [{result.fpEncoding.low.toPrecision(6)}, {result.fpEncoding.high.toPrecision(6)}]

Width H-L: {(result.fpEncoding.high - result.fpEncoding.low).toPrecision(6)}

Computed n: {result.approxDyadic.n} (n = ceil(-log2(H-L) + 2))

Midpoint: {result.approxDyadic.midpoint.toPrecision(6)}

Midpoint binary (32 bits): 0.{result.approxDyadic.midpointBits32}

Truncated bits ({result.approxDyadic.n} bits): 0.{result.approxDyadic.truncatedBits}

\n )}\n

\n\n

Encoding Steps

\n {!result &&

No result yet.

}\n {result && (\n

\n \n \n \n \n \n {steps.map(st => (\n \n \n \n \n \n \n ))}\n \n

Step	Symbol	Low	High
{st.step}	{st.symbol}	{st.low.toPrecision(6)}	{st.high.toPrecision(6)}

\n {result && }\n

\n )}\n

\n\n {result && (\n

Arithmetic Decoder

\n Truncated Bits\n setDecodeBits(e.target.value)} placeholder=\"e.g. 011001...\" />\n\n Number of Symbols\n setNumSymbols(parseInt(e.target.value))} />\n\n

\n \n

\n\n {decodedMessage && (\n

\n Decoded Message:\n

{decodedMessage}

\n )}\n

\n\n

Decoding Steps

\n {!decodedSteps.length &&

No decoding yet.

}\n {decodedSteps.length > 0 && (\n

\n \n \n \n \n \n {decodedSteps.map(st => (\n \n \n \n \n \n \n \n ))}\n \n

Step	Symbol	Low	High	Scaled
{st.step}	{st.symbol}	{st.low.toPrecision(6)}	{st.high.toPrecision(6)}	{st.scaled.toPrecision(6)}

\n \n

\n )}\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","10813274216029153399","traceTime",1778162802914]