Restore to commit c4c37df

.gitattributes

@@ -51,9 +51,3 @@ public/avatars/ready_player_me_1.glb filter=lfs diff=lfs merge=lfs -text
 public/avatars/ready_player_me_2.glb filter=lfs diff=lfs merge=lfs -text
 public/avatars/vuong.glb filter=lfs diff=lfs merge=lfs -text
 public/avatars/lisamy.glb filter=lfs diff=lfs merge=lfs -text
-public/avatars/viverse_avatar_model_209370.vrm filter=lfs diff=lfs merge=lfs -text
-public/avatars/scene.glb filter=lfs diff=lfs merge=lfs -text
-public/avatars/scene[[:space:]](1).glb filter=lfs diff=lfs merge=lfs -text
-public/avatars/scene[[:space:]](3).glb filter=lfs diff=lfs merge=lfs -text
-public/avatars/vuong1.glb filter=lfs diff=lfs merge=lfs -text
-public/avatars/lisamy1.glb filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -31,4 +31,4 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 .idea
 
 # Finder (MacOS) folder config
-.DS_Store
+.DS_Store

.rebuild-trigger

@@ -1 +0,0 @@
-Trigger rebuild - fix picker + thumbnails

CLAUDE.md

@@ -108,4 +108,4 @@ Then, run index.ts
 bun --hot ./index.ts
 ```
 
-For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`.
+For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`.

Dockerfile

@@ -1,32 +1,27 @@
-# Multi-service: Bun server + Python sidecar for dataset uploads
+# Single container: Bun serves the bundled front-end AND the /api/session
+# proxy. HF Spaces (sdk: docker) routes traffic to app_port, set to 7860.
 FROM oven/bun:1-slim
 
 WORKDIR /app
 
-# Install Python and supervisor for sidecar
-RUN apt-get update && apt-get install -y python3 python3-pip python3-venv supervisor && rm -rf /var/lib/apt/lists/*
-
-# Create virtual environment for Python
-RUN python3 -m venv /app/venv
-
-# Copy package files for Bun
+# Copy just the lockfile and package.json first for layer caching
 COPY package.json bun.lock ./
+# Retry install once if it fails (network flakiness)
 RUN bun install --frozen-lockfile --production || (sleep 3 && bun install --frozen-lockfile --production)
 
-# Copy Python requirements and install in venv
-COPY requirements.txt ./
-RUN /app/venv/bin/pip install --no-cache-dir -r requirements.txt
-
-# Copy application code
+# Copy the rest of the application
 COPY . .
 
-# Supervisor config
-RUN echo '[supervisord]\nnodaemon=true\n\n[program:sidecar]\ncommand=/app/venv/bin/python upload_service.py\nstdout_logfile=/dev/stdout\nstdout_logfile_maxbytes=0\nstderr_logfile=/dev/stderr\nstderr_logfile_maxbytes=0\nautostart=true\nautorestart=true\n\n[program:bun]\ncommand=bun index.ts\nstdout_logfile=/dev/stdout\nstdout_logfile_maxbytes=0\nstderr_logfile=/dev/stderr\nstderr_logfile_maxbytes=0\nautostart=true\nautorestart=true\n' > /etc/supervisor/conf.d/supervisord.conf
-
 ENV NODE_ENV=production
 ENV PORT=7860
-ENV SIDECAR_URL=http://localhost:7861
+# Point at a speech-to-speech backend by setting ONE of these in the Space
+# settings (index.ts prefers LOAD_BALANCER_URL):
+#   LOAD_BALANCER_URL  a load balancer's base URL (a secret) — talks to the pool directly
+#   SESSION_PROXY_URL  another deployment's /api to piggyback (e.g. a public demo Space)
+# With neither set, the app runs in direct mode (paste a ws:// URL in Settings).
+
+EXPOSE 7860
 
-EXPOSE 7860 7861
+USER bun
 
-CMD ["supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]
+CMD ["bun", "index.ts"]

README.md

@@ -4,14 +4,96 @@ emoji: 🗣️
 colorFrom: indigo
 colorTo: purple
 sdk: docker
-pinned: false
 app_port: 7860
+pinned: false
+thumbnail: https://huggingface.co/spaces/victor/gemma-avatar/resolve/main/thumbnail.webp
+short_description: Talk to Gemma 4 face to face, with a 3D lip-synced avatar
+models:
+- google/gemma-4-31B-it
+- nvidia/parakeet-tdt-1.1b
+- Qwen/Qwen3-TTS-12Hz-1.7B-CustomVoice
 tags:
 - ml-intern
 ---
 
-# Gemma Multi-Avatar
+# Gemma Avatar
+
+Realtime voice chat with a 3D talking-head avatar. Same AI stack as the
+[smolagents/hf-realtime-voice](https://huggingface.co/spaces/smolagents/hf-realtime-voice)
+Space ([blog post](https://huggingface.co/blog/cerebras-gemma4-voice-ai)), but the
+orb visualization is replaced by a [TalkingHead](https://github.com/met4citizen/TalkingHead)
+3D avatar with real-time audio-driven lip-sync.
+
+## The pipeline
+
+```
+you speak → silero-VAD → parakeet-tdt-1.1b (STT) → gemma-4-31B-it on Cerebras → Qwen3-TTS → avatar speaks
+```
+
+Transport is the OpenAI Realtime GA protocol over WebSocket against Hugging
+Face's speech-to-speech backend: mic PCM16 @ 16 kHz goes up as
+`input_audio_buffer.append`, TTS PCM16 @ 16 kHz comes back as
+`response.output_audio.delta`, transcripts stream alongside.
+
+## How the avatar works
+
+- **Rendering / body language** — [TalkingHead](https://github.com/met4citizen/TalkingHead)
+  (three.js). Blinking, breathing, idle sway, moods, hand gestures, and emoji
+  expressions are its built-in animation system.
+- **Lip-sync** — the backend sends raw PCM only (no word timings, no visemes),
+  so the mouth is driven from the audio itself with
+  [HeadAudio](https://github.com/met4citizen/HeadAudio): an AudioWorklet that
+  classifies MFCC frames into Oculus visemes (~50 ms latency, fully in-browser).
+  The s2s playback worklet is routed into TalkingHead's audio graph
+  (`audioAnalyzerNode → audioSpeechGainNode → reverb → speakers`) and HeadAudio
+  taps the speech gain node.
+- **The model plays the avatar** — three function tools are declared to the
+  backend: `set_mood`, `make_hand_gesture`, `make_facial_expression`. Gemma
+  calls them mid-conversation (smiles when greeting, shrugs when unsure,
+  thumbs-up when agreeing).
+- **Choreography** — client statuses drive presence: the avatar makes eye
+  contact when you start talking, gestures with its hands on new utterances,
+  and barge-in clears the playback buffer so the mouth settles instantly.
+
+## Run it
+
+```bash
+bun install
+
+# Pick a backend (one of):
+LOAD_BALANCER_URL=https://…            bun run dev   # a speech-to-speech load balancer
+SESSION_PROXY_URL=https://…/api        bun run dev   # piggyback another deployment's /api (dev)
+bun run dev                                          # direct mode: paste a ws:// URL in Settings
+```
+
+Open http://localhost:3000 and tap **Start talking**.
+
+\`?fakemic=1\` starts a session with a silent synthetic mic (useful for testing
+the full loop without a microphone — trigger a reply from the console with
+\`getClient().requestResponse()\`).
+
+## Layout
+
+```
+index.ts                    Bun server: HTML import + /api/session proxy + static assets
+index.html                  App shell (avatar hero, caption, subtitles, settings)
+src/app.js                  Session wiring, tool executor, UI state
+src/avatar.js               AvatarStage: TalkingHead + HeadAudio + choreography
+src/s2s/s2s-ws-client.js    Realtime WS client (vendored from the Space; orb removed,
+                            injectable output node + worklet base URL + shared-ctx close)
+src/s2s/codec.js            PCM/base64 + transcript helpers (vendored, unchanged)
+src/vendor/headaudio.min.mjs  HeadAudio node class (bundled)
+public/worklets/            mic-capture + audio-playback AudioWorklets (vendored, unchanged)
+public/vendor/              HeadAudio worklet processor + viseme model (runtime-loaded)
+public/avatars/brunette.glb  Default avatar (Ready Player Me; CC BY-NC 4.0 — non-commercial)
+```
 
-3D talking-head avatar with real-time voice/text chat.
+## Notes
 
-Users can switch between ~20 `.glb` avatar models, capture snapshots as thumbnails, and chat with a Gemma 4 speech-to-speech backend.
+- The avatar GLB must have a Mixamo-compatible rig plus ARKit and Oculus-viseme
+  blend shapes. Ready Player Me avatars work with
+  \`?morphTargets=ARKit,Oculus%20Visemes\` on the GLB URL.
+- TalkingHead owns the AudioContext; the s2s client is handed \`head.audioCtx\`
+  and never closes it.
+- Everything animation-related runs on requestAnimationFrame — a backgrounded
+  tab freezes the avatar (audio keeps playing).

_boot3.txt

@@ -0,0 +1,53 @@
+=== boot function ==
+1708: async function boot() {
+1709:   // 1) Reveal the picker IMMEDIATELY — first screen, never a loader.
+1710:   showPicker();
+1711: 
+1712:   // 2) Voice <select> options.
+1713:   for (const v of VOICES) {
+1714:     const o = document.createElement("option");
+1715:     o.value = v;
+1716:     o.textContent = v.replaceAll("_", " ");
+1717:     inputVoice.append(o);
+1718:   }
+1719:   inputVoice.value = settings.voice;
+1720: 
+1721:   // 3) Best-effort setup; isolate each step so a failure can NEVER hide the picker.
+1722:   try {
+1723:     const resp = await fetch("api/config");
+1724:     if (resp.ok) config = { ...config, ...(await resp.json()) };
+1725:   } catch (e) { console.warn("[boot] config:", e); }
+1726:   directUrlRow.hidden = !config.allowDirect;
+1727: 
+1728:   // Keep using the fake microphone (no real getUserMedia) so we never hit
+1729:   // the "MIC BLOCKED" permission prompt. Restored from the original boot().
+1730:   try {
+1731:     const url = new URL(location.href);
+1732:     url.searchParams.set("fakemic", "1");
+1733:     history.replaceState(null, "", url.href);
+1734:   } catch (e) { console.warn("[boot] fakemic:", e); }
+1735: 
+1736:   try { await fetchAvatarList(); } catch (e) { console.warn("[boot] avatars:", e); }
+1737:   try { populateAvatarSelects(settings.avatar); } catch (e) { console.warn("[boot] populate:", e); }
+1738:   try {
+1739:     makeDraggable(); makeResizable(); makeNewsDraggable(); makeNewsResizable(); buildVnewsPanel();
+1740:   } catch (e) { console.warn("[boot] ui:", e); }
+1741: 
+1742:   // 4) Fill the picker (avatar cards + voice chips).
+1743:   try { buildPicker(); } catch (e) { console.warn("[boot] buildPicker:", e); }
+1744:   try { void renderTopicsPicker(); } catch (e) { console.warn("[boot] topics:", e); }
+1745:   try { void renderTopicTags(); } catch (e) { console.warn("[boot] topics:", e); }
+1746:   try { updateAvatarThumbPreview(); } catch (e) { console.warn("[boot] thumb:", e); }
+1747: }
+1748: 
+=== end of boot ==
+1843:   newsResizeHandle.addEventListener("touchstart", onStart, { passive: false });
+1844:   document.addEventListener("touchmove", onMove, { passive: false });
+1845:   document.addEventListener("touchend", onEnd);
+1846: }
+1847: 
+1848: void boot();
+1849: 
+1850: // ── Capture PNG (snapshot of the 3D avatar) ──────────────
+1851: const THUMB_KEY = "avatar.thumbs";
+1852: const avatarThumbPreview = document.getElementById("avatar-thumb-preview");

_bp2.txt

@@ -0,0 +1,48 @@
+=== buildPicker function 1964-2010 ===
+1964: async function buildPicker() {
+1965:   const grid = document.getElementById("picker-avatars");
+1966:   const voices = document.getElementById("picker-voices");
+1967:   if (!grid || !voices) return;
+1968:   grid.innerHTML = "";
+1969:   voices.innerHTML = "";
+1970:   const selAvatar = settings.avatar || "";
+1971:   const list = avatarList.length ? avatarList : ["vuong.glb"];
+1972:   for (const name of list) {
+1973:     const card = document.createElement("button");
+1974:     card.type = "button";
+1975:     card.className = "avatar-card" + (name === selAvatar ? " selected" : "");
+1976:     card.dataset.avatar = name;
+1977:     const label = name.replace(/\.glb$/i, "").replace(/_/g, " ");
+1978:     const thumb = document.createElement("div");
+1979:     thumb.className = "avatar-card-thumb";
+1980:     const _map = loadThumbs();
+1981:     const _img = document.createElement("img");
+1982:     _img.alt = label;
+1983:     _img.loading = "lazy";
+1984:     _img.addEventListener("error", () => {
+1985:       _img.remove();
+1986:       thumb.textContent = label.slice(0, 1).toUpperCase();
+1987:     });
+1988:     const _srv = serverThumbUrl(name);
+1989:     _img.src = (_srv && !_map[name]) ? _srv : (_map[name] || _srv);
+1990:     thumb.appendChild(_img);
+1991:     const span = document.createElement("span");
+1992:     span.className = "avatar-card-name";
+1993:     span.textContent = label + (name.toLowerCase() === "vuong.glb" ? " 🎙️" : "");
+1994:     card.appendChild(thumb);
+1995:     card.appendChild(span);
+1996:     card.addEventListener("click", () => {
+1997:       grid.querySelectorAll(".avatar-card").forEach((c) => c.classList.remove("selected"));
+1998:       card.classList.add("selected");
+1999:       settings.avatar = name;
+2000:       saveSettings();
+2001:     });
+2002:     grid.appendChild(card);
+2003:   }
+2004:   for (const v of VOICES) {
+2005:     const chip = document.createElement("button");
+2006:     chip.type = "button";
+2007:     chip.className = "voice-chip" + (v === settings.voice ? " selected" : "");
+2008:     chip.dataset.voice = v;
+2009:     chip.textContent = v.replaceAll("_", " ");
+2010:     chip.addEventListener("click", () => {

_check2.txt

@@ -0,0 +1,49 @@
+=== buildPicker (full) ===
+1964: function buildPicker() { {
+1965:   const grid = document.getElementById("picker-avatars");
+1966:   const voices = document.getElementById("picker-voices");
+1967:   if (!grid || !voices) return;
+1968:   grid.innerHTML = "";
+1969:   voices.innerHTML = "";
+1970:   const selAvatar = settings.avatar || "";
+1971:   const list = avatarList.length ? avatarList : ["vuong.glb"];
+1972:   for (const name of list) {
+1973:     const card = document.createElement("button");
+1974:     card.type = "button";
+1975:     card.className = "avatar-card" + (name === selAvatar ? " selected" : "");
+1976:     card.dataset.avatar = name;
+1977:     const label = name.replace(/\.glb$/i, "").replace(/_/g, " ");
+1978:     const thumb = document.createElement("div");
+1979:     thumb.className = "avatar-card-thumb";
+1980:     const _map = loadThumbs();
+1981:     const _img = document.createElement("img");
+1982:     _img.alt = label;
+1983:     _img.loading = "lazy";
+1984:     _img.addEventListener("error", () => {
+1985:       _img.remove();
+1986:       thumb.textContent = label.slice(0, 1).toUpperCase();
+1987:     });
+1988:     const _srv = serverThumbUrl(name);
+1989:     _img.src = (_srv && !_map[name]) ? _srv : (_map[name] || _srv);
+1990:     thumb.appendChild(_img);
+1991:     const span = document.createElement("span");
+1992:     span.className = "avatar-card-name";
+1993:     span.textContent = label + (name.toLowerCase() === "vuong.glb" ? " 🎙️" : "");
+1994:     card.appendChild(thumb);
+1995:     card.appendChild(span);
+1996:     card.addEventListener("click", () => {
+1997:       grid.querySelectorAll(".avatar-card").forEach((c) => c.classList.remove("selected"));
+1998:       card.classList.add("selected");
+1999:       settings.avatar = name;
+2000:       saveSettings();
+2001:     });
+2002:     grid.appendChild(card);
+2003:   }
+2004:   for (const v of VOICES) {
+2005:     const chip = document.createElement("button");
+2006:     chip.type = "button";
+2007:     chip.className = "voice-chip" + (v === settings.voice ? " selected" : "");
+2008:     chip.dataset.voice = v;
+2009:     chip.textContent = v.replaceAll("_", " ");
+=== boot voice loop ===
+1712:   for (const v of VOICES) {

_dbg.txt

@@ -1,40 +0,0 @@
-=== startWithSelection tail ===
-2009: async function startWithSelection() {
-2010:   hidePicker();
-2011:   setCaption("WAKING HER UP…");
-2012:   setMainButton("busy", "Loading…");
-2013:   loading.classList.remove("done");
-2014:   loading.classList.add("active");
-2015:   loading.textContent = "Loading avatar...";
-2016:   const newsPromise = (settings.avatar === "vuong.glb" || !settings.avatar) ? getHotNews().catch(() => []) : Promise.resolve([]);
-2017:   let ok = false;
-2018:   try {
-2019:     const initPromise = stage.init({
-2020:       avatarUrl: settings.avatar ? `/avatars/${settings.avatar}` : undefined,
-2021:       onprogress: (ev) => {
-2022:         if (ev.lengthComputable) {
-2023:           loading.textContent = `Loading avatar ${Math.min(100, Math.round((ev.loaded / ev.total) * 100))}%`;
-2024:         }
-2025:       }
-2026:     });
-2027:     const timeout = new Promise((_, rej) => setTimeout(() => rej(new Error("init timeout")), 25000));
-2028:     await Promise.race([initPromise, timeout]);
-2029:     stage.resume(); // start render loop so the avatar is actually visible (not a single black frame)
-2030:     ok = true;
-2031:   } catch (err) {
-2032:     console.error("[startWithSelection] init failed/timeout:", err);
-2033:   } finally {
-2034:     try { preFetchedNews = await newsPromise; } catch { preFetchedNews = []; }
-2035:     newsSeq = preFetchedNews.slice();
-2036:     newsSeqIdx = -1;
-2037:     newsTopicQuery = "";
-2038:     loading.classList.remove("active");
-2039:     if (ok) setCaption(CAPTIONS.idle);
-2040:     else setCaption("AVATAR KHÔNG HIỂN THỊ — THỬ CHỌN AVATAR KHÁC", "error");
-2041:     setMainButton("start", "Start talking");
-2042:   }
-2043: }
-2044: const pickerStartBtn = document.getElementById("picker-start");
-2045: if (pickerStartBtn) pickerStartBtn.addEventListener("click", () => void startWithSelection());
-=== index.html topic-tags line ===
-H50:         <div id="topic-tags" class="topic-tags" hidden></div>

_tail2.txt

@@ -0,0 +1,25 @@
+buildPicker end:
+2004:   for (const v of VOICES) {
+2005:     const chip = document.createElement("button");
+2006:     chip.type = "button";
+2007:     chip.className = "voice-chip" + (v === settings.voice ? " selected" : "");
+2008:     chip.dataset.voice = v;
+2009:     chip.textContent = v.replaceAll("_", " ");
+2010:     chip.addEventListener("click", () => {
+2011:       voices.querySelectorAll(".voice-chip").forEach((c) => c.classList.remove("selected"));
+2012:       chip.classList.add("selected");
+2013:       settings.voice = v;
+2014:       saveSettings();
+2015:     });
+2016:     voices.appendChild(chip);
+2017:   await renderTopicsPicker();
+2018: }
+2019: }
+2020: function showPicker() {
+2021:   const p = document.getElementById("picker");
+2022:   if (p) p.hidden = false;
+2023: }
+2024: function hidePicker() {
+2025:   const p = document.getElementById("picker");
+2026:   if (p) p.hidden = true;
+braces: {{ = 539 }} = 539

_v.txt

@@ -0,0 +1,2 @@
+braces={=539 }=539
+renderTopicsPicker present: yes

_vf.txt

@@ -1,7 +1,20 @@
-app braces={=532 }=532
-renderTopicTags in startWithSelection: yes
-renderTopicTags appends to chatMessages: yes
-_topicTagsRendered flag: yes
-fixed #topic-tags removed: yes
-hidden rule removed: yes
-topic-tags base rule present: yes
+=== voices loop in buildPicker (2004+) ===
+2004:   for (const v of VOICES) {
+2005:     const chip = document.createElement("button");
+2006:     chip.type = "button";
+2007:     chip.className = "voice-chip" + (v === settings.voice ? " selected" : "");
+2008:     chip.dataset.voice = v;
+2009:     chip.textContent = v.replaceAll("_", " ");
+2010:     chip.addEventListener("click", () => {
+2011:       voices.querySelectorAll(".voice-chip").forEach((c) => c.classList.remove("selected"));
+2012:       chip.classList.add("selected");
+2013:       settings.voice = v;
+2014:       saveSettings();
+2015:     });
+2016:     voices.appendChild(chip);
+2017:   await renderTopicsPicker();
+2018: }
+=== check textContent in voices ===
+V127:     chip.textContent = "#" + c.label.replace(/\s+/g, "_");
+V1958:     chip.textContent = "#" + c.label.replace(/\s+/g, "_");
+V2009:     chip.textContent = v.replaceAll("_", " ");

_voices.txt

@@ -0,0 +1,18 @@
+=== VOICES array ===
+5: const VOICES = [
+1712:   for (const v of VOICES) {
+2004:   for (const v of VOICES) {
+=== surrounding VOICES ===
+3: import { smartNormalize, prepareForTTS } from "./viNumberFix.js";
+4: 
+5: const VOICES = [
+6:   "Aiden", "Ryan", "Dylan", "Eric",
+7:   "Ono_Anna", "Serena", "Sohee", "Uncle_Fu", "Vivian",
+8: ];
+9: const DEFAULT_VOICE = "Sohee";
+10: 
+11: // ── VNEWS integration ───────────────────────────────────────────────────
+12: // The VNEWS space (bep40/vnews) is reachable at this subdomain. It exposes a
+13: // clean JSON API (no key required) that we use to pull AI/tech news, answer
+14: // from VNEWS data, and rewrite selected chat content into VNEWS "wall" posts.
+15: const VNEWS_BASE = "https://bep40-vnews.hf.space";

_vv.txt

@@ -0,0 +1,13 @@
+=== VOICES definition ===
+V5: const VOICES = [
+=== buildPicker voices loop ===
+B1712:   for (const v of VOICES) {
+B1966:   const voices = document.getElementById("picker-voices");
+B2004:   for (const v of VOICES) {
+B2016:     voices.appendChild(chip);
+=== boot buildPicker call ===
+1742:   try { await buildPicker(); } catch (e) { console.warn("[boot] buildPicker:", e); }
+buildPicker lines:
+1742:   try { await buildPicker(); } catch (e) { console.warn("[boot] buildPicker:", e); }
+1931:       try { buildPicker(); } catch (e) { console.warn("[snap] buildPicker:", e); }
+1964: async function buildPicker() {

index.html

@@ -11,30 +11,11 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="./src/style.css" />
-    <!--
-      CRITICAL: Import map for bare module specifiers used in src/avatar.js and src/app.js.
-      Without this, browser fails to resolve "three", "@met4citizen/talkinghead", etc.
-    -->
-    <script type="importmap">
-    {
-      "imports": {
-        "three": "https://esm.sh/three@0.173.0",
-        "three/": "https://esm.sh/three@0.173.0/",
-        "@met4citizen/talkinghead": "https://esm.sh/@met4citizen/talkinghead@0.6.26"
-      }
-    }
-    </script>
   </head>
   <body>
     <main id="app">
       <div id="stage" aria-label="3D avatar"></div>
       <div id="loading" hidden>Loading avatar…</div>
-      <div id="start-progress" class="start-progress" hidden>
-        <div class="start-progress__msg">Chờ tôi một lát! Tôi sẽ đến với bạn ngay!</div>
-        <div class="start-progress__bar">
-          <div class="start-progress__fill" style="width: 0%"></div>
-        </div>
-      </div>
 
       <header id="topbar">
         <div id="identity">
@@ -68,14 +49,6 @@
         <div id="chat-messages"></div>
         <div id="chat-input-container">
           <input id="chat-input" type="text" placeholder="Type a message..." autocomplete="off" />
-          <button id="chat-mic-btn" class="icon-btn" aria-label="Switch to voice chat" title="Chuyển sang chat giọng nói" hidden>
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
-              <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
-              <line x1="12" y1="19" x2="12" y2="23"></line>
-              <line x1="8" y1="23" x2="16" y2="23"></line>
-            </svg>
-          </button>
           <button id="chat-send-btn" class="icon-btn" aria-label="Send message">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <line x1="22" y1="2" x2="11" y2="13"></line>
@@ -168,6 +141,8 @@
         <div id="picker-avatars" class="picker-avatars"></div>
         <h2>Giọng nói</h2>
         <div id="picker-voices" class="picker-voices"></div>
+        <h2 class="picker-sub">Chủ đề HOT hôm nay</h2>
+        <div id="picker-topics" class="picker-voices"></div>
         <button id="picker-start" class="primary picker-start">Bắt đầu ▶</button>
       </div>
     </div>
@@ -175,4 +150,4 @@
     </main>
     <script type="module" src="./src/app.js"></script>
   </body>
-</html>
+</html>

index.ts

@@ -21,19 +21,6 @@ async function proxy(path, req, init = {}) {
   const cookie = req.headers.get("cookie");
   if (cookie) headers.set("Cookie", cookie);
   const resp = await fetch(`${UPSTREAM}${path}`, { ...init, headers });
-  
-  // Handle non-JSON errors (429, 502, etc) from upstream
-  if (!resp.ok) {
-    const ct = resp.headers.get("content-type") || "";
-    if (ct.includes("text/html")) {
-      const body = await resp.text().catch(() => "");
-      if (resp.status === 429) {
-        return Response.json({ error: "Dịch vụ giọng nói đang quá tải, thử lại sau", state: "rate_limited" }, { status: 429 });
-      }
-      return Response.json({ error: "Speech service error", state: "unavailable" }, { status: resp.status });
-    }
-  }
-  
   const body = await resp.text();
   const out = new Response(body, { status: resp.status, headers: { "Content-Type": "application/json" } });
   const setCookies = resp.headers.getSetCookie?.() ?? (resp.headers.get("set-cookie") ? [resp.headers.get("set-cookie")] : []);
@@ -42,14 +29,13 @@ async function proxy(path, req, init = {}) {
 }
 
 function staticFile(dir, name) {
-  const filePath = join(process.cwd(), "public", dir, name);
-  const file = Bun.file(filePath);
+  const file = Bun.file(`${import.meta.dir}/public/${dir}/${name}`);
   return new Response(file);
 }
 
-/** List .glb files in public/avatars/ and check for corresponding thumbnails. */
+/** List .glb files in public/avatars/ */
 async function listAvatars() {
-  const avatarsDir = join(process.cwd(), "public/avatars");
+  const avatarsDir = join(import.meta.dir, "public/avatars");
   const names = [];
   try {
     const dir = await readdir(avatarsDir, { withFileTypes: true });
@@ -62,34 +48,6 @@ async function listAvatars() {
   return names.sort();
 }
 
-/** List ALL files in public/avatars/ (for debugging). */
-async function listAllAvatarFiles() {
-  const avatarsDir = join(process.cwd(), "public/avatars");
-  const files = [];
-  try {
-    const dir = await readdir(avatarsDir, { withFileTypes: true });
-    for (const entry of dir) {
-      if (entry.isFile()) {
-        files.push(entry.name);
-      }
-    }
-  } catch {}
-  return files.sort();
-}
-
-/** Check if a thumbnail exists for a given avatar name. */
-async function avatarHasThumbnail(avatarName) {
-  const thumbName = `${avatarName}.thumb.png`;
-  const thumbPath = join(process.cwd(), "public/avatars", thumbName);
-  try {
-    const file = Bun.file(thumbPath);
-    const exists = await file.exists();
-    return exists;
-  } catch {
-    return false;
-  }
-}
-
 const SOURCE_MAP = {
   "vnexpress.net": "VnExpress",
   "dantri.com.vn": "Dân trí",
@@ -121,15 +79,19 @@ function sourceNameFromUrl(feedUrl) {
 
 /** Extract the first usable image URL from an RSS <item> block. */
 function extractImage(itemXml) {
+  // 1) media:thumbnail / media:content with url=
   const media = itemXml.match(/<media:(?:thumbnail|content)[^>]*\burl=["']([^"']+)["']/i);
   if (media) return media[1];
+  // 2) <enclosure type="image/..." url="...">
   const enc = itemXml.match(/<enclosure[^>]*\btype=["']image\/[^"']*["'][^>]*>/i);
   if (enc) {
     const urlMatch = enc[0].match(/\burl=["']([^"']+)["']/i);
     if (urlMatch) return urlMatch[1];
   }
+  // 3) <image><url>...</url></image>
   const imgTag = itemXml.match(/<image>\s*<url>([\s\S]*?)<\/url>/i);
   if (imgTag) return imgTag[1].replace(/<!\[CDATA\[|\]\]>/g, "").trim();
+  // 4) any <img ... src="..."> inside description
   const imgSrc = itemXml.match(/<img[^>]*\bsrc=["']([^"']+)["']/i);
   if (imgSrc) return imgSrc[1];
   return "";
@@ -153,7 +115,7 @@ function extractDescription(itemXml) {
   if (!dm) return "";
   let txt = dm[1].replace(/<!\[CDATA\[|\]\]>/g, "");
   txt = txt.replace(/<script[\s\S]*?<\/script>/gi, "").replace(/<style[\s\S]*?<\/style>/gi, "")
-             .replace(/<[^>]+>/g, " ").replace(/&[a-z]+;/gi, " ").replace(/\s+/g, " ").trim();
+             .replace(/<[^>]+>/g, " ").replace(/&[a-z]+;/g, " ").replace(/\s+/g, " ").trim();
   return txt.length > 300 ? txt.slice(0, 300) + "…" : txt;
 }
 
@@ -174,75 +136,21 @@ const FEEDS = [
   "https://www.nguoiduatin.vn/rss/home.rss",
   "https://tienphong.vn/rss/home.rss",
   "https://vov.vn/rss/home.rss",
-  "https://vietnamnet.vn/rss/the-thao.rss",
-  "https://vtc.vn/rss/the-thao.rss",
-  "https://thanhnien.vn/rss/the-thao.rss",
-  "https://tuoitre.vn/rss/the-thao.rss",
-  "https://dantri.com.vn/the-thao.rss",
-  "https://www.bongda.com.vn/rss-bong-da.html",
-  "https://bongdoanhnghia.vn/feed",
-  "https://vietnamnet.vn/rss/kinh-te.rss",
-  "https://cafef.vn/rss/thi-truong.rss",
-  "https://vtc.vn/rss/kinh-te.rss",
-  "https://thanhnien.vn/rss/kinh-te.rss",
-  "https://laodong.vn/kinh-te-doanh-nghiep.rss",
-  "https://vietnamnet.vn/rss/cong-nghe.rss",
-  "https://genk.vn/rss/cong-nghe.rss",
-  "https://cafef.vn/rss/cong-nghe.rss",
-  "https://vtc.vn/rss/cong-nghe.rss",
-  "https://thanhnien.vn/rss/cong-nghe.rss",
-  "https://vietnamnet.vn/rss/thoi-su.rss",
-  "https://vtc.vn/rss/thoi-su.rss",
-  "https://thanhnien.vn/rss/thoi-su.rss",
-  "https://tuoitre.vn/rss/thoi-su.rss",
-  "https://vietnamnet.vn/rss/giao-duc.rss",
-  "https://vtc.vn/rss/giao-duc.rss",
-  "https://thanhnien.vn/rss/giao-duc.rss",
-  "https://dantri.com.vn/giao-duc.rss",
-  "https://vietnamnet.vn/rss/suc-khoe.rss",
-  "https://vtc.vn/rss/suc-khoe.rss",
-  "https://thanhnien.vn/rss/suc-khoe.rss",
-  "https://vietnamnet.vn/rss/du-lich.rss",
-  "https://vtc.vn/rss/du-lich.rss",
-  "https://thanhnien.vn/rss/du-lich.rss",
-  "https://vietnamnet.vn/rss/o-to-xe-xem.rss",
-  "https://vtc.vn/rss/o-to.rss",
-  "https://vietnamnet.vn/rss/giai-tri.rss",
-  "https://vtc.vn/rss/giai-tri.rss",
-  "https://thanhnien.vn/rss/giai-tri.rss",
-  "https://vietnamnet.vn/rss/phap-luat.rss",
-  "https://vtc.vn/rss/phap-luat.rss",
-  "https://thanhnien.vn/rss/phap-luat.rss",
 ];
 
-function decodeHtmlEntities(str) {
-  if (!str) return "";
-  let decoded = str.replace(/&#(\d+);/g, (_, dec) => String.fromCharCode(Number(dec)));
-  decoded = decoded.replace(/&#x([0-9a-fA-F]+);/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)));
-  const namedEntities = {
-    "&Ocirc;": "Ô", "&ograve;": "ò", "&Ograve;": "Ò", "&ocirc;": "ô",
-    "&agrave;": "à", "&Agrave;": "À", "&eacute;": "é", "&Eacute;": "É",
-    "&ugrave;": "ù", "&Ugrave;": "Ù", "&acirc;": "â", "&Acirc;": "Â",
-    "&ecirc;": "ê", "&Ecirc;": "Ê", "&icirc;": "î", "&Icirc;": "Î",
-    "&ocirc;": "ô", "&Ocirc;": "Ô", "&ucirc;": "û", "&Ucirc;": "Û",
-    "&ntilde;": "ñ", "&Ntilde;": "Ñ", "&amp;": "&", "&lt;": "<", "&gt;": ">",
-    "&quot;": '"', "&#039;": "'", "&apos;": "'", "&nbsp;": " ",
-    "&yacute;": "ý", "&Yacute;": "Ý", "&aacute;": "á", "&Aacute;": "Á",
-    "&eacute;": "é", "&Eacute;": "É", "&iacute;": "í", "&Iacute;": "Í",
-    "&oacute;": "ó", "&Oacute;": "Ó", "&uacute;": "ú", "&Uacute;": "Ú",
-    "&uuml;": "ü", "&Uuml;": "Ü", "&ouml;": "ö", "&Ouml;": "Ö",
-    "&auml;": "ä", "&Auml;": "Ä", "&ntilde;": "ñ", "&Ntilde;": "Ñ",
-    "&ccedil;": "ç", "&Ccedil;": "Ç", "&ntilde;": "ñ", "&Ntilde;": "Ñ",
-  };
-  for (const [entity, char] of Object.entries(namedEntities)) {
-    decoded = decoded.split(entity).join(char);
-  }
-  return decoded;
-}
-
+/**
+ * Fetch hot Vietnamese news from many RSS feeds.
+ *
+ * Uses ROUND-ROBIN selection: we pull an equal number of items from each
+ * source before moving on, so no single source (e.g. VnExpress) can dominate
+ * the list. The combined result is then shuffled for extra variety. Every
+ * item carries a thumbnail image when the feed provides one.
+ */
 async function fetchHotNews() {
-  const parsed = [];
+  const parsed = []; // [{source, items:[{title,link,image}]}]
   const seenLinks = new Set();
+
+  // Fetch all feeds in parallel for speed.
   await Promise.all(
     FEEDS.map(async (feedUrl) => {
       try {
@@ -258,7 +166,7 @@ async function fetchHotNews() {
           const tm = item.match(/<title[^>]*>([\s\S]*?)<\/title>/i);
           const lm = item.match(/<link[^>]*>([\s\S]*?)<\/link>/i);
           if (!tm || !tm[1]) continue;
-          const cleanTitle = decodeHtmlEntities(tm[1].replace(/<!\[CDATA\[|\]\]>/g, "").trim());
+          const cleanTitle = tm[1].replace(/<!\[CDATA\[|\]\]>/g, "").trim();
           const cleanLink = lm ? lm[1].replace(/<!\[CDATA\[|\]\]>/g, "").trim() : "";
           if (cleanTitle && cleanTitle.length > 10 && cleanLink && !seenLinks.has(cleanLink)) {
             seenLinks.add(cleanLink);
@@ -273,10 +181,13 @@ async function fetchHotNews() {
       }
     })
   );
+
+  // Round-robin: take 1 item from each source in turn, repeat until we have
+  // enough (or sources are exhausted). This guarantees source diversity.
   const queue = parsed.map((p) => ({ source: p.source, items: p.items.slice() }));
-  const items = [];
+  const items = []; // {title, link, source, image}
   let added = true;
-  const MAX = 150;
+  const MAX = 80;
   while (added && items.length < MAX) {
     added = false;
     for (const q of queue) {
@@ -288,10 +199,13 @@ async function fetchHotNews() {
       }
     }
   }
+
+  // Final shuffle so the order is not source-clustered.
   const shuffled = items.sort(() => Math.random() - 0.5);
   return shuffled;
 }
 
+// ── In-memory news pool (refreshed periodically) for stable pagination ──
 let newsPool = [];
 let newsPoolLoadedAt = 0;
 
@@ -302,190 +216,23 @@ async function refreshNewsPool() {
 }
 
 async function getNewsPool() {
+  // Refresh if empty or older than 5 minutes.
   if (newsPool.length === 0 || Date.now() - newsPoolLoadedAt > 5 * 60 * 1000) {
     await refreshNewsPool();
   }
   return newsPool;
 }
 
-const ALL_TOPICS = [
-  { slug: "worldcup", label: "World Cup", keywords: ["world cup", "worldcup", "cúp thế giới", "fifa"] },
-  { slug: "aseancup", label: "ASEAN Cup", keywords: ["asean cup", "aseancup", "cúp đông nam áp", "vòng loại world cup", "vòng loại cúp"] },
-  { slug: "bongda", label: "Bóng đá", keywords: ["bóng đá", "bóng đá việt nam", "bóng đá ngoại hạng", "premier league", "laliga", "serie a", "bundesliga", "ligue 1", "chuyển nhượng"] },
-  { slug: "thethao", label: "Thể thao", keywords: ["thể thao", "olympics", "olympic", "sea games", "asiad"] },
-  { slug: "ai", label: "AI", keywords: ["trí tuệ nhân tạo", "a.i", "machine learning", "deep learning", "chatbot", "generative ai", "gen ai", "llm", "gpt", "qwen", "kimi", "chatgpt", "gemini", "openai", "claude", "tạo ảnh", "tạo video", "ứng dụng ai", "ai tạo sinh", "thông minh nhân tạo", "mô hình ngôn ngữ", "học sâu", "học máy", "mạng nơ-ron", "neural network", "kimik3", "kimi k3", "kimi"] },
-  { slug: "congngang", label: "Công nghệ", keywords: ["công nghệ", "số hóa", "digital", "tech", "startup", "fintech", "blockchain", "metaverse", "cloud", "edge computing"] },
-  { slug: "kinhte", label: "Kinh tế", keywords: ["kinh tế", "tài chính", "chứng khoán", "lạm phát", "giá vàng", "giá dầu", "giá bitcoin", "vàng", "tiền tệ", "ngân hàng"] },
-  { slug: "thoisu", label: "Thời sự", keywords: ["thời sự", "chính trị", "quan hệ", "đối ngoại", "pháp luật", "luật mới", "bỏ phiếu", "bầu cử", "bộ chính phủ", "thủ tướng"] },
-  { slug: "giao-duc", label: "Giáo dục", keywords: ["giáo dục", "thi cử", "đại học", "trường học", "kỳ thi", "tuyển sinh", "tuyển dụng"] },
-  { slug: "suc-khoe", label: "Sức khỏe", keywords: ["sức khỏe", "y tế", "bệnh", "bác sĩ", "bệnh viện", "tiêm chủng", "dịch bệnh", "ung thư", "tiểu đường"] },
-  { slug: "du-lich", label: "Du lịch", keywords: ["du lịch", "tourism", "đi du lịch", "khách sạn", "vé máy bay", "du lịch trong nước", "du lịch quốc tế"] },
-  { slug: "oto", label: "Ô tô", keywords: ["ô tô", "xe máy", "xe hơi", "toyota", "mercedes", "bmw", "audi", "honda", "hyundai", "thaco", "ô tô điện"] },
-  { slug: "thegioi", label: "Thế giới", keywords: ["thế giới", "quốc tế", "mỹ", "trung quốc", "nhật bản", "hàn quốc", "châu âu", "mỹ latin"] },
-  { slug: "doisong", label: "Đời sống", keywords: ["đời sống", "gia đình", "tình yêu", "kết hôn", "nuôi dạy con", "ăn uống", "ẩm thực", "làm đẹp"] },
-  { slug: "giai-tri", label: "Giải trí", keywords: ["giải trí", "điện ảnh", "âm nhạc", "ca sĩ", "diễn viên", "phim", "trực tuyến", "kpop", "vpop"] },
-  { slug: "am-nhac", label: "Âm nhạc", keywords: ["âm nhạc", "nhạc trẻ", "nhạc vào", "concert", "âm nhạc điện tử"] },
-  { slug: "phap-luat", label: "Pháp luật", keywords: ["pháp luật", "tội phạm", "hình sự", "hành chính", "tai nạn", "bảo vệ quyền"] },
-];
-
-const VI_STOPWORDS = new Set([
-  "và", "của", "các", "là", "được", "trong", "cho", "tại", "với", "để", "khi", "nếu", "như", "đó", "này", "kia",
-  "tôi", "bạn", "anh", "chị", "cô", "chú", "bác", "ông", "bà", "nó", "họ", "ta", "chúng", "mình", "tôi",
-  "có", "không", "đã", "sẽ", "đang", "để", "về", "từ", "trên", "dưới", "trong", "ngoài", "trước", "sau",
-  "một", "hai", "ba", "bốn", "năm", "sáu", "bảy", "tám", "chín", "mười", "nhiều", "ít", "cả", "các",
-  "hôm", "nay", "qua", "đến", "đi", "lên", "xuống", "ra", "vào", "ở", "tại", "thì", "mà", "nhưng", "hoặc",
-  "vừa", "cũng", "chỉ", "đúng", "tất", "cả", "mỗi", "khác", "mới", "cũ", "lớn", "nhỏ", "cao", "thấp",
-  "vừa", "rồi", "thì", "mới", "đã", "sẽ", "đang", "được", "để", "về", "từ", "trên", "dưới", "trong",
-  "ngày", "giờ", "phút", "giây", "năm", "tháng", "tuần", "giờ", "phút", "giây",
-  "ng", "nh", "nc", "nd", "nt", "nl", "nm", "np", "nk", "nj", "ni", "no", "nr", "ns", "nv", "nz",
-  "ch", "tr", "ph", "th", "kh", "gh", "nh", "ng", "cn", "cv", "đc", "đk", "đt", "đv",
-]);
-
-async function getTrendingTopics() {
-  const pool = await getNewsPool();
-  const allText = pool
-    .map((i) => ((i.title || "") + " " + (i.description || "")).replace(/&[a-z]+;/gi, " "))
-    .join(" ")
-    .toLowerCase();
-  const tokens = allText
-    .replace(/[0-9]+/g, " ")
-    .replace(/[^\p{L}\s]/gu, " ")
-    .split(/\s+/)
-    .filter((t) => t.length >= 2 && !VI_STOPWORDS.has(t));
-  const bigramFreq = new Map();
-  for (let i = 0; i < tokens.length - 1; i++) {
-    const bigram = tokens[i] + " " + tokens[i + 1];
-    if (!VI_STOPWORDS.has(tokens[i]) && !VI_STOPWORDS.has(tokens[i + 1])) {
-      bigramFreq.set(bigram, (bigramFreq.get(bigram) || 0) + 1);
-    }
-  }
-  const trigramFreq = new Map();
-  for (let i = 0; i < tokens.length - 2; i++) {
-    const trigram = tokens[i] + " " + tokens[i + 1] + " " + tokens[i + 2];
-    if (!VI_STOPWORDS.has(tokens[i]) && !VI_STOPWORDS.has(tokens[i + 1]) && !VI_STOPWORDS.has(tokens[i + 2])) {
-      trigramFreq.set(trigram, (trigramFreq.get(trigram) || 0) + 1);
-    }
-  }
-  const topicScores = [];
-  for (const topic of ALL_TOPICS) {
-    let count = 0;
-    for (const kw of topic.keywords) {
-      const kwLower = kw.toLowerCase();
-      count += (allText.split(kwLower).length - 1);
-    }
-    if (count > 0) topicScores.push({ slug: topic.slug, label: topic.label, count, type: "fixed" });
-  }
-  const knownKeywords = new Set();
-  for (const t of ALL_TOPICS) { for (const kw of t.keywords) knownKeywords.add(kw.toLowerCase()); }
-  const topTrigrams = [...trigramFreq.entries()]
-    .filter(([phrase]) => { if (knownKeywords.has(phrase) || phrase.length <= 6) return false; const words = phrase.split(" "); return !words.some((w) => VI_STOPWORDS.has(w)); })
-    .sort((a, b) => b[1] - a[1]).slice(0, 10);
-  const topBigrams = [...bigramFreq.entries()]
-    .filter(([phrase]) => { if (knownKeywords.has(phrase) || phrase.length <= 4) return false; const words = phrase.split(" "); return !words.some((w) => VI_STOPWORDS.has(w)); })
-    .sort((a, b) => b[1] - a[1]).slice(0, 20);
-  topicScores.sort((a, b) => b.count - a.count);
-  const trending = [...topicScores.slice(0, 10)];
-  const rawKeywords = [...topTrigrams, ...topBigrams].filter(([phrase, freq]) => freq >= 2).sort((a, b) => b[1] - a[1]).slice(0, 10);
-  for (const [phrase, freq] of rawKeywords) {
-    const slug = phrase.replace(/\s+/g, "-").replace(/[^\p{L}\p{N}-]/gu, "");
-    if (slug && slug.length > 2 && /^[a-zà-ỹ\-]+$/.test(slug) && !trending.find((t) => t.slug === slug)) {
-      const label = phrase.split(" ").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
-      trending.push({ slug, label, count: freq, type: "dynamic" });
-    }
-  }
-  // Always include AI topic regardless of score (it has its own VNEWS AI feed)
-  if (!trending.find((f) => f.slug === "ai")) {
-    trending.push({ slug: "ai", label: "AI", count: 1, type: "fixed" });
-  }
-  if (trending.length < 10) {
-    const defaults = [
-      { slug: "congngang", label: "Công nghệ", keywords: [] },
-      { slug: "bongda", label: "Bóng đá", keywords: [] },
-      { slug: "kinhte", label: "Kinh tế", keywords: [] },
-      { slug: "thethao", label: "Thể thao", keywords: [] },
-      { slug: "thoisu", label: "Thời sự", keywords: [] },
-      { slug: "giao-duc", label: "Giáo dục", keywords: [] },
-      { slug: "suc-khoe", label: "Sức khỏe", keywords: [] },
-      { slug: "du-lich", label: "Du lịch", keywords: [] },
-      { slug: "giai-tri", label: "Giải trí", keywords: [] },
-    ];
-    for (const d of defaults) {
-      if (!trending.find((f) => f.slug === d.slug)) trending.push({ ...d, count: 1, type: "fixed" });
-    }
-  }
-  const now = new Date();
-  const start = new Date(now.getFullYear(), 0, 0);
-  const dayOfYear = Math.floor((now.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
-  const seed = dayOfYear;
-  const shuffled = [...trending];
-  let r = seed;
-  for (let i = shuffled.length - 1; i > 0; i--) {
-    r = (r * 1103515245 + 12345) & 0x7fffffff;
-    const j = r % (i + 1);
-    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
-  }
-  return shuffled.slice(0, 20).map(({ slug, label }) => ({ slug, label }));
-}
-
+/** Filter the cached pool by a keyword (case-insensitive, in title). */
 async function filterNews(query, limit = 15) {
   const pool = await getNewsPool();
   const q = (query || "").trim().toLowerCase();
   if (!q) return pool.slice(0, limit);
-  const SLUG_MAP = {
-    "worldcup": ["world cup", "worldcup", "cúp thế giới", "fifa"],
-    "aseancup": ["asean cup", "aseancup", "cúp đông nam áp", "vòng loại world cup", "vòng loại cúp"],
-    "bongda": ["bóng đá", "bóng đá việt nam", "bóng đá ngoại hạng", "premier league", "laliga", "serie a", "bundesliga", "ligue 1", "chuyển nhượng"],
-    "thethao": ["thể thao", "olympics", "olympic", "sea games", "asiad"],
-    "ai": ["trí tuệ nhân tạo", "a.i", "machine learning", "deep learning", "chatbot", "generative ai", "gen ai", "llm", "gpt", "qwen", "kimi", "chatgpt", "gemini", "openai", "claude", "tạo ảnh", "tạo video", "ứng dụng ai", "ai tạo sinh", "thông minh nhân tạo", "mô hình ngôn ngữ", "học sâu", "học máy", "mạng nơ-ron", "neural network", "kimik3", "kimi"],
-    "congngang": ["công nghệ", "số hóa", "digital", "tech", "startup", "fintech", "blockchain", "metaverse", "cloud"],
-    "kinhte": ["kinh tế", "tài chính", "chứng khoán", "lạm phát", "giá vàng", "giá dầu", "giá bitcoin", "vàng", "tiền tệ", "ngân hàng"],
-    "thoisu": ["thời sự", "chính trị", "quan hệ", "đối ngoại", "pháp luật", "luật mới", "bỏ phiếu", "bầu cử", "bộ chính phủ", "thủ tướng"],
-    "giao-duc": ["giáo dục", "thi cử", "đại học", "trường học", "kỳ thi", "tuyển sinh", "tuyển dụng"],
-    "suc-khoe": ["sức khỏe", "y tế", "bệnh", "bác sĩ", "bệnh viện", "tiêm chủng", "dịch bệnh", "ung thư", "tiểu đường"],
-    "du-lich": ["du lịch", "tourism", "đi du lịch", "khách sạn", "vé máy bay", "du lịch trong nước", "du lịch quốc tế"],
-    "oto": ["ô tô", "xe máy", "xe hơi", "toyota", "mercedes", "bmw", "audi", "honda", "hyundai", "thaco", "ô tô điện"],
-    "thegioi": ["thế giới", "quốc tế", "mỹ", "trung quốc", "nhật bản", "hàn quốc", "châu âu", "mỹ latin"],
-    "doisong": ["đời sống", "gia đình", "tình yêu", "kết hôn", "nuôi dạy con", "ăn uống", "ẩm thực", "làm đẹp"],
-    "giai-tri": ["giải trí", "điện ảnh", "âm nhạc", "ca sĩ", "diễn viên", "phim", "trực tuyến", "kpop", "vpop"],
-    "am-nhac": ["âm nhạc", "nhạc trẻ", "nhạc vào", "concert", "âm nhạc điện tử"],
-    "phap-luat": ["pháp luật", "tội phạm", "hình sự", "hành chính", "tai nạn", "bảo vệ quyền"],
-  };
-  const LABEL_TO_SLUG = {};
-  for (const [slug, terms] of Object.entries(SLUG_MAP)) {
-    const labelKey = terms[0].replace(/\s+/g, "").toLowerCase();
-    if (labelKey) LABEL_TO_SLUG[labelKey] = slug;
-  }
-  let terms = SLUG_MAP[q];
-  if (!terms) {
-    const qNoSpace = q.replace(/\s+/g, "").toLowerCase();
-    const slug = LABEL_TO_SLUG[qNoSpace];
-    if (slug) terms = SLUG_MAP[slug];
-  }
-  if (!terms) {
-    if (q.includes("-")) { terms = q.split("-").filter((t) => t.length > 1); }
-    else { terms = [q]; }
-  }
-  if (!terms || terms.length === 0) return [];
-const matched = pool.filter((it) => {
-	    const titleLower = it.title.toLowerCase();
-	    const descLower = (it.description || "").toLowerCase();
-	    const text = titleLower + " " + descLower;
-	    return terms.some((term) => {
-	      // Terms with leading/trailing spaces use word-boundary regex
-	      // that handles Vietnamese diacritics (NOT just \w/\b which
-	      // breaks on non-ASCII letters)
-	      if (term.startsWith(" ") || term.endsWith(" ")) {
-	        const word = term.trim().replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-	        // Match only at whitespace/punctuation/string boundaries
-	        const re = new RegExp(`(^|[\\s.,!?;:()\"'\\[\\]{}<>/\\\\])${word}($|[\\s.,!?;:()\"'\\[\\]{}<>/\\\\-])`, 'i');
-	        return re.test(text);
-	      }
-	      return titleLower.includes(term) || descLower.includes(term);
-	    });
-	  });
+  const matched = pool.filter((it) => it.title.toLowerCase().includes(q));
   return matched.slice(0, limit);
 }
 
