From dd93f21e8dd3bcb06fde83565d1be3df08c4c8cd Mon Sep 17 00:00:00 2001
From: Tony Tran <thanhtan.tran@gmail.com>
Date: Sun, 19 Apr 2026 10:17:29 +0000
Subject: [PATCH] update front-end

---
 templates/index.html | 275 +++++++++++++++++++++++++++----------------
 1 file changed, 173 insertions(+), 102 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 2d7c950..1526824 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
-<html lang="vi">
+<html lang="vi" data-theme="dark">
 <head>
 <meta charset="UTF-8"/>
 <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"/>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.0/marked.min.js"></script>
 <style>
+  /* ── Theme variables ── */
   :root {
     --bg: #0d0f12;
     --surface: #13161b;
@@ -18,10 +19,41 @@
     --muted: #5a6478;
     --user-bubble: #1a2a3a;
     --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;
     --font-ui: 'Space Grotesk', sans-serif;
     --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; }
 
   body {
@@ -32,6 +64,7 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    transition: background var(--transition), color var(--transition);
   }
 
   /* ── Header ── */
@@ -39,26 +72,56 @@
     display: flex;
     align-items: center;
     gap: 12px;
-    padding: 14px 20px;
+    padding: 12px 20px;
     border-bottom: 1px solid var(--border);
     background: var(--surface);
     flex-shrink: 0;
+    transition: background var(--transition), border-color var(--transition);
   }
   .logo {
-    width: 32px; height: 32px;
+    width: 34px; height: 34px;
     background: linear-gradient(135deg, var(--accent), var(--accent2));
-    border-radius: 8px;
+    border-radius: 9px;
     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 {
     width: 7px; height: 7px; border-radius: 50%;
     background: #3a3f4a;
     transition: background .4s;
+    flex-shrink: 0;
   }
   #status-dot.ready { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
   #status-dot.thinking { background: #f5c842; animation: pulse 1s infinite; }
@@ -69,60 +132,44 @@
   /* ── Session bar ── */
   #session-bar {
     display: flex; align-items: center; gap: 8px;
-    padding: 8px 20px;
+    padding: 7px 20px;
     background: var(--surface2);
     border-bottom: 1px solid var(--border);
-    font-size: 12px;
-    flex-shrink: 0;
+    font-size: 12px; flex-shrink: 0;
+    transition: background var(--transition), border-color var(--transition);
   }
   #session-bar label { color: var(--muted); font-family: var(--font-mono); }
   #session-id-display {
-    font-family: var(--font-mono);
-    font-size: 11px;
+    font-family: var(--font-mono); font-size: 11px;
     color: var(--accent2);
-    background: #0d1620;
-    padding: 3px 8px;
-    border-radius: 6px;
-    border: 1px solid #1e2e3e;
-    max-width: 280px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    background: var(--session-id-bg);
+    padding: 3px 8px; border-radius: 6px;
+    border: 1px solid var(--session-id-border);
+    max-width: 260px; overflow: hidden;
+    text-overflow: ellipsis; white-space: nowrap;
   }
   .btn-sm {
-    padding: 4px 10px;
-    font-size: 11px;
-    font-family: var(--font-ui);
-    font-weight: 500;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    background: var(--surface);
-    color: var(--text);
-    cursor: pointer;
-    transition: all .15s;
+    padding: 4px 10px; font-size: 11px;
+    font-family: var(--font-ui); font-weight: 500;
+    border: 1px solid var(--border); 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.danger:hover { border-color: #f87171; color: #f87171; }
 
   /* ── Chat area ── */
   #chat {
-    flex: 1;
-    overflow-y: auto;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+    flex: 1; overflow-y: auto;
+    padding: 20px; display: flex;
+    flex-direction: column; gap: 16px;
     scroll-behavior: smooth;
   }
   #chat::-webkit-scrollbar { width: 4px; }
   #chat::-webkit-scrollbar-track { background: transparent; }
   #chat::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
 
-  .msg {
-    display: flex;
-    gap: 10px;
-    animation: fadeUp .25s ease both;
-  }
+  .msg { display: flex; gap: 10px; animation: fadeUp .25s ease both; }
   @keyframes fadeUp {
     from { opacity: 0; transform: translateY(8px); }
     to   { opacity: 1; transform: translateY(0); }
@@ -135,29 +182,27 @@
     font-size: 13px; flex-shrink: 0; margin-top: 2px;
   }
   .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); }
