Update app.py

app.py

@@ -3,63 +3,74 @@ import pandas as pd
 import numpy as np
 import faiss
 import pickle
-
+import html
 from sentence_transformers import SentenceTransformer
 
-# Load data & models ONCE
+# ===============================
+# Load data & models (ONCE)
+# ===============================
 
-# Load dataset
 df = pd.read_csv("data/hadith.csv")
-
-# Load embeddings
 hadith_embeddings = np.load("data/hadith_embeddings.npy")
 print(f"Loaded hadith embeddings: {hadith_embeddings.shape}")
 
-# Load BM25
 with open("data/bm25.pkl", "rb") as f:
     bm25 = pickle.load(f)
 
-# Load anchor FAISS index
 anchor_index = faiss.read_index("data/faiss_anchor.index")
 print(f"Anchor index dimension: {anchor_index.d}")
 
-# Load anchor mapping
 with open("data/anchor_dict.pkl", "rb") as f:
     anchor_dict = pickle.load(f)
 
 with open("data/unique_anchor_texts.pkl", "rb") as f:
     unique_anchor_texts = pickle.load(f)
 
-# Load embedding model
-model = SentenceTransformer(
-    "sentence-transformers/paraphrase-multilingual-MiniLM-L12-v2"
-)
+model = SentenceTransformer("sentence-transformers/paraphrase-multilingual-MiniLM-L12-v2")
 model.max_seq_length = 512
 
-# Test embedding dimension
+# Quick dimension check
 test_emb = model.encode("test", normalize_embeddings=True)
 print(f"Model embedding dimension: {test_emb.shape}")
-
-# Verify dimensions match
 if test_emb.shape[0] != anchor_index.d:
     raise ValueError(
         f"Dimension mismatch! Model outputs {test_emb.shape[0]}D but "
-        f"anchor_index expects {anchor_index.d}D. "
-        f"Rebuild your anchor_index with the same model."
+        f"anchor_index expects {anchor_index.d}D. Rebuild your anchor_index with the same model."
     )
 
-# Import retrieval logic
+# Import retrieval
 from retrieval import hybrid_search_fixed
 from utils import preprocess_query
+
 # ===============================
-# Search Function
+# Helper: safe getter & short preview
 # ===============================
+def safe_get(row, col):
+    """Get column value safely, return empty string if missing or NaN."""
+    try:
+        v = row.get(col, "")
+        if pd.isna(v):
+            return ""
+        return str(v)
+    except Exception:
+        return ""
+
+def short_preview(text, length=300):
+    text = text.strip()
+    if len(text) <= length:
+        return text
+    # find a safe break (space) near length
+    return text[:length].rsplit(' ', 1)[0] + "..."
 
+# ===============================
+# Search Function
+# ===============================
 def search_hadith(query, top_k):
-    if not query.strip():
+    if not query or not str(query).strip():
         return "<p class='empty'>Please enter a search query.</p>"
 
