add picture in search result

app.py

@@ -18,8 +18,8 @@ qdrant_client = QdrantClient(
 )
 
 AIRTABLE_API_KEY = os.environ.get("airtable_api")
-BASE_ID = os.environ.get("airtable_baseid")  
-TABLE_NAME = "Feedback_search"  
+BASE_ID = os.environ.get("airtable_baseid")
+TABLE_NAME = "Feedback_search"  # หรือเปลี่ยนชื่อให้ชัดเช่น 'Feedback'
 api = Api(AIRTABLE_API_KEY)
 table = api.table(BASE_ID, TABLE_NAME)
 
@@ -33,16 +33,16 @@ models = {
 model_config = {
     "E5 (intfloat/multilingual-e5-small)": {
         "func": lambda query: models["E5 (intfloat/multilingual-e5-small)"].encode("query: " + query),
-        "collection": "product_E5"
+        "collection": "product_E5",
     },
     "E5 large instruct (multilingual-e5-large-instruct)": {
         "func": lambda query: models["E5 large instruct (multilingual-e5-large-instruct)"].encode(
             "Instruct: Given a product search query, retrieve relevant product listings\nQuery: " + query, convert_to_tensor=False, normalize_embeddings=True),
-        "collection": "product_E5_large_instruct"
+        "collection": "product_E5_large_instruct",
     },
     "Kalm (KaLM-embedding-multilingual-mini-v1)": {
         "func": lambda query: models["Kalm (KaLM-embedding-multilingual-mini-v1)"].encode(query, normalize_embeddings=True),
-        "collection": "product_kalm"
+        "collection": "product_kalm",
     }
 }
 
@@ -81,11 +81,9 @@ def correct_query_with_symspell(query: str) -> str:
 # 🌟 Main search function
 def search_product(query, model_name):
     start_time = time.time()
-
     if model_name not in model_config:
-        return "❌ ไม่พบโมเดล"
+        return "<p>❌ ไม่พบโมเดล</p>"
 
-    # ✨ แทรกขั้นตอน fuzzy correction
     latest_query_result["raw_query"] = query
     corrected_query = correct_query_with_symspell(query)
 
@@ -97,38 +95,43 @@ def search_product(query, model_name):
             collection_name=collection_name,
             query=query_embed.tolist(),
             with_payload=True,
-            query_filter=Filter(
-                must=[FieldCondition(key="type", match=MatchValue(value="product"))]
-            ),
+            query_filter=Filter(must=[FieldCondition(key="type", match=MatchValue(value="product"))]),
             limit=10
         ).points
     except Exception as e:
-        return f"❌ Qdrant error: {str(e)}"
+        return f"<p>❌ Qdrant error: {str(e)}</p>"
 
     elapsed = time.time() - start_time
-
-    output = f"⏱ Time: {elapsed:.2f}s\n"
+    html_output = f"<p>⏱ Time: {elapsed:.2f}s</p>"
     if corrected_query != query:
-        output += f"🔧 แก้คำค้นจาก: `{query}` → `{corrected_query}`\n\n"
-    output += f"📦 ผลลัพธ์:\n"
+        html_output += f"<p>🔧 แก้คำค้นจาก: <code>{query}</code> → <code>{corrected_query}</code></p>"
+    html_output += "<h4>📦 ผลลัพธ์:</h4><ul style='list-style:none;'>"
 
     result_summary = ""
     for res in result:
-        line = f"- {res.payload.get('name', '')} (score: {res.score:.4f})"
-        output += line + "\n"
-        result_summary += line + " | "
+        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>"
+        result_summary += f"{name} (score: {score}) | "
+
+    html_output += "</ul>"
 
     latest_query_result["query"] = corrected_query
     latest_query_result["result"] = result_summary.strip()
     latest_query_result["model"] = model_name
 
-    return output
+    return html_output
 
 
 # 📝 Logging feedback
 def log_feedback(feedback):
     try:
-        now = datetime.now().strftime("%Y-%m-%d") 
+        now = datetime.now().strftime("%Y-%m-%d")
         table.create({
             "timestamp": now,
             "raw_query": latest_query_result["raw_query"],
@@ -154,7 +157,7 @@ with gr.Blocks() as demo:
         )
         query_input = gr.Textbox(label="พิมพ์คำค้นหา")
 
-    result_output = gr.Textbox(label="📋 ผลลัพธ์")
+    result_output = gr.HTML(label="📋 ผลลัพธ์")  # HTML แสดงผลลัพธ์พร้อมรูป
 
     with gr.Row():
         match_btn = gr.Button("✅ ตรง")
@@ -162,9 +165,7 @@ with gr.Blocks() as demo:
 
     feedback_status = gr.Textbox(label="📬 สถานะ Feedback")
 
-    # Events
-    submit_fn = lambda q, m: search_product(q, m)
-    query_input.submit(submit_fn, inputs=[query_input, model_selector], outputs=result_output)
+    query_input.submit(search_product, inputs=[query_input, model_selector], outputs=result_output)
     match_btn.click(lambda: log_feedback("match"), outputs=feedback_status)
     not_match_btn.click(lambda: log_feedback("not_match"), outputs=feedback_status)