+  [data-theme="light"] .msg.model .avatar { background: linear-gradient(135deg,#c0e8d8,#90ccb4); }
 
   .bubble {
-    padding: 11px 15px;
-    border-radius: var(--radius);
-    font-size: 14px;
-    line-height: 1.65;
-    white-space: pre-wrap;
-    word-break: break-word;
+    padding: 11px 15px; border-radius: var(--radius);
+    font-size: 14px; line-height: 1.65;
+    white-space: pre-wrap; word-break: break-word;
     border: 1px solid transparent;
+    transition: background var(--transition), border-color var(--transition);
   }
   .msg.user .bubble {
-    background: var(--user-bubble);
-    border-color: #253a50;
+    background: var(--user-bubble); border-color: var(--user-border);
     border-radius: var(--radius) 4px var(--radius) var(--radius);
   }
   .msg.model .bubble {
-    background: var(--model-bubble);
-    border-color: var(--border);
+    background: var(--model-bubble); border-color: var(--border);
     border-radius: 4px var(--radius) var(--radius) var(--radius);
   }
 
-  /* ── Markdown rendering ── */
+  /* ── Markdown ── */
   .bubble.md-body { white-space: normal; }
   .bubble.md-body p { margin-bottom: .6em; }
   .bubble.md-body p:last-child { margin-bottom: 0; }
@@ -171,24 +216,23 @@
   .bubble.md-body li { margin-bottom: .25em; }
   .bubble.md-body code {
     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);
   }
   .bubble.md-body pre {
-    background: #080c10; border: 1px solid var(--border);
-    border-radius: 8px; padding: 12px 14px;
-    overflow-x: auto; margin: .6em 0;
+    background: var(--pre-bg); border: 1px solid var(--border);
+    border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: .6em 0;
   }
   .bubble.md-body pre code {
     background: none; border: none; padding: 0;
-    font-size: .82em; color: #c9d8e8;
+    font-size: .82em; color: var(--pre-text);
   }
   .bubble.md-body blockquote {
     border-left: 3px solid var(--accent2); padding-left: 10px;
     color: var(--muted); margin: .5em 0; font-style: italic;
   }
-  .bubble.md-body strong { color: #fff; font-weight: 600; }
-  .bubble.md-body em { color: #b0c8e0; }
+  .bubble.md-body strong { font-weight: 600; }
+  .bubble.md-body em { color: var(--muted); }
   .bubble.md-body a { color: var(--accent2); text-decoration: none; }
   .bubble.md-body a:hover { text-decoration: underline; }
   .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;
   }
   .tps-badge {
-    background: #0d1a12; border: 1px solid #1a3a22;
-    color: var(--accent); border-radius: 4px;
-    padding: 1px 6px; font-size: 10px;
+    background: var(--tps-bg); border: 1px solid var(--tps-border);
+    color: var(--accent); border-radius: 4px; padding: 1px 6px; font-size: 10px;
   }
 
   /* ── Thinking dots ── */
   .thinking-dots span {
-    display: inline-block;
-    width: 6px; height: 6px; border-radius: 50%;
-    background: var(--muted); margin: 0 2px;
-    animation: bounce .9s infinite;
+    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
+    background: var(--muted); margin: 0 2px; animation: bounce .9s infinite;
   }
   .thinking-dots span:nth-child(2) { animation-delay: .2s; }
   .thinking-dots span:nth-child(3) { animation-delay: .4s; }
@@ -228,8 +269,7 @@
   #empty {
     flex: 1; display: flex; flex-direction: column;
     align-items: center; justify-content: center;
-    color: var(--muted); text-align: center; gap: 12px;
-    pointer-events: none;
+    color: var(--muted); text-align: center; gap: 12px; pointer-events: none;
   }
   #empty .icon { font-size: 40px; opacity: .3; }
   #empty p { font-size: 13px; line-height: 1.6; max-width: 240px; }
@@ -237,59 +277,59 @@
   /* ── Input bar ── */
   #input-bar {
     display: flex; gap: 10px; align-items: flex-end;
-    padding: 14px 20px;
-    background: var(--surface);
-    border-top: 1px solid var(--border);
+    padding: 12px 20px;
+    background: var(--surface); border-top: 1px solid var(--border);
     flex-shrink: 0;
+    transition: background var(--transition), border-color var(--transition);
   }
   #prompt {
