From c4b7bb79f5a81ab948f7c8f03a33e8cfc939d72a Mon Sep 17 00:00:00 2001 From: hyeokjun32 Date: Thu, 30 Apr 2026 23:05:00 +0900 Subject: [PATCH 1/2] fix: polish local studio demo presentation --- README.md | 6 ++++++ inferedgelab/studio/static/app.js | 30 +++++++++++++++++++++++++--- inferedgelab/studio/static/style.css | 11 ++++++++++ tests/test_studio_routes.py | 4 ++++ 4 files changed, 48 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 558faaf..648cf27 100644 --- a/README.md +++ b/README.md @@ -416,6 +416,12 @@ What works today: Current non-goals remain unchanged: no DB, queue, upload service, production auth, billing, or production SaaS worker orchestration. Jobs and imported Studio evidence are in-memory and reset when the local server process restarts. +Recommended portfolio demo flow: + +1. Open `/studio`. +2. Click `Load Demo Evidence` to show the stable ONNX Runtime CPU vs TensorRT Jetson comparison. +3. Use Run / Import only as supporting controls that demonstrate how the local UI extends the CLI/API workflow. + --- ## CI / Benchmarks diff --git a/inferedgelab/studio/static/app.js b/inferedgelab/studio/static/app.js index 5cd2618..a9f4fbe 100644 --- a/inferedgelab/studio/static/app.js +++ b/inferedgelab/studio/static/app.js @@ -701,17 +701,41 @@ function compareStat(label, value) { function compareSummaryCard(metric, speedup, base, newer, sameBackend = false, overall = "unknown") { const card = createElement("article", `compare-card highlight ${compareTone(overall)}`); const diff = formatLatencyDiff(metric); - const faster = sameBackend ? "Same backend" : speedup ? `${formatNumber(speedup)}x faster` : "speedup unavailable"; - const note = sameBackend ? "Import a TensorRT and an ONNX Runtime result to compare backend speedup." : `Latency diff: ${diff}`; + const speedLabel = compareSpeedLabel(speedup, sameBackend); + const note = sameBackend + ? "Import a TensorRT and an ONNX Runtime result to compare backend speedup." + : compareSpeedNote(speedup, diff); card.append( createElement("p", "caption", `Latency comparison / ${overall || "unknown"}`), - createElement("h3", "", faster), + createElement("h3", "", speedLabel), createElement("p", "body-text", note), createElement("p", "caption", `${normalizedBackendKey(base) || "-"} -> ${normalizedBackendKey(newer) || "-"}`), ); return card; } +function compareSpeedLabel(speedup, sameBackend = false) { + if (sameBackend) { + return "Same backend"; + } + const ratio = Number(speedup); + if (!Number.isFinite(ratio) || ratio <= 0) { + return "speedup unavailable"; + } + if (ratio >= 1) { + return `${formatNumber(ratio)}x faster`; + } + return `${formatNumber(1 / ratio)}x slower`; +} + +function compareSpeedNote(speedup, diff) { + const ratio = Number(speedup); + if (Number.isFinite(ratio) && ratio > 0 && ratio < 1) { + return `New result is slower. Latency diff: ${diff}`; + } + return `Latency diff: ${diff}`; +} + function errorCompareCard(message) { const card = createElement("article", "compare-card empty error-card"); card.append( diff --git a/inferedgelab/studio/static/style.css b/inferedgelab/studio/static/style.css index 4f6e681..956d616 100644 --- a/inferedgelab/studio/static/style.css +++ b/inferedgelab/studio/static/style.css @@ -456,6 +456,7 @@ body.file-mode .file-protocol-warning { align-items: center; justify-content: space-between; gap: 12px; + min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 10px; @@ -474,13 +475,23 @@ body.file-mode .file-protocol-warning { } .job-main { + flex: 1 1 auto; display: grid; gap: 4px; min-width: 0; } +.job-row .state-pill { + flex: 0 1 auto; + max-width: 44%; + overflow: hidden; + text-overflow: ellipsis; +} + .job-main strong, +.job-main .caption, .metric-value { + min-width: 0; overflow-wrap: anywhere; } diff --git a/tests/test_studio_routes.py b/tests/test_studio_routes.py index 625bb3b..4f8b0ba 100644 --- a/tests/test_studio_routes.py +++ b/tests/test_studio_routes.py @@ -130,6 +130,8 @@ def test_studio_static_assets_include_redesigned_ui_contracts(): assert "jobDisplayName" in app_text assert "jobCaption" in app_text assert "compareStatList" in app_text + assert "compareSpeedLabel" in app_text + assert "New result is slower" in app_text assert 'aiguard: hasGuardEvidence ? "completed" : "optional"' in app_text assert "#0b0f14" in style_text assert "grid-template-columns" in style_text @@ -141,6 +143,8 @@ def test_studio_static_assets_include_redesigned_ui_contracts(): assert ".compare-card.improvement" in style_text assert ".demo-card" in style_text assert ".compare-stat-list" in style_text + assert ".job-row .state-pill" in style_text + assert "text-overflow: ellipsis" in style_text assert "justify-content: flex-start" in style_text From f701fafc67f24730a1748d1ff66e676aab725358 Mon Sep 17 00:00:00 2001 From: hyeokjun32 Date: Fri, 1 May 2026 02:13:22 +0900 Subject: [PATCH 2/2] fix: prevent studio job status clipping --- inferedgelab/studio/static/style.css | 8 ++++---- tests/test_studio_routes.py | 3 ++- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/inferedgelab/studio/static/style.css b/inferedgelab/studio/static/style.css index 956d616..deda0f5 100644 --- a/inferedgelab/studio/static/style.css +++ b/inferedgelab/studio/static/style.css @@ -455,6 +455,7 @@ body.file-mode .file-protocol-warning { display: flex; align-items: center; justify-content: space-between; + flex-wrap: wrap; gap: 12px; min-width: 0; width: 100%; @@ -482,10 +483,9 @@ body.file-mode .file-protocol-warning { } .job-row .state-pill { - flex: 0 1 auto; - max-width: 44%; - overflow: hidden; - text-overflow: ellipsis; + flex: 0 0 auto; + max-width: 100%; + padding-inline: 10px; } .job-main strong, diff --git a/tests/test_studio_routes.py b/tests/test_studio_routes.py index 4f8b0ba..a21249b 100644 --- a/tests/test_studio_routes.py +++ b/tests/test_studio_routes.py @@ -144,7 +144,8 @@ def test_studio_static_assets_include_redesigned_ui_contracts(): assert ".demo-card" in style_text assert ".compare-stat-list" in style_text assert ".job-row .state-pill" in style_text - assert "text-overflow: ellipsis" in style_text + assert "flex-wrap: wrap" in style_text + assert "flex: 0 0 auto" in style_text assert "justify-content: flex-start" in style_text