RomanNum3ral
/
soup
mirror of https://github.com/razor-ai/soup.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: rebrand to new terracotta logo, update Web UI color scheme 

Replace purple/cyan cyberpunk theme with warm terracotta palette matching
new SVG logo. Update README to use soup_logo_svg.svg. Update chart colors
in app.js to match new palette (#C0512D primary, #E8975A warm accent).
This commit is contained in:
Alpamys 2026-04-01 18:18:37 +05:00
parent 4affc1a5c7
commit 4ee6968d7e
5 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,5 +1,5 @@
<p align="center">
<img src="soup.png" alt="Soup" width="280">
<img src="soup_logo_svg.svg" alt="Soup" width="280">
</p>
<h1 align="center">Soup</h1>

16
soup_cli/ui/static/app.js
View File

@ -276,8 +276,8 @@ function renderCharts(metrics) {
datasets: [{
label: 'Loss',
data: losses,
borderColor: '#8b6cc7',
backgroundColor: 'rgba(139, 108, 199, 0.1)',
borderColor: '#c0512d',
backgroundColor: 'rgba(192, 81, 45, 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: '#8890a8' }, ticks: { color: '#8890a8' }, grid: { color: 'rgba(42,48,80,0.5)' } },
y: { title: { display: true, text: 'Loss', color: '#8890a8' }, ticks: { color: '#8890a8' }, grid: { color: 'rgba(42,48,80,0.5)' } },
x: { title: { display: true, text: 'Step', color: '#a09088' }, ticks: { color: '#a09088' }, grid: { color: 'rgba(58,48,64,0.5)' } },
y: { title: { display: true, text: 'Loss', color: '#a09088' }, ticks: { color: '#a09088' }, grid: { color: 'rgba(58,48,64,0.5)' } },
},
},
});
@ -306,8 +306,8 @@ function renderCharts(metrics) {
datasets: [{
label: 'Learning Rate',
data: lrs,
borderColor: '#5ce0d8',
backgroundColor: 'rgba(92, 224, 216, 0.1)',
borderColor: '#e8975a',
backgroundColor: 'rgba(232, 151, 90, 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: '#8890a8' }, ticks: { color: '#8890a8' }, grid: { color: 'rgba(42,48,80,0.5)' } },
y: { title: { display: true, text: 'LR', color: '#8890a8' }, ticks: { color: '#8890a8' }, grid: { color: 'rgba(42,48,80,0.5)' } },
x: { title: { display: true, text: 'Step', color: '#a09088' }, ticks: { color: '#a09088' }, grid: { color: 'rgba(58,48,64,0.5)' } },
y: { title: { display: true, text: 'LR', color: '#a09088' }, ticks: { color: '#a09088' }, grid: { color: 'rgba(58,48,64,0.5)' } },
},
},
});

2
soup_cli/ui/static/index.html
View File

@ -11,7 +11,7 @@
<div class="app">
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-logo"><img src="/static/logo.png" alt="Soup">Soup</div>
<div class="sidebar-logo"><img src="/static/logo.svg" alt="Soup">Soup</div>
<nav class="sidebar-nav">
<button class="nav-item active" data-page="dashboard" onclick="navigate('dashboard')">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>

4
soup_cli/ui/static/logo.svg Normal file
View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="160" height="160" rx="28" ry="28" fill="#C0512D" style="fill:rgb(192, 81, 45);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:&quot;Anthropic Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
<line x1="55" y1="155" x2="145" y2="45" stroke="white" stroke-width="22" stroke-linecap="round" style="fill:rgb(0, 0, 0);stroke:rgb(255, 255, 255);color:rgb(0, 0, 0);stroke-width:22px;stroke-linecap:round;stroke-linejoin:miter;opacity:1;font-family:&quot;Anthropic Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 881 B

30
soup_cli/ui/static/style.css
View File

@ -1,17 +1,17 @@
/* Soup Web UI — Tech theme inspired by the Soup logo */
/* Soup Web UI — Warm theme inspired by the Soup terracotta logo */
:root {
--bg: #0c0e14;
--bg-card: #14171f;
--bg-input: #1c2030;
--border: #2a3050;
--text: #e8eaf0;
--text-dim: #8890a8;
--accent: #8b6cc7;
--accent-hover: #7a5ab8;
--accent-cyan: #5ce0d8;
--bg: #111014;
--bg-card: #1a1720;
--bg-input: #231f2a;
--border: #3a3040;
--text: #f0ece8;
--text-dim: #a09088;
--accent: #c0512d;
--accent-hover: #a8442a;
--accent-warm: #e8975a;
--danger: #e84040;
--warning: #f2b233;
--info: #8b6cc7;
--info: #c0512d;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
@ -72,7 +72,7 @@ body {
}
.nav-item:hover { background: var(--bg-input); color: var(--text); }
.nav-item.active { color: var(--accent-cyan); background: rgba(92, 224, 216, 0.08); border-right: 3px solid var(--accent-cyan); }
.nav-item.active { color: var(--accent-warm); background: rgba(92, 224, 216, 0.08); border-right: 3px solid var(--accent-warm); }
.sidebar-footer {
padding: 1rem 1.5rem;
@ -123,7 +123,7 @@ body {
}
.stat-card { text-align: center; }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--accent-cyan); }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--accent-warm); }
.stat-label { font-size: 0.85rem; color: var(--text-dim); margin-top: 0.25rem; }
/* Tables */
@ -185,7 +185,7 @@ tr:hover td { background: rgba(139, 108, 199, 0.06); }
font-weight: 600;
}
.badge-success { background: rgba(92, 224, 216, 0.15); color: var(--accent-cyan); }
.badge-success { background: rgba(92, 224, 216, 0.15); color: var(--accent-warm); }
.badge-danger { background: rgba(232, 64, 64, 0.2); color: var(--danger); }
.badge-warning { background: rgba(242, 178, 51, 0.2); color: var(--warning); }
.badge-info { background: rgba(139, 108, 199, 0.15); color: var(--info); }
@ -263,7 +263,7 @@ textarea {
color: var(--text-dim);
}
.chat-msg.user .chat-msg-role { color: var(--accent-cyan); }
.chat-msg.user .chat-msg-role { color: var(--accent-warm); }
.chat-msg.assistant .chat-msg-role { color: var(--accent); }
.chat-msg-content {