-    results_df, _ = hybrid_search_fixed(
+    # Get results + debug (debug contains full-length score arrays)
+    results_df, debug = hybrid_search_fixed(
         query=query,
         df=df,
         bm25=bm25,
@@ -72,131 +83,179 @@ def search_hadith(query, top_k):
         top_k=int(top_k)
     )
 
-    html = "<div class='results'>"
+    # If debug is provided and contains final_scores, use it for per-hadith score display
+    final_scores = debug.get("final_scores") if isinstance(debug, dict) else None
+
+    # Build HTML results: professional cards with title and metadata
+    html_parts = []
+    html_parts.append("<div class='results'>")
+
+    for rank, (_, row) in enumerate(results_df.iterrows(), start=1):
+        # original hadith index in df (row.name)
+        hadith_idx = row.name if hasattr(row, "name") else ""
+
+        # columns: prefer 'hadith_title' else fallback to first 50 chars of matn_text
+        hadith_title = safe_get(row, "hadith_title")
+        if not hadith_title:
+            # fallback: try short generated title from main_subj or matn_text
+            hadith_title = safe_get(row, "main_subj") or short_preview(safe_get(row, "matn_text"), 60)
+
+        # matn_text (main hadith body) - preserve Arabic text, escape HTML
+        matn_text = safe_get(row, "matn_text")
+        matn_text_escaped = html.escape(matn_text).replace("\n", "<br>")
 
-    for i, row in results_df.iterrows():
-        html += f"""
+        topic = html.escape(safe_get(row, "main_subj"))
+        source_url = safe_get(row, "url")
+
+        # score (if available) - normalize to 0..1 and show percentage
+        score_display = ""
+        if isinstance(final_scores, (list, np.ndarray)):
+            try:
+                s = float(final_scores[int(hadith_idx)])
+                score_display = f"{s:.3f}"
+            except Exception:
+                score_display = ""
+
+        # short preview and full details toggle
+        preview = short_preview(matn_text, length=360)
+        preview_escaped = html.escape(preview).replace("\n", "<br>")
+
+        card_html = f"""
         <div class="card">
             <div class="card-header">
-                <span class="index">#{i+1}</span>
-                <span class="topic">{row['main_subj']}</span>
+                <div class="left">
+                    <div class="index">#{rank}</div>
+                    <div class="title">{html.escape(hadith_title)}</div>
+                    <div class="topic">Topic: {topic}</div>
+                </div>
+                <div class="right-meta">
+                    <div class="meta">ID: <span class="meta-val">{hadith_idx}</span></div>
+                    {f'<div class="meta">Score: <span class="meta-val">{score_display}</span></div>' if score_display else ''}
+                </div>
             </div>
 
-            <div class="text">
-                {row['matn_text']}
+            <div class="text-rtl">
+                <details>
+                    <summary class="summary">{preview_escaped}</summary>
+                    <div class="full-text">{matn_text_escaped}</div>
+                </details>
             </div>
 
             <div class="footer">
-                <a href="{row['url']}" target="_blank">
-                    📖 View Hadith Source
-                </a>
+                {"<a href='" + html.escape(source_url) + "' target='_blank' rel='noopener noreferrer'>📖 View source</a>" if source_url else ""}
             </div>
         </div>
         """
+        html_parts.append(card_html)
 
-    html += "</div>"
-    return html
+    html_parts.append("</div>")
+    return "\n".join(html_parts)
 
 # ===============================
-# Custom CSS
+# Custom CSS (polished, professional)
 # ===============================
-
 custom_css = """
-body {
-    background-color: #f7f9fc;
-}
+/* Page */
+body { background-color: #f5f7fb; font-family: Inter, "Segoe UI", Tahoma, Arial, sans-serif; }
 
-.results {
-    direction: rtl;
-    font-family: "Tahoma", "Arial", sans-serif;
-}
+/* Container (results) keeps RTL for hadith text blocks but LTR for metadata */
+.results { margin-top: 10px; }
 
+/* Card */
 .card {
-    background: white;
-    border-radius: 12px;
-    padding: 18px 20px;
-    margin-bottom: 16px;
-    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 18px;
+  margin-bottom: 14px;
+  box-shadow: 0 6px 20px rgba(18, 38, 63, 0.06);
+  border: 1px solid rgba(20, 43, 74, 0.03);
 }
 
+/* Header layout */
 .card-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 10px;
 }
 
+.card-header .left { display:flex; flex-direction: column; gap:6px; }
 .index {
-    background: #2563eb;
-    color: white;
-    padding: 4px 10px;
-    border-radius: 20px;
-    font-size: 14px;
+  display:inline-block;
+  background: linear-gradient(90deg,#2563eb,#06b6d4);
+  color: white;
+  padding: 6px 10px;
+  border-radius: 20px;
+  font-weight: 600;
+  font-size: 13px;
+  width: fit-content;
 }
 
-.topic {
-    font-weight: bold;
-    color: #1f2937;
-    font-size: 16px;
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #0f172a;
 }
 
-.text {
-    line-height: 1.9;
-    font-size: 16px;
-    color: #111827;
-    margin-bottom: 14px;
+.topic {
+  font-size: 13px;
+  color: #475569;
+  margin-top: 4px;
 }
 
+/* Right meta */
+.right-meta { text-align: right; min-width: 120px; }
+.meta { font-size: 12px; color: #6b7280; }
+.meta-val { color: #0f172a; font-weight: 600; margin-left: 6px; }
+
+/* Hadith text: keep RTL and readable */
+.text-rtl { direction: rtl; margin-top: 6px; margin-bottom: 10px; }
+.text-rtl .summary { cursor: pointer; font-size: 16px; color: #111827; line-height: 1.9; }
+.text-rtl .full-text { margin-top: 8px; font-size: 16px; color: #111827; line-height: 1.9; }
+
+/* Footer link */
+.footer { margin-top: 12px; }
 .footer a {
-    text-decoration: none;
-    color: #2563eb;
-    font-weight: bold;
+  text-decoration: none;
+  color: #2563eb; font-weight: 600;
 }
+.footer a:hover { text-decoration: underline; }
 
-.footer a:hover {
-    text-decoration: underline;
-}
+/* Empty state */
+.empty { font-size: 15px; color: #6b7280; text-align:center; padding: 12px; }
 
-.empty {
-    direction: ltr;
-    font-size: 16px;
-    color: #6b7280;
-    text-align: center;
+/* Responsive */
+@media (max-width: 700px) {
+  .card-header { flex-direction: column; align-items: flex-start; }
+  .right-meta { text-align: left; }
 }
 """
 
 # ===============================
 # Gradio Interface
 # ===============================
-
 interface = gr.Interface(
     fn=search_hadith,
     inputs=[
         gr.Textbox(
-            label="أدخل موضوع البحث أو السؤال",
-            placeholder="مثال: أهمية النية وأثرها في قبول الأعمال",
-
+            label="🔍 Search Query",
+            placeholder="e.g. Importance of intention in Islam / أهمية النية",
             lines=2
         ),
-        gr.Slider(
-            minimum=1,
-            maximum=20,
-            value=5,
-            step=1,
-            label="📌 Number of Results"
-        )
+        gr.Slider(minimum=1, maximum=20, value=5, step=1, label="📌 Number of Results")
     ],
     outputs=gr.HTML(),
     title="📚 Intelligent Hadith Search Engine",
     description="""
     An AI-powered semantic search engine for Hadith retrieval.
-    The system combines lexical, semantic, and topic-aware retrieval
-    to return results based on meaning — not just keyword matching.
+    Combines lexical (BM25), semantic embeddings, and topic-aware anchors.
     """,
-     examples=[
+    examples=[
         ["أهمية النية وأثرها في قبول الأعمال", 5],
-        ["فضل الصلاة", 5],
-        ["حقوق الجار", 5]],
+        ["فضل الصدقة", 5],
+        ["حقوق الوالدين", 5]
+    ],
     css=custom_css,
     allow_flagging="never"
 )
@@ -204,6 +263,5 @@ interface = gr.Interface(
 # ===============================
 # Launch
 # ===============================
-
 if __name__ == "__main__":
-    interface.launch()
+    interface.launch()