[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_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","690858e94c608191a01aa9c24c638e53","versionInt","title","Simple Jpeg Compressor (dct Demo)","type","code/react","content","import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\n// Simple JPEG-like Compressor (Luminance-only teaching demo)\n// Pipeline: block DCT -> divide by (qStep * Qmat) -> round -> dequant -> iDCT.\n// Features:\n// - Upload image, show ORIGINAL (Y only), RECONSTRUCTION, DIFF (|orig-recon| x4)\n// - Block size selector (2,4,8,16,32). For N=8, Qmat = standard JPEG Luma; others use a smooth synthetic Qmat\n// - Single RD knob (qStep)\n// - User explicitly chooses the block indices (row, col) to display numeric tables; nothing else changes them\n// - Red highlight shows ONLY the currently selected block\n// - Sanity tests for DCT orthonormality, quantization round-trip, etc.\n\nexport default function SimpleJpegDctDemo() {\n // --- Controls ---\n const [imgSrc, setImgSrc] = useState(null);\n const [blockSize, setBlockSize] = useState(8);\n const [qStep, setQStep] = useState(25);\n const [processing, setProcessing] = useState(false);\n\n // --- Metrics ---\n const [stats, setStats] = useState<{\n bpp: number; // toy: fraction of non-zero coeffs * 8 bits\n mse: number;\n psnr: number;\n nonzeroFrac: number;\n } | null>(null);\n\n // --- Selection state (in block coordinates) ---\n const [numBlocksX, setNumBlocksX] = useState(0);\n const [numBlocksY, setNumBlocksY] = useState(0);\n const [blockCol, setBlockCol] = useState(0); // selected col index (applied)\n const [blockRow, setBlockRow] = useState(0); // selected row index (applied)\n\n // Explicit user-chosen indices (edited in inputs). Applied only when user clicks the button\n const [pendingRow, setPendingRow] = useState(0);\n const [pendingCol, setPendingCol] = useState(0);\n\n // --- Canvases ---\n const inputCanvasRef = useRef(null); // original luminance preview\n const outputCanvasRef = useRef(null); // reconstruction\n const diffCanvasRef = useRef(null); // magnified abs diff\n\n // Backing clean image for ORIGINAL canvas (no overlays)\n const baseImageRef = useRef(null);\n\n // --- DCT matrices and Qmat for current N ---\n const { C, Ct } = useMemo(() => buildDct(blockSize), [blockSize]);\n const Qmat = useMemo(() => buildQmat(blockSize), [blockSize]);\n\n // --- Numeric tables for the currently selected block ---\n const [tables, setTables] = useState(null);\n\n // --- Draw the single red rectangle over the selected block on ORIGINAL canvas ---\n const drawSelectionBox = useCallback((col: number = blockCol, row: number = blockRow) => {\n const c = inputCanvasRef.current; if (!c) return;\n const ctx = c.getContext(\"2d\"); if (!ctx) return;\n\n // Restore clean base (ensures old rectangles are cleared)\n if (baseImageRef.current && baseImageRef.current.width === c.width && baseImageRef.current.height === c.height) {\n ctx.putImageData(baseImageRef.current, 0, 0);\n } else {\n const img = ctx.getImageData(0, 0, c.width, c.height);\n baseImageRef.current = img;\n ctx.putImageData(img, 0, 0);\n }\n\n // Clamp selection to valid block grid\n const N = blockSize;\n const cols = Math.max(1, Math.ceil(c.width / N));\n const rows = Math.max(1, Math.ceil(c.height / N));\n const cc = clamp(Math.floor(col), 0, cols - 1);\n const rr = clamp(Math.floor(row), 0, rows - 1);\n\n // Draw ONLY the current rectangle\n const x = cc * N; const y = rr * N;\n const w = Math.min(N, c.width - x); const h = Math.min(N, c.height - y);\n if (w > 0 && h > 0) {\n ctx.save();\n ctx.strokeStyle = \"#ff3b3b\";\n ctx.lineWidth = 2;\n ctx.strokeRect(x + 0.5, y + 0.5, w - 1, h - 1);\n ctx.restore();\n }\n }, [blockCol, blockRow, blockSize]);\n\n // --- Recompute numeric tables for the currently selected block (no full recompress) ---\n const recomputeTablesForSelection = useCallback((col?: number, row?: number) => {\n const c = inputCanvasRef.current; if (!c) return;\n const ctx = c.getContext(\"2d\"); if (!ctx) return;\n const W = c.width, H = c.height;\n if (W === 0 || H === 0) return;\n\n // Use CLEAN base pixels so overlays never affect numbers\n const base = baseImageRef.current ?? ctx.getImageData(0, 0, W, H);\n const Y = rgbaToLuma(base.data);\n\n const N = blockSize;\n const useCol = col ?? blockCol;\n const useRow = row ?? blockRow;\n const bx = clamp(Math.floor(useCol), 0, Math.ceil(W / N) - 1);\n const by = clamp(Math.floor(useRow), 0, Math.ceil(H / N) - 1);\n const x0 = bx * N, y0 = by * N;\n\n // build B (centered)\n const B: number[][] = Array.from({ length: N }, (_, i) => Array.from({ length: N }, (_, j) => {\n const xx = x0 + j, yy = y0 + i;\n if (xx >= W || yy >= H) return 0; // padded area outside image\n return Y[yy * W + xx] - 128;\n }));\n\n // DCT\n const D = matMul(matMul(C, B), Ct);\n\n // Quantize (element-wise divide by qStep * Qmat) -> round -> Dequantize\n const Divisors = Array.from({ length: N }, (_, i) => Array.from({ length: N }, (_, j) => qStep * Qmat[i][j]));\n const Qint = Array.from({ length: N }, () => Array(N).fill(0));\n const Dhat = Array.from({ length: N }, () => Array(N).fill(0));\n for (let i = 0; i < N; i++) {\n for (let j = 0; j < N; j++) {\n const denom = Divisors[i][j];\n const qv = Math.round(D[i][j] / denom);\n Qint[i][j] = qv;\n Dhat[i][j] = qv * denom;\n }\n }\n\n // Inverse DCT to get reconstructed block (centered)\n const Bh = matMul(matMul(Ct, Dhat), C);\n\n setTables({ B, D, Qmat, Divisors, Qint, Dhat, Bh, blockRow: by, blockCol: bx });\n }, [blockCol, blockRow, blockSize, qStep, C, Ct, Qmat]);\n\n // --- Apply selection explicitly ---\n const applySelection = useCallback((col: number, row: number) => {\n // Prefer live canvas dimensions for bounds so we never clamp to (0,0)\n const c = inputCanvasRef.current;\n let maxCol = Math.max(0, numBlocksX - 1);\n let maxRow = Math.max(0, numBlocksY - 1);\n if (c && c.width > 0 && c.height > 0) {\n const N = blockSize;\n maxCol = Math.max(0, Math.ceil(c.width / N) - 1);\n maxRow = Math.max(0, Math.ceil(c.height / N) - 1);\n }\n\n // Robust against empty/invalid inputs (e.g., valueAsNumber = NaN)\n if (!Number.isFinite(col) || !Number.isFinite(row)) {\n setPendingCol(blockCol);\n setPendingRow(blockRow);\n drawSelectionBox(blockCol, blockRow);\n return;\n }\n\n const nextCol = clamp(Math.floor(col), 0, maxCol);\n const nextRow = clamp(Math.floor(row), 0, maxRow);\n\n setBlockCol(nextCol);\n setBlockRow(nextRow);\n setPendingCol(nextCol);\n setPendingRow(nextRow);\n\n drawSelectionBox(nextCol, nextRow);\n recomputeTablesForSelection(nextCol, nextRow);\n }, [blockCol, blockRow, blockSize, numBlocksX, numBlocksY, drawSelectionBox, recomputeTablesForSelection, inputCanvasRef]);\n\n // --- File upload handler ---\n const onFile = (f: File) => {\n const reader = new FileReader();\n reader.onload = e => setImgSrc(String(e.target?.result));\n reader.readAsDataURL(f);\n };\n\n // --- Ensure ORIGINAL has pixels: draw uploaded image if present, else a tiny debug pattern ---\n useEffect(() => {\n const c = inputCanvasRef.current; if (!c) return;\n\n const drawYBuffer = (Y: Float32Array, W: number, H: number) => {\n const ctx = c.getContext(\"2d\"); if (!ctx) return;\n c.width = W; c.height = H;\n // keep the 8×8 checkerboard sharp when canvas is scaled by CSS\n (ctx as any).imageSmoothingEnabled = false;\n const out = ctx.createImageData(W, H);\n for (let i = 0; i < W * H; i++) {\n const v = Math.max(0, Math.min(255, Y[i] | 0));\n out.data[4*i+0] = v; out.data[4*i+1] = v; out.data[4*i+2] = v; out.data[4*i+3] = 255;\n }\n ctx.putImageData(out, 0, 0);\n\n // Keep a clean copy for overlays & compression\n baseImageRef.current = ctx.getImageData(0, 0, W, H);\n\n // Grid & selection bounds from actual canvas\n const N = blockSize;\n const bx = Math.ceil(W / N), by = Math.ceil(H / N);\n setNumBlocksX(bx); setNumBlocksY(by);\n const clCol = (v: number) => clamp(Math.floor(v), 0, Math.max(0, bx - 1));\n const clRow = (v: number) => clamp(Math.floor(v), 0, Math.max(0, by - 1));\n setBlockCol(prev => clCol(prev)); setBlockRow(prev => clRow(prev));\n setPendingCol(prev => clCol(prev)); setPendingRow(prev => clRow(prev));\n\n drawSelectionBox(blockCol, blockRow);\n recomputeTablesForSelection(blockCol, blockRow);\n };\n\n if (!imgSrc) {\n // Built-in DEBUG Y image: crisp 8×8 black/white checkerboard (each tile = 8×8 px)\n const tile = 8; // size of each checker tile in pixels\n const tiles = 8; // 8×8 board\n const W = tiles * tile, H = tiles * tile;\n const Y = new Float32Array(W * H);\n for (let y = 0; y < H; y++) {\n const ty = Math.floor(y / tile);\n for (let x = 0; x < W; x++) {\n const tx = Math.floor(x / tile);\n const isWhite = ((tx + ty) % 2) === 0;\n Y[y * W + x] = isWhite ? 255 : 0;\n }\n }\n drawYBuffer(Y, W, H);\n return;\n }\n\n // Load uploaded image -> convert to luma -> draw\n const img = new Image();\n img.onload = () => {\n const maxW = 512;\n const scale = img.width > maxW ? maxW / img.width : 1;\n const W = Math.max(1, Math.floor(img.width * scale));\n const H = Math.max(1, Math.floor(img.height * scale));\n const tmp = document.createElement(\"canvas\");\n tmp.width = W; tmp.height = H;\n const tctx = tmp.getContext(\"2d\")!;\n tctx.drawImage(img, 0, 0, W, H);\n const rgba = tctx.getImageData(0, 0, W, H);\n const Y = rgbaToLuma(rgba.data);\n drawYBuffer(Y, W, H);\n };\n img.src = imgSrc;\n }, [imgSrc, blockSize, drawSelectionBox, recomputeTablesForSelection]);\n\n // --- When N or qStep change, keep selection but recompute numeric tables & redraw box ---\n useEffect(() => {\n if (!inputCanvasRef.current || !baseImageRef.current) return;\n const c = inputCanvasRef.current;\n setNumBlocksX(Math.max(1, Math.ceil(c.width / blockSize)));\n setNumBlocksY(Math.max(1, Math.ceil(c.height / blockSize)));\n recomputeTablesForSelection(blockCol, blockRow);\n drawSelectionBox(blockCol, blockRow);\n }, [blockSize, qStep, recomputeTablesForSelection, drawSelectionBox]);\n\n // --- Run full compression over image ---\n const runCompression = async () => {\n if (!inputCanvasRef.current || !outputCanvasRef.current || !diffCanvasRef.current) return;\n setProcessing(true);\n await new Promise(r => setTimeout(r, 10)); // allow paint\n\n const inC = inputCanvasRef.current;\n const outC = outputCanvasRef.current;\n const diffC = diffCanvasRef.current;\n const W = inC.width, H = inC.height;\n outC.width = W; outC.height = H; diffC.width = W; diffC.height = H;\n\n const inCtx = inC.getContext(\"2d\")!;\n const outCtx = outC.getContext(\"2d\")!;\n const diffCtx = diffC.getContext(\"2d\")!;\n\n // Use CLEAN base as source luminance so red box is ignored\n const base = baseImageRef.current ?? inCtx.getImageData(0, 0, W, H);\n const Y = rgbaToLuma(base.data); // [0,255]\n\n const N = blockSize;\n const padW = Math.ceil(W / N) * N;\n const padH = Math.ceil(H / N) * N;\n const Ypad = new Float32Array(padW * padH).fill(0);\n for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) Ypad[y * padW + x] = Y[y * W + x];\n\n const blocksX = Math.ceil(W / N);\n const blocksY = Math.ceil(H / N);\n setNumBlocksX(blocksX); setNumBlocksY(blocksY);\n const selCol = clamp(blockCol, 0, blocksX - 1);\n const selRow = clamp(blockRow, 0, blocksY - 1);\n\n let totalSquaredErr = 0;\n let nonzeros = 0; let totalCoeffs = 0;\n\n for (let by = 0; by < padH; by += N) {\n for (let bx = 0; bx < padW; bx += N) {\n // Extract block & center\n const B = Array.from({ length: N }, (_, i) =>\n Array.from({ length: N }, (_, j) => Ypad[(by + i) * padW + (bx + j)] - 128)\n );\n\n // DCT\n const D = matMul(matMul(C, B), Ct);\n\n // Quantize -> Dequantize\n const Qint = Array.from({ length: N }, () => Array(N).fill(0));\n const Dhat = Array.from({ length: N }, () => Array(N).fill(0));\n for (let i = 0; i < N; i++) {\n for (let j = 0; j < N; j++) {\n const denom = qStep * Qmat[i][j];\n const qv = Math.round(D[i][j] / denom);\n Qint[i][j] = qv;\n Dhat[i][j] = qv * denom;\n if (qv !== 0) nonzeros++;\n totalCoeffs++;\n }\n }\n\n // iDCT & write back\n const Bh = matMul(matMul(Ct, Dhat), C);\n for (let i = 0; i < N; i++) {\n for (let j = 0; j < N; j++) {\n const yy = by + i, xx = bx + j;\n if (yy < H && xx < W) {\n const recon = clamp(Bh[i][j] + 128, 0, 255);\n const orig = Ypad[yy * padW + xx];\n const err = recon - orig;\n totalSquaredErr += err * err;\n Ypad[yy * padW + xx] = recon;\n }\n }\n }\n\n // Capture tables for selected block\n const curCol = Math.floor(bx / N);\n const curRow = Math.floor(by / N);\n if (curCol === selCol && curRow === selRow) {\n const Divisors = Array.from({ length: N }, (_, i) => Array.from({ length: N }, (_, j) => qStep * Qmat[i][j]));\n setTables({ B, D, Qmat, Divisors, Qint, Dhat, Bh, blockRow: selRow, blockCol: selCol });\n }\n }\n }\n\n // Output image\n const outImg = outCtx.createImageData(W, H);\n for (let y = 0; y < H; y++) {\n for (let x = 0; x < W; x++) {\n const v = Ypad[y * padW + x] | 0;\n const idx = (y * W + x) * 4;\n outImg.data[idx + 0] = v; outImg.data[idx + 1] = v; outImg.data[idx + 2] = v; outImg.data[idx + 3] = 255;\n }\n }\n outCtx.putImageData(outImg, 0, 0);\n\n // Diff visualization (magnified abs error)\n const diff = diffCtx.createImageData(W, H);\n const origY = Y; // already from base\n for (let y = 0; y < H; y++) {\n for (let x = 0; x < W; x++) {\n const idx = y * W + x;\n const e = Math.abs((Ypad[y * padW + x] | 0) - (origY[idx] | 0));\n const mag = Math.min(255, e * 4);\n const p = idx * 4;\n diff.data[p + 0] = mag; diff.data[p + 1] = mag; diff.data[p + 2] = mag; diff.data[p + 3] = 255;\n }\n }\n diffCtx.putImageData(diff, 0, 0);\n\n // Metrics\n const mse = totalSquaredErr / (W * H);\n const psnr = mse === 0 ? 99 : 10 * Math.log10((255 * 255) / mse);\n const nonzeroFrac = totalCoeffs === 0 ? 0 : nonzeros / totalCoeffs;\n const bpp = nonzeroFrac * 8;\n setStats({ bpp, mse, psnr, nonzeroFrac });\n\n drawSelectionBox(selCol, selRow);\n setProcessing(false);\n };\n\n // --- Sanity tests (ad-hoc) ---\n const [testOutput, setTestOutput] = useState(\"\");\n const runSanityTests = () => {\n const lines: string[] = [];\n const N = blockSize;\n\n // Test 1: Orthonormality C * C^T = I\n const I = identity(N);\n const CCt = matMul(C, transpose(C));\n const froErr1 = frobeniusNorm(diffMat(CCt, I));\n lines.push(`Test1 DCT Orthonormality (C C^T): ||C C^T - I||_F = ${froErr1.toFixed(4)} (expect ~0)`);\n\n // Test 2: Quant/dequant round-trip on zeros block\n const B0 = Array.from({ length: N }, () => Array(N).fill(0));\n const D0 = matMul(matMul(C, B0), Ct);\n const D0q = D0.map((row, i) => row.map((v, j) => Math.round(v / (qStep * Qmat[i][j])) * (qStep * Qmat[i][j])));\n const B0h = matMul(matMul(Ct, D0q), C);\n const mse0 = meanSquared(B0, B0h);\n lines.push(`Test2 Zero Block Round-trip MSE: ${mse0.toFixed(6)} (>=0, often 0)`);\n\n // Test 3: Orthonormality C^T * C = I\n const CtC = matMul(transpose(C), C);\n const froErr2 = frobeniusNorm(diffMat(CtC, I));\n lines.push(`Test3 DCT Orthonormality (C^T C): ||C^T C - I||_F = ${froErr2.toFixed(4)} (expect ~0)`);\n\n // Test 4: Invertibility (no quantization): iDCT(DCT(B)) ≈ B\n const Bdelta = Array.from({ length: N }, () => Array(N).fill(0));\n if (N > 0) Bdelta[0][0] = 100; // simple non-zero DC\n const Ddelta = matMul(matMul(C, Bdelta), Ct);\n const Brec = matMul(matMul(Ct, Ddelta), C);\n const mseDelta = meanSquared(Bdelta, Brec);\n lines.push(`Test4 Invertibility (no quant): MSE(B, iDCT(DCT(B))) = ${mseDelta.toFixed(8)} (expect ~0)`);\n\n // Test 5: Overlay stability (red box does not accumulate)\n const c = inputCanvasRef.current;\n if (c) {\n const r1 = countRedPixels(c);\n drawSelectionBox((blockCol + 1) % Math.max(1, numBlocksX), blockRow);\n const r2 = countRedPixels(c);\n drawSelectionBox(blockCol, blockRow); // restore\n lines.push(`Test5 Overlay Stability: red pixels ${r1} -> ${r2} (should be roughly constant)`);\n } else {\n lines.push(\"Test5 Overlay Stability: (skipped, no canvas)\");\n }\n\n // Test 6: Qmat positivity\n const minQ = Math.min(...Qmat.flat());\n lines.push(`Test6 Qmat min value: ${minQ} (should be > 0)`);\n\n // Test 7: Quantization monotonicity (bigger qStep => fewer nonzeros on toy block)\n const toyB = Array.from({ length: N }, (_, i) => Array.from({ length: N }, (_, j) => ((i === 0 && j === 0) ? 200 : (i === 1 && j === 1) ? 50 : 0)));\n const toyD = matMul(matMul(C, toyB), Ct);\n const countNonZero = (step: number) => {\n let c = 0; for (let i = 0; i < N; i++) for (let j = 0; j < N; j++) if (Math.round(toyD[i][j] / (step * Qmat[i][j])) !== 0) c++;\n return c;\n };\n const nzSmall = countNonZero(Math.max(1, Math.floor(qStep / 2)));\n const nzLarge = countNonZero(qStep * 2);\n lines.push(`Test7 Monotonicity: nonzeros(qStep/2)=${nzSmall}, nonzeros(2*qStep)=${nzLarge} (expect nzLarge <= nzSmall)`);\n\n // Test 8: Divisors correctness\n const anyMismatch = Qmat.some((row, i) => row.some((q, j) => Math.abs((qStep * q) - (qStep * Qmat[i][j])) > 1e-9));\n lines.push(`Test8 Divisors correct: ${anyMismatch ? \"FAILED\" : \"OK\"}`);\n\n setTestOutput(lines.join(\"\\n\"));\n };\n\n return (\n

Simple JPEG-like Compressor

\n Pipeline: DCT → divide by Qmat × qStep → round → dequantize → iDCT. Luminance (Y) only.\n

\n\n

\n {/* Controls */}\n

1) Upload Image (grayscale shown)

