updated code

app.py

@@ -122,36 +122,51 @@ def predict():
         return jsonify({"error": "title or description required"}), 400
 
     tags_str = ", ".join(tags) if isinstance(tags, list) else str(tags)
+    full_text = preprocess(f"{title} {desc} {product_type} {tags_str}")
 
-    full_text = preprocess(
-        f"{title} {desc} {product_type} {tags_str}"
-    )
-
-    # -------------------------
-    # FAISS first-stage search (top 20)
-    # -------------------------
+    # --------------- FAISS SEARCH ---------------
     q = embed(full_text)
     D, I = index.search(q, 20)
 
-    # Compute confidence scores
     scores = (D[0] - D[0].min()) / (D[0].max() - D[0].min() + 1e-9)
-    candidates = [categories[i]["category_path"] for i in I[0]]
 
-    top10 = candidates[:10]
+    candidate_objects = [
+        {
+            "category_path": categories[i]["category_path"],
+            "category_id": categories[i]["category_id"],
+            "distance": float(D[0][idx])
+        }
+        for idx, i in enumerate(I[0])
+    ]
 
-    # -------------------------
-    # GPT Rerank
-    # -------------------------
-    final = gpt_rerank(full_text, top10)
+    top10 = candidate_objects[:10]
 
+    # --------------- GPT RERANK ---------------
+    paths_only = [c["category_path"] for c in top10]
+    final_path = gpt_rerank(full_text, paths_only)
+
+    final_category = next(
+        (c for c in top10 if c["category_path"].lower() == final_path.lower()),
+        None
+    )
+
+    # -----------------------------
+    # 🟦 FIXED RESPONSE FOR UI
+    # -----------------------------
     return jsonify({
-        "predicted_category": final,
+        "predicted_category": final_category["category_path"] if final_category else None,
+        "predicted_category_id": final_category["category_id"] if final_category else None,
+
         "top_candidates": [
-            {"category": c, "confidence": float(s)}
-            for c, s in zip(top10, scores[:10])
+            {
+                "category": c["category_path"],
+                "category_id": c["category_id"],
+                "confidence": float(scores[idx])
+            }
+            for idx, c in enumerate(top10)
         ]
     })
-
+    
 @app.route("/")
 def home():
     return render_template("index.html")

templates/index.html

@@ -287,6 +287,18 @@
             margin-bottom: 12px;
         }
 
+        .category-id {
+            display: inline-block;
+            background: rgba(255, 255, 255, 0.2);
+            padding: 6px 14px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            font-family: 'Courier New', monospace;
+            margin-bottom: 12px;
+            backdrop-filter: blur(10px);
+        }
+
         .confidence-badge {
             display: inline-flex;
             align-items: center;
@@ -322,8 +334,8 @@
 
         .candidate-header {
             display: flex;
-            justify-content: space-between;
             align-items: center;
+            gap: 12px;
             margin-bottom: 8px;
         }
 
@@ -338,14 +350,26 @@
             justify-content: center;
             font-size: 13px;
             font-weight: 700;
+            flex-shrink: 0;
+        }
+
+        .candidate-details {
+            flex: 1;
+            min-width: 0;
         }
 
         .candidate-name {
             color: #2d3748;
             font-weight: 600;
             font-size: 15px;
-            flex: 1;
-            margin: 0 16px;
+            margin-bottom: 4px;
+        }
+
+        .candidate-id {
+            color: #718096;
+            font-size: 12px;
+            font-family: 'Courier New', monospace;
+            font-weight: 500;
         }
 
         .confidence-pill {
@@ -355,6 +379,7 @@
             border-radius: 20px;
             font-size: 13px;
             font-weight: 700;
+            flex-shrink: 0;
         }
 
         .error {
@@ -463,7 +488,10 @@
                     <div class="result-header">
                         <h2>Predicted Category</h2>
                         <div class="result-category" id="predictedCategory"></div>
-                        <span class="confidence-badge" id="confidenceBadge"></span>
+                        <div class="category-id" id="predictedCategoryId"></div>
+                        <div>
+                            <span class="confidence-badge" id="confidenceBadge"></span>
+                        </div>
                     </div>
 
                     <div class="candidates-list">
@@ -574,6 +602,10 @@
 
             // Update main predicted category
             document.getElementById('predictedCategory').textContent = data.predicted_category;
+            
+            // Update predicted category ID
+            document.getElementById('predictedCategoryId').textContent = 
+                `ID: ${data.predicted_category_id || 'N/A'}`;
 
             // Use confidence of candidate #1 for display
             const topConf = data.top_candidates?.[0]?.confidence || 0;
@@ -589,7 +621,10 @@
                     <div class="candidate-item">
                         <div class="candidate-header">
                             <div class="candidate-rank">${index + 1}</div>
-                            <div class="candidate-name">${candidate.category}</div>
+                            <div class="candidate-details">
+                                <div class="candidate-name">${candidate.category}</div>
+                                <div class="candidate-id">ID: ${candidate.category_id || 'N/A'}</div>
+                            </div>
                             <div class="confidence-pill">${(candidate.confidence * 100).toFixed(1)}%</div>
                         </div>
                     </div>