vai-market

Running

App Files Files Community

bep40 commited on Aug 6

Commit

9b44afa

verified ·

1 Parent(s): edce012

restore to c1013cc7ebfdc93cbb55645441528a84d871a052: 100% restore of target commit tree

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.build_trigger +1 -0
.cache_bust +1 -0
.dockerignore +7 -0
.gitattributes +0 -3
.gitignore +34 -0
CLAUDE.md +111 -0
Dockerfile +14 -0
HOT_TAGS_V3_TRIGGER.txt +3 -0
README.md +94 -1
REBUILD.md +1 -0
TRIGGER_REBUILD.txt +1 -0
build-trigger +1 -0
index.html +529 -0
index.ts +910 -0
index.ts.patched +684 -0
package.json +21 -0
public/avatars/Ella.glb +3 -0
public/avatars/Lisa.glb +3 -0
public/avatars/avatarsdk.glb +3 -0
public/avatars/avaturn.glb +3 -0
public/avatars/bruce_avaturn.glb +3 -0
public/avatars/brunette-t.glb +3 -0
public/avatars/brunette.glb +3 -0
public/avatars/david.glb +3 -0
public/avatars/fabio_avaturn.glb +3 -0
public/avatars/grit-b6c6c4.glb +3 -0
public/avatars/julia.glb +3 -0
public/avatars/lisamy.glb +3 -0
public/avatars/lisamy.jpg +0 -0
public/avatars/model (6).glb +3 -0
public/avatars/mpfb.glb +3 -0
public/avatars/ready_player_me_1.glb +3 -0
public/avatars/ready_player_me_2.glb +3 -0
public/avatars/vuong.glb +3 -0
public/avatars/vuong.jpg +0 -0
public/avatars/vuong2.glb +3 -0
public/vendor/headaudio.min.mjs +1 -0
public/vendor/headworklet.min.mjs +1 -0
public/vendor/model-en-mixed.bin +3 -0
public/worklets/audio-playback.js +179 -0
public/worklets/mic-capture.js +159 -0
san-pham/mi593es-malloca-bep-tu-3-vung-nau-59cm/index.html +56 -0
san-pham/mi593es-malloca-bep-tu-3-vung-nau-59cm/thumb.jpg +3 -0
san-pham/mi73twes-malloca-bep-tu-2-vung-nau-73cm-ecokitchen/index.html +60 -0
san-pham/mi73twes-malloca-bep-tu-2-vung-nau-73cm-ecokitchen/thumb.jpg +0 -0
san-pham/mi7502es-malloca-bep-tu-2-vung-nau-75cm/index.html +56 -0
san-pham/mi7502es-malloca-bep-tu-2-vung-nau-75cm/thumb.jpg +3 -0
san-pham/mi803es-malloca-bep-tu-3-vung-nau-80cm/index.html +56 -0
san-pham/mi803es-malloca-bep-tu-3-vung-nau-80cm/thumb.jpg +3 -0
san-pham/mir9021es-malloca-bep-tu-ket-hop-hong-ngoai-3-vung-nau-80cm/index.html +58 -0

.build_trigger ADDED Viewed

	@@ -0,0 +1 @@


1	+ 1785805873

.cache_bust ADDED Viewed

	@@ -0,0 +1 @@


1	+ v12-deferred-avatar+lisamy-sohee+reliability

.dockerignore ADDED Viewed

	@@ -0,0 +1,7 @@

+node_modules
+.git
+.cache
+*.log
+Dockerfile
+.dockerignore
+.bun

.gitattributes CHANGED Viewed

@@ -63,6 +63,3 @@ san-pham/mi593es-malloca-bep-tu-3-vung-nau-59cm/thumb.jpg filter=lfs diff=lfs me
 public/avatars/vuong1.glb filter=lfs diff=lfs merge=lfs -text
 public/avatars/scene[[:space:]](3).glb filter=lfs diff=lfs merge=lfs -text
 public/avatars/vuong2.glb filter=lfs diff=lfs merge=lfs -text
-image[[:space:]]-[[:space:]]2026-08-05T195019.510.png filter=lfs diff=lfs merge=lfs -text
-public/avatars/vaistudio.png filter=lfs diff=lfs merge=lfs -text
-public/avatars/vaistudio_center.png filter=lfs diff=lfs merge=lfs -text

 public/avatars/vuong1.glb filter=lfs diff=lfs merge=lfs -text
 public/avatars/scene[[:space:]](3).glb filter=lfs diff=lfs merge=lfs -text
 public/avatars/vuong2.glb filter=lfs diff=lfs merge=lfs -text

.gitignore ADDED Viewed

	@@ -0,0 +1,34 @@

+# dependencies (bun install)
+node_modules
+# output
+out
+dist
+*.tgz
+# code coverage
+coverage
+*.lcov
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+# IntelliJ based IDEs
+.idea
+# Finder (MacOS) folder config
+.DS_Store

CLAUDE.md ADDED Viewed

	@@ -0,0 +1,111 @@

+---
+description: Use Bun instead of Node.js, npm, pnpm, or vite.
+globs: "*.ts, *.tsx, *.html, *.css, *.js, *.jsx, package.json"
+alwaysApply: false
+---
+Default to using Bun instead of Node.js.
+- Use `bun <file>` instead of `node <file>` or `ts-node <file>`
+- Use `bun test` instead of `jest` or `vitest`
+- Use `bun build <file.html|file.ts|file.css>` instead of `webpack` or `esbuild`
+- Use `bun install` instead of `npm install` or `yarn install` or `pnpm install`
+- Use `bun run <script>` instead of `npm run <script>` or `yarn run <script>` or `pnpm run <script>`
+- Use `bunx <package> <command>` instead of `npx <package> <command>`
+- Bun automatically loads .env, so don't use dotenv.
+## APIs
+- `Bun.serve()` supports WebSockets, HTTPS, and routes. Don't use `express`.
+- `bun:sqlite` for SQLite. Don't use `better-sqlite3`.
+- `Bun.redis` for Redis. Don't use `ioredis`.
+- `Bun.sql` for Postgres. Don't use `pg` or `postgres.js`.
+- `WebSocket` is built-in. Don't use `ws`.
+- Prefer `Bun.file` over `node:fs`'s readFile/writeFile
+- Bun.$`ls` instead of execa.
+## Testing
+Use `bun test` to run tests.
+```ts#index.test.ts
+import { test, expect } from "bun:test";
+test("hello world", () => {
+  expect(1).toBe(1);
+});
+```
+## Frontend
+Use HTML imports with `Bun.serve()`. Don't use `vite`. HTML imports fully support React, CSS, Tailwind.
+Server:
+```ts#index.ts
+import index from "./index.html"
+Bun.serve({
+  routes: {
+    "/": index,
+    "/api/users/:id": {
+      GET: (req) => {
+        return new Response(JSON.stringify({ id: req.params.id }));
+      },
+    },
+  },
+  // optional websocket support
+  websocket: {
+    open: (ws) => {
+      ws.send("Hello, world!");
+    },
+    message: (ws, message) => {
+      ws.send(message);
+    },
+    close: (ws) => {
+      // handle close
+    }
+  },
+  development: {
+    hmr: true,
+    console: true,
+  }
+})
+```
+HTML files can import .tsx, .jsx or .js files directly and Bun's bundler will transpile & bundle automatically. `<link>` tags can point to stylesheets and Bun's CSS bundler will bundle.
+```html#index.html
+<html>
+  <body>
+    <h1>Hello, world!</h1>
+    <script type="module" src="./frontend.tsx"></script>
+  </body>
+</html>
+```
+With the following `frontend.tsx`:
+```tsx#frontend.tsx
+import React from "react";
+import { createRoot } from "react-dom/client";
+// import .css files directly and it works
+import './index.css';
+const root = createRoot(document.body);
+export default function Frontend() {
+  return <h1>Hello, world!</h1>;
+}
+root.render(<Frontend />);
+```
+Then, run index.ts
+```sh
+bun --hot ./index.ts
+```
+For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`.

Dockerfile ADDED Viewed

	@@ -0,0 +1,14 @@

+# Bun Dockerfile for gemma-avatar
+FROM oven/bun:1
+WORKDIR /app
+COPY package.json ./
+RUN bun install --production
+RUN rm -rf /root/.bun /home/bun/.bun /tmp/* 2>/dev/null; echo "clear-rebuild"
+COPY . /app/
+ENV NODE_ENV=production
+ENV PORT=7860
+EXPOSE 7860
+USER bun
+CMD ["bun", "index.ts"]
+# Rebuild trigger: 1785725738.0884876

HOT_TAGS_V3_TRIGGER.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+# HOT Tags V3 Fix Trigger
+# Generated: 9ef64b29ef1be950
+# Files: app.js (59382 bytes), style.css (15138 bytes)

README.md CHANGED Viewed

@@ -1,6 +1,99 @@
 ---
 tags:
 - ml-intern
 ---
-# bep40/vai-avatar2

 ---
+title: Gemma Avatar
+emoji: 🗣️
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+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 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)
+```
+## Notes
+- 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).

REBUILD.md ADDED Viewed

	@@ -0,0 +1 @@


1	+ TRIGGER

TRIGGER_REBUILD.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ 1785850254749

build-trigger ADDED Viewed

	@@ -0,0 +1 @@


1	+ rebuild=1754000000000

index.html ADDED Viewed

	@@ -0,0 +1,529 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>V.AI AVATAR + V.AI STUDIO - Chat & Voice</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@500&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <link rel="stylesheet" href="./src/style.css?gc=12" />