\n { const f = e.target.files?.[0]; if (f) onFile(f); }}\n className=\"block w-full text-sm file:mr-4 file:rounded-xl file:border-0 file:bg-neutral-800 file:px-4 file:py-2 file:text-neutral-200 file:hover:bg-neutral-700 hover:cursor-pointer\"\n />\n\n

2) Block Size

\n setBlockSize(parseInt(e.target.value))}\n className=\"bg-neutral-800 rounded-xl px-3 py-2\"\n >\n {[2, 4, 8, 16, 32].map(n => )}\n \n\n

3) Rate–Distortion (single knob)

\n Quantization base step (qStep): {qStep}\n setQStep(parseInt(e.target.value))} className=\"w-full\" />\n

\n\n \n {processing ? \"Processing…\" : \"Run JPEG-like Compression\"}\n \n\n {stats && (\n

\n \n \n \n \n

\n )}\n\n {/* Explicit block selection (applies only on button click) */}\n

\n Block Row (0…{Math.max(0, numBlocksY - 1)})\n { const v = (e.currentTarget as HTMLInputElement).valueAsNumber; setPendingRow(Number.isFinite(v) ? v : pendingRow); }}\n className=\"mt-1 w-full bg-neutral-800 rounded-xl px-3 py-2\"\n />\n

