Spaces:

bep40
/

gemma-avatar

Paused

App Files Files Community

Restore index.ts to commit 413b67e3 state (remove V.AIX endpoints)

by bep40 - opened 13 days ago

base: refs/heads/main

←

from: refs/pr/3

Discussion Files changed

+284

-1167

Files changed (6) hide show

bun.lock +6 -6
index.html +123 -83
index.ts +1 -146
src/app.js +154 -151
src/vaix.css +0 -457
src/vaix.js +0 -324

bun.lock CHANGED Viewed

@@ -19,16 +19,16 @@
   "packages": {
     "@met4citizen/talkinghead": ["@met4citizen/talkinghead@1.7.0", "", { "dependencies": { "three": "^0.180.0" } }, "sha512-iBQhTjvwOO2lLht/YeWqAUmsH0jk4FGpxiPTPMMp3QYVjst/u2rDhn4up59BMJwfdeW3DyU7Im6y+TWmnNllZA=="],
-    "@types/bun": ["@types/bun@1.3.14", "", { "dependencies": { "bun-types": "1.3.14" } }, "sha512-h1hFqFVcvAvD9j9K7ZW7vd82aSA+rTdznZa+5bwvCwqSB1jmmfLcbIWhOLx1/+boy/xmjgCs/OMUL8hRJSmnPw=="],
-    "@types/node": ["@types/node@26.1.0", "", { "dependencies": { "undici-types": "~8.3.0" } }, "sha512-O0A1G3xPGy4w7AgQdAQYUlQ+BKk2Oovw8eRpofyp5KdBZULnbe+WqaOVNrm705SHphCiG4XHsACrSmPu1f+Kgw=="],
-    "bun-types": ["bun-types@1.3.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ=="],
     "three": ["three@0.180.0", "", {}, "sha512-o+qycAMZrh+TsE01GqWUxUIKR1AL0S8pq7zDkYOQw8GqfX8b8VoCKYUoHbhiX5j+7hr8XsuHDVU6+gkQJQKg9w=="],
-    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
-    "undici-types": ["undici-types@8.3.0", "", {}, "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ=="],
   }
-}

   "packages": {
     "@met4citizen/talkinghead": ["@met4citizen/talkinghead@1.7.0", "", { "dependencies": { "three": "^0.180.0" } }, "sha512-iBQhTjvwOO2lLht/YeWqAUmsH0jk4FGpxiPTPMMp3QYVjst/u2rDhn4up59BMJwfdeW3DyU7Im6y+TWmnNllZA=="],
+    "@types/bun": ["@types/bun@1.3.14", "", { "dependencies": { "bun-types": "1.3.14" } }, "sha512-h1hFqFcvAvD9j9K7ZW7vd82aSA+rTdznZa+5bwvCwqSB1jmmfLcbIWhOLx1/+boy/xmjgCs/OMUL8hRJSmnPw=="],
+    "@types/node": ["@types/node@26.1.0", "", { "dependencies": { "undici-types": "~8.3.0" } }, "O0A0A1G3xPGy4w7AgQdAQYUlQ+BKP8eRpofyp5KdBZULnbe+WqaOVNrm705SHphCiG4XHsACrSmPu1f+Kgw=="],
+    "bun-types": ["bun-types@1.3.14", "", { "dependencies": { "@types/node": "*" } }, "S4N0ig0igEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEvg8QXtVsrUDb95MBOZGPvr6KQ=="],
     "three": ["three@0.180.0", "", {}, "sha512-o+qycAMZrh+TsE01GqWUxUIKR1AL0S8pq7zDkYOQw8GqfX8b8VoCKYUoHbhiX5j+7hr8XsuHDVU6+gkQJQKg9w=="],
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjVBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TtSw=="],
+    "undici-types": ["undici-types@8.3.0", "", {}, "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejXWJ7BbJqFYpTEUkS1Ge8bpZQ=="],
   }
+}

index.html CHANGED Viewed

@@ -3,16 +3,15 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <title>Gemma Avatar + V.AIX - Chat & Voice Assistant</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
     <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="./src/style.css" />
-    <link rel="stylesheet" href="./src/vaix.css" />
   </head>
   <body>
     <main id="app">
@@ -21,13 +20,13 @@
       <header id="topbar">
         <div id="identity">
-          <h1>Gemma&nbsp;Avatar + V.AIX</h1>
-          <p>Chat or talk to <strong>Gemma&nbsp;4</strong>. Text → Qwen3-TTS → lip-sync avatar. Control V.AIX catalog.</p>
         </div>
         <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>
       </header>
@@ -95,103 +94,144 @@
       </dialog>
     </main>
-    <!-- V.AIX Toggle Button -->
-    <button id="vaix-toggle" aria-label="Open V.AIX catalog" title="Open V.AIX catalog" class="vaix-toggle">
       <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="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"></path>
-        <rect width="6" height="8" x="12" y="3" rx="1"></rect>
       </svg>
     </button>
-    <!-- V.AIX Panel — lightweight search + products -->
-    <div id="vaix-panel" role="dialog" aria-label="V.AIX Product Catalog" class="vaix-panel">
-      <div class="vaix-header">
-        <div class="vaix-header-avatar"><i class="fas fa-store"></i></div>
-        <div class="vaix-header-info">
-          <h4>V.AIX</h4>
-          <span id="vaix-count">0 sản phẩm</span>
         </div>
-        <button id="vaix-close" aria-label="Close V.AIX" class="vaix-close-btn">
           <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>
-      <div class="vaix-body">
-        <!-- Search -->
-        <div class="vaix-search-box">
-          <input
-            id="vaix-search-input"
-            type="text"
-            placeholder="🔍 Tìm nhanh: bếp từ Malloca dưới 5 triệu, khóa thông minh..."
-            autocomplete="off"
-          />
-          <button class="vaix-search-btn" title="Tìm kiếm">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="11" cy="11" r="8"></circle>
-              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-            </svg>
-          </button>
-        </div>
-        <!-- Quick category pills -->
-        <div id="vaix-quick-cats" style="display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; padding-right:4px">
-          <!-- Filled by vaix.js -->
-        </div>
-        <!-- Product list -->
-        <div id="vaix-product-list" style="min-height:300px"></div>
-        <!-- Product detail -->
-        <div id="vaix-product-detail"></div>
-        <!-- Inquiry suggestion -->
-        <div id="vaix-inquiry-suggest"></div>
-        <!-- Loading -->
-        <div id="vaix-loading" class="vaix-loading">
-          <div class="vaix-loading-spinner"></div>
-          <div>Đang tải sản phẩm V.AIX…</div>
         </div>
       </div>
     </div>
     <style>
