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..deda0f5 100644 --- a/inferedgelab/studio/static/style.css +++ b/inferedgelab/studio/static/style.css @@ -455,7 +455,9 @@ 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%; border: 1px solid var(--line); border-radius: 10px; @@ -474,13 +476,22 @@ 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 0 auto; + max-width: 100%; + padding-inline: 10px; +} + .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..a21249b 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,9 @@ 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 "flex-wrap: wrap" in style_text + assert "flex: 0 0 auto" in style_text assert "justify-content: flex-start" in style_text