\n Block Col (0…{Math.max(0, numBlocksX - 1)})\n { const v = (e.currentTarget as HTMLInputElement).valueAsNumber; setPendingCol(Number.isFinite(v) ? v : pendingCol); }}\n className=\"mt-1 w-full bg-neutral-800 rounded-xl px-3 py-2\"\n />\n

\n \n

Numeric tables update only after you click Apply selection.

\n\n {/* Sanity Tests */}\n

Sanity Tests

\n \n

{testOutput || \"(no output yet)\"}

\n\n {/* Previews */}\n

Original (luminance)

Reconstruction

\n\n {/* Difference view */}\n

Difference |orig - recon| ×4

\n\n {/* Numeric values for selected block (includes Qmat) */}\n

Block ({tables?.blockRow ?? blockRow}, {tables?.blockCol ?? blockCol}) — Numeric Tables

Division uses element-wise D / (qStep × Qmat). We show Qmat itself and the actual divisors.

\n \n \n \n \n \n \n \n

\n\n

\n Notes: Real JPEG uses zig‑zag ordering, standard quantization tables per frequency, run-length + entropy coding, and chroma subsampling in YCbCr. Here we keep it didactic: a single knob qStep scales the whole Qmat, trading bits for distortion. Use the red box to discuss local vs global artifacts.\n

\n );\n}\n\n// ---------- UI helpers ----------\nfunction InfoCard({ label, value }: { label: string; value: string }) {\n return (\n

