orangepivietnam/litert-lm-orangepi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update front-end

Browse Source
This commit is contained in:
Tony Tran
2026-04-19 10:17:29 +00:00
parent 92a2d3a67f
commit dd93f21e8d
1 changed files with 173 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+173 -102
View File
@@ -1,12 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="vi"> <html lang="vi" data-theme="dark">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Gemma 4 Chat</title> <title>&#x1F916; LiteRT-LM Web Server</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Space+Grotesk:wght@300;400;500;600&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Space+Grotesk:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.0/marked.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.0/marked.min.js"></script>
<style> <style>
/* ── Theme variables ── */
:root { :root {
--bg: #0d0f12; --bg: #0d0f12;
--surface: #13161b; --surface: #13161b;
@@ -18,10 +19,41 @@
--muted: #5a6478; --muted: #5a6478;
--user-bubble: #1a2a3a; --user-bubble: #1a2a3a;
--model-bubble: #141a20; --model-bubble: #141a20;
--user-border: #253a50;
--code-bg: #0a1018;
--pre-bg: #080c10;
--pre-text: #c9d8e8;
--tps-bg: #0d1a12;
--tps-border: #1a3a22;
--session-id-bg: #0d1620;
--session-id-border: #1e2e3e;
--radius: 14px; --radius: 14px;
--font-ui: 'Space Grotesk', sans-serif; --font-ui: 'Space Grotesk', sans-serif;
--font-mono: 'DM Mono', monospace; --font-mono: 'DM Mono', monospace;
--transition: .22s ease;
} }
[data-theme="light"] {
--bg: #f0f2f5;
--surface: #ffffff;
--surface2: #e8eaf0;
--border: #d0d5df;
--accent: #0a9a6e;
--accent2: #1473b8;
--text: #1a1e28;
--muted: #7a8499;
--user-bubble: #ddeeff;
--model-bubble: #ffffff;
--user-border: #a8c8ee;
--code-bg: #eef0f5;
--pre-bg: #e4e8f0;
--pre-text: #2a3a50;
--tps-bg: #e0f5ec;
--tps-border: #80ccaa;
--session-id-bg: #e8f0f8;
--session-id-border: #a8c0d8;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { body {
@@ -32,6 +64,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
transition: background var(--transition), color var(--transition);
} }
/* ── Header ── */ /* ── Header ── */
@@ -39,26 +72,56 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 14px 20px; padding: 12px 20px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: var(--surface); background: var(--surface);
flex-shrink: 0; flex-shrink: 0;
transition: background var(--transition), border-color var(--transition);
} }
.logo { .logo {
width: 32px; height: 32px; width: 34px; height: 34px;
background: linear-gradient(135deg, var(--accent), var(--accent2)); background: linear-gradient(135deg, var(--accent), var(--accent2));
border-radius: 8px; border-radius: 9px;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-size: 16px; font-size: 17px; flex-shrink: 0;
}
.header-titles { display: flex; flex-direction: column; gap: 1px; }
.header-titles h1 {
font-size: 14px; font-weight: 600; letter-spacing: .01em;
line-height: 1.3;
}
.header-titles .tagline {
font-size: 10px; color: var(--muted);
font-family: var(--font-mono); letter-spacing: .03em;
}
#model-name {
font-size: 11px; color: var(--accent2);
font-family: var(--font-mono);
} }
header h1 { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
header .sub { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* ── Theme toggle ── */
#theme-btn {
width: 32px; height: 32px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface2);
color: var(--text);
cursor: pointer;
font-size: 15px;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
flex-shrink: 0;
}
#theme-btn:hover { border-color: var(--accent); }
/* ── Status dot ── */
#status-dot { #status-dot {
width: 7px; height: 7px; border-radius: 50%; width: 7px; height: 7px; border-radius: 50%;
background: #3a3f4a; background: #3a3f4a;
transition: background .4s; transition: background .4s;
flex-shrink: 0;
} }
#status-dot.ready { background: var(--accent); box-shadow: 0 0 6px var(--accent); } #status-dot.ready { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
#status-dot.thinking { background: #f5c842; animation: pulse 1s infinite; } #status-dot.thinking { background: #f5c842; animation: pulse 1s infinite; }
@@ -69,60 +132,44 @@
/* ── Session bar ── */ /* ── Session bar ── */
#session-bar { #session-bar {
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
padding: 8px 20px; padding: 7px 20px;
background: var(--surface2); background: var(--surface2);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
font-size: 12px; font-size: 12px; flex-shrink: 0;
flex-shrink: 0; transition: background var(--transition), border-color var(--transition);
} }
#session-bar label { color: var(--muted); font-family: var(--font-mono); } #session-bar label { color: var(--muted); font-family: var(--font-mono); }
#session-id-display { #session-id-display {
font-family: var(--font-mono); font-family: var(--font-mono); font-size: 11px;
font-size: 11px;
color: var(--accent2); color: var(--accent2);
background: #0d1620; background: var(--session-id-bg);
padding: 3px 8px; padding: 3px 8px; border-radius: 6px;
border-radius: 6px; border: 1px solid var(--session-id-border);
border: 1px solid #1e2e3e; max-width: 260px; overflow: hidden;
max-width: 280px; text-overflow: ellipsis; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.btn-sm { .btn-sm {
padding: 4px 10px; padding: 4px 10px; font-size: 11px;
font-size: 11px; font-family: var(--font-ui); font-weight: 500;
font-family: var(--font-ui); border: 1px solid var(--border); border-radius: 6px;
font-weight: 500; background: var(--surface); color: var(--text);
border: 1px solid var(--border); cursor: pointer; transition: all .15s;
border-radius: 6px;
background: var(--surface);
color: var(--text);
cursor: pointer;
transition: all .15s;
} }
.btn-sm:hover { border-color: var(--accent); color: var(--accent); } .btn-sm:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm.danger:hover { border-color: #f87171; color: #f87171; } .btn-sm.danger:hover { border-color: #f87171; color: #f87171; }
/* ── Chat area ── */ /* ── Chat area ── */
#chat { #chat {
flex: 1; flex: 1; overflow-y: auto;
overflow-y: auto; padding: 20px; display: flex;
padding: 20px; flex-direction: column; gap: 16px;
display: flex;
flex-direction: column;
gap: 16px;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
#chat::-webkit-scrollbar { width: 4px; } #chat::-webkit-scrollbar { width: 4px; }
#chat::-webkit-scrollbar-track { background: transparent; } #chat::-webkit-scrollbar-track { background: transparent; }
#chat::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } #chat::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.msg { .msg { display: flex; gap: 10px; animation: fadeUp .25s ease both; }
display: flex;
gap: 10px;
animation: fadeUp .25s ease both;
}
@keyframes fadeUp { @keyframes fadeUp {
from { opacity: 0; transform: translateY(8px); } from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
@@ -135,29 +182,27 @@
font-size: 13px; flex-shrink: 0; margin-top: 2px; font-size: 13px; flex-shrink: 0; margin-top: 2px;
} }
.msg.user .avatar { background: linear-gradient(135deg,#2a4a6a,#1a3050); } .msg.user .avatar { background: linear-gradient(135deg,#2a4a6a,#1a3050); }
[data-theme="light"] .msg.user .avatar { background: linear-gradient(135deg,#a8c8ee,#7aaad8); }
.msg.model .avatar { background: linear-gradient(135deg,#1a3a2a,#0d2018); color: var(--accent); } .msg.model .avatar { background: linear-gradient(135deg,#1a3a2a,#0d2018); color: var(--accent); }
[data-theme="light"] .msg.model .avatar { background: linear-gradient(135deg,#c0e8d8,#90ccb4); }
.bubble { .bubble {
padding: 11px 15px; padding: 11px 15px; border-radius: var(--radius);
border-radius: var(--radius); font-size: 14px; line-height: 1.65;
font-size: 14px; white-space: pre-wrap; word-break: break-word;
line-height: 1.65;
white-space: pre-wrap;
word-break: break-word;
border: 1px solid transparent; border: 1px solid transparent;
transition: background var(--transition), border-color var(--transition);
} }
.msg.user .bubble { .msg.user .bubble {
background: var(--user-bubble); background: var(--user-bubble); border-color: var(--user-border);
border-color: #253a50;
border-radius: var(--radius) 4px var(--radius) var(--radius); border-radius: var(--radius) 4px var(--radius) var(--radius);
} }
.msg.model .bubble { .msg.model .bubble {
background: var(--model-bubble); background: var(--model-bubble); border-color: var(--border);
border-color: var(--border);
border-radius: 4px var(--radius) var(--radius) var(--radius); border-radius: 4px var(--radius) var(--radius) var(--radius);
} }
/* ── Markdown rendering ── */ /* ── Markdown ── */
.bubble.md-body { white-space: normal; } .bubble.md-body { white-space: normal; }
.bubble.md-body p { margin-bottom: .6em; } .bubble.md-body p { margin-bottom: .6em; }
.bubble.md-body p:last-child { margin-bottom: 0; } .bubble.md-body p:last-child { margin-bottom: 0; }
@@ -171,24 +216,23 @@
.bubble.md-body li { margin-bottom: .25em; } .bubble.md-body li { margin-bottom: .25em; }
.bubble.md-body code { .bubble.md-body code {
font-family: var(--font-mono); font-size: .82em; font-family: var(--font-mono); font-size: .82em;
background: #0a1018; border: 1px solid var(--border); background: var(--code-bg); border: 1px solid var(--border);
border-radius: 4px; padding: 1px 5px; color: var(--accent); border-radius: 4px; padding: 1px 5px; color: var(--accent);
} }
.bubble.md-body pre { .bubble.md-body pre {
background: #080c10; border: 1px solid var(--border); background: var(--pre-bg); border: 1px solid var(--border);
border-radius: 8px; padding: 12px 14px; border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: .6em 0;
overflow-x: auto; margin: .6em 0;
} }
.bubble.md-body pre code { .bubble.md-body pre code {
background: none; border: none; padding: 0; background: none; border: none; padding: 0;
font-size: .82em; color: #c9d8e8; font-size: .82em; color: var(--pre-text);
} }
.bubble.md-body blockquote { .bubble.md-body blockquote {
border-left: 3px solid var(--accent2); padding-left: 10px; border-left: 3px solid var(--accent2); padding-left: 10px;
color: var(--muted); margin: .5em 0; font-style: italic; color: var(--muted); margin: .5em 0; font-style: italic;
} }
.bubble.md-body strong { color: #fff; font-weight: 600; } .bubble.md-body strong { font-weight: 600; }
.bubble.md-body em { color: #b0c8e0; } .bubble.md-body em { color: var(--muted); }
.bubble.md-body a { color: var(--accent2); text-decoration: none; } .bubble.md-body a { color: var(--accent2); text-decoration: none; }
.bubble.md-body a:hover { text-decoration: underline; } .bubble.md-body a:hover { text-decoration: underline; }
.bubble.md-body hr { border: none; border-top: 1px solid var(--border); margin: .8em 0; } .bubble.md-body hr { border: none; border-top: 1px solid var(--border); margin: .8em 0; }
@@ -208,17 +252,14 @@
display: flex; gap: 8px; align-items: center; display: flex; gap: 8px; align-items: center;
} }
.tps-badge { .tps-badge {
background: #0d1a12; border: 1px solid #1a3a22; background: var(--tps-bg); border: 1px solid var(--tps-border);
color: var(--accent); border-radius: 4px; color: var(--accent); border-radius: 4px; padding: 1px 6px; font-size: 10px;
padding: 1px 6px; font-size: 10px;
} }
/* ── Thinking dots ── */ /* ── Thinking dots ── */
.thinking-dots span { .thinking-dots span {
display: inline-block; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
width: 6px; height: 6px; border-radius: 50%; background: var(--muted); margin: 0 2px; animation: bounce .9s infinite;
background: var(--muted); margin: 0 2px;
animation: bounce .9s infinite;
} }
.thinking-dots span:nth-child(2) { animation-delay: .2s; } .thinking-dots span:nth-child(2) { animation-delay: .2s; }
.thinking-dots span:nth-child(3) { animation-delay: .4s; } .thinking-dots span:nth-child(3) { animation-delay: .4s; }
@@ -228,8 +269,7 @@
#empty { #empty {
flex: 1; display: flex; flex-direction: column; flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; align-items: center; justify-content: center;
color: var(--muted); text-align: center; gap: 12px; color: var(--muted); text-align: center; gap: 12px; pointer-events: none;
pointer-events: none;
} }
#empty .icon { font-size: 40px; opacity: .3; } #empty .icon { font-size: 40px; opacity: .3; }
#empty p { font-size: 13px; line-height: 1.6; max-width: 240px; } #empty p { font-size: 13px; line-height: 1.6; max-width: 240px; }
@@ -237,59 +277,59 @@
/* ── Input bar ── */ /* ── Input bar ── */
#input-bar { #input-bar {
display: flex; gap: 10px; align-items: flex-end; display: flex; gap: 10px; align-items: flex-end;
padding: 14px 20px; padding: 12px 20px;
background: var(--surface); background: var(--surface); border-top: 1px solid var(--border);
border-top: 1px solid var(--border);
flex-shrink: 0; flex-shrink: 0;
transition: background var(--transition), border-color var(--transition);
} }
#prompt { #prompt {
flex: 1; flex: 1; background: var(--surface2);
background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
border: 1px solid var(--border); color: var(--text); font-family: var(--font-ui); font-size: 14px;
border-radius: 10px; padding: 10px 14px; resize: none; min-height: 42px; max-height: 160px;
color: var(--text); line-height: 1.5; outline: none;
font-family: var(--font-ui); transition: border-color .2s, background var(--transition);
font-size: 14px;
padding: 10px 14px;
resize: none;
min-height: 42px;
max-height: 160px;
line-height: 1.5;
outline: none;
transition: border-color .2s;
} }
#prompt:focus { border-color: var(--accent2); } #prompt:focus { border-color: var(--accent2); }
#prompt::placeholder { color: var(--muted); } #prompt::placeholder { color: var(--muted); }
#send-btn { #send-btn {
width: 42px; height: 42px; width: 42px; height: 42px; background: var(--accent);
background: var(--accent); border: none; border-radius: 10px; cursor: pointer;
border: none; border-radius: 10px;
cursor: pointer;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
transition: all .15s; transition: all .15s; flex-shrink: 0; color: #000; font-size: 17px;
flex-shrink: 0;
color: #000;
font-size: 17px;
} }
#send-btn:hover { background: #5ef0c0; transform: scale(1.05); } #send-btn:hover { filter: brightness(1.1); transform: scale(1.05); }
#send-btn:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; transform: none; } #send-btn:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; transform: none; }
.mode-label { .mode-label {
font-size: 10px; font-family: var(--font-mono); font-size: 10px; font-family: var(--font-mono);
color: var(--muted); align-self: center; color: var(--muted); align-self: center;
} }
/* ── Footer ── */
footer {
text-align: center; padding: 7px 20px;
font-size: 11px; color: var(--muted);
font-family: var(--font-mono);
background: var(--surface); border-top: 1px solid var(--border);
flex-shrink: 0;
transition: background var(--transition), border-color var(--transition);
}
footer .heart { color: #f87171; }
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<div class="logo">&#10022;</div> <div class="logo">&#x1F916;</div>
<div> <div class="header-titles">
<h1>Gemma 4 Chat</h1> <h1>&#x1F916; LiteRT-LM Web Server</h1>
<div class="sub">LiteRT-LM &middot; Orange Pi 5</div> <div class="tagline">litert-lm run on orange pi</div>
<div id="model-name">loading model info...</div>
</div> </div>
<div class="header-right"> <div class="header-right">
<button id="theme-btn" onclick="toggleTheme()" title="Toggle dark/light mode">&#x1F319;</button>
<div id="status-dot"></div> <div id="status-dot"></div>
<span id="status-text">initializing&hellip;</span> <span id="status-text">initializing&hellip;</span>
</div> </div>
@@ -300,7 +340,7 @@
<span id="session-id-display">&mdash;</span> <span id="session-id-display">&mdash;</span>
<button class="btn-sm" onclick="newSession()">&#xFF0B; New</button> <button class="btn-sm" onclick="newSession()">&#xFF0B; New</button>
<button class="btn-sm danger" onclick="clearSession()">&#x2715; Clear</button> <button class="btn-sm danger" onclick="clearSession()">&#x2715; Clear</button>
<span id="mode-badge" class="mode-label">multi-turn</span> <span class="mode-label">multi-turn</span>
</div> </div>
<div id="chat"> <div id="chat">
@@ -315,6 +355,10 @@
<button id="send-btn" onclick="sendMessage()" title="Send (Enter)">&#x27A4;</button> <button id="send-btn" onclick="sendMessage()" title="Send (Enter)">&#x27A4;</button>
</div> </div>
<footer>
&#x44;&#x1B0;&#x1EE3;c t&#x1EA1;o ra with <span class="heart">&#x2764;</span> b&#x1EDF;i Tony Tr&#x1EA7;n
</footer>
<script> <script>
// ── Marked.js config ───────────────────────────────────────────────────────── // ── Marked.js config ─────────────────────────────────────────────────────────
marked.setOptions({ breaks: true, gfm: true }); marked.setOptions({ breaks: true, gfm: true });
@@ -329,6 +373,23 @@ const sendBtn = document.getElementById('send-btn');
const statusDot = document.getElementById('status-dot'); const statusDot = document.getElementById('status-dot');
const statusTxt = document.getElementById('status-text'); const statusTxt = document.getElementById('status-text');
const sessionDisplay = document.getElementById('session-id-display'); const sessionDisplay = document.getElementById('session-id-display');
const themeBtn = document.getElementById('theme-btn');
const htmlEl = document.documentElement;
// ── Theme toggle ──────────────────────────────────────────────────────────────
function toggleTheme() {
const isDark = htmlEl.getAttribute('data-theme') === 'dark';
const next = isDark ? 'light' : 'dark';
htmlEl.setAttribute('data-theme', next);
themeBtn.textContent = isDark ? '\u2600\uFE0F' : '\uD83C\uDF19';
localStorage.setItem('theme', next);
}
function loadTheme() {
const saved = localStorage.getItem('theme') || 'dark';
htmlEl.setAttribute('data-theme', saved);
themeBtn.textContent = saved === 'dark' ? '\uD83C\uDF19' : '\u2600\uFE0F';
}
// ── Auto-resize textarea ────────────────────────────────────────────────────── // ── Auto-resize textarea ──────────────────────────────────────────────────────
promptEl.addEventListener('input', () => { promptEl.addEventListener('input', () => {
@@ -496,7 +557,17 @@ function setBusy(val) {
} }
// ── Init ────────────────────────────────────────────────────────────────────── // ── Init ──────────────────────────────────────────────────────────────────────
(async () => { await newSession(); })(); (async () => {
loadTheme();
try {
const res = await fetch('/info');
const info = await res.json();
document.getElementById('model-name').textContent = info.model;
} catch(_) {
document.getElementById('model-name').textContent = 'unknown model';
}
await newSession();
})();
</script> </script>
</body> </body>
</html> </html>