From b4311870f32263f561fed728aa3c4cab461fe971 Mon Sep 17 00:00:00 2001 From: Meta Vens Date: Sat, 25 Apr 2026 04:29:45 +0100 Subject: [PATCH] Clean up GUI CSS structure --- frontend/src/app.ts | 18 +-- src/repixelizer/gui_static/app.js | 18 +-- src/repixelizer/gui_static/index.html | 116 +++++++-------- src/repixelizer/gui_static/styles.css | 204 ++++++++++---------------- 4 files changed, 155 insertions(+), 201 deletions(-) diff --git a/frontend/src/app.ts b/frontend/src/app.ts index b3b9aaf..bbe5e25 100644 --- a/frontend/src/app.ts +++ b/frontend/src/app.ts @@ -289,7 +289,7 @@ function renderEventLog(): void { } for (const entry of state.eventLog) { const node = document.createElement("div"); - node.className = "event-item"; + node.className = "info-card event-item"; node.innerHTML = `${entry.label}${entry.detail}`; eventLog.appendChild(node); } @@ -516,7 +516,7 @@ function renderStatusMetricItems(items: StatusMetricItem[]): void { statusMetrics.style.setProperty("--status-metric-count", String(Math.max(items.length, 1))); for (const { label, value } of items) { const node = document.createElement("div"); - node.className = "status-metric"; + node.className = "info-card status-metric"; node.title = `${label}: ${value}`; node.innerHTML = `${label}${value}`; statusMetrics.appendChild(node); @@ -537,15 +537,15 @@ function renderInference(): void { return; } inferenceSummary.innerHTML = ` -
+
Chosen Grid ${state.inference.target_width} x ${state.inference.target_height}
-
+
Phase ${formatNumber(state.inference.phase_x, 2)}, ${formatNumber(state.inference.phase_y, 2)}
-
+
Confidence ${formatNumber(state.inference.confidence, 3)}
@@ -554,7 +554,7 @@ function renderInference(): void { const topCandidates = state.inference.top_candidates.slice(0, 6); for (const candidate of topCandidates) { const node = document.createElement("div"); - node.className = "candidate-card"; + node.className = "info-card candidate-card"; const rerank = candidate.breakdown["phase_rerank_rank"]; node.innerHTML = ` ${candidate.target_width} x ${candidate.target_height} @@ -662,7 +662,7 @@ function renderSummary(): void { ]; for (const [label, value] of entries) { const card = document.createElement("div"); - card.className = "summary-card"; + card.className = "info-card summary-card"; card.innerHTML = `${label}${formatNumber(value, 3)}`; summaryPanel.appendChild(card); } @@ -1024,11 +1024,11 @@ function renderEditor(): void { } editorMeta.innerHTML = ` -
+
Canvas ${offscreenCanvas.width} x ${offscreenCanvas.height}
-
+
State ${state.editorDirty ? "Edited" : "Matches solver output"}
diff --git a/src/repixelizer/gui_static/app.js b/src/repixelizer/gui_static/app.js index a7efe93..934c11b 100644 --- a/src/repixelizer/gui_static/app.js +++ b/src/repixelizer/gui_static/app.js @@ -158,7 +158,7 @@ function renderEventLog() { } for (const entry of state.eventLog) { const node = document.createElement("div"); - node.className = "event-item"; + node.className = "info-card event-item"; node.innerHTML = `${entry.label}${entry.detail}`; eventLog.appendChild(node); } @@ -349,7 +349,7 @@ function renderStatusMetricItems(items) { statusMetrics.style.setProperty("--status-metric-count", String(Math.max(items.length, 1))); for (const { label, value } of items) { const node = document.createElement("div"); - node.className = "status-metric"; + node.className = "info-card status-metric"; node.title = `${label}: ${value}`; node.innerHTML = `${label}${value}`; statusMetrics.appendChild(node); @@ -368,15 +368,15 @@ function renderInference() { return; } inferenceSummary.innerHTML = ` -
+
Chosen Grid ${state.inference.target_width} x ${state.inference.target_height}
-
+
Phase ${formatNumber(state.inference.phase_x, 2)}, ${formatNumber(state.inference.phase_y, 2)}
-
+
Confidence ${formatNumber(state.inference.confidence, 3)}
@@ -385,7 +385,7 @@ function renderInference() { const topCandidates = state.inference.top_candidates.slice(0, 6); for (const candidate of topCandidates) { const node = document.createElement("div"); - node.className = "candidate-card"; + node.className = "info-card candidate-card"; const rerank = candidate.breakdown["phase_rerank_rank"]; node.innerHTML = ` ${candidate.target_width} x ${candidate.target_height} @@ -492,7 +492,7 @@ function renderSummary() { ]; for (const [label, value] of entries) { const card = document.createElement("div"); - card.className = "summary-card"; + card.className = "info-card summary-card"; card.innerHTML = `${label}${formatNumber(value, 3)}`; summaryPanel.appendChild(card); } @@ -825,11 +825,11 @@ function renderEditor() { } } editorMeta.innerHTML = ` -
+
Canvas ${offscreenCanvas.width} x ${offscreenCanvas.height}
-
+
State ${state.editorDirty ? "Edited" : "Matches solver output"}
diff --git a/src/repixelizer/gui_static/index.html b/src/repixelizer/gui_static/index.html index 04aa082..30e3d52 100644 --- a/src/repixelizer/gui_static/index.html +++ b/src/repixelizer/gui_static/index.html @@ -9,14 +9,14 @@
-
-
+
+
-
+

Live Pipeline

Repixelizer

Take fake pixel art, force it onto a real lattice, then inspect the crime scene frame by frame.

@@ -31,41 +31,41 @@
-
+
-
+

Pipeline Stages

-
+
Idle

Waiting for input

-

Choose a file, then run the machine.

+

Choose a file, then run the machine.

- -
-
+ +
+
Input
-
+
Output
-
+
Zoom

Hold left mouse in either preview to inspect both panels together. Drag while holding to pan around. Release to drop back to fit view.

-
-
-
+
+
+

Pixel Fixes

Output Editor

Pencil the stragglers. Wheel zooms to cursor, middle mouse pans, Alt steals color.

@@ -88,41 +88,41 @@
-
-
+
+
-
+
-
- +
+ 12x
-
-
+
@@ -137,24 +137,24 @@