From 0de51152edf7e466b9d71deb2fe71578b470794d Mon Sep 17 00:00:00 2001 From: Alpamys Date: Mon, 23 Mar 2026 21:15:50 +0500 Subject: [PATCH] Restyle Web UI with warm orange theme matching Soup logo - Color scheme: warm oranges (#e8703a), golds (#f2b233), dark browns (#1a1210) instead of cold blue/green - Add Soup logo image to sidebar - Update chart colors (loss=orange, LR=gold) to match brand - Dark warm background tones throughout Co-Authored-By: Claude Opus 4.6 (1M context) --- soup_cli/ui/static/app.js | 16 +++++------ soup_cli/ui/static/index.html | 2 +- soup_cli/ui/static/logo.png | Bin 0 -> 160242 bytes soup_cli/ui/static/style.css | 52 ++++++++++++++++++++-------------- 4 files changed, 40 insertions(+), 30 deletions(-) create mode 100644 soup_cli/ui/static/logo.png diff --git a/soup_cli/ui/static/app.js b/soup_cli/ui/static/app.js index a567332..333fdbc 100644 --- a/soup_cli/ui/static/app.js +++ b/soup_cli/ui/static/app.js @@ -276,8 +276,8 @@ function renderCharts(metrics) { datasets: [{ label: 'Loss', data: losses, - borderColor: '#22c55e', - backgroundColor: 'rgba(34, 197, 94, 0.1)', + borderColor: '#e8703a', + backgroundColor: 'rgba(232, 112, 58, 0.1)', fill: true, tension: 0.3, pointRadius: 0, @@ -289,8 +289,8 @@ function renderCharts(metrics) { maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { - x: { title: { display: true, text: 'Step', color: '#94a3b8' }, ticks: { color: '#94a3b8' }, grid: { color: 'rgba(71,85,105,0.3)' } }, - y: { title: { display: true, text: 'Loss', color: '#94a3b8' }, ticks: { color: '#94a3b8' }, grid: { color: 'rgba(71,85,105,0.3)' } }, + x: { title: { display: true, text: 'Step', color: '#a89080' }, ticks: { color: '#a89080' }, grid: { color: 'rgba(90,68,56,0.3)' } }, + y: { title: { display: true, text: 'Loss', color: '#a89080' }, ticks: { color: '#a89080' }, grid: { color: 'rgba(90,68,56,0.3)' } }, }, }, }); @@ -306,8 +306,8 @@ function renderCharts(metrics) { datasets: [{ label: 'Learning Rate', data: lrs, - borderColor: '#3b82f6', - backgroundColor: 'rgba(59, 130, 246, 0.1)', + borderColor: '#f2b233', + backgroundColor: 'rgba(242, 178, 51, 0.1)', fill: true, tension: 0.3, pointRadius: 0, @@ -319,8 +319,8 @@ function renderCharts(metrics) { maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { - x: { title: { display: true, text: 'Step', color: '#94a3b8' }, ticks: { color: '#94a3b8' }, grid: { color: 'rgba(71,85,105,0.3)' } }, - y: { title: { display: true, text: 'LR', color: '#94a3b8' }, ticks: { color: '#94a3b8' }, grid: { color: 'rgba(71,85,105,0.3)' } }, + x: { title: { display: true, text: 'Step', color: '#a89080' }, ticks: { color: '#a89080' }, grid: { color: 'rgba(90,68,56,0.3)' } }, + y: { title: { display: true, text: 'LR', color: '#a89080' }, ticks: { color: '#a89080' }, grid: { color: 'rgba(90,68,56,0.3)' } }, }, }, }); diff --git a/soup_cli/ui/static/index.html b/soup_cli/ui/static/index.html index da9db3e..fe6b941 100644 --- a/soup_cli/ui/static/index.html +++ b/soup_cli/ui/static/index.html @@ -11,7 +11,7 @@