-      .vaix-toggle {
-        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;
-      }
-      .vaix-toggle:hover {
-        transform: scale(1.1);
-        box-shadow: 0 6px 28px rgba(0, 63, 98, 0.5);
-      }
-      .vaix-toggle.active {
-        background: linear-gradient(135deg, #db9815, #f0b840);
-        box-shadow: 0 4px 20px rgba(219, 152, 21, 0.4);
       }
-      .vaix-toggle.active:hover {
-        box-shadow: 0 6px 28px rgba(219, 152, 21, 0.5);
       }
     </style>
     <script type="module" src="./src/app.js"></script>
-    <script src="./src/vaix.js" defer></script>
   </body>
 </html>

   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>Gemma 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" />
   </head>
   <body>
     <main id="app">
       <header id="topbar">
         <div id="identity">
+          <h1>Gemma&nbsp;Avatar + V.AI STUDIO</h1>
+          <p>Chat or talk to <strong>Gemma&nbsp;4</strong>. Text → Qwen3-TTS → lip-sync avatar. Control V.AI STUDIO catalog.</p>
         </div>
         <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>
       </header>
       </dialog>
     </main>
+    <!-- V.AISTUDIO Toggle 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 id="vaistudio-header-avatar" 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 id="vaistudio-header-info">
+          <h4 style="font-size: 0.9rem; font-weight: 700; margin: 0;">V.AI STUDIO</h4>
+          <span style="font-size: 0.68rem; opacity: 0.75;">8000+ sản phẩm - Malloca, Eurogold, Grob, Canzy, Demax & Điện Máy Xanh</span>
         </div>
+        <button id="vaistudio-close" aria-label="Close V.AI STUDIO" style="
+          margin-left: auto;
+          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 ease;
+        " 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>
+      <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 id="vaistudio-loading-spinner" style="
+            width: 32px;
+            height: 32px;
+            border: 3px solid #e2e8f0;
+            border-top-color: #003f62;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+          "></div>
+          <div id="vaistudio-loading-text" style="font-size: 0.85rem; color: #64748b;">Đang tải V.AI STUDIO…</div>
         </div>
+        <iframe id="vaistudio-iframe" src="https://bep40-v-aistudio.static.hf.space" allow="camera; microphone; clipboard-read; clipboard-write" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-downloads" style="
+          width: 100%;
+          height: 100%;
+          border: none;
+          background: #fff;
+        "></iframe>
       </div>
     </div>
     <style>
+      @keyframes spin {
+        to { transform: rotate(360deg); }
       }
+      #vaistudio-panel.open { display: flex; }
+      #vaistudio-loading.hidden { display: none; }
+      @media (max-width: 768px) {
+        #vaistudio-toggle { bottom: 16px; right: 16px; width: 50px; height: 50px; font-size: 1.2rem; }
+        #vaistudio-panel { width: 100%; max-width: 100%; height: 100%; max-height: 100vh; border-radius: 0; }
       }
     </style>
     <script type="module" src="./src/app.js"></script>
   </body>
 </html>

index.ts CHANGED Viewed

@@ -1,10 +1,5 @@
 /**
  * Gemma Avatar — realtime voice/text chat with a 3D talking-head avatar.
- *
- * V.AIX integration:
- * - Proxies V.AIX API for product catalog search
- * - Caches products for fast client-side search
- * - Provides /api/vaix/* endpoints for gemma-avatar frontend
  */
 import index from "./index.html";
 import { readdir } from "fs/promises";
@@ -87,66 +82,6 @@ async function fetchHotNews() {
   return Array.from(titles).slice(0, 10);
 }
-/** Simple memory cache for V.AIX products */
-let vaixProductCache = {
-  products: [],
-  timestamp: 0,
-  TTL: 30 * 60 * 1000, // 30 minutes cache
-};
-async function fetchVAXProducts(force = false) {
-  if (!force && vaixProductCache.products.length > 0 && (Date.now() - vaixProductCache.timestamp < vaixProductCache.TTL)) {
-    return vaixProductCache.products;
-  }
-  console.log("[V.AIX] Fetching products from V.AIX API...");
-  try {
-    const startTime = Date.now();
-    const resp = await fetch("https://bep40-vaix.hf.space/products", {
-      signal: AbortSignal.timeout(15000), // 15s timeout
-    });
-    const fetchTime = Date.now() - startTime;
-    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-    const data = await resp.json();
-    const products = Array.isArray(data) ? data : (data.products || data);
-    if (products.length > 0) {
-      vaixProductCache = { products, timestamp: Date.now() };
-      console.log(`[V.AIX] Fetched ${products.length} products in ${fetchTime}ms`);
-    }
-    return products;
-  } catch (e) {
-    console.error("[V.AIX] Fetch failed:", e.message);
-    // Return cached data on error
-    return vaixProductCache.products;
-  }
-}
-/** In-memory search index for fast queries */
-let searchIndex = new Map();
-function buildSearchIndex(products) {
-  searchIndex.clear();
-  products.forEach((p, i) => {
-    const searchable = [p.title_clean || p.title, p.sku, p.brand, p.category, p.features]
-      .filter(Boolean)
-      .join(" ")
-      .toLowerCase()
-      .normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-    searchable.split(/\s+/).forEach(word => {
-      if (word.length > 1) {
-        if (!searchIndex.has(word)) searchIndex.set(word, []);
-        searchIndex.get(word).push(i);
-      }
-    });
-  });
-  console.log(`[V.AIX] Search index: ${searchIndex.size} terms`);
-}
 const server = Bun.serve({
   port: PORT,
   routes: {
@@ -164,86 +99,6 @@ const server = Bun.serve({
         return Response.json({ avatars: names });
       },
     },
-    // V.AIX API proxy endpoints
-    "/api/vaix/products": {
-      GET: async () => {
-        const products = await fetchVAXProducts();
-        return Response.json({ products, count: products.length });
-      },
-    },
-    "/api/vaix/search": {
-      GET: async (req) => {
-        const url = new URL(req.url);
-        const q = url.searchParams.get("q");
-        if (!q) return Response.json({ error: "Missing ?q=" }, { status: 400 });
-        const products = await fetchVAXProducts();
-        if (products.length === 0) {
-          return Response.json({ results: [], total: 0 });
-        }
-        // Build index on first search
-        if (searchIndex.size === 0) {
-          buildSearchIndex(products);
-        }
-        // Client-side search with scoring
-        const norm = q.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-        const terms = norm.split(/\s+/).filter(w => w.length > 1);
-        const results = [];
-        products.forEach((p, i) => {
-          const searchable = [p.title_clean || p.title, p.sku, p.brand, p.category, p.features, p.description]
-            .filter(Boolean)
-            .join(" ")
-            .toLowerCase()
-            .normalize('NFD')
-            .replace(/[\u0300-\u036f]/g, '');
-          let score = 0;
-          terms.forEach(term => {
-            if (p.title_clean && p.title_clean.toLowerCase().includes(term)) score += 10 * term.length;
-            if (p.sku && p.sku.toLowerCase().includes(term)) score += 8 * term.length;
-            if (p.brand && p.brand.toLowerCase().includes(term)) score += 6 * term.length;
-            if (p.category && p.category.toLowerCase().includes(term)) score += 4 * term.length;
-            if (p.features && p.features.toLowerCase().includes(term)) score += 2 * term.length;
-          });
-          if (score > 0) {
-            results.push({ product: p, score });
-          }
-        });
-        results.sort((a, b) => b.score - a.score);
-        return Response.json({ results: results.slice(0, 50), total: results.length, cached: (Date.now() - vaixProductCache.timestamp < vaixProductCache.TTL) });
-      },
-    },
-    "/api/vaix/categories": {
-      GET: async () => {
-        const products = await fetchVAXProducts();
-        const cats = new Map();
-        products.forEach(p => {
-          const cat = p.category || "Khác";
-          if (!cats.has(cat)) cats.set(cat, 0);
-          cats.set(cat, cats.get(cat) + 1);
-        });
-        return Response.json({ categories: Array.from(cats.entries()) });
-      },
-    },
-    "/api/vaix/brands": {
-      GET: async () => {
-        const products = await fetchVAXProducts();
-        const brands = new Map();
-        products.forEach(p => {
-          if (p.brand) {
-            if (!brands.has(p.brand)) brands.set(p.brand, 0);
-            brands.set(p.brand, brands.get(p.brand) + 1);
-          }
-        });
-        return Response.json({ brands: Array.from(brands.entries()) });
-      },
-    },
     "/api/wiki/search": {
       GET: async (req) => {
         const url = new URL(req.url);
@@ -362,4 +217,4 @@ const server = Bun.serve({
 });
 console.log(`gemma-avatar listening on ${server.url}`);
-console.log(UPSTREAM ? `session backend: ${LOAD_BALANCER_URL ? "load balancer" : "session proxy"} (${UPSTREAM})` : "session backend: none");

 /**
  * Gemma Avatar — realtime voice/text chat with a 3D talking-head avatar.
  */
 import index from "./index.html";
 import { readdir } from "fs/promises";
   return Array.from(titles).slice(0, 10);
 }
 const server = Bun.serve({
   port: PORT,
   routes: {
         return Response.json({ avatars: names });
       },
     },
     "/api/wiki/search": {
       GET: async (req) => {
         const url = new URL(req.url);
 });
 console.log(`gemma-avatar listening on ${server.url}`);
+console.log(UPSTREAM ? `session backend: ${LOAD_BALANCER_URL ? "load balancer" : "session proxy"} (${UPSTREAM})` : "session backend: none");

src/app.js CHANGED Viewed

@@ -1,9 +1,16 @@
 // @ts-check
 /**
- * App wiring: the avatar stage + the speech-to-speech session + V.AIX catalog.
- *
- * CHANGED: Replaced V.AISTUDIO iframe with native V.AIX panel for instant product search.
- * No more iframe — search is client-side from cached products (sub-100ms).
  */
 import { S2sWsRealtimeClient } from "./s2s/s2s-ws-client.js";
@@ -20,104 +27,156 @@ const DEFAULT_VOICE = "Sohee";
 const _urlParams = new URLSearchParams(location.search);
 const FAKEMIC_MODE = _urlParams.has("fakemic");
-// ── V.AIX Panel control ────────────────────────────────────────────────
-const VAIX_PANEL_ID = "vaix-panel";
-const VAIX_TOGGLE_ID = "vaix-toggle";
 /** @type {HTMLDivElement | null} */
-let vaixPanel = null;
 /** @type {HTMLButtonElement | null} */
-let vaixToggle = null;
 /** @type {boolean} */
-let vaixPanelOpen = false;
 /**
- * Initialize V.AIX panel controls
  */
-function initVaixPanel() {
-  vaixPanel = /** @type {HTMLDivElement} */ (document.getElementById(VAIX_PANEL_ID));
-  vaixToggle = /** @type {HTMLButtonElement} */ (document.getElementById(VAIX_TOGGLE_ID));
-  if (!vaixPanel || !vaixToggle) {
-    console.warn("[VAIX] Required elements not found");
     return;
   }
   // Toggle panel
-  vaixToggle.addEventListener("click", () => {
-    vaixPanelOpen = !vaixPanelOpen;
-    vaixPanel.classList.toggle("open", vaixPanelOpen);
-    vaixToggle.classList.toggle("active", vaixPanelOpen);
-    vaixToggle.setAttribute("aria-label", vaixPanelOpen ? "Close V.AIX" : "Open V.AIX");
-    vaixToggle.title = vaixPanelOpen ? "Close V.AIX" : "Open V.AIX";
   });
   // Close button
-  const closeBtn = document.getElementById("vaix-close");
   if (closeBtn) {
     closeBtn.addEventListener("click", () => {
-      vaixPanelOpen = false;
-      vaixPanel.classList.remove("open");
-      vaixToggle.classList.remove("active");
-      vaixToggle.setAttribute("aria-label", "Open V.AIX");
-      vaixToggle.title = "Open V.AIX";
     });
   }
 }
 /**
- * V.AIX control functions for avatar tools
  */
-async function vaixFetchProducts() {
-  // Always use server API to stay current (cache is 30min)
-  try {
-    const resp = await fetch("/api/vaix/products");
-    if (resp.ok) {
-      const data = await resp.json();
-      return data.products || [];
-    }
-  } catch (e) {
-    console.warn("[VAIX] Fetch failed:", e);
-  }
-  return [];
 }
-async function vaixSearch(query) {
-  if (!query) return { results: [], total: 0 };
-  try {
-    const resp = await fetch(`/api/vaix/search?q=${encodeURIComponent(query)}`);
-    if (resp.ok) {
-      const data = await resp.json();
-      return data;
-    }
-  } catch (e) {
-    console.warn("[VAIX] Search failed:", e);
-  }
-  return { results: [], total: 0 };
 }
-async function vaixGetCategories() {
-  try {
-    const resp = await fetch("/api/vaix/categories");
-    if (resp.ok) {
-      const data = await resp.json();
-      return data.categories || [];
-    }
-  } catch (e) {
-    console.warn("[VAIX] Categories failed:", e);
-  }
-  return [];
 }
-// Expose globally for avatar tools
-window.vaix = {
-  open: () => { if (!vaixPanelOpen) vaixToggle.click(); },
-  close: () => { if (vaixPanelOpen) vaixToggle.click(); },
-  isOpen: () => vaixPanelOpen,
-  search: vaixSearch,
-  fetchProducts: vaixFetchProducts,
-  getCategories: vaixGetCategories,
-};
 // ── Greeting ─────────────────────────────────────────────────────────────
 async function getHotNewsGreeting() {
@@ -140,8 +199,7 @@ async function getHotNewsGreeting() {
 const DEFAULT_INSTRUCTIONS = [
   "You are a friendly voice assistant with a visible, human-like 3D avatar.",
-  "You also have access to V.AIX - a product catalog with Vietnamese goods. Use it to help users find products naturally.",
-  "When showing products, mention key details: name, price, brand, and why it's a good match.",
   "CRITICAL: Always respond in the SAME LANGUAGE the user writes or speaks.",
   "If Vietnamese, respond in Vietnamese. If English, respond in English.",
   "When Vietnamese: write dates as 'ngày 9 tháng 7 năm 2026' (NOT '9/7/2026'),",
@@ -151,7 +209,7 @@ const DEFAULT_INSTRUCTIONS = [
   "currency as 'năm mươi nghìn đồng' NOT '50.000đ'.",
   "Keep replies short, natural, warm. Never list-like.",
   "You can control avatar body with tools: set_mood, make_hand_gesture, make_facial_expression.",
-  "You can control V.AIX catalog with tools: open_catalog, search_catalog, open_product, navigate_catalog.",
   "Use them naturally to express yourself and help users browse products.",
   "NEVER guess. Use search_web or search_wikipedia for ANY factual question.",
   "First call get_current_datetime to know today's date, then search.",
@@ -170,11 +228,11 @@ const TOOL_DEFS = [
   { type: "function", name: "get_current_datetime", description: "Get current date and time.", parameters: { type: "object", properties: {}, required: [] } },
   { type: "function", name: "search_wikipedia", description: "Search Wikipedia for a topic.", parameters: { type: "object", properties: { query: { type: "string", description: "Search query" } }, required: ["query"] } },
   { type: "function", name: "search_web", description: "Search the web for current info.", parameters: { type: "object", properties: { query: { type: "string", description: "Search query" } }, required: ["query"] } },
-  // V.AIX Catalog tools
-  { type: "function", name: "open_catalog", description: "Open V.AIX catalog, optionally filtered by category.", parameters: { type: "object", properties: { category: { type: "string", description: "Category name (e.g., 'Bếp từ', 'Khóa thông minh'). Empty for all products." } }, required: ["category"] } },
-  { type: "function", name: "search_catalog", description: "Search V.AIX catalog for products.", parameters: { type: "object", properties: { query: { type: "string", description: "Search query (product name, brand, feature, price range)" } }, required: ["query"] } },
-  { type: "function", name: "open_product", description: "Open a specific product detail in V.AIX.", parameters: { type: "object", properties: { product_id: { type: "string", description: "Product ID or title search" } }, required: ["product_id"] } },
-  { type: "function", name: "navigate_catalog", description: "Navigate V.AIX catalog.", parameters: { type: "object", properties: { page: { type: "string", enum: ["products", "catalogue", "contact"], description: "Page to navigate to" }, data: { type: "object", description: "Additional data for navigation" } }, required: ["page"] } },
 ];
 // ── DOM ──────────────────────────────────────────────────────────────────
@@ -384,88 +442,33 @@ function runTool(name, argsJson, callId) {
       client.requestResponse();
     }).catch(() => { client.sendToolOutput(callId, `Web search failed.`); client.requestResponse(); }); return;
   }
-  // V.AIX Catalog tools
   if (name === "open_catalog") {
-    vaixFetchProducts().then(products => {
-      const cat = args.category;
-      let msg = `Đã mở danh mục V.AIX.`;
-      if (cat) {
-        const matched = products.filter(p => (p.category || "").toLowerCase().includes(cat.toLowerCase()));
-        if (matched.length > 0) {
-          msg = `Tìm thấy ${matched.length} sản phẩm trong "${cat}": ${matched.slice(0,3).map(p => p.title).join(", ")}.`;
-        } else {
-          msg = `Không tìm thấy sản phẩm nào trong "${cat}". Hãy thử danh mục khác.`;
-        }
-      }
-      client.sendToolOutput(callId, msg);
-      vaixPanel?.classList.add("open");
-      vaixToggle?.classList.add("active");
-      vaixPanelOpen = true;
-      client.requestResponse();
     }).catch(err => {
-      client.sendToolOutput(callId, `Không thể tải danh mục: ${err.message}`);
-      client.requestResponse();
     }); return;
   }
   if (name === "open_product") {
-    const pid = args.product_id;
-    vaixFetchProducts().then(products => {
-      if (!pid) { client.sendToolOutput(callId, `Cần product_id để mở sản phẩm.`); client.requestResponse(); return; }
-      // First try exact SKU match
-      const found = products.find(p => p.sku === pid || p.title === pid);
-      let msg = found
-        ? `Đã mở ${found.title} (${found.price ? `${found.price.toLocaleString("vi-VN")}đ` : "Liên hệ"}).`
-        : `Không tìm thấy sản phẩm "${pid}". Hãy thử tên hoặc mã sản phẩm khác.`;
-      client.sendToolOutput(callId, msg);
-      client.requestResponse();
     }).catch(err => {
-      client.sendToolOutput(callId, `Lỗi khi tìm sản phẩm: ${err.message}`);
-      client.requestResponse();
     }); return;
   }
   if (name === "search_catalog") {
-    const query = args.query;
-    if (!query) {
-      client.sendToolOutput(callId, `Cần từ khóa để tìm kiếm.`);
-      client.requestResponse();
-      return;
-    }
-    vaixSearch(query).then(data => {
-      if (data.results?.length > 0) {
-        const results = data.results.slice(0, 3);
-        const details = results.map(r => {
-          const p = r.product;
-          return `${p.title} (${p.price ? `${p.price.toLocaleString("vi-VN")}đ` : "Liên hệ"})`;
-        });
-        client.sendToolOutput(callId, `Tìm thấy ${data.total} kết quả cho "${query}":\n${details.join(", ")}.`);
-      } else {
-        client.sendToolOutput(callId, `Không tìm thấy sản phẩm nào cho "${query}".`);
-      }
-      // Open panel to show results
-      vaixPanel?.classList.add("open");
-      vaixToggle?.classList.add("active");
-      vaixPanelOpen = true;
-      client.requestResponse();
     }).catch(err => {
-      client.sendToolOutput(callId, `Lỗi tìm kiếm: ${err.message}`);
-      client.requestResponse();
     }); return;
   }
   if (name === "navigate_catalog") {
-    vaixFetchProducts().then(products => {
-      let msg = `Đã mở danh mục V.AIX với ${products.length} sản phẩm.`;
-      if (args.page === "products" || args.page === "contact") {
-        msg = `Đã chuyển đến trang ${args.page}.`;
-      }
-      client.sendToolOutput(callId, msg);
-      vaixPanel?.classList.add("open");
-      vaixToggle?.classList.add("active");
-      vaixPanelOpen = true;
-      client.requestResponse();
     }).catch(err => {
-      client.sendToolOutput(callId, `Lỗi điều hướng: ${err.message}`);
-      client.requestResponse();
     }); return;
   }
   const result = stage.runTool(name, args) ?? `Unknown tool: ${name}`;
@@ -589,7 +592,7 @@ async function boot() {
   preFetchedGreeting = await newsPromise;
   loading.classList.add("done"); setCaption(CAPTIONS.idle); setMainButton("start", "Start talking");
-  // Initialize V.AIX panel
-  initVaixPanel();
 }
 void boot();

 // @ts-check
 /**
+ * App wiring: the avatar stage + the speech-to-speech session + V.AISTUDIO iframe control.
+ * Modes: voice (mic + VAD) OR text (keyboard only, no mic needed).
+ *
+ * KEY DESIGN: On direct hf.space domains, AudioContext starts "suspended"
+ * because there's no user gesture on page load. Instead of hanging or
+ * silently failing, we wait for the user to click "Start talking" before
+ * any WebSocket connection — that click resumes AudioContext, audio plays,
+ * and HeadAudio lip-sync works.
+ *
+ * ?fakemic=1 — opt-in URL query param for testing text-only mode
+ * WITHOUT a microphone. Only activates when user explicitly adds it to URL.
  */
 import { S2sWsRealtimeClient } from "./s2s/s2s-ws-client.js";
 const _urlParams = new URLSearchParams(location.search);
 const FAKEMIC_MODE = _urlParams.has("fakemic");
+// ── V.AISTUDIO iframe bridge ─────────────────────────────────────────────
+const VAISTUDIO_ORIGIN = "https://bep40-v-aistudio.static.hf.space";
+const VAISTUDIO_IFRAME_ID = "vaistudio-iframe";
+const VAISTUDIO_PANEL_ID = "vaistudio-panel";
+const VAISTUDIO_TOGGLE_ID = "vaistudio-toggle";
+const VAISTUDIO_LOADING_ID = "vaistudio-loading";
+/** @type {HTMLIFrameElement | null} */
+let vaistudioIframe = null;
 /** @type {HTMLDivElement | null} */
+let vaistudioPanel = null;
 /** @type {HTMLButtonElement | null} */
+let vaistudioToggle = null;
+/** @type {HTMLDivElement | null} */
+let vaistudioLoading = null;
 /** @type {boolean} */
+let vaistudioPanelOpen = false;
+/** @type {Map<string, Function>} */
+const vaistudioResponseHandlers = new Map();
+/** @type {number} */
+let vaistudioMessageId = 0;
 /**
+ * Send a command to V.AISTUDIO iframe via postMessage
  */
+function vaistudioSend(action, data = {}) {
+  if (!vaistudioIframe || !vaistudioIframe.contentWindow) {
+    console.warn("[VAISTUDIO] iframe not ready");
+    return Promise.reject(new Error("iframe not ready"));
+  }
+  const id = ++vaistudioMessageId;
+  const message = { id, action, data, timestamp: Date.now() };
+  return new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      vaistudioResponseHandlers.delete(id);
+      reject(new Error(`VAISTUDIO timeout: ${action}`));
+    }, 10000);
+    vaistudioResponseHandlers.set(id, (response) => {
+      clearTimeout(timeout);
+      if (response.error) reject(new Error(response.error));
+      else resolve(response.data);
+    });
+    try {
+      vaistudioIframe.contentWindow.postMessage(message, VAISTUDIO_ORIGIN);
+    } catch (e) {
+      vaistudioResponseHandlers.delete(id);
+      clearTimeout(timeout);
+      reject(e);
+    }
+  });
+}
+/**
+ * Handle responses from V.AISTUDIO iframe
+ */
+function vaistudioOnMessage(event) {
+  if (event.origin !== VAISTUDIO_ORIGIN) return;
+  const msg = event.data;
+  if (!msg || typeof msg !== "object") return;
+  if (msg.id && vaistudioResponseHandlers.has(msg.id)) {
+    const handler = vaistudioResponseHandlers.get(msg.id);
+    vaistudioResponseHandlers.delete(msg.id);
+    handler(msg);
+  }
+  // Handle unsolicited events from iframe
+  if (msg.event) {
+    console.log("[VAISTUDIO] Event:", msg.event, msg.data);
+  }
+}
+/**
+ * Initialize V.AISTUDIO iframe controls
+ */
+function initVAISTUDIO() {
+  vaistudioIframe = /** @type {HTMLIFrameElement} */ (document.getElementById(VAISTUDIO_IFRAME_ID));
+  vaistudioPanel = /** @type {HTMLDivElement} */ (document.getElementById(VAISTUDIO_PANEL_ID));
+  vaistudioToggle = /** @type {HTMLButtonElement} */ (document.getElementById(VAISTUDIO_TOGGLE_ID));
+  vaistudioLoading = /** @type {HTMLDivElement} */ (document.getElementById(VAISTUDIO_LOADING_ID));
+  if (!vaistudioIframe || !vaistudioPanel || !vaistudioToggle) {
+    console.warn("[VAISTUDIO] Required elements not found");
     return;
   }
   // Toggle panel
+  vaistudioToggle.addEventListener("click", () => {
+    vaistudioPanelOpen = !vaistudioPanelOpen;
+    vaistudioPanel.classList.toggle("open", vaistudioPanelOpen);
+    vaistudioToggle.classList.toggle("active", vaistudioPanelOpen);
+    vaistudioToggle.setAttribute("aria-label", vaistudioPanelOpen ? "Close V.AI STUDIO" : "Open V.AI STUDIO");
+    vaistudioToggle.title = vaistudioPanelOpen ? "Close V.AI STUDIO" : "Open V.AI STUDIO";
   });
   // Close button
+  const closeBtn = document.getElementById("vaistudio-close");
   if (closeBtn) {
     closeBtn.addEventListener("click", () => {
+      vaistudioPanelOpen = false;
+      vaistudioPanel.classList.remove("open");
+      vaistudioToggle.classList.remove("active");
+      vaistudioToggle.setAttribute("aria-label", "Open V.AI STUDIO");
+      vaistudioToggle.title = "Open V.AI STUDIO";
     });
   }
+  // Listen for iframe load
+  vaistudioIframe.addEventListener("load", () => {
+    if (vaistudioLoading) vaistudioLoading.classList.add("hidden");
+    console.log("[VAISTUDIO] iframe loaded");
+    vaistudioSend("ready", { source: "gemma-avatar" }).catch(() => {});
+  });
+  // Listen for postMessage
+  window.addEventListener("message", vaistudioOnMessage);
+  // Expose globally for avatar tools
+  window.vaistudio = {
+    send: vaistudioSend,
+    open: () => { if (!vaistudioPanelOpen) vaistudioToggle.click(); },
+    close: () => { if (vaistudioPanelOpen) vaistudioToggle.click(); },
+    isOpen: () => vaistudioPanelOpen,
+  };
 }
 /**
+ * V.AISTUDIO control functions for avatar tools
  */
+async function vaistudioOpenCatalog(category = "") {
+  await vaistudioSend("navigate", { page: "products", category });
+  if (!vaistudioPanelOpen) vaistudioToggle.click();
+  return { success: true, message: `Opened catalog${category ? `: ${category}` : ""}` };
 }
+async function vaistudioOpenProduct(productId) {
+  await vaistudioSend("navigate", { page: "product", productId });
+  if (!vaistudioPanelOpen) vaistudioToggle.click();
+  return { success: true, message: `Opened product ${productId}` };
 }
+async function vaistudioSearch(query) {
+  await vaistudioSend("search", { query });
+  if (!vaistudioPanelOpen) vaistudioToggle.click();
+  return { success: true, message: `Searching: ${query}` };
 }
+async function vaistudioNavigate(page, data = {}) {
+  await vaistudioSend("navigate", { page, ...data });
+  if (!vaistudioPanelOpen) vaistudioToggle.click();
+  return { success: true, message: `Navigated to ${page}` };
+}
 // ── Greeting ─────────────────────────────────────────────────────────────
 async function getHotNewsGreeting() {
 const DEFAULT_INSTRUCTIONS = [
   "You are a friendly voice assistant with a visible, human-like 3D avatar.",
+  "You also have access to V.AI STUDIO - an e-commerce catalog with 8000+ kitchen appliances & smart locks from Malloca, Eurogold, Grob, Canzy, Demax & Dien May Xanh.",
   "CRITICAL: Always respond in the SAME LANGUAGE the user writes or speaks.",
   "If Vietnamese, respond in Vietnamese. If English, respond in English.",
   "When Vietnamese: write dates as 'ngày 9 tháng 7 năm 2026' (NOT '9/7/2026'),",
   "currency as 'năm mươi nghìn đồng' NOT '50.000đ'.",
   "Keep replies short, natural, warm. Never list-like.",
   "You can control avatar body with tools: set_mood, make_hand_gesture, make_facial_expression.",
+  "You can control V.AI STUDIO catalog with tools: open_catalog, open_product, search_catalog, navigate_catalog.",
   "Use them naturally to express yourself and help users browse products.",
   "NEVER guess. Use search_web or search_wikipedia for ANY factual question.",
   "First call get_current_datetime to know today's date, then search.",
   { type: "function", name: "get_current_datetime", description: "Get current date and time.", parameters: { type: "object", properties: {}, required: [] } },
   { type: "function", name: "search_wikipedia", description: "Search Wikipedia for a topic.", parameters: { type: "object", properties: { query: { type: "string", description: "Search query" } }, required: ["query"] } },
   { type: "function", name: "search_web", description: "Search the web for current info.", parameters: { type: "object", properties: { query: { type: "string", description: "Search query" } }, required: ["query"] } },
+  // V.AISTUDIO Catalog tools
+  { type: "function", name: "open_catalog", description: "Open V.AI STUDIO catalog, optionally filtered by category.", parameters: { type: "object", properties: { category: { type: "string", description: "Category name (e.g., 'Bếp từ', 'Máy hút mùi', 'Khóa thông minh', 'Nồi chiên không dầu'). Empty for all products." } }, required: ["category"] } },
+  { type: "function", name: "open_product", description: "Open a specific product detail page in V.AI STUDIO.", parameters: { type: "object", properties: { product_id: { type: "string", description: "Product ID or SKU from V.AI STUDIO catalog" } }, required: ["product_id"] } },
+  { type: "function", name: "search_catalog", description: "Search V.AI STUDIO catalog for products.", parameters: { type: "object", properties: { query: { type: "string", description: "Search query (product name, brand, feature, price range)" } }, required: ["query"] } },
+  { type: "function", name: "navigate_catalog", description: "Navigate V.AI STUDIO to a specific page.", parameters: { type: "object", properties: { page: { type: "string", enum: ["products", "catalogue", "contact", "cart", "home"], description: "Page to navigate to" }, data: { type: "object", description: "Additional data for navigation" } }, required: ["page"] } },
 ];
 // ── DOM ──────────────────────────────────────────────────────────────────
       client.requestResponse();
     }).catch(() => { client.sendToolOutput(callId, `Web search failed.`); client.requestResponse(); }); return;
   }
+  // V.AISTUDIO Catalog tools
   if (name === "open_catalog") {
+    vaistudioOpenCatalog(args.category || "").then(result => {
+      client.sendToolOutput(callId, result.message); client.requestResponse();
     }).catch(err => {
+      client.sendToolOutput(callId, `Failed to open catalog: ${err.message}`); client.requestResponse();
     }); return;
   }
   if (name === "open_product") {
+    vaistudioOpenProduct(args.product_id).then(result => {
+      client.sendToolOutput(callId, result.message); client.requestResponse();
     }).catch(err => {
+      client.sendToolOutput(callId, `Failed to open product: ${err.message}`); client.requestResponse();
     }); return;
   }
   if (name === "search_catalog") {
+    vaistudioSearch(args.query).then(result => {
+      client.sendToolOutput(callId, result.message); client.requestResponse();
     }).catch(err => {
+      client.sendToolOutput(callId, `Failed to search catalog: ${err.message}`); client.requestResponse();
     }); return;
   }
   if (name === "navigate_catalog") {
+    vaistudioNavigate(args.page, args.data || {}).then(result => {
+      client.sendToolOutput(callId, result.message); client.requestResponse();
     }).catch(err => {
+      client.sendToolOutput(callId, `Failed to navigate: ${err.message}`); client.requestResponse();
     }); return;
   }
   const result = stage.runTool(name, args) ?? `Unknown tool: ${name}`;
   preFetchedGreeting = await newsPromise;
   loading.classList.add("done"); setCaption(CAPTIONS.idle); setMainButton("start", "Start talking");
+  // Initialize V.AISTUDIO iframe bridge
+  initVAISTUDIO();
 }
 void boot();

src/vaix.css DELETED Viewed

@@ -1,457 +0,0 @@
-/* V.AIX Panel styles — compact, mobile-friendly product catalog */
-.vaix-panel {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  max-width: 100vw;
-  height: 100%;
-  max-height: 100vh;
-  background: #fff;
-  border-radius: 20px 20px 0 0;
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
-  z-index: 160;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  visibility: hidden;
-  transition: visibility 0.3s;
-}
-.vaix-panel.open {
-  visibility: visible;
-}
-.vaix-header {
-  background: linear-gradient(135deg, #003f62, #0077b6);
-  color: #fff;
-  padding: 14px 16px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-shrink: 0;
-}
-.vaix-header-avatar {
-  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;
-}
-.vaix-header-info {
-  flex: 1;
-}
-.vaix-header-info h4 {
-  font-size: 0.9rem;
-  font-weight: 700;
-  margin: 0;
-}
-.vaix-header-info span {
-  font-size: 0.68rem;
-  opacity: 0.75;
-}
-.vaix-close-btn {
-  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 ease;
-}
-.vaix-close-btn:hover {
-  background: rgba(255, 255, 255, 0.4);
-}
-.vaix-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-  background: #f8fafc;
-}
-.vaix-search-box {
-  position: relative;
-  margin-bottom: 16px;
-}
-.vaix-search-box input {
-  width: 100%;
-  padding: 10px 40px 10px 14px;
-  border: 2px solid #e2e8f0;
-  border-radius: 12px;
-  font-size: 0.88rem;
-  font-family: inherit;
-  outline: none;
-  transition: border-color 0.2s;
-}
-.vaix-search-box input:focus {
-  border-color: #003f62;
-  box-shadow: 0 0 0 3px rgba(0, 63, 98, 0.1);
-}
-.vaix-search-btn {
-  position: absolute;
-  right: 4px;
-  top: 4px;
-  bottom: 4px;
-  width: 34px;
-  border-radius: 8px;
-  background: #003f62;
-  color: #fff;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.9rem;
-}
-.vaix-search-btn:hover {
-  background: #005a8c;
-}
-.vaix-loading {
-  display: none;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 60px 20px;
-  color: #64748b;
-}
-.vaix-loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #e2e8f0;
-  border-top-color: #003f62;
-  border-radius: 50%;
-  animation: vaix-spin 1s linear infinite;
-}
-@keyframes vaix-spin {
-  to { transform: rotate(360deg); }
-}
-.vaix-empty {
-  text-align: center;
-  padding: 50px 20px;
-  color: #64748b;
-}
-.vaix-empty i {
-  font-size: 2.5rem;
-  opacity: 0.3;
-  margin-bottom: 14px;
-  display: block;
-}
-.vaix-empty h3 {
-  font-size: 1rem;
-  font-weight: 700;
-  color: #0f172a;
-  margin-bottom: 6px;
-}
-.vaix-clear-btn {
-  padding: 8px 16px;
-  background: #f1f5f9;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  font-size: 0.82rem;
-  cursor: pointer;
-  font-family: inherit;
-  color: #64748b;
-}
-.vaix-clear-btn:hover {
-  background: #e2e8f0;
-}
-.vaix-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-.vaix-category {
-  background: #fff;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-}
-.vaix-category h3 {
-  font-size: 0.85rem;
-  font-weight: 700;
-  color: #003f62;
-  padding: 12px 14px 10px;
-  background: #f8fafc;
-  border-bottom: 1px solid #e2e8f0;
-}
-.vaix-category h3 .vaix-cat-name::after {
-  content: "";
-  display: inline-block;
-  width: 4px;
-  height: 14px;
-  background: #db9815;
-  border-radius: 2px;
-  margin-left: 8px;
-  vertical-align: middle;
-}
-.vaix-products {
-  padding: 8px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 8px;
-}
-.vaix-product-card {
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  overflow: hidden;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  flex-direction: column;
-}
-.vaix-product-card:hover {
-  border-color: #003f62;
-  box-shadow: 0 4px 12px rgba(0, 63, 98, 0.15);
-}
-.vaix-product-card img {
-  width: 100%;
-  height: 100px;
-  object-fit: contain;
-  background: #f8fafc;
-  padding: 6px;
-}
-.vaix-product-info {
-  padding: 8px;
-  flex: 1;
-  min-width: 0;
-}
-.vaix-product-title {
-  font-size: 0.74rem;
-  font-weight: 600;
-  color: #0f172a;
-  line-height: 1.3;
-  margin-bottom: 4px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.vaix-product-brand {
-  font-size: 0.64rem;
-  font-weight: 500;
-  color: #64748b;
-  margin-bottom: 2px;
-}
-.vaix-product-price {
-  font-size: 0.78rem;
-  font-weight: 800;
-  color: #003f62;
-}
-.vaix-product-sku {
-  font-size: 0.62rem;
-  color: #94a3b8;
-  margin-top: 2px;
-}
-/* Product detail modal */
-.vaix-product-detail {
-  background: #f8fafc;
-  border-radius: 16px;
-  padding: 16px;
-  min-height: 200px;
-}
-.vaix-detail-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-.vaix-detail-grid img {
-  width: 100%;
-  height: auto;
-  max-height: 200px;
-  object-fit: contain;
-  border-radius: 12px;
-  background: #fff;
-  padding: 12px;
-}
-.vaix-detail-info {
-  padding: 8px 0;
-}
-.vaix-detail-info h2 {
-  font-size: 1.1rem;
-  font-weight: 700;
-  color: #0f172a;
-  margin: 0 0 8px;
-}
-.vaix-detail-sku {
-  font-size: 0.74rem;
-  color: #64748b;
-  margin-bottom: 4px;
-}
-.vaix-detail-brand {
-  font-size: 0.82rem;
-  font-weight: 600;
-  color: #003f62;
-  margin-bottom: 8px;
-}
-.vaix-detail-price {
-  font-size: 1.2rem;
-  font-weight: 800;
-  color: #003f62;
-  margin-bottom: 12px;
-}
-.vaix-detail-category {
-  display: inline-block;
-  background: #e0f2fe;
-  color: #003f62;
-  padding: 4px 12px;
-  border-radius: 20px;
-  font-size: 0.74rem;
-  font-weight: 600;
-  margin-bottom: 12px;
-}
-.vaix-detail-features {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.82rem;
-  color: #0f172a;
-  margin-bottom: 12px;
-}
-.vaix-detail-features i {
-  color: #db9815;
-}
-.vaix-detail-description {
-  font-size: 0.82rem;
-  color: #64748b;
-  line-height: 1.6;
-  margin-bottom: 16px;
-}
-.vaix-inquire-btn {
-  width: 100%;
-  padding: 12px 16px;
-  background: linear-gradient(135deg, #003f62, #0077b6);
-  color: #fff;
-  border: none;
-  border-radius: 10px;
-  font-size: 0.88rem;
-  font-weight: 700;
-  cursor: pointer;
-  font-family: inherit;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-.vaix-inquire-btn:hover {
-  background: linear-gradient(135deg, #005a8c, #0086c9);
-}
-.vaix-back-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  font-size: 0.82rem;
-  cursor: pointer;
-  font-family: inherit;
-  color: #64748b;
-  margin-bottom: 12px;
-}
-.vaix-back-btn:hover {
-  background: #f1f5f9;
-}
-/* Inquiry suggestion */
-.vaix-inquiry-suggest {
-  display: none;
-  padding: 10px 14px;
-  background: #fffbeb;
-  border: 1px solid #fde68a;
-  border-radius: 10px;
-  font-size: 0.82rem;
-  color: #92400e;
-  margin-top: 12px;
-}
-/* Small screen adjustments */
-@media (max-width: 768px) {
-  .vaix-panel {
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    max-height: 100vh;
-    border-radius: 0;
-  }
-  .vaix-products {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .vaix-product-card img {
-    height: 80px;
-  }
-}
-@media (max-width: 480px) {
-  .vaix-products {
-    grid-template-columns: 1fr;
-  }
-  .vaix-product-card img {
-    height: 120px;
-  }
-}

src/vaix.js DELETED Viewed

@@ -1,324 +0,0 @@
-/**
- * V.AIX Panel — lightweight product search & display for gemma-avatar.
- *
- * Data source: /api/vaix/* endpoints (serving from HF Dataset via index.ts).
- *
- * Caching strategy:
- * 1. Load products from /api/vaix/products on first open
- * 2. Subsequent opens load from localStorage (instant)
- * 3. Cache refreshes every 24h via background fetch
- */
-// Use local server API endpoints (index.ts serves these)
-const API_PRODUCTS = "/api/vaix/products";
-const API_SEARCH = "/api/vaix/search";
-// Cache keys
-const CACHE_KEY = "vaix_products_cache";
-const CACHE_TIMESTAMP_KEY = "vaix_cache_timestamp";
-const CACHE_EXPIRY_MS = 24 * 60 * 60 * 1000; // 24 hours
-// State
-let allProducts = [];
-let filteredProducts = [];
-let isLoading = false;
-let searchDebounceTimer = null;
-// Search index (pre-built for fast client-side search)
-let searchIndex = new Map();
-function initSearchIndex(products) {
-  searchIndex.clear();
-  products.forEach((p, i) => {
-    const searchable = [p.title_clean, p.sku, p.brand, p.category, p.features]
-      .filter(Boolean)
-      .join(" ")
-      .toLowerCase()
-      .normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-    searchable.split(/\s+/).forEach(word => {
-      if (word.length > 1) {
-        if (!searchIndex.has(word)) searchIndex.set(word, []);
-        searchIndex.get(word).push(i);
-      }
-    });
-  });
-  console.log(`[V.AIX] Search index built: ${searchIndex.size} terms, ${products.length} products`);
-}
-function searchLocal(query) {
-  if (!query || !searchIndex.size) return allProducts.slice(0, 50);
-  const norm = query.toLowerCase().normalize('NFD').replace(/[\u0300-\u06f]/g, '');
-  const terms = norm.split(/\s+/).filter(w => w.length > 0);
-  const scores = new Map();
-  allProducts.forEach((p, i) => {
-    const searchable = [p.title_clean, p.sku, p.brand, p.category, p.features, p.description]
-      .filter(Boolean)
-      .join(" ")
-      .toLowerCase()
-      .normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '');
-    let score = 0;
-    terms.forEach(term => {
-      const termLen = term.length;
-      if (p.title_clean && p.title_clean.toLowerCase().includes(term)) score += 10 * termLen;
-      if (p.sku && p.sku.toLowerCase().includes(term)) score += 8 * termLen;
-      if (p.brand && p.brand.toLowerCase().includes(term)) score += 6 * termLen;
-      if (p.category && p.category.toLowerCase().includes(term)) score += 4 * termLen;
-      if (p.features && p.features.toLowerCase().includes(term)) score += 2 * termLen;
-    });
-    if (score > 0) scores.set(i, score);
-  });
-  const sorted = [...scores.entries()].sort((a, b) => b[1] - a[1]);
-  return sorted.slice(0, 100).map(([idx]) => allProducts[idx]);
-}
-function saveToCache() {
-  try {
-    localStorage.setItem(CACHE_KEY, JSON.stringify({
-      products: allProducts.map(p => ({
-        title_clean: p.title_clean,
-        title: p.title,
-        sku: p.sku,
-        brand: p.brand,
-        category: p.category,
-        price: p.price,
-        image: p.image || "",
-        features: p.features,
-        description: p.description,
-      })),
-      timestamp: Date.now(),
-    }));
-    localStorage.setItem(CACHE_TIMESTAMP_KEY, Date.now().toString());
-    console.log(`[V.AIX] Cached ${allProducts.length} products`);
-  } catch (e) { console.warn("[V.AIX] Cache save failed:", e); }
-}
-function loadFromCache() {
-  try {
-    const data = localStorage.getItem(CACHE_KEY);
-    const ts = localStorage.getItem(CACHE_TIMESTAMP_KEY);
-    if (!data || !ts) return null;
-    const cache = JSON.parse(data);
-    const age = Date.now() - parseInt(ts);
-    if (age > CACHE_EXPIRY_MS) {
-      localStorage.removeItem(CACHE_KEY);
-      localStorage.removeItem(CACHE_TIMESTAMP_KEY);
-      return null;
-    }
-    console.log(`[V.AIX] Loaded ${cache.products.length} products from cache (${Math.round(age / 60000)}m old)`);
-    return cache.products;
-  } catch (e) {
-    console.warn("[V.AIX] Cache load failed:", e);
-    return null;
-  }
-}
-async function fetchProducts() {
-  if (isLoading) return;
-  isLoading = true;
-  // Try cache first
-  const cached = loadFromCache();
-  if (cached && cached.length > 0) {
-    allProducts = cached;
-    initSearchIndex(allProducts);
-    updateProductCount(cached.length);
-    isLoading = false;
-    return;
-  }
-  showLoadingState(true);
-  try {
-    const resp = await fetch(API_PRODUCTS);
-    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-    const data = await resp.json();
-    allProducts = Array.isArray(data) ? data : (data.products || []);
-    console.log(`[V.AIX V2] Fetched ${allProducts.length} products from ${API_PRODUCTS}`);
-    if (allProducts.length > 0) {
-      initSearchIndex(allProducts);
-      saveToCache();
-      updateProductCount(allProducts.length);
-    } else {
-      console.warn("[V.AIX V2] No products returned from API");
-    }
-  } catch (e) {
-    console.error("[V.AIX V2] Fetch failed:", e);
-  }
-  showLoadingState(false);
-  isLoading = false;
-}
-function updateProductCount(count) {
-  const el = document.getElementById("vaix-count");
-  if (el) el.textContent = `${count.toLocaleString("vi-VN")} sản phẩm`;
-}
-function showLoadingState(show) {
-  const el = document.getElementById("vaix-loading");
-  if (el) el.style.display = show ? "flex" : "none";
-}
-function showProducts(productList) {
-  const container = document.getElementById("vaix-product-list");
-  if (!container) return;
-  if (!productList || productList.length === 0) {
-    container.innerHTML = `
-      <div class="vaix-empty">
-        <i class="fas fa-search"></i>
-        <h3>Không tìm thấy sản phẩm</h3>
-        <p>Thử từ khóa khác hoặc duyệt theo danh mục</p>
-      </div>
-    `;
-    return;
-  }
-  // Group by category for compact display
-  const categories = {};
-  productList.forEach(p => {
-    const cat = p.category || "Khác";
-    if (!categories[cat]) categories[cat] = [];
-    categories[cat].push(p);
-  });
-  let html = `<div class="vaix-grid">`;
-  Object.entries(categories).forEach(([cat, products]) => {
-    html += `<div class="vaix-category">
-      <h3><span class="vaix-cat-name">${escHtml(cat)}</span> (${products.length})</h3>
-      <div class="vaix-products">`;
-    products.forEach(p => {
-      const priceStr = formatPrice(p.price);
-      const imgSrc = p.image || 'https://via.placeholder.com/120x120?text=V.AIX';
-      html += `
-        <div class="vaix-product-card" onclick="openProduct(${allProducts.indexOf(p)})">
-          <img src="${imgSrc}" alt="${escHtml(p.title)}" loading="lazy" />
-          <div class="vaix-product-info">
-            <div class="vaix-product-title">${escHtml(p.title_clean || p.title)}</div>
-            <div class="vaix-product-brand">${escHtml(p.brand || "")}</div>
-            <div class="vaix-product-price">${priceStr}</div>
-            ${p.sku ? `<div class="vaix-product-sku">${escHtml(p.sku)}</div>` : ""}
-          </div>
-        </div>
-      `;
-    });
-    html += `</div></div>`;
-  });
-  html += `</div>`;
-  container.innerHTML = html;
-}
-function formatPrice(price) {
-  if (!price || price <= 0) return "Liên hệ";
-  return price.toLocaleString("vi-VN") + "đ";
-}
-function escHtml(str) {
-  if (!str) return "";
-  const div = document.createElement("div");
-  div.textContent = str;
-  return div.innerHTML;
-}
-function openProduct(index) {
-  if (index < 0 || index >= allProducts.length) return;
-  showProductDetail(allProducts[index]);
-}
-function showProductDetail(product) {
-  const container = document.getElementById("vaix-product-detail");
-  if (!container) return;
-  container.innerHTML = `
-    <div class="vaix-product-detail">
-      <button class="vaix-back-btn" onclick="closeDetail()"><i class="fas fa-arrow-left"></i> Quay lại</button>
-      <div class="vaix-detail-grid">
-        <img src="${product.image || 'https://via.placeholder.com/300x300?text=V.AIX'}" alt="${product.title}" />
-        <div class="vaix-detail-info">
-          <h2>${escHtml(product.title_clean || product.title)}</h2>
-          <div class="vaix-detail-sku">${escHtml(product.sku || "")}</div>
-          <div class="vaix-detail-brand">${escHtml(product.brand || "")}</div>
-          <div class="vaix-detail-price">${formatPrice(product.price)}</div>
-          ${product.category ? `<div class="vaix-detail-category">${escHtml(product.category)}</div>` : ""}
-          ${product.features ? `<div class="vaix-detail-features">${escHtml(product.features)}</div>` : ""}
-          ${product.description ? `<div class="vaix-detail-description">${escHtml(product.description)}</div>` : ""}
-          <button class="vaix-inquire-btn" onclick="inquireProduct('${escHtml(product.title_clean || product.title)}')">
-            <i class="fas fa-comments"></i> Tư vấn sản phẩm
-          </button>
-        </div>
-      </div>
-    </div>
-  `;
-}
-function closeDetail() {
-  document.getElementById("vaix-product-detail").innerHTML = "";
-}
-function inquireProduct(title) {
-  console.log("[V.AIX] Inquiring about:", title);
-  if (window.parent && window.parent.postMessage) {
-    window.parent.postMessage({
-      type: "VAIX_INQUIRY",
-      product: title,
-    }, "*");
-  }
-  const suggestEl = document.getElementById("vaix-inquiry-suggest");
-  if (suggestEl) {
-    suggestEl.textContent = `Bạn có muốn hỏi Gemma về "${title}"?`;
-    suggestEl.style.display = "block";
-  }
-}
-function clearSearch() {
-  const input = document.getElementById("vaix-search-input");
-  if (input) input.value = "";
-  const container = document.getElementById("vaix-product-list");
-  if (container) container.innerHTML = "";
-  const detailViewBtn = document.getElementById("vaix-detail-view-btn");
-  if (detailViewBtn) detailViewBtn.style.display = "flex";
-  document.getElementById("vaix-product-detail").innerHTML = "";
-}
-const VAX_SEARCH = (e) => {
-  const q = e.target.value.trim();
-  clearTimeout(searchDebounceTimer);
-  searchDebounceTimer = setTimeout(() => {
-    const results = q ? searchLocal(q) : allProducts.slice(0, 20);
-    filteredProducts = results;
-    showProducts(results);
-  }, 200);
-};
-window.vaix = {
-  fetchProducts,
-  searchLocal,
-  openProduct,
-  showProducts,
-  getProducts: () => allProducts,
-  search: (q) => searchLocal(q),
-};
-document.addEventListener("DOMContentLoaded", () => {
-  const searchEl = document.getElementById("vaix-search-input");
-  if (searchEl) searchEl.addEventListener("input", VAX_SEARCH);
-  fetchProducts();
-});