Update app.py

app.py

@@ -51,73 +51,153 @@ if test_emb.shape[0] != anchor_index.d:
 # Import retrieval logic
 from retrieval import hybrid_search_fixed
 from utils import preprocess_query
-
-# -----------------------------
-# Search function (UI entry)
-# -----------------------------
+# ===============================
+# Search Function
+# ===============================
 
 def search_hadith(query, top_k):
-    if query.strip() == "":
-        return pd.DataFrame(columns=["الموضوع", "نص الحديث", "hadith page on Islamweb.net"])
-    
-    try:
-        results_df, _ = hybrid_search_fixed(
-            query=query,
-            df=df,
-            bm25=bm25, 
-            model=model,
-            preprocess_query=preprocess_query,
-            hadith_embeddings=hadith_embeddings,
-            anchor_index=anchor_index,
-            anchor_dict=anchor_dict,
-            unique_anchor_texts=unique_anchor_texts,
-            top_k=int(top_k)
-        )
-
-        return results_df[["main_subj", "matn_text", "url"]] \
-            .rename(columns={
-                "main_subj": "الموضوع",
-                "matn_text": "نص الحديث",
-                "url": "hadith page on Islamweb.net"
-            })
-    except Exception as e:
-        print(f"Error in search: {e}")
-        return pd.DataFrame({
-            "الموضوع": ["Error"],
-            "نص الحديث": [str(e)],
-            "hadith page on Islamweb.net": [""]
-        })
-
+    if not query.strip():
+        return "<p class='empty'>Please enter a search query.</p>"
+
+    results_df, _ = hybrid_search_fixed(
+        query=query,
+        df=df,
+        bm25=bm25,
+        model=model,
+        hadith_embeddings=hadith_embeddings,
+        anchor_index=anchor_index,
+        anchor_dict=anchor_dict,
+        unique_anchor_texts=unique_anchor_texts,
+        top_k=int(top_k)
+    )
 
+    html = "<div class='results'>"
+
+    for i, row in results_df.iterrows():
+        html += f"""
+        <div class="card">
+            <div class="card-header">
+                <span class="index">#{i+1}</span>
+                <span class="topic">{row['main_subj']}</span>
+            </div>
+
+            <div class="text">
+                {row['clean_text']}
+            </div>
+
+            <div class="footer">
+                <a href="{row['url']}" target="_blank">
+                    📖 View Hadith Source
+                </a>
+            </div>
+        </div>
+        """
+
+    html += "</div>"
+    return html
+
+# ===============================
+# Custom CSS
+# ===============================
+
+custom_css = """
+body {
+    background-color: #f7f9fc;
+}
+
+.results {
+    direction: rtl;
+    font-family: "Tahoma", "Arial", sans-serif;
+}
+
+.card {
+    background: white;
+    border-radius: 12px;
+    padding: 18px 20px;
+    margin-bottom: 16px;
+    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 12px;
+}
+
+.index {
+    background: #2563eb;
+    color: white;
+    padding: 4px 10px;
+    border-radius: 20px;
+    font-size: 14px;
+}
+
+.topic {
+    font-weight: bold;
+    color: #1f2937;
+    font-size: 16px;
+}
+
+.text {
+    line-height: 1.9;
+    font-size: 16px;
+    color: #111827;
+    margin-bottom: 14px;
+}
+
+.footer a {
+    text-decoration: none;
+    color: #2563eb;
+    font-weight: bold;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}
+
+.empty {
+    direction: ltr;
+    font-size: 16px;
+    color: #6b7280;
+    text-align: center;
+}
+"""
+
+# ===============================
 # 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="عدد الأحاديث المعروضة"
+            label="📌 Number of Results"
         )
     ],
-    outputs=gr.Dataframe(
-        label="نتائج البحث",
-        wrap=True
-    ),
-    title="Using NLP to search hadith in sahih bukhari",
-    description=("AI-powered search engine that understands the **meaning** of queries, not just keyword matches."),
-    examples=[
-        ["أهمية النية وأثرها في قبول الأعمال", 5],
-        ["فضل الصلاة", 5],
-        ["حقوق الجار", 5],
-    ]
+    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.
+    """,
+    css=custom_css,
+    allow_flagging="never"
 )
 
-# Launch app
+# ===============================
+# Launch
+# ===============================
+
 if __name__ == "__main__":
     interface.launch()