{label}

{value}

\n );\n}\n\nfunction ValueTable({ title, M, digits = 1, cap = 8 }: { title: string; M?: number[][] | null; digits?: number; cap?: number }) {\n const shown = M ? M.slice(0, cap).map(r => r.slice(0, cap)) : null;\n return (\n

{title}

\n \n \n {shown ? shown.map((row, i) => (\n \n {row.map((v, j) => (\n \n ))}\n \n )) : (\n \n )}\n \n

{fmt(v, digits)}

Run once to populate…

\n );\n}\n\nfunction fmt(v: number, digits: number) {\n if (v === undefined || v === null || Number.isNaN(v)) return \"\";\n const s = v.toFixed(digits);\n return s;\n}\n\nfunction countRedPixels(canvas: HTMLCanvasElement | null): number {\n if (!canvas) return 0;\n const ctx = canvas.getContext(\"2d\"); if (!ctx) return 0;\n const { width: W, height: H } = canvas;\n const img = ctx.getImageData(0, 0, W, H).data;\n let cnt = 0;\n for (let i = 0; i < img.length; i += 4) {\n const r = img[i], g = img[i + 1], b = img[i + 2];\n if (r > 200 && g < 100 && b < 100) cnt++;\n }\n return cnt;\n}\n\n// ---------- Math helpers ----------\nfunction clamp(v: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, v)); }\n\nfunction rgbaToLuma(rgba: Uint8ClampedArray) {\n const n = rgba.length / 4;\n const Y = new Float32Array(n);\n for (let i = 0; i < n; i++) {\n const r = rgba[i * 4 + 0];\n const g = rgba[i * 4 + 1];\n const b = rgba[i * 4 + 2];\n // Rec. 601 luma\n Y[i] = 0.299 * r + 0.587 * g + 0.114 * b;\n }\n return Y;\n}\n\nfunction matMul(A: number[][], B: number[][]) {\n const n = A.length, m = B[0].length, p = B.length;\n const C = Array.from({ length: n }, () => Array(m).fill(0));\n for (let i = 0; i < n; i++) {\n for (let k = 0; k < p; k++) {\n const aik = A[i][k];\n for (let j = 0; j < m; j++) C[i][j] += aik * B[k][j];\n }\n }\n return C;\n}\n\nfunction buildDct(N: number) {\n // Orthonormal DCT-II matrix C with C^{-1} = C^T\n const C = Array.from({ length: N }, () => Array(N).fill(0));\n const alpha = (u: number) => (u === 0 ? Math.sqrt(1 / N) : Math.sqrt(2 / N));\n for (let u = 0; u < N; u++) {\n for (let x = 0; x < N; x++) {\n C[u][x] = alpha(u) * Math.cos(((2 * x + 1) * u * Math.PI) / (2 * N));\n }\n }\n const Ct = transpose(C);\n return { C, Ct };\n}\n\nfunction transpose(A: number[][]) {\n const n = A.length, m = A[0].length;\n const T = Array.from({ length: m }, () => Array(n).fill(0));\n for (let i = 0; i < n; i++) for (let j = 0; j < m; j++) T[j][i] = A[i][j];\n return T;\n}\n\nfunction identity(N: number) {\n const I = Array.from({ length: N }, () => Array(N).fill(0));\n for (let i = 0; i < N; i++) I[i][i] = 1;\n return I;\n}\n\nfunction diffMat(A: number[][], B: number[][]) {\n const n = A.length, m = A[0].length;\n const C = Array.from({ length: n }, () => Array(m).fill(0));\n for (let i = 0; i < n; i++) for (let j = 0; j < m; j++) C[i][j] = A[i][j] - B[i][j];\n return C;\n}\n\nfunction frobeniusNorm(A: number[][]) {\n let s = 0; for (let i = 0; i < A.length; i++) for (let j = 0; j < A[0].length; j++) s += A[i][j] * A[i][j];\n return Math.sqrt(s);\n}\n\nfunction meanSquared(A: number[][], B: number[][]) {\n const n = A.length, m = A[0].length; let s = 0, c = 0;\n for (let i = 0; i < n; i++) for (let j = 0; j < m; j++) { const d = A[i][j] - B[i][j]; s += d * d; c++; }\n return s / Math.max(1, c);\n}\n\n// Build a JPEG-like Qmat: standard 8x8 Luma table for N=8, synthetic increasing for others\nfunction buildQmat(N: number) {\n if (N === 8) {\n return [\n [16,11,10,16,24,40,51,61],\n [12,12,14,19,26,58,60,55],\n [14,13,16,24,40,57,69,56],\n [14,17,22,29,51,87,80,62],\n [18,22,37,56,68,109,103,77],\n [24,35,55,64,81,104,113,92],\n [49,64,78,87,103,121,120,101],\n [72,92,95,98,112,100,103,99],\n ];\n }\n const M = Array.from({ length: N }, () => Array(N).fill(0));\n const baseMin = 8;\n for (let i = 0; i < N; i++) {\n for (let j = 0; j < N; j++) {\n M[i][j] = baseMin + 3 * (i + j);\n }\n }\n return M; // final return — no stray braces\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","7448469454605470820","traceTime",1776430642126]