Add split-screen product display: avatar left, product image right

app.py

@@ -264,6 +264,74 @@ async def handle_tool_call(name: str, arguments: dict) -> str:
         return f"Hata: {e}"
 
 
+def find_product_in_trek_xml(query: str) -> dict | None:
+    """Trek XML'inden urun arar — name, image, link dondurur. Frontend product display icin."""
+    try:
+        from smart_warehouse_with_price import get_cached_trek_xml
+        import re
+
+        xml = get_cached_trek_xml()
+        if not xml:
+            return None
+        try:
+            text = xml.decode('utf-8', errors='replace') if isinstance(xml, bytes) else xml
+        except Exception:
+            text = str(xml)
+
+        # Sorguyu normalize et
+        tr_map = {'İ': 'i', 'I': 'i', 'ı': 'i', 'Ğ': 'g', 'ğ': 'g',
+                  'Ü': 'u', 'ü': 'u', 'Ş': 's', 'ş': 's',
+                  'Ö': 'o', 'ö': 'o', 'Ç': 'c', 'ç': 'c'}
+        def normalize(s: str) -> str:
+            for tr, en in tr_map.items():
+                s = s.replace(tr, en)
+            return s.lower()
+
+        q_norm = normalize(query)
+        # Anlamsiz kelimeleri at, anlamli token'lar kalsin (>=3 harf)
+        stop = {'var', 'mi', 'fiyat', 'stok', 'kac', 'tl', 'ne', 'bu', 'soyle',
+                'bilgi', 'verir', 'verirmisin', 'nedir', 'lutfen', 'tum',
+                'gosterir', 'gosterirmisin', 'urun', 'icin'}
+        tokens = [t for t in re.findall(r'[a-z0-9+]+', q_norm)
+                  if len(t) >= 3 and t not in stop]
+        if not tokens:
+            return None
+
+        # XML'i item'lara ayir
+        items = re.findall(r'<item>(.*?)</item>', text, re.DOTALL)
+        best = None
+        best_score = 0
+        for it in items:
+            label_m = re.search(r'<rootlabel><!\[CDATA\[(.*?)\]\]></rootlabel>', it)
+            if not label_m:
+                continue
+            label = label_m.group(1)
+            label_norm = normalize(label)
+            score = sum(1 for t in tokens if t in label_norm)
+            # Variant olmayan ana urunleri tercih et
+            is_variant_m = re.search(r'<isOptionOfAProduct>(\d+)</isOptionOfAProduct>', it)
+            if is_variant_m and is_variant_m.group(1) == '0':
+                score += 0.5
+            if score > best_score:
+                best_score = score
+                best = it
+                best_label = label
+
+        if not best or best_score < 1:
+            return None
+
+        img_m = re.search(r'<picture1Path><!\[CDATA\[(.*?)\]\]></picture1Path>', best)
+        link_m = re.search(r'<productLink><!\[CDATA\[(.*?)\]\]></productLink>', best)
+        return {
+            'name': best_label,
+            'image': img_m.group(1) if img_m else None,
+            'link': link_m.group(1) if link_m else None,
+        }
+    except Exception:
+        logger.exception('find_product_in_trek_xml hatasi')
+        return None
+
+
 @app.websocket("/ws")
 async def realtime_relay(client_ws: WebSocket):
     """Browser <-> OpenAI Realtime API arasinda WebSocket relay."""
@@ -360,6 +428,20 @@ async def realtime_relay(client_ws: WebSocket):
                             logger.info(f"Tool call: {fn_name}({args})")
                             result = await handle_tool_call(fn_name, args)
 
