From d165d797ba0ddbdf29dbdade878d3dd1c87dcf35 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Sat, 10 Oct 2026 19:45:04 +0530 Subject: [PATCH 01/11] feat(inspector): open on the top suggested block Entering the Block Inspector from the viewer used to land on an empty "click a block" page; it now starts on the first suggested block. Also drops the sidebar's "Transform" group, which held only a note and no control, and the emoji in the suggested-block category headers (each block already carries its own icon). Co-Authored-By: Claude Opus 5.5 --- web/src/InspectorMode.svelte | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/web/src/InspectorMode.svelte b/web/src/InspectorMode.svelte index 0523120..d61212d 100644 --- a/web/src/InspectorMode.svelte +++ b/web/src/InspectorMode.svelte @@ -45,6 +45,15 @@ } }); + // Opened without a block (from the viewer): start on the top suggestion + // rather than an empty page. + $effect(() => { + const first = appState.suggestedBlocks[0]; + if (first && !untrack(() => appState.inspectedBlock)) { + appState.inspectedBlock = { x: first.x, y: first.y }; + } + }); + // Reactive: re-process when quality/CS/transform changes in inspector $effect(() => { const q = appState.quality; @@ -353,7 +362,7 @@ {#each ['edge', 'texture', 'smooth'] as cat} {#if appState.suggestedBlocks.some(b => b.category === cat)}
- {cat === 'edge' ? 'πŸ”· Edges' : cat === 'texture' ? 'πŸ”Ά Textures' : '🟒 Smooth'} + {cat === 'edge' ? 'Edges' : cat === 'texture' ? 'Textures' : 'Smooth'}
{#each appState.suggestedBlocks.filter(b => b.category === cat) as block} {@const isActive = appState.inspectedBlock?.x === block.x && appState.inspectedBlock?.y === block.y} @@ -409,14 +418,6 @@ -
-
Transform
-

- The block inspector follows the 8Γ—8 DCT used by JPEG. Wavelet - transforms work on the whole image β€” switch to Haar or CDF 9/7 - in the viewer and open the Subbands view to explore them. -

-
From 6289cc85ff5c5ea4342a248597e1d699df015f60 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Sat, 10 Oct 2026 19:45:04 +0530 Subject: [PATCH 02/11] feat(header): quieter header "Codec Explorer" instead of "WASM Codec Explorer"; the privacy badge becomes a small "Runs locally" note and the GitHub link an icon button, so the header stays on one row on phones. Co-Authored-By: Claude Opus 5.5 --- .../lib/components/viewer/AppHeader.svelte | 18 ++++++------ web/src/styles/header.css | 28 +++++++------------ 2 files changed, 19 insertions(+), 27 deletions(-) diff --git a/web/src/lib/components/viewer/AppHeader.svelte b/web/src/lib/components/viewer/AppHeader.svelte index d27b0a5..4fae33b 100644 --- a/web/src/lib/components/viewer/AppHeader.svelte +++ b/web/src/lib/components/viewer/AppHeader.svelte @@ -17,19 +17,19 @@
-

WASM Codec Explorer

+

Codec Explorer

-
- + + - Processed locally on your device -
- - GitHub Logo - View Source on GitHub + Runs locally + + + - {/if} -
- - {#if !appState.originalImageData} -
Load an image to compare coefficient sparsity.
- {:else if loading} -
Transforming the image with DCT, Haar and CDF 9/7…
- {:else if !stats} -
Click Generate to compare how sparse each transform makes the image.
- {:else} - {@const series = TRANSFORMS.map(t => ({ info: t, data: stats![t.value] }))} - {@const svgW = 700} - {@const svgH = 240} - {@const padL = 52} - {@const padR = 16} - {@const padT = 30} - {@const padB = 48} - {@const chartW = svgW - padL - padR} - {@const chartH = svgH - padT - padB} - {@const maxY = Math.max(...series.flatMap(s => s.data.histogram)) * 1.1 || 1} - {@const groupW = chartW / COEFF_BINS} - {@const barW = (groupW - 6) / series.length} -
- - {#each [0.25, 0.5, 0.75, 1.0] as frac} - {@const gy = padT + chartH * (1 - frac)} - - {(maxY * frac * 100).toFixed(0)}% - {/each} - - - - {#each series as s, k} - {#each s.data.histogram as val, b} - {@const barH = Math.max(0, (val / maxY) * chartH)} - - {s.info.label}: {(val * 100).toFixed(1)}% of coefficients with |c| in bin {binLabel(b)} - - {/each} - {/each} +
+ {#if !appState.originalImageData} +
Load an image to compare coefficient sparsity.
+ {:else if loading} +
Transforming the image with DCT, Haar and CDF 9/7…
+ {:else if stats} + {@const series = TRANSFORMS.map(t => ({ info: t, data: stats![t.value] }))} + {@const svgW = 700} + {@const svgH = 240} + {@const padL = 52} + {@const padR = 16} + {@const padT = 30} + {@const padB = 48} + {@const chartW = svgW - padL - padR} + {@const chartH = svgH - padT - padB} + {@const maxY = Math.max(...series.flatMap(s => s.data.histogram)) * 1.1 || 1} + {@const groupW = chartW / COEFF_BINS} + {@const barW = (groupW - 6) / series.length} +
+ + {#each [0.25, 0.5, 0.75, 1.0] as frac} + {@const gy = padT + chartH * (1 - frac)} + + {(maxY * frac * 100).toFixed(0)}% + {/each} + + - {#each { length: COEFF_BINS } as _, b} - {binLabel(b)} - {/each} + {#each series as s, k} + {#each s.data.histogram as val, b} + {@const barH = Math.max(0, (val / maxY) * chartH)} + + {s.info.label}: {(val * 100).toFixed(1)}% of coefficients with |c| in bin {binLabel(b)} + + {/each} + {/each} - |AC coefficient| (doubling-width bins) - Share + {#each { length: COEFF_BINS } as _, b} + {binLabel(b)} + {/each} - {#each series as s, k} - - {s.info.label} - {/each} - -
+ |AC coefficient| (doubling-width bins) + Share -
{#each series as s, k} - {#if k > 0}
{/if} -
- {s.info.label} zeroed at Q{statsQuality} - {(s.data.zeroFraction * 100).toFixed(1)}% -
+ + {s.info.label} {/each} + +
+ +
+ {#each series as s, k} + {#if k > 0}
{/if} +
+ {s.info.label} zeroed at Q{statsQuality} + {(s.data.zeroFraction * 100).toFixed(1)}%
-

- Current transform: {transformInfo(appState.transformType).label}. - DC / LL coefficients are excluded. The zeroed share follows the quality slider. -

- {/if} - -
+ {/each} +
+

+ DC / LL coefficients are excluded. The zeroed share follows the quality slider. +

+ {/if} + diff --git a/web/src/lib/components/viewer/ImageSourcePanel.svelte b/web/src/lib/components/viewer/ImageSourcePanel.svelte index bbfc5b9..253b663 100644 --- a/web/src/lib/components/viewer/ImageSourcePanel.svelte +++ b/web/src/lib/components/viewer/ImageSourcePanel.svelte @@ -2,13 +2,12 @@ import { appState } from '../../state.svelte.js'; interface Props { - dropZoneVisible: boolean; activeTestImageIndex: number | null; onFile: (file: File) => void; onTestImage: (index: number) => void; } - let { dropZoneVisible = $bindable(), activeTestImageIndex, onFile, onTestImage }: Props = $props(); + let { activeTestImageIndex, onFile, onTestImage }: Props = $props(); const TEST_IMAGE_COUNT = 20; // Kodak dataset let testImagesOpen = $state(false); @@ -19,65 +18,31 @@ if (file) onFile(file); } - function onDrop(e: DragEvent) { - e.preventDefault(); - dropZoneVisible = false; - const file = e.dataTransfer?.files[0]; - if (file) onFile(file); - } - function openFilePicker() { fileInput?.click(); } - - function onDropZoneKeyDown(e: KeyboardEvent) { - if (e.key === 'Enter' || e.key === ' ') { - e.preventDefault(); - openFilePicker(); - } - } - + {#if !appState.wasmReady}
{appState.status}
{/if} -{#if dropZoneVisible} -
{ e.preventDefault(); (e.currentTarget as HTMLElement).classList.add('drag-over'); }} - ondragleave={(e) => (e.currentTarget as HTMLElement).classList.remove('drag-over')} - ondrop={onDrop}> - - - - - -
Drop an image here
-
or browse to upload
-
-{:else} - -{/if}
diff --git a/web/src/lib/components/viewer/MetricsPanel.svelte b/web/src/lib/components/viewer/MetricsPanel.svelte deleted file mode 100644 index 3aa3dca..0000000 --- a/web/src/lib/components/viewer/MetricsPanel.svelte +++ /dev/null @@ -1,74 +0,0 @@ - - -
- Analysis -
- {#if appState.originalImageData} -
-
-
Channel
-
PSNR (dB)
-
SSIM
-
- {#each [ - { channel: 'Y', psnr: appState.psnr.y, ssim: appState.ssim.y }, - { channel: 'Cr', psnr: appState.psnr.cr, ssim: appState.ssim.cr }, - { channel: 'Cb', psnr: appState.psnr.cb, ssim: appState.ssim.cb } - ] as metric} - {@const psnrState = getPsnrState(metric.psnr)} - {@const ssimState = getSsimState(metric.ssim)} -
-
{metric.channel}
-
- {metric.psnr.toFixed(2)} -
-
- {metric.ssim.toFixed(4)} -
-
- {/each} -
- - {:else} -
Load an image to see quality metrics and compression analysis.
- {/if} - - {#if appState.fileSizeInfo} -
-
- File Size Comparison - -{appState.fileSizeInfo.reduction}% -
-
-
- {appState.fileSizeInfo.original} - β†’ - ~{appState.fileSizeInfo.estimated} -
-
-
-
-
-
- {appState.fileSizeInfo.ratio}Γ— compression ratio -
-
- {/if} -
-
diff --git a/web/src/lib/components/viewer/RdChart.svelte b/web/src/lib/components/viewer/RdChart.svelte index ddc4808..d3dfa5c 100644 --- a/web/src/lib/components/viewer/RdChart.svelte +++ b/web/src/lib/components/viewer/RdChart.svelte @@ -1,5 +1,3 @@ - - -
-
-
-
-

Rate-Distortion Curve

-

Quality tradeoff: higher bitrate usually improves PSNR.

-
- {#if rdLoading} - Sampling… - {:else if allPoints.length > 0} - {allPoints.length} points - {/if} - {#if appState.originalImageData && !rdLoading} - - {/if} -
- - {#if !appState.originalImageData} -
Load an image to generate an RD plot.
- {:else if rdError} -
{rdError}
- {:else if rdLoading && allPoints.length === 0} -
Sampling {sampleCount} quality levels Γ— {TRANSFORMS.length} transforms…
- {:else if allPoints.length === 0} -
Click Generate to compute the rate-distortion curve.
- {:else if plotted.some(s => s.points.length >= 2)} - {@const svgW = 700} - {@const svgH = 280} - {@const padL = 64} - {@const padR = 20} - {@const padT = 18} - {@const padB = 52} - {@const xMinRaw = Math.min(...allPoints.map((p) => p.bitrate))} - {@const xMaxRaw = Math.max(...allPoints.map((p) => p.bitrate))} - {@const yMinRaw = Math.min(...allPoints.map((p) => p.psnr))} - {@const yMaxRaw = Math.max(...allPoints.map((p) => p.psnr))} - {@const xPad = Math.max(0.05, (xMaxRaw - xMinRaw) * 0.08)} - {@const yPad = Math.max(0.5, (yMaxRaw - yMinRaw) * 0.12)} - {@const xMin = xMinRaw - xPad} - {@const xMax = xMaxRaw + xPad} - {@const yMin = yMinRaw - yPad} - {@const yMax = yMaxRaw + yPad} - {@const chartW = svgW - padL - padR} - {@const chartH = svgH - padT - padB} - {@const mapX = (v: number) => padL + ((v - xMin) / (xMax - xMin || 1)) * chartW} - {@const mapY = (v: number) => svgH - padB - ((v - yMin) / (yMax - yMin || 1)) * chartH} - {@const xTicks = Array.from({length: 5}, (_, i) => xMinRaw + i * (xMaxRaw - xMinRaw) / 4)} - {@const yTicks = Array.from({length: 5}, (_, i) => yMinRaw + i * (yMaxRaw - yMinRaw) / 4)} - - {@const curves = plotted.map(({ info, points }) => { - const pts = points.map(p => ({ x: mapX(p.bitrate), y: mapY(p.psnr) })); - const path = smoothSvgPath(pts); - const fill = pts.length > 0 ? path + ` L ${pts[pts.length - 1].x},${svgH - padB} L ${pts[0].x},${svgH - padB} Z` : ''; - return { info, points, path, fill }; - })} +
+ {#if !appState.originalImageData} +
Load an image to generate an RD plot.
+ {:else if rdError} +
{rdError}
+ {:else if rdLoading && allPoints.length === 0} +
Sampling {sampleCount} quality levels Γ— {TRANSFORMS.length} transforms…
+ {:else if allPoints.length === 0} +
Preparing the curve…
+ {:else if plotted.some(s => s.points.length >= 2)} + {@const svgW = 700} + {@const svgH = 280} + {@const padL = 64} + {@const padR = 20} + {@const padT = 18} + {@const padB = 52} + {@const xMinRaw = Math.min(...allPoints.map((p) => p.bitrate))} + {@const xMaxRaw = Math.max(...allPoints.map((p) => p.bitrate))} + {@const yMinRaw = Math.min(...allPoints.map((p) => p.psnr))} + {@const yMaxRaw = Math.max(...allPoints.map((p) => p.psnr))} + {@const xPad = Math.max(0.05, (xMaxRaw - xMinRaw) * 0.08)} + {@const yPad = Math.max(0.5, (yMaxRaw - yMinRaw) * 0.12)} + {@const xMin = xMinRaw - xPad} + {@const xMax = xMaxRaw + xPad} + {@const yMin = yMinRaw - yPad} + {@const yMax = yMaxRaw + yPad} + {@const chartW = svgW - padL - padR} + {@const chartH = svgH - padT - padB} + {@const mapX = (v: number) => padL + ((v - xMin) / (xMax - xMin || 1)) * chartW} + {@const mapY = (v: number) => svgH - padB - ((v - yMin) / (yMax - yMin || 1)) * chartH} + {@const xTicks = Array.from({length: 5}, (_, i) => xMinRaw + i * (xMaxRaw - xMinRaw) / 4)} + {@const yTicks = Array.from({length: 5}, (_, i) => yMinRaw + i * (yMaxRaw - yMinRaw) / 4)} + + {@const curves = plotted.map(({ info, points }) => { + const pts = points.map(p => ({ x: mapX(p.bitrate), y: mapY(p.psnr) })); + const path = smoothSvgPath(pts); + const fill = pts.length > 0 ? path + ` L ${pts[pts.length - 1].x},${svgH - padB} L ${pts[0].x},${svgH - padB} Z` : ''; + return { info, points, path, fill }; + })} - {@const targetPoints = series[appState.transformType] ?? []} - {@const candidates = targetPoints.length > 0 ? targetPoints : allPoints} - {@const currentPoint = candidates.reduce((best, p) => Math.abs(p.quality - appState.quality) < Math.abs(best.quality - appState.quality) ? p : best)} - {@const cpx = mapX(currentPoint.bitrate)} - {@const cpy = mapY(currentPoint.psnr)} -
- - - {#each curves as curve} - - - - - {/each} - - - - - {#each yTicks as tick} - - {/each} - {#each xTicks as tick} - - {/each} - - - + {@const targetPoints = series[appState.transformType] ?? []} + {@const candidates = targetPoints.length > 0 ? targetPoints : allPoints} + {@const currentPoint = candidates.reduce((best, p) => Math.abs(p.quality - appState.quality) < Math.abs(best.quality - appState.quality) ? p : best)} + {@const cpx = mapX(currentPoint.bitrate)} + {@const cpy = mapY(currentPoint.psnr)} +
+ + {#each curves as curve} - - + + + + {/each} + + + + + {#each yTicks as tick} + + {/each} + {#each xTicks as tick} + + {/each} + + + + {#each curves as curve} + + + {/each} - - + + - {#each curves as curve} - {#each curve.points as point} - {@const isCurrent = point.quality === appState.quality && appState.transformType === curve.info.value} - selectPoint(curve.info.value, point.quality)} - onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') selectPoint(curve.info.value, point.quality); }}> - {curve.info.label}: Q{point.quality} Β· {point.psnr.toFixed(2)} dB Β· {point.bitrate.toFixed(2)} bpp Β· ~{formatBytes(point.estimatedBytes)} - - {/each} - {/each} + {#each curves as curve} + {#each curve.points as point} + {@const isCurrent = point.quality === appState.quality && appState.transformType === curve.info.value} + selectPoint(curve.info.value, point.quality)} + onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') selectPoint(curve.info.value, point.quality); }}> + {curve.info.label}: Q{point.quality} Β· {point.psnr.toFixed(2)} dB Β· {point.bitrate.toFixed(2)} bpp Β· ~{formatBytes(point.estimatedBytes)} + + {/each} + {/each} - Q{currentPoint.quality} + Q{currentPoint.quality} - - {#each curves as curve, i} - - {curve.info.label} - {/each} - {#each xTicks as tick} - {tick.toFixed(2)} - {/each} - {#each yTicks as tick} - {tick.toFixed(1)} - {/each} - Bitrate (bits per pixel) - PSNR Y (dB) - -
+ + {#each curves as curve, i} + + {curve.info.label} + {/each} + {#each xTicks as tick} + {tick.toFixed(2)} + {/each} + {#each yTicks as tick} + {tick.toFixed(1)} + {/each} + Bitrate (bits per pixel) + PSNR Y (dB) + +
-
-
- Transform - {transformInfo(appState.transformType).label} -
-
-
- Quality - Q{currentPoint.quality} -
-
-
- Bitrate - {currentPoint.bitrate.toFixed(2)} bpp -
-
-
- PSNR Y - {currentPoint.psnr.toFixed(2)} dB -
-
-
- Est. size - ~{formatBytes(currentPoint.estimatedBytes)} -
-
- {:else} -
Need more samples to render an RD curve.
- {/if} -
-
+ {:else} +
Need more samples to render an RD curve.
+ {/if} + diff --git a/web/src/lib/components/viewer/ToolsPanel.svelte b/web/src/lib/components/viewer/ToolsPanel.svelte deleted file mode 100644 index d7f2df2..0000000 --- a/web/src/lib/components/viewer/ToolsPanel.svelte +++ /dev/null @@ -1,73 +0,0 @@ - - -
- Advanced -
-
-
Tools
- {#if wavelet} - - - {:else} - - {/if} - - - {#if wavelet} -

The block inspector is specific to the 8Γ—8 DCT. Wavelets have no blocks β€” explore their subband pyramid instead.

- {:else} -

Dive deep into compression artifacts, error heatmaps, and edge distortion analysis.

- {/if} -

[ ] quality Β±5 Β· T cycle transform

-
-
-
diff --git a/web/src/styles/base.css b/web/src/styles/base.css index 24c94a0..9cdc341 100644 --- a/web/src/styles/base.css +++ b/web/src/styles/base.css @@ -17,7 +17,6 @@ body { code, .stat-value, -.file-size-values, .stats { font-family: var(--font-mono); } diff --git a/web/src/styles/components.css b/web/src/styles/components.css index 0c88551..6e2df4f 100644 --- a/web/src/styles/components.css +++ b/web/src/styles/components.css @@ -10,63 +10,16 @@ border-radius: 12px; background: var(--bg-secondary); overflow: hidden; - opacity: 0; - transform: translateY(10px); - animation: viewerSectionStaggerIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; - transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; -} - -.controls .viewer-section:nth-child(2) { - animation-delay: 0.08s; -} - -.controls .viewer-section:nth-child(3) { - animation-delay: 0.14s; -} - -.controls .viewer-section:nth-child(4) { - animation-delay: 0.2s; -} - -.viewer-section:hover { - transform: translateY(-1px); - box-shadow: 0 10px 24px -18px var(--shadow-color); - border-color: color-mix(in srgb, var(--primary) 25%, var(--border-subtle, var(--border))); } .viewer-section-title { - list-style: none; - cursor: pointer; + margin: 0; padding: 12px 14px; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); - display: flex; - align-items: center; - gap: 8px; - user-select: none; -} - -.viewer-section-title::-webkit-details-marker { - display: none; -} - -.viewer-section-title::after { - content: ''; - margin-left: auto; - width: 6px; - height: 6px; - border-right: 1.5px solid var(--text-muted); - border-bottom: 1.5px solid var(--text-muted); - transform: rotate(-45deg); - transition: transform 0.2s ease; - opacity: 0.7; -} - -.viewer-section[open]>.viewer-section-title::after { - transform: rotate(45deg); } .viewer-section-body { @@ -75,19 +28,6 @@ display: flex; flex-direction: column; gap: 14px; - animation: viewerSectionIn 0.2s ease; -} - -@keyframes viewerSectionIn { - from { - opacity: 0; - transform: translateY(-3px); - } - - to { - opacity: 1; - transform: translateY(0); - } } .control-group { @@ -96,64 +36,6 @@ gap: 8px; } -.viewer-section .control-group { - opacity: 0; - transform: translateY(4px); - animation: controlGroupIn 0.26s ease forwards; -} - -.viewer-section[open] .control-group:nth-child(1) { - animation-delay: 0.04s; -} - -.viewer-section[open] .control-group:nth-child(2) { - animation-delay: 0.09s; -} - -.viewer-section[open] .control-group:nth-child(3) { - animation-delay: 0.14s; -} - -.viewer-section[open] .control-group:nth-child(4) { - animation-delay: 0.19s; -} - -@keyframes viewerSectionStaggerIn { - from { - opacity: 0; - transform: translateY(10px); - } - - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes controlGroupIn { - from { - opacity: 0; - transform: translateY(4px); - } - - to { - opacity: 1; - transform: translateY(0); - } -} - -@media (prefers-reduced-motion: reduce) { - - .viewer-section, - .viewer-section .control-group, - .viewer-section-body { - animation: none; - transition: none; - opacity: 1; - transform: none; - } -} - label { font-weight: 600; font-size: var(--text-md); @@ -407,7 +289,6 @@ input[type="checkbox"] { color: var(--color-poor); } - .analysis-placeholder { font-size: var(--text-base); color: var(--text-muted); @@ -417,12 +298,6 @@ input[type="checkbox"] { text-align: center; } -.advanced-hint { - margin: 0; - font-size: var(--text-base); - color: var(--text-muted); -} - .control-hint { margin: 6px 0 0; font-size: var(--text-base-sm); @@ -500,61 +375,6 @@ input[type="checkbox"] { letter-spacing: 0.02em; } -/* File Size Estimation Bar */ -.file-size-bar-container { - margin-top: 6px; - padding: 14px; - background: var(--bg-secondary); - border: 1px solid var(--border); - border-radius: var(--radius-xl); - display: flex; - flex-direction: column; - gap: 10px; - transition: all 0.2s ease; -} - -.file-size-bar-container:hover { - border-color: var(--primary-subtle); - background: color-mix(in srgb, var(--primary) 3%, var(--bg-secondary)); -} - -.file-size-header { - display: flex; - justify-content: space-between; - align-items: center; -} - -.file-size-title { - font-size: var(--text-xs); - font-weight: 800; - color: var(--text-muted); - text-transform: uppercase; - letter-spacing: 0.12em; -} - -.reduction-badge { - background: var(--color-good-bg); - color: var(--color-good); - border: 1px solid var(--color-good-border); - font-size: var(--text-sm); - font-weight: 800; - padding: 3px 10px; - border-radius: var(--radius-full); -} - -.file-size-main { - display: flex; - flex-direction: column; - padding: 2px 0; -} - -.size-comparison-flow { - display: flex; - align-items: center; - gap: 8px; - font-family: var(--font-mono); -} - .size-val { font-weight: 700; white-space: nowrap; @@ -570,39 +390,10 @@ input[type="checkbox"] { opacity: 0.7; } -.size-arrow { - color: var(--text-muted); - opacity: 0.5; - font-size: 1.1rem; - font-weight: 400; -} - .size-val.highlight { color: var(--primary); } -.file-size-track { - width: 100%; - height: 8px; - background: var(--bg-tertiary); - border-radius: var(--radius-full); - overflow: hidden; - margin: 2px 0; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); -} - -.file-size-fill { - height: 100%; - background: linear-gradient(90deg, var(--color-good), var(--primary)); - border-radius: var(--radius-full); - transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -.file-size-footer { - display: flex; - justify-content: center; -} - .compression-ratio-label { font-size: var(--text-sm); font-weight: 700; @@ -610,15 +401,6 @@ input[type="checkbox"] { opacity: 0.9; } -.tint-toggle-group { - margin-top: 6px; -} - -.tint-toggle-group label { - padding: 5px 4px; - font-size: var(--text-base-sm); -} - /* Beta Badge */ .beta-badge { font-size: 0.6rem; @@ -871,12 +653,4 @@ input[type="checkbox"] { color: var(--text-muted); text-align: center; opacity: 0.7; -} - -/* Specific button for RD/Histogram generation to ensure consistency */ -.rd-generate-btn { - width: 120px !important; - padding-left: 0 !important; - padding-right: 0 !important; - flex-shrink: 0; } \ No newline at end of file diff --git a/web/src/styles/layout.css b/web/src/styles/layout.css index ae7ad4a..009baf1 100644 --- a/web/src/styles/layout.css +++ b/web/src/styles/layout.css @@ -39,70 +39,19 @@ } } -#viewerMode .main-column > .card, -#viewerMode .container > .controls-card { - opacity: 0; - transform: translateY(14px); - animation: viewerCardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; -} - -#viewerMode .viewer-card { - animation-delay: 0.05s; -} - -#viewerMode .rd-card { - animation-delay: 0.12s; -} - -#viewerMode .hist-card { - animation-delay: 0.19s; -} - -#viewerMode .controls-card { - animation-delay: 0.15s; -} - -#viewerMode .main-column > .card:hover, -#viewerMode .container > .controls-card:hover { - transform: translateY(-2px); - box-shadow: 0 12px 30px -14px var(--shadow-color), 0 5px 12px -6px var(--shadow-color); - border-color: color-mix(in srgb, var(--primary) 22%, var(--border-subtle, var(--border))); -} - -@keyframes viewerCardIn { - from { - opacity: 0; - transform: translateY(14px) scale(0.995); - } - - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -@media (prefers-reduced-motion: reduce) { - #viewerMode .main-column > .card, - #viewerMode .container > .controls-card { - opacity: 1; - transform: none; - animation: none; - } - - #viewerMode .main-column > .card:hover, - #viewerMode .container > .controls-card:hover { - transform: none; - } - - .card { - transition: none; - } -} - @media (max-width: 768px) { .container { grid-template-columns: 1fr; } + + /* Phones: image, then the controls that change it, then the charts. */ + #viewerMode .main-column { + display: contents; + } + + #viewerMode .viewer-card { order: 1; } + #viewerMode .controls-card { order: 2; } + #viewerMode .compare-card { order: 3; } } @media (max-width: 1024px) { diff --git a/web/src/styles/onboarding.css b/web/src/styles/onboarding.css deleted file mode 100644 index b86822e..0000000 --- a/web/src/styles/onboarding.css +++ /dev/null @@ -1,64 +0,0 @@ -/* ===== Onboarding / Drop Zone ===== */ -.drop-zone { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 16px; - padding: 60px 32px; - border: 2px dashed var(--border); - border-radius: 16px; - background: var(--bg-secondary); - cursor: pointer; - transition: all 0.3s ease; - text-align: center; - min-height: 280px; -} - -.drop-zone:hover, -.drop-zone.drag-over { - border-color: var(--primary); - background: var(--primary-subtle); -} - -.drop-zone.drag-over { - transform: scale(1.01); - box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); -} - -.drop-zone-icon { - width: 64px; - height: 64px; - color: var(--text-muted); - opacity: 0.6; - transition: all 0.3s ease; -} - -.drop-zone:hover .drop-zone-icon, -.drop-zone.drag-over .drop-zone-icon { - color: var(--primary); - opacity: 1; - transform: translateY(-4px); -} - -.drop-zone-text { - font-size: 1rem; - font-weight: 600; - color: var(--text); -} - -.drop-zone-hint { - font-size: 0.8rem; - color: var(--text-muted); -} - -.drop-zone-hint .browse-link { - color: var(--primary); - font-weight: 600; - text-decoration: underline; - text-underline-offset: 2px; -} - -.drop-zone input[type="file"] { - display: none; -} \ No newline at end of file diff --git a/web/src/styles/viewer.css b/web/src/styles/viewer.css index 230c69b..b91a106 100644 --- a/web/src/styles/viewer.css +++ b/web/src/styles/viewer.css @@ -54,7 +54,6 @@ canvas { background: rgba(30, 41, 59, 0.9); } - .comparison-viewer { position: relative; width: 100%; @@ -98,43 +97,6 @@ canvas { box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.35), 0 8px 24px rgba(5, 150, 105, 0.28); } -.inspector-active-banner { - position: absolute; - left: 12px; - top: 12px; - z-index: 4; - display: inline-flex; - align-items: center; - gap: 7px; - background: rgba(15, 23, 42, 0.82); - border: 1px solid rgba(52, 211, 153, 0.45); - color: rgba(241, 245, 249, 0.98); - border-radius: 999px; - font-size: 0.7rem; - padding: 6px 10px; - max-width: calc(100% - 24px); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); -} - -.inspector-active-banner strong { - font-size: 0.72rem; - white-space: nowrap; -} - -.inspector-active-banner span:last-child { - opacity: 0.9; -} - -.banner-dot { - width: 7px; - height: 7px; - border-radius: 999px; - background: #34d399; - box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25); - flex-shrink: 0; -} - .comparison-divider { position: absolute; top: 0; @@ -182,7 +144,6 @@ canvas { @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { - .inspector-active-banner, .comparison-handle { backdrop-filter: none; -webkit-backdrop-filter: none; @@ -213,33 +174,14 @@ canvas { height: auto; } - @media (max-width: 860px) { .viewer-canvas-header { padding: 0 4px 6px; } - - .comparison-label { - font-size: 0.65rem; - } - - .inspector-active-banner span:last-child { - display: none; - } - - .inspector-quickstart { - flex-direction: column; - align-items: flex-start; - } - - .inspector-quickstart-btn { - width: 100%; - } } @media (max-width: 1024px) { - .inspector-active-banner, .comparison-handle { backdrop-filter: none; -webkit-backdrop-filter: none; @@ -247,57 +189,10 @@ canvas { } .viewer-canvas-header { - display: grid; - grid-template-columns: 1fr auto 1fr; - align-items: center; - padding: 0 4px 12px; -} - -.canvas-header-left { - display: flex; - align-items: center; -} - -.canvas-header-center { - display: flex; - align-items: center; - justify-content: center; -} - -.canvas-header-right { display: flex; align-items: center; - justify-content: flex-end; -} - -.img-dim-info { - font-size: 0.72rem; - font-weight: 600; - color: var(--text-muted); - background: rgba(255, 255, 255, 0.05); - padding: 5px 10px; - border-radius: 999px; - display: inline-flex; - align-items: center; - gap: 3px; - border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1)); -} - -.dim-sep { - color: var(--text-muted); - opacity: 0.4; - font-size: 0.65rem; - padding: 0 1px; -} - -.dim-unit { - font-size: 0.65rem; - opacity: 0.6; - margin-left: 1px; -} - -.dim-val { - font-variant-numeric: tabular-nums; + gap: 8px; + padding: 0 4px 12px; } /* View Mode Toggle (Segmented Control) within Viewer Card */ @@ -321,7 +216,7 @@ canvas { cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; - min-width: 90px; + min-width: 56px; } .view-mode-toggle button:hover { @@ -335,16 +230,10 @@ canvas { box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); } -/* Phones: dimensions + zoom share the first row, the view toggle spans the second. */ +/* Phones: the view toggle gets its own row above the zoom controls. */ @media (max-width: 600px) { .viewer-canvas-header { - grid-template-columns: 1fr auto; - row-gap: 8px; - } - - .canvas-header-center { - grid-column: 1 / -1; - grid-row: 2; + flex-wrap: wrap; } .view-mode-toggle { @@ -359,6 +248,7 @@ canvas { } .viewer-zoom-controls { + margin-left: auto; display: flex; align-items: center; gap: 6px; @@ -409,20 +299,6 @@ canvas { letter-spacing: 0.02em; } -/* Old labels and mini info removed β€” moved to global header */ - - -.inspector-quickstart { - border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.2)); - border-radius: 10px; - padding: 10px 12px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - background: rgba(15, 23, 42, 0.4); -} - .rd-chart-panel { padding: 4px; display: flex; @@ -452,13 +328,6 @@ canvas { opacity: 0.85; } -.rd-chart-status { - font-size: 0.72rem; - font-weight: 700; - color: var(--primary); - white-space: nowrap; -} - .rd-chart-svg-wrap { width: 100%; border: 1px solid var(--border-subtle, var(--border)); @@ -603,39 +472,83 @@ canvas { min-width: 40%; } } +.view-mode-toggle button:disabled, +.zoom-ctrl-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Dropping an image file onto the viewer */ +.viewer-card.drag-over { + outline: 2px dashed var(--primary); + outline-offset: -6px; +} -.quickstart-copy { +.split-labels { + display: flex; + justify-content: space-between; + padding: 8px 4px 0; + font-size: 0.72rem; + font-weight: 600; + color: rgba(203, 213, 225, 0.8); +} + +.viewer-note { + margin: 8px 4px 0; + font-size: 0.72rem; + line-height: 1.5; + color: rgba(203, 213, 225, 0.8); +} + +/* Ways into the two deep-dive modes, under the image */ +.go-deeper { + display: flex; + gap: 10px; + margin-top: 12px; +} + +.go-deeper-btn { + flex: 1; display: flex; flex-direction: column; + align-items: flex-start; gap: 2px; - min-width: 0; + text-align: left; + padding: 10px 12px; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); + color: rgba(248, 250, 252, 0.98); + cursor: pointer; + transition: background-color 0.15s ease, border-color 0.15s ease; } -.quickstart-copy strong { +.go-deeper-btn strong { font-size: 0.8rem; - color: rgba(248, 250, 252, 0.98); - letter-spacing: 0.02em; } -.quickstart-copy span { +.go-deeper-btn strong::after { + content: ' β†’'; + color: var(--primary); +} + +.go-deeper-btn span { font-size: 0.72rem; - color: rgba(203, 213, 225, 0.92); + color: rgba(203, 213, 225, 0.85); } -.inspector-quickstart-btn { - flex-shrink: 0; - border: none; - background: var(--primary); - color: white; - border-radius: 8px; - padding: 8px 10px; - font-size: 0.74rem; - font-weight: 700; - cursor: pointer; - transition: background-color 0.2s ease, transform 0.15s ease; +.go-deeper-btn:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.08); + border-color: var(--primary); } -.inspector-quickstart-btn:hover { - background: var(--primary-hover); - transform: translateY(-1px); -} \ No newline at end of file +.go-deeper-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +@media (max-width: 600px) { + .go-deeper { + flex-direction: column; + } +} From 7a3eed87cb104d131c003d74565596ae9ec26fec Mon Sep 17 00:00:00 2001 From: Abhinav Date: Sat, 10 Oct 2026 20:06:53 +0530 Subject: [PATCH 05/11] feat(ui): explain labels on hover Every term a newcomer might not know now explains itself on hover, with a dotted underline marking text labels that do: - Viewer: quality, transform, chroma subsampling, the size estimate, per-channel metrics, sample images, chart axes and zeroed shares. - Block Inspector: each pipeline stage, the colour legend, the coordinate and luma/chroma badges, and the sidebar headings. The quantization arrows' existing tooltips now say it is the lossy step. - Artifact Analyzer: what Blink, Heat Map and Grid actually do. Co-Authored-By: Claude Opus 5.5 --- web/src/ArtifactInspectorMode.svelte | 6 +-- web/src/InspectorMode.svelte | 42 +++++++++---------- web/src/lib/components/CodecSettings.svelte | 4 +- web/src/lib/components/QualityControl.svelte | 2 +- web/src/lib/components/ResultSummary.svelte | 4 +- .../components/viewer/CoeffHistogram.svelte | 7 ++-- .../components/viewer/ImageSourcePanel.svelte | 2 +- web/src/lib/components/viewer/RdChart.svelte | 4 +- web/src/styles/utilities.css | 9 +++- 9 files changed, 44 insertions(+), 36 deletions(-) diff --git a/web/src/ArtifactInspectorMode.svelte b/web/src/ArtifactInspectorMode.svelte index 6a8c5bc..3740339 100644 --- a/web/src/ArtifactInspectorMode.svelte +++ b/web/src/ArtifactInspectorMode.svelte @@ -399,7 +399,7 @@
{/if}
- - -
@@ -338,7 +338,7 @@
- Image Navigator + Image Navigator
- Suggested Blocks + Suggested Blocks
{#if appState.suggestedBlocks.length === 0} @@ -394,7 +394,7 @@ { appState.quality = q; }} />
-
View Mode
+
View Mode
{#each inspViewModes as mode}
-
Chroma Subsampling
+
Chroma Subsampling
{#each chromaModes as cs}
-

Original

+

Original

AxB Pixels
@@ -479,16 +479,16 @@
{transformName}
β†’
-

{transformGridLabel}

+

{transformGridLabel}

Frequencies
-
Quantization Divides frequencies by the quantization table to reduce data size.
+
Quantization Divides frequencies by the quantization table and rounds. This is the only lossy step.
Γ· Quant
β†’
-

Quantized

+

Quantized

Integers
@@ -524,11 +524,11 @@
Stored Data
-
Dequantization Multiplies stored integers by the quantization table.
+
Dequantization Multiplies stored integers by the quantization table. The rounding can't be undone, so values come back approximately.
Γ— Quant
β†’
-

Dequantized

+

Dequantized

Approx Freqs
@@ -538,7 +538,7 @@
-

Reconstructed

+

Reconstructed

-

Quantized

-
-
Stored Data
-
-
-
Dequantization Multiplies stored integers by the quantization table. The rounding can't be undone, so values come back approximately.
-
Γ— Quant
β†’
-
-
-

Dequantized

+

Dequantized

Approx Freqs
@@ -551,6 +543,23 @@
Final Image
+
+
Compare Subtract the reconstruction from the original to see what was lost.
+
vs Original
β†’
+
+
+

Error Residual

+
+
+
+
+ +30 +
+ -30 +
+
+
+
@@ -569,54 +578,30 @@
-
Analysis & Statistics
-
-
-

Error Residual

-
-
-
-
- +30 -
- -30 -
-
-
-
- +
What it costs and why
+
-

Block Statistics

+

This Block

-
β€”
-
MSE
-
Mean Squared Error
(1/64) × Σ(orig − recon)²
Average squared pixel error across all 64 coefficients.
-
-
-
β€”
-
Peak Error
-
Peak Absolute Error
max |orig − recon|
Worst-case pixel difference in the block.
+
β€”
+
Bits Β· β€” per pixel
+
Estimated bits (JPEG-style)
A simplified JPEG Huffman simulation for this block: zig-zag runs and magnitudes, with DC coded as the difference from the previous block. Per pixel is that divided by 64. The viewer's file size uses a whole-image entropy estimate instead, so the two don't add up exactly.
β€”
-
Zeros (Count)
-
Zero Coefficients
count(|quant[i]| < 0.5)
Number of quantized transform coefficients rounded to zero.
+
Zeros Β· β€”
+
Zero coefficients
count(|quant[i]| < 0.5)
Quantized coefficients rounded to zero. Zeros are nearly free to store, so more zeros means fewer bits.
-
β€”
-
Compression
-
Zero Coefficient Ratio
(zeros / 64) × 100%
Percentage of quantized transform coefficients equal to zero.
-
-
-
β€”
-
JPEG Bits (est.)
-
Estimated Bits (JPEG-style)
A simplified JPEG Huffman simulation for this block: zig-zag runs and magnitudes, with DC coded as the difference from the previous block. The viewer's file size uses a whole-image entropy estimate instead, so the two don't add up exactly.
+
β€”
+
MSE
+
Mean squared error
(1/64) × Σ(orig − recon)²
Average squared pixel error across the block.
-
β€”
-
Bits / Pixel
-
Bits Per Pixel
(Est. Bits) / 64
Average number of bits required to store each pixel in this block.
+
β€”
+
Peak Error
+
Peak absolute error
max |orig − recon|
Worst-case pixel difference in the block.
diff --git a/web/src/lib/grid-renderer.ts b/web/src/lib/grid-renderer.ts index 5042772..055f063 100644 --- a/web/src/lib/grid-renderer.ts +++ b/web/src/lib/grid-renderer.ts @@ -17,15 +17,15 @@ function getTransformFreqLabel(row: number, col: number): string { } const ALL_GRID_IDS = [ - 'gridOriginal', 'gridDCT', 'gridQuantized', 'gridQuantized2', + 'gridOriginal', 'gridDCT', 'gridQuantized', 'gridQuantizedAdvanced', 'gridDequantized', 'gridReconstructed', 'gridQuantTable', 'gridError' ]; let lastHighlightedKey: string | null = null; -/** Decoder-side grids whose coefficients can be dropped in edit mode. */ -const EDITABLE_GRID_IDS = ['gridQuantized2', 'gridDequantized']; +/** Grids whose coefficients can be dropped in edit mode: the stored data and what the decoder makes of it. */ +const EDITABLE_GRID_IDS = ['gridQuantized', 'gridDequantized']; export function clearAllHighlights(): void { lastHighlightedKey = null; @@ -95,9 +95,9 @@ export function renderLossMeter(mse: number, _peakError: number): void { meter.className = 'loss-meter'; meter.innerHTML = `
- Quality + Fidelity
- PSNR-based Quality
+ Block fidelity (from this block's PSNR)
clamp((10 log10(255²/MSE) − 20) / 30, 0, 1)
Maps the 20–50 dB PSNR range to 0–100%. MSE = 0 is treated as lossless.
@@ -166,7 +166,7 @@ export function renderGrid( const row = Number.parseInt(cell.dataset.row || '0'); const col = Number.parseInt(cell.dataset.col || '0'); - // Edit mode: decoder-side coefficients toggle instead of animating. + // Edit mode: stored coefficients toggle instead of animating. if (coeffEdit.editing && EDITABLE_GRID_IDS.includes(el.id)) { coeffEdit.toggle(row * 8 + col); return; diff --git a/web/src/lib/inspection.ts b/web/src/lib/inspection.ts index cecec0e..d9903da 100644 --- a/web/src/lib/inspection.ts +++ b/web/src/lib/inspection.ts @@ -183,14 +183,13 @@ function renderNow(): void { renderGrid('gridOriginal', (isRGB ? originalRGB : null) ?? original, 'intensity', 'original', isRGB && !!originalRGB); renderGrid('gridDCT', coefficients, 'frequency', 'transform'); - renderGrid('gridQuantized', current.quantized, 'frequency', 'quantized'); - renderGrid('gridQuantized2', quantized, 'frequency', 'quantized'); + renderGrid('gridQuantized', quantized, 'frequency', 'quantized'); renderGrid('gridQuantizedAdvanced', quantized, 'frequency', 'quantized'); renderGrid('gridDequantized', dequantized, 'frequency', 'dequantized'); renderGrid('gridReconstructed', reconstructedRGB ?? reconstructed, 'intensity', 'reconstructed', !!reconstructedRGB); renderGrid('gridQuantTable', quantTable, 'qtable', 'qtable'); renderGrid('gridError', Array.from(errorData), 'error', 'error'); - markDroppedCells(['gridQuantized2', 'gridDequantized']); + markDroppedCells(['gridQuantized', 'gridDequantized']); renderLossMeter(mse, peakError); renderZigzagArray(quantized); diff --git a/web/src/styles/inspector-layout.css b/web/src/styles/inspector-layout.css index 9cd5784..e92ca5b 100644 --- a/web/src/styles/inspector-layout.css +++ b/web/src/styles/inspector-layout.css @@ -145,29 +145,21 @@ border-radius: 3px; } -/* ===== Context Crop ===== */ -.context-crop-container { +/* ===== Block header: which block, and what the page follows ===== */ +.block-header { display: flex; - flex-direction: column; align-items: center; - gap: 6px; + gap: 16px; margin-bottom: 20px; - padding: 16px; + padding: 12px 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } -.context-crop-label { - font-size: var(--text-sm); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--text-muted); -} - .context-crop-canvas-wrap { + flex-shrink: 0; position: relative; border: 2px solid var(--border); border-radius: 6px; @@ -177,17 +169,43 @@ .context-crop-canvas-wrap canvas { display: block; - width: 256px; - height: 256px; + width: 112px; + height: 112px; image-rendering: pixelated; image-rendering: crisp-edges; } -.context-crop-caption { - font-size: 0.64rem; +.block-header-text { + display: flex; + flex-direction: column; + gap: 6px; + min-width: 0; +} + +.block-header-title { + font-size: 1rem; + font-weight: 700; + color: var(--text); +} + +.block-header-title span { + margin-left: 6px; + font-size: 0.75rem; + font-weight: 500; color: var(--text-muted); - text-align: center; - max-width: 280px; +} + +.block-header-text p { + margin: 0; + font-size: 0.8rem; + line-height: 1.5; + color: var(--text-muted); +} + +.block-header-text kbd { + font-size: 0.65rem; + padding: 0 4px; + margin: 0 1px; } /* ===== Inspector Placeholder ===== */ diff --git a/web/src/styles/inspector-pipeline.css b/web/src/styles/inspector-pipeline.css index 4536b61..2db1b36 100644 --- a/web/src/styles/inspector-pipeline.css +++ b/web/src/styles/inspector-pipeline.css @@ -20,37 +20,16 @@ opacity: 0.6; padding-left: 4px; display: flex; - justify-content: space-between; - align-items: center; + align-items: baseline; + gap: 8px; } -.nav-hint { - display: flex; - align-items: center; - gap: 3px; - font-size: 0.62rem; - font-weight: 400; +.pipeline-row-label .row-sub { + font-weight: 500; text-transform: none; letter-spacing: 0; } -.nav-hint kbd { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 16px; - height: 16px; - padding: 0 3px; - border: 1px solid var(--border); - border-radius: 3px; - background: var(--bg-secondary); - font-family: var(--font-mono); - font-size: 0.55rem; - font-weight: 600; - color: var(--text-muted); - box-shadow: 0 1px 0 var(--border); -} - .pipeline-row { display: flex; align-items: center; @@ -344,6 +323,16 @@ gap: 12px; } +/* Stats take the room; the quant table stays the size of the pipeline grids. */ +.analysis-row-two { + grid-template-columns: 1fr clamp(140px, 18vw, 260px); +} + +/* Cards in a pipeline row share a top edge even when their heights differ. */ +.pipeline-row > .pipeline-block { + align-self: stretch; +} + /* Pipeline blocks in the analysis row fill their grid cell */ .analysis-row .pipeline-block { width: 100%; diff --git a/web/src/styles/inspector-responsive.css b/web/src/styles/inspector-responsive.css index 50d31b4..d940d0c 100644 --- a/web/src/styles/inspector-responsive.css +++ b/web/src/styles/inspector-responsive.css @@ -98,13 +98,23 @@ transform: translateX(-50%) translateY(-4px); } - .analysis-row { + .analysis-row, + .analysis-row-two { grid-template-columns: 1fr; } + /* No arrow keys on phones. */ + .block-header .kbd-only { + display: none; + } + + .pipeline-row > .pipeline-block { + align-self: center; + } + .context-crop-canvas-wrap canvas { - width: 200px; - height: 200px; + width: 80px; + height: 80px; } .sidebar-shortcuts { diff --git a/web/tests/browser/inspection.browser.test.js b/web/tests/browser/inspection.browser.test.js index 530fdc8..d440771 100644 --- a/web/tests/browser/inspection.browser.test.js +++ b/web/tests/browser/inspection.browser.test.js @@ -12,7 +12,7 @@ import { inspectBlock } from '../../src/lib/inspection.js'; const REQUIRED_DIVS = [ 'blockCoords', 'qTableType', 'qTableType2', - 'gridOriginal', 'gridDCT', 'gridQuantized', 'gridQuantized2', + 'gridOriginal', 'gridDCT', 'gridQuantized', 'gridDequantized', 'gridReconstructed', 'gridQuantTable', 'gridError', 'statMSE', 'statPeakError', 'statZeros', 'statCompression', 'lossMeterContainer', 'basisPopover', diff --git a/web/tests/unit/inspection.test.js b/web/tests/unit/inspection.test.js index ef67a2a..e6cd952 100644 --- a/web/tests/unit/inspection.test.js +++ b/web/tests/unit/inspection.test.js @@ -85,7 +85,7 @@ describe('inspection.js - inspectBlock', () => { inspectBlock(0, 0); expect(hideBasisPopover).toHaveBeenCalled(); expect(setCachedGridData).toHaveBeenCalled(); - expect(renderGrid).toHaveBeenCalledTimes(9); // 9 grids updated + expect(renderGrid).toHaveBeenCalledTimes(8); // 8 grids updated expect(renderLossMeter).toHaveBeenCalled(); expect(renderZigzagArray).toHaveBeenCalled(); expect(renderEntropySummary).toHaveBeenCalled(); From 3e625baf9ed61c7bd16ad2ac93aa1c346d4f22e3 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Sat, 10 Oct 2026 20:32:20 +0530 Subject: [PATCH 08/11] refactor(inspector): one registry for the element IDs it updates The inspector's imperative code finds its elements by ID and skips missing ones silently, so a renamed element just stopped updating. All such IDs now live in INSPECTOR_IDS (lib/inspector-dom.ts) and inspection.ts, grid-renderer.ts and basis-popover.ts use it instead of string literals. tests/unit/inspector-dom.test.js fails if an ID isn't rendered by a component, or if lib code looks up an ID outside the registry. It caught one straight away: the top-bar Luma/Chroma badge removed in the previous commit was still being written to. The write is gone, and the remaining badge's id goes back from qTableType2 to qTableType. Co-Authored-By: Claude Opus 5.5 --- web/src/InspectorMode.svelte | 2 +- web/src/lib/basis-popover.ts | 25 ++++---- web/src/lib/grid-renderer.ts | 59 +++++++++--------- web/src/lib/inspection.ts | 39 ++++++------ web/src/lib/inspector-dom.ts | 63 ++++++++++++++++++++ web/tests/browser/inspection.browser.test.js | 3 +- web/tests/unit/inspection.test.js | 2 - web/tests/unit/inspector-dom.test.js | 53 ++++++++++++++++ 8 files changed, 180 insertions(+), 66 deletions(-) create mode 100644 web/src/lib/inspector-dom.ts create mode 100644 web/tests/unit/inspector-dom.test.js diff --git a/web/src/InspectorMode.svelte b/web/src/InspectorMode.svelte index ef16a5d..6322e9f 100644 --- a/web/src/InspectorMode.svelte +++ b/web/src/InspectorMode.svelte @@ -610,7 +610,7 @@

Quant Table

- + {appState.currentViewMode === ViewMode.Cr || appState.currentViewMode === ViewMode.Cb ? 'Chroma' : 'Luma'}
diff --git a/web/src/lib/basis-popover.ts b/web/src/lib/basis-popover.ts index fd1d837..bf71a2a 100644 --- a/web/src/lib/basis-popover.ts +++ b/web/src/lib/basis-popover.ts @@ -1,6 +1,7 @@ import { hideTooltip } from './tooltip.js'; import { computeBasisPattern, computeHaarBasisPattern, getFreqLabel, getHaarFreqLabel } from './dct-utils.js'; import { appState } from './state.svelte.js'; +import { INSPECTOR_IDS } from './inspector-dom.js'; interface CachedGridData { coeffData?: Float64Array; @@ -101,7 +102,7 @@ function positionPopover(popover: HTMLElement, e: Pick, row: number, col: number): void { hideTooltip(); - const popover = document.getElementById('basisPopover'); + const popover = document.getElementById(INSPECTOR_IDS.basisPopover); if (!popover || !cachedGridData.coeffData) return; const idx = row * 8 + col; @@ -114,14 +115,14 @@ export function showBasisPopover(e: Pick, row if (el) el.innerText = text; }; - setEl('basisCoord', `(${row}, ${col})`); - setEl('basisFreqLabel', getTransformFreqLabel(row, col)); - setEl('basisValue', coeffVal.toFixed(2)); - setEl('basisQuantized', Math.round(quantVal).toString()); - setEl('basisDivisor', Math.round(qtVal).toString()); + setEl(INSPECTOR_IDS.basisCoord, `(${row}, ${col})`); + setEl(INSPECTOR_IDS.basisFreqLabel, getTransformFreqLabel(row, col)); + setEl(INSPECTOR_IDS.basisValue, coeffVal.toFixed(2)); + setEl(INSPECTOR_IDS.basisQuantized, Math.round(quantVal).toString()); + setEl(INSPECTOR_IDS.basisDivisor, Math.round(qtVal).toString()); // Update the static label next to the coefficient value - const coeffLabelEl = document.getElementById('basisValueLabel'); + const coeffLabelEl = document.getElementById(INSPECTOR_IDS.basisValueLabel); if (coeffLabelEl) coeffLabelEl.innerText = appState.transformType === 1 ? 'DWT:' : 'DCT:'; const basisPattern = getBasisPattern(col, row); @@ -130,8 +131,8 @@ export function showBasisPopover(e: Pick, row contribution[i] = coeffVal * basisPattern[i]; } - drawPatternOnCanvas('basisCanvas', Array.from(basisPattern), 'diverging'); - drawPatternOnCanvas('contributionCanvas', Array.from(contribution), 'diverging'); + drawPatternOnCanvas(INSPECTOR_IDS.basisCanvas, Array.from(basisPattern), 'diverging'); + drawPatternOnCanvas(INSPECTOR_IDS.contributionCanvas, Array.from(contribution), 'diverging'); positionPopover(popover, e); popover.style.display = 'block'; @@ -140,7 +141,7 @@ export function showBasisPopover(e: Pick, row } export function hideBasisPopover(): void { - const popover = document.getElementById('basisPopover'); + const popover = document.getElementById(INSPECTOR_IDS.basisPopover); if (popover) { popover.classList.remove('visible'); setTimeout(() => { @@ -154,14 +155,14 @@ let animationId: number | null = null; let originalColors: string[] = []; let currentTargetGridId: string | null = null; -export function startBasisAnimation(row: number, col: number, targetGridId: string = 'gridOriginal'): void { +export function startBasisAnimation(row: number, col: number, targetGridId: string = INSPECTOR_IDS.gridOriginal): void { if (animationId !== null) { cancelAnimationFrame(animationId); animationId = null; restoreOriginalColors(); } - if (!targetGridId) targetGridId = 'gridOriginal'; + if (!targetGridId) targetGridId = INSPECTOR_IDS.gridOriginal; currentTargetGridId = targetGridId; const targetGrid = document.getElementById(targetGridId); diff --git a/web/src/lib/grid-renderer.ts b/web/src/lib/grid-renderer.ts index 055f063..4cef84f 100644 --- a/web/src/lib/grid-renderer.ts +++ b/web/src/lib/grid-renderer.ts @@ -3,6 +3,7 @@ import { showBasisPopover, hideBasisPopover, getCachedGridData } from './basis-p import { coeffEdit } from './coeff-edit.svelte.js'; import { ZIGZAG_INDICES, computeBasisPattern, computeHaarBasisPattern, getFreqLabel, getHaarFreqLabel } from './dct-utils.js'; import { appState } from './state.svelte.js'; +import { INSPECTOR_IDS } from './inspector-dom.js'; function getBasisPattern(u: number, v: number): Float64Array { return appState.transformType === 1 @@ -17,15 +18,15 @@ function getTransformFreqLabel(row: number, col: number): string { } const ALL_GRID_IDS = [ - 'gridOriginal', 'gridDCT', 'gridQuantized', - 'gridQuantizedAdvanced', 'gridDequantized', 'gridReconstructed', - 'gridQuantTable', 'gridError' + INSPECTOR_IDS.gridOriginal, INSPECTOR_IDS.gridDCT, INSPECTOR_IDS.gridQuantized, + INSPECTOR_IDS.gridQuantizedAdvanced, INSPECTOR_IDS.gridDequantized, INSPECTOR_IDS.gridReconstructed, + INSPECTOR_IDS.gridQuantTable, INSPECTOR_IDS.gridError ]; let lastHighlightedKey: string | null = null; /** Grids whose coefficients can be dropped in edit mode: the stored data and what the decoder makes of it. */ -const EDITABLE_GRID_IDS = ['gridQuantized', 'gridDequantized']; +const EDITABLE_GRID_IDS: string[] = [INSPECTOR_IDS.gridQuantized, INSPECTOR_IDS.gridDequantized]; export function clearAllHighlights(): void { lastHighlightedKey = null; @@ -44,7 +45,7 @@ export function highlightAcrossGrids(row: number, col: number): void { if (cell && cell.classList) cell.classList.add('cell-highlight'); }); - const zzContainer = document.getElementById('gridZigzag'); + const zzContainer = document.getElementById(INSPECTOR_IDS.gridZigzag); if (zzContainer) { const zzCell = (zzContainer.querySelector(`.zz-cell[data-idx="${idx}"]`) || zzContainer.querySelector(`.zz-run[data-indices~="${idx}"]`)) as HTMLElement | null; @@ -63,7 +64,7 @@ export function highlightRunAcrossGrids(indices: number[]): void { }); }); - const zzContainer = document.getElementById('gridZigzag'); + const zzContainer = document.getElementById(INSPECTOR_IDS.gridZigzag); if (zzContainer) { indices.forEach(idx => { const zzCell = zzContainer.querySelector(`.zz-cell[data-idx="${idx}"]`) as HTMLElement | null; @@ -85,7 +86,7 @@ function getCellDescription(row: number, col: number, gridType: string): string } export function renderLossMeter(mse: number, _peakError: number): void { - const container = document.getElementById('lossMeterContainer'); + const container = document.getElementById(INSPECTOR_IDS.lossMeterContainer); if (!container) return; let meter = container.querySelector('.loss-meter') as HTMLDivElement | null; @@ -177,7 +178,7 @@ export function renderGrid( detail: { row, col, targetGridId } })); showBannerForCell(row, col); - if (el.id === 'gridDequantized') { + if (el.id === INSPECTOR_IDS.gridDequantized) { applyPartialReconToGrid(row, col); } }; @@ -228,7 +229,7 @@ export function renderGrid( if (e.key === 'Escape') { // First Escape closes the popover; the next one reaches the // inspector's own handler and exits. - const popoverOpen = document.getElementById('basisPopover')?.classList.contains('visible'); + const popoverOpen = document.getElementById(INSPECTOR_IDS.basisPopover)?.classList.contains('visible'); const tooltipOpen = document.querySelector('.grid-cell-tooltip.visible'); if (popoverOpen || tooltipOpen) { e.stopPropagation(); @@ -402,7 +403,7 @@ function focusGridCell(grid: HTMLElement, idx: number): void { } export function renderZigzagArray(data: Float64Array): void { - const el = document.getElementById('gridZigzag'); + const el = document.getElementById(INSPECTOR_IDS.gridZigzag); if (!el) return; el.innerHTML = ''; @@ -535,7 +536,7 @@ export function startZigzagAnimation(): void { highlightAcrossGrids(row, col); // Scroll the active zz-cell or zz-run into view within the container - const zzContainer = document.getElementById('gridZigzag'); + const zzContainer = document.getElementById(INSPECTOR_IDS.gridZigzag); if (zzContainer) { const activeZz = (zzContainer.querySelector(`.zz-cell[data-idx="${idx}"]`) || zzContainer.querySelector(`.zz-run[data-indices~="${idx}"]`)) as HTMLElement | null; @@ -581,7 +582,7 @@ function applyPartialReconToGrid(row: number, col: number): void { } if (zzPos < 0) return; - const targetGrid = document.getElementById('gridReconstructed'); + const targetGrid = document.getElementById(INSPECTOR_IDS.gridReconstructed); if (!targetGrid) return; const cells = Array.from(targetGrid.querySelectorAll('.grid-cell')) as HTMLElement[]; if (cells.length !== 64) return; @@ -684,7 +685,7 @@ export function startReconstructionAnimation(): void { const data = getCachedGridData(); if (!data || !data.dequantizedData) return; - const targetGrid = document.getElementById('gridReconstructed'); + const targetGrid = document.getElementById(INSPECTOR_IDS.gridReconstructed); if (!targetGrid) return; const cells = Array.from(targetGrid.querySelectorAll('.grid-cell')) as HTMLElement[]; @@ -795,7 +796,7 @@ function setReconstructionButtonIcon(playing: boolean): void { } function updateReconstructionProgress(index: number): void { - const el = document.getElementById('reconstructionProgress'); + const el = document.getElementById(INSPECTOR_IDS.reconstructionProgress); if (!el) return; if (index < 0) { el.style.display = 'none'; return; } @@ -815,7 +816,7 @@ function updateReconstructionProgress(index: number): void { } function hideReconAnimBanner(): void { - const banner = document.getElementById('reconAnimBanner'); + const banner = document.getElementById(INSPECTOR_IDS.reconAnimBanner); if (banner) banner.style.display = 'none'; } @@ -857,23 +858,23 @@ function updateReconAnimBanner( coeff: number, basisPattern: Float64Array | null ): void { - const banner = document.getElementById('reconAnimBanner'); + const banner = document.getElementById(INSPECTOR_IDS.reconAnimBanner); if (!banner) return; if (processedCount >= 64) { // Done state - const stepEl = document.getElementById('reconBannerStep'); - const fillEl = document.getElementById('reconBannerFill') as HTMLElement | null; - const freqEl = document.getElementById('reconBannerFreq'); - const coeffEl = document.getElementById('reconBannerCoeff'); - const descEl = document.getElementById('reconBannerDesc'); + const stepEl = document.getElementById(INSPECTOR_IDS.reconBannerStep); + const fillEl = document.getElementById(INSPECTOR_IDS.reconBannerFill) as HTMLElement | null; + const freqEl = document.getElementById(INSPECTOR_IDS.reconBannerFreq); + const coeffEl = document.getElementById(INSPECTOR_IDS.reconBannerCoeff); + const descEl = document.getElementById(INSPECTOR_IDS.reconBannerDesc); if (stepEl) stepEl.textContent = '64'; if (fillEl) fillEl.style.width = '100%'; if (freqEl) { freqEl.textContent = 'Complete'; freqEl.style.background = '#10b981'; freqEl.style.color = 'white'; } if (coeffEl) { coeffEl.textContent = ''; coeffEl.style.color = ''; } if (descEl) descEl.textContent = 'All 64 coefficients applied β€” reconstruction complete'; // Clear the canvas - const canvas = document.getElementById('reconBasisCanvas') as HTMLCanvasElement | null; + const canvas = document.getElementById(INSPECTOR_IDS.reconBasisCanvas) as HTMLCanvasElement | null; if (canvas) { const ctx = canvas.getContext('2d'); if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height); } banner.style.display = ''; return; @@ -886,11 +887,11 @@ function updateReconAnimBanner( const label = getTransformFreqLabel(row, col); const isZero = Math.abs(coeff) < 0.0001; - const stepEl = document.getElementById('reconBannerStep'); - const fillEl = document.getElementById('reconBannerFill') as HTMLElement | null; - const freqEl = document.getElementById('reconBannerFreq'); - const coeffEl = document.getElementById('reconBannerCoeff'); - const descEl = document.getElementById('reconBannerDesc'); + const stepEl = document.getElementById(INSPECTOR_IDS.reconBannerStep); + const fillEl = document.getElementById(INSPECTOR_IDS.reconBannerFill) as HTMLElement | null; + const freqEl = document.getElementById(INSPECTOR_IDS.reconBannerFreq); + const coeffEl = document.getElementById(INSPECTOR_IDS.reconBannerCoeff); + const descEl = document.getElementById(INSPECTOR_IDS.reconBannerDesc); if (stepEl) stepEl.textContent = String(processedCount); if (fillEl) fillEl.style.width = `${(processedCount / 64) * 100}%`; @@ -918,7 +919,7 @@ function updateReconAnimBanner( : FREQ_DESCRIPTIONS[label] ?? ''; } - const canvas = document.getElementById('reconBasisCanvas') as HTMLCanvasElement | null; + const canvas = document.getElementById(INSPECTOR_IDS.reconBasisCanvas) as HTMLCanvasElement | null; if (canvas && basisPattern && !isZero) { drawContributionOnCanvas(canvas, basisPattern, coeff); } else if (canvas && isZero) { @@ -978,7 +979,7 @@ if (typeof window !== 'undefined') { } export function renderEntropySummary(symbols: any[]): void { - const container = document.getElementById('entropySummary'); + const container = document.getElementById(INSPECTOR_IDS.entropySummary); if (!container) return; let dcBits = 0; diff --git a/web/src/lib/inspection.ts b/web/src/lib/inspection.ts index d9903da..6f594a7 100644 --- a/web/src/lib/inspection.ts +++ b/web/src/lib/inspection.ts @@ -5,6 +5,7 @@ import { renderGrid, renderLossMeter, renderZigzagArray, renderEntropySummary, s import { estimateBlockBits, getEntropySymbols, reconstructBlock } from './dct-utils.js'; import { coeffEdit } from './coeff-edit.svelte.js'; import { untrack } from 'svelte'; +import { INSPECTOR_IDS } from './inspector-dom.js'; // Index of the quantized grid within BlockDebugData (original, coefficients, // quantTable, quantized, reconstructed β€” 64 doubles each). @@ -49,9 +50,8 @@ export function inspectBlock(blockX: number, blockY: number): void { hideBasisPopover(); stopReconstructionAnimation(); - const coordsSpan = document.getElementById('blockCoords'); - const qTableType = document.getElementById('qTableType'); - const qTableType2 = document.getElementById('qTableType2'); + const coordsSpan = document.getElementById(INSPECTOR_IDS.blockCoords); + const qTableType = document.getElementById(INSPECTOR_IDS.qTableType); if (coordsSpan) coordsSpan.innerText = `${blockX * 8}, ${blockY * 8} (Block ${blockX},${blockY})`; @@ -61,7 +61,6 @@ export function inspectBlock(blockX: number, blockY: number): void { const tableLabel = (channelIndex === 0) ? 'Luma' : 'Chroma'; if (qTableType) qTableType.innerText = tableLabel; - if (qTableType2) qTableType2.innerText = tableLabel; // Read the previous block's quantized DC first: inspectBlockData returns a // pointer to one shared buffer that the next call overwrites. @@ -168,28 +167,28 @@ function renderNow(): void { } }; - setStatEl('statMSE', mse >= 100 ? mse.toFixed(0) : mse.toFixed(2), mseClass, mseClass); - setStatEl('statPeakError', peakError >= 100 ? peakError.toFixed(0) : peakError.toFixed(1), peakClass, peakClass); - setStatEl('statZeros', `${zeroCount}/64`, null, null); - setStatEl('statCompression', `${zeroPercent}%`, compClass, compClass); + setStatEl(INSPECTOR_IDS.statMSE, mse >= 100 ? mse.toFixed(0) : mse.toFixed(2), mseClass, mseClass); + setStatEl(INSPECTOR_IDS.statPeakError, peakError >= 100 ? peakError.toFixed(0) : peakError.toFixed(1), peakClass, peakClass); + setStatEl(INSPECTOR_IDS.statZeros, `${zeroCount}/64`, null, null); + setStatEl(INSPECTOR_IDS.statCompression, `${zeroPercent}%`, compClass, compClass); const estBits = estimateBlockBits(quantized, prevDc); const bpp = estBits / 64; // Good bpp is strictly less than 1.5, moderate is < 3.0, otherwise poor. const bppClass = bpp < 1.5 ? 'good' : bpp < 3.0 ? 'moderate' : 'poor'; - setStatEl('statEstBits', `${estBits}`, null, null); - setStatEl('statBpp', bpp.toFixed(2), bppClass, bppClass); - - renderGrid('gridOriginal', (isRGB ? originalRGB : null) ?? original, 'intensity', 'original', isRGB && !!originalRGB); - renderGrid('gridDCT', coefficients, 'frequency', 'transform'); - renderGrid('gridQuantized', quantized, 'frequency', 'quantized'); - renderGrid('gridQuantizedAdvanced', quantized, 'frequency', 'quantized'); - renderGrid('gridDequantized', dequantized, 'frequency', 'dequantized'); - renderGrid('gridReconstructed', reconstructedRGB ?? reconstructed, 'intensity', 'reconstructed', !!reconstructedRGB); - renderGrid('gridQuantTable', quantTable, 'qtable', 'qtable'); - renderGrid('gridError', Array.from(errorData), 'error', 'error'); - markDroppedCells(['gridQuantized', 'gridDequantized']); + setStatEl(INSPECTOR_IDS.statEstBits, `${estBits}`, null, null); + setStatEl(INSPECTOR_IDS.statBpp, bpp.toFixed(2), bppClass, bppClass); + + renderGrid(INSPECTOR_IDS.gridOriginal, (isRGB ? originalRGB : null) ?? original, 'intensity', 'original', isRGB && !!originalRGB); + renderGrid(INSPECTOR_IDS.gridDCT, coefficients, 'frequency', 'transform'); + renderGrid(INSPECTOR_IDS.gridQuantized, quantized, 'frequency', 'quantized'); + renderGrid(INSPECTOR_IDS.gridQuantizedAdvanced, quantized, 'frequency', 'quantized'); + renderGrid(INSPECTOR_IDS.gridDequantized, dequantized, 'frequency', 'dequantized'); + renderGrid(INSPECTOR_IDS.gridReconstructed, reconstructedRGB ?? reconstructed, 'intensity', 'reconstructed', !!reconstructedRGB); + renderGrid(INSPECTOR_IDS.gridQuantTable, quantTable, 'qtable', 'qtable'); + renderGrid(INSPECTOR_IDS.gridError, Array.from(errorData), 'error', 'error'); + markDroppedCells([INSPECTOR_IDS.gridQuantized, INSPECTOR_IDS.gridDequantized]); renderLossMeter(mse, peakError); renderZigzagArray(quantized); diff --git a/web/src/lib/inspector-dom.ts b/web/src/lib/inspector-dom.ts new file mode 100644 index 0000000..77bbef4 --- /dev/null +++ b/web/src/lib/inspector-dom.ts @@ -0,0 +1,63 @@ +// Element IDs that the Block Inspector's imperative code (inspection.ts, +// grid-renderer.ts, basis-popover.ts) looks up in InspectorMode.svelte. +// +// Those lookups skip missing elements silently, so a renamed or removed +// element would just stop updating with no error. Always refer to these IDs +// through INSPECTOR_IDS (never a string literal): tests/unit/inspector-dom.test.js +// checks that every one is rendered by a component, and that lib code doesn't +// look up IDs that bypass this list. +// +// To add an element the TS code updates: give it an id in the markup and add +// it here. + +export const INSPECTOR_IDS = { + // Top bar and block header + blockCoords: 'blockCoords', + qTableType: 'qTableType', + + // Pipeline grids + gridOriginal: 'gridOriginal', + gridDCT: 'gridDCT', + gridQuantized: 'gridQuantized', + gridDequantized: 'gridDequantized', + gridReconstructed: 'gridReconstructed', + gridError: 'gridError', + gridQuantTable: 'gridQuantTable', + + // Block statistics + statEstBits: 'statEstBits', + statBpp: 'statBpp', + statZeros: 'statZeros', + statCompression: 'statCompression', + statMSE: 'statMSE', + statPeakError: 'statPeakError', + lossMeterContainer: 'lossMeterContainer', + + // Reconstruction animation + reconstructionProgress: 'reconstructionProgress', + reconAnimBanner: 'reconAnimBanner', + reconBasisCanvas: 'reconBasisCanvas', + reconBannerStep: 'reconBannerStep', + reconBannerFreq: 'reconBannerFreq', + reconBannerCoeff: 'reconBannerCoeff', + reconBannerDesc: 'reconBannerDesc', + reconBannerFill: 'reconBannerFill', + + // Entropy encoding (advanced section) + gridQuantizedAdvanced: 'gridQuantizedAdvanced', + gridZigzag: 'gridZigzag', + entropySummary: 'entropySummary', + + // Basis-function popover + basisPopover: 'basisPopover', + basisCoord: 'basisCoord', + basisFreqLabel: 'basisFreqLabel', + basisValue: 'basisValue', + basisValueLabel: 'basisValueLabel', + basisQuantized: 'basisQuantized', + basisDivisor: 'basisDivisor', + basisCanvas: 'basisCanvas', + contributionCanvas: 'contributionCanvas' +} as const; + +export type InspectorId = typeof INSPECTOR_IDS[keyof typeof INSPECTOR_IDS]; diff --git a/web/tests/browser/inspection.browser.test.js b/web/tests/browser/inspection.browser.test.js index d440771..6ef7ed8 100644 --- a/web/tests/browser/inspection.browser.test.js +++ b/web/tests/browser/inspection.browser.test.js @@ -11,7 +11,7 @@ import { inspectBlock } from '../../src/lib/inspection.js'; const REQUIRED_DIVS = [ 'blockCoords', - 'qTableType', 'qTableType2', + 'qTableType', 'gridOriginal', 'gridDCT', 'gridQuantized', 'gridDequantized', 'gridReconstructed', 'gridQuantTable', 'gridError', 'statMSE', 'statPeakError', 'statZeros', 'statCompression', @@ -143,7 +143,6 @@ describe('inspectBlock - qTableType label', () => { appState.currentViewMode = ViewMode.Y; // channelIndex = 0 inspectBlock(0, 0); expect(document.getElementById('qTableType').innerText).toBe('Luma'); - expect(document.getElementById('qTableType2').innerText).toBe('Luma'); }); it('shows "Chroma" when currentViewMode is Cr', () => { diff --git a/web/tests/unit/inspection.test.js b/web/tests/unit/inspection.test.js index e6cd952..6bf380b 100644 --- a/web/tests/unit/inspection.test.js +++ b/web/tests/unit/inspection.test.js @@ -32,7 +32,6 @@ describe('inspection.js - inspectBlock', () => { document.body.innerHTML = ` -
@@ -66,7 +65,6 @@ describe('inspection.js - inspectBlock', () => { appState.currentViewMode = ViewMode.Y; inspectBlock(0, 0); expect(document.getElementById('qTableType').innerText).toBe('Luma'); - expect(document.getElementById('qTableType2').innerText).toBe('Luma'); }); it('sets Chroma label for Cb view mode', () => { diff --git a/web/tests/unit/inspector-dom.test.js b/web/tests/unit/inspector-dom.test.js new file mode 100644 index 0000000..2269db9 --- /dev/null +++ b/web/tests/unit/inspector-dom.test.js @@ -0,0 +1,53 @@ +import { describe, it, expect } from 'vitest'; +import { readFileSync, readdirSync, statSync } from 'node:fs'; +import { join } from 'node:path'; +import { INSPECTOR_IDS } from '../../src/lib/inspector-dom.js'; + +// The Block Inspector's imperative code finds its elements by ID and skips +// missing ones silently, so a renamed element would just stop updating. +// These checks turn that into a test failure (see src/lib/inspector-dom.ts). +// Vitest runs from web/. +const src = join(process.cwd(), 'src'); + +function filesUnder(dir, ext) { + return readdirSync(dir).flatMap((name) => { + const path = join(dir, name); + if (statSync(path).isDirectory()) return filesUnder(path, ext); + return path.endsWith(ext) ? [path] : []; + }); +} + +const renderedIds = new Set( + filesUnder(src, '.svelte').flatMap((f) => [...readFileSync(f, 'utf8').matchAll(/\bid="([A-Za-z][\w-]*)"/g)].map((m) => m[1])) +); + +const ids = Object.values(INSPECTOR_IDS); + +// IDs that lib code creates itself (in generated HTML) and then looks up. +const CREATED_BY_LIB = ['expandAllCosts', 'collapseAllCosts']; + +const libSources = filesUnder(join(src, 'lib'), '.ts') + .filter((f) => !f.endsWith('inspector-dom.ts')) + .map((f) => ({ file: f.slice(src.length + 1), text: readFileSync(f, 'utf8') })); + +describe('inspector element IDs', () => { + it.each(ids)('#%s is rendered by a component', (id) => { + expect(renderedIds.has(id)).toBe(true); + }); + + it('lib code refers to inspector IDs only through INSPECTOR_IDS', () => { + const literals = libSources.flatMap(({ file, text }) => + ids.filter((id) => new RegExp(`['"\`]${id}['"\`]`).test(text)).map((id) => `${file}: '${id}'`)); + expect(literals).toEqual([]); + }); + + it('lib code looks up no element IDs outside INSPECTOR_IDS', () => { + const lookup = /getElementById\(\s*['"`]([^'"`]+)['"`]|querySelector(?:All)?\(\s*['"`]#([\w-]+)/g; + const strays = libSources.flatMap(({ file, text }) => + [...text.matchAll(lookup)] + .map((m) => m[1] ?? m[2]) + .filter((id) => !CREATED_BY_LIB.includes(id)) + .map((id) => `${file}: #${id}`)); + expect(strays).toEqual([]); + }); +}); From 2f7d05fc4096fc63e12a5a173dd61919c19d6d8d Mon Sep 17 00:00:00 2001 From: Abhinav Date: Sat, 10 Oct 2026 20:32:20 +0530 Subject: [PATCH 09/11] test: check the C++/TypeScript contracts across the WASM boundary View-mode and transform numbers, the chroma modes, the histogram bin count and the BlockDebugData buffer layout are each defined once in C++ and once in TypeScript, with nothing linking them at compile time. tests/unit/wasm-contracts.test.js reads the C++ sources and compares. inspection.ts names the block buffer layout as BLOCK_GRID instead of bare indices, and each side of every pair now says where its other half lives (comments only on the C++ side, so the WASM build is unchanged). Co-Authored-By: Claude Opus 5.5 --- core/inc/ImageCodec.h | 5 ++- web/cpp/codec_web.cpp | 5 ++- web/src/lib/inspection.ts | 27 +++++++++----- web/src/lib/state.svelte.ts | 2 ++ web/src/lib/transforms.ts | 2 ++ web/src/lib/wasm-bridge.ts | 2 +- web/src/types/wasm.d.ts | 3 ++ web/tests/unit/wasm-contracts.test.js | 51 +++++++++++++++++++++++++++ 8 files changed, 85 insertions(+), 12 deletions(-) create mode 100644 web/tests/unit/wasm-contracts.test.js diff --git a/core/inc/ImageCodec.h b/core/inc/ImageCodec.h index 947e050..d343fc2 100644 --- a/core/inc/ImageCodec.h +++ b/core/inc/ImageCodec.h @@ -74,7 +74,7 @@ class ImageCodec { * zeroFraction β€” fraction that quantize to zero at this codec's quality */ struct CoefficientStats { - static constexpr int NUM_BINS = 12; + static constexpr int NUM_BINS = 12; // mirrored by COEFF_BINS in web/src/lib/wasm-bridge.ts double histogram[NUM_BINS] = {}; double zeroFraction = 0.0; }; @@ -107,6 +107,9 @@ class ImageCodec { Image upsampleChannel(const Image& channel, int targetWidth, int targetHeight, ChromaSubsampling cs) const; public: + // Returned to JS by inspect_block_data as one flat buffer; the field order + // is mirrored by BLOCK_GRID in web/src/lib/inspection.ts (checked by + // web/tests/unit/wasm-contracts.test.js). struct BlockDebugData { double original[8][8]; double coefficients[8][8]; // Transform coefficients (DCT or DWT) diff --git a/web/cpp/codec_web.cpp b/web/cpp/codec_web.cpp index 514a9d8..1135ce3 100644 --- a/web/cpp/codec_web.cpp +++ b/web/cpp/codec_web.cpp @@ -36,7 +36,8 @@ static MotionEstimator g_me; static std::vector g_mvs; static std::vector> g_search_steps; -// Enum to match view modes in JavaScript. +// View modes for get_view_ptr. Mirrors ViewMode in web/src/lib/state.svelte.ts; +// web/tests/unit/wasm-contracts.test.js checks the two agree. enum ViewMode { RGB = 0, Artifacts = 1, @@ -57,6 +58,8 @@ static ImageCodec::ChromaSubsampling map_cs_mode(int mode) { } } +// `transform_mode` arguments: mirrors Transform in web/src/lib/transforms.ts +// (checked by web/tests/unit/wasm-contracts.test.js). static ImageCodec::TransformType map_transform_mode(int mode) { switch (mode) { case 1: return ImageCodec::TransformType::DWT_HAAR; diff --git a/web/src/lib/inspection.ts b/web/src/lib/inspection.ts index 6f594a7..678a3d4 100644 --- a/web/src/lib/inspection.ts +++ b/web/src/lib/inspection.ts @@ -7,9 +7,18 @@ import { coeffEdit } from './coeff-edit.svelte.js'; import { untrack } from 'svelte'; import { INSPECTOR_IDS } from './inspector-dom.js'; -// Index of the quantized grid within BlockDebugData (original, coefficients, -// quantTable, quantized, reconstructed β€” 64 doubles each). -const QUANTIZED_GRID = 3; +/** + * Layout of the buffer inspect_block_data returns: ImageCodec::BlockDebugData + * (core/inc/ImageCodec.h), five 8Γ—8 grids of doubles in this order. Must match + * the struct's field order; tests/unit/wasm-contracts.test.js checks it. + */ +export const BLOCK_GRID = { + original: 0, + coefficients: 1, + quantTable: 2, + quantized: 3, + reconstructed: 4 +} as const; /** * The block coded just before (blockX, blockY) in a non-interleaved raster @@ -68,7 +77,7 @@ export function inspectBlock(blockX: number, blockY: number): void { let prevDc = 0; if (prev) { const prevPtr = inspectBlockData(prev.x, prev.y, channelIndex, appState.quality); - if (prevPtr) prevDc = new Float64Array(Module.HEAPU8.buffer, prevPtr + QUANTIZED_GRID * 64 * 8, 1)[0]; + if (prevPtr) prevDc = new Float64Array(Module.HEAPU8.buffer, prevPtr + BLOCK_GRID.quantized * 64 * 8, 1)[0]; } const ptr = inspectBlockData(blockX, blockY, channelIndex, appState.quality); @@ -94,11 +103,11 @@ export function inspectBlock(blockX: number, blockY: number): void { } current = { - original: readGrid(0), - coefficients: readGrid(1), - quantTable: readGrid(2), - quantized: readGrid(QUANTIZED_GRID), - reconstructed: readGrid(4), + original: readGrid(BLOCK_GRID.original), + coefficients: readGrid(BLOCK_GRID.coefficients), + quantTable: readGrid(BLOCK_GRID.quantTable), + quantized: readGrid(BLOCK_GRID.quantized), + reconstructed: readGrid(BLOCK_GRID.reconstructed), prevDc, originalRGB, reconstructedRGB, diff --git a/web/src/lib/state.svelte.ts b/web/src/lib/state.svelte.ts index 945e04b..aedd883 100644 --- a/web/src/lib/state.svelte.ts +++ b/web/src/lib/state.svelte.ts @@ -1,5 +1,7 @@ import { Transform, type TransformValue } from './transforms.js'; +// View modes understood by the WASM get_view_ptr. Mirrors the ViewMode enum in +// web/cpp/codec_web.cpp; tests/unit/wasm-contracts.test.js checks they agree. export const ViewMode = { RGB: 0, Artifacts: 1, diff --git a/web/src/lib/transforms.ts b/web/src/lib/transforms.ts index 8b437c3..1581a84 100644 --- a/web/src/lib/transforms.ts +++ b/web/src/lib/transforms.ts @@ -1,4 +1,6 @@ // Transform types understood by the WASM codec (`transform_mode` argument). +// Mirrors map_transform_mode in web/cpp/codec_web.cpp (checked by +// tests/unit/wasm-contracts.test.js). export const Transform = { DCT: 0, Haar: 1, diff --git a/web/src/lib/wasm-bridge.ts b/web/src/lib/wasm-bridge.ts index bb7c7de..d954583 100644 --- a/web/src/lib/wasm-bridge.ts +++ b/web/src/lib/wasm-bridge.ts @@ -98,7 +98,7 @@ export function inspectBlockData(blockX: number, blockY: number, channelIndex: n return Module._inspect_block_data(blockX, blockY, channelIndex, quality, appState.currentCsMode, t); } -// Must match ImageCodec::CoefficientStats::NUM_BINS. +// Must match ImageCodec::CoefficientStats::NUM_BINS (checked by tests/unit/wasm-contracts.test.js). export const COEFF_BINS = 12; export interface CoeffStats { diff --git a/web/src/types/wasm.d.ts b/web/src/types/wasm.d.ts index d883c9b..2a3e064 100644 --- a/web/src/types/wasm.d.ts +++ b/web/src/types/wasm.d.ts @@ -1,3 +1,6 @@ +// The C functions the WASM build exports. Each must be listed in the Makefile's +// WEB_EXPORTS or marked EMSCRIPTEN_KEEPALIVE in web/cpp/codec_web.cpp +// (checked by tests/unit/wasm-exports.test.js). declare global { var Module: WasmModule; } diff --git a/web/tests/unit/wasm-contracts.test.js b/web/tests/unit/wasm-contracts.test.js new file mode 100644 index 0000000..9f985a1 --- /dev/null +++ b/web/tests/unit/wasm-contracts.test.js @@ -0,0 +1,51 @@ +import { describe, it, expect } from 'vitest'; +import { readFileSync } from 'node:fs'; +import { resolve } from 'node:path'; +import { ViewMode } from '../../src/lib/state.svelte.js'; +import { Transform } from '../../src/lib/transforms.js'; +import { COEFF_BINS } from '../../src/lib/wasm-bridge.js'; +import { BLOCK_GRID } from '../../src/lib/inspection.js'; + +// Numbers and memory layouts shared across the WASM boundary are defined +// once in C++ and once in TypeScript. Nothing links them at compile time, so +// these tests read the C++ sources and compare. (Exported function names are +// checked in wasm-exports.test.js.) Vitest runs from web/. +const root = resolve(process.cwd(), '..') + '/'; +const binding = readFileSync(root + 'web/cpp/codec_web.cpp', 'utf8'); +const codecHeader = readFileSync(root + 'core/inc/ImageCodec.h', 'utf8'); + +describe('WASM contracts', () => { + it('view mode numbers match codec_web.cpp ViewMode', () => { + const body = binding.match(/enum ViewMode\s*\{([^}]*)\}/)[1]; + const cpp = Object.fromEntries([...body.matchAll(/(\w+)\s*=\s*(\d+)/g)].map((m) => [m[1], Number(m[2])])); + expect(cpp).toEqual({ ...ViewMode }); + }); + + it('transform numbers match codec_web.cpp map_transform_mode', () => { + const body = binding.match(/map_transform_mode\(int mode\)\s*\{([\s\S]*?)\n\}/)[1]; + const cases = Object.fromEntries([...body.matchAll(/case (\d+):\s*return ImageCodec::TransformType::(\w+)/g)] + .map((m) => [m[2], Number(m[1])])); + expect(body).toMatch(/default:\s*return ImageCodec::TransformType::DCT/); + expect(cases).toEqual({ DWT_HAAR: Transform.Haar, DWT_97: Transform.CDF97 }); + expect(Transform.DCT).toBe(0); + }); + + it('chroma subsampling modes map to the matching codec setting', () => { + const body = binding.match(/map_cs_mode\(int mode\)\s*\{([\s\S]*?)\n\}/)[1]; + for (const [, mode, cs] of body.matchAll(/case (\d+):\s*return ImageCodec::ChromaSubsampling::CS_(\d+)/g)) { + expect(cs).toBe(mode); + } + expect(body).toMatch(/case 422:/); + expect(body).toMatch(/case 420:/); + }); + + it('COEFF_BINS matches CoefficientStats::NUM_BINS', () => { + expect(Number(codecHeader.match(/NUM_BINS\s*=\s*(\d+)/)[1])).toBe(COEFF_BINS); + }); + + it('BLOCK_GRID follows the field order of BlockDebugData', () => { + const body = codecHeader.match(/struct BlockDebugData\s*\{([^}]*)\}/)[1]; + const fields = [...body.matchAll(/double\s+(\w+)\[8\]\[8\]/g)].map((m) => m[1]); + expect(fields).toEqual(Object.entries(BLOCK_GRID).sort((a, b) => a[1] - b[1]).map(([name]) => name)); + }); +}); From 33ef67348b42e1ac7f27bc3fe8dc75db6924708b Mon Sep 17 00:00:00 2001 From: Abhinav Date: Sat, 10 Oct 2026 20:32:21 +0530 Subject: [PATCH 10/11] docs: add CLAUDE.md for AI-assisted work A one-page guide for coding agents: what each part of the repo does, the commands and what to run before calling a change done, the C++/TS contracts and the tests that guard them, the inspector ID rule, and the conventions and gotchas (checked-in WASM, pinned Svelte plugin, the paused motion-estimation work). Co-Authored-By: Claude Opus 5.5 --- CLAUDE.md | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 CLAUDE.md diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..d4ed32f --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,77 @@ +# Codec Explorer + +An interactive lab for transform image compression (DCT vs Haar vs CDF 9/7 wavelets). A C++17 codec core is compiled to WebAssembly and driven by a Svelte 5 + TypeScript web app. Everything runs in the browser. + +## Layout + +- `core/` β€” the codec, plain C++17 with no dependencies. `inc/` headers, `src/` sources, `tests/` GoogleTest. + - `ImageCodec` β€” colour conversion, chroma subsampling, 8Γ—8 DCT or whole-image wavelet, quantization, bit estimate. + - `wavelet`, `transform`, `entropy`, `colorspace`, `CodecAnalysis` (PSNR, SSIM, artifact maps). +- `web/cpp/codec_web.cpp` β€” the WASM binding layer: one global session, C functions exported to JS. +- `web/public/codec.{js,wasm}` β€” the **checked-in** WASM build. Edit C++, then rebuild it (below), or the app keeps running the old code. +- `web/src/` β€” the app. + - `App.svelte` switches between three full-page modes: `ViewerMode`, `InspectorMode` (one 8Γ—8 block through the pipeline), `ArtifactInspectorMode` (error, edge and blocking maps). + - `lib/state.svelte.ts` β€” shared reactive state (`appState`, a Svelte 5 `$state` class). + - `lib/wasm-bridge.ts` β€” typed wrappers over `Module._*` calls; `types/wasm.d.ts` declares them. + - `lib/inspection.ts`, `lib/grid-renderer.ts`, `lib/basis-popover.ts` β€” the Block Inspector's imperative DOM rendering (see "Inspector DOM" below). + - `lib/components/` β€” shared UI: `QualityControl`, `CodecSettings` (transform + chroma), `ResultSummary`, `ImageViewer`. + - `styles/` β€” global CSS bundled through `app.css`. Colours are tokens in `variables.css`; dark mode is `[data-theme="dark"]`. +- `apps/native/` β€” an OpenCV desktop app for poking at the core (needs OpenCV). + +## Commands + +Web, from `web/`: + +```bash +npm run dev # Vite dev server +npm run check # svelte-check (types) +npm run test # unit tests (Vitest + jsdom, fast) +npm run test:browser # integration tests in Playwright Chromium +npm run test:all # both +``` + +From the repo root: + +```bash +make web # rebuild web/public/codec.{js,wasm} (needs emcc on PATH) +make test # C++ GoogleTest suite (CMake; configures apps/native too, so needs OpenCV) +make sanitize # C++ tests under ASan + UBSan (falls back to UBSan where ASan can't start, e.g. macOS 26) +``` + +Before calling a change done, run `npm run check` and `npm run test:all` (plus `make test` for C++ changes). + +## Contracts across the WASM boundary + +Nothing links C++ and TypeScript at compile time, so these pairs are kept in sync by hand and **guarded by tests**: + +| What | C++ side | TS side | Test | +|---|---|---|---| +| Exported functions | `WEB_EXPORTS` in `Makefile`, or `EMSCRIPTEN_KEEPALIVE` | `web/src/types/wasm.d.ts` | `tests/unit/wasm-exports.test.js` | +| View mode numbers | `enum ViewMode` in `codec_web.cpp` | `ViewMode` in `lib/state.svelte.ts` | `tests/unit/wasm-contracts.test.js` | +| Transform numbers | `map_transform_mode` in `codec_web.cpp` | `Transform` in `lib/transforms.ts` | same | +| Block buffer layout | `BlockDebugData` in `core/inc/ImageCodec.h` | `BLOCK_GRID` in `lib/inspection.ts` | same | +| Histogram bins | `CoefficientStats::NUM_BINS` | `COEFF_BINS` in `lib/wasm-bridge.ts` | same | + +Change both sides together. Buffers returned by `malloc` in C++ are freed by the TS caller (see each binding's comment). + +## Inspector DOM + +The Block Inspector renders its grids imperatively and finds elements by ID. Those lookups skip missing elements **silently**, so: + +- Refer to inspector element IDs only through `INSPECTOR_IDS` in `lib/inspector-dom.ts`, never as string literals. +- To add one: give the element an `id` in `InspectorMode.svelte` and add it to `INSPECTOR_IDS`. +- `tests/unit/inspector-dom.test.js` fails if an ID isn't rendered, or if lib code bypasses the list. + +## Conventions + +- Svelte 5 runes (`$state`, `$derived`, `$effect`, `$props`); mount with `mount()`. Use `untrack` when an effect calls code that reads state it shouldn't depend on. +- Hover help: put explanations in plain `title` attributes (SVG: a `` child). `lib/hover-hint.ts` shows them quickly and styled, app-wide. Add the `has-hint` class to a text label to give it the dotted underline. +- Reuse the shared components (`QualityControl`, `CodecSettings`, `ResultSummary`) instead of copying controls into a mode. +- Tests are `.js` files that import `.ts` sources with a `.js` extension; a small Vite plugin in both Vitest configs resolves them. The WASM `Module` global is mocked in `tests/setup/`. +- `@sveltejs/vite-plugin-svelte` is pinned to `^4` because Vitest 2.1 needs Vite 5. Don't bump it alone. +- Comments explain why, not what. Match the density of the surrounding code. +- Commits: conventional style with a scope, e.g. `feat(inspector): …`, `fix(core): …`, `refactor: …`, `docs: …`. Work on a feature branch and open a PR to `main`; Vercel deploys `main`. + +## Related work + +Motion estimation lives on the paused `feature/motion-estimation` branch. Its bindings (`*_me_*`, `MotionEstimator.*`) are on `main` too; leave them alone unless working on that feature. From f06b1344afd520ec1b42509c56cfe1e417e50ce2 Mon Sep 17 00:00:00 2001 From: Abhinav <abhinavsiddharth@yahoo.com> Date: Sat, 10 Oct 2026 20:56:44 +0530 Subject: [PATCH 11/11] build: link the WASM with em++ and pin Emscripten to 5.0.1 CI installed Emscripten 'latest', which moved to 6.x. Its emcc no longer links the C++ standard library when used as the driver, so the WASM link failed (undefined operator new, __cxa_throw, std::invalid_argument...) and build-web, and with it deploy, broke. The Makefile now uses em++, the C++ driver, and CI pins Emscripten to 5.0.1, the version that built the checked-in codec.wasm. Locally, em++ 5.0.1 reproduces web/public/codec.{js,wasm} byte for byte. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --- .github/workflows/ci.yml | 4 +++- CLAUDE.md | 2 +- Makefile | 4 +++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 9048f31..b1d402a 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -110,7 +110,9 @@ jobs: - name: Setup Emscripten uses: mymindstorm/setup-emsdk@ab889da2abbcbb280f91ec4c215d3bb4f3a8f775 with: - version: 'latest' + # Pinned: the version that built the checked-in web/public/codec.wasm. + # 'latest' moved to 6.x and broke the build; bump deliberately. + version: '5.0.1' - name: Build WASM # We use 'emmake' to ensure the Makefile sees the Emscripten environment diff --git a/CLAUDE.md b/CLAUDE.md index d4ed32f..0ac3aa1 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -33,7 +33,7 @@ npm run test:all # both From the repo root: ```bash -make web # rebuild web/public/codec.{js,wasm} (needs emcc on PATH) +make web # rebuild web/public/codec.{js,wasm} (needs Emscripten 5.0.1, as pinned in CI) make test # C++ GoogleTest suite (CMake; configures apps/native too, so needs OpenCV) make sanitize # C++ tests under ASan + UBSan (falls back to UBSan where ASan can't start, e.g. macOS 26) ``` diff --git a/Makefile b/Makefile index e074abb..68849f3 100644 --- a/Makefile +++ b/Makefile @@ -1,5 +1,7 @@ # --- CONFIGURATION --- -WEB_COMPILER = emcc +# em++ (not emcc): newer Emscripten releases only link the C++ standard library +# when invoked as the C++ driver. +WEB_COMPILER = em++ # C functions exported to JavaScript (keep in sync with web/src/types/wasm.d.ts) WEB_EXPORTS = _init_session _process_image _preview_image _rd_encode _get_rd_bit_estimate \ _get_view_ptr _set_view_tint _set_artifact_gain \