change result UI

app.py

@@ -102,24 +102,36 @@ def search_product(query, model_name):
         return f"<p>❌ Qdrant error: {str(e)}</p>"
 
     elapsed = time.time() - start_time
-    html_output = f"<p>⏱ Time: {elapsed:.2f}s</p>"
+    html_output = f"<p>⏱ <strong>{elapsed:.2f} วินาที</strong></p>"
     if corrected_query != query:
         html_output += f"<p>🔧 แก้คำค้นจาก: <code>{query}</code> → <code>{corrected_query}</code></p>"
-    html_output += "<h4>📦 ผลลัพธ์:</h4><ul style='list-style:none;'>"
+
+    html_output += """
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;">
+    """
 
     result_summary = ""
     for res in result:
         name = res.payload.get("name", "ไม่ทราบชื่อสินค้า")
         score = f"{res.score:.4f}"
         img_url = res.payload.get("imageUrl", "")
-
-        html_output += "<li style='margin-bottom: 10px;'>"
-        if img_url:
-            html_output += f"<img src='{img_url}' width='100' style='margin-right:10px; vertical-align:middle;'>"
-        html_output += f"<strong>{name}</strong> (score: {score})</li>"
+        price = res.payload.get("price", "ไม่ระบุ")
+        brand = res.payload.get("brand", "")
+
+        html_output += f"""
+        <div style="border: 1px solid #ddd; border-radius: 8px; padding: 10px; text-align: center; box-shadow: 1px 1px 5px rgba(0,0,0,0.1); background: #fff;">
+            <img src="{img_url}" style="width: 100%; max-height: 150px; object-fit: contain; border-radius: 4px;">
+            <div style="margin-top: 10px;">
+                <div style="font-weight: bold; font-size: 14px;">{name}</div>
+                <div style="color: gray; font-size: 12px;">{brand}</div>
+                <div style="color: green; margin: 4px 0;">฿{price}</div>
+                <div style="font-size: 12px; color: #555;">score: {score}</div>
+            </div>
+        </div>
+        """
         result_summary += f"{name} (score: {score}) | "
 
-    html_output += "</ul>"
+    html_output += "</div>"
 
     latest_query_result["query"] = corrected_query
     latest_query_result["result"] = result_summary.strip()