+                            # Urun resmi bul ve client'a gonder (split-screen display icin)
+                            if fn_name == "get_warehouse_stock":
+                                query = args.get("user_message", "")
+                                product = find_product_in_trek_xml(query)
+                                if product and product.get("image"):
+                                    logger.info(f"[product] {product['name']}")
+                                    try:
+                                        await client_ws.send_text(json.dumps({
+                                            "type": "product.show",
+                                            "product": product,
+                                        }))
+                                    except Exception:
+                                        pass
+
                             # Tool sonucunu OpenAI'ye geri gonder
                             await openai_ws.send(json.dumps({
                                 "type": "conversation.item.create",

static/index.html

@@ -28,12 +28,105 @@
       linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
     color: #fff;
     min-height: 100vh;
+    padding: 0;
+    letter-spacing: 0.01em;
+  }
+  .app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    min-height: 100vh;
+    position: relative;
+    z-index: 1;
+  }
+  .col {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 28px 16px 40px;
-    letter-spacing: 0.01em;
+    padding: 28px 24px 36px;
+    min-width: 0;
   }
+  .col.left { border-right: 1px solid var(--line); }
+  .col.right { justify-content: center; }
+  @media (max-width: 900px) {
+    .app { grid-template-columns: 1fr; }
+    .col.left { border-right: none; border-bottom: 1px solid var(--line); }
+  }
+  .product-card {
+    width: min(90%, 520px);
+    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
+    border: 1px solid var(--line);
+    border-radius: 4px;
+    padding: 28px;
+    text-align: center;
+    position: relative;
+  }
+  .product-card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 18px; right: 18px;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--trek-red), transparent);
+  }
+  .product-card .empty {
+    font-family: 'Rajdhani', sans-serif;
+    font-size: 1rem;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.35);
+    padding: 80px 0;
+  }
+  .product-card .empty .ico {
+    display: block;
+    font-size: 3rem;
+    margin-bottom: 18px;
+    color: rgba(226,35,26,0.5);
+  }
+  .product-card .pimg {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: contain;
+    background: #fff;
+    border-radius: 2px;
+    margin-bottom: 20px;
+    border: 1px solid var(--line);
+  }
+  .product-card .pname {
+    font-family: 'Rajdhani', sans-serif;
+    font-size: 1.4rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    margin-bottom: 14px;
+    line-height: 1.2;
+  }
+  .product-card .plink {
+    display: inline-block;
+    padding: 10px 22px;
+    border: 1px solid var(--trek-red);
+    color: var(--trek-red);
+    text-decoration: none;
+    font-family: 'Rajdhani', sans-serif;
+    font-weight: 700;
+    font-size: 0.85rem;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    border-radius: 2px;
+    transition: all 0.2s;
+  }
+  .product-card .plink:hover {
+    background: var(--trek-red);
+    color: #fff;
+  }
+  .product-section-title {
+    font-family: 'Rajdhani', sans-serif;
+    font-size: 0.8rem;
+    letter-spacing: 0.32em;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.45);
+    margin-bottom: 18px;
+    text-align: center;
+  }
+  .product-section-title .accent { color: var(--trek-red); }
   body::before {
     content: '';
     position: fixed;
@@ -206,39 +299,52 @@
 </style>
 </head>
 <body>
-  <div class="brand">
-    <svg class="mark" viewBox="0 0 288.1 80" xmlns="http://www.w3.org/2000/svg" aria-label="Trek">
-      <g>
-        <polygon points="238.5,22.9 214.3,22.9 201.9,57.2 226.1,57.2 "/>
-        <polygon points="234.1,38.8 248.4,57.2 276.3,57.2 260.3,39.1 288.1,22.9 259.7,22.9 "/>
-        <path d="M206.6,29.5l2.4-6.6h-61.9l-8.5,23.6c-0.5,1.5-0.6,3.2,0.5,4.5c0.4,0.4,3.1,3.6,3.7,4.2c1,1.1,2.2,2,4.2,2h49.6l2.4-6.5h-34.7c-2.1,0-3.1-1.6-2.6-3.2l1.6-4.3h38.4l2.4-6.6h-38.4l2.6-7.1C168.3,29.4,206.6,29.4,206.6,29.5z"/>
-        <path d="M135.5,22.9H73.9L61.5,57.2h23.6l10-27.7h17.6c1.9,0,2.6,1.4,2.2,2.7c-0.4,1.4-1,3.1-1.5,4.1c-0.6,1.4-2,2.5-4.1,2.5s-16.5,0-16.5,0L107.1,57h27.1L122,43.3c0,0,4.9,0,7.3,0c3.4,0,5.4-1.8,6.3-4.1c1-2.6,3.3-8.9,4-11C140.9,25,138.9,22.9,135.5,22.9"/>
-        <polygon points="69.6,22.9 2.4,22.9 0,29.5 23.2,29.5 13.2,57.2 36,57.2 46,29.5 67.3,29.5 "/>
-      </g>
-    </svg>
-    <span class="label" lang="en">AI Assistant</span>
-  </div>
-  <h1>Sesli <span class="accent">Asistan</span></h1>
-  <div class="subtitle">Bisiklet · Stok · Fiyat · Anlık Yanıt</div>
+<div class="app">
+  <div class="col left">
+    <div class="brand">
+      <svg class="mark" viewBox="0 0 288.1 80" xmlns="http://www.w3.org/2000/svg" aria-label="Trek">
+        <g>
+          <polygon points="238.5,22.9 214.3,22.9 201.9,57.2 226.1,57.2 "/>
+          <polygon points="234.1,38.8 248.4,57.2 276.3,57.2 260.3,39.1 288.1,22.9 259.7,22.9 "/>
+          <path d="M206.6,29.5l2.4-6.6h-61.9l-8.5,23.6c-0.5,1.5-0.6,3.2,0.5,4.5c0.4,0.4,3.1,3.6,3.7,4.2c1,1.1,2.2,2,4.2,2h49.6l2.4-6.5h-34.7c-2.1,0-3.1-1.6-2.6-3.2l1.6-4.3h38.4l2.4-6.6h-38.4l2.6-7.1C168.3,29.4,206.6,29.4,206.6,29.5z"/>
+          <path d="M135.5,22.9H73.9L61.5,57.2h23.6l10-27.7h17.6c1.9,0,2.6,1.4,2.2,2.7c-0.4,1.4-1,3.1-1.5,4.1c-0.6,1.4-2,2.5-4.1,2.5s-16.5,0-16.5,0L107.1,57h27.1L122,43.3c0,0,4.9,0,7.3,0c3.4,0,5.4-1.8,6.3-4.1c1-2.6,3.3-8.9,4-11C140.9,25,138.9,22.9,135.5,22.9"/>
+          <polygon points="69.6,22.9 2.4,22.9 0,29.5 23.2,29.5 13.2,57.2 36,57.2 46,29.5 67.3,29.5 "/>
+        </g>
+      </svg>
+      <span class="label" lang="en">AI Assistant</span>
+    </div>
+    <h1>Sesli <span class="accent">Asistan</span></h1>
+    <div class="subtitle">Bisiklet · Stok · Fiyat · Anlık Yanıt</div>
 
-  <div class="stage">
-    <img id="avatarImg" src="/static/assistant.png" alt="Trek Asistan" />
-    <div id="ring" class="ring"></div>
-    <span class="corner tl"></span>
-    <span class="corner tr"></span>
-    <span class="corner bl"></span>
-    <span class="corner br"></span>
-  </div>
+    <div class="stage">
+      <img id="avatarImg" src="/static/assistant.png" alt="Trek Asistan" />
+      <div id="ring" class="ring"></div>
+      <span class="corner tl"></span>
+      <span class="corner tr"></span>
+      <span class="corner bl"></span>
+      <span class="corner br"></span>
+    </div>
 
-  <div class="panel">
-    <div id="status" class="status disconnected">● Bağlantı Yok</div>
-    <div class="controls">
-      <button id="btnConnect">Konuşmaya Başla</button>
-      <button id="btnDisconnect" class="danger" disabled>Bitir</button>
+    <div class="panel">
+      <div id="status" class="status disconnected">● Bağlantı Yok</div>
+      <div class="controls">
+        <button id="btnConnect">Konuşmaya Başla</button>
+        <button id="btnDisconnect" class="danger" disabled>Bitir</button>
+      </div>
     </div>
+
+    <div class="footer"><span lang="en">Powered by Trek · Realtime AI</span></div>
   </div>
 
-  <div class="footer"><span lang="en">Powered by Trek · Realtime AI</span></div>
+  <div class="col right">
+    <div class="product-section-title"><span class="accent">●</span> Ürün Vitrini</div>
+    <div class="product-card" id="productCard">
+      <div class="empty" id="productEmpty">
+        Bahsedilen ürün burada gösterilir
+      </div>
+    </div>
+  </div>
+</div>
 
 <script>
 const SAMPLE_RATE = 24000;
@@ -370,8 +476,22 @@ async function connect() {
   ws.onerror = () => setStatus('Bağlantı hatası', 'disconnected');
 }
 
+function showProduct(p) {
+  const card = $('productCard');
+  if (!p || !p.image) return;
+  const linkHtml = p.link ? `<a class="plink" href="${p.link}" target="_blank" rel="noopener">Ürünü Gör</a>` : '';
+  card.innerHTML = `
+    <img class="pimg" src="${p.image}" alt="${p.name || ''}" onerror="this.style.display='none'" />
+    <div class="pname">${p.name || ''}</div>
+    ${linkHtml}
+  `;
+}
+
 function handleEvent(evt) {
   switch (evt.type) {
+    case 'product.show':
+      if (evt.product) showProduct(evt.product);
+      break;
     case 'response.audio.delta':
     case 'response.output_audio.delta':
       if (evt.delta) playPCM16(base64ToInt16(evt.delta));