+/** Fetch and extract article content for summarization */
 async function fetchArticleContent(url) {
   try {
     const resp = await fetch(url, {
@@ -493,6 +240,8 @@ async function fetchArticleContent(url) {
       signal: AbortSignal.timeout(8000),
     });
     const html = await resp.text();
+
+    // Extract text content (simple extraction)
     let text = html
       .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
       .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "")
@@ -501,56 +250,82 @@ async function fetchArticleContent(url) {
       .replace(/<footer[^>]*>[\s\S]*?<\/footer>/gi, "")
       .replace(/<[^>]+>/g, " ")
       .replace(/&[a-z]+;/g, " ")
-      .replace(/\s+/g, " ").trim();
-    return text.slice(0, 4000);
+      .replace(/\s+/g, " ")
+      .trim();
+
+    return text.slice(0, 4000); // Return first 4000 chars
   } catch (e) {
     console.warn(`[Article] Failed to fetch ${url}: ${e}`);
     return null;
   }
 }
 
+/** Vietnamese time phrasing: 10 AM -> "10h trưa", 6 PM+ -> "6h tối". */
 function formatVietnameseTime(now) {
   let h = now.getHours();
   const m = now.getMinutes();
   let part;
   if (h >= 0 && h < 5) part = "đêm";
   else if (h < 10) part = "sáng";
-  else if (h < 13) part = "trưa";
+  else if (h < 13) part = "trưa"; // 10h, 11h, 12h -> trưa
   else if (h < 18) part = "chiều";
-  else part = "tối";
-  const hh = h === 0 ? 12 : h;
+  else part = "tối"; // 18h trở đi -> tối
+  const hh = h === 0 ? 12 : h; // midnight shown as 12h đêm
   if (m === 0) return `${hh}h ${part}`;
   return `${hh}h${m < 10 ? "0" : ""}${m} ${part}`;
 }
 
-// Upload thumbnails to sidecar service (no Space rebuild)
-async function uploadToSidecar(path: string, buf: Uint8Array) {
-  const sidecarUrl = Bun.env.SIDECAR_URL || "http://localhost:7861";
-  const base64 = Buffer.from(buf).toString("base64");
-  
+
+// Upload a small file to this Space's Hub repo (persists across restarts).
+// Uses the Hub REST API: preupload -> PUT bytes -> commit.
+async function uploadToHub(path, buf) {
+  const token = Bun.env.HF_TOKEN;
+  if (!token) throw new Error("no HF_TOKEN");
+  const base = `https://huggingface.co/api/spaces/${REPO_ID}`;
+  // 1) preupload: learn how to upload this path
+  let uploadUrl, uploadHeaders = {}, sha, oid, size;
   try {
-    const resp = await fetch(`${sidecarUrl}/upload`, {
+    const pre = await fetch(`${base}/preupload/main`, {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ path, content: base64 }),
+      headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+      body: JSON.stringify({ files: [{ path, size: buf.length }] }),
     });
-    if (!resp.ok) {
-      const txt = await resp.text();
-      console.warn(`[sidecar] upload failed (${resp.status}): ${txt}`);
-      return false;
-    }
-    const data = await resp.json();
-    console.log(`[sidecar] queued ${path} for dataset upload`);
-    return true;
-  } catch (err) {
-    console.warn(`[sidecar] error: ${err}`);
-    return false;
+    if (!pre.ok) throw new Error("preupload " + pre.status);
+    const preJson = await pre.json();
+    const fileInfo = preJson.files?.[path] ?? preJson.files?.[0];
+    const action = fileInfo?.action;
+    if (action?.uploadUrl) { uploadUrl = action.uploadUrl; uploadHeaders = action.headers ?? {}; }
+    sha = action?.sha256 ?? fileInfo?.sha256;
+  } catch (e) { console.warn("[uploadToHub] preupload:", e); }
+  // 2) PUT the bytes
+  if (uploadUrl) {
+    try {
+      const up = await fetch(uploadUrl, {
+        method: "PUT",
+        headers: { ...uploadHeaders, "Content-Type": "application/octet-stream" },
+        body: buf,
+      });
+      if (!up.ok) throw new Error("upload " + up.status);
+    } catch (e) { console.warn("[uploadToHub] put:", e); throw e; }
   }
-}
-
-async function uploadToHub(path: string, buf: Uint8Array) {
-  // Use sidecar service for dataset upload (no Space rebuild)
-  return uploadToSidecar(path, buf);
+  // 3) commit
+  const header = { key: "header", value: { summary: `avatar thumbnail ${path}`, description: "" } };
+  const op = {
+    key: "operation",
+    value: {
+      operation: "addOrUpdate",
+      path,
+      ...(sha ? { sha256: sha, size: buf.length } : {}),
+    },
+  };
+  const ndjson = JSON.stringify(header) + "\n" + JSON.stringify(op) + "\n";
+  const cm = await fetch(`${base}/commit/main`, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/x-ndjson" },
+    body: ndjson,
+  });
+  if (!cm.ok) throw new Error("commit " + cm.status);
+  return true;
 }
 
 const server = Bun.serve({
@@ -564,6 +339,8 @@ const server = Bun.serve({
         return Response.json({ items: pool.slice(0, 15) });
       },
     },
+    // Lazy-load endpoint: returns the next page of cached news.
+    // ?offset=10&limit=10  → items 10..19 from the cached pool.
     "/api/news/more": {
       GET: async (req) => {
         const url = new URL(req.url);
@@ -580,6 +357,7 @@ const server = Bun.serve({
         });
       },
     },
+    // Filter the cached news by a keyword (newest/top matches first).
     "/api/news/filter": {
       GET: async (req) => {
         const url = new URL(req.url);
@@ -589,22 +367,18 @@ const server = Bun.serve({
         return Response.json({ query: q, items });
       },
     },
-    "/news/summary": {
+    "/api/news/summary": {
       GET: async (req) => {
         const url = new URL(req.url);
         const articleUrl = url.searchParams.get("url");
         if (!articleUrl) return Response.json({ error: "Missing ?url=" }, { status: 400 });
+
         const content = await fetchArticleContent(articleUrl);
         if (!content) return Response.json({ error: "Could not fetch article" }, { status: 502 });
+
         return Response.json({ content, url: articleUrl });
       },
     },
-    "/api/topics/trending": {
-      GET: async () => {
-        const topics = await getTrendingTopics();
-        return Response.json({ topics });
-      },
-    },
     "/api/summarize": {
       POST: async (req) => {
         try {
@@ -616,33 +390,70 @@ const server = Bun.serve({
             const bullets = text.split(/\n\n+/).map((s) => s.trim()).filter(Boolean).slice(0, 6);
             return Response.json({ title: text.slice(0, 80), body: bullets.map((b) => `• ${b}`).join("\n"), fallback: true });
           }
+          // ── Step 1: clean the chat transcript ──────────────────────────────
           const cleanText = text
             .split(/\n+/)
             .map((line) => line.replace(/^\s*(người dùng|user|avatar|bạn|trợ lí|trợ lý|assistant)\s*[:\-]\s*/i, "").trim())
-            .filter(Boolean).join("\n");
-          const SYSTEM_PROMPT = "Bạn là một BIÊN TẬP VIÊN báo chí tiếng Việt. VIẾT LẠI nội dung thành MỘT BÀI HOÀN CHỈNH bằng NGÔN TỪ CỦA BẠN.\n" +
-            "QUY TẮC:\n1. KHÔNG sao chép nguyên văn. Diễn đạt lại (paraphrase), tóm gọn, tự nhiên.\n" +
-            "2. KHÔNG giữ định dạng chat 'Người dùng:'/'Avatar:'.\n3. Dòng đầu là TIÊU ĐỀ (dưới 90 ký tự).\n" +
-            "4. Tiếp theo: 1 mở đầu, 3-4 đoạn thân bài, 1 kết luận.\n5. Tiếng Việt chuẩn, KHÔNG liên kết, KHÔNG đánh số đầu dòng.\n6. Định dạng: TIÊU ĐỀ: <tiêu đề>\n\n<nội dung>";
+            .filter(Boolean)
+            .join("\n");
+
+          const SYSTEM_PROMPT =
+            "Bạn là một BIÊN TẬP VIÊN báo chí tiếng Việt. VIẾT LẠI nội dung thành MỘT BÀI HOÀN CHỈNH bằng NGÔN TỪ CỦA BẠN.\n" +
+            "QUY TẮC:\n" +
+            "1. KHÔNG sao chép nguyên văn. Diễn đạt lại (paraphrase), tóm gọn, tự nhiên.\n" +
+            "2. KHÔNG giữ định dạng chat 'Người dùng:'/'Avatar:'.\n" +
+            "3. Dòng đầu là TIÊU ĐỀ (dưới 90 ký tự).\n" +
+            "4. Tiếp theo: 1 mở đầu, 3-4 đoạn thân bài, 1 kết luận.\n" +
+            "5. Tiếng Việt chuẩn, KHÔNG liên kết, KHÔNG đánh số đầu dòng.\n" +
+            "6. Định dạng: TIÊU ĐỀ: <tiêu đề>\n\n<nội dung>";
           const USER_PROMPT = `Nội dung cần viết lại:\n${cleanText}\n\nHãy viết bài ngay:`;
           const SUMMARY_ENDPOINT = Bun.env.SUMMARY_ENDPOINT || "";
           const MODEL = Bun.env.SUMMARY_MODEL || "Qwen/Qwen2.5-7B-Instruct";
           let out = "";
+          // ── Prefer the self-hosted summarizer Space (reliable, no geo-block) ──
           if (SUMMARY_ENDPOINT) {
             try {
-              const sresp = await fetch(SUMMARY_ENDPOINT, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }), signal: AbortSignal.timeout(90000) });
-              if (sresp.ok) { const sdata = await sresp.json(); if (sdata && sdata.body) out = (sdata.body || "").trim(); }
+              const sresp = await fetch(SUMMARY_ENDPOINT, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ text }),
+                signal: AbortSignal.timeout(90000),
+              });
+              if (sresp.ok) {
+                const sdata = await sresp.json();
+                if (sdata && sdata.body) out = (sdata.body || "").trim();
+              }
             } catch (e) { console.warn(`[summarize] endpoint failed: ${e}`); }
           }
+          // ── Fall back to the HF router (OpenAI-compatible) ──
           if (!out) {
             try {
-              const rresp = await fetch("https://router.huggingface.co/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" }, body: JSON.stringify({ model: MODEL, messages: [{ role: "system", content: SYSTEM_PROMPT }, { role: "user", content: USER_PROMPT }], max_tokens: 800, temperature: 0.8, top_p: 0.9 }), signal: AbortSignal.timeout(45000) });
+              const rresp = await fetch("https://router.huggingface.co/v1/chat/completions", {
+                method: "POST",
+                headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+                body: JSON.stringify({
+                  model: MODEL,
+                  messages: [
+                    { role: "system", content: SYSTEM_PROMPT },
+                    { role: "user", content: USER_PROMPT },
+                  ],
+                  max_tokens: 800,
+                  temperature: 0.8,
+                  top_p: 0.9,
+                }),
+                signal: AbortSignal.timeout(45000),
+              });
               if (rresp.ok) { const rdata = await rresp.json(); out = (rdata?.choices?.[0]?.message?.content || "").trim(); }
             } catch (e) { console.warn(`[summarize] router failed: ${e}`); }
           }
           if (!out && Bun.env.SUMMARY_MODEL_LEGACY) {
             try {
-              const lresp = await fetch(`https://api-inference.huggingface.co/models/${Bun.env.SUMMARY_MODEL_LEGACY}`, { method: "POST", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" }, body: JSON.stringify({ inputs: `${SYSTEM_PROMPT}\n\n${USER_PROMPT}`, parameters: { max_new_tokens: 700, return_full_text: false, temperature: 0.8, do_sample: true } }), signal: AbortSignal.timeout(45000) });
+              const lresp = await fetch(`https://api-inference.huggingface.co/models/${Bun.env.SUMMARY_MODEL_LEGACY}`, {
+                method: "POST",
+                headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+                body: JSON.stringify({ inputs: `${SYSTEM_PROMPT}\n\n${USER_PROMPT}`, parameters: { max_new_tokens: 700, return_full_text: false, temperature: 0.8, do_sample: true } }),
+                signal: AbortSignal.timeout(45000),
+              });
               if (lresp.ok) { const ldata = await lresp.json(); out = (Array.isArray(ldata) ? (ldata[0]?.generated_text || "") : (ldata.generated_text || "")).trim(); }
             } catch (e) { console.warn(`[summarize] legacy failed: ${e}`); }
           }
@@ -653,9 +464,16 @@ const server = Bun.serve({
             if (!title) title = bodyText.slice(0, 80);
             return Response.json({ title, body: bodyText || out });
           }
+          // ── No-model fallback: light paraphrase (NEVER verbatim copy) ──
+          // Re-flow the chat lines into a short prose summary with a title,
+          // instead of echoing the raw transcript.
           const lines = cleanText.split(/\n+/).map((s) => s.trim()).filter(Boolean);
           const titleFb = lines[0] ? (lines[0].length > 80 ? lines[0].slice(0, 77) + "..." : lines[0]) : "Tóm tắt cuộc trò chuyện";
-          const bodyFb = lines.map((l) => l.charAt(0).toUpperCase() + l.slice(1)).join(" ").replace(/\s+/g, " ").trim();
+          const bodyFb = lines
+            .map((l) => l.charAt(0).toUpperCase() + l.slice(1))
+            .join(" ")
+            .replace(/\s+/g, " ")
+            .trim();
           return Response.json({ title: titleFb, body: bodyFb || cleanText, fallback: true });
         } catch (e) {
           console.warn(`[summarize] ${e}`);
@@ -663,46 +481,10 @@ const server = Bun.serve({
         }
       },
     },
-    "/api/debug/avatars": {
-      GET: async () => {
-        const files = await listAllAvatarFiles();
-        const avatarsDir = join(process.cwd(), "public/avatars");
-        const avatars = await listAvatars();
-        const thumbStatus = {};
-        for (const name of avatars) { thumbStatus[name] = await avatarHasThumbnail(name); }
-        return Response.json({ cwd: process.cwd(), avatarsDir, files, count: files.length, avatars, thumbStatus });
-      },
-    },
-    "/api/debug/thumbnail/:name": {
-      GET: async (req) => {
-        const name = req.params.name;
-        const thumbName = `${name}.thumb.png`;
-        const thumbPath = join(process.cwd(), "public/avatars", thumbName);
-        const file = Bun.file(thumbPath);
-        const exists = await file.exists();
-        const size = exists ? file.size : 0;
-        return Response.json({ name, thumbName, thumbPath, exists, size, url: `/avatars/${thumbName}` });
-      },
-    },
     "/api/avatars": {
       GET: async () => {
         const names = await listAvatars();
-        const avatars = await Promise.all(
-          names.map(async (name) => ({
-            name,
-            thumbnail: await avatarHasThumbnail(name) ? `/avatars/${name}.thumb.png` : null,
-          }))
-        );
-        return Response.json({ avatars });
-      },
-    },
-    "/api/avatars/debug": {
-      GET: async () => {
-        const allFiles = await listAllAvatarFiles();
-        const glbFiles = allFiles.filter((f) => f.endsWith(".glb"));
-        const thumbFiles = allFiles.filter((f) => f.endsWith(".thumb.png"));
-        const otherFiles = allFiles.filter((f) => !f.endsWith(".glb") && !f.endsWith(".thumb.png"));
-        return Response.json({ allFiles, glbFiles, thumbFiles, otherFiles, avatarsDir: join(process.cwd(), "public/avatars") });
+        return Response.json({ avatars: names });
       },
     },
     "/api/wiki/search": {
@@ -711,9 +493,14 @@ const server = Bun.serve({
         const q = url.searchParams.get("q");
         if (!q) return Response.json({ error: "Missing ?q=" }, { status: 400 });
         try {
-          const resp = await fetch(`https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(q)}&format=json&srlimit=5&origin=*`);
+          const resp = await fetch(
+            `https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(q)}&format=json&srlimit=5&origin=*`
+          );
           const data = await resp.json();
-          const results = (data.query?.search ?? []).map((r) => ({ title: r.title, snippet: r.snippet.replace(/<[^>]+>/g, "") }));
+          const results = (data.query?.search ?? []).map((r) => ({
+            title: r.title,
+            snippet: r.snippet.replace(/<[^>]+>/g, ""),
+          }));
           return Response.json({ results });
         } catch { return Response.json({ error: "Wikipedia unreachable." }, { status: 502 }); }
       },
@@ -724,9 +511,15 @@ const server = Bun.serve({
         const title = url.searchParams.get("title");
         if (!title) return Response.json({ error: "Missing ?title=" }, { status: 400 });
         try {
-          const resp = await fetch(`https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(title)}?origin=*`);
+          const resp = await fetch(
+            `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(title)}?origin=*`
+          );
           const data = await resp.json();
-          return Response.json({ title: data.title, extract: data.extract, url: data.content_urls?.desktop?.page });
+          return Response.json({
+            title: data.title,
+            extract: data.extract,
+            url: data.content_urls?.desktop?.page,
+          });
         } catch { return Response.json({ error: "Wikipedia unreachable." }, { status: 502 }); }
       },
     },
@@ -736,7 +529,10 @@ const server = Bun.serve({
         const q = url.searchParams.get("q");
         if (!q) return Response.json({ error: "Missing ?q=" }, { status: 400 });
         try {
-          const resp = await fetch(`https://html.duckduckgo.com/html/?q=${encodeURIComponent(q)}`, { headers: { "User-Agent": "Mozilla/5.0" } });
+          const resp = await fetch(
+            `https://html.duckduckgo.com/html/?q=${encodeURIComponent(q)}`,
+            { headers: { "User-Agent": "Mozilla/5.0" } }
+          );
           const html = await resp.text();
           const results = [];
           const linkRegex = /<a[^>]+class="result__a"[^>]*href="([^"]*)"[^>]*>([\s\S]*?)<\/a>/gi;
@@ -761,12 +557,26 @@ const server = Bun.serve({
         const targetUrl = url.searchParams.get("url");
         if (!targetUrl) return Response.json({ error: "Missing ?url=" }, { status: 400 });
         try {
-          const resp = await fetch(targetUrl, { headers: { "User-Agent": "Mozilla/5.0 (compatible; AvatarBot/1.0)" }, signal: AbortSignal.timeout(8000) });
+          const resp = await fetch(targetUrl, {
+            headers: { "User-Agent": "Mozilla/5.0 (compatible; AvatarBot/1.0)" },
+            signal: AbortSignal.timeout(8000),
+          });
           const html = await resp.text();
-          let text = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "").replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "").replace(/<nav[^>]*>[\s\S]*?<\/nav>/gi, "").replace(/<header[^>]*>[\s\S]*?<\/header>/gi, "").replace(/<footer[^>]*>[\s\S]*?<\/footer>/gi, "").replace(/<[^>]+>/g, " ").replace(/&[a-z]+;/g, " ").replace(/\s+/g, " ").trim();
+          let text = html
+            .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
+            .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "")
+            .replace(/<nav[^>]*>[\s\S]*?<\/nav>/gi, "")
+            .replace(/<header[^>]*>[\s\S]*?<\/header>/gi, "")
+            .replace(/<footer[^>]*>[\s\S]*?<\/footer>/gi, "")
+            .replace(/<[^>]+>/g, " ")
+            .replace(/&[a-z]+;/g, " ")
+            .replace(/\s+/g, " ")
+            .trim();
           const content = text.slice(0, 3000);
           return Response.json({ content, url: targetUrl });
-        } catch { return Response.json({ error: "Could not fetch page." }, { status: 502 }); }
+        } catch {
+          return Response.json({ error: "Could not fetch page." }, { status: 502 });
+        }
       },
     },
     "/api/session": {
@@ -790,80 +600,46 @@ const server = Bun.serve({
     },
     "/worklets/:name": (req) => staticFile("worklets", req.params.name),
     "/vendor/:name": (req) => staticFile("vendor", req.params.name),
-    "/src/:name": async (req) => {
-      const filePath = join(process.cwd(), "src", req.params.name);
-      const file = Bun.file(filePath);
-      const exists = await file.exists();
-      if (!exists) return new Response("Not Found", { status: 404 });
-      return new Response(file);
-    },
     "/api/avatar-thumbnail": {
       POST: async (req) => {
         try {
           const body = await req.json();
           const avatar = (body.avatar || "").toString();
           const dataUrl = (body.dataUrl || "").toString();
+          // Only allow a known .glb name + a PNG data URL.
           if (!/^[A-Za-z0-9_.\-]+\.glb$/i.test(avatar)) {
             return Response.json({ ok: false, error: "Invalid avatar name" }, { status: 400 });
           }
-          const m = dataUrl.match(/^data:image\/(png|jpeg);base64,(.+)$/);
+          const m = dataUrl.match(/^data:image\/png;base64,(.+)$/);
           if (!m) return Response.json({ ok: false, error: "Expected PNG data URL" }, { status: 400 });
           let buf;
-          try { buf = Buffer.from(m[2], "base64"); } catch { return Response.json({ ok: false, error: "Bad base64" }, { status: 400 }); }
-          if (!buf || !buf.length) return Response.json({ ok: false, error: "Empty buffer" }, { status: 400 });
+          try { buf = Buffer.from(m[1], "base64"); } catch { return Response.json({ ok: false, error: "Bad base64" }, { status: 400 }); }
           if (buf.length > 5 * 1024 * 1024) return Response.json({ ok: false, error: "Image too large" }, { status: 413 });
-          // Accept PNG (89 50 4E 47) or JPEG (FF D8 FF)
-          const isPng = buf[0] === 0x89 && buf[1] === 0x50 && buf[2] === 0x4e && buf[3] === 0x47;
-          const isJpeg = buf[0] === 0xff && buf[1] === 0xd8 && buf[2] === 0xff;
-          if (!isPng && !isJpeg) {
-            return Response.json({ ok: false, error: "Not a PNG or JPEG" }, { status: 400 });
+          if (!(buf[0] === 0x89 && buf[1] === 0x50 && buf[2] === 0x4e && buf[3] === 0x47)) {
+            return Response.json({ ok: false, error: "Not a PNG" }, { status: 400 });
           }
           const fileName = `${avatar}.thumb.png`;
-          const avatarsDir = join(process.cwd(), "public/avatars");
-          const localPath = join(avatarsDir, fileName);
-          const tmpPath = `/tmp/${fileName}`;  // Use /tmp which is always writable
-          const uint8Buf = new Uint8Array(buf.buffer, buf.byteOffset, buf.byteLength);
-
-          // ── 1. Write to /tmp (always writable) for immediate serving ──
-          try {
-            await writeFile(tmpPath, uint8Buf);
-            console.log(`[thumbnail] saved to tmp: ${tmpPath} (${buf.length} bytes)`);
-          } catch (writeErr) {
-            console.warn(`[thumbnail] tmp write failed: ${writeErr}`);
-          }
-
-          // ── 2. Upload to Hub for persistence ──
-          uploadToHub(`public/avatars/${fileName}`, buf).catch((err) => {
-            console.warn(`[thumbnail] Hub upload failed: ${err}. Thumbnail in /tmp only.`);
-          });
-
-          // ── 3. Serve from /tmp via fallback handler ──
-          const thumbUrl = `/avatars/${fileName}`;
-
-          return Response.json({ ok: true, url: thumbUrl, size: buf.length });
+          const dir = join(import.meta.dir, "public/avatars");
+          // Write locally so it serves immediately this session.
+          try { await writeFile(join(dir, fileName), buf); } catch (e) { console.warn("[thumb] local write:", e); }
+          // Persist to the Hub repo so it survives restarts.
+          try { await uploadToHub(`public/avatars/${fileName}`, buf); }
+          catch (e) { console.warn("[thumb] hub upload:", e); }
+          return Response.json({ ok: true, url: `/avatars/${fileName}` });
         } catch (e) {
-          console.error(`[thumbnail] error: ${e}`);
-          return Response.json({ ok: false, error: "Internal server error" }, { status: 500 });
+          console.warn(`[thumb] ${e}`);
+          return Response.json({ ok: false, error: "save failed" }, { status: 500 });
         }
       },
     },
-  },
-  // fallback: serve static files from public/ and /tmp/avatars
-  async fetch(req) {
-    const url = new URL(req.url);
-    // Serve avatar thumbnails from /tmp first (where they are written)
-    if (url.pathname.startsWith("/avatars/")) {
-      const tmpPath = join("/tmp", url.pathname.split("/").pop() || "");
-      const tmpFile = Bun.file(tmpPath);
-      if (await tmpFile.exists()) return new Response(tmpFile);
-    }
-    const filePath = join(process.cwd(), "public", url.pathname);
-    const file = Bun.file(filePath);
-    const exists = await file.exists();
-    if (exists) return new Response(file);
-    return new Response("Not Found", { status: 404 });
+    "/avatars/:name": (req) => staticFile("avatars", req.params.name),
   },
 });
 
-console.log(`server running on port ${PORT}`);// force rebuild Sat Jul 25 04:14:36 UTC 2026
-// flush 60s
+// Warm the news pool on boot so the first request is instant.
+void refreshNewsPool();
+
+console.log(`gemma-avatar listening on ${server.url}`);
+console.log(UPSTREAM ? `session backend: ${LOAD_BALANCER_URL ? "load balancer" : "session proxy"} (${UPSTREAM})` : "session backend: none");
+
+/* rebuild trigger */

public/avatars/lisamy1.glb

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a92c208c498aca4c7ffe48d237ce1f3098df902631c8f9ca98bab5f7c104bd3f
-size 8320540

public/avatars/scene.glb

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c88c7c12ee1e978770ed95f1e0ab7e884e2af8c5d368d0ce7c57cbef5a42a47b
-size 7490660

public/avatars/viverse_avatar_model_209370.vrm

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:75ff29129461144ed2f1d8812d61cc599d1e7694c83efbfee328f7ca2cde8cce
-size 8996552

public/avatars/vuong1.glb

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:aec85cb497aec853af78f6686b672fffe4fe2dd9bdab81bc43b39caf0d69926a
-size 6964484

public/worklets/audio-playback.js

@@ -168,4 +168,4 @@ class AudioPlaybackProcessor extends AudioWorkletProcessor {
   }
 }
 
-registerProcessor("audio-playback", AudioPlaybackProcessor);
+registerProcessor("audio-playback", AudioPlaybackProcessor);

public/worklets/mic-capture.js

@@ -156,4 +156,4 @@ class MicCaptureProcessor extends AudioWorkletProcessor {
   }
 }
 
-registerProcessor("mic-capture", MicCaptureProcessor);
+registerProcessor("mic-capture", MicCaptureProcessor);

requirements.txt

@@ -1 +0,0 @@
-huggingface_hub[hf_transfer]>=0.25.0

src/aiTopicPatch.js

@@ -1,118 +0,0 @@
-const AI_TOPIC_PATCH_VERSION = "1.0.0";
-
-function normalizeAiText(text) {
-  return (text || "")
-    .toLowerCase()
-    .replace(/\bai\b/g, " ai ")
-    .replace(/\ba\.i\b/g, " ai ")
-    .replace(/a i/g, " ai ")
-    .replace(/\bllm\b/g, " llm ")
-    .replace(/\bllms\b/g, " llms ")
-    .replace(/\bml\b/g, " ml ")
-    .replace(/\bdl\b/g, " dl ")
-    .replace(/\bgpt\b/g, " gpt ")
-    .replace(/\bgemini\b/g, " gemini ")
-    .replace(/\bqwen\b/g, " qwen ")
-    .replace(/\bclaude\b/g, " claude ")
-    .replace(/\bopenai\b/g, " openai ")
-    .replace(/\bchatgpt\b/g, " chatgpt ")
-    .replace(/\bdeep learning\b/g, " deep learning ")
-    .replace(/\bmachine learning\b/g, " machine learning ")
-    .replace(/\bgenerative ai\b/g, " generative ai ")
-    .replace(/\bgen ai\b/g, " gen ai ")
-    .replace(/\bcomputer vision\b/g, " computer vision ")
-    .replace(/\bnatural language processing\b/g, " natural language processing ")
-    .replace(/\bnlp\b/g, " nlp ")
-    .replace(/\brobotics\b/g, " robotics ")
-    .replace(/\brobot\b/g, " robot ")
-    .replace(/\bchatbot\b/g, " chatbot ")
-    .replace(/\bchat bot\b/g, " chatbot ")
-    .replace(/\btrí tuệ nhân tạo\b/g, " trí tuệ nhân tạo ")
-    .replace(/\bkhí cụ nhân tạo\b/g, " trí tuệ nhân tạo ")
-    .replace(/\bthông minh nhân tạo\b/g, " trí tuệ nhân tạo ")
-    .replace(/\bứng dụng ai\b/g, " ứng dụng ai ")
-    .replace(/\bdạy học ai\b/g, " dạy học ai ")
-    .replace(/\btạo ảnh bằng ai\b/g, " tạo ảnh bằng ai ")
-    .replace(/\btạo video bằng ai\b/g, " tạo video bằng ai ")
-    .replace(/\bchatbot ai\b/g, " chatbot ai ")
-    .replace(/\bAI\b/g, " ai ")
-    .replace(/\bLLM\b/g, " llm ")
-    .replace(/\bGPT\b/g, " gpt ")
-    .replace(/\bQwen\b/g, " qwen ")
-    .replace(/\bClaude\b/g, " claude ")
-    .replace(/\bOpenAI\b/g, " openai ")
-    .replace(/\bChatGPT\b/g, " chatgpt ")
-    .replace(/\bGemini\b/g, " gemini ")
-    .replace(/\bGenK\b/g, " genk ")
-    .replace(/\bKimi\b/g, " kimi ")
-    .replace(/\bKimi K3\b/g, " kimi k3 ")
-    .replace(/\bKimi k3\b/g, " kimi k3 ");
-}
-
-function detectAiTopic(text) {
-  const t = normalizeAiText(text);
-  const aiTerms = [
-    " trí tuệ nhân tạo ", " ai ", " artificial intelligence ", " machine learning ", " deep learning ",
-    " generative ai ", " gen ai ", " llm ", " llms ", " chatbot ", " chatgpt ", " openai ", " gpt ",
-    " gemini ", " qwen ", " claude ", " kimi ", " kimi k3 ", " nlp ", " natural language processing ",
-    " computer vision ", " robotics ", " robot ", " chatbot ai ", " ứng dụng ai ", " dạy học ai ",
-    " tạo ảnh bằng ai ", " tạo video bằng ai "
-  ];
-  return aiTerms.some((term) => t.includes(term));
-}
-
-function escapeHtml(text) {
-  return String(text || "")
-    .replace(/&/g, "&")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#039;");
-}
-
-function renderAiTopicChip() {
-  if (document.getElementById("ai-topic-inline")) return;
-  const chatMessages = document.getElementById("chat-messages");
-  if (!chatMessages) return;
-
-  const wrap = document.createElement("div");
-  wrap.className = "topic-tags";
-  wrap.id = "ai-topic-inline";
-
-  const chip = document.createElement("button");
-  chip.type = "button";
-  chip.className = "topic-chip ai-topic-chip";
-  chip.textContent = "# AI";
-  chip.title = "Mở tin tức AI / trí tuệ nhân tạo";
-  chip.addEventListener("click", () => {
-    const chatInput = document.getElementById("chat-input");
-    if (chatInput) chatInput.value = "Tin tức AI, trí tuệ nhân tạo mới nhất";
-    const btn = document.getElementById("chat-send-btn");
-    if (btn) btn.click();
-  });
-
-  wrap.appendChild(chip);
-  chatMessages.appendChild(wrap);
-  chatMessages.scrollTop = chatMessages.scrollHeight;
-}
-
-function injectAiTopicIntoSearchContext(text) {
-  const original = text || "";
-  if (!detectAiTopic(original)) return original;
-
-  const aiText = `Chủ đề AI cần ưu tiên: tin tức AI, trí tuệ nhân tạo, machine learning, deep learning, chatbot, generative AI, LLM, Kimi, Qwen, Gemini, GPT, OpenAI, Claude, ứng dụng AI, tạo ảnh bằng AI, tạo video bằng AI.`;
-  if (original.includes(aiText)) return original;
-
-  return `${original}\n\n${aiText}`;
-}
-
-window.AiTopicPatch = {
-  version: AI_TOPIC_PATCH_VERSION,
-  detectAiTopic,
-  injectAiTopicIntoSearchContext,
-  renderAiTopicChip,
-};
-
-document.addEventListener("DOMContentLoaded", () => {
-  window.AiTopicPatch.renderAiTopicChip();
-});

src/app.js

@@ -1,7 +1,6 @@
 import { S2sWsRealtimeClient } from "./s2s/s2s-ws-client.js";
 import { AvatarStage, AVATAR_MOODS, AVATAR_GESTURES } from "./avatar.js";
 import { smartNormalize, prepareForTTS } from "./viNumberFix.js";
-import { VoiceTyper } from "./voiceTyper.js";
 
 const VOICES = [
   "Aiden", "Ryan", "Dylan", "Eric",
@@ -93,34 +92,14 @@ async function getVnewsAIFeed(limit = NEWS_PAGE_SIZE) {
 /** Pull the VNEWS homepage (all categories) and flatten into a searchable list. */
 
 // ── Topic tags (chủ đề HOT thời gian thực) — click mở modal tin theo chủ đề ──
-// Fetch realtime trending topics from the backend API (extracted from today's news).
-async function getTrendingTopics() {
-  try {
-    const resp = await fetch("/api/topics/trending");
-    if (resp.ok) {
-      const data = await resp.json();
-      if (Array.isArray(data.topics) && data.topics.length > 0) {
-        return data.topics;
-      }
-    }
-  } catch (e) { console.warn("[topic] API failed:", e); }
-  return [];
-}
-
 async function openTopic(slug, label) {
   try {
     setCaption("ĐANG TẢI TIN: " + label, "live");
-    let items;
-    // AI topic -> use VNEWS AI feed for better results
-    if (slug === "ai") {
-      items = await getVnewsAIFeed(NEWS_PAGE_SIZE);
-    } else {
-      const raw = await getFilteredNews(slug);
-      items = (Array.isArray(raw) ? raw : []).map((n) => ({
-        title: n.title, link: n.link, image: n.image || "",
-        source: n.source || "Tin tức", vnews: Boolean(n.vnews),
-      }));
-    }
+    const raw = await getFilteredNews(label);
+    const items = (Array.isArray(raw) ? raw : []).map((n) => ({
+      title: n.title, link: n.link, image: n.image || "",
+      source: n.source || "Tin tức", vnews: Boolean(n.vnews),
+    }));
     showNewsPanel(items);
     const nt = document.getElementById("news-title");
     if (nt) nt.textContent = "📰 Tin: " + label;
@@ -136,32 +115,23 @@ async function openTopic(slug, label) {
 // greeting, so they are always visible. Clicking a chip opens that topic's news.
 let _topicTagsRendered = false;
 async function renderTopicTags() {
-  if (_topicTagsRendered) {
-    // Re-render existing tags (update content, re-add AI if missing)
-    const oldEl = chatMessages.querySelector("#topic-tags-inline");
-    if (oldEl) oldEl.remove();
-    _topicTagsRendered = false;
-  }
+  if (window._topicTagsRendered) return;
   let topics = [];
   try { topics = await getTrendingTopics(); } catch (e) { console.warn("[topic] getTrending:", e); }
-  if (!topics.length) return;
+  if (!topics.length) topics = TREND_KEYWORDS.map(([s,l]) => ({slug:s,label:l}));
   const wrap = document.createElement("div");
-  wrap.className = "topic-tags";
-  wrap.id = "topic-tags-inline";
+  wrap.className = "topic-tags"; wrap.id = "topic-tags-inline";
   for (const c of topics) {
     const chip = document.createElement("button");
-    chip.type = "button";
-    chip.className = "topic-chip";
-    chip.dataset.slug = c.slug;
-    chip.textContent = "#" + c.label.replace(/\s+/g, "_");
+    chip.type = "button"; chip.className = "topic-chip"; chip.dataset.slug = c.slug; chip.textContent = "#" + c.label.replace(/\s+/g, "_");
     chip.addEventListener("click", () => void openTopic(c.slug, c.label));
     wrap.appendChild(chip);
   }
-  const oldEl = chatMessages.querySelector("#topic-tags-inline");
+  const oldEl = document.getElementById("topic-tags-inline");
   if (oldEl) oldEl.remove();
-  chatMessages.appendChild(wrap);
-  chatMessages.scrollTop = chatMessages.scrollHeight;
-  _topicTagsRendered = true;
+  const msgs = document.getElementById("chat-messages");
+  if (msgs) { msgs.appendChild(wrap); msgs.scrollTop = msgs.scrollHeight; }
+  window._topicTagsRendered = true;
 }
 
 async function getVnewsHomepage() {
@@ -249,7 +219,6 @@ const chatHeader = $("#chat-header");
 const chatMessages = $("#chat-messages");
 const chatInput = $("#chat-input");
 const chatSendBtn = $("#chat-send-btn");
-const chatMicBtn = $("#chat-mic-btn");
 const chatCloseBtn = $("#chat-close-btn");
 const chatResizeHandle = $("#chat-resize-handle");
 const chatAvatarSelect = $("#chat-avatar-select");
@@ -269,11 +238,9 @@ let client = null;
 let muted = false;
 let subtitleTimer = 0;
 let textMode = false;
-let voiceTyper = null;
 let config = { lb: false, allowDirect: true };
+let avatarList = [];
 let sessionInProgress = false;
-let _lastVoiceText = "";
-let _lastVoiceSendMs = 0;
 let autoGreetingSent = false;
 let preFetchedNews = [];
 let latestNewsUrl = null;
@@ -367,9 +334,42 @@ function effectiveInstructions(newsItems) {
   const dateLine = `Hôm nay là ${dateStr}. Thời gian hiện tại là ${timeStr}.`;
   const extra = settings.instructions.trim();
   const introLine = "Tôi tên là Vương đến V.AI STUDIO.";
-  // Trending topics are now fetched from the backend API /api/topics/trending
-  // which extracts real topics from today's news. The frontend getTrendingTopics()
-  // calls this API and renders the topic chips.
+  // Trending keyword pool — which of these is "hot" is decided at runtime
+  // from today's real HOT news (getHotNews), so the topic list is time-sensitive.
+  const TREND_KEYWORDS = [
+    ["worldcup", "World Cup"], ["bongda", "Bóng đá"], ["chuyennhuong", "Chuyển nhượng"],
+    ["ai", "AI"], ["congnghe", "Công nghệ"], ["thethao", "Thể thao"], ["kinhte", "Kinh tế"],
+    ["giaitri", "Giải trí"], ["thoisu", "Thời sự"], ["giaoduc", "Giáo dục"], ["suckhoe", "Sức khỏe"],
+    ["dulich", "Du lịch"], ["oto", "Ô tô"], ["thegioi", "Thế giới"], ["amnhac", "Âm nhạc"], ["doisong", "Đời sống"],
+  ];
+  function _topicMatches(titles, slug, label) {
+    const t = titles;
+    if (t.includes(label.toLowerCase())) return true;
+    const bare = slug.replace(/[_-]/g, "");
+    if (bare.length > 2 && t.includes(bare)) return true;
+    if (slug === "ai") return /(trí tuệ nhân tạo|\bai\b)/.test(t);
+    return false;
+  }
+  // Returns today's real trending topics derived from the live HOT news feed.
+  async function getTrendingTopics() {
+    let items = [];
+    try { items = await getHotNews(); } catch (e) { console.warn("[topic] hot news:", e); }
+    const titles = items.map((i) => ((i.title || "") + " " + (i.source || ""))).join(" ").toLowerCase();
+    const found = [];
+    for (const [slug, label] of TREND_KEYWORDS) {
+      if (_topicMatches(titles, slug, label)) found.push({ slug, label });
+    }
+    // Guarantee a useful minimum even on a quiet news day.
+    if (found.length < 6) {
+      for (const [slug, label] of TREND_KEYWORDS) {
+        if (!found.find((f) => f.slug === slug)) {
+          found.push({ slug, label });
+          if (found.length >= 8) break;
+        }
+      }
+    }
+    return found.slice(0, 12);
+  }
 
   let newsInst = "";
   if (newsItems && newsItems.length > 0) {
@@ -498,6 +498,9 @@ function askAboutNews(item) {
   textMode = true;
   chatInput.focus();
   if (!client || !sessionInProgress) {
+    const url = new URL(location.href);
+    url.searchParams.set("fakemic", "1");
+    history.replaceState(null, "", url.href);
     void startTextSession(q);
   } else {
     addChatMessage("user", q);
@@ -604,7 +607,7 @@ function isFollowUp(text) {
 /** Detect an explicit AI / công nghệ request (route to GenK AI feed). */
 function isAITopic(text) {
   const t = (text || "").toLowerCase();
-  return /(\bai\b|trí tuệ nhân tạo|a\.i|a i|robot|machine learning|deep learning|chatbot|generative|gen ai|llm|gpt|qwen|kimi|chatgpt|gemini|openai|claude|tạo ảnh|tạo video|ứng dụng ai)/.test(t);
+  return /(\bai\b|trí tuệ nhân tạo|a\.i|a i|robot|machine learning|deep learning|chatbot|generative|gen ai)/.test(t);
 }
 
 /** Extract a short keyword query from a user message (Vietnamese-aware). */
@@ -695,23 +698,10 @@ function setCurrentNews(item) {
 }
 
 // ── Avatar list ─────────────────────────────────────────────────────────
-let avatarList = [];
-let avatarThumbs = {}; // name -> thumbnail URL (persisted on Space)
-
 async function fetchAvatarList() {
   try {
     const resp = await fetch("/api/avatars");
-    if (resp.ok) {
-      const data = await resp.json();
-      avatarList = (data.avatars || []).map((a) => (typeof a === "string" ? a : a.name));
-      // Store thumbnail URLs from the API response
-      avatarThumbs = {};
-      for (const a of (data.avatars || [])) {
-        if (typeof a === "object" && a.name && a.thumbnail) {
-          avatarThumbs[a.name] = a.thumbnail;
-        }
-      }
-    }
+    if (resp.ok) avatarList = (await resp.json()).avatars || [];
   } catch {}
 }
 
@@ -913,24 +903,6 @@ function addChatMessage(role, text, newsItem = null) {
     if (newsItem.link) msg.dataset.src = newsItem.link;
   }
 
-  // Detect AI keywords in assistant messages for tag display
-  let detectedAIKeywords = [];
-  if (role === "assistant" && text) {
-    const t = text.toLowerCase();
-    const AI_PATTERNS = [
-      "AI", "trí tuệ nhân tạo", "LLM", "GPT", "Qwen", "Kimi", "ChatGPT",
-      "Gemini", "OpenAI", "Claude", "machine learning", "deep learning",
-      "chatbot", "ứng dụng AI", "tạo ảnh", "tạo video", "AI tạo sinh",
-      "thông minh nhân tạo", "mô hình ngôn ngữ", "học sâu", "học máy",
-      "neural network", "mạng nơ-ron"
-    ];
-    for (const kw of AI_PATTERNS) {
-      if (t.includes(kw.toLowerCase())) {
-        detectedAIKeywords.push(kw);
-      }
-    }
-  }
-
   let displayText = text;
   if (role === "assistant" && latestNewsUrl && latestNewsSource) {
     const sourceEscaped = escapeRegex(latestNewsSource);
@@ -967,19 +939,6 @@ function addChatMessage(role, text, newsItem = null) {
     }
   }
 
-  // Render AI keyword tags under assistant messages
-  if (role === "assistant" && detectedAIKeywords.length > 0) {
-    const tagRow = document.createElement("div");
-    tagRow.style.cssText = "display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;";
-    for (const kw of detectedAIKeywords) {
-      const tag = document.createElement("span");
-      tag.textContent = "\ud83e\udd16 " + kw;
-      tag.style.cssText = "font-size:11px;background:rgba(59,130,246,0.15);color:#60a5fa;padding:2px 8px;border-radius:10px;border:1px solid rgba(59,130,246,0.3);";
-      tagRow.appendChild(tag);
-    }
-    msg.appendChild(tagRow);
-  }
-
   // Click a message to toggle multi-select (avatar + user messages) for rewrite.
   msg.addEventListener("click", () => {
     msg.classList.toggle("selected");
@@ -1006,80 +965,7 @@ function addChatMessage(role, text, newsItem = null) {
 
 function showTextChat(show) {
   textChat.hidden = !show;
-  if (chatMicBtn) chatMicBtn.hidden = !show;
-  // Remove fakemic flag so mic button can request real mic later
-  if (show) {
-    const url = new URL(location.href);
-    url.searchParams.delete("fakemic");
-    history.replaceState(null, "", url.href);
-  }
-}
-
-/** Handle Vietnamese voice recognition result: fill chat input, auto-send on "Gửi". */
-function onVoiceResult(e) {
-  if (!e || !e.transcript) return;
-  if (!chatInput) return;
-  // Ignore results when AI is speaking or session not in user-turn
-  if (!sessionInProgress) return;
-  const text = e.transcript.trim();
-  chatInput.value = text;
-  if (e.isFinal && sessionInProgress) {
-    // Auto-send trigger phrases (Vietnamese + English)
-    const triggerRe = /(?:gửi đi|gửi|send|ok|đồng ý|đồng)\s*$/i;
-    if (triggerRe.test(text)) {
-      setCaption("Đang gửi…", "live");
-      sendTextMessage();
-      // Stop voice typing after auto-send — user must click mic again to speak
-      if (voiceTyper && voiceTyper.active) {
-        voiceTyper.stop();
-      }
-    } else {
-      setCaption("Nhấp Send để gửi", "live");
-    }
-  }
-}
-
-/** Start (or restart) Vietnamese voice recognition in text chat mode. */
-function startVoiceTyping() {
-  if (!sessionInProgress || !chatInput) return false;
-  // Don't restart if already listening
-  if (voiceTyper && voiceTyper.active) return true;
-  // FIX: stop any previous VoiceTyper first — orphaned instances steal the mic
-  if (voiceTyper) {
-    voiceTyper.stop();
-    voiceTyper = null;
-  }
-  voiceTyper = new VoiceTyper({ lang: "vi-VN", continuous: true, interimResults: true, autoSubmit: false });
-  if (!voiceTyper.init()) {
-    // Browser may not support Vietnamese locale — try English as fallback
-    voiceTyper = new VoiceTyper({ lang: "en-US", continuous: true, interimResults: true, autoSubmit: false });
-    if (!voiceTyper.init()) {
-      setCaption("VOICE NOT SUPPORTED", "error");
-      voiceTyper = null;
-      return false;
-    }
-  }
-  voiceTyper.onResult = onVoiceResult;
-  voiceTyper.onError = (e) => console.warn("[voiceTyper]", e);
-  voiceTyper.onSoundStart = () => setCaption("🎤 Listening…", "live");
-  voiceTyper.onSoundEnd = () => {
-    // Keep listening — only stop when AI speaks or user clicks mic again
-    if (voiceTyper && voiceTyper.active) {
-      // Do nothing; continuous listening is intentional
-    }
-  };
-  voiceTyper.start();
-  setCaption("🎤 Listening…", "live");
-  return true;
-}
-
-/** Stop Vietnamese voice recognition and return to text input. */
-function stopVoiceTyping() {
-  if (voiceTyper && voiceTyper.active) {
-    voiceTyper.stop();
-    voiceTyper = null;
-    setCaption("Voice stopped", "live");
-  }
+  if (show) chatInput.focus();
 }
 
 function sendTextViaSession(text) {
@@ -1098,12 +984,8 @@ function sendTextMessage() {
   const text = chatInput.value.trim();
   if (!text) return;
 
-  // Dedup: ignore if this exact message was already sent recently
-  if (text === _lastVoiceText && Date.now() - _lastVoiceSendMs < 3000) return;
-  _lastVoiceText = text;
-  _lastVoiceSendMs = Date.now();
-
   addChatMessage("user", text);
+  chatInput.value = "";
 
   // New topic? re-filter the news list and reset the image sequence.
   if (client && sessionInProgress) {
@@ -1111,6 +993,9 @@ function sendTextMessage() {
   }
 
   if (!client || !sessionInProgress) {
+    const url = new URL(location.href);
+    url.searchParams.set("fakemic", "1");
+    history.replaceState(null, "", url.href);
     void startTextSession(text);
     return;
   }
@@ -1118,8 +1003,6 @@ function sendTextMessage() {
   if (!sendTextViaSession(text)) {
     setCaption("QUEUED…");
   }
-  // Voice typing stays active for continuous conversation;
-  // it will auto-stop when the AI starts speaking.
 }
 
 if (newsCloseBtn) {
@@ -1143,10 +1026,6 @@ if (chatCloseBtn) {
   chatCloseBtn.addEventListener("click", (e) => {
     e.stopPropagation();
     textMode = false;
-    if (voiceTyper) {
-      voiceTyper.stop();
-      voiceTyper = null;
-    }
     showTextChat(false);
     textModeBtn.classList.remove("active");
   });
@@ -1391,18 +1270,7 @@ function onStatus(status) {
       break;
   }
 
-  if (status === "ai-speaking") {
-    // AI is speaking — stop voice typing so mic doesn't pick up audio
-    if (voiceTyper && voiceTyper.active) {
-      voiceTyper.stop();
-    }
-    subtitles.classList.add("visible");
-  }
-
   if (status === "user-speaking") {
-    // User's turn to speak — auto-start voice typing so user can speak
-    // immediately without clicking the mic button
-    setTimeout(() => startVoiceTyping(), 400);
     subtitles.classList.remove("visible");
     showTextChat(textMode);
   }
@@ -1517,36 +1385,38 @@ async function connectSession(c) {
       setCaption("ALL SEATS TAKEN, TRY AGAIN", "error");
     } else if (code === "join-expired") {
       setCaption("SPOT EXPIRED, TAP TO RETRY", "error");
-    } else {
-      setCaption("CONNECTION FAILED, TAP TO RETRY", "error");
+    } else if (code !== "aborted") {
+      console.error(err);
+      setCaption("COULD NOT CONNECT, TAP TO RETRY", "error");
     }
+    await endSession(true);
     return null;
   }
 }
 
-async function startVoiceSession(micStream) {
+async function startVoiceSession() {
   if (sessionInProgress) return;
   sessionInProgress = true;
+
   await stage.resume();
 
-  if (!micStream) {
-    if (new URLSearchParams(location.search).has("fakemic")) {
-      const ctx = stage.audioCtx;
-      micStream = ctx.createMediaStreamDestination().stream;
-    } else {
-      try {
-        micStream = await navigator.mediaDevices.getUserMedia({
-          audio: {
-            echoCancellation: true,
-            noiseSuppression: true,
-            autoGainControl: true
-          }
-        });
-      } catch {
-        setCaption("MIC BLOCKED", "error");
-        sessionInProgress = false;
-        return;
-      }
+  let micStream;
+  if (new URLSearchParams(location.search).has("fakemic")) {
+    const ctx = stage.audioCtx;
+    micStream = ctx.createMediaStreamDestination().stream;
+  } else {
+    try {
+      micStream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          autoGainControl: true
+        }
+      });
+    } catch {
+      setCaption("MIC BLOCKED", "error");
+      sessionInProgress = false;
+      return;
     }
   }
 
@@ -1699,10 +1569,6 @@ function _attachClientEvents(c) {
     }
     _topicTagsRendered = false;
     try { void renderTopicTags(); } catch (e) { console.warn("[topic] render:", e); }
-    // FIX: auto-start voice typing after AI finishes speaking so the user can respond immediately
-    if (sessionInProgress) {
-      setTimeout(() => startVoiceTyping(), 500);
-    }
   });
 
   c.addEventListener("toolcall", (e) => {
@@ -1725,12 +1591,6 @@ async function endSession(silent = false) {
   sessionInProgress = false;
   autoGreetingSent = false;
 
-  // Stop voice recognition if active
-  if (voiceTyper) {
-    voiceTyper.stop();
-    voiceTyper = null;
-  }
-
   if (c) {
     if (c.options.micStream) {
       for (const track of c.options.micStream?.getTracks() ?? []) {
@@ -1759,8 +1619,11 @@ async function endSession(silent = false) {
 mainBtn.addEventListener("click", () => {
   if (mainAction === "start") {
     if (sessionInProgress) return;
-    // Default: always start text chat (no mic required)
-    void startTextSession();
+    if (new URLSearchParams(location.search).has("fakemic")) {
+      void startTextSession();
+    } else {
+      void startVoiceSession();
+    }
   } else if (mainAction === "join") {
     stage.resume();
     client?.join();
@@ -1784,25 +1647,6 @@ textModeBtn.addEventListener("click", () => {
 
 chatSendBtn.addEventListener("click", () => sendTextMessage());
 
-chatMicBtn.addEventListener("click", async () => {
-  if (!sessionInProgress) return;
-  // If already listening, stop
-  if (voiceTyper && voiceTyper.active) {
-    stopVoiceTyping();
-    return;
-  }
-  // Request mic access
-  const micStream = await navigator.mediaDevices.getUserMedia({
-    audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true }
-  }).catch(() => null);
-  if (!micStream) {
-    setCaption("MIC BLOCKED", "error");
-    return;
-  }
-  micStream.getTracks().forEach((t) => t.stop());
-  startVoiceTyping();
-});
-
 chatInput.addEventListener("keypress", (e) => {
   if (e.key === "Enter") {
     sendTextMessage();
@@ -1880,8 +1724,13 @@ async function boot() {
   } catch (e) { console.warn("[boot] config:", e); }
   directUrlRow.hidden = !config.allowDirect;
 
-  // Allow real mic for voice chat. Never force fakemic automatically.
-  // User can click mic button in chat to switch to voice mode.
+  // Keep using the fake microphone (no real getUserMedia) so we never hit
+  // the "MIC BLOCKED" permission prompt. Restored from the original boot().
+  try {
+    const url = new URL(location.href);
+    url.searchParams.set("fakemic", "1");
+    history.replaceState(null, "", url.href);
+  } catch (e) { console.warn("[boot] fakemic:", e); }
 
   try { await fetchAvatarList(); } catch (e) { console.warn("[boot] avatars:", e); }
   try { populateAvatarSelects(settings.avatar); } catch (e) { console.warn("[boot] populate:", e); }
@@ -1889,8 +1738,8 @@ async function boot() {
     makeDraggable(); makeResizable(); makeNewsDraggable(); makeNewsResizable(); buildVnewsPanel();
   } catch (e) { console.warn("[boot] ui:", e); }
 
-  // 4) Fill the picker (avatar cards + voice chips).
-  try { buildPicker(); } catch (e) { console.warn("[boot] buildPicker:", e); }
+  // 4) Fill the picker (avatar cards + voice chips, topics).
+  try { await buildPicker(); } catch (e) { console.warn("[boot] buildPicker:", e); }
   try { void renderTopicTags(); } catch (e) { console.warn("[boot] topics:", e); }
   try { updateAvatarThumbPreview(); } catch (e) { console.warn("[boot] thumb:", e); }
 }
@@ -2006,79 +1855,28 @@ function loadThumbs() {
 function saveThumbs(map) { localStorage.setItem(THUMB_KEY, JSON.stringify(map)); }
 function serverThumbUrl(name) {
   if (!name) return "";
-  // Don't add timestamp for server-stored thumbnails (they are immutable)
-  // Use dataset repo (no Space rebuild on upload)
-  return `https://huggingface.co/datasets/bep40/gemma-avatar-thumbnails/resolve/main/public/avatars/${name}.thumb.png`;
+  return `/avatars/${name}.thumb.png`;
 }
-// Show the avatar's representative image: prefer the server-stored thumbnail
-// (persisted on Space), fall back to freshly-captured local copy, then
-// a gradient fallback with the initial letter.
+// Show the avatar's representative image: prefer the freshly-captured local
+// copy (instant), fall back to the server-stored thumbnail (uploaded earlier).
 function updateAvatarThumbPreview() {
   if (!avatarThumbPreview) return;
-  const name = chatAvatarSelect.value || settings.avatar || "";
-  // Ensure .glb extension for server URL lookup
-  const avatarName = name.endsWith(".glb") ? name : (name ? name + ".glb" : "");
-  const label = (avatarName || "?").replace(/\.glb$/i, "").replace(/_/g, " ");
-  const initial = label.slice(0, 1).toUpperCase();
+  const name = chatAvatarSelect.value;
   const map = loadThumbs();
-
-  // Helper: show fallback letter with gradient bg
-  function showFallback() {
-    avatarThumbPreview.style.display = "none";
-    // Find or create the sibling fallback element
-    let fb = avatarThumbPreview.parentNode?.querySelector(".thumb-fallback");
-    if (!fb) {
-      fb = document.createElement("div");
-      fb.className = "thumb-fallback";
-      if (avatarThumbPreview.parentNode) {
-        avatarThumbPreview.parentNode.insertBefore(fb, avatarThumbPreview);
-      }
-    }
-    fb.textContent = initial;
-    fb.style.display = "flex";
-  }
-
-  function showImg(url) {
-    const fb = avatarThumbPreview.parentNode?.querySelector(".thumb-fallback");
-    if (fb) fb.style.display = "none";
-    avatarThumbPreview.src = url;
-    avatarThumbPreview.style.display = "";
+  const local = map[name] || "";
+  if (local) {
+    avatarThumbPreview.src = local;
     avatarThumbPreview.hidden = false;
-  }
-
-  // 1. Try server thumbnail first (persisted on Space, survives restarts)
-  if (avatarName) {
-    const srv = serverThumbUrl(avatarName);
-    avatarThumbPreview.onerror = () => {
-      // Server thumbnail failed — try local cache
-      const local = map[avatarName] || map[name] || "";
-      if (local) {
-        showImg(local);
-      } else {
-        showFallback();
-      }
-    };
-    avatarThumbPreview.onload = () => {
-      // Only show if the image actually loaded (not error, not 70-byte placeholder)
-      if (avatarThumbPreview.naturalWidth > 0 && avatarThumbPreview.naturalHeight > 0) {
-        const fb = avatarThumbPreview.parentNode?.querySelector(".thumb-fallback");
-        if (fb) fb.style.display = "none";
-        avatarThumbPreview.style.display = "";
-        avatarThumbPreview.hidden = false;
-      } else {
-        showFallback();
-      }
-    };
-    showImg(srv);
     return;
   }
-  // 2. No server thumbnail — try local cache
-  const local = map[name] || "";
-  if (local) {
-    showImg(local);
+  const srv = serverThumbUrl(name);
+  if (srv) {
+    avatarThumbPreview.onerror = () => { avatarThumbPreview.hidden = true; };
+    avatarThumbPreview.src = srv;
+    avatarThumbPreview.hidden = false;
     return;
   }
-  showFallback();
+  avatarThumbPreview.hidden = true;
 }
 if (chatAvatarSelect) chatAvatarSelect.addEventListener("change", updateAvatarThumbPreview);
 
@@ -2089,45 +1887,12 @@ const snapDownload = document.getElementById("snap-download");
 const snapSetAvatar = document.getElementById("snap-setavatar");
 let _latestSnap = null;
 if (snapBtn) {
-  // Helper: compress data URL - higher quality for avatar thumbnails
-  function compressDataUrl(dataUrl, maxBytes = 500 * 1024, maxDim = 512) {
-    return new Promise((resolve) => {
-      const img = new Image();
-      img.onload = () => {
-        const canvas = document.createElement("canvas");
-        let w = img.width, h = img.height;
-        if (w > maxDim || h > maxDim) {
-          const scale = Math.min(maxDim / w, maxDim / h);
-          w = Math.round(w * scale);
-          h = Math.round(h * scale);
-        }
-        canvas.width = w; canvas.height = h;
-        const ctx = canvas.getContext("2d");
-        // Better quality: use imageSmoothingQuality
-        ctx.imageSmoothingEnabled = true;
-        ctx.imageSmoothingQuality = "high";
-        ctx.drawImage(img, 0, 0, w, h);
-        // Start with quality 0.85 for avatars (higher visual quality)
-        let quality = 0.85;
-        let out = canvas.toDataURL("image/jpeg", quality);
-        // Allow larger files for better quality (500KB base64 ~ 365KB binary)
-        while (out.length > maxBytes * 1.37 && quality > 0.5) {
-          quality -= 0.05;
-          out = canvas.toDataURL("image/jpeg", quality);
-        }
-        resolve(out);
-      };
-      img.onerror = () => resolve(dataUrl); // fallback to original
-      img.src = dataUrl;
-    });
-  }
-
-  snapBtn.addEventListener("click", async () => {
+  snapBtn.addEventListener("click", () => {
     if (!stage.head) { setCaption("AVATAR CHUA SAN SANG", "error"); return; }
     const url = stage.capturePNG();
     if (!url) { setCaption("KHONG CHUP DUOC ANH", "error"); return; }
-    _latestSnap = await compressDataUrl(url);
-    snapPreview.src = _latestSnap;
+    _latestSnap = url;
+    snapPreview.src = url;
     if (snapDialog.showModal) snapDialog.showModal();
     else snapDialog.setAttribute("open", "");
   });
@@ -2146,45 +1911,27 @@ if (snapSetAvatar) {
     if (!_latestSnap) return;
     const key = settings.avatar || "";
     if (!key) { setCaption("CHON 1 AVATAR TRUOC", "error"); return; }
-    // Ensure the avatar name has .glb extension
-    const avatarName = key.endsWith(".glb") ? key : key + ".glb";
-    console.log("[snap] saving thumbnail for:", avatarName, "dataUrl length:", _latestSnap?.length);
     snapSetAvatar.disabled = true;
     snapSetAvatar.textContent = "⏳ Đang lưu…";
     try {
       const resp = await fetch("/api/avatar-thumbnail", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ avatar: avatarName, dataUrl: _latestSnap }),
+        body: JSON.stringify({ avatar: key, dataUrl: _latestSnap }),
       });
-      console.log("[snap] response status:", resp.status);
       const data = await resp.json().catch(() => ({}));
-      console.log("[snap] response data:", data);
       if (!resp.ok || !data.ok) throw new Error(data.error || "upload failed");
       // Cache locally too (works offline + instant preview)
       const map = loadThumbs();
-      // Prefer the server URL now that it is persisted on Space
-      if (data.url) {
-        map[avatarName] = data.url;
-        saveThumbs(map);
-        avatarThumbPreview.src = data.url;
-        avatarThumbPreview.hidden = false;
-        const fb = avatarThumbPreview.parentNode?.querySelector(".thumb-fallback");
-        if (fb) fb.style.display = "none";
-      } else {
-        map[avatarName] = _latestSnap;
-        saveThumbs(map);
-        avatarThumbPreview.src = _latestSnap;
-        avatarThumbPreview.hidden = false;
-        const fb = avatarThumbPreview.parentNode?.querySelector(".thumb-fallback");
-        if (fb) fb.style.display = "none";
-      }
-      // Force refresh all avatar previews (picker + chat select + settings select)
+      map[key] = _latestSnap;
+      saveThumbs(map);
+      // Prefer the server URL now that it is persisted.
+      if (data.url) { avatarThumbPreview.src = data.url; avatarThumbPreview.hidden = false; map[key] = data.url; saveThumbs(map); }
+      else updateAvatarThumbPreview();
       try { buildPicker(); } catch (e) { console.warn("[snap] buildPicker:", e); }
-      try { updateAvatarThumbPreview(); } catch (e) { console.warn("[snap] updateThumb:", e); }
       setCaption("ĐÃ LƯU ẢNH ĐẠI DIỆN LÊN SPACE", "live");
     } catch (e) {
-      console.warn("[snap] error:", e);
+      console.warn(e);
       setCaption("LƯU THẤT BẠI: " + (e.message || e), "error");
     } finally {
       snapSetAvatar.disabled = false;
@@ -2194,7 +1941,27 @@ if (snapSetAvatar) {
 }
 
 // ── Onboarding picker (choose character + voice BEFORE loading avatar) ──
-function buildPicker() {
+
+// Render topics in the picker (shows immediately on open)
+async function renderTopicsPicker() {
+  const box = document.getElementById("picker-topics");
+  if (!box) return;
+  let topics = [];
+  try { topics = await getTrendingTopics(); } catch {}
+  if (!topics.length) topics = TREND_KEYWORDS.map(([s,l]) => ({slug:s, label:l}));
+  box.innerHTML = "";
+  for (const c of topics) {
+    const chip = document.createElement("button");
+    chip.type = "button";
+    chip.className = "topic-chip";
+    chip.dataset.slug = c.slug;
+    chip.textContent = "#" + c.label.replace(/\s+/g, "_");
+    chip.addEventListener("click", () => void openTopic(c.slug, c.label));
+    box.appendChild(chip);
+  }
+}
+
+async function buildPicker() {
   const grid = document.getElementById("picker-avatars");
   const voices = document.getElementById("picker-voices");
   if (!grid || !voices) return;
@@ -2215,18 +1982,11 @@ function buildPicker() {
     _img.alt = label;
     _img.loading = "lazy";
     _img.addEventListener("error", () => {
-      // Try localStorage fallback before giving up
-      const local = _map[name] || "";
-      if (local && _img.src !== local) {
-        _img.src = local;
-        return;
-      }
       _img.remove();
       thumb.textContent = label.slice(0, 1).toUpperCase();
     });
     const _srv = serverThumbUrl(name);
-    // Prefer server thumbnail (persisted on Space), fall back to local cache
-    _img.src = _srv || _map[name] || "";
+    _img.src = (_srv && !_map[name]) ? _srv : (_map[name] || _srv);
     thumb.appendChild(_img);
     const span = document.createElement("span");
     span.className = "avatar-card-name";
@@ -2255,35 +2015,21 @@ function buildPicker() {
     });
     voices.appendChild(chip);
   }
-}
+  await renderTopicsPicker();
 function showPicker() {
+  await renderTopicsPicker();
   const p = document.getElementById("picker");
   if (p) p.hidden = false;
-}
 function hidePicker() {
   const p = document.getElementById("picker");
   if (p) p.hidden = true;
-}
 async function startWithSelection() {
   hidePicker();
-  setCaption("Chờ tôi một lát! Tôi sẽ đến với bạn ngay!");
+  setCaption("WAKING HER UP…");
   setMainButton("busy", "Loading…");
   loading.classList.remove("done");
   loading.classList.add("active");
   loading.textContent = "Loading avatar...";
-
-  // Show the start progress bar with the friendly message.
-  const startProgress = document.getElementById("start-progress");
-  const startProgressFill = startProgress ? startProgress.querySelector(".start-progress__fill") : null;
-  if (startProgress) startProgress.hidden = false;
-  if (startProgressFill) startProgressFill.style.width = "0%";
-
-  let progress = 0;
-  const progressInterval = setInterval(() => {
-    progress = Math.min(progress + 5, 95);
-    if (startProgressFill) startProgressFill.style.width = progress + "%";
-  }, 150);
-
   const newsPromise = (settings.avatar === "vuong.glb" || !settings.avatar) ? getHotNews().catch(() => []) : Promise.resolve([]);
   let ok = false;
   try {
@@ -2291,12 +2037,7 @@ async function startWithSelection() {
       avatarUrl: settings.avatar ? `/avatars/${settings.avatar}` : undefined,
       onprogress: (ev) => {
         if (ev.lengthComputable) {
-          const pct = Math.min(100, Math.round((ev.loaded / ev.total) * 100));
-          loading.textContent = `Loading avatar ${pct}%`;
-          if (startProgressFill) startProgressFill.style.width = pct + "%";
-          progress = pct;
-        }
-      }
+          loading.textContent = `Loading avatar ${Math.min(100, Math.round((ev.loaded / ev.total) * 100))}%`;
     });
     const timeout = new Promise((_, rej) => setTimeout(() => rej(new Error("init timeout")), 25000));
     await Promise.race([initPromise, timeout]);
@@ -2305,22 +2046,13 @@ async function startWithSelection() {
   } catch (err) {
     console.error("[startWithSelection] init failed/timeout:", err);
   } finally {
-    clearInterval(progressInterval);
-    if (startProgressFill) startProgressFill.style.width = "100%";
-    // Hide the start progress bar after a brief moment showing 100%
-    setTimeout(() => {
-      if (startProgress) startProgress.hidden = true;
-      if (startProgressFill) startProgressFill.style.width = "0%";
-    }, 500);
     try { preFetchedNews = await newsPromise; } catch { preFetchedNews = []; }
     newsSeq = preFetchedNews.slice();
     newsSeqIdx = -1;
     newsTopicQuery = "";
     loading.classList.remove("active");
     if (ok) setCaption(CAPTIONS.idle);
-    else setCaption("AVATAR KHÔNG HIỂN THỰ — THỬ CHỌN AVATAR KHÁC", "error");
+    else setCaption("AVATAR KHÔNG HIỂN THỊ — THỬ CHỌN AVATAR KHÁC", "error");
     setMainButton("start", "Start talking");
-  }
-}
 const pickerStartBtn = document.getElementById("picker-start");
 if (pickerStartBtn) pickerStartBtn.addEventListener("click", () => void startWithSelection());

src/s2s/codec.js

@@ -54,4 +54,4 @@ export function base64ToBytes(b64) {
   const out = new Uint8Array(len);
   for (let i = 0; i < len; i++) out[i] = binary.charCodeAt(i);
   return out;
-}
+}

src/s2s/s2s-ws-client.js

@@ -210,7 +210,7 @@ export class S2sWsRealtimeClient extends EventTarget {
   _queueSleep(ms) {
     return new Promise((resolve) => {
       this._queueWake = resolve;
-      this._queueTimer = setTimeout(() => { this._queueWake = null; resolve(); });
+      this._queueTimer = setTimeout(() => { this._queueWake = null; resolve(); }, ms);
     });
   }
 

src/style.css

@@ -562,6 +562,9 @@ body { background: var(--bg); color: var(--text); font-family: Inter, system-ui,
 .avatar-card-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
 .avatar-card-thumb { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #1b2230, #2a3550); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; color: #cfe9ff; border: 1px solid rgba(255,255,255,.12); }
 .avatar-card-name { font-size: 12px; line-height: 1.2; }
+.picker-voices,
+.picker-topics { display: flex; flex-wrap: wrap; gap: 8px; }
+.picker-topics { margin-top: 4px; }
 .picker-voices { display: flex; flex-wrap: wrap; gap: 8px; }
 .voice-chip { border: 1px solid rgba(255,255,255,.15); background: #0c0f17; color: #e8edf5; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 13px; }
 .voice-chip.selected { background: #22d3ee; color: #04222a; border-color: #22d3ee; font-weight: 600; }
@@ -572,54 +575,3 @@ body { background: var(--bg); color: var(--text); font-family: Inter, system-ui,
 .topic-chip { border: 1px solid rgba(34,211,238,.4); background: rgba(34,211,238,.08); color: #a5f3fc; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 12.5px; transition: background .15s, transform .1s; }
 .topic-chip:hover { background: rgba(34,211,238,.2); transform: translateY(-1px); }
 .topic-chip.active { background: #22d3ee; color: #04222a; font-weight: 600; }
-
-/* ── Start progress bar ── */
-.start-progress {
-  position: absolute;
-  bottom: 120px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 12px;
-  background: rgba(10, 11, 16, 0.85);
-  backdrop-filter: blur(6px);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  z-index: 200;
-  min-width: 280px;
-  text-align: center;
-}
-.start-progress__msg {
-  font-size: 14px;
-  font-weight: 500;
-  color: #a5f3fc;
-  line-height: 1.4;
-}
-.start-progress__bar {
-  width: 100%;
-  height: 6px;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.1);
-  overflow: hidden;
-}
-.start-progress__fill {
-  height: 100%;
-  border-radius: 3px;
-  background: linear-gradient(90deg, #22d3ee, #06b6d4);
-  transition: width 0.3s ease;
-}
-
-/* ── Avatar thumb fallback (khi chưa có server thumbnail) ── */
-.thumb-fallback {
-  width: 28px; height: 28px; border-radius: 50%;
-  display: inline-flex; align-items: center; justify-content: center;
-  font-size: 14px; font-weight: 700;
-  color: #cfe9ff; background: linear-gradient(135deg, #1b2230, #2a3550);
-  border: 1px solid rgba(255,255,255,.12);
-  vertical-align: middle;
-  margin-left: 6px;
-  flex-shrink: 0;
-}

src/voiceTyper.js

@@ -1,181 +0,0 @@
-/**
- * voiceTyper.js — Vietnamese voice recognition with auto-fill for chat input.
- *
- * Uses the browser's Web Speech API (SpeechRecognition) with vi-VN locale
- * to capture the user's spoken Vietnamese, display the transcript in the
- * chat input field, and optionally auto-submit after speech ends.
- *
- * Events emitted via callbacks:
- *   result    — { transcript, isFinal, confidence }
- *   start     — recognition started
- *   end       — recognition ended (audio stop)
- *   error     — { message, code }
- *   soundstart — microphone capture started
- *   soundend   — microphone capture ended
- *   nomatch    — no speech recognised in a segment
- */
-export class VoiceTyper {
-  /**
-   * @param {{ lang?: string, continuous?: boolean, interimResults?: boolean, autoSubmit?: boolean, silenceMs?: number }} options
-   */
-  constructor(options = {}) {
-    this.lang = options.lang || "vi-VN";
-    this.continuous = options.continuous ?? true;
-    this.interimResults = options.interimResults ?? true;
-    this.autoSubmit = options.autoSubmit ?? false;
-    this.silenceMs = options.silenceMs ?? 1200;
-    this.onResult = null;
-    this.onStart = null;
-    this.onEnd = null;
-    this.onError = null;
-    this.onSoundStart = null;
-    this.onSoundEnd = null;
-    this.onNoMatch = null;
-
-    this._recognition = null;
-    this._active = false;
-    this._sessionStartMs = 0;
-    this._silenceTimer = null;
-    this._lastResultMs = 0;
-  }
-
-  get active() {
-    return this._active;
-  }
-
-  /** Initialise the SpeechRecognition instance. Returns true if supported. */
-  init() {
-    const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
-    if (!SR) return false;
-
-    this._recognition = new SR();
-    this._recognition.lang = this.lang;
-    this._recognition.continuous = this.continuous;
-    this._recognition.interimResults = this.interimResults;
-    this._recognition.maxAlternatives = 1;
-
-    this._recognition.addEventListener("result", (e) => this._onResult(e));
-    this._recognition.addEventListener("start", () => this._onStart());
-    this._recognition.addEventListener("end", () => this._onEnd());
-    this._recognition.addEventListener("error", (e) => this._onError(e));
-    this._recognition.addEventListener("soundstart", () => this._onSoundStart());
-    this._recognition.addEventListener("soundend", () => this._onSoundEnd());
-    this._recognition.addEventListener("nomatch", () => this._onNoMatch());
-
-    return true;
-  }
-
-  /** Start listening. */
-  start() {
-    if (!this._recognition) return;
-    if (this._active) return;
-    try {
-      this._sessionStartMs = Date.now();
-      this._lastResultMs = this._sessionStartMs;
-      this._recognition.start();
-      this._active = true;
-    } catch (e) {
-      this._active = false;
-      this._emitError("start-failed", e.message);
-    }
-  }
-
-  /** Stop listening. */
-  stop() {
-    if (!this._recognition) return;
-    if (!this._active) return;
-    try {
-      this._recognition.stop();
-    } catch (_) {
-      /* already stopped */
-    }
-    this._active = false;
-    this._clearSilenceTimer();
-  }
-
-  /** Abort the current session and release resources. */
-  abort() {
-    this.stop();
-    this._recognition = null;
-  }
-
-  /* ── internals ──────────────────────────────────────────── */
-
-  _onResult(e) {
-    let transcript = "";
-    let isFinal = true;
-
-    for (let i = e.resultIndex; i < e.results.length; i++) {
-      const alt = e.results[i][0];
-      transcript += alt.transcript;
-      if (!e.results[i].isFinal) isFinal = false;
-    }
-
-    this._lastResultMs = Date.now();
-    this._clearSilenceTimer();
-
-    if (this.onResult) {
-      this.onResult({
-        transcript,
-        isFinal,
-        confidence: e.results[e.results.length - 1]?.[0]?.confidence ?? 1,
-      });
-    }
-
-    if (this.autoSubmit && isFinal) {
-      this._resetSilenceTimer();
-    }
-  }
-
-  _onStart() {
-    if (this.onStart) this.onStart();
-  }
-
-  _onEnd() {
-    this._clearSilenceTimer();
-    const wasActive = this._active;
-    this._active = false;
-    if (this.onEnd) this.onEnd();
-  }
-
-  _onError(e) {
-    this._active = false;
-    this._clearSilenceTimer();
-    if (this.onError) {
-      this.onError({ message: e.error, code: e.error });
-    }
-  }
-
-  _onSoundStart() {
-    if (this.onSoundStart) this.onSoundStart();
-  }
-
-  _onSoundEnd() {
-    if (this.onSoundEnd) this.onSoundEnd();
-  }
-
-  _onNoMatch() {
-    if (this.onNoMatch) this.onNoMatch();
-  }
-
-  _emitError(code, message) {
-    if (this.onError) this.onError({ message, code });
-  }
-
-  _resetSilenceTimer() {
-    this._clearSilenceTimer();
-    if (!this.autoSubmit || !this.onResult) return;
-    this._silenceTimer = setTimeout(() => {
-      if (this._active) {
-        this.onResult({ transcript: "", isFinal: true, confidence: 0 });
-      }
-    }, this.silenceMs);
-  }
-
-  _clearSilenceTimer() {
-    if (this._silenceTimer) {
-      clearTimeout(this._silenceTimer);
-      this._silenceTimer = null;
-    }
-  }
-}

src/withSearchContext.js

@@ -45,4 +45,4 @@ export async function withSearchContext(text) {
   }
 
   return `${context}\n\n${text}`;
-}
+}

style.css

@@ -1,613 +0,0 @@
-:root {
-  --bg: #0a0b10;
-  --bg-elev: #13151c;
-  --bg-elev-2: #1b1e29;
-  --border: rgba(255, 255, 255, 0.08);
-  --border-strong: rgba(255, 255, 255, 0.16);
-  --text: #f5f6fa;
-  --text-dim: rgba(245, 246, 250, 0.65);
-  --text-faint: rgba(245, 246, 250, 0.42);
-  --error: #ff6a75;
-  --live: #22d3ee;
-  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-  --radius-sm: 8px;
-  --radius-md: 14px;
-}
-
-* { box-sizing: border-box; }
-html, body { height: 100%; margin: 0; }
-body { background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, sans-serif; overflow: hidden; }
-#app { position: relative; height: 100dvh; }
-#stage { position: absolute; inset: 0; }
-#stage canvas { display: block; }
-[hidden] { display: none !important; }
-#loading { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); background: var(--bg); transition: opacity 0.6s ease; pointer-events: none; }
-#loading.done { opacity: 0; }
-
-#topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px; pointer-events: none; }
-#topbar > * { pointer-events: auto; }
-#identity h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
-#identity p { margin: 4px 0 0; max-width: 340px; font-size: 12px; line-height: 1.45; color: var(--text-faint); }
-#identity strong { color: var(--text-dim); font-weight: 500; }
-
-.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--text-dim); cursor: pointer; touch-action: manipulation; transition: color 0.15s ease, border-color 0.15s ease; }
-.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
-.icon-btn.active { color: var(--live); border-color: var(--border-strong); }
-.icon-btn.small { width: 28px; height: 28px; }
-
-#main-btn { min-width: 190px; height: 46px; padding: 0 26px; border: none; border-radius: 23px; background: var(--text); color: var(--bg); font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; touch-action: manipulation; transition: transform 0.12s ease, opacity 0.15s ease; }
-#main-btn:hover:not(:disabled) { transform: translateY(-1px); }
-#main-btn:disabled { opacity: 0.45; cursor: default; }
-#main-btn.live { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong); }
-
-#controls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 20px calc(22px + env(safe-area-inset-bottom)); z-index: 100; }
-#buttons { display: flex; align-items: center; gap: 10px; }
-#caption { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); transition: color 0.2s ease; }
-#caption.live { color: var(--live); }
-#caption.error { color: var(--error); }
-
-#subtitles { position: absolute; left: 50%; bottom: 118px; transform: translateX(-50%); max-width: min(640px, calc(100vw - 48px)); padding: 10px 16px; border-radius: var(--radius-md); background: rgba(10, 11, 16, 0.72); backdrop-filter: blur(6px); border: 1px solid var(--border); font-size: 15px; line-height: 1.5; text-align: center; text-wrap: balance; color: var(--text); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
-#subtitles.visible { opacity: 1; }
-
-#settings { width: min(440px, calc(100vw - 40px)); padding: 22px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-elev); color: var(--text); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32); }
-#settings::backdrop { background: rgba(5, 6, 9, 0.6); backdrop-filter: blur(2px); }
-#settings h2 { margin: 0 0 16px; font-size: 15px; font-weight: 600; }
-#settings label { display: block; margin-bottom: 14px; font-size: 12px; color: var(--text-dim); }
-#settings select, #settings textarea, #settings input { display: block; width: 100%; margin-top: 6px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev-2); color: var(--text); font-family: inherit; font-size: 13px; }
-#settings select:focus-visible, #settings textarea:focus-visible, #settings input:focus-visible { outline: 1px solid var(--text-dim); outline-offset: 1px; }
-#settings textarea { resize: vertical; }
-#settings .check-row { display: flex; align-items: center; gap: 9px; }
-#settings .check-row input { display: inline-block; width: auto; margin: 0; accent-color: var(--text); }
-.dialog-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
-.dialog-actions .primary { padding: 9px 20px; border: none; border-radius: var(--radius-sm); background: var(--text); color: var(--bg); font-weight: 600; font-size: 13px; cursor: pointer; }
-
-/* ── Draggable / Resizable Chat ───────────────────────────────────────────── */
-#text-chat {
-  position: fixed;
-  z-index: 9999;
-  top: 100px;
-  left: 20px;
-  width: min(380px, calc(100vw - 40px));
-  height: 50vh;
-  display: flex;
-  flex-direction: column;
-  background: rgba(10, 11, 16, 0.92);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  min-height: 2.5rem;
-  max-height: 80vh;
-  cursor: default;
-  resize: none;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
-  touch-action: none;
-}
-#text-chat.dragging { cursor: grabbing !important; user-select: none !important; }
-#text-chat.resizing { user-select: none !important; }
-
-/* Chat header bar — drag handle */
-#chat-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-elev);
-  cursor: grab;
-  flex-shrink: 0;
-  touch-action: none;
-}
-#text-chat.dragging #chat-header { cursor: grabbing !important; }
-#chat-title { font-size: 12px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.04em; }
-#chat-header-actions { display: flex; align-items: center; gap: 6px; pointer-events: auto; }
-#chat-avatar-select { font-size: 11px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-elev-2); color: var(--text); cursor: pointer; max-width: 100px; pointer-events: auto; }
-
-#chat-messages { flex: 1; padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
-#chat-messages::-webkit-scrollbar { width: 6px; }
-#chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-.chat-message { max-width: 85%; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; word-wrap: break-word; cursor: pointer; }
-.chat-message.user { align-self: flex-end; background: var(--live); color: var(--bg); }
-.chat-message.assistant { align-self: flex-start; background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border); }
-.chat-message.selected { outline: 2px solid var(--live); outline-offset: 1px; }
-.chat-message a { color: var(--live); }
-
-#chat-input-container { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: var(--bg-elev); flex-shrink: 0; }
-#chat-input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: inherit; font-size: 13px; }
-#chat-input:focus { outline: 1px solid var(--text-dim); outline-offset: 1px; }
-
-/* Resize handle at bottom-right corner — bigger, better contrast */
-#chat-resize-handle {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 24px;
-  height: 24px;
-  cursor: nwse-resize;
-  background: transparent;
-  z-index: 1;
-  touch-action: none;
-}
-#chat-resize-handle::after {
-  content: '';
-  position: absolute;
-  bottom: 3px;
-  right: 3px;
-  width: 14px;
-  height: 14px;
-  border-right: 2px solid var(--text-dim);
-  border-bottom: 2px solid var(--text-dim);
-  opacity: 0.4;
-  transition: opacity 0.15s;
-}
-#chat-resize-handle:hover::after { opacity: 1; }
-#text-chat.resizing #chat-resize-handle::after { opacity: 1; }
-
-/* ── News Box (draggable + resizable, with thumbnails) ─────────────────── */
-#news-panel {
-  position: fixed;
-  z-index: 9998;
-  bottom: 80px;
-  right: 20px;
-  width: min(380px, calc(100vw - 40px));
-  height: min(520px, 70vh);
-  display: flex;
-  flex-direction: column;
-  background: rgba(10, 11, 16, 0.95);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
-  resize: none;
-  touch-action: none;
-  min-width: 300px;
-  min-height: 180px;
-}
-#news-panel.dragging { cursor: grabbing !important; user-select: none !important; }
-#news-panel.resizing { user-select: none !important; }
-
-#news-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-elev);
-  flex-shrink: 0;
-  cursor: grab;
-  touch-action: none;
-}
-#news-panel.dragging #news-header { cursor: grabbing !important; }
-
-#news-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text);
-  letter-spacing: 0.02em;
-  pointer-events: none;
-}
-
-#news-list {
-  flex: 1;
-  padding: 10px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-#news-list::-webkit-scrollbar { width: 6px; }
-#news-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-
-.news-item {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 8px;
-  border-radius: var(--radius-sm);
-  background: var(--bg-elev-2);
-  border: 1px solid var(--border);
-  cursor: pointer;
-  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
-}
-.news-item:hover {
-  border-color: var(--border-strong);
-  background: var(--bg-elev);
-}
-.news-item:active { transform: scale(0.99); }
-
-.news-thumb {
-  flex-shrink: 0;
-  width: 56px;
-  height: 56px;
-  border-radius: 6px;
-  overflow: hidden;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  display: grid;
-  place-items: center;
-}
-.news-thumb img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-.news-thumb--fallback {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text);
-  background: linear-gradient(135deg, #1f6feb55, #22d3ee44);
-  letter-spacing: 0.02em;
-}
-
-.news-body {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  overflow: hidden;
-}
-.news-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-.news-source {
-  font-size: 11px;
-  color: var(--live);
-  font-weight: 600;
-  white-space: nowrap;
-}
-.news-index {
-  font-size: 10px;
-  color: var(--text-faint);
-  font-family: var(--font-mono);
-}
-.news-title {
-  font-size: 12.5px;
-  line-height: 1.4;
-  color: var(--text);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.news-empty {
-  padding: 20px;
-  text-align: center;
-  color: var(--text-dim);
-  font-size: 13px;
-}
-
-/* Load more */
-#news-loadmore {
-  flex-shrink: 0;
-  padding: 8px 10px 10px;
-  border-top: 1px solid var(--border);
-  background: var(--bg-elev);
-  position: relative;
-}
-.news-loadmore-btn {
-  width: 100%;
-  padding: 9px 12px;
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-sm);
-  background: var(--bg-elev-2);
-  color: var(--text-dim);
-  font-family: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: color 0.15s ease, border-color 0.15s ease;
-}
-.news-loadmore-btn:hover:not(:disabled) {
-  color: var(--text);
-  border-color: var(--live);
-}
-.news-loadmore-btn:disabled { opacity: 0.6; cursor: default; }
-.news-loadmore-btn.loading::after {
-  content: "";
-  display: inline-block;
-  width: 11px;
-  height: 11px;
-  margin-left: 8px;
-  vertical-align: -1px;
-  border: 2px solid var(--text-faint);
-  border-top-color: var(--live);
-  border-radius: 50%;
-  animation: news-spin 0.7s linear infinite;
-}
-@keyframes news-spin { to { transform: rotate(360deg); } }
-#news-sentinel { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; pointer-events: none; }
-
-/* News resize handle (bottom-right) */
-#news-resize-handle {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 24px;
-  height: 24px;
-  cursor: nwse-resize;
-  background: transparent;
-  z-index: 2;
-  touch-action: none;
-}
-#news-resize-handle::after {
-  content: '';
-  position: absolute;
-  bottom: 3px;
-  right: 3px;
-  width: 14px;
-  height: 14px;
-  border-right: 2px solid var(--text-dim);
-  border-bottom: 2px solid var(--text-dim);
-  opacity: 0.4;
-  transition: opacity 0.15s;
-}
-#news-resize-handle:hover::after { opacity: 1; }
-#news-panel.resizing #news-resize-handle::after { opacity: 1; }
-
-/* ── News image card inside chat ──────────────────────────────────────── */
-.news-card {
-  margin-top: 8px;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  padding: 8px;
-  border-radius: var(--radius-sm);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  cursor: pointer;
-  transition: border-color 0.15s ease;
-  max-width: 100%;
-}
-.news-card:hover { border-color: var(--border-strong); }
-.news-card-img {
-  flex-shrink: 0;
-  width: 64px;
-  height: 64px;
-  border-radius: 6px;
-  object-fit: cover;
-  display: block;
-  background: var(--bg-elev);
-  border: 1px solid var(--border);
-}
-.news-card-img--fallback {
-  display: grid;
-  place-items: center;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text);
-  background: linear-gradient(135deg, #1f6feb55, #22d3ee44);
-}
-.news-card-meta {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-.news-card-source {
-  font-size: 10.5px;
-  font-weight: 600;
-  color: var(--live);
-  white-space: nowrap;
-}
-.news-card-title {
-  font-size: 12px;
-  line-height: 1.4;
-  color: var(--text);
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-/* ── VNEWS control panel ─────────────────────────────────────────────── */
-#vnews-panel {
-  position: fixed;
-  z-index: 9997;
-  top: 80px;
-  right: 20px;
-  width: 280px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 14px;
-  background: rgba(10, 11, 16, 0.95);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-md);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
-  touch-action: none;
-}
-#vnews-panel.dragging { user-select: none !important; }
-#vnews-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: grab;
-  touch-action: none;
-}
-#vnews-title {
-  font-size: 14px;
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  color: var(--live);
-}
-.vnews-btn {
-  width: 100%;
-  padding: 10px 12px;
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-sm);
-  background: var(--bg-elev-2);
-  color: var(--text);
-  font-family: inherit;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: border-color 0.15s ease, background 0.15s ease;
-}
-.vnews-btn:hover:not(:disabled) {
-  border-color: var(--live);
-  background: var(--bg-elev);
-}
-.vnews-btn:disabled { opacity: 0.5; cursor: default; }
-#vnews-status {
-  font-size: 11.5px;
-  color: var(--text-dim);
-  line-height: 1.4;
-}
-#vnews-toggle-btn { margin-left: 8px; }
-
-@media (max-width: 600px) {
-  #identity p { display: none; }
-  #subtitles { bottom: 128px; font-size: 14px; }
-  #text-chat { top: 60px; left: 10px; width: calc(100vw - 20px); height: 40vh; }
-  #news-panel {
-    bottom: 70px;
-    right: 10px;
-    left: 10px;
-    width: calc(100vw - 20px);
-    height: 60vh;
-    min-width: 0;
-  }
-  #vnews-panel {
-    top: 60px;
-    right: 10px;
-    left: 10px;
-    width: calc(100vw - 20px);
-  }
-}
-
-/* ── News card action buttons (Nguồn / Hỏi) ───────────────────────────── */
-.news-actions {
-  display: flex;
-  gap: 6px;
-  margin-top: 6px;
-  flex: 1 1 100%;
-  width: 100%;
-}
-.news-act-btn {
-  flex: 1 1 0;
-  min-width: 0;
-  padding: 5px 6px;
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-sm);
-  background: var(--bg-elev-2);
-  color: var(--text-dim);
-  font-family: inherit;
-  font-size: 11px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.news-act-btn:hover {
-  color: var(--text);
-  border-color: var(--live);
-  background: var(--bg-elev);
-}
-.news-act-btn--ask {
-  color: var(--live);
-}
-.news-act-btn--ask:hover {
-  background: var(--bg-elev);
-}
-
-/* News item description (mô tả ngắn dưới tiêu đề) */
-.news-desc {
-  font-size: 11.5px;
-  line-height: 1.4;
-  color: var(--text-dim);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-/* ── Snap (capture PNG) ──────────────────────────────── */
-#snap-preview { max-width: 100%; border-radius: 8px; display: block; margin: 0 auto; }
-#snap-dialog img { background: #0b0e14; }
-#snap-dialog .dialog-actions { flex-wrap: wrap; }
-.avatar-thumb-preview {
-  width: 28px; height: 28px; border-radius: 50%;
-  object-fit: cover; vertical-align: middle; margin-left: 6px;
-  border: 1px solid rgba(255,255,255,.3);
-}
-
-/* ── Onboarding picker (choose character + voice BEFORE loading) ── */
-#loading { display: none; }
-#loading.active { display: grid; }
-.picker { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(8,11,18,.82); backdrop-filter: blur(6px); padding: 20px; overflow: auto; }
-.picker[hidden] { display: none; }
-.picker-card { width: min(720px, 96vw); max-height: 92vh; overflow: auto; background: #11151f; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 22px 24px; color: #e8edf5; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
-.picker-card h1 { font-size: 20px; margin: 0 0 4px; }
-.picker-sub { color: #9aa6b8; margin: 0 0 14px; font-size: 13px; }
-.picker-card h2 { font-size: 14px; margin: 18px 0 10px; color: #cdd6e4; }
-.picker-avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
-.avatar-card { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #0c0f17; border: 2px solid transparent; border-radius: 12px; padding: 10px 8px; cursor: pointer; color: #e8edf5; text-align: center; transition: border-color .15s, transform .1s; }
-.avatar-card:hover { transform: translateY(-2px); }
-.avatar-card.selected { border-color: #22d3ee; }
-.avatar-card-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
-.avatar-card-thumb { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #1b2230, #2a3550); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; color: #cfe9ff; border: 1px solid rgba(255,255,255,.12); }
-.avatar-card-name { font-size: 12px; line-height: 1.2; }
-.picker-voices { display: flex; flex-wrap: wrap; gap: 8px; }
-.voice-chip { border: 1px solid rgba(255,255,255,.15); background: #0c0f17; color: #e8edf5; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 13px; }
-.voice-chip.selected { background: #22d3ee; color: #04222a; border-color: #22d3ee; font-weight: 600; }
-.picker-start { margin-top: 20px; width: 100%; font-size: 15px; padding: 12px; }
-
-/* ── Topic tags (chủ đề HOT, clickable) ── */
-.topic-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-top: 1px solid rgba(255,255,255,.06); }
-.topic-chip { border: 1px solid rgba(34,211,238,.4); background: rgba(34,211,238,.08); color: #a5f3fc; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 12.5px; transition: background .15s, transform .1s; }
-.topic-chip:hover { background: rgba(34,211,238,.2); transform: translateY(-1px); }
-.topic-chip.active { background: #22d3ee; color: #04222a; font-weight: 600; }
-
-/* ── Start progress bar ── */
-.start-progress {
-  position: absolute;
-  bottom: 120px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 12px;
-  background: rgba(10, 11, 16, 0.85);
-  backdrop-filter: blur(6px);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  z-index: 200;
-  min-width: 280px;
-  text-align: center;
-}
-.start-progress__msg {
-  font-size: 14px;
-  font-weight: 500;
-  color: #a5f3fc;
-  line-height: 1.4;
-}
-.start-progress__bar {
-  width: 100%;
-  height: 6px;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.1);
-  overflow: hidden;
-}
-.start-progress__fill {
-  height: 100%;
-  border-radius: 3px;
-  background: linear-gradient(90deg, #22d3ee, #06b6d4);
-  transition: width 0.3s ease;
-}

tsconfig.json

@@ -27,4 +27,4 @@
     "noUnusedParameters": false,
     "noPropertyAccessFromIndexSignature": false
   }
-}
+}

upload_service.py

@@ -1,123 +0,0 @@
-#!/usr/bin/env python3
-"""
-Sidecar upload service - receives thumbnail batches via HTTP and uploads
-to dataset repo using HF API (works with Xet, no Space rebuild).
-Run alongside Bun server.
-"""
-import os
-import base64
-import json
-import threading
-import time
-from http.server import HTTPServer, BaseHTTPRequestHandler
-from huggingface_hub import HfApi, CommitOperationAdd
-
-# Config
-DATASET_REPO = os.environ.get("DATASET_REPO", "bep40/gemma-avatar-thumbnails")
-HF_TOKEN = os.environ.get("HF_TOKEN")
-UPLOAD_PORT = int(os.environ.get("UPLOAD_PORT", "7861"))
-
-if not HF_TOKEN:
-    print("ERROR: HF_TOKEN required")
-    exit(1)
-
-api = HfApi(token=HF_TOKEN)
-
-# In-memory queue
-upload_queue = []
-queue_lock = threading.Lock()
-flush_interval = 30  # seconds
-last_flush = 0
-
-def flush_queue():
-    """Upload queued thumbnails to dataset repo using HF API"""
-    global last_flush
-    with queue_lock:
-        if not upload_queue:
-            return
-        items = upload_queue[:]
-        upload_queue.clear()
-    
-    print(f"[upload_service] Flushing {len(items)} thumbnails to {DATASET_REPO}...")
-    
-    try:
-        operations = []
-        for item in items:
-            operations.append(CommitOperationAdd(
-                path_in_repo=item["path"],
-                path_or_fileobj=item["data"]
-            ))
-        
-        # Use HF API commit - this works with Xet
-        api.create_commit(
-            repo_id=DATASET_REPO,
-            repo_type="dataset",
-            operations=operations,
-            commit_message=f"avatar thumbnails: {len(items)} files",
-            commit_description=f"Batch upload {len(items)} avatar thumbnails"
-        )
-        print(f"[upload_service] Successfully uploaded {len(items)} thumbnails")
-    except Exception as e:
-        print(f"[upload_service] Upload failed: {e}")
-        # Re-queue on failure
-        with queue_lock:
-            upload_queue[:0] = items
-    finally:
-        last_flush = time.time()
-
-class UploadHandler(BaseHTTPRequestHandler):
-    def do_POST(self):
-        if self.path == "/upload":
-            content_length = int(self.headers.get('Content-Length', 0))
-            body = self.rfile.read(content_length)
-            try:
-                data = json.loads(body)
-                path = data.get("path", "")
-                b64_content = data.get("content", "")
-                if not path or not b64_content:
-                    self.send_response(400)
-                    self.end_headers()
-                    self.wfile.write(b'{"error": "missing path or content"}')
-                    return
-                
-                # Decode base64 and queue
-                binary_data = base64.b64decode(b64_content)
-                with queue_lock:
-                    upload_queue.append({"path": path, "data": binary_data})
-                
-                self.send_response(200)
-                self.send_header("Content-Type", "application/json")
-                self.end_headers()
-                self.wfile.write(b'{"ok": true, "queued": true}')
-            except Exception as e:
-                self.send_response(500)
-                self.end_headers()
-                self.wfile.write(f'{{"error": "{e}"}}'.encode())
-        else:
-            self.send_response(404)
-            self.end_headers()
-    
-    def log_message(self, format, *args):
-        # Suppress default log
-        pass
-
-def flush_loop():
-    """Background thread to flush queue periodically"""
-    global last_flush
-    while True:
-        time.sleep(5)
-        with queue_lock:
-            qsize = len(upload_queue)
-        print(f"[upload_service] flush_loop check: queue size={qsize}, last_flush={time.time()-last_flush:.1f}s ago, interval={flush_interval}s")
-        if time.time() - last_flush >= flush_interval:
-            flush_queue()
-
-if __name__ == "__main__":
-    # Start flush thread
-    threading.Thread(target=flush_loop, daemon=True).start()
-    
-    server = HTTPServer(("0.0.0.0", UPLOAD_PORT), UploadHandler)
-    print(f"[upload_service] Listening on 0.0.0.0:{UPLOAD_PORT}")
-    print(f"[upload_service] Dataset repo: {DATASET_REPO}")
-    print(f"[upload_service] HF_TOKEN present: {bool(HF_TOKEN)}")
-    server.serve_forever()