-    flex: 1;
-    background: var(--surface2);
-    border: 1px solid var(--border);
-    border-radius: 10px;
-    color: var(--text);
-    font-family: var(--font-ui);
-    font-size: 14px;
-    padding: 10px 14px;
-    resize: none;
-    min-height: 42px;
-    max-height: 160px;
-    line-height: 1.5;
-    outline: none;
-    transition: border-color .2s;
+    flex: 1; background: var(--surface2);
+    border: 1px solid var(--border); border-radius: 10px;
+    color: var(--text); font-family: var(--font-ui); font-size: 14px;
+    padding: 10px 14px; resize: none; min-height: 42px; max-height: 160px;
+    line-height: 1.5; outline: none;
+    transition: border-color .2s, background var(--transition);
   }
   #prompt:focus { border-color: var(--accent2); }
   #prompt::placeholder { color: var(--muted); }
 
   #send-btn {
-    width: 42px; height: 42px;
-    background: var(--accent);
-    border: none; border-radius: 10px;
-    cursor: pointer;
+    width: 42px; height: 42px; background: var(--accent);
+    border: none; border-radius: 10px; cursor: pointer;
     display: flex; align-items: center; justify-content: center;
-    transition: all .15s;
-    flex-shrink: 0;
-    color: #000;
-    font-size: 17px;
+    transition: all .15s; 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; }
 
   .mode-label {
     font-size: 10px; font-family: var(--font-mono);
     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>
 </head>
 <body>
 
 <header>
-  <div class="logo">&#10022;</div>
-  <div>
-    <h1>Gemma 4 Chat</h1>
-    <div class="sub">LiteRT-LM &middot; Orange Pi 5</div>
+  <div class="logo">&#x1F916;</div>
+  <div class="header-titles">
+    <h1>&#x1F916; LiteRT-LM Web Server</h1>
+    <div class="tagline">litert-lm run on orange pi</div>
+    <div id="model-name">loading model info...</div>
   </div>
   <div class="header-right">
+    <button id="theme-btn" onclick="toggleTheme()" title="Toggle dark/light mode">&#x1F319;</button>
     <div id="status-dot"></div>
     <span id="status-text">initializing&hellip;</span>
   </div>
@@ -300,7 +340,7 @@
   <span id="session-id-display">&mdash;</span>
   <button class="btn-sm" onclick="newSession()">&#xFF0B; New</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 id="chat">
@@ -315,6 +355,10 @@
   <button id="send-btn" onclick="sendMessage()" title="Send (Enter)">&#x27A4;</button>
 </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>
 // ── Marked.js config ─────────────────────────────────────────────────────────
 marked.setOptions({ breaks: true, gfm: true });
@@ -329,6 +373,23 @@ const sendBtn        = document.getElementById('send-btn');
 const statusDot      = document.getElementById('status-dot');
 const statusTxt      = document.getElementById('status-text');
 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 ──────────────────────────────────────────────────────
 promptEl.addEventListener('input', () => {
@@ -496,7 +557,17 @@ function setBusy(val) {
 }
 
 // ── 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>
 </body>
 </html>