+  </head>
+  <body>
+    <main id="app">
+      <div id="stage" aria-label="3D avatar"></div>
+      <div id="loading">Loading avatar…</div>
+      <!-- Welcome Modal -->
+      <div id="welcome-modal" class="welcome-modal-overlay">
+        <div class="welcome-modal">
+          <div class="welcome-avatar-icon">🤖</div>
+          <h2 class="welcome-title">Chào mừng đến với V.AI AVATAR</h2>
+          <p class="welcome-subtitle">Bạn muốn giao tiếp thế nào?</p>
+          <!-- ✨ Avatar chooser (Mr V / Lisamy) -->
+          <div class="welcome-avatars">
+            <p class="welcome-avatars-title">Chọn đại diện của em:</p>
+            <div id="welcome-avatar-row" class="welcome-avatar-row">
+              <!-- populated by src/avatar-picker.js -->
+            </div>
+          </div>
+          <div class="welcome-actions">
+            <button id="welcome-quick-btn" class="welcome-btn welcome-btn-quick" aria-label="Tư vấn nhanh">
+              <span class="welcome-btn-icon">⚡</span>
+              <span class="welcome-btn-text-content">
+                <span class="welcome-btn-main-text">Tư vấn nhanh</span>
+                <span class="welcome-btn-desc">Không cần chờ avatar, chat với AI và xem sản phẩm ngay</span>
+              </span>
+            </button>
+            <button id="welcome-chat-btn" class="welcome-btn welcome-btn-text" aria-label="Chat tin nhắn">
+              <span class="welcome-btn-icon">💬</span>
+              <span class="welcome-btn-text-content">
+                <span class="welcome-btn-main-text">Chat tin nhắn</span>
+                <span class="welcome-btn-desc">Không cần mic, trò chuyện bằng chữ với AI</span>
+              </span>
+            </button>
+            <button id="welcome-voice-btn" class="welcome-btn welcome-btn-voice" aria-label="Gọi voice">
+              <span class="welcome-btn-icon">🎙️</span>
+              <span class="welcome-btn-text-content">
+                <span class="welcome-btn-main-text">Gọi voice</span>
+                <span class="welcome-btn-desc">Cần mic & loa, nói chuyện trực tiếp</span>
+              </span>
+            </button>
+          </div>
+          <div class="welcome-features">
+            <div class="welcome-feature"><span class="wf-icon">🗣️</span><span class="wf-text">Nhận diện giọng nói tiếng Việt — tự động gõ vào ô chat (nhấn nút mic 🎤 để bật)</span></div>
+            <div class="welcome-feature"><span class="wf-icon">🎙️</span><span class="wf-text">Chế độ voice call — nói chuyện trực tiếp với AI, phụ đề song ngữ</span></div>
+            <div class="welcome-feature"><span class="wf-icon">🛒</span><span class="wf-text">8000+ sản phẩm gia dụng — Malloca, Eurogold, Grob, Canzy & khoá thông minh</span></div>
+            <div class="welcome-feature"><span class="wf-icon">🧠</span><span class="wf-text">AI Avatar + 11 công cụ: tra cứu, web, Wikipedia, thời gian thực</span></div>
+            <div class="welcome-feature"><span class="wf-icon">🎭</span><span class="wf-text">3D avatar lip-sync — biểu cảm, cử chỉ, giọng nói Qwen3-TTS</span></div>
+            <div class="welcome-feature"><span class="wf-icon">⚙️</span><span class="wf-text">Tuỳ chỉnh giọng, avatar, hướng dẫn riêng, phụ đề</span></div>
+          </div>
+          <p class="welcome-hint">Bạn luôn có thể chuyển đổi chế độ sau</p>
+        </div>
+      </div>
+      <!-- ✨ Avatar loading overlay with 1–100% progress bar -->
+      <div id="avatar-loading-overlay" class="avatar-loading-overlay" hidden>
+        <div class="avatar-loading-box">
+          <div class="avatar-loading-face">🤖</div>
+          <div class="avatar-loading-msg">V.AI STUDIO sẽ đến với anh chị ngay bây giờ.<br>Mong anh chị chờ em xíu ạ!</div>
+          <div class="avatar-loading-track"><div class="avatar-loading-fill" id="avatar-loading-bar"></div></div>
+          <div class="avatar-loading-pct" id="avatar-loading-pct">0%</div>
+        </div>
+      </div>
+      <header id="topbar">
+        <div id="identity">
+          <h1>V.AI&nbsp;AVATAR + V.AI STUDIO</h1>
+          <p>Chat or talk to <strong>AI Avatar</strong>. Text → Qwen3-TTS → lip-sync avatar. Control V.AI STUDIO catalog.</p>
+        </div>
+        <div style="display:flex;align-items:center;gap:8px;pointer-events:auto">
+          <button id="order-btn" class="icon-btn" aria-label="Đơn hàng" title="Đơn hàng">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M9 11l3 3L22 4"></path><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
+            </svg>
+          </button>
+          <button id="settings-btn" class="icon-btn" aria-label="Settings" title="Settings">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <circle cx="12" cy="12" r="3"></circle>
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06-.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l-.06-.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+            </svg>
+          </button>
+          <button id="cart-badge-btn" class="icon-btn" aria-label="Giỏ hàng" title="Giỏ hàng" style="position:relative">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle>
+              <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+            </svg>
+            <span id="cartNum" style="display:none;position:absolute;top:-2px;right:-2px;background:#ef4444;color:#fff;font-size:9px;font-weight:800;width:16px;height:16px;border-radius:50%;align-items:center;justify-content:center">0</span>
+          </button>
+        </div>
+      </header>
+      <div id="subtitles" aria-live="polite"></div>
+      <div id="text-chat" hidden>
+        <div id="chat-header">
+          <span id="chat-title">Text Chat</span>
+          <div id="chat-header-actions">
+            <select id="chat-avatar-select" title="Switch avatar"></select>
+            <button id="chat-audio-toggle-btn" class="icon-btn small" aria-label="Toggle avatar audio" title="Toggle avatar audio" style="display:none">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+                <path d="M19.07 4.93a10 10 0 0 1 0 14.14" id="audio-icon-sound"></path>
+                <path d="M15.53 8.47a4 4 0 0 1 0 7.07" id="audio-icon-muted" style="display:none"></path>
+              </svg>
+            </button>
+            <button id="chat-close-btn" class="icon-btn small" aria-label="Close text chat" title="Close">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <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="Nhập bằng giọng nói tiếng Việt" title="Nhập bằng giọng nói (Việt Nam)" 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><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+            </svg>
+          </button>
+        </div>
+        <!-- Suggested Questions: rendered as dark pills inside the chat (see vaix-rag.js) -->
+        <div id="suggested-questions" style="padding:8px 12px;display:none;flex-wrap:wrap;gap:6px"></div>
+        <div id="chat-resize-handle"></div>
+      </div>
+      <footer id="controls">
+        <div id="caption">LOADING…</div>
+        <div id="buttons">
+          <button id="main-btn" disabled><span id="main-btn-label">Loading…</span></button>
+          <button id="mute-btn" class="icon-btn" hidden aria-label="Mute avatar audio" title="Mute avatar audio">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <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="text-mode-btn" class="icon-btn" hidden aria-label="Text chat mode" title="Text chat mode">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+            </svg>
+          </button>
+        </div>
+      </footer>
+      <dialog id="settings">
+        <form method="dialog">
+          <h2>Settings</h2>
+          <label>Voice<select id="voice"></select></label>
+          <label>Avatar model<select id="settings-avatar-select"></select></label>
+          <label class="check-row"><input type="checkbox" id="subtitles-toggle" />Show subtitles while she speaks</label>
+          <label>Extra instructions<textarea id="instructions" rows="4" placeholder="Anything you want her to know or do (persona stays)."></textarea></label>
+          <label id="direct-url-row" hidden>Direct server URL<input id="direct-url" type="url" placeholder="ws://localhost:8080/v1/realtime" spellcheck="false" /></label>
+          <div class="dialog-actions"><button value="close" class="primary">Done</button></div>
+        </form>
+      </dialog>
+    </main>
+    <!-- V.AISTUDIO floating button -->
+    <button id="vaistudio-toggle" aria-label="Open V.AI STUDIO catalog" title="Open V.AI STUDIO catalog" style="position:fixed;bottom:24px;right:24px;z-index:180;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#003f62,#0077b6);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 20px rgba(0,63,98,0.4);display:flex;align-items:center;justify-content:center;font-size:1.4rem;transition:all 0.25s ease" onmouseover="this.style.transform='scale(1.1)';this.style.boxShadow='0 6px 28px rgba(0,63,98,0.5)'" onmouseout="this.style.transform='scale(1)';this.style.boxShadow='0 4px 20px rgba(0,63,98,0.4)'">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path><polyline points="17 8 12 13 7 8"></polyline></svg>
+    </button>
+    <!-- V.AISTUDIO Panel -->
+    <div id="vaistudio-panel" role="dialog" aria-label="V.AI STUDIO Catalog" style="position:fixed;bottom:0;right:0;width:400px;max-width:100vw;height:560px;max-height:calc(100vh - 48px);background:#fff;border-radius:20px 20px 0 0;box-shadow:0 8px 40px rgba(0,0,0,0.18);z-index:160;display:none;flex-direction:column;overflow:hidden">
+      <div id="vaistudio-header" style="background:linear-gradient(135deg,#003f62,#0077b6);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0">
+        <div style="width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0"><i class="fas fa-store"></i></div>
+        <div style="flex:1;min-width:0">
+          <h4 style="font-size:0.9rem;font-weight:700;margin:0">V.AI STUDIO</h4>
+          <span id="vaistudio-count" style="font-size:0.68rem;opacity:0.75">Đang tải sản phẩm…</span>
+        </div>
+        <button id="vaistudio-order-btn" aria-label="Đơn hàng" title="Đơn hàng" style="width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%;background:rgba(255,255,255,0.25);border:none;color:#fff;cursor:pointer;align-items:center;justify-content:center;font-size:1.05rem;transition:all 0.2s" onmouseover="this.style.background='rgba(255,255,255,0.4)'" onmouseout="this.style.background='rgba(255,255,255,0.25)'">
+          <i class="fas fa-receipt"></i>
+        </button>
+        <button id="vaistudio-close" aria-label="Close" style="width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%;background:rgba(255,255,255,0.25);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all 0.2s" onmouseover="this.style.background='rgba(255,255,255,0.4)'" onmouseout="this.style.background='rgba(255,255,255,0.25)'">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+        </button>
+      </div>
+      <!-- Search + Suggestions dropdown -->
+      <div style="padding:8px 12px 4px;flex-shrink:0;background:#f8fafc;border-bottom:1px solid #e2e8f0;position:relative">
+        <input id="vaix-search" type="text" placeholder="🔍 Tìm sản phẩm..." autocomplete="off" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:10px;font-size:0.85rem;outline:none;background:#fff;box-sizing:border-box" onfocus="this.style.borderColor='#0077b6'" onblur="this.style.borderColor='#e2e8f0'" />
+        <div id="vaix-suggestions" style="position:absolute;top:100%;left:12px;right:12px;z-index:50;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.12);display:none;max-height:360px;overflow-y:auto"></div>
+      </div>
+      <div id="vaix-category-chips" style="padding:4px 12px 8px;flex-shrink:0;background:#f8fafc;border-bottom:1px solid #e2e8f0;display:none;flex-wrap:wrap;gap:4px;overflow-x:auto"></div>
+      <div id="vaistudio-body" style="flex:1;overflow:hidden;position:relative;background:#f8fafc">
+        <div id="vaistudio-loading" style="position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:10">
+          <div style="width:32px;height:32px;border:3px solid #e2e8f0;border-top-color:#003f62;border-radius:50%;animation:spin 1s linear infinite"></div>
+          <div style="font-size:0.85rem;color:#64748b">Đang tải sản phẩm V.AI STUDIO…</div>
+        </div>
+        <div id="vaistudio-products" style="overflow-y:auto;height:100%;padding:12px;display:none"></div>
+        <div id="vaistudio-error" style="position:absolute;inset:0;background:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center">
+          <div style="font-size:2rem;margin-bottom:8px">⚠️</div>
+          <div id="vaistudio-error-text" style="font-size:0.9rem;color:#64748b">Không thể tải sản phẩm</div>
+          <button id="vaistudio-retry-btn" style="padding:8px 20px;background:#003f62;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:0.85rem">Thử lại</button>
+        </div>
+      </div>
+    </div>
+    <!-- Product Detail Modal -->
+    <div id="vaistudio-detail-overlay" style="position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;display:none;align-items:center;justify-content:center;padding:20px" onclick="if(event.target===this)this.style.display='none'">
+      <div id="vaistudio-detail-modal" style="background:#fff;border-radius:20px;max-width:480px;width:100%;max-height:85vh;overflow-y:auto;padding:0;box-shadow:0 20px 60px rgba(0,0,0,0.25);animation:modalIn 0.2s ease">
+        <div style="position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;padding:12px" onclick="document.getElementById('vaistudio-detail-overlay').style.display='none'">
+          <button style="width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,0.06);cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center">✕</button>
+        </div>
+        <div id="detail-images" style="display:flex;gap:8px;overflow-x:auto;padding:0 16px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch"></div>
+        <div style="padding:0 16px 12px;border-bottom:1px solid #e2e8f0">
+          <h2 id="detail-title" style="font-size:1.05rem;font-weight:700;color:#1e293b;margin:0 0 6px;line-height:1.4"></h2>
+          <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
+            <span id="detail-brand" style="font-size:0.75rem;color:#64748b;background:#f1f5f9;padding:3px 10px;border-radius:8px"></span>
+            <span id="detail-model" style="font-size:0.7rem;color:#94a3b8"></span>
+          </div>
+          <div id="detail-price" style="font-size:1.2rem;font-weight:800;color:#c2410c;margin-top:8px"></div>
+        </div>
+        <div id="detail-summary" style="padding:12px 16px;font-size:0.82rem;color:#475569;line-height:1.6;border-bottom:1px solid #f1f5f9;display:none"></div>
+        <div id="detail-features" style="padding:12px 16px;border-bottom:1px solid #f1f5f9;display:none">
+          <h3 style="font-size:0.8rem;font-weight:700;color:#003f62;margin:0 0 8px;text-transform:uppercase;letter-spacing:0.04em">Tính năng nổi bật</h3>
+          <ul id="detail-features-list" style="margin:0;padding:0;list-style:none"></ul>
+        </div>
+        <div id="detail-specs" style="padding:12px 16px 20px;display:none">
+          <h3 style="font-size:0.8rem;font-weight:700;color:#003f62;margin:0 0 8px;text-transform:uppercase;letter-spacing:0.04em">Thông số kỹ thuật</h3>
+          <table id="detail-specs-table" style="width:100%;border-collapse:collapse;font-size:0.78rem"><tbody></tbody></table>
+        </div>
+      </div>
+    </div>
+    <!-- CART DRAWER -->
+    <div class="cart-overlay" id="cartOverlay" onclick="if(window.closeCart)closeCart()"></div>
+    <div class="cart-drawer" id="cartDrawer">
+      <div class="cart-header"><h3><i class="fas fa-shopping-cart"></i> Giỏ Hàng</h3><button class="cart-close" onclick="closeCart()"><i class="fas fa-times"></i></button></div>
+      <div class="cart-items" id="cartItems"></div>
+      <div class="cart-footer" id="cartFooter" style="display:none">
+        <div class="cart-total"><span>Tổng cộng:</span><span id="cartTotal">0đ</span></div>
+        <div class="cart-footer-btns">
+          <button class="cart-checkout-btn" onclick="saveOrder()" style="background:#059669"><i class="fas fa-save"></i> Lưu</button>
+          <button class="cart-checkout-btn" onclick="openQuotation()" style="background:var(--p, #003f62)"><i class="fas fa-file-invoice"></i> Báo giá</button>
+          <button class="cart-checkout-btn" onclick="clearCart()" style="background:#64748b"><i class="fas fa-trash"></i> Xóa</button>
+        </div>
+      </div>
+    </div>
+    <!-- QUOTATION MODAL -->
+    <div class="quote-overlay" id="quoteOverlay" onclick="if(event.target===this)closeQuotation()">
+      <div class="quote-modal">
+        <button class="quote-close" onclick="closeQuotation()"><i class="fas fa-times"></i></button>
+        <div class="quote-head">
+          <h2><i class="fas fa-file-invoice" style="margin-right:8px"></i>Lập Báo Giá</h2>
+          <p>Điền thông tin khách hàng và chiết khấu để xuất báo giá</p>
+        </div>
+        <div class="quote-body">
+          <div class="quote-section">
+            <h3><i class="fas fa-user"></i> Thông tin khách hàng</h3>
+            <div class="quote-grid">
+              <div class="quote-field"><label>Họ tên khách hàng</label><input id="qcName" placeholder="Nhập họ tên"></div>
+              <div class="quote-field"><label>Số điện thoại</label><input id="qcPhone" placeholder="Nhập SĐT"></div>
+              <div class="quote-field"><label>Email</label><input id="qcEmail" placeholder="Nhập email"></div>
+              <div class="quote-field"><label>Địa chỉ</label><input id="qcAddr" placeholder="Nhập địa chỉ"></div>
+              <div class="quote-field"><label>Mã đơn hàng</label><input id="qcCompany" placeholder="Tự động tạo" readonly style="background:#f1f5f9;font-weight:700;color:#003f62"></div>
+              <div class="quote-field"><label>Ngày báo giá</label><input id="qcDate" type="date"></div>
+            </div>
+            <div style="margin-top:12px;padding:12px 14px;background:#f1f5f9;border-radius:10px">
+              <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
+                <i class="fas fa-lock" id="qcLockIcon" style="color:#16a34a;font-size:.85rem"></i>
+                <input id="qcAccessCode" type="password" placeholder="Nhập mã truy cập..." style="width:180px;padding:7px 10px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:.8rem;font-family:inherit;outline:none;background:#fff" oninput="checkQuoteAccess()">
+                <span id="qcAccessStatus" style="font-size:.72rem;font-weight:600;color:#16a34a">🔒</span>
+              </div>
+              <div id="aiPromptBox" style="display:none">
+                <div style="display:flex;gap:8px">
+                  <textarea id="qcAiPrompt" placeholder="VD: Malloca ck 35%, giao hàng 200k, lắp đặt 500k, cọc 5tr, ghi chú: giao thứ 7" style="flex:1;padding:8px 10px;border:1.5px solid #0077b6;border-radius:8px;font-size:.82rem;font-family:inherit;outline:none;resize:none;height:48px;background:#fff"></textarea>
+                  <button onclick="applyAiDiscount()" style="padding:8px 16px;background:#0077b6;color:#fff;border:none;border-radius:8px;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;display:flex;align-items:center;gap:6px" id="aiDiscBtn"><i class="fas fa-robot"></i> Áp dụng</button>
+                </div>
+                <div id="aiDiscStatus" style="font-size:.72rem;color:#16a34a;margin-top:4px"></div>
+              </div>
+            </div>
+          </div>
+          <div class="quote-section">
+            <h3><i class="fas fa-list-check"></i> Chi tiết sản phẩm</h3>
+            <div style="overflow-x:auto">
+              <table class="quote-table" id="quoteTable">
+                <thead><tr><th>STT</th><th>Hình ảnh</th><th style="text-align:left">Tên sản phẩm</th><th>Mã SP</th><th>Thông tin</th><th>SL</th><th>Đơn giá</th><th>Đơn giá CK</th><th>Thành tiền</th><th>Ghi chú</th></tr></thead>
+                <tbody id="quoteTableBody"></tbody>
+                <tfoot><tr class="quote-total-row"><td colspan="8" style="text-align:right;padding-right:12px">TỔNG CỘNG:</td><td class="qt-price" id="quoteTotalCell">0₫</td><td></td></tr></tfoot>
+              </table>
+            </div>
+          </div>
+          <div class="quote-actions">
+            <button class="quote-btn" onclick="shareQuoteImage()" style="background:#25D366"><i class="fas fa-share-alt"></i> Chia sẻ ảnh</button>
+            <button class="quote-btn" onclick="shareQuoteLink()" style="background:#0068FF"><i class="fas fa-share-alt"></i> Chia sẻ báo giá</button>
+            <button class="quote-btn quote-btn-excel" onclick="exportQuoteExcel()"><i class="fas fa-file-excel"></i> Xuất Excel</button>
+            <button class="quote-btn quote-btn-pdf" onclick="exportQuotePDF()"><i class="fas fa-file-pdf"></i> Xuất PDF</button>
+            <label class="quote-btn" style="background:#fff;color:#111;border:1px solid #111"><input id="vai-bw-export" type="checkbox" style="width:16px;height:16px;margin-right:6px"> Trắng đen</label>
+            <button class="quote-btn quote-btn-print" onclick="printQuotation()"><i class="fas fa-print"></i> In báo giá</button>
+            <button class="quote-btn" onclick="saveOrder()" style="background:#7c3aed"><i class="fas fa-save"></i> Lưu</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <style>
+      @keyframes spin { to { transform: rotate(360deg); } }
+      @keyframes modalIn { from { opacity:0;transform:translateY(20px) scale(0.96) } to { opacity:1;transform:translateY(0) scale(1) } }
+      /* ── Welcome Modal ── */
+      .welcome-modal-overlay { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.85); opacity: 0; visibility: hidden; transition: all 0.3s ease; }
+      .welcome-modal-overlay.show { opacity: 1; visibility: visible; }
+      .welcome-modal { background: #1a1a1a; border-radius: 20px; padding: 40px; text-align: center; max-width: 400px; width: 90%; border: 1px solid #333; box-shadow: 0 20px 60px rgba(0,0,0,0.5); transform: translateY(20px); transition: transform 0.3s ease; }
+      .welcome-modal-overlay.show .welcome-modal { transform: translateY(0); }
+      .welcome-avatar-icon { font-size: 3rem; margin-bottom: 16px; }
+      .welcome-title { color: #fff; font-size: 1.5rem; margin-bottom: 8px; font-family: Inter, sans-serif; font-weight: 600; }
+      .welcome-subtitle { color: #888; font-size: 0.9rem; margin-bottom: 24px; font-family: Inter, sans-serif; }
+      .welcome-actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
+      .welcome-btn { padding: 16px 24px; border: none; border-radius: 12px; cursor: pointer; font-family: Inter, sans-serif; font-size: 1rem; font-weight: 600; text-align: left; display: flex; align-items: center; gap: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
+      .welcome-btn:hover { transform: scale(1.02); }
+      .welcome-btn:active { transform: scale(0.98); }
+      .welcome-btn-text { background: linear-gradient(135deg, #003f62, #0077b6); color: #fff; box-shadow: 0 4px 16px rgba(0,63,98,0.3); }
+      .welcome-btn-text:hover { box-shadow: 0 6px 24px rgba(0,63,98,0.4); }
+      .welcome-btn-voice { background: linear-gradient(135deg, #6B21A8, #9333EA); color: #fff; box-shadow: 0 4px 16px rgba(107,33,168,0.3); }
+      .welcome-btn-voice:hover { box-shadow: 0 6px 24px rgba(107,33,168,0.4); }
+      .welcome-btn-quick { background: linear-gradient(135deg, #047857, #10B981); color: #fff; box-shadow: 0 4px 16px rgba(4,120,87,0.3); }
+      .welcome-btn-quick:hover { box-shadow: 0 6px 24px rgba(4,120,87,0.4); }
+      .welcome-btn-icon { font-size: 1.3rem; }
+      .welcome-btn-text-content { display: flex; flex-direction: column; }
+      .welcome-btn-main-text { font-size: 1rem; font-weight: 600; }
+      .welcome-btn-desc { font-size: 0.75rem; font-weight: 400; opacity: 0.8; margin-top: 2px; }
+      .welcome-hint { color: #555; font-size: 0.75rem; font-family: Inter, sans-serif; }
+      .welcome-modal { max-height: 90vh; overflow-y: auto; }
+      .welcome-modal::-webkit-scrollbar { width: 4px; }
+      .welcome-modal::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }
+      .welcome-features { margin: 0 0 16px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
+      .welcome-feature { display: flex; align-items: flex-start; gap: 10px; color: #ccc; font-size: 0.82rem; line-height: 1.45; font-family: Inter, sans-serif; }
+      .welcome-feature .wf-icon { flex-shrink: 0; font-size: 1.1rem; width: 22px; text-align: center; }
+      .welcome-feature .wf-text { color: #aaa; }
+      /* ✨ Avatar chooser on the welcome modal */
+      .welcome-avatars { margin: 0 0 16px; }
+      .welcome-avatars-title { color: #888; font-size: 0.82rem; font-family: Inter, sans-serif; margin: 0 0 12px; }
+      .welcome-avatar-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
+      .welcome-avatar-card { background: transparent; border: 2px solid #333; border-radius: 16px; padding: 10px 12px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: all 0.2s; font-family: Inter, sans-serif; }
+      .welcome-avatar-card:hover { border-color: #0077b6; transform: translateY(-2px); }
+      .welcome-avatar-card.selected { border-color: #22d3ee; box-shadow: 0 0 0 2px rgba(34,211,238,0.35); }
+      .welcome-avatar-img-wrap { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid #0077b6; display: flex; align-items: center; justify-content: center; background: #222; }
+      .welcome-avatar-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
+      .welcome-avatar-name { color: #e0e0e0; font-size: 0.8rem; font-weight: 600; }
+      /* ✨ Avatar loading overlay + 1–100% progress bar */
+      .avatar-loading-overlay { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; background: rgba(10,10,12,0.92); }
+      .avatar-loading-box { background: #1a1a1a; border: 1px solid #333; border-radius: 20px; padding: 36px 40px; text-align: center; max-width: 420px; width: 88%; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
+      .avatar-loading-face { font-size: 2.6rem; margin-bottom: 14px; }
+      .avatar-loading-msg { color: #ddd; font-size: 1rem; line-height: 1.5; font-family: Inter, sans-serif; margin-bottom: 20px; }
+      .avatar-loading-track { height: 12px; background: #2a2a2a; border-radius: 999px; overflow: hidden; border: 1px solid #3a3a3a; }
+      .avatar-loading-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #003f62, #22d3ee); border-radius: 999px; transition: width 0.3s ease; }
+      .avatar-loading-pct { color: #22d3ee; font-size: 1rem; font-weight: 700; margin-top: 10px; font-family: Inter, sans-serif; }
+      #vaistudio-panel.open { display: flex !important; }
+      #vaistudio-loading.hidden { display: none !important; }
+      @media (max-width:768px) { #vaistudio-toggle { bottom:16px;right:16px;width:50px;height:50px } #vaistudio-panel { width:100%;max-width:100%;height:100%;max-height:100vh;border-radius:0 } }
+      .product-card { display:flex;gap:12px;padding:12px;background:#fff;border-radius:12px;margin-bottom:8px;border:1px solid #e2e8f0;cursor:pointer;transition:all 0.2s }
+      .product-card:hover { border-color:#0077b6;box-shadow:0 2px 8px rgba(0,63,98,0.12) }
+      .product-card-img { width:80px;height:80px;border-radius:8px;object-fit:cover;background:#f1f5f9;flex-shrink:0 }
+      .product-card-info { flex:1;min-width:0 }
+      .product-card-title { font-size:0.85rem;font-weight:600;color:#1e293b;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
+      .product-card-brand { font-size:0.75rem;color:#64748b;margin:0 0 4px }
+      .product-card-price { font-size:0.85rem;font-weight:700;color:#003f62;margin:0 }
+      .product-card-cat { font-size:0.7rem;color:#94a3b8;background:#f1f5f9;padding:2px 8px;border-radius:10px;display:inline-block;margin-top:4px }
+      .vaix-suggestion-item { display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid #f1f5f9;transition:background 0.15s }
+      .vaix-suggestion-item:last-child { border-bottom:none }
+      .vaix-suggestion-item:hover { background:#f0f9ff }
+      #vaix-suggestions::-webkit-scrollbar { width:5px }
+      #vaix-suggestions::-webkit-scrollbar-thumb { background:#e2e8f0;border-radius:3px }
+      .vaix-category-chip { display:inline-flex;align-items:center;padding:4px 10px;background:#eef2ff;color:#003f62;border:1px solid #d0dfed;border-radius:14px;font-size:0.7rem;cursor:pointer;white-space:nowrap;transition:all 0.2s;font-family:inherit }
+      .vaix-category-chip:hover { background:#dbeafe;border-color:#0077b6;transform:translateY(-1px) }
+      .chat-product-cards { display:flex;flex-direction:column;gap:8px;margin:6px 0;max-width:100% }
+      .chat-product-card { background:#1e293b;border:1px solid #334155;border-radius:12px;overflow:hidden;transition:all 0.2s }
+      .chat-product-card:hover { border-color:#0077b6;box-shadow:0 2px 8px rgba(0,119,182,0.15) }
+      .chat-product-card-inner { display:flex;gap:10px;padding:10px;cursor:pointer }
+      .chat-product-card-img-wrap { width:64px;height:64px;border-radius:8px;overflow:hidden;flex-shrink:0;background:#1a1f2e }
+      .chat-product-card-img { width:100%;height:100%;object-fit:cover }
+      .chat-product-card-img-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.3rem }
+      .chat-product-card-body { flex:1;min-width:0;display:flex;flex-direction:column;gap:2px }
+      .chat-product-card-name { font-size:0.8rem;font-weight:600;color:#e2e8f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3 }
+      .chat-product-card-meta { display:flex;align-items:center;gap:6px;flex-wrap:wrap }
+      .chat-product-card-brand { font-size:0.68rem;color:#94a3b8 }
+      .chat-product-card-stars { font-size:0.6rem;color:#f59e0b;letter-spacing:1px }
+      .chat-product-card-price { font-size:0.82rem;font-weight:700;color:#22d3ee;margin-top:1px }
+      .chat-product-card-cat { font-size:0.6rem;color:#64748b;background:#2d3748;padding:1px 6px;border-radius:4px;display:inline-block;width:fit-content;margin-top:1px }
+      .chat-product-card-actions { display:flex;gap:0;border-top:1px solid #334155 }
+      .chat-product-card-btn { flex:1;padding:7px 8px;background:transparent;border:none;color:#94a3b8;cursor:pointer;font-size:0.7rem;font-family:inherit;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:4px }
+      .chat-product-card-btn:hover { background:#2d3748;color:#e2e8f0 }
+      .chat-product-card-btn:first-child { border-right:1px solid #334155 }
+      .chat-product-card-btn.detail-btn:hover { color:#22d3ee }
+      .chat-product-card-btn.share-btn:hover { color:#f59e0b }
+      .chat-product-card-btn.cart-btn { color:#4ade80 }
+      .chat-product-card-btn.cart-btn:hover { background:#14532d; color:#4ade80 }
+      .chat-product-card-btn.cart-btn.added { background:#166534; color:#fff }
+      .chat-message.assistant .chat-product-card { background:#1e293b;border:1px solid #334155;margin:4px 0 }
+      /* Combo suggestion section */
+      .chat-combo-section { margin:8px 0;padding:10px;background:linear-gradient(135deg,rgba(34,211,238,0.08),rgba(147,51,234,0.08));border:1px solid #334155;border-radius:14px;max-width:100% }
+      .chat-combo-title { font-size:0.82rem;font-weight:700;color:#e2e8f0;display:flex;align-items:center;gap:6px;margin-bottom:2px }
+      .chat-combo-spark { color:#f59e0b }
+      .chat-combo-sub { font-size:0.68rem;color:#94a3b8;margin-bottom:8px }
+      .chat-combo-cards { display:flex;flex-direction:column;gap:7px;max-height:260px;overflow-y:auto }
+      .chat-combo-cards .chat-product-card { margin:0 }
+      .chat-combo-random { margin-top:8px;padding:6px 12px;background:rgba(34,211,238,0.15);color:#22d3ee;border:1px solid rgba(34,211,238,0.35);border-radius:10px;cursor:pointer;font-size:0.72rem;font-family:inherit;font-weight:600;transition:all 0.15s }
+      .chat-combo-random:hover { background:rgba(34,211,238,0.28) }
+      #detail-share-btn { display:inline-flex!important }
+      /* ✨ FIX: Suggested Question Pills CSS */
+      .suggested-pill { padding:6px 14px; border:1px solid #0077b6; border-radius:16px; background:#f0f9ff; color:#003f62; font-size:0.75rem; cursor:pointer; white-space:normal; max-width:100%; font-family:Inter,sans-serif; font-weight:500; transition:all 0.2s; }
+      .suggested-pill:hover { background:#dbeafe; border-color:#005580; }
+    </style>
+    <style>
+      /* ── Cart Drawer (V.AISTUDIO layout) ── */
+      .cart-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;backdrop-filter:blur(3px)}
+      .cart-drawer{position:fixed;top:0;right:0;width:400px;max-width:90vw;height:100vh;height:100dvh;background:#fff;color:#1e293b;z-index:201;display:flex;flex-direction:column;box-shadow:-4px 0 30px rgba(0,0,0,.15);transform:translateX(100%);transition:transform .35s ease;visibility:hidden}
+      .cart-drawer.open{transform:translateX(0);visibility:visible}
+      .cart-header{padding:20px;border-bottom:2px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between}
+      .cart-header h3{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:8px;color:#1e293b;margin:0}
+      .cart-close{width:34px;height:34px;border:none;background:#e2e8f0;border-radius:9px;cursor:pointer;font-size:.9rem;color:#475569}
+      .cart-items{flex:1;overflow-y:auto;padding:16px;min-height:0}
+      .cart-item{display:flex;gap:12px;padding:12px;background:#f8fafc;border-radius:12px;margin-bottom:10px;align-items:center}
+      .cart-item img{width:56px;height:56px;border-radius:8px;object-fit:cover;background:#fff;flex-shrink:0;border:1px solid #e2e8f0}
+      .cart-item-info{flex:1;min-width:0}
+      .cart-item-name{font-size:.8rem;font-weight:600;color:#1e293b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+      .cart-item-price{font-size:.88rem;font-weight:800;color:#003f62;margin-top:4px}
+      .cart-item-qty{display:flex;align-items:center;gap:8px;margin-top:6px}
+      .qty-btn{width:26px;height:26px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;color:#334155}
+      .qty-val{font-size:.82rem;font-weight:700;min-width:20px;text-align:center;color:#1e293b}
+      .cart-item-del{background:none;border:none;color:#dc3545;cursor:pointer;font-size:.85rem;padding:4px}
+      .cart-footer{padding:10px 14px;border-top:2px solid #e2e8f0;background:#fff;flex-shrink:0}
+      .cart-total{display:flex;justify-content:space-between;font-size:.92rem;font-weight:800;color:#1e293b;margin-bottom:6px}
+      .cart-footer-btns{display:flex;gap:6px;margin-top:6px}
+      .cart-checkout-btn{flex:1;padding:10px 6px;font-size:.78rem;border-radius:10px;border:none;color:#fff;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:4px}
+      .cart-empty{text-align:center;padding:40px;color:#64748b}
+      .cart-empty i{font-size:2rem;color:#cbd5e1;margin-bottom:8px}
+      .cart-empty h3{color:#1e293b;margin:0 0 4px}
+      #cart-badge-btn svg{display:block}
+      /* ── Quotation Modal (V.AISTUDIO layout) ── */
+      .quote-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
+      .quote-overlay.open{display:flex}
+      .quote-modal{background:#fff;border-radius:20px;max-width:960px;width:100%;max-height:92vh;overflow-y:auto;padding:0;position:relative;color:#1e293b}
+      .quote-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border:none;background:rgba(255,255,255,.2);border-radius:9px;cursor:pointer;color:#fff;font-size:.9rem;display:flex;align-items:center;justify-content:center}
+      .quote-head{background:linear-gradient(135deg,#003f62,#0077b6);color:#fff;padding:24px 28px;border-radius:20px 20px 0 0}
+      .quote-head h2{font-size:1.2rem;font-weight:800;margin:0 0 4px;color:#fff}
+      .quote-head p{font-size:.8rem;opacity:.75;margin:0}
+      .quote-body{padding:24px 28px}
+      .quote-section{margin-bottom:20px}
+      .quote-section h3{font-size:.88rem;font-weight:700;color:#1e293b;margin:0 0 12px;display:flex;align-items:center;gap:8px}
+      .quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
+      .quote-field label{font-size:.72rem;font-weight:600;color:#475569;display:block;margin-bottom:4px}
+      .quote-field input{width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:.82rem;font-family:inherit;outline:none;color:#1e293b;background:#fff}
+      .quote-table{width:100%;border-collapse:collapse;font-size:.78rem;margin-top:8px}
+      .quote-table th{background:#003f62;color:#fff;padding:8px 6px;font-weight:600;text-align:center;white-space:nowrap}
+      .quote-table td{padding:8px 6px;border-bottom:1px solid #e2e8f0;vertical-align:middle;color:#334155}
+      .quote-table tbody tr:nth-child(odd){background:#f8fafc}
+      .quote-total-row td{font-weight:800;color:#003f62;padding:12px 6px}
+      .qt-price{text-align:right;white-space:nowrap}
+      .quote-table img{width:40px;height:40px;object-fit:cover;border-radius:6px}
+      .quote-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;justify-content:center}
+      .quote-btn{padding:12px 24px;border:none;border-radius:10px;font-weight:700;font-size:.85rem;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:8px;color:#fff}
+      .quote-btn-excel{background:#217346}
+      .quote-btn-pdf{background:#dc3545}
+      .quote-btn-print{background:#003f62}
+      .quote-btn-print:hover{background:#00293f}
+      .quote-field input:focus{border-color:#0077b6}
+      .quote-table .qt-img{width:72px;height:72px;object-fit:contain;border-radius:6px;background:#f1f5f9;border:1px solid #e2e8f0}
+      .quote-table .qt-disc{width:80px;padding:5px 6px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:.78rem;text-align:right;font-family:inherit;outline:none}
+      .quote-table .qt-disc:focus{border-color:#0077b6}
+      .quote-table .qt-note{width:100%;min-width:90px;padding:5px 6px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:.78rem;font-family:inherit;outline:none}
+      .qt-extra-row td{font-size:.82rem}
+      @media(max-width:768px){.quote-grid{grid-template-columns:1fr}.quote-modal{border-radius:12px}.quote-table{font-size:.7rem}}
+      /* ── Ask AI button on news cards ── */
+      .source-card-askai{display:flex;align-items:center;gap:6px;margin:8px 4px 2px;padding:7px 12px;background:linear-gradient(135deg,#003f62,#0077b6);color:#fff;border:none;border-radius:10px;font-size:.72rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;width:fit-content}
+      .source-card-askai:hover{opacity:.9;transform:translateY(-1px)}
+      /* ── Đơn hàng (order) buttons — always visible ── */
+      #order-btn, #vaistudio-order-btn { display: flex !important; }
+    </style>
+    <!-- V.AI STUDIO RAG Module - loads products + integrates search/showProduct -->
+    <script src="https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <script src="./src/cart-quote.js?gc=12"></script>    <!-- Cart + Quote module (Giỏ hàng / Báo giá) -->
+    <script src="./src/vaix-rag.js?gc=14"></script>    <!-- V.AI STUDIO RAG Module - loads products + integrates search/showProduct -->
+    <script src="./src/greeting-news.js?gc=12"></script>  <!-- Greeting HOT news cards + source links -->
+    <script src="./src/order-sync.js?gc=12"></script>    <!-- Order sync with V.AISTUDIO backend -->
+    <script type="module" src="./src/app.js?gc=13"></script>
+    <script src="./src/greeting-source-cards.js?gc=12"></script> <!-- FIX: Nguồn tin cards under greeting -->
+    <script src="./src/avatar-picker.js?gc=12"></script> <!-- ✨ Circular avatar picker (Mr V / Lisamy) + loading progress bar -->
+    <script>
+      // Wire the "Đơn hàng" buttons to the order modal
+      (function () {
+        function wire() {
+          var ob = document.getElementById("order-btn");
+          if (ob) { ob.onclick = function (e) { e.preventDefault(); e.stopPropagation(); if (window.openOrderModal) window.openOrderModal(); }; }
+          var vob = document.getElementById("vaistudio-order-btn");
+          if (vob) { vob.onclick = function (e) { e.preventDefault(); e.stopPropagation(); if (window.openOrderModal) window.openOrderModal(); }; }
+        }
+        wire();
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", wire);
+        // Re-wire after cart-quote.js loads (it runs synchronously before this block)
+        window.addEventListener("load", wire);
+      })();
+    </script>
+  </body>
+</html>

index.ts ADDED Viewed

	@@ -0,0 +1,910 @@

+/**
+ * Gemma Avatar — realtime voice/text chat with 3D talking-head avatar + V.AI STUDIO.
+ * Products: frontend loads DIRECTLY from dataset JSON URL (1 HTTP GET, no backend proxy).
+ * Backend keeps /api/vaix/products for backward compat / debugging.
+ * Fast, reliable, no WASM, no compiled deps.
+ *
+ * S2S upstream: victor-gemma-avatar.hf.space S2S backend (smolagents now gates access).
+ * Text-only chat: /api/chat — uses victor's S2S backend in text-only mode.
+ */
+import { readFileSync } from "fs";
+// Read index.html directly as text to avoid Bun HTMLBundle object
+const index = readFileSync(new URL("./index.html", import.meta.url), "utf-8");
+import { readdir } from "fs/promises";
+import { join } from "path";
+import { existsSync } from "fs";
+const LOAD_BALANCER_URL = (Bun.env.LOAD_BALANCER_URL ?? "").trim().replace(/\/$/, "");
+const SESSION_PROXY_URL = (Bun.env.SESSION_PROXY_URL ?? "https://victor-gemma-avatar.hf.space/api").trim().replace(/\/$/, "");
+const UPSTREAM = LOAD_BALANCER_URL || SESSION_PROXY_URL;
+const PORT = Number(Bun.env.PORT ?? 7860);
+// ── JSON file from dataset (33.5MB, 23.4K rows) — kept for backend API compat ──
+const JSON_URL =
+  "https://huggingface.co/datasets/bep40/grob-products-updated" +
+  "/resolve/main/products_with_slugs.json";
+let VAIX_PRODUCTS: any[] | null = null;
+let VAIX_LOADING = false;
+let VAIX_LOADED = false;
+let VAIX_LAST_SYNC = Date.now();
+async function loadVaixProducts(): Promise<void> {
+  if (VAIX_LOADED && VAIX_PRODUCTS?.length) return;
+  if (VAIX_LOADING) {
+    for (let i = 0; i < 120; i++) {
+      await new Promise(r => setTimeout(r, 500));
+      if (VAIX_LOADED) return;
+    }
+  }
+  VAIX_LOADING = true;
+  const startMs = Date.now();
+  console.log("[VAIX] Fetching JSON from bep40/grob-products-updated...");
+  try {
+    const ctrl = new AbortController();
+    const timer = setTimeout(() => ctrl.abort(), 120_000);
+    const resp = await fetch(JSON_URL, { signal: ctrl.signal });
+    clearTimeout(timer);
+    if (!resp.ok) throw new Error("HTTP " + resp.status);
+    const data = await resp.json();
+    VAIX_PRODUCTS = Array.isArray(data) ? data : [];
+    VAIX_LAST_SYNC = Date.now();
+    VAIX_PRODUCTS = VAIX_PRODUCTS.slice(0, 1000); // Limit to 1000 for memory
+    console.log("[VAIX] Loaded " + VAIX_PRODUCTS.length + " products (capped from " + data.length + ") in " + (Date.now() - startMs) + "ms");
+  } catch (err: any) {
+    console.error("[VAIX] Error:", err.message);
+    setTimeout(() => { VAIX_LOADING = false; VAIX_LOADED = false; loadVaixProducts(); }, 10_000);
+  } finally {
+    VAIX_LOADING = false;
+  }
+}
+loadVaixProducts().catch(() => {});
+setTimeout(() => { if (!VAIX_LOADED) loadVaixProducts().catch(() => {}); }, 3000);
+function norm(s: string): string {
+  return String(s || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[đĐ]/g, "d").replace(/[.\-\s]/g, "");
+}
+async function proxy(path: string, req: Request, init: any = {}): Promise<Response> {
+  const headers = new Headers(init.headers);
+  headers.set("Content-Type", "application/json");
+  const cookie = req.headers.get("cookie");
+  if (cookie) headers.set("Cookie", cookie);
+  const resp = await fetch(UPSTREAM + path, { ...init, headers });
+  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")] : []);
+  for (const sc of setCookies) out.headers.append("Set-Cookie", sc.split(";").map((p: string) => p.trim()).filter((p: string) => !/^domain=/i.test(p)).join("; "));
+  return out;
+}
+function getMimeType(name: string): string {
+  const ext = name.split(".").pop()?.toLowerCase() ?? "";
+  const types: Record<string, string> = {
+    "js": "application/javascript",
+    "mjs": "application/javascript",
+    "cjs": "application/javascript",
+    "css": "text/css",
+    "html": "text/html",
+    "json": "application/json",
+    "png": "image/png",
+    "jpg": "image/jpeg",
+    "gif": "image/gif",
+    "svg": "image/svg+xml",
+    "webp": "image/webp",
+    "ico": "image/x-icon",
+    "woff2": "font/woff2",
+    "woff": "font/woff",
+    "ttf": "font/ttf",
+    "bin": "application/octet-stream",
+    "mjs": "application/javascript",
+  };
+  return types[ext] ?? "application/octet-stream";
+}
+function staticFile(dir: string, name: string) {
+  const path = import.meta.dir + "/public/" + dir + "/" + name;
+  const mime = getMimeType(name);
+  return new Response(Bun.file(path), { headers: { "Content-Type": mime } });
+}
+function srcFile(dir: string, name: string) {
+  const path = import.meta.dir + "/" + dir + "/" + name;
+  const mime = getMimeType(name);
+  return new Response(Bun.file(path), { headers: { "Content-Type": mime } });
+}
+async function listAvatars() {
+  const avatarsDir = join(import.meta.dir, "public/avatars");
+  const names: string[] = [];
+  try {
+    const dir = await readdir(avatarsDir, { withFileTypes: true });
+    for (const e of dir) {
+      if (e.isFile() && e.name.endsWith(".glb")) names.push(e.name);
+    }
+  } catch {}
+  return names.sort();
+}
+function formatProduct(p: any, idx: number) {
+  return {
+    name: p.name || p.n || "",
+    title_clean: p.name || p.n || "",
+    brand: p.brand || "",
+    price: p.p || p.price || "",
+    priceNum: Number(p.pn ?? 0),
+    category: p.c || p.cat || "",
+    category_slug: p.cs || "",
+    category_icon: p.ci || "fa-box",
+    sku: p.sku || "",
+    model: p.mod || p.model || "",
+    slug: p.slug || "",
+    description: p.desc || "",
+    summary: p.sum || p.summary || "",
+    features: Array.isArray(p.feats) ? p.feats : [],
+    specs: (typeof p.specs === "object" && p.specs !== null) ? p.specs : {},
+    video: p.vid || "",
+    image: p.i || (Array.isArray(p.imgs) ? p.imgs[0] : "") || (Array.isArray(p.images) ? p.images[0] : ""),
+    images: p.imgs || p.images || [],
+    link: p.l || "",
+    _idx: p._idx ?? idx,
+  };
+}
+async function serveProductOG(req: Request): Promise<Response> {
+  const url = new URL(req.url);
+  const productSlug = url.searchParams.get("product");
+  function esc(s: string): string {
+    return (s || "")
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;')
+      .replace(/\n/g, " ")
+      .replace(/\r/g, " ")
+      .trim()
+      .slice(0, 350);
+  }
+  const fallbackImg = "https://huggingface.co/spaces/bep40/vai-avatar2/resolve/main/thumbnail.webp";
+  if (productSlug && VAIX_PRODUCTS?.length) {
+    const foundProduct = VAIX_PRODUCTS.find((p: any) => {
+      const slug = p.slug || p._source_alias || "";
+      const normSlug = slug.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/đ/g, "d").replace(/Đ/g, "d");
+      const normTarget = productSlug.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/đ/g, "d").replace(/Đ/g, "d");
+      return normSlug === normTarget || normSlug.includes(normTarget) || normTarget.includes(normSlug);
+    });
+    if (foundProduct) {
+      const fp = formatProduct(foundProduct, foundProduct._idx ?? 0);
+      const fpName = esc(fp.name || fp.model || "Sản phẩm");
+      const fpBrand = esc(fp.brand || "V.AI STUDIO");
+      // ── Image URL: use escURL (not esc) because we need proper URL encoding for og:image ──
+      const fpImageRaw = fp.image || (fp.images && fp.images[0]) || "";
+      const fpImg = fpImageRaw ? escURL(fpImageRaw) : fallbackImg;
+      // ── Description: 600 chars to fit full summary + specs ──
+      const fpDesc = esc((fp.summary || fp.description || "").replace(/<[^>]+>/g, "").trim().slice(0, 600));
+      // ── Specs: show all specs up to 12 keys ──
+      const fpSpecs = fp.specs || {};
+      let specsStr = "";
+      const specKeys = Object.keys(fpSpecs).slice(0, 12);
+      for (const sk of specKeys) {
+        specsStr += (specsStr ? ", " : " | ") + esc(sk) + ": " + esc(String(fpSpecs[sk]));
+      }
+      const ogDescription = fpDesc + (specsStr ? " | " + specsStr.trim() : "") || "V.AI STUDIO - 8000+ sản phẩm gia dụng cao cấp";
+      // ── Price: formatted VND string for og:title ──
+      const priceNum = fp.priceNum || Number(fp.pn) || 0;
+      const ogPrice = priceNum > 0 ? " - " + Number(priceNum).toLocaleString("vi-VN") + "₫" : "";
+      const ogTitle = fpName + " | " + fpBrand + ogPrice + " - V.AI STUDIO";
+      const ogTags = buildOGTags(ogTitle, ogDescription, fpImg, url.href, true, priceNum);
+      return new Response(index.replace(/<\/head>/, ogTags + "\n  </head>"), {
+        status: 200,
+        headers: { "Content-Type": "text/html; charset=utf-8" },
+      });
+    }
+  }
+  // Fallback OG tags — always set for any request (no product match or no ?product param)
+  const fallbackTitle = "Gemma Avatar + V.AI STUDIO - Chat & Voice AI";
+  const fallbackDesc = "Trò chuyện voice/text với Gemma 4. Khám phá 8000+ sản phẩm gia dụng.";
+  const ogTags = buildOGTags(fallbackTitle, fallbackDesc, fallbackImg, url.href, false);
+  return new Response(index.replace(/<\/head>/, ogTags + "\n  </head>"), {
+    status: 200,
+    headers: { "Content-Type": "text/html; charset=utf-8" },
+  });
+}
+function buildOGTags(title: string, desc: string, image: string, href: string, isProduct: boolean, price = 0): string {
+  return [
+    '<meta property="og:title" content="' + title + '" />',
+    '<meta property="og:description" content="' + desc + '" />',
+    '<meta property="og:url" content="' + escURL(href) + '" />',
+    '<meta property="og:type" content="' + (isProduct ? 'product' : 'website') + '" />',
+    '<meta property="og:image" content="' + image + '" />',
+    '<meta property="og:image:secure_url" content="' + image + '" />',
+    '<meta property="og:image:type" content="image/jpeg" />',
+    '<meta property="og:image:width" content="1200" />',
+    '<meta property="og:image:height" content="630" />',
+    isProduct ? '<meta property="product:price:amount" content="' + price + '" />' : '',
+    isProduct ? '<meta property="product:price:currency" content="VND" />' : '',
+    isProduct ? '<meta property="product:availability" content="in stock" />' : '',
+    isProduct ? '<meta property="product:condition" content="new" />' : '',
+    '<meta property="fb:app_id" content="1321688464574422" />',
+    '<meta name="twitter:card" content="summary_large_image" />',
+    '<meta name="twitter:site" content="@bep40" />',
+    '<meta name="twitter:title" content="' + title + '" />',
+    '<meta name="twitter:description" content="' + desc + '" />',
+    '<meta name="twitter:image" content="' + image + '" />',
+    '<meta name="description" content="' + desc + '" />',
+  ].filter(Boolean).join("\n    ");
+}
+function escURL(s: string): string {
+  // Only escape what's needed for HTML attribute — URL-safe
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+function serveStatic(req: Request): Response {
+  const url = new URL(req.url);
+  const fullPath = join("/app", url.pathname.slice(1));
+  if (!existsSync(fullPath)) return new Response("Not Found", { status: 404 });
+  return new Response(Bun.file(fullPath));
+}
+async function queueHandler(req: Request): Promise<Response> {
+  if (!UPSTREAM) return Response.json({ error: "Not configured." }, { status: 404 });
+  const url = new URL(req.url);
+  const parts = url.pathname.split("/");
+  const id = parts[parts.length - 1];
+  if (!id) return Response.json({ error: "Missing id" }, { status: 400 });
+  try {
+    if (req.method === "DELETE") {
+      return await proxy("/queue/" + encodeURIComponent(id), req, { method: "DELETE" });
+    }
+    return await proxy("/queue/" + encodeURIComponent(id), req);
+  } catch {
+    return Response.json({ error: "Speech service unreachable." }, { status: 502 });
+  }
+}
+async function sessionHandler(req: Request): Promise<Response> {
+  if (!UPSTREAM) return Response.json({ error: "Not configured." }, { status: 404 });
+  try {
+    return await proxy("/session", req, { method: "POST", body: "{}" });
+  } catch {
+    return Response.json({ error: "Speech service unreachable." }, { status: 502 });
+  }
+}
+// ── Text-only chat endpoint ──
+// Uses S2S backend in text-only mode: POST /session → text chat via WebSocket
+async function textChatHandler(req: Request): Promise<Response> {
+  if (!UPSTREAM) return Response.json({ error: "Chat service not configured." }, { status: 404 });
+  try {
+    const reqBody = await req.json();
+    const userMessage = reqBody.message || "";
+    if (!userMessage) return Response.json({ error: "Missing 'message' field" }, { status: 400 });
+    // Create S2S session in text-only mode
+    const sessionResp = await fetch(UPSTREAM + "/session", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: "{}",
+    });
+    if (!sessionResp.ok) {
+      const errBody = await sessionResp.text().catch(() => "");
+      return Response.json({
+        error: "Failed to create S2S session",
+        status: sessionResp.status,
+        detail: errBody.slice(0, 500),
+      }, { status: 502 });
+    }
+    const sessionData = await sessionResp.json();
+    if (sessionData.state === "queued") {
+      // Poll the queue
+      let queueResp;
+      let attempts = 0;
+      do {
+        await new Promise(r => setTimeout(r, (sessionData.poll_interval_s || 2) * 1000));
+        queueResp = await fetch(UPSTREAM + "/queue/" + encodeURIComponent(sessionData.queue_id), {
+          headers: { "Content-Type": "application/json" },
+        });
+        if (!queueResp.ok) continue;
+        const queueData = await queueResp.json();
+        if (queueData.state === "queued") {
+          attempts++;
+          if (attempts > 30) {
+            return Response.json({ error: "Queue timed out after 60 seconds" }, { status: 504 });
+          }
+          continue;
+        }
+        const grant = queueData;
+        // Connect WebSocket
+        const ws = new WebSocket(grant.connect_url);
+        const wsPromise = new Promise<any>((resolve, reject) => {
+          ws.binaryType = "arraybuffer";
+          let msgReceived = false;
+          ws.onopen = () => {
+            // Session created — wait for session.updated then send text
+            const waitForSession = async () => {
+              while (!msgReceived) {
+                // Wait for session.created
+                // We'll use a timeout approach
+              }
+            };
+            // Send session.update then user message
+            setTimeout(() => {
+              ws.send(JSON.stringify({
+                type: "session.update",
+                session: {
+                  type: "realtime",
+                  instructions: "You are Gemma, a friendly assistant. Speak in Vietnamese. Keep responses short and natural. Only respond to the user's last message.",
+                  audio: { output: { voice: "Dylan" } }
+                }
+              }));
+            }, 500);
+            // Send user message
+            setTimeout(() => {
+              ws.send(JSON.stringify({
+                type: "conversation.item.create",
+                item: {
+                  type: "message",
+                  role: "user",
+                  content: [{ type: "input_text", text: userMessage }]
+                }
+              }));
+              ws.send(JSON.stringify({ type: "response.create" }));
+            }, 1000);
+            // Collect responses
+            let fullTranscript = "";
+            let audioBuffer = "";
+            let responseDone = false;
+            const handleMessage = (raw: string) => {
+              try {
+                const event = JSON.parse(raw);
+                const type = event?.type;
+                if (type === "response.audio_transcript.delta" || type === "response.audio_transcript.done") {
+                  const delta = (event.transcript || event.delta || "");
+                  if (delta) fullTranscript += delta;
+                }
+                if (type === "response.audio_transcript.done" || type === "response.done") {
+                  responseDone = true;
+                  clearTimeout(timeout);
+                  msgReceived = true;
+                  resolve({
+                    transcript: fullTranscript.trim(),
+                    audio: audioBuffer,
+                    audioFormat: "pcm16",
+                  });
+                }
+              } catch {}
+            };
+            ws.onmessage = (e: any) => {
+              const data = typeof e.data === "string" ? e.data : new TextDecoder("utf-8").decode(e.data);
+              handleMessage(data);
+            };
+            ws.onerror = () => reject(new Error("WebSocket error"));
+            // Timeout
+            const timeout = setTimeout(() => {
+              if (!responseDone) {
+                msgReceived = true;
+                try { ws.close(1000, "timeout"); } catch {}
+                resolve({
+                  transcript: fullTranscript.trim() || "No response received.",
+                  audio: "",
+                });
+              }
+            }, 15000);
+          };
+          ws.onclose = () => {
+            if (!msgReceived) {
+              msgReceived = true;
+              resolve({ transcript: fullTranscript || "Session closed unexpectedly", audio: "" });
+            }
+          };
+        });
+        return Response.json(await wsPromise);
+      } while (true);
+    }
+    // Session granted directly — connect WebSocket
+    const grant = sessionData;
+    const ws = new WebSocket(grant.connect_url);
+    return new Promise<Response>((resolve, reject) => {
+      ws.binaryType = "arraybuffer";
+      let msgReceived = false;
+      ws.onopen = () => {
+        // Send session.update
+        setTimeout(() => {
+          ws.send(JSON.stringify({
+            type: "session.update",
+            session: {
+              type: "realtime",
+              instructions: "You are Gemma, a friendly assistant. Speak in Vietnamese. Keep responses short, natural, and warm. Only respond directly to the user's message in text form. Do not ask questions or request audio input.",
+              audio: { output: { voice: "Dylan" } }
+            }
+          }));
+        }, 500);
+        // Send user message via text
+        setTimeout(() => {
+          ws.send(JSON.stringify({
+            type: "conversation.item.create",
+            item: {
+              type: "message",
+              role: "user",
+              content: [{ type: "input_text", text: userMessage }]
+            }
+          }));
+          ws.send(JSON.stringify({ type: "response.create" }));
+        }, 1000);
+        // Collect response
+        let fullTranscript = "";
+        let responseDone = false;
+        const handleMessage = (raw: string) => {
+          try {
+            const event = JSON.parse(raw);
+            const type = event?.type;
+            if (type === "response.audio_transcript.delta" || type === "response.output_audio_transcript.delta") {
+              const delta = event.delta || "";
+              if (delta) fullTranscript += delta;
+            }
+            if (type === "response.audio_transcript.done" || type === "response.output_audio_transcript.done") {
+              const segment = event.transcript || "";
+              if (segment) fullTranscript += segment;
+            }
+            if (type === "response.done") {
+              responseDone = true;
+              clearTimeout(timeout);
+              msgReceived = true;
+              try { ws.close(1000, "done"); } catch {}
+              resolve(Response.json({
+                transcript: fullTranscript.trim(),
+                status: event.response?.status ?? "completed",
+              }));
+            }
+          } catch (e: any) {
+            console.warn("[chat] parse error:", e.message);
+          }
+        };
+        ws.onmessage = (e: any) => {
+          const data = typeof e.data === "string" ? e.data : new TextDecoder("utf-8").decode(e.data);
+          handleMessage(data);
+        };
+        ws.onerror = () => {
+          if (!msgReceived) {
+            msgReceived = true;
+            try { ws.close(1000, "error"); } catch {}
+            resolve(Response.json({
+              transcript: "Error connecting to chat service.",
+              status: "error",
+            }));
+          }
+        };
+        ws.onclose = () => {
+          if (!msgReceived) {
+            msgReceived = true;
+            resolve(Response.json({
+              transcript: fullTranscript.trim() || "Session closed.",
+              status: "closed",
+            }));
+          }
+        };
+        // Timeout
+        const timeout = setTimeout(() => {
+          if (!msgReceived) {
+            msgReceived = true;
+            try { ws.close(1000, "timeout"); } catch {}
+            resolve(Response.json({
+              transcript: fullTranscript.trim() || "No response received. The service may be busy.",
+              status: "timeout",
+            }));
+          }
+        }, 20000);
+      };
+      ws.onclose = () => {
+        if (!msgReceived) {
+          msgReceived = true;
+          clearTimeout(timeout);
+          resolve(Response.json({
+            transcript: "Connection closed.",
+            status: "closed",
+          }));
+        }
+      };
+    });
+  } catch (err: any) {
+    console.error("[/api/chat] Error:", err.message);
+    return Response.json({ error: "Chat service error: " + err.message }, { status: 500 });
+  }
+}
+const server = Bun.serve({
+  port: PORT,
+  routes: {
+    "/": { GET: serveProductOG },
+    "/api/config": { GET: () => Response.json({ lb: Boolean(UPSTREAM), allowDirect: !UPSTREAM }) },
+    "/api/avatars": { GET: async () => Response.json({ avatars: await listAvatars() }) },
+    "/api/vaix/products": { GET: async (req: Request) => {
+      try {
+        await loadVaixProducts();
+        if (!VAIX_PRODUCTS?.length) return Response.json({ products: [], total: 0 });
+        const url = new URL(req.url);
+        const limit = Math.min(Number(url.searchParams.get("limit") || "20"), 99999);
+        const total = VAIX_PRODUCTS.length;
+        const formatted = VAIX_PRODUCTS.map((p, i) => formatProduct(p, i)).slice(0, Math.min(limit, total));
+        return Response.json({
+          products: formatted,
+          total, limit, page: 1, perPage: limit,
+          totalPages: 1,
+        });
+      } catch { return Response.json({ products: [], total: 0 }); }
+    }},
+    "/api/vaix/status": { GET: () => Response.json({ loaded: VAIX_LOADED, count: VAIX_PRODUCTS?.length ?? 0, lastSyncMs: VAIX_LAST_SYNC }) },
+    "/api/vaix/search": { GET: async (req: Request) => {
+      const url = new URL(req.url);
+      const q = url.searchParams.get("q");
+      if (!q) return Response.json({ results: [], aiAnswer: "Missing ?q=" }, { status: 400 });
+      try {
+        await loadVaixProducts();
+        if (!VAIX_PRODUCTS?.length) return Response.json({ results: [], aiAnswer: "No products." });
+        const qNorm = norm(q);
+        const terms = qNorm.split(/\s+/).filter(t => t.length > 1);
+        const results: Array<{ product: any; score: number }> = [];
+        for (let i = 0; i < VAIX_PRODUCTS.length; i++) {
+          const p = VAIX_PRODUCTS[i];
+          let score = 0;
+          const nm = norm(p.name || p.n || "");
+          const sk = norm(p.sku || p.mod || p.model || "");
+          const br = norm(p.brand || "");
+          const ca = norm(p.c || p.cat || "");
+          const de = norm(p.desc || "");
+          const ft = norm(Array.isArray(p.feats) ? p.feats.join(" ") : "");
+          if (nm.includes(qNorm)) score += 20;
+          if (sk.includes(qNorm)) score += 15;
+          if (br.includes(qNorm)) score += 10;
+          if (ca.includes(qNorm)) score += 8;
+          for (const t of terms) {
+            if (nm.includes(t)) score += 3;
+            if (sk.includes(t)) score += 2;
+            if (br.includes(t)) score += 2;
+            if (ca.includes(t)) score += 1;
+            if (de.includes(t)) score += 1;
+            if (ft.includes(t)) score += 1;
+          }
+          if (score > 0) results.push({ product: formatProduct(p, i), score });
+        }
+        results.sort((a, b) => b.score - a.score);
+        return Response.json({ results: results.slice(0, 50), aiAnswer: results.length > 0 ? "Found " + results.length + " products." : "No products found." });
+      } catch (err: any) { return Response.json({ results: [], error: err.message }); }
+    }},
+    "/api/vaix/sync": { POST: async () => {
+      VAIX_PRODUCTS = null;
+      VAIX_LOADED = false;
+      VAIX_LOADING = false;
+      await loadVaixProducts();
+      return Response.json({ synced: true, count: VAIX_PRODUCTS?.length ?? 0 });
+    }},
+    "/api/wiki/search": { GET: async (req: Request) => {
+      const q = new URL(req.url).searchParams.get("q");
+      if (!q) return Response.json({ error: "Missing ?q=" }, { status: 400 });
+      try {
+        const r = await fetch("https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + encodeURIComponent(q) + "&format=json&srlimit=5&origin=*");
+        const d = await r.json();
+        return Response.json({ results: (d.query?.search ?? []).map((r: any) => ({ title: r.title, snippet: r.snippet.replace(/<[^>]+>/g, "") })) });
+      } catch { return Response.json({ error: "Wikipedia unreachable." }, { status: 502 }); }
+    }},
+    "/api/wiki/summary": { GET: async (req: Request) => {
+      const t = new URL(req.url).searchParams.get("title");
+      if (!t) return Response.json({ error: "Missing ?title=" }, { status: 400 });
+      try {
+        const r = await fetch("https://en.wikipedia.org/api/rest_v1/page/summary/" + encodeURIComponent(t) + "?origin=*");
+        const d = await r.json();
+        return Response.json({ title: d.title, extract: d.extract, url: d.content_urls?.desktop?.page });
+      } catch { return Response.json({ error: "Wikipedia unreachable." }, { status: 502 }); }
+    }},
+    "/api/web/search": { GET: async (req: Request) => {
+      const q = new URL(req.url).searchParams.get("q");
+      if (!q) return Response.json({ error: "Missing ?q=" }, { status: 400 });
+      try {
+        const r = await fetch("https://html.duckduckgo.com/html/?q=" + encodeURIComponent(q), { headers: { "User-Agent": "Mozilla/5.0" } });
+        const h = await r.text();
+        const res: Array<{ title: string; snippet: string; url: string }> = [];
+        const lm = [...h.matchAll(/<a[^>]+class="result__a"[^>]*href="([^"]*)"[^>]*>([\s\S]*?)<\/a>/gi)];
+        const sm = [...h.matchAll(/<a[^>]+class="result__snippet"[^>]*>([\s\S]*?)<\/a>/gi)];
+        for (let i = 0; i < Math.min(lm.length, 5); i++) {
+          let href = lm[i][1];
+          const ru = href.match(/uddg=(https?%3[^&]+)/i);
+          if (ru) href = decodeURIComponent(ru[1]);
+          const title = lm[i][2].replace(/<[^>]+>/g, "").trim();
+          const snippet = sm[i] ? sm[i][1].replace(/<[^>]+>/g, "").trim() : "";
+          if (title) {
+            // Extract source from URL
+            let source = '';
+            try {
+              const urlObj = new URL(href);
+              source = urlObj.hostname.replace(/^www\./, '');
+            } catch (_) { source = ''; }
+            res.push({ title, snippet, url: href, source });
+          }
+        }
+        return Response.json({ results: res });
+      } catch { return Response.json({ error: "Web search unreachable." }, { status: 502 }); }
+    }},
+    "/api/web/content": { GET: async (req: Request) => {
+      const u = new URL(req.url).searchParams.get("url");
+      if (!u) return Response.json({ error: "Missing ?url=" }, { status: 400 });
+      try {
+        const r = await fetch(u, { headers: { "User-Agent": "Mozilla/5.0" }, signal: AbortSignal.timeout(8000) });
+        const h = await r.text();
+        const t = h.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "").replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "").replace(/<[^>]+>/g, " ").replace(/&[a-z]+;/g, " ").replace(/\s+/g, " ").trim();
+        return Response.json({ content: t.slice(0, 3000), url: u });
+      } catch { return Response.json({ error: "Could not fetch page." }, { status: 502 }); }
+    }},
+    "/api/session": { POST: sessionHandler },
+    "/api/queue/:id": { GET: queueHandler, DELETE: queueHandler },
+    "/api/chat": { POST: textChatHandler },
+    "/worklets/:name": (req: Request) => staticFile("worklets", req.params.name!),
+    "/vendor/:name": (req: Request) => staticFile("vendor", req.params.name!),
+    "/src/vendor/:name": (req: Request) => staticFile("src/vendor", req.params.name!),
+    "/avatars/:name": (req: Request) => staticFile("avatars", req.params.name!),
+    "/src/:name": (req: Request) => srcFile("src", req.params.name!),
+    "/src/s2s/:name": (req: Request) => srcFile("src/s2s", req.params.name!),
+    "/api/news/hot": { GET: async () => {
+      try {
+        const resp = await fetch("https://news.google.com/rss?hl=vi-VN&gl=VN&ceid=VN:vi");
+        if (!resp.ok) throw new Error("RSS failed");
+        const rssText = await resp.text();
+        // Parse <item> blocks: title, link, source
+        const itemBlocks = rssText.match(/<item>[\s\S]*?<\/item>/gi) || [];
+        const titles: string[] = [];
+        const articles: Array<{ source: string; title: string; url: string }> = [];
+        for (const block of itemBlocks) {
+          const tm = block.match(/<title>(?:<!\[CDATA\[)?(.*?)(?:\]\]>)?<\/title>/i);
+          const lm = block.match(/<link>\s*<\!\[CDATA\[(.*?)\]\]>\s*<\/link>/i) || block.match(/<link>(.*?)<\/link>/i);
+          const sm = block.match(/<source[^>]*>(.*?)<\/source>/i) || block.match(/<source[^>]*url="([^"]*)"[^>]*>/i);
+          if (!tm) continue;
+          const title = tm[1].replace(/\+|_/g, " ").trim();
+          if (title) titles.push(title);
+          let url = "";
+          if (lm) {
+            url = (lm[1] || "").trim();
+            // Google News links are /articles/... redirects → keep them, they work in browser
+          }
+          let source = "";
+          if (sm) source = (sm[1] || sm[0] || "").replace(/<[^>]+>/g, "").trim();
+          if (title && url) {
+            articles.push({ source: source || "", title, url });
+          }
+          if (titles.length >= 12) break;
+        }
+        return Response.json({ titles: titles.slice(0, 12), articles });
+      } catch (e: any) {
+        return Response.json({ error: e.message, titles: [], articles: [] }, { status: 502 });
+      }
+    }},
+    "/api/news/articles": { GET: async (req: Request) => {
+      // Search Google News RSS for a specific topic and return SPECIFIC detailed articles
+      // with real clickable links (each card = one concrete news article, not a category page).
+      const url = new URL(req.url);
+      const q = (url.searchParams.get("q") || "").trim();
+      if (!q) return Response.json({ error: "Missing ?q=" }, { status: 400 });
+      try {
+        const resp = await fetch(
+          "https://news.google.com/rss/search?q=" + encodeURIComponent(q) +
+          "&hl=vi-VN&gl=VN&ceid=VN:vi",
+          { headers: { "User-Agent": "Mozilla/5.0 (compatible; GemmaAvatar/1.0)" } }
+        );
+        if (!resp.ok) throw new Error("RSS failed " + resp.status);
+        const rssText = await resp.text();
+        const itemBlocks = rssText.match(/<item>[\s\S]*?<\/item>/gi) || [];
+        const articles: Array<{ source: string; title: string; url: string; desc: string }> = [];
+        for (const block of itemBlocks) {
+          const tm = block.match(/<title>(?:<!\[CDATA\[)?(.*?)(?:\]\]>)?<\/title>/i);
+          const lm = block.match(/<link>\s*<\!\[CDATA\[(.*?)\]\]>\s*<\/link>/i) || block.match(/<link>(.*?)<\/link>/i);
+          const sm = block.match(/<source[^>]*url="([^"]*)"[^>]*>(.*?)<\/source>/i) || block.match(/<source[^>]*>(.*?)<\/source>/i);
+          const dm = block.match(/<description>(?:<!\[CDATA\[)?([\s\S]*?)(?:\]\]>)?<\/description>/i);
+          if (!tm) continue;
+          let title = tm[1].replace(/\+|_/g, " ").trim();
+          // Strip trailing "- SourceName" that Google appends to titles
+          let source = "";
+          if (sm) {
+            source = (sm[2] || sm[1] || "").replace(/<[^>]+>/g, "").trim();
+            if (source && title.endsWith(" - " + source)) title = title.slice(0, -(source.length + 3)).trim();
+          }
+          if (!title) continue;
+          let url = "";
+          if (lm) url = (lm[1] || "").trim();
+          let desc = "";
+          if (dm) {
+            // Remove all HTML tags (including malformed Google News CDATA tags)
+            desc = dm[1]
+              .replace(/<[^>]*>/g, " ")
+              .replace(/\bhttps?:\/\/\S+/gi, "")
+              .replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">")
+              .replace(/&nbsp;/g, " ")
+              .replace(/\s+/g, " ").trim().slice(0, 160);
+          }
+          if (title && url) {
+            articles.push({ source: source || "", title, url, desc });
+          }
+          if (articles.length >= 8) break;
+        }
+        return Response.json({ articles, query: q });
+      } catch (e: any) {
+        return Response.json({ error: e.message, articles: [] }, { status: 502 });
+      }
+    }},
+    "/api/news/images": { GET: async (req: Request) => {
+      // Return REAL per-article images for a topic using Vietnamese portal RSS feeds
+      // (VnExpress feeds include <enclosure>/<img> with real article thumbnails).
+      const url = new URL(req.url);
+      const q = (url.searchParams.get("q") || "").trim();
+      const topicNorm = q.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[đĐ]/g, "d");
+      const feeds: Array<{ cat: string; u: string }> = [
+        { cat: "tin-moi-nhat", u: "https://vnexpress.net/rss/tin-moi-nhat.rss" },
+        { cat: "thoi-su", u: "https://vnexpress.net/rss/thoi-su.rss" },
+        { cat: "the-thao", u: "https://vnexpress.net/rss/the-thao.rss" },
+        { cat: "kinh-doanh", u: "https://vnexpress.net/rss/kinh-doanh.rss" },
+        { cat: "giai-tri", u: "https://vnexpress.net/rss/giai-tri.rss" },
+        { cat: "the-gioi", u: "https://vnexpress.net/rss/the-gioi.rss" },
+        { cat: "doi-song", u: "https://vnexpress.net/rss/doi-song.rss" },
+        { cat: "suc-khoe", u: "https://vnexpress.net/rss/suc-khoe.rss" },
+        { cat: "giao-duc", u: "https://vnexpress.net/rss/giao-duc.rss" },
+      ];
+      const normStr = (s: string) => (s || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[đĐ]/g, "d");
+      const all: Array<{ title: string; url: string; image: string; source: string; desc: string }> = [];
+      try {
+        await Promise.all(feeds.map(async (f) => {
+          try {
+            const r = await fetch(f.u, { headers: { "User-Agent": "Mozilla/5.0" } });
+            if (!r.ok) return;
+            const t = await r.text();
+            const items = t.match(/<item>[\s\S]*?<\/item>/gi) || [];
+            for (const it of items) {
+              const tm = it.match(/<title>(?:<!\[CDATA\[)?(.*?)(?:\]\]>)?<\/title>/i);
+              const lm = it.match(/<link>(.*?)<\/link>/i);
+              const em = it.match(/<enclosure[^>]*url="([^"]+)/i);
+              const im = it.match(/<img[^>]+src="([^"]+)/i);
+              if (!tm || !lm) continue;
+              const title = tm[1].trim();
+              let image = (em && em[1]) ? em[1].replace(/&amp;/g, "&") : "";
+              if (!image && im) image = im[1].replace(/&amp;/g, "&");
+              if (!title || !image) continue;
+              const link = lm[1].trim();
+              const dm = it.match(/<description>(?:<!\[CDATA\[)?([\s\S]*?)(?:\]\]>)?<\/description>/i);
+              let desc = "";
+              if (dm) desc = dm[1].replace(/<[^>]*>/g, " ").replace(/&[a-z]+;/gi, " ").replace(/\s+/g, " ").trim().slice(0, 200);
+              // Filter by topic if a query was provided
+              if (q && !normStr(title + " " + link).includes(topicNorm)) continue;
+              all.push({ title, url: link, image, source: "VnExpress", desc });
+            }
+          } catch (_) {}
+        }));
+      } catch (_) {}
+      // If no exact topic match, fall back to the freshest topical items (always have images)
+      if (all.length === 0 && q) {
+        try {
+          const r = await fetch("https://vnexpress.net/rss/tin-moi-nhat.rss", { headers: { "User-Agent": "Mozilla/5.0" } });
+          const t = await r.text();
+          const items = t.match(/<item>[\s\S]*?<\/item>/gi) || [];
+          for (const it of items) {
+            const tm = it.match(/<title>(?:<!\[CDATA\[)?(.*?)(?:\]\]>)?<\/title>/i);
+            const lm = it.match(/<link>(.*?)<\/link>/i);
+            const em = it.match(/<enclosure[^>]*url="([^"]+)/i);
+            if (tm && lm) {
+              const image = em ? em[1].replace(/&amp;/g, "&") : "";
+              if (image && tm[1].trim()) {
+                const dm2 = it.match(/<description>(?:<!\[CDATA\[)?([\s\S]*?)(?:\]\]>)?<\/description>/i);
+                let desc2 = "";
+                if (dm2) desc2 = dm2[1].replace(/<[^>]*>/g, " ").replace(/&[a-z]+;/gi, " ").replace(/\s+/g, " ").trim().slice(0, 200);
+                all.push({ title: tm[1].trim(), url: lm[1].trim(), image, source: "VnExpress", desc: desc2 });
+              }
+            }
+          }
+        } catch (_) {}
+      }
+      return Response.json({ images: all.slice(0, 8), query: q });
+    }},
+    "/api/news/topic": { GET: async (req: Request) => {
+      // Search Vietnamese news for a specific topic and return concrete article cards with links.
+      const url = new URL(req.url);
+      const q = (url.searchParams.get("q") || "").trim();
+      if (!q) return Response.json({ error: "Missing ?q=" }, { status: 400 });
+      try {
+        const portalQueries = [
+          q + " site:vnexpress.net",
+          q + " site:tuoitre.vn",
+          q + " site:thanhnien.vn",
+          q + " site:cafef.vn",
+          q + " site:dantri.com.vn",
+          "tin tức " + q + " hôm nay",
+        ];
+        const allResults: Array<{ title: string; snippet: string; url: string; source: string }> = [];
+        await Promise.all(portalQueries.map(nq =>
+          fetch("https://html.duckduckgo.com/html/?q=" + encodeURIComponent(nq), { headers: { "User-Agent": "Mozilla/5.0" } })
+            .then(r => r.text())
+            .then(h => {
+              const lm = [...h.matchAll(/<a[^>]+class="result__a"[^>]*href="([^"]*)"[^>]*>([\s\S]*?)<\/a>/gi)];
+              const sm = [...h.matchAll(/<a[^>]+class="result__snippet"[^>]*>([\s\S]*?)<\/a>/gi)];
+              for (let i = 0; i < Math.min(lm.length, 4); i++) {
+                let href = lm[i][1];
+                const ru = href.match(/uddg=(https?%3[^&]+)/i);
+                if (ru) href = decodeURIComponent(ru[1]);
+                const title = lm[i][2].replace(/<[^>]+>/g, "").trim();
+                if (!title) continue;
+                const snippet = sm[i] ? sm[i][1].replace(/<[^>]+>/g, "").trim() : "";
+                let source = "";
+                try { source = new URL(href).hostname.replace(/^www\./, ""); } catch (_) {}
+                allResults.push({ title, snippet, url: href, source });
+              }
+            })
+            .catch(() => {})
+        ));
+        // Deduplicate + drop empty
+        const seen = new Set<string>();
+        const unique = allResults.filter(r => {
+          if (!r.url || seen.has(r.url)) return false;
+          seen.add(r.url);
+          return r.source && !/duckduckgo|google/i.test(r.source);
+        });
+        return Response.json({ results: unique.slice(0, 8), query: q });
+      } catch (e: any) {
+        return Response.json({ error: e.message, results: [] }, { status: 502 });
+      }
+    }},
+    "/api/logs/client": { POST: async (req: Request) => {
+      try {
+        const body = await req.json();
+        console.error("[ClientError]", body?.message ?? String(body), body?.details ? JSON.stringify(body) : "");
+        return Response.json({ ok: true });
+      } catch(e: any) { return Response.json({ error: e.message }, { status: 400 }); }
+    }},
+    "/api/vaix/json": async () => {
+      try {
+        const r = await fetch(JSON_URL);
+        if (!r.ok) throw new Error("HTTP "+r.status);
+        const data = await r.json();
+        // Only return top 1000 to reduce server memory
+        const prods = Array.isArray(data) ? data.slice(0, 1000) : [];
+        return new Response(JSON.stringify(prods), {
+          headers: { "Content-Type": "application/json; charset=utf-8", "Access-Control-Allow-Origin": "*" }
+        });
+      } catch(e) {
+        return Response.json({ error: "JSON fetch failed: " + e.message }, { status: 502 });
+      }
+    },
+    "/*": { GET: serveStatic },
+  },
+});
+console.log("Gemma Avatar listening on port " + PORT + " | Upstream: " + (UPSTREAM || "none"));

index.ts.patched ADDED Viewed

	@@ -0,0 +1,684 @@

+/**
+ * Gemma Avatar — realtime voice/text chat with 3D talking-head avatar + V.AI STUDIO.
+ * Products: frontend loads DIRECTLY from dataset JSON URL (1 HTTP GET, no backend proxy).
+ * Backend keeps /api/vaix/products for backward compat / debugging.
+ * Fast, reliable, no WASM, no compiled deps.
+ *
+ * S2S upstream: victor-gemma-avatar.hf.space S2S backend (smolagents now gates access).
+ * Text-only chat: /api/chat — uses victor's S2S backend in text-only mode.
+ */
+import index from "./index.html";
+import { readdir } from "fs/promises";
+import { join } from "path";
+import { existsSync } from "fs";
+const LOAD_BALANCER_URL = (Bun.env.LOAD_BALANCER_URL ?? "").trim().replace(/\/$/, "");
+const SESSION_PROXY_URL = (Bun.env.SESSION_PROXY_URL ?? "https://victor-gemma-avatar.hf.space/api").trim().replace(/\/$/, "");
+const UPSTREAM = LOAD_BALANCER_URL || SESSION_PROXY_URL;
+const PORT = Number(Bun.env.PORT ?? 7860);
+// ── JSON file from dataset (33.5MB, 23.4K rows) — kept for backend API compat ──
+const JSON_URL =
+  "https://huggingface.co/datasets/bep40/grob-products-updated" +
+  "/resolve/main/products_with_slugs.json";
+let VAIX_PRODUCTS: any[] | null = null;
+let VAIX_LOADING = false;
+let VAIX_LOADED = false;
+let VAIX_LAST_SYNC = Date.now();
+async function loadVaixProducts(): Promise<void> {
+  if (VAIX_LOADED && VAIX_PRODUCTS?.length) return;
+  if (VAIX_LOADING) {
+    for (let i = 0; i < 120; i++) {
+      await new Promise(r => setTimeout(r, 500));
+      if (VAIX_LOADED) return;
+    }
+  }
+  VAIX_LOADING = true;
+  const startMs = Date.now();
+  console.log("[VAIX] Fetching JSON from bep40/grob-products-updated...");
+  try {
+    const ctrl = new AbortController();
+    const timer = setTimeout(() => ctrl.abort(), 120_000);
+    const resp = await fetch(JSON_URL, { signal: ctrl.signal });
+    clearTimeout(timer);
+    if (!resp.ok) throw new Error("HTTP " + resp.status);
+    const data = await resp.json();
+    VAIX_PRODUCTS = Array.isArray(data) ? data : [];
+    VAIX_LAST_SYNC = Date.now();
+    console.log("[VAIX] Loaded " + VAIX_PRODUCTS.length + " products in " + (Date.now() - startMs) + "ms");
+  } catch (err: any) {
+    console.error("[VAIX] Error:", err.message);
+    setTimeout(() => { VAIX_LOADING = false; VAIX_LOADED = false; loadVaixProducts(); }, 10_000);
+  } finally {
+    VAIX_LOADING = false;
+  }
+}
+loadVaixProducts().catch(() => {});
+setTimeout(() => { if (!VAIX_LOADED) loadVaixProducts().catch(() => {}); }, 3000);
+function norm(s: string): string {
+  return String(s || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[đĐ]/g, "d").replace(/[.\-\s]/g, "");
+}
+async function proxy(path: string, req: Request, init: any = {}): Promise<Response> {
+  const headers = new Headers(init.headers);
+  headers.set("Content-Type", "application/json");
+  const cookie = req.headers.get("cookie");
+  if (cookie) headers.set("Cookie", cookie);
+  const resp = await fetch(UPSTREAM + path, { ...init, headers });
+  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")] : []);
+  for (const sc of setCookies) out.headers.append("Set-Cookie", sc.split(";").map((p: string) => p.trim()).filter((p: string) => !/^domain=/i.test(p)).join("; "));
+  return out;
+}
+function staticFile(dir: string, name: string) {
+  return new Response(Bun.file(import.meta.dir + "/public/" + dir + "/" + name));
+}
+async function listAvatars() {
+  const avatarsDir = join(import.meta.dir, "public/avatars");
+  const names: string[] = [];
+  try {
+    const dir = await readdir(avatarsDir, { withFileTypes: true });
+    for (const e of dir) {
+      if (e.isFile() && e.name.endsWith(".glb")) names.push(e.name);
+    }
+  } catch {}
+  return names.sort();
+}
+function formatProduct(p: any, idx: number) {
+  return {
+    name: p.name || p.n || "",
+    title_clean: p.name || p.n || "",
+    brand: p.brand || "",
+    price: p.p || p.price || "",
+    priceNum: Number(p.pn ?? 0),
+    category: p.c || p.cat || "",
+    category_slug: p.cs || "",
+    category_icon: p.ci || "fa-box",
+    sku: p.sku || "",
+    model: p.mod || p.model || "",
+    slug: p.slug || "",
+    description: p.desc || "",
+    summary: p.sum || p.summary || "",
+    features: Array.isArray(p.feats) ? p.feats : [],
+    specs: (typeof p.specs === "object" && p.specs !== null) ? p.specs : {},
+    video: p.vid || "",
+    image: p.i || (Array.isArray(p.imgs) ? p.imgs[0] : "") || (Array.isArray(p.images) ? p.images[0] : ""),
+    images: p.imgs || p.images || [],
+    link: p.l || "",
+    _idx: p._idx ?? idx,
+  };
+}
+async function serveProductOG(req: Request): Promise<Response> {
+  const url = new URL(req.url);
+  const productSlug = url.searchParams.get("product");
+  if (productSlug && VAIX_PRODUCTS?.length) {
+    const foundProduct = VAIX_PRODUCTS.find((p: any) => {
+      const slug = p.slug || p._source_alias || "";
+      const normSlug = slug.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/đ/g, "d").replace(/Đ/g, "d");
+      const normTarget = productSlug.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/đ/g, "d").replace(/Đ/g, "d");
+      return normSlug === normTarget || normSlug.includes(normTarget) || normTarget.includes(normSlug);
+    });
+    if (foundProduct) {
+      const fp = formatProduct(foundProduct, foundProduct._idx ?? 0);
+      const fpName = fp.name || fp.model || "Sản phẩm";
+      const fpBrand = fp.brand || "V.AI STUDIO";
+      const fpPriceNum = fp.priceNum || Number(fp.pn) || 0;
+      const fpDesc = (fp.summary || fp.description || "").replace(/<[^>]+>/g, "").trim().slice(0, 200);
+      const fpImg = fp.image || (fp.images && fp.images[0]) || "";
+      const fpCategory = fp.category || "";
+      const fpModel = fp.model || "";
+      const fpSpecs = fp.specs || {};
+      let specsStr = "";
+      const specKeys = Object.keys(fpSpecs).slice(0, 8);
+      for (const sk of specKeys) {
+        specsStr += `\n*   ${sk}: ${fpSpecs[sk]}`;
+      }
+      const ogDescription = fpDesc ? fpDesc + specsStr : "V.AI STUDIO - 8000+ sản phẩm gia dụng cao cấp";
+      const fallbackImg = "https://huggingface.co/spaces/bep40/vai-avatar2/resolve/main/thumbnail.webp";
+      const ogImage = fpImg || fallbackImg;
+      const ogTitle = `${fpName} | ${fpBrand} - V.AI STUDIO`;
+      const ogTags = `
+    <meta property="og:title" content="${ogTitle}" />
+    <meta property="og:description" content="${ogDescription}" />
+    <meta property="og:url" content="${url.href}" />
+    <meta property="og:type" content="product" />
+    <meta property="og:image" content="${ogImage}" />
+    <meta property="og:image:secure_url" content="${ogImage}" />
+    <meta property="og:image:type" content="image/jpeg" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="product:price:amount" content="${fpPriceNum}" />
+    <meta property="product:price:currency" content="VND" />
+    <meta property="product:availability" content="in stock" />
+    <meta property="product:condition" content="new" />
+    <meta property="fb:app_id" content="1321688464574422" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@bep40" />
+    <meta name="twitter:title" content="${ogTitle}" />
+    <meta name="twitter:description" content="${ogDescription}" />
+    <meta name="twitter:image" content="${ogImage}" />
+    <meta name="description" content="${ogDescription}" />`;
+      return new Response(index.replace(/<\/head>/, ogTags + "\n  </head>"), {
+        status: 200,
+        headers: { "Content-Type": "text/html; charset=utf-8" },
+      });
+    }
+  }
+  return new Response(index, {
+    status: 200,
+    headers: { "Content-Type": "text/html; charset=utf-8" },
+  });
+}
+async function serveProductOG(req: Request): Promise<Response> {
+  const url = new URL(req.url);
+  const productSlug = url.searchParams.get("product");
+  function escapeHTML(str: string): string {
+    return String(str || "")
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;")
+      .replace(/\r\n/g, " ")
+      .replace(/\n/g, " ")
+      .replace(/\r/g, " ")
+      .slice(0, 350);
+  }
+  if (productSlug && VAIX_PRODUCTS?.length) {
+    const foundProduct = VAIX_PRODUCTS.find((p: any) => {
+      const slug = p.slug || p._source_alias || "";
+      const normSlug = slug.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/đ/g, "d").replace(/Đ/g, "d");
+      const normTarget = productSlug.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/đ/g, "d").replace(/Đ/g, "d");
+      return normSlug === normTarget || normSlug.includes(normTarget) || normTarget.includes(normSlug);
+    });
+    if (foundProduct) {
+      const fp = formatProduct(foundProduct, foundProduct._idx ?? 0);
+      // HTML-escape ALL values before injecting
+      const ogTitle = escapeHTML(`${fp.name || fp.model || "Sản phẩm"} | ${fp.brand || "V.AI STUDIO"} - V.AI STUDIO`);
+      const fpDesc = escapeHTML((fp.summary || fp.description || "").trim().slice(0, 200));
+      const fpImg = escapeHTML(fp.image || (fp.images && fp.images[0]) || "");
+      const fpPriceNum = fp.priceNum || Number(fp.pn) || 0;
+      let specsStr = "";
+      const specKeys = Object.keys(fp.specs || {}).slice(0, 8);
+      for (const sk of specKeys) {
+        const key = escapeHTML(sk || "");
+        const val = escapeHTML(String(fp.specs[sk] || ""));
+        specsStr += `${key}: ${val}, `;
+      }
+      specsStr = specsStr.slice(0, -2);
+      const ogDescription = fpDesc ? `${fpDesc}${specsStr ? " -- " + specsStr : ""}` : "V.AI STUDIO - 8000+ sản phẩm gia dụng cao cấp";
+      const fallbackImg = escapeHTML("https://huggingface.co/spaces/bep40/vai-avatar2/resolve/main/thumbnail.webp");
+      const ogImage = fpImg || fallbackImg;
+      const ogTags = `<meta property="og:title" content="${ogTitle}" />
+    <meta property="og:description" content="${ogDescription}" />
+    <meta property="og:url" content="${escapeHTML(url.href)}" />
+    <meta property="og:type" content="product" />
+    <meta property="og:image" content="${ogImage}" />
+    <meta property="og:image:secure_url" content="${ogImage}" />
+    <meta property="og:image:type" content="image/jpeg" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="product:price:amount" content="${fpPriceNum}" />
+    <meta property="product:price:currency" content="VND" />
+    <meta property="product:availability" content="in stock" />
+    <meta property="product:condition" content="new" />
+    <meta property="fb:app_id" content="1321688464574422" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@bep40" />
+    <meta name="twitter:title" content="${ogTitle}" />
+    <meta name="twitter:description" content="${ogDescription}" />
+    <meta name="twitter:image" content="${ogImage}" />
+    <meta name="description" content="${ogDescription}" />`;
+      return new Response(index.replace(/<\/head>/, ogTags + "\n  </head>"), {
+        status: 200,
+        headers: { "Content-Type": "text/html; charset=utf-8" },
+      });
+    }
+  }
+  // No product param — serve default HTML with static OG fallback
+  const fallbackTitle = escapeHTML("Gemma Avatar + V.AI STUDIO - Chat & Voice AI");
+  const fallbackDesc = escapeHTML("Trò chuyện voice/text với Gemma 4. Khám phá 8000+ sản phẩm gia dụng.");
+  const fallbackOgTags = `<meta property="og:title" content="${fallbackTitle}" />
+    <meta property="og:description" content="${fallbackDesc}" />
+    <meta property="og:url" content="${escapeHTML(url.href)}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="${fallbackImg}" />
+    <meta name="twitter:card" content="summary_large_image" />`;
+  return new Response(index.replace(/<\/head>/, fallbackOgTags + "\n  </head>"), {
+    status: 200,
+    headers: { "Content-Type": "text/html; charset=utf-8" },
+  });
+}`
+function serveStatic(req: Request): Response {
+  const url = new URL(req.url);
+  const fullPath = join("/app", url.pathname.slice(1));
+  if (!existsSync(fullPath)) return new Response("Not Found", { status: 404 });
+  return new Response(Bun.file(fullPath));
+}
+async function queueHandler(req: Request): Promise<Response> {
+  if (!UPSTREAM) return Response.json({ error: "Not configured." }, { status: 404 });
+  const url = new URL(req.url);
+  const parts = url.pathname.split("/");
+  const id = parts[parts.length - 1];
+  if (!id) return Response.json({ error: "Missing id" }, { status: 400 });
+  try {
+    if (req.method === "DELETE") {
+      return await proxy("/queue/" + encodeURIComponent(id), req, { method: "DELETE" });
+    }
+    return await proxy("/queue/" + encodeURIComponent(id), req);
+  } catch {
+    return Response.json({ error: "Speech service unreachable." }, { status: 502 });
+  }
+}
+async function sessionHandler(req: Request): Promise<Response> {
+  if (!UPSTREAM) return Response.json({ error: "Not configured." }, { status: 404 });
+  try {
+    return await proxy("/session", req, { method: "POST", body: "{}" });
+  } catch {
+    return Response.json({ error: "Speech service unreachable." }, { status: 502 });
+  }
+}
+// ── Text-only chat endpoint ──
+// Uses S2S backend in text-only mode: POST /session → text chat via WebSocket
+async function textChatHandler(req: Request): Promise<Response> {
+  if (!UPSTREAM) return Response.json({ error: "Chat service not configured." }, { status: 404 });
+  try {
+    const reqBody = await req.json();
+    const userMessage = reqBody.message || "";
+    if (!userMessage) return Response.json({ error: "Missing 'message' field" }, { status: 400 });
+    // Create S2S session in text-only mode
+    const sessionResp = await fetch(UPSTREAM + "/session", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: "{}",
+    });
+    if (!sessionResp.ok) {
+      const errBody = await sessionResp.text().catch(() => "");
+      return Response.json({
+        error: "Failed to create S2S session",
+        status: sessionResp.status,
+        detail: errBody.slice(0, 500),
+      }, { status: 502 });
+    }
+    const sessionData = await sessionResp.json();
+    if (sessionData.state === "queued") {
+      // Poll the queue
+      let queueResp;
+      let attempts = 0;
+      do {
+        await new Promise(r => setTimeout(r, (sessionData.poll_interval_s || 2) * 1000));
+        queueResp = await fetch(UPSTREAM + "/queue/" + encodeURIComponent(sessionData.queue_id), {
+          headers: { "Content-Type": "application/json" },
+        });
+        if (!queueResp.ok) continue;
+        const queueData = await queueResp.json();
+        if (queueData.state === "queued") {
+          attempts++;
+          if (attempts > 30) {
+            return Response.json({ error: "Queue timed out after 60 seconds" }, { status: 504 });
+          }
+          continue;
+        }
+        const grant = queueData;
+        // Connect WebSocket
+        const ws = new WebSocket(grant.connect_url);
+        const wsPromise = new Promise<any>((resolve, reject) => {
+          ws.binaryType = "arraybuffer";
+          let msgReceived = false;
+          ws.onopen = () => {
+            // Session created — wait for session.updated then send text
+            const waitForSession = async () => {
+              while (!msgReceived) {
+                // Wait for session.created
+                // We'll use a timeout approach
+              }
+            };
+            // Send session.update then user message
+            setTimeout(() => {
+              ws.send(JSON.stringify({
+                type: "session.update",
+                session: {
+                  type: "realtime",
+                  instructions: "You are Gemma, a friendly assistant. Speak in Vietnamese. Keep responses short and natural. Only respond to the user's last message.",
+                  audio: { output: { voice: "Sohee" } }
+                }
+              }));
+            }, 500);
+            // Send user message
+            setTimeout(() => {
+              ws.send(JSON.stringify({
+                type: "conversation.item.create",
+                item: {
+                  type: "message",
+                  role: "user",
+                  content: [{ type: "input_text", text: userMessage }]
+                }
+              }));
+              ws.send(JSON.stringify({ type: "response.create" }));
+            }, 1000);
+            // Collect responses
+            let fullTranscript = "";
+            let audioBuffer = "";
+            let responseDone = false;
+            const handleMessage = (raw: string) => {
+              try {
+                const event = JSON.parse(raw);
+                const type = event?.type;
+                if (type === "response.audio_transcript.delta" || type === "response.audio_transcript.done") {
+                  const delta = (event.transcript || event.delta || "");
+                  if (delta) fullTranscript += delta;
+                }
+                if (type === "response.audio_transcript.done" || type === "response.done") {
+                  responseDone = true;
+                  clearTimeout(timeout);
+                  msgReceived = true;
+                  resolve({
+                    transcript: fullTranscript.trim(),
+                    audio: audioBuffer,
+                    audioFormat: "pcm16",
+                  });
+                }
+              } catch {}
+            };
+            ws.onmessage = (e: any) => {
+              const data = typeof e.data === "string" ? e.data : new TextDecoder("utf-8").decode(e.data);
+              handleMessage(data);
+            };
+            ws.onerror = () => reject(new Error("WebSocket error"));
+            // Timeout
+            const timeout = setTimeout(() => {
+              if (!responseDone) {
+                msgReceived = true;
+                try { ws.close(1000, "timeout"); } catch {}
+                resolve({
+                  transcript: fullTranscript.trim() || "No response received.",
+                  audio: "",
+                });
+              }
+            }, 15000);
+          };
+          ws.onclose = () => {
+            if (!msgReceived) {
+              msgReceived = true;
+              resolve({ transcript: fullTranscript || "Session closed unexpectedly", audio: "" });
+            }
+          };
+        });
+        return Response.json(await wsPromise);
+      } while (true);
+    }
+    // Session granted directly — connect WebSocket
+    const grant = sessionData;
+    const ws = new WebSocket(grant.connect_url);
+    return new Promise<Response>((resolve, reject) => {
+      ws.binaryType = "arraybuffer";
+      let msgReceived = false;
+      ws.onopen = () => {
+        // Send session.update
+        setTimeout(() => {
+          ws.send(JSON.stringify({
+            type: "session.update",
+            session: {
+              type: "realtime",
+              instructions: "You are Gemma, a friendly assistant. Speak in Vietnamese. Keep responses short, natural, and warm. Only respond directly to the user's message in text form. Do not ask questions or request audio input.",
+              audio: { output: { voice: "Sohee" } }
+            }
+          }));
+        }, 500);
+        // Send user message via text
+        setTimeout(() => {
+          ws.send(JSON.stringify({
+            type: "conversation.item.create",
+            item: {
+              type: "message",
+              role: "user",
+              content: [{ type: "input_text", text: userMessage }]
+            }
+          }));
+          ws.send(JSON.stringify({ type: "response.create" }));
+        }, 1000);
+        // Collect response
+        let fullTranscript = "";
+        let responseDone = false;
+        const handleMessage = (raw: string) => {
+          try {
+            const event = JSON.parse(raw);
+            const type = event?.type;
+            if (type === "response.audio_transcript.delta" || type === "response.output_audio_transcript.delta") {
+              const delta = event.delta || "";
+              if (delta) fullTranscript += delta;
+            }
+            if (type === "response.audio_transcript.done" || type === "response.output_audio_transcript.done") {
+              const segment = event.transcript || "";
+              if (segment) fullTranscript += segment;
+            }
+            if (type === "response.done") {
+              responseDone = true;
+              clearTimeout(timeout);
+              msgReceived = true;
+              try { ws.close(1000, "done"); } catch {}
+              resolve(Response.json({
+                transcript: fullTranscript.trim(),
+                status: event.response?.status ?? "completed",
+              }));
+            }
+          } catch (e: any) {
+            console.warn("[chat] parse error:", e.message);
+          }
+        };
+        ws.onmessage = (e: any) => {
+          const data = typeof e.data === "string" ? e.data : new TextDecoder("utf-8").decode(e.data);
+          handleMessage(data);
+        };
+        ws.onerror = () => {
+          if (!msgReceived) {
+            msgReceived = true;
+            try { ws.close(1000, "error"); } catch {}
+            resolve(Response.json({
+              transcript: "Error connecting to chat service.",
+              status: "error",
+            }));
+          }
+        };
+        ws.onclose = () => {
+          if (!msgReceived) {
+            msgReceived = true;
+            resolve(Response.json({
+              transcript: fullTranscript.trim() || "Session closed.",
+              status: "closed",
+            }));
+          }
+        };
+        // Timeout
+        const timeout = setTimeout(() => {
+          if (!msgReceived) {
+            msgReceived = true;
+            try { ws.close(1000, "timeout"); } catch {}
+            resolve(Response.json({
+              transcript: fullTranscript.trim() || "No response received. The service may be busy.",
+              status: "timeout",
+            }));
+          }
+        }, 20000);
+      };
+      ws.onclose = () => {
+        if (!msgReceived) {
+          msgReceived = true;
+          clearTimeout(timeout);
+          resolve(Response.json({
+            transcript: "Connection closed.",
+            status: "closed",
+          }));
+        }
+      };
+    });
+  } catch (err: any) {
+    console.error("[/api/chat] Error:", err.message);
+    return Response.json({ error: "Chat service error: " + err.message }, { status: 500 });
+  }
+}
+const server = Bun.serve({
+  port: PORT,
+  routes: {
+    "/": { GET: serveProductOG },
+    "/api/config": { GET: () => Response.json({ lb: Boolean(UPSTREAM), allowDirect: !UPSTREAM }) },
+    "/api/avatars": { GET: async () => Response.json({ avatars: await listAvatars() }) },
+    "/api/vaix/products": { GET: async (req: Request) => {
+      try {
+        await loadVaixProducts();
+        if (!VAIX_PRODUCTS?.length) return Response.json({ products: [], total: 0 });
+        const url = new URL(req.url);
+        const limit = Math.min(Number(url.searchParams.get("limit") || "20"), 99999);
+        const total = VAIX_PRODUCTS.length;
+        const formatted = VAIX_PRODUCTS.slice(0, Math.min(limit, total)).map((p, i) => formatProduct(p, i));
+        return Response.json({
+          products: formatted,
+          total, limit, page: 1, perPage: limit,
+          totalPages: 1,
+        });
+      } catch { return Response.json({ products: [], total: 0 }); }
+    }},
+    "/api/vaix/status": { GET: () => Response.json({ loaded: VAIX_LOADED, count: VAIX_PRODUCTS?.length ?? 0, lastSyncMs: VAIX_LAST_SYNC }) },
+    "/api/vaix/search": { GET: async (req: Request) => {
+      const url = new URL(req.url);
+      const q = url.searchParams.get("q");
+      if (!q) return Response.json({ results: [], aiAnswer: "Missing ?q=" }, { status: 400 });
+      try {
+        await loadVaixProducts();
+        if (!VAIX_PRODUCTS?.length) return Response.json({ results: [], aiAnswer: "No products." });
+        const qNorm = norm(q);
+        const terms = qNorm.split(/\s+/).filter(t => t.length > 1);
+        const results: Array<{ product: any; score: number }> = [];
+        for (let i = 0; i < VAIX_PRODUCTS.length; i++) {
+          const p = VAIX_PRODUCTS[i];
+          let score = 0;
+          const nm = norm(p.name || p.n || "");
+          const sk = norm(p.sku || p.mod || p.model || "");
+          const br = norm(p.brand || "");
+          const ca = norm(p.c || p.cat || "");
+          const de = norm(p.desc || "");
+          const ft = norm(Array.isArray(p.feats) ? p.feats.join(" ") : "");
+          if (nm.includes(qNorm)) score += 20;
+          if (sk.includes(qNorm)) score += 15;
+          if (br.includes(qNorm)) score += 10;
+          if (ca.includes(qNorm)) score += 8;
+          for (const t of terms) {
+            if (nm.includes(t)) score += 3;
+            if (sk.includes(t)) score += 2;
+            if (br.includes(t)) score += 2;
+            if (ca.includes(t)) score += 1;
+            if (de.includes(t)) score += 1;
+            if (ft.includes(t)) score += 1;
+          }
+          if (score > 0) results.push({ product: formatProduct(p, i), score });
+        }
+        results.sort((a, b) => b.score - a.score);
+        return Response.json({ results: results.slice(0, 50), aiAnswer: results.length > 0 ? "Found " + results.length + " products." : "No products found." });
+      } catch (err: any) { return Response.json({ results: [], error: err.message }); }
+    }},
+    "/api/vaix/sync": { POST: async () => {
+      VAIX_PRODUCTS = null;
+      VAIX_LOADED = false;
+      VAIX_LOADING = false;
+      await loadVaixProducts();
+      return Response.json({ synced: true, count: VAIX_PRODUCTS?.length ?? 0 });
+    }},
+    "/api/wiki/search": { GET: async (req: Request) => {
+      const q = new URL(req.url).searchParams.get("q");
+      if (!q) return Response.json({ error: "Missing ?q=" }, { status: 400 });
+      try {
+        const r = await fetch("https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + encodeURIComponent(q) + "&format=json&srlimit=5&origin=*");
+        const d = await r.json();
+        return Response.json({ results: (d.query?.search ?? []).map((r: any) => ({ title: r.title, snippet: r.snippet.replace(/<[^>]+>/g, "") })) });
+      } catch { return Response.json({ error: "Wikipedia unreachable." }, { status: 502 }); }
+    }},
+    "/api/wiki/summary": { GET: async (req: Request) => {
+      const t = new URL(req.url).searchParams.get("title");
+      if (!t) return Response.json({ error: "Missing ?title=" }, { status: 400 });
+      try {
+        const r = await fetch("https://en.wikipedia.org/api/rest_v1/page/summary/" + encodeURIComponent(t) + "?origin=*");
+        const d = await r.json();
+        return Response.json({ title: d.title, extract: d.extract, url: d.content_urls?.desktop?.page });
+      } catch { return Response.json({ error: "Wikipedia unreachable." }, { status: 502 }); }
+    }},
+    "/api/web/search": { GET: async (req: Request) => {
+      const q = new URL(req.url).searchParams.get("q");
+      if (!q) return Response.json({ error: "Missing ?q=" }, { status: 400 });
+      try {
+        const r = await fetch("https://html.duckduckgo.com/html/?q=" + encodeURIComponent(q), { headers: { "User-Agent": "Mozilla/5.0" } });
+        const h = await r.text();
+        const res: Array<{ title: string; snippet: string; url: string }> = [];
+        const lm = [...h.matchAll(/<a[^>]+class="result__a"[^>]*href="([^"]*)"[^>]*>([\s\S]*?)<\/a>/gi)];
+        const sm = [...h.matchAll(/<a[^>]+class="result__snippet"[^>]*>([\s\S]*?)<\/a>/gi)];
+        for (let i = 0; i < Math.min(lm.length, 5); i++) {
+          let href = lm[i][1];
+          const ru = href.match(/uddg=(https?%3[^&]+)/i);
+          if (ru) href = decodeURIComponent(ru[1]);
+          const title = lm[i][2].replace(/<[^>]+>/g, "").trim();
+          const snippet = sm[i] ? sm[i][1].replace(/<[^>]+>/g, "").trim() : "";
+          if (title) res.push({ title, snippet, url: href });
+        }
+        return Response.json({ results: res });
+      } catch { return Response.json({ error: "Web search unreachable." }, { status: 502 }); }
+    }},
+    "/api/web/content": { GET: async (req: Request) => {
+      const u = new URL(req.url).searchParams.get("url");
+      if (!u) return Response.json({ error: "Missing ?url=" }, { status: 400 });
+      try {
+        const r = await fetch(u, { headers: { "User-Agent": "Mozilla/5.0" }, signal: AbortSignal.timeout(8000) });
+        const h = await r.text();
+        const t = h.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "").replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "").replace(/<[^>]+>/g, " ").replace(/&[a-z]+;/g, " ").replace(/\s+/g, " ").trim();
+        return Response.json({ content: t.slice(0, 3000), url: u });
+      } catch { return Response.json({ error: "Could not fetch page." }, { status: 502 }); }
+    }},
+    "/api/session": { POST: sessionHandler },
+    "/api/queue/:id": { GET: queueHandler, DELETE: queueHandler },
+    "/api/chat": { POST: textChatHandler },
+    "/worklets/:name": (req: Request) => staticFile("worklets", req.params.name!),
+    "/vendor/:name": (req: Request) => staticFile("vendor", req.params.name!),
+    "/avatars/:name": (req: Request) => staticFile("avatars", req.params.name!),
+    "/*": { GET: serveStatic },
+  },
+});
+console.log("Gemma Avatar listening on port " + PORT + " | Upstream: " + (UPSTREAM || "none"));

package.json ADDED Viewed

	@@ -0,0 +1,21 @@

+{
+  "name": "gemma-avatar",
+  "module": "index.ts",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "bun --hot ./index.ts",
+    "start": "bun ./index.ts"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@met4citizen/talkinghead": "^1.7.0",
+    "three": "~0.180.0"
+  },
+  "version": "1.5.1"
+}

public/avatars/Ella.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:3c084db10674b11d030014cabea42cd52323ac4f279024c59470408668197d38
+size 2926564

public/avatars/Lisa.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:24470df495fa6b848e842fb56d6ce56653db8bc7a0d10aff7bd6c1d0af57caea
+size 3282620

public/avatars/avatarsdk.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:193c07c351f1f94b12b499ece3f8813432dbe902afe0b5dd6957e788a9a36605
+size 12284040

public/avatars/avaturn.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:f56e7a34e249597cff08ba7ef7ce597b61b66b455a21023f186e769caca0cdda
+size 13823336

public/avatars/bruce_avaturn.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:db6821e81f7a6185cc9673d88b11875d8d57ccfe750ea1806926a0c305c5764d
+size 13574312

public/avatars/brunette-t.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:3ca13a1e3ad8f57e50266294b823641680dd3f3f174eb4be908ddca7afc0c82a
+size 2875236

public/avatars/brunette.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:8864c504b5c11daa2f0037afffdc0815bb0fa2e6062e37a584746116a3c2f538
+size 4721528

public/avatars/david.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:2875f23a2da5960fd860b0a1106e309a027226367e6c48761868426d16502b8e
+size 4785200

public/avatars/fabio_avaturn.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:39c64e808cc4bcee03665653b877205f2c38ba730a977a9d7ae50ce325305b71
+size 13772844

public/avatars/grit-b6c6c4.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:9e128f8a7263b679c94701b67ed6b9379e639d251cdf5129a92daef0b7a16876
+size 11247792

public/avatars/julia.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:8864c504b5c11daa2f0037afffdc0815bb0fa2e6062e37a584746116a3c2f538
+size 4721528

public/avatars/lisamy.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:a92c208c498aca4c7ffe48d237ce1f3098df902631c8f9ca98bab5f7c104bd3f
+size 8320540

public/avatars/lisamy.jpg ADDED Viewed

public/avatars/model (6).glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:f0333fe126ab2dac578f6ec69482a8a397706d849ac3f71919f37d77f2f5bdcd
+size 14048464

public/avatars/mpfb.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:63c645a2a863b9972e9a9c2ed576a1de4c390b8475508e1473e69c87a3ee299c
+size 36815920

public/avatars/ready_player_me_1.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:50ca75ebbf13b133e4eedfc3af8121ccf0f02bd2f469d1ef680b762b7ee87632
+size 8810736

public/avatars/ready_player_me_2.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:4a30b59d6a0c1e23f214101d64a01092e09b3bfb9aafa9f399420685ec2486ff
+size 9618120

public/avatars/vuong.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:aec85cb497aec853af78f6686b672fffe4fe2dd9bdab81bc43b39caf0d69926a
+size 6964484

public/avatars/vuong.jpg ADDED Viewed

public/avatars/vuong2.glb ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:4b8bd12ea374b894fa6d7290dabea0fb785fb0f410087d8e1ac65585cc5a9d06
+size 7137424

public/vendor/headaudio.min.mjs ADDED Viewed

	@@ -0,0 +1 @@

+ var e={d:(t,s)=>{for(var n in s)e.o(s,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:s[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const t=16e3,s=32,n=64,i=!0,o=.97,r=512,a=256,l=12,h=40,f=22,m=!1,c=!1,u=12,d=!0,v=1,p=15,g=14,b=0,y=2,w=8,E=u,A=56,M=78,_=368,O=92;class Training{constructor(e){const t=Object.assign({},e||{});this.vectorDiff=new Float32Array(u),this.matrixL=Array.from({length:u},()=>new Float32Array(u)),this.matrixLInv=Array.from({length:u},()=>new Float32Array(u)),this.matrixSigma=Array.from({length:u},()=>new Float32Array(u)),this.indexSigmaInvLower=this._buildSigmaInvLowerLookup()}_buildSigmaInvLowerLookup(){const e=Array.from({length:u},()=>new Uint16Array(u));let t=0;for(let s=0;s<u;s++)for(let n=0;n<=s;n++)e[s][n]=t,e[n][s]=t,t++;return e}computePrototype(e,t,s,n){const i=u,o=n.length;if(o<i)throw new Error(`Not enough samples (${o}) to compute full covariance.`);const r=new Float32Array(O),a=new DataView(r.buffer,0,8),l=undefined,h=undefined,f=(e?.codePointAt(0)||0)<<16|(e?.codePointAt(1)||0||0);a.setUint32(0,f),a.setUint8(5,t),a.setUint8(7,s);const m=new Float32Array(r.buffer,8,E),c=new Float32Array(r.buffer,A,M);for(let e=0;e<o;e++){const t=n[e];for(let e=0;e<i;e++)m[e]+=t[e]}const d=1/o;for(let e=0;e<i;e++)m[e]*=d;const v=this.matrixSigma;v.forEach(e=>e.fill(0));const p=1/(o-1);for(let e=0;e<o;e++){const t=n[e];for(let e=0;e<i;e++){const s=t[e]-m[e];for(let n=e;n<i;n++)v[e][n]+=s*(t[n]-m[n])}}for(let e=0;e<i;e++)for(let t=e;t<i;t++){const s=v[e][t]*p;v[e][t]=s,e!==t&&(v[t][e]=s)}let g=0;for(let e=0;e<i;e++)g+=v[e][e];const b=g/i*1e-5;for(let e=0;e<i;e++)v[e][e]+=b;const y=this.matrixL;y.forEach(e=>e.fill(0));for(let e=0;e<i;e++)for(let t=0;t<=e;t++){let s=v[e][t];for(let n=0;n<t;n++)s-=y[e][n]*y[t][n];if(e===t){if(s<=0)throw new Error("Matrix is not positive definite.");y[e][t]=Math.sqrt(s)}else y[e][t]=s/y[t][t]}const w=this.matrixLInv;w.forEach(e=>e.fill(0));for(let e=0;e<i;e++){w[e][e]=1/y[e][e];for(let t=0;t<e;t++){let s=0;for(let n=t;n<e;n++)s-=y[e][n]*w[n][t];w[e][t]=s/y[e][e]}}const _=Array.from({length:i},()=>new Float32Array(i));let x=0;for(let e=0;e<i;e++)for(let t=0;t<=e;t++){let s=0;for(let n=Math.max(e,t);n<i;n++)n>=e&&n>=t&&(s+=w[n][e]*w[n][t]);_[e][t]=s,_[t][e]=s,c[x]=s,x++}return{mu:m,sigmaInv:_,sigmaInvLower:c,bin:r.buffer}}decodeBinaryRecord(e){const t=new DataView(e.buffer,e.byteOffset,8),s=t.getUint32(0),n=s>>>16,i=65535&s,o=undefined,r=undefined,a=undefined,l=undefined,h=undefined;return{phoneme:0===i?String.fromCodePoint(n):String.fromCodePoint(n,i),group:t.getUint8(5),viseme:t.getUint8(7),mu:new Float32Array(e.buffer,e.byteOffset+8,E),sigmaInvLower:new Float32Array(e.buffer,e.byteOffset+A,M)}}async loadModel(e,t=null){const s=await fetch(e);if(!s.ok)throw new Error(`Failed to fetch model: ${s.status} ${s.statusText}`);const n=await s.arrayBuffer(),i=[],o=n.byteLength;let r=0;for(;r+_<=o;){const e=new Float32Array(n,r,O),s=this.decodeBinaryRecord(e);null!==t&&(s.group=t),i.push(s),r+=_}if(0===i.length)throw new Error("Fetched model is empty");return{model:i,buffer:n}}update(e){for(const t in e);}}class HeadAudio extends AudioWorkletNode{constructor(e,t=null){const s=Object.assign({},t||{});super(e,"headworklet",{numberOfInputs:1,numberOfOutputs:0,channelCount:1,channelCountMode:"explicit",channelInterpretation:"speakers",outputChannelCount:[],processorOptions:s?.processorOptions||{},parameterData:s?.parameterData||{}}),this.frameEventsEnabled=!!s.processorOptions?.frameEventsEnabled,this.vadEventsEnabled=!!s.processorOptions?.vadEventsEnabled,this.featureEventsEnabled=!!s.processorOptions?.featureEventsEnabled,this.visemeEventsEnabled=!!s.processorOptions?.visemeEventsEnabled,this.visemeNames=["viseme_aa","viseme_E","viseme_I","viseme_O","viseme_U","viseme_PP","viseme_SS","viseme_TH","viseme_DD","viseme_FF","viseme_kk","viseme_nn","viseme_RR","viseme_CH","viseme_sil"],this.nVisemes=this.visemeNames.length,this.visemeMaxs=[.65,.65,.65,.65,.65,.75,.65,.65,.65,.75,.65,.65,.65,.65,.65],this.visemeAlphas=new Array(this.nVisemes).fill(0),this.visemeActive=-1,this.easing=this.sigmoidFactory(5),this.onvalue=null,this.onframe=null,this.onsentence=null,this.onstarted=null,this.onended=null,this.onfeature=null,this.onviseme=null,this.training=new Training,this.timerCounter=0,this.isRunning=!0,this.port.onmessage=this._onmessage.bind(this)}sigmoidFactory(e){function t(t){return 1/(1+Math.exp(-e*t))-.5}var s=.5/t(1);return function(e){return s*t(2*Math.max(Math.min(e,1),0)-1)+.5}}_onmessage(e){const t=e.data;switch(t.event){case"frame":this.frameEventsEnabled&&this.onframe&&"function"==typeof this.onframe&&this.onframe(t);break;case"vad":this.vadEventsEnabled&&this.onvad&&"function"==typeof this.onvad&&this.onvad(t);break;case"feature":this.featureEventsEnabled&&this.onfeature&&"function"==typeof this.onfeature&&this.onfeature(t);break;case"viseme":const e=t.viseme;e&&(this.visemeActive=e===g?-1:e),this.visemeEventsEnabled&&this.onviseme&&"function"==typeof this.onviseme&&this.onviseme(t);break;case"started":this.onstarted&&"function"==typeof this.onstarted&&this.onstarted(t);break;case"ended":this.visemeActive=-1,this.lastEndEvent=performance.now(),this.onended&&"function"==typeof this.onended&&this.onended(t);break;case"calibrated":try{const{mu:e,sigmaInvLower:s,bin:n}=this.training.computePrototype("sc",255,g,t.vs);this.port.postMessage({event:"model",model:[{phoneme:"sc",group:255,viseme:g,mu:e,sigmaInvLower:s}]},[n])}catch(e){t.error=e,console.error(e)}this.oncalibrated&&"function"==typeof this.oncalibrated&&this.oncalibrated(t)}}async loadModel(e,t=!0){const{model:s,buffer:n}=await this.training.loadModel(e);t&&this.port.postMessage({event:"reset"}),this.port.postMessage({event:"model",model:s},[n])}update(e){const t=e/100;for(let e=0;e<this.nVisemes;e++){let s=this.visemeAlphas[e],n=!1;if(e===this.visemeActive?(n=!0,s<1&&(s+=t,s>.99&&(s=1))):s>0&&(n=!0,s-=t,s<.01&&(s=0)),n){let t=this.visemeMaxs[e]*this.easing(s);this.onvalue&&"function"==typeof this.onvalue&&this.onvalue(this.visemeNames[e],t),this.visemeAlphas[e]=s}}}start(){this.isRunning=!0,this.port.postMessage({event:"start"})}stop(){this.isRunning=!1,this.port.postMessage({event:"stop"})}calibrate(){this.port.postMessage({event:"calibrate"})}resetAll(){this.port.postMessage({event:"reset"})}resetTimer(){this.timerCounter++,this.parameters.get("timerReset").value=this.timerCounter}}export{HeadAudio};

public/vendor/headworklet.min.mjs ADDED Viewed

	@@ -0,0 +1 @@

+ var t={d:(e,s)=>{for(var i in s)t.o(s,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:s[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)};const e=16e3,s=32,i=64,a=!0,n=.97,r=512,o=256,l=12,h=40,c=22,d=!1,u=!1,p=12,v=!0,m=1,f=15,g=14,b=0,M=2,w=8,y=p,k=56,F=78,A=368,E=92;class RingBuffer{constructor(t,e=void 0,s=!1){this.buf=Array.from({length:t},e),this.capacity=t,this.head=0,this.tail=0,this.count=s?t:0}add(t){const e=this.capacity;this.buf[this.tail]=t,this.tail=(this.tail+1)%e,this.count<e?this.count++:this.head=(this.head+1)%e}allocate(){const t=this.capacity,e=this.buf[this.tail];return this.tail=(this.tail+1)%t,this.count<t?this.count++:this.head=(this.head+1)%t,e}isAvailable(t){return this.count>=t}isFull(){return this.count===this.capacity}getHead(t=0){const e=this.capacity,s=(this.head+t%e+e)%e;return this.buf[s]}getTail(t=0){const e=this.capacity,s=(this.tail+(t-1)%e+e)%e;return this.buf[s]}getLatest(t,e=null){const s=t.length;if(s>this.count)return null;const i=this.capacity;this.head=(this.head+(this.count-s))%i;for(let e=0;e<s;e++){const s=(this.head+e)%i;t[e]=this.buf[s]}return null!==e&&e>=0&&e<=s&&(this.head=(this.head+e)%i,this.count=s-e),t}clear(t=0){this.count=t,this.tail=(this.head+t)%this.capacity}}class MFCC{constructor(t){const e=Object.assign({speakerMeanHz:150},t||{});this.cossin=this._buildCosSin(),this.bitrev=this._buildBitrev(),this.spectrum=new Float32Array(1024),this.powerSpec=new Float32Array(256),this.melFilters=Array.from({length:h},()=>new Float32Array(256)),this._buildMelFilterbank(e.speakerMeanHz),this.melEnergies=new Float32Array(h),this.hamming=this._buildWindowHamming(),this.dctMatrix=this._buildDCTMatrix(),this.lifter=this._buildLifter()}_buildCosSin(){const t=new Float32Array(1024),e=-2*Math.PI/r;for(let s=0;s<r;s++){const i=e*s;t[2*s]=Math.cos(i),t[2*s+1]=Math.sin(i)}return t}_buildBitrev(){const t=new Uint32Array(r),e=Math.log2(r);for(let s=0;s<r;s++){let i=0;for(let t=0;t<e;t++)i=i<<1|s>>t&1;t[s]=i}return t}_hammingAndFFT(t){const e=this.cossin,s=this.bitrev,i=this.hamming,a=this.spectrum;for(let e=0;e<r;e++){const n=s[e];a[2*n]=t[e]*i[e],a[2*n+1]=0}for(let t=1;t<r;t<<=1){const s=t<<1,i=r/s;for(let n=0;n<t;n++){const o=n*i*2,l=e[o],h=e[o+1];for(let e=n;e<r;e+=s){const s=e<<1,i=e+t<<1,n=a[s],r=a[s+1],o=a[i],c=a[i+1],d=o*l-c*h,u=o*h+c*l;a[s]=n+d,a[s+1]=r+u,a[i]=n-d,a[i+1]=r-u}}}}_buildWindowHamming(){return Float32Array.from({length:r},(t,e)=>.54-.46*Math.cos(2*Math.PI*e/511))}_buildMelFilterbank(t=150){const s=this.melFilters,i=150,a=Math.min(Math.max(t/i,.6),1.8),n=undefined,o=7800,l=t=>2595*Math.log10(1+t/700),c=t=>700*(Math.pow(10,t/2595)-1),d=l(30),u=undefined,p=l(o)-d,v=undefined,m=Float32Array.from({length:42},(t,e)=>{const s=undefined,i=undefined;return c(d+(d+p/41*e-d)*a)}).map(t=>Math.floor(t/e*r));for(let t=0;t<h;t++){const e=s[t];for(let s=m[t];s<m[t+1];s++)e[s]=(s-m[t])/(m[t+1]-m[t]);for(let s=m[t+1];s<m[t+2];s++)e[s]=(m[t+2]-s)/(m[t+2]-m[t+1])}}_buildDCTMatrix(){const t=[],e=Math.sqrt(.05);for(let s=0;s<=l;s++){const i=new Float32Array(h);for(let t=0;t<h;t++)i[t]=e*Math.cos(Math.PI*s*(t+.5)/h);t.push(i)}return t}_buildLifter(){const t=new Float32Array(l);for(let e=1;e<=l;e++)t[e-1]=1+11*Math.sin(Math.PI*e/c);return t}update(t){for(const e in t)if("speakerMeanHz"===e){const s=t[e];this._buildMelFilterbank(s)}}compute(t,e){const s=256;this._hammingAndFFT(t);const i=this.spectrum,a=this.powerSpec;let n=0;for(let t=0;t<s;t++){const e=i[2*t],s=i[2*t+1];a[t]=(e*e+s*s)/r,n+=a[t]}const o=Math.log10(n+1e-10),c=this.melFilters,d=this.melEnergies;for(let t=0;t<h;t++){const e=c[t],s=e.length;let i=0;for(let t=0;t<s;t++)i+=a[t]*e[t];d[t]=Math.log10(i+1e-10)}const u=this.dctMatrix,p=e||new Float32Array(l),v=this.lifter;for(let t=0;t<l;t++){const e=u[t+1];let s=0;for(let t=0;t<h;t++)s+=e[t]*d[t];p[t]=s*v[t]}return{le:o,mfcc:p}}}class VadGate{constructor(t){const e=Object.assign({vadGateActiveDb:-40,vadGateActiveMs:10,vadGateInactiveDb:-50,vadGateInactiveMs:10},t||{});this.activeLE=e.vadGateActiveDb/10,this.activeFrames=Math.max(1,Math.round(62.5*e.vadGateActiveMs/1e3)),this.inactiveLE=e.vadGateInactiveDb/10,this.inactiveFrames=Math.max(1,Math.round(62.5*e.vadGateInactiveMs/1e3)),this.active=0,this.inactive=1,this.preActive=0,this.preInactive=0}update(t){for(const e in t){const s=t[e];switch(e){case"vadGateActiveDb":this.activeLE=s/10;break;case"vadGateActiveMs":this.activeFrames=62.5*s/1e3;break;case"vadGateInactiveDb":this.inactiveLE=s/10;break;case"vadGateInactiveMs":this.inactiveFrames=62.5*s/1e3}}}process(t){return this.active?(this.active++,t<this.inactiveLE?(this.preInactive++,this.preInactive>=this.inactiveFrames&&(this.active=0,this.inactive=1,this.preActive=0)):this.preInactive>0&&this.preInactive--):(this.inactive++,t>this.activeLE?(this.preActive++,this.preActive>=this.activeFrames&&(this.active=1,this.inactive=0,this.preInactive=0)):this.preActive>0&&this.preActive--),{active:this.active,inactive:this.inactive}}}class Classifier{constructor(t){const e=Object.assign({silSensitivity:1.2},t||{});this.prototypes=[],this.prototypesN=0,this.vectorDiff=new Float32Array(p),this.indexSigmaInvLower=this._buildSigmaInvLowerLookup(),this.ringPredictions=new RingBuffer(6,()=>g,!0),this.counts=Array(f).fill(0),this.predictionLast=g,this.silSensitivity=e.silSensitivity}_buildSigmaInvLowerLookup(){const t=Array.from({length:p},()=>new Uint16Array(p));let e=0;for(let s=0;s<p;s++)for(let i=0;i<=s;i++)t[s][i]=e,t[i][s]=e,e++;return t}clear(){this.prototypes=[],this.prototypesN=0}import(t){t?.reset&&this.clear();const e=t?.model,s=e?.length||0,i=[];for(let t=0;t<s;t++){const s=e[t];s.hasOwnProperty("group")&&i.push(s.group)}i.length&&(this.prototypes=this.prototypes.filter(t=>!i.includes(t.group)));for(let t=0;t<s;t++){const s=e[t];this.prototypes.push(s)}this.prototypesN=this.prototypes.length,this.distances=Array(this.prototypesN).fill(1/0)}update(t){for(const e in t)if("silSentivity"===e){const s=t[e];this.silSensitivity=s}}distanceMahalanobis(t,e,s){let i=0;const a=this.indexSigmaInvLower,n=this.vectorDiff;for(let s=0;s<p;++s)n[s]=t[s]-e[s];for(let t=0;t<p;++t){const e=a[t][t],r=n[t];let o=s[e]*r*r;for(let e=0;e<t;++e){const i=undefined;o+=2*s[a[t][e]]*r*n[e]}i+=o}return i}predict(t){const e=this.prototypesN;if(0===e)return{viseme:null,distances:[]};const s=this.prototypes,i=this.distances;let a=1/0,n=0;for(let r=0;r<e;r++){const e=s[r];let o=this.distanceMahalanobis(t,e.mu,e.sigmaInvLower);e.viseme===g&&(o/=this.silSensitivity),i[r]=o,o<=a&&(a=o,n=r)}const r=this.ringPredictions,o=s[n].viseme;r.add(o);const l=r.capacity,h=this.counts.fill(0);for(let t=0;t<l;t++)h[r.buf[t]]++;let c=0,d=0;for(let t=0;t<f;t++){const e=h[t];e>=d&&(c=t,d=e)}return c===this.predictionLast&&c===g?c=null:this.predictionLast=c,{viseme:c,distances:i}}}class Processor{constructor(t,i=null){const a=Object.assign({vadEventsEnabled:!1,frameEventsEnabled:!1,featureEventsEnabled:!1,visemeEventsEnabled:!1},t?.processorOptions||{}),n=Object.assign({vadMode:1,vadGateActiveDb:-40,vadGateActiveMs:10,vadGateInactiveDb:-50,vadGateInactiveMs:10,silMode:1,silCalibrationWindowSec:3,silSensitivity:1.2},t?.parameterData||{});this.worklet=i||{port:{onmessage:null,postMessage:t=>{}}},this.sampleRate=t.sampleRate,this.samplesN=t.samplesN||r,this.samplesHop=t.samplesHop||o,this.preemphasisPrevValue=0,this.downsampleRatio=this.sampleRate/e,this.downsamplePhaseAccumulator=0,this.downsamplePolyFilter=this.designPolyphaseFilter(),this.ringPolyFilter=new RingBuffer(s,()=>0,!0),this.ringSamples=new RingBuffer(this.samplesN,()=>0),this.block=new Float32Array(this.samplesN),this.mfcc=new MFCC(t),this.ringVectors=new RingBuffer(3,()=>new Float32Array(p),!0),this.vectorDuration=this.samplesN/e,this.vadMode=n.vadMode,this.vadGate=new VadGate(n),this.isRunning=!0,this.isSpeaking=!1,this.silMode=n.silMode;const l=Math.max(100,Math.floor(n.silCalibrationWindowSec*o/e));this.ringCalibration=new RingBuffer(l),this.isCalibrationRunning=!1,this.frameEventsEnabled=!!a.frameEventsEnabled,this.vadEventsEnabled=!!a.vadEventsEnabled,this.featureEventsEnabled=!!a.featureEventsEnabled,this.visemeEventsEnabled=!!a.visemeEventsEnabled,this.frameEventsEnabled&&(this.ringFrame=new RingBuffer(128)),this.sampleCount=0,this.classifier=new Classifier(n)}_onmessage(t){const s=t.data;switch(s.event){case"stop":if(this.isRunning=!1,this.isSpeaking){this.isSpeaking=!1;const t=this.sampleCount/e;this.worklet.port.postMessage({event:"end",t})}this.ringVectors.clear();break;case"start":this.isRunning=!0;break;case"calibrate":this.ringCalibration.clear(),this.isCalibrationRunning=!0;break;case"model":this.classifier.import(s);break;case"reset":this.ringSamples.clear(),this.ringVectors.clear(),this.sampleCount=0;break;default:console.warn("Processor received an unknown message: '"+s.event+"'.")}}designPolyphaseFilter(){const t=[],e=15.5,a=.45;for(let n=0;n<i;n++){const r=n/i,o=new Float32Array(s);for(let t=0;t<s;t++){const s=t-e-r;o[t]=0===s?.9:Math.sin(2*Math.PI*a*s)/(Math.PI*s),o[t]*=.54-.46*Math.cos(2*Math.PI*t/31)}t.push(o)}return t}update(t){for(const s in t){const i=t[s];switch(s){case"vadMode":this.vadMode=i;break;case"silMode":this.silMode=i;break;case"silSensitivity":this.silSensitivity=i;break;case"silCalibrationWindowSec":const t=Math.max(100,Math.floor(i*o/e));this.ringCalibration=new RingBuffer(t);break;case"speakerMeanHz":this.mfcc.update({speakerMeanHz:i});break;case"timerReset":this.sampleCount=0;break;default:if(s.startsWith("vadGate")){const t={};t[s]=i,this.vadGate.update(t)}}}}process(t){const a=t.length;if(0!==a){this.frameEventsEnabled&&this.ringFrame.clear();for(let r=0;r<a;r++){let a=t[r];{const t=a;a-=n*this.preemphasisPrevValue,this.preemphasisPrevValue=t}for(this.ringPolyFilter.add(a),this.downsamplePhaseAccumulator+=1/this.downsampleRatio;this.downsamplePhaseAccumulator>=1;){const t=(this.downsamplePhaseAccumulator-1)*i,a=Math.floor(t),n=this.downsamplePolyFilter[a];let r=0;const o=this.ringPolyFilter;for(let t=0;t<s;t++)r+=o.getHead(t)*n[t];if(this.downsamplePhaseAccumulator-=1,this.frameEventsEnabled&&this.ringFrame.add(r),this.ringSamples.add(r),this.sampleCount++,this.isRunning&&this.ringSamples.isFull()){const t=this.sampleCount/e,s=this.block;this.ringSamples.getLatest(s,this.samplesHop);const i=this.ringVectors.allocate(),{le:a}=this.mfcc.compute(s,i);{const t=1;for(let e=0;e<l;++e){const s=i[e]*t;i[e]=1*Math.tanh(s)}}if(this.isCalibrationRunning&&1===this.silMode){const t=i.slice(),e=this.ringCalibration;e.add(t),e.isFull()&&(this.worklet.port.postMessage({event:"calibrated",vs:e.buf}),this.isCalibrationRunning=!1)}if(1===this.vadMode){const{active:e,inactive:s}=this.vadGate.process(a);if(this.vadEventsEnabled&&this.worklet.port.postMessage({event:"vad",active:e,inactive:s,db:10*a,t}),s){this.isSpeaking&&(this.isSpeaking=!1,this.worklet.port.postMessage({event:"ended",t}));continue}}this.featureEventsEnabled&&this.worklet.port.postMessage({event:"feature",vector:i,le:a,t:t-this.vectorDuration/2,d:this.vectorDuration});const{viseme:n,distances:r}=this.classifier.predict(i);if(this.isSpeaking?n===g&&(this.isSpeaking=!1,this.worklet.port.postMessage({event:"ended",t})):null!==n&&n!==g&&(this.isSpeaking=!0,this.worklet.port.postMessage({event:"started",t})),this.isSpeaking){let e={event:"viseme",viseme:n,t:t-this.vectorDuration/2,d:this.vectorDuration};this.visemeEventsEnabled&&(e.vector=i,e.distances=r),this.worklet.port.postMessage(e)}}}}if(this.frameEventsEnabled){const t=this.sampleCount/e,s=new Float32Array(this.ringFrame.count);this.ringFrame.getLatest(s),this.worklet.port.postMessage({event:"frame",frame:s,t})}}}}class HeadWorklet extends AudioWorkletProcessor{constructor(t){super(t),(t=t||{}).sampleRate=sampleRate,this.detectors={};for(const e of HeadWorklet.parameterDescriptors){const s=e.name,i=e.value;this.detectors[s]=i,t[s]=i}this.processor=new Processor(t,this),this.port.onmessage=this.processor._onmessage.bind(this.processor)}process(t,e,s){const i=t[0];if(!i)return!0;const a=i[0];if(!a)return!0;const n=undefined;if(!a.length)return!0;const r=this.detectors;let o=!1;const l={};for(const t in s){const e=undefined,i=s[t][0],a=undefined;i!==r[t]&&(o=!0,r[t]=l[t]=i)}return o&&this.processor.update(l),this.processor.process(a),!0}static get parameterDescriptors(){return[{name:"timerReset",defaultValue:-9999,automationRate:"k-rate"},{name:"vadMode",defaultValue:1,minValue:0,maxValue:1,automationRate:"k-rate"},{name:"vadGateActiveDb",defaultValue:-40,minValue:-100,maxValue:0,automationRate:"k-rate"},{name:"vadGateActiveMs",defaultValue:10,minValue:0,maxValue:1e3,automationRate:"k-rate"},{name:"vadGateInactiveDb",defaultValue:-50,minValue:-100,maxValue:0,automationRate:"k-rate"},{name:"vadGateInactiveMs",defaultValue:10,minValue:0,maxValue:1e3,automationRate:"k-rate"},{name:"silMode",defaultValue:1,minValue:0,maxValue:2,automationRate:"k-rate"},{name:"silCalibrationWindowSec",defaultValue:3,minValue:.1,maxValue:10,automationRate:"k-rate"},{name:"silSensitivity",defaultValue:1.2,minValue:0,maxValue:4,automationRate:"k-rate"},{name:"speakerMeanHz",defaultValue:150,minValue:50,maxValue:500,automationRate:"k-rate"}]}}registerProcessor("headworklet",HeadWorklet);export{HeadWorklet};

public/vendor/model-en-mixed.bin ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:0358f68989b5861f9b7d18871b010fa6cbf88a53bda4954a954d8c548bbcf251
+size 14352

public/worklets/audio-playback.js ADDED Viewed

	@@ -0,0 +1,179 @@

+// @ts-check
+/**
+ * AudioWorkletProcessor that plays back Float32 mono samples received from
+ * the main thread, upsampling whatever incoming rate the server uses
+ * (typically 24 kHz PCM16) to the AudioContext rate (typically 48 kHz).
+ *
+ * Lifecycle / messaging:
+ *
+ *   main -> worklet:
+ *     { kind: "config", inputRate: 24000 }              one-shot at startup
+ *     { kind: "audio", samples: Float32Array }          (transferable) per chunk
+ *     { kind: "clear" }                                 wipe queue (barge-in)
+ *
+ *   worklet -> main:
+ *     { kind: "stats", queuedMs, played }               every ~250 ms
+ *     { kind: "underrun" }                              every time the queue
+ *                                                      runs dry mid-playback
+ *
+ * Underrun strategy: output silence. We do NOT hold the last sample (that
+ * tends to produce audible clicks/buzzes when long gaps appear between
+ * TTS chunks). A short ramp-out + ramp-in at boundaries would be nicer but
+ * the server's 30 ms cadence makes underruns visible only at end of turn.
+ */
+const STATS_INTERVAL_FRAMES = 12000;
+const FADE_FRAMES = 32;
+class AudioPlaybackProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this._inputRate = 24000;
+    this._stepRatio = this._inputRate / sampleRate;
+    this._queue = [];
+    this._readIdx = 0;
+    this._fracPos = 0;
+    this._playing = false;
+    this._framesSinceStats = 0;
+    this._totalPlayed = 0;
+    this._fadeIn = 0;
+    this._fadeOut = 0;
+    this._lastSample = 0;
+    this._muted = false;
+    this.port.onmessage = (e) => {
+      const data = e.data;
+      if (!data || typeof data !== "object") return;
+      switch (data.kind) {
+        case "config":
+          if (typeof data.inputRate === "number" && data.inputRate > 0) {
+            this._inputRate = data.inputRate;
+            this._stepRatio = this._inputRate / sampleRate;
+          }
+          break;
+        case "audio":
+          if (data.samples instanceof Float32Array && data.samples.length > 0) {
+            this._queue.push(data.samples);
+            if (!this._playing) {
+              this._playing = true;
+              this._fadeIn = FADE_FRAMES;
+              this._fadeOut = 0;
+            }
+          }
+          break;
+        case "clear":
+          this._queue.length = 0;
+          this._readIdx = 0;
+          this._fracPos = 0;
+          this._fadeOut = FADE_FRAMES;
+          break;
+        case "mute":
+          this._muted = true;
+          break;
+        case "unmute":
+          this._muted = false;
+          break;
+      }
+    };
+  }
+  _queuedSamples() {
+    let total = -this._readIdx;
+    for (const buf of this._queue) total += buf.length;
+    return Math.max(0, total);
+  }
+  /** Linear-interp read at the current fractional position. */
+  _readInterpolated() {
+    if (this._queue.length === 0) return null;
+    const head = this._queue[0];
+    const idx = this._readIdx;
+    const frac = this._fracPos;
+    let a = head[idx];
+    let b;
+    if (idx + 1 < head.length) {
+      b = head[idx + 1];
+    } else if (this._queue.length > 1) {
+      b = this._queue[1][0];
+    } else {
+      b = a;
+    }
+    return a + (b - a) * frac;
+  }
+  /** Advance the read position by `stepRatio`; pop consumed buffers. */
+  _advance() {
+    this._fracPos += this._stepRatio;
+    while (this._fracPos >= 1) {
+      this._fracPos -= 1;
+      this._readIdx += 1;
+    }
+    while (this._queue.length > 0 && this._readIdx >= this._queue[0].length) {
+      this._readIdx -= this._queue[0].length;
+      this._queue.shift();
+    }
+  }
+  process(_, outputs) {
+    const channels = outputs[0];
+    if (!channels || channels.length === 0) return true;
+    const out = channels[0];
+    const stereo = channels.length > 1 ? channels[1] : null;
+    for (let i = 0; i < out.length; i++) {
+      let sample = 0;
+      if (this._muted) { sample = 0; }
+      else if (this._playing) {
+        const v = this._readInterpolated();
+        if (v === null) {
+          // Underrun: try to ramp out cleanly to avoid clicks.
+          sample = this._lastSample * Math.max(0, 1 - 1 / FADE_FRAMES);
+          this._lastSample = sample;
+          if (Math.abs(sample) < 1e-4) {
+            this._playing = false;
+            this._lastSample = 0;
+            this.port.postMessage({ kind: "underrun" });
+          }
+        } else {
+          sample = v;
+          this._lastSample = v;
+          this._advance();
+        }
+        if (this._fadeIn > 0) {
+          const gain = 1 - this._fadeIn / FADE_FRAMES;
+          sample *= gain;
+          this._fadeIn -= 1;
+        }
+        if (this._fadeOut > 0) {
+          const gain = this._fadeOut / FADE_FRAMES;
+          sample *= gain;
+          this._fadeOut -= 1;
+          if (this._fadeOut === 0) {
+            this._playing = false;
+            this._lastSample = 0;
+          }
+        }
+        this._totalPlayed += 1;
+      }
+      out[i] = sample;
+      if (stereo) stereo[i] = sample;
+    }
+    this._framesSinceStats += out.length;
+    if (this._framesSinceStats >= STATS_INTERVAL_FRAMES) {
+      this._framesSinceStats = 0;
+      const queuedSamples = this._queuedSamples();
+      const queuedMs = (queuedSamples / this._inputRate) * 1000;
+      this.port.postMessage({ kind: "stats", queuedMs, played: this._totalPlayed });
+    }
+    return true;
+  }
+}
+registerProcessor("audio-playback", AudioPlaybackProcessor);

public/worklets/mic-capture.js ADDED Viewed

	@@ -0,0 +1,159 @@

+// @ts-check
+/**
+ * AudioWorkletProcessor that resamples the AudioContext rate (typically 48 kHz)
+ * down to 16 kHz, packs the result as little-endian Int16 PCM, and posts it
+ * back to the main thread in fixed-size chunks.
+ *
+ * The Hugging Face speech-to-speech WebSocket route expects the
+ * `input_audio_buffer.append` payload at 16 kHz PCM16 mono.
+ *
+ * Design notes:
+ *   - 48 -> 16 is an exact 3:1 ratio so we use a 3-tap boxcar average as a
+ *     cheap low-pass before decimating. Good enough for voice STT; we lose
+ *     a tiny bit of >8 kHz content which the pipeline discards anyway.
+ *   - Output frames are emitted at the cadence dictated by `chunkMs`
+ *     (default 40 ms = 640 samples = 1280 bytes). The OpenAI Realtime
+ *     server batches incoming audio so the cadence is flexible; 20-100 ms
+ *     is the sweet spot.
+ *   - Float -> Int16 saturates to [-1, 1] before scaling.
+ *   - Optional noise gate: per-chunk RMS decides open/closed against a
+ *     threshold; the gain ramps (fast attack, hold, slow release) so word
+ *     onsets aren't clipped and quiet tails don't click. The gate only
+ *     affects the audio we SEND; the main-thread visualiser taps the raw
+ *     mic separately. We post the chunk RMS up every frame so the Settings
+ *     mic meter can show the live level against the threshold.
+ */
+const TARGET_RATE = 16000;
+const DEFAULT_CHUNK_MS = 40;
+// Gate envelope timing (fixed; only the threshold is user-tunable).
+const GATE_ATTACK_MS = 5; // open almost instantly so word onsets survive
+const GATE_HOLD_MS = 250; // stay open this long after the level drops back under
+const GATE_RELEASE_MS = 80; // then fade closed over this long (no click)
+class MicCaptureProcessor extends AudioWorkletProcessor {
+  constructor(options) {
+    super();
+    const chunkMs = options?.processorOptions?.chunkMs ?? DEFAULT_CHUNK_MS;
+    this._inputRate = sampleRate;
+    this._ratio = this._inputRate / TARGET_RATE;
+    this._chunkSamples16k = Math.round((TARGET_RATE * chunkMs) / 1000);
+    this._scratch = new Float32Array(0);
+    this._decimated = new Float32Array(this._chunkSamples16k);
+    this._enabled = true;
+    // Noise gate state. Disabled by default (pure passthrough).
+    this._gateEnabled = false;
+    this._thresholdLin = 0; // linear amplitude; signal RMS must exceed this to open
+    this._gateGain = 1; // smoothed gain currently applied
+    this._holdRemaining = 0; // samples left before the gate may start closing
+    this._attackCoef = Math.exp(-1 / ((GATE_ATTACK_MS / 1000) * TARGET_RATE));
+    this._releaseCoef = Math.exp(-1 / ((GATE_RELEASE_MS / 1000) * TARGET_RATE));
+    this._holdSamples = Math.round((GATE_HOLD_MS / 1000) * TARGET_RATE);
+    this.port.onmessage = (e) => {
+      const data = e.data;
+      if (data?.kind === "enable") this._enabled = !!data.value;
+      else if (data?.kind === "gate") {
+        this._gateEnabled = !!data.enabled;
+        // dB -> linear amplitude. When off, threshold 0 keeps the gate open.
+        this._thresholdLin = data.enabled ? Math.pow(10, data.thresholdDb / 20) : 0;
+      }
+    };
+  }
+  /**
+   * Append `incoming` to the internal scratch buffer, then emit as many
+   * full output chunks as we have material for.
+   * @param {Float32Array} incoming
+   */
+  _ingest(incoming) {
+    if (incoming.length === 0) return;
+    const next = new Float32Array(this._scratch.length + incoming.length);
+    next.set(this._scratch, 0);
+    next.set(incoming, this._scratch.length);
+    this._scratch = next;
+    this._maybeEmit();
+  }
+  _maybeEmit() {
+    const r = this._ratio;
+    const n = this._chunkSamples16k;
+    const needIn = Math.ceil(n * r);
+    const dec = this._decimated;
+    while (this._scratch.length >= needIn) {
+      // 1. Decimate to 16 kHz floats and accumulate energy for the gate/meter.
+      let sumSq = 0;
+      if (Math.abs(r - 3) < 1e-6) {
+        // 48 kHz -> 16 kHz fast path with boxcar lowpass.
+        for (let i = 0; i < n; i++) {
+          const idx = i * 3;
+          const s = (this._scratch[idx] + this._scratch[idx + 1] + this._scratch[idx + 2]) / 3;
+          dec[i] = s;
+          sumSq += s * s;
+        }
+      } else {
+        // Generic path: linear interpolation. Slower but works at any rate
+        // (e.g. some Windows boxes report sampleRate=44100).
+        for (let i = 0; i < n; i++) {
+          const srcPos = i * r;
+          const idx = Math.floor(srcPos);
+          const frac = srcPos - idx;
+          const a = this._scratch[idx];
+          const b = this._scratch[idx + 1] ?? a;
+          const s = a + (b - a) * frac;
+          dec[i] = s;
+          sumSq += s * s;
+        }
+      }
+      const rms = Math.sqrt(sumSq / n);
+      // 2. Decide the gate target for this chunk, then ramp sample-by-sample.
+      let target = 1;
+      if (this._gateEnabled) {
+        if (rms >= this._thresholdLin) {
+          this._holdRemaining = this._holdSamples; // re-arm the hold
+        } else if (this._holdRemaining > 0) {
+          this._holdRemaining -= n; // coasting through the hold window
+        } else {
+          target = 0;
+        }
+      }
+      // 3. Apply the (smoothed) gain and pack to Int16.
+      const out = new Int16Array(n);
+      let gain = this._gateGain;
+      for (let i = 0; i < n; i++) {
+        const coef = target > gain ? this._attackCoef : this._releaseCoef;
+        gain = target + (gain - target) * coef;
+        const s = dec[i] * gain;
+        const clamped = s < -1 ? -1 : s > 1 ? 1 : s;
+        out[i] = clamped < 0 ? clamped * 0x8000 : clamped * 0x7fff;
+      }
+      this._gateGain = gain;
+      // Shift the scratch buffer to keep only the trailing unused samples.
+      const consumed = Math.floor(n * r);
+      this._scratch = this._scratch.slice(consumed);
+      // Live input level for the Settings meter (raw RMS, pre-gate).
+      this.port.postMessage({ kind: "level", rms });
+      if (this._enabled) {
+        this.port.postMessage(out.buffer, [out.buffer]);
+      }
+      // When disabled (mic muted) we silently consume input so the worklet
+      // stays alive and the buffer never grows unbounded.
+    }
+  }
+  process(inputs) {
+    const input = inputs[0];
+    if (!input || input.length === 0 || !input[0]) return true;
+    const mono = input[0];
+    if (mono.length > 0) this._ingest(mono);
+    return true;
+  }
+}
+registerProcessor("mic-capture", MicCaptureProcessor);

san-pham/mi593es-malloca-bep-tu-3-vung-nau-59cm/index.html ADDED Viewed

	@@ -0,0 +1,56 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+<meta charset="UTF-8">
+<title>MI593ES | Malloca | Bếp từ 3 vùng nấu 59cm | V.AI STUDIO</title>
+<meta property="og:title" content="MI593ES | Malloca | Bếp từ 3 vùng nấu 59cm | V.AI STUDIO">
+<meta property="og:description" content="Giá: 23,000,000đ - Thông số kỹ thuật
+Thông Tin Chung
+Loại sản phẩm:
+Bếp từ
+Lắp đặt:
+Âm
+Nguồn năng lượng:
+Điện
+Tần số (Hz):
+50/60
+Nguồn điện (V):
+220-240
+Tổng công suất (W):
+6600
+Thiết Kế
+Dạng điều khiển:
+Cảm ứng
+Chất liệu bề mặt:
+Mặt kính EuroKera Onyka
+Điều Khiê">
+<meta property="og:image" content="https://bizweb.dktcdn.net/100/567/847/products/5072d9b8-c862-4932-a36e-bee43dd2726e-1fd05cf4-1168-41a1-8b5f-40cf6d1dc15b.png?v=1785210349263">
+<meta property="product:price:amount" content="23000000">
+<meta property="product:price:currency" content="VND">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="MI593ES | Malloca | Bếp từ 3 vùng nấu 59cm | V.AI STUDIO">
+<meta name="twitter:description" content="Giá: 23,000,000đ - Thông số kỹ thuật
+Thông Tin Chung
+Loại sản phẩm:
+Bếp từ
+Lắp đặt:
+Âm
+Nguồn năng lượng:
+Điện
+Tần số (Hz):
+50/60
+Nguồn điện (V):
+220-240
+Tổng công suất (W):
+6600
+Thiết Kế
+Dạng điều khiển:
+Cảm ứng
+Chất liệu bề mặt:
+Mặt kính EuroKera Onyka
+Điều Khiê">
+<meta name="twitter:image" content="https://bizweb.dktcdn.net/100/567/847/products/5072d9b8-c862-4932-a36e-bee43dd2726e-1fd05cf4-1168-41a1-8b5f-40cf6d1dc15b.png?v=1785210349263">
+<script>location.replace('/?product=mi593es-malloca-bep-tu-3-vung-nau-59cm')</script>
+</head>
+<body style="font-family:sans-serif;padding:40px;text-align:center;color:#666">Đang chuyển hướng...</body>
+</html>

san-pham/mi593es-malloca-bep-tu-3-vung-nau-59cm/thumb.jpg ADDED Viewed

Git LFS Details

SHA256: 06d583e5543e95843dda84249ff7a73c7e849345453a77b429536fca1d307858
Pointer size: 131 Bytes
Size of remote file: 568 kB

san-pham/mi73twes-malloca-bep-tu-2-vung-nau-73cm-ecokitchen/index.html ADDED Viewed

	@@ -0,0 +1,60 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+<meta charset="UTF-8">
+<title>MI73TWES | Malloca | Bếp từ 2 vùng nấu 73cm EcoKitchen | V.AI STUDIO</title>
+<meta property="og:title" content="MI73TWES | Malloca | Bếp từ 2 vùng nấu 73cm EcoKitchen | V.AI STUDIO">
+<meta property="og:description" content="Giá: 9,850,000đ - Thông số kỹ thuật
+Thông Tin Chung
+Loại sản phẩm:
+Bếp từ
+Lắp đặt:
+Âm
+Nguồn năng lượng:
+Điện
+Tần số (Hz):
+50
+Nguồn điện (V):
+220-240
+Tổng công suất (W):
+5000
+Thiết Kế
+Dạng điều khiển:
+Cảm ứng trượt
+Màu sắc:
+Đen
+Chất liệu bề mặt:
+Kính DuraGlass
+Điều Kh">
+<meta property="og:image" content="https://bizweb.dktcdn.net/100/567/847/products/mih73twes.jpg?v=1785124677980">
+<meta property="product:price:amount" content="9850000">
+<meta property="product:price:currency" content="VND">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="MI73TWES | Malloca | Bếp từ 2 vùng nấu 73cm EcoKitchen | V.AI STUDIO">
+<meta name="twitter:description" content="Giá: 9,850,000đ - Thông số kỹ thuật
+Thông Tin Chung
+Loại sản phẩm:
+Bếp từ
+Lắp đặt:
+Âm
+Nguồn năng lượng:
+Điện
+Tần số (Hz):
+50
+Nguồn điện (V):
+220-240
+Tổng công suất (W):
+5000
+Thiết Kế
+Dạng điều khiển:
+Cảm ứng trượt
+Màu sắc:
+Đen
+Chất liệu bề mặt:
+Kính DuraGlass
+Điều Kh">
+<meta name="twitter:image" content="https://bizweb.dktcdn.net/100/567/847/products/mih73twes.jpg?v=1785124677980">
+<script>location.replace('/?product=mi73twes-malloca-bep-tu-2-vung-nau-73cm-ecokitchen')</script>
+</head>
+<body style="font-family:sans-serif;padding:40px;text-align:center;color:#666">Đang chuyển hướng...</body>
+</html>

san-pham/mi73twes-malloca-bep-tu-2-vung-nau-73cm-ecokitchen/thumb.jpg ADDED Viewed

san-pham/mi7502es-malloca-bep-tu-2-vung-nau-75cm/index.html ADDED Viewed

	@@ -0,0 +1,56 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+<meta charset="UTF-8">
+<title>MI7502ES | Malloca | Bếp từ 2 vùng nấu 75cm | V.AI STUDIO</title>
+<meta property="og:title" content="MI7502ES | Malloca | Bếp từ 2 vùng nấu 75cm | V.AI STUDIO">
+<meta property="og:description" content="Giá: 22,000,000đ - Thông số kỹ thuật
+Thông Tin Chung
+Loại sản phẩm:
+Bếp từ
+Lắp đặt:
+Âm
+Nguồn năng lượng:
+Điện
+Tần số (Hz):
+50/60
+Nguồn điện (V):
+220-240
+Tổng công suất (W):
+3600
+Thiết Kế
+Dạng điều khiển:
+Cảm ứng
+Chất liệu bề mặt:
+Mặt kính EuroKera Onyka
+Điều Khiê">
+<meta property="og:image" content="https://bizweb.dktcdn.net/100/567/847/products/226e8f7d-87fe-4993-99e5-893c5ab9b30f-eb3b31b7-acaa-4566-b03e-df8afeb18c46.png?v=1784948288763">
+<meta property="product:price:amount" content="22000000">
+<meta property="product:price:currency" content="VND">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="MI7502ES | Malloca | Bếp từ 2 vùng nấu 75cm | V.AI STUDIO">
+<meta name="twitter:description" content="Giá: 22,000,000đ - Thông số kỹ thuật
+Thông Tin Chung
+Loại sản phẩm:
+Bếp từ
+Lắp đặt:
+Âm
+Nguồn năng lượng:
+Điện
+Tần số (Hz):
+50/60
+Nguồn điện (V):
+220-240
+Tổng công suất (W):
+3600
+Thiết Kế
+Dạng điều khiển:
+Cảm ứng
+Chất liệu bề mặt:
+Mặt kính EuroKera Onyka
+Điều Khiê">
+<meta name="twitter:image" content="https://bizweb.dktcdn.net/100/567/847/products/226e8f7d-87fe-4993-99e5-893c5ab9b30f-eb3b31b7-acaa-4566-b03e-df8afeb18c46.png?v=1784948288763">
+<script>location.replace('/?product=mi7502es-malloca-bep-tu-2-vung-nau-75cm')</script>
+</head>
+<body style="font-family:sans-serif;padding:40px;text-align:center;color:#666">Đang chuyển hướng...</body>
+</html>

san-pham/mi7502es-malloca-bep-tu-2-vung-nau-75cm/thumb.jpg ADDED Viewed

Git LFS Details

SHA256: ee503ee49a04f82190607c93d63dd9b4f70a935be4e82e3dbd9129c525e03ef2
Pointer size: 131 Bytes
Size of remote file: 467 kB

san-pham/mi803es-malloca-bep-tu-3-vung-nau-80cm/index.html ADDED Viewed

	@@ -0,0 +1,56 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+<meta charset="UTF-8">
+<title>MI803ES | Malloca | Bếp từ 3 vùng nấu 80cm | V.AI STUDIO</title>
+<meta property="og:title" content="MI803ES | Malloca | Bếp từ 3 vùng nấu 80cm | V.AI STUDIO">
+<meta property="og:description" content="Giá: 25,500,000đ - bếThông số kỹ thuật
+Thông Tin Chung
+Loại sản phẩm:
+Bếp từ
+Lắp đặt:
+Âm
+Nguồn năng lượng:
+Điện
+Tần số (Hz):
+50/60
+Nguồn điện (V):
+220-240
+Tổng công suất (W):
+4600
+Thiết Kế
+Dạng điều khiển:
+Cảm ứng
+Chất liệu bề mặt:
+Mặt kính EuroKera Onyka
+Điều Kh">
+<meta property="og:image" content="https://bizweb.dktcdn.net/100/567/847/products/c0dc0fc4-8a84-4025-8020-10348d3cbfec-e8983d34-6c60-4133-881b-dc96efbfd100.png?v=1785210719080">
+<meta property="product:price:amount" content="25500000">
+<meta property="product:price:currency" content="VND">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="MI803ES | Malloca | Bếp từ 3 vùng nấu 80cm | V.AI STUDIO">
+<meta name="twitter:description" content="Giá: 25,500,000đ - bếThông số kỹ thuật
+Thông Tin Chung
+Loại sản phẩm:
+Bếp từ
+Lắp đặt:
+Âm
+Nguồn năng lượng:
+Điện
+Tần số (Hz):
+50/60
+Nguồn điện (V):
+220-240
+Tổng công suất (W):
+4600
+Thiết Kế
+Dạng điều khiển:
+Cảm ứng
+Chất liệu bề mặt:
+Mặt kính EuroKera Onyka
+Điều Kh">
+<meta name="twitter:image" content="https://bizweb.dktcdn.net/100/567/847/products/c0dc0fc4-8a84-4025-8020-10348d3cbfec-e8983d34-6c60-4133-881b-dc96efbfd100.png?v=1785210719080">
+<script>location.replace('/?product=mi803es-malloca-bep-tu-3-vung-nau-80cm')</script>
+</head>
+<body style="font-family:sans-serif;padding:40px;text-align:center;color:#666">Đang chuyển hướng...</body>
+</html>

san-pham/mi803es-malloca-bep-tu-3-vung-nau-80cm/thumb.jpg ADDED Viewed

Git LFS Details

SHA256: 4330cd3f85759168321f8aee17377e0e01517e9e153681ea4d30f1fbcf9de5ad
Pointer size: 131 Bytes
Size of remote file: 588 kB

san-pham/mir9021es-malloca-bep-tu-ket-hop-hong-ngoai-3-vung-nau-80cm/index.html ADDED Viewed

	@@ -0,0 +1,58 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+<meta charset="UTF-8">
+<title>MIR9021ES | Malloca | Bếp từ kết hợp hồng ngoại 3 vùng nấu 80cm | V.AI STUDIO</title>
+<meta property="og:title" content="MIR9021ES | Malloca | Bếp từ kết hợp hồng ngoại 3 vùng nấu 80cm | V.AI STUDIO">
+<meta property="og:description" content="Giá: 23,000,000đ - Thông số kỹ thuật
+Thông Tin Chung
+Loại sản phẩm:
+Bếp điện từ
+Lắp đặt:
+Âm
+Nguồn năng lượng:
+Điện
+Tần số (Hz):
+50/60
+Nguồn điện (V):
+220-240
+Tổng công suất (W):
+5800
+Thiết Kế
+Dạng điều khiển:
+Cảm ứng
+Màu sắc:
+Đen
+Chất liệu bề mặt:
+Mặt kính EuroKe">
+<meta property="og:image" content="https://bizweb.dktcdn.net/100/567/847/products/52048a3f-55df-4647-91f3-bd486c4155eb-5a9061f3-3904-4fb4-a2a3-438eaf7ed7a6.png?v=1784947627033">
+<meta property="product:price:amount" content="23000000">
+<meta property="product:price:currency" content="VND">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="MIR9021ES | Malloca | Bếp từ kết hợp hồng ngoại 3 vùng nấu 80cm | V.AI STUDIO">
+<meta name="twitter:description" content="Giá: 23,000,000đ - Thông số kỹ thuật
+Thông Tin Chung
+Loại sản phẩm:
+Bếp điện từ
+Lắp đặt:
+Âm
+Nguồn năng lượng:
+Điện
+Tần số (Hz):
+50/60
+Nguồn điện (V):
+220-240
+Tổng công suất (W):
+5800
+Thiết Kế
+Dạng điều khiển:
+Cảm ứng
+Màu sắc:
+Đen
+Chất liệu bề mặt:
+Mặt kính EuroKe">
+<meta name="twitter:image" content="https://bizweb.dktcdn.net/100/567/847/products/52048a3f-55df-4647-91f3-bd486c4155eb-5a9061f3-3904-4fb4-a2a3-438eaf7ed7a6.png?v=1784947627033">
+<script>location.replace('/?product=mir9021es-malloca-bep-tu-ket-hop-hong-ngoai-3-vung-nau-80cm')</script>
+</head>
+<body style="font-family:sans-serif;padding:40px;text-align:center;color:#666">Đang chuyển hướng...</body>
+</html>