Update app.py

app.py

@@ -1,4 +1,5 @@
 import streamlit as st
+import streamlit.components.v1 as components
 import numpy as np
 import pandas as pd
 import pickle, os, re, time
@@ -9,7 +10,6 @@ import whisper
 from sentence_transformers import SentenceTransformer
 from sklearn.metrics.pairwise import cosine_similarity
 from huggingface_hub import hf_hub_download
-from audio_recorder_streamlit import audio_recorder
 
 # ── Page config ──────────────────────────────────────────────
 st.set_page_config(
@@ -23,8 +23,8 @@ HF_DATASET = "Ahmed062646/WhisperModel_Ai"
 TARGET_SR  = 16000
 DEVICE     = "cuda" if torch.cuda.is_available() else "cpu"
 EMBED_NAME = "CAMeL-Lab/bert-base-arabic-camelbert-ca"
+MIN_SCORE  = 0.12
 
-# Ayah count per surah — for global ayah number computation
 SURAH_AYAH_COUNTS = [
     7,286,200,176,120,165,206,75,129,109,123,111,43,52,99,128,111,110,98,
     135,112,78,118,64,77,227,93,88,69,60,34,30,73,54,45,83,182,88,75,85,
@@ -57,32 +57,18 @@ RTL_LANGS = {"ur", "ar"}
 # ── Helpers ──────────────────────────────────────────────────
 def hf_download(filename):
     return hf_hub_download(
-        repo_id=HF_DATASET, filename=filename, repo_type="dataset"
+        repo_id=HF_DATASET, filename=filename, repo_type="dataset",
+        token=os.environ.get("HF_TOKEN")
     )
 
+def get_global_ayah_number(surah_id: int, ayah_id: int) -> int:
+    return sum(SURAH_AYAH_COUNTS[:surah_id - 1]) + ayah_id
+
 def get_ayah_audio_url(surah_id: int, ayah_id: int, reciter_id: str) -> str:
-    """Returns Islamic Network CDN audio URL for a given ayah."""
-    global_n = sum(SURAH_AYAH_COUNTS[:surah_id - 1]) + ayah_id
-    return f"https://cdn.islamic.network/quran/audio/128/{reciter_id}/{global_n}.mp3"
-
-def ayah_audio_html(url: str, label: str) -> str:
-    """
-    Returns an HTML audio player for the ayah.
-    Using raw HTML <audio> instead of st.audio() because st.audio()
-    with a URL fetches server-side and fails on CDN URLs in hosted apps.
-    The HTML audio element loads directly in the browser — no server proxy needed.
-    """
-    return f"""
-    <div class="audio-verify">
-        <p>🔊 {label}</p>
-        <audio controls preload="none" style="width:100%;margin-top:6px;">
-            <source src="{url}" type="audio/mpeg">
-            Your browser does not support the audio element.
-        </audio>
-    </div>
-    """
-
-# ── Load all resources ────────────────────────────────────────
+    n = get_global_ayah_number(surah_id, ayah_id)
+    return f"https://cdn.islamic.network/quran/audio/128/{reciter_id}/{n}.mp3"
+
+# ── Load resources ───────────────────────────────────────────
 @st.cache_resource(show_spinner=False)
 def load_resources():
     corpus_path    = hf_download("quran_verses_multilingual.csv")
@@ -168,7 +154,7 @@ def hybrid_search(query_norm, df, tfidf_vec, tfidf_mat, fidx, embed, top_k=3):
         })
     return results
 
-# ── CSS ──────────────────────────────────────────────────────
+# ── Global CSS ───────────────────────────────────────────────
 st.markdown("""
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Amiri:ital@0;1&family=IBM+Plex+Sans:wght@300;400;600&display=swap');
@@ -176,8 +162,8 @@ st.markdown("""
 
 .header {
     background: linear-gradient(135deg, #0d1f17, #1b4332 50%, #2d6a4f);
-    padding: 2.5rem 2rem; border-radius: 18px; text-align: center;
-    margin-bottom: 2rem;
+    padding: 2.5rem 2rem; border-radius: 18px;
+    text-align: center; margin-bottom: 2rem;
     box-shadow: 0 8px 32px rgba(0,0,0,0.22);
     border: 1px solid rgba(82,183,136,0.15);
 }
@@ -196,25 +182,29 @@ st.markdown("""
 }
 .rank-badge {
     display:inline-block; background:#1b4332; color:#95d5b2;
-    padding:4px 14px; border-radius:20px; font-size:0.72rem;
-    font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:1rem;
+    padding:4px 14px; border-radius:20px;
+    font-size:0.72rem; font-weight:600;
+    letter-spacing:1px; text-transform:uppercase; margin-bottom:1rem;
 }
 .rank-badge-alt {
     display:inline-block; background:#f1f3f5; color:#6c757d;
-    padding:4px 14px; border-radius:20px; font-size:0.72rem;
-    font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:1rem;
+    padding:4px 14px; border-radius:20px;
+    font-size:0.72rem; font-weight:600;
+    letter-spacing:1px; text-transform:uppercase; margin-bottom:1rem;
 }
 .ayah-meta { display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:1rem; }
 .meta-chip {
-    background:rgba(255,255,255,0.7); border:1px solid #c3e6cb;
-    border-radius:6px; padding:3px 10px;
-    font-size:0.82rem; color:#1b4332; font-weight:500;
+    background:rgba(255,255,255,0.7);
+    border:1px solid #c3e6cb; border-radius:6px;
+    padding:3px 10px; font-size:0.82rem;
+    color:#1b4332; font-weight:500;
 }
 .arabic-text {
-    font-family:"Amiri",serif; font-size:2rem; text-align:right;
-    direction:rtl; color:#0d1f17; line-height:2.3;
-    background:rgba(255,255,255,0.75); padding:1.2rem 1.4rem;
-    border-radius:10px; border-right:5px solid #2d6a4f; margin-bottom:1rem;
+    font-family:"Amiri",serif; font-size:2rem;
+    text-align:right; direction:rtl; color:#0d1f17;
+    line-height:2.3; background:rgba(255,255,255,0.75);
+    padding:1.2rem 1.4rem; border-radius:10px;
+    border-right:5px solid #2d6a4f; margin-bottom:1rem;
 }
 .translation-box {
     background:rgba(255,255,255,0.75); border-radius:10px;
@@ -222,8 +212,8 @@ st.markdown("""
     font-size:0.98rem; color:#2c3e50; line-height:1.75;
 }
 .translation-rtl {
-    direction:rtl; text-align:right; font-size:1.2rem;
-    font-family:"Amiri",serif;
+    direction:rtl; text-align:right;
+    font-size:1.2rem; font-family:"Amiri",serif;
     border-left:none !important; border-right:4px solid #52b788 !important;
 }
 .audio-verify {
@@ -231,26 +221,23 @@ st.markdown("""
     border-radius:10px; padding:0.8rem 1.1rem; margin-top:0.9rem;
 }
 .audio-verify p {
-    font-size:0.8rem; color:#2d6a4f; font-weight:600; margin-bottom:4px;
+    font-size:0.8rem; color:#2d6a4f;
+    font-weight:600; margin-bottom:5px;
 }
 .score-bar-wrap { margin:0.5rem 0 1rem; }
 .score-label { font-size:0.78rem; color:#6c757d; margin-bottom:4px; }
 .whisper-box {
     background:#f0fdf4; border:1px solid #c3e6cb;
-    border-radius:10px; padding:1rem 1.2rem; margin:1rem 0; font-size:0.88rem;
+    border-radius:10px; padding:1rem 1.2rem;
+    margin:1rem 0; font-size:0.88rem;
 }
 .invalid-box {
     background:linear-gradient(135deg,#fff0f0,#ffe0e0);
-    border:1px solid #ffb3b3; border-radius:14px; padding:1.8rem; text-align:center;
+    border:1px solid #ffb3b3; border-radius:14px;
+    padding:1.8rem; text-align:center;
 }
 .invalid-box h3 { color:#c0392b; }
 .invalid-box p  { color:#555; margin-top:6px; }
-.rec-prompt {
-    background:#f0fdf4; border:1px dashed #52b788;
-    border-radius:12px; padding:1.2rem; text-align:center;
-    margin-top:0.5rem;
-}
-.rec-prompt p { color:#2d6a4f; font-size:0.88rem; margin-bottom:0.8rem; }
 .timing { color:#a0aab4; font-size:0.79rem; text-align:right; margin-top:0.75rem; }
 </style>
 """, unsafe_allow_html=True)
@@ -269,10 +256,10 @@ with st.spinner("⏳ Loading AI models — please wait (~2 min first time)..."):
 st.success("✅ Models ready!")
 
 # ── Session state init ────────────────────────────────────────
-if "recorded_audio" not in st.session_state:
-    st.session_state.recorded_audio = None
-if "use_recorded" not in st.session_state:
-    st.session_state.use_recorded = False
+if "rec_audio_bytes" not in st.session_state:
+    st.session_state["rec_audio_bytes"] = None
+if "rec_ready" not in st.session_state:
+    st.session_state["rec_ready"] = False
 
 # ── Sidebar ──────────────────────────────────────────────────
 with st.sidebar:
@@ -288,7 +275,7 @@ with st.sidebar:
     st.markdown("---")
     st.markdown("### 📖 About")
     st.markdown("""
-    HudaAI identifies Quranic verses from recitation using
+    HudaAI identifies Quranic verses using
     **Whisper ASR** + **FAISS semantic search**.
 
     **Course:** AI2002 · Artificial Intelligence
@@ -315,58 +302,190 @@ with col_l:
             audio_bytes  = uploaded.read()
             input_source = "upload"
             st.audio(audio_bytes)
-            # Clear any saved recording if user uploads a file
-            st.session_state.use_recorded = False
 
     with tab_rec:
-        st.markdown(
-            "<p style='color:#6c757d;font-size:0.85rem;margin-bottom:4px;'>"
-            "🔴 Click mic to <b>start</b> — click again to <b>stop</b><br>"
-            "<small>Auto-stops after 3 seconds of silence</small></p>",
-            unsafe_allow_html=True
-        )
-
-        # Returns WAV bytes directly — no download/upload needed
-        # Works with Python 3.13, no native dependency issues
-        recorded = audio_recorder(
-            text="",
-            recording_color="#e74c3c",
-            neutral_color="#2d6a4f",
-            icon_name="microphone",
-            icon_size="3x",
-            pause_threshold=3.0,
-            sample_rate=TARGET_SR
+        # ── Recorder: JS sends base64 WAV to a hidden text_area, Python reads it ──
+        # We write the b64 payload to a temp file path stored in session_state key
+        # and trigger a rerun via a checkbox toggle bridge.
+
+        # Hidden textarea bridge — JS will inject base64 audio here
+        b64_bridge = st.text_area(
+            "rec_bridge", value="", key="rec_b64_bridge",
+            label_visibility="collapsed", height=1,
+            help="internal"
         )
+        # Hide the textarea with CSS
+        st.markdown("""
+        <style>
+        [data-testid="stTextArea"][aria-label="rec_bridge"],
+        div:has(> [data-testid="stTextArea"] textarea#rec_b64_bridge) { display:none !important; }
+        </style>""", unsafe_allow_html=True)
+
+        # Process incoming base64 audio from JS
+        if b64_bridge and b64_bridge.startswith("data:audio"):
+            import base64 as _b64
+            header, b64data = b64_bridge.split(",", 1)
+            raw = _b64.b64decode(b64data)
+            st.session_state["rec_audio_bytes"] = raw
+            st.session_state["rec_ready"] = True
+
+        # Show recorder component
+        components.html("""
+<html><head><meta charset="utf-8"><style>
+*{margin:0;padding:0;box-sizing:border-box;}
+body{font-family:'Segoe UI',sans-serif;background:transparent;padding:8px;}
+.card{background:linear-gradient(145deg,#0f2419,#1b4332);border-radius:16px;
+      padding:16px 22px;box-shadow:0 6px 24px rgba(0,0,0,0.3);
+      border:1px solid rgba(82,183,136,0.2);}
+.toprow{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
+.left{display:flex;align-items:center;gap:8px;}
+.dot{width:8px;height:8px;border-radius:50%;background:#ff4444;display:none;animation:blink 1s infinite;}
+.dot.on{display:block;}.dot.hold{animation:none;background:#ffaa00;}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
+.status{font-size:0.7rem;color:#95d5b2;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;}
+.timer{font-size:1.3rem;font-weight:300;color:#fff;letter-spacing:2px;font-variant-numeric:tabular-nums;}
+.wave{display:flex;align-items:center;justify-content:center;gap:3px;height:40px;margin:8px 0;}
+.bar{width:4px;border-radius:2px;background:#2d6a4f;height:4px;transition:height 0.07s ease;}
+.btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
+.btn{border:none;border-radius:50px;cursor:pointer;font-weight:600;font-size:0.78rem;
+     padding:8px 18px;display:flex;align-items:center;gap:4px;transition:all 0.15s;}
+.btn:hover{transform:scale(1.05);}.btn:active{transform:scale(0.97);}
+.btn-rec{background:#52b788;color:#0f2419;}.btn-paus{background:#f9c74f;color:#0f2419;}
+.btn-res{background:#4dabf7;color:#0f2419;}.btn-stop{background:#f94144;color:#fff;}
+.done{margin-top:10px;background:rgba(82,183,136,0.1);border:1px solid rgba(82,183,136,0.35);
+      border-radius:10px;padding:10px;text-align:center;display:none;}
+.done.show{display:block;}
+audio{width:100%;margin:6px 0;border-radius:6px;}
+.use-btn{width:100%;padding:9px;background:#52b788;color:#0f2419;border:none;border-radius:8px;
+         font-weight:700;font-size:0.88rem;cursor:pointer;margin-top:4px;}
+.use-btn:hover{background:#74c69d;}
+.note{color:#aaa;font-size:0.72rem;margin-top:5px;}
+.sending{color:#f9c74f;font-size:0.78rem;margin-top:6px;display:none;}
+</style></head><body>
+<div class="card">
+  <div class="toprow">
+    <div class="left"><div class="dot" id="dot"></div><span class="status" id="status">Ready</span></div>
+    <div class="timer" id="timer">00:00</div>
+  </div>
+  <div class="wave" id="wave"></div>
+  <div class="btns" id="btns"><button class="btn btn-rec" onclick="rec()">● Record</button></div>
+  <div class="done" id="done">
+    <audio id="prev" controls></audio>
+    <button class="use-btn" onclick="sendToStreamlit()">✅ Use This Recording</button>
+    <div class="sending" id="sending">⏳ Saving to Streamlit...</div>
+    <p class="note">This will save your recording instantly — no download needed.</p>
+  </div>
+</div>
+<script>
+const N=36, wave=document.getElementById('wave');
+for(let i=0;i<N;i++){const b=document.createElement('div');b.className='bar';b.id='b'+i;wave.appendChild(b);}
+let mr=null,chunks=[],ctx=null,an=null,src=null,raf=null,ti=null,secs=0,paused=false,blob=null;
+
+function fmt(s){return[Math.floor(s/60),s%60].map(v=>String(v).padStart(2,'0')).join(':');}
+function startTimer(){secs=0;document.getElementById('timer').textContent='00:00';
+  ti=setInterval(()=>{if(!paused){secs++;document.getElementById('timer').textContent=fmt(secs);}},1000);}
+function stopTimer(){clearInterval(ti);}
+
+function resetBars(){for(let i=0;i<N;i++){const b=document.getElementById('b'+i);b.style.height='4px';b.style.background='#2d6a4f';}}
+function animate(){
+  if(!an)return;const d=new Uint8Array(an.frequencyBinCount);an.getByteFrequencyData(d);
+  for(let i=0;i<N;i++){const b=document.getElementById('b'+i),v=d[Math.floor(i*d.length/N)];
+    const h=paused?4:Math.max(4,Math.min(42,v*0.42));b.style.height=h+'px';
+    const p=v/255;b.style.background=p<0.4?'#52b788':p<0.75?'#f9c74f':'#f94144';}
+  raf=requestAnimationFrame(animate);}
+function setbtns(h){document.getElementById('btns').innerHTML=h;}
+
+async function rec(){
+  try{
+    const stream=await navigator.mediaDevices.getUserMedia({audio:true});
+    ctx=new(window.AudioContext||window.webkitAudioContext)();
+    an=ctx.createAnalyser();an.fftSize=128;
+    src=ctx.createMediaStreamSource(stream);src.connect(an);
+    // Prefer OGG/opus → WAV fallback (both accepted by file_uploader)
+    const mime=MediaRecorder.isTypeSupported('audio/ogg;codecs=opus')
+      ? 'audio/ogg;codecs=opus'
+      : MediaRecorder.isTypeSupported('audio/wav') ? 'audio/wav' : '';
+    mr=new MediaRecorder(stream, mime?{mimeType:mime}:{});
+    chunks=[];mr.ondataavailable=e=>chunks.push(e.data);mr.onstop=finalize;mr.start(100);
+    paused=false;blob=null;
+    document.getElementById('dot').className='dot on';
+    document.getElementById('status').textContent='Recording...';
+    document.getElementById('done').className='done';
+    document.getElementById('sending').style.display='none';
+    setbtns('<button class="btn btn-paus" onclick="paus()">⏸ Pause</button><button class="btn btn-stop" onclick="stop()">⏹ Stop</button>');
+    startTimer();animate();
+  }catch(e){document.getElementById('status').textContent='⚠️ Mic access denied';}
+}
+function paus(){if(mr&&mr.state==='recording'){mr.pause();paused=true;
+  document.getElementById('dot').className='dot hold';
+  document.getElementById('status').textContent='Paused';
+  setbtns('<button class="btn btn-res" onclick="res()">▶ Resume</button><button class="btn btn-stop" onclick="stop()">⏹ Stop</button>');}}
+function res(){if(mr&&mr.state==='paused'){mr.resume();paused=false;
+  document.getElementById('dot').className='dot on';
+  document.getElementById('status').textContent='Recording...';
+  setbtns('<button class="btn btn-paus" onclick="paus()">⏸ Pause</button><button class="btn btn-stop" onclick="stop()">⏹ Stop</button>');}}
+function stop(){if(mr){mr.stop();mr.stream.getTracks().forEach(t=>t.stop());}
+  cancelAnimationFrame(raf);stopTimer();resetBars();paused=false;
+  document.getElementById('dot').className='dot';
+  document.getElementById('status').textContent='Processing...';
+  setbtns('');}
+
+function finalize(){
+  blob=new Blob(chunks,{type:mr.mimeType||'audio/ogg'});
+  const url=URL.createObjectURL(blob);
+  document.getElementById('prev').src=url;
+  document.getElementById('status').textContent='Done — '+fmt(secs);
+  document.getElementById('done').className='done show';
+  setbtns('<button class="btn btn-rec" onclick="rec()">● New Recording</button>');
+}
 
-        if recorded:
-            # New recording — store in session state
-            st.session_state.recorded_audio = recorded
-            st.session_state.use_recorded   = False
-
-        # Show confirmation prompt if there's a stored recording
-        if st.session_state.recorded_audio is not None:
-            st.markdown("""
-            <div class="rec-prompt">
-                <p>✅ Recording captured — do you want to use it?</p>
-            </div>
-            """, unsafe_allow_html=True)
+function sendToStreamlit(){
+  if(!blob)return;
+  document.getElementById('sending').style.display='block';
+  const reader=new FileReader();
+  reader.onload=function(e){
+    const dataURL=e.target.result; // data:audio/ogg;base64,...
+    // Find the hidden textarea Streamlit rendered and set its value
+    const textareas=window.parent.document.querySelectorAll('textarea');
+    let found=false;
+    for(const ta of textareas){
+      if(ta.id && ta.id.includes('rec_b64_bridge')){
+        // React-controlled input — use nativeInputValueSetter
+        const nativeInputValueSetter=Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype,'value').set;
+        nativeInputValueSetter.call(ta,dataURL);
+        ta.dispatchEvent(new Event('input',{bubbles:true}));
+        found=true;break;
+      }
+    }
+    if(!found){
+      // Fallback: try by label text
+      const all=window.parent.document.querySelectorAll('textarea');
+      for(const ta of all){
+        try{
+          const niv=Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype,'value').set;
+          niv.call(ta,dataURL);
+          ta.dispatchEvent(new Event('input',{bubbles:true}));
+          found=true;break;
+        }catch(e){}
+      }
+    }
+    document.getElementById('sending').style.display='none';
+    document.getElementById('status').textContent='✅ Sent!';
+  };
+  reader.readAsDataURL(blob);
+}
+</script></body></html>
+        """, height=310, scrolling=False)
+
+        # Show recorded audio if available in session state
+        if st.session_state.get("rec_ready") and st.session_state.get("rec_audio_bytes"):
+            st.success("✅ Recording saved! Click **Identify Ayah** below.")
+            st.audio(st.session_state["rec_audio_bytes"], format="audio/ogg")
+            if st.button("🗑️ Clear Recording", key="clear_rec"):
+                st.session_state["rec_ready"] = False
+                st.session_state["rec_audio_bytes"] = None
+                st.rerun()
 
-            st.audio(st.session_state.recorded_audio, format="audio/wav")
-
-            col_yes, col_no = st.columns(2)
-            with col_yes:
-                if st.button("✅ Use this recording", use_container_width=True):
-                    st.session_state.use_recorded = True
-            with col_no:
-                if st.button("🗑️ Discard", use_container_width=True):
-                    st.session_state.recorded_audio = None
-                    st.session_state.use_recorded   = False
-                    st.rerun()
-
-        if st.session_state.use_recorded and st.session_state.recorded_audio is not None:
-            audio_bytes  = st.session_state.recorded_audio
-            input_source = "record"
-            st.success("🎙️ Recording set — click **Identify Ayah** below.")
 with col_r:
     st.markdown("### 🌐 Settings Summary")
     st.info(
@@ -374,8 +493,15 @@ with col_r:
         f"**Verification reciter:** {reciter_name}"
     )
     if audio_bytes:
-        src = "🎙️ Recorded" if input_source == "record" else "📁 Uploaded"
-        st.success(f"✅ Audio ready ({src})")
+        st.success(
+            f"✅ Audio ready  \n"
+            f"Source: {'Recording' if input_source == 'record' else 'Upload'}"
+        )
+
+# ── Pull recorded audio from session_state if no upload ──────
+if audio_bytes is None and st.session_state.get("rec_ready") and st.session_state.get("rec_audio_bytes"):
+    audio_bytes  = st.session_state["rec_audio_bytes"]
+    input_source = "record"
 
 # ── Identify button ───────────────────────────────────────────
 if audio_bytes:
@@ -386,12 +512,12 @@ if audio_bytes:
         with open(tmp, "wb") as f:
             f.write(audio_bytes)
 
-        with st.spinner("🔄 Preprocessing audio..."):
+        with st.spinner("🔄 Preprocessing..."):
             audio, _ = librosa.load(tmp, sr=TARGET_SR, mono=True)
             audio, _ = librosa.effects.trim(audio, top_db=20)
             audio    = (audio / (np.abs(audio).max() + 1e-8) * 0.95).astype(np.float32)
 
-        with st.spinner("🎙️ Transcribing with Whisper..."):
+        with st.spinner("🎙️ Whisper transcribing..."):
             t0     = time.time()
             result = wmodel.transcribe(
                 audio, language="ar", task="transcribe",
@@ -417,13 +543,13 @@ if audio_bytes:
             <span style="color:#555;">Normalized:</span> {norm_text}<br>
             <span style="color:#888;font-size:0.79rem;">
                 Language: {detected_lg} &nbsp;|&nbsp;
-                No-speech prob: {round(no_sp_prob, 3)} &nbsp;|&nbsp;
-                Whisper time: {whisper_ms}ms
+                No-speech: {round(no_sp_prob,3)} &nbsp;|&nbsp;
+                Time: {whisper_ms}ms
             </span>
         </div>
         """, unsafe_allow_html=True)
 
-        # ── Validation ────────────────────────────────────────
+        # Validation
         invalid, reason = False, ""
         if no_sp_prob > 0.60:
             invalid = True
@@ -448,11 +574,9 @@ if audio_bytes:
             """, unsafe_allow_html=True)
 
         else:
-            with st.spinner("🔍 Searching Quran database..."):
+            with st.spinner("🔍 Searching Quran..."):
                 t1        = time.time()
-                matches   = hybrid_search(
-                    norm_text, df, tfidf_vec, tfidf_mat, fidx, embed, top_k
-                )
+                matches   = hybrid_search(norm_text, df, tfidf_vec, tfidf_mat, fidx, embed, top_k)
                 search_ms = round((time.time() - t1) * 1000)
 
             if not matches or matches[0]["score"] < min_score:
@@ -461,7 +585,7 @@ if audio_bytes:
                 <div class="invalid-box">
                     <h3>⛔ No Quranic Ayah Found</h3>
                     <p>❌ Audio does not appear to be a Quranic recitation.</p>
-                    <p><b>Reason:</b> Best score ({best:.4f}) below threshold ({min_score}).</p>
+                    <p><b>Reason:</b> Best score ({best:.4f}) below threshold ({min_score})</p>
                 </div>
                 """, unsafe_allow_html=True)
 
@@ -477,10 +601,7 @@ if audio_bytes:
                         f'<span class="rank-badge-alt">Candidate #{i+1}</span>'
                     )
 
-                    translation = (
-                        m["ayah_ar"] if lang_code == "ar"
-                        else m.get(f"ayah_{lang_code}", "")
-                    )
+                    translation = m["ayah_ar"] if lang_code == "ar" else m.get(f"ayah_{lang_code}", "")
                     if not translation or translation == "nan":
                         translation = "[Translation not available]"
 
@@ -519,21 +640,27 @@ if audio_bytes:
                     </div>
                     """, unsafe_allow_html=True)
 
-                    # ── Ayah verification audio ───────────────
-                    # Uses raw HTML <audio> element — loads CDN URL
-                    # directly in browser without server proxy
+                    # ── Ayah audio verification ───────────────────────────
                     if show_audio:
-                        audio_url = get_ayah_audio_url(
-                            m["surah_id"], m["ayah_id"], reciter_id
-                        )
-                        st.markdown(
-                            ayah_audio_html(
-                                audio_url,
-                                f"Verify — {reciter_name} · "
-                                f"Surah {m['surah_id']} · Ayah {m['ayah_id']}"
-                            ),
-                            unsafe_allow_html=True
-                        )
+                        audio_url = get_ayah_audio_url(m["surah_id"], m["ayah_id"], reciter_id)
+                        st.markdown(f"""
+                        <div class="audio-verify">
+                            <p>🔊 Verify — {reciter_name}
+                            &nbsp;·&nbsp; Surah {m["surah_id"]}
+                            &nbsp;·&nbsp; Ayah {m["ayah_id"]}</p>
+                        </div>
+                        """, unsafe_allow_html=True)
+                        # Fetch audio bytes server-side so Streamlit serves reliably
+                        try:
+                            import urllib.request
+                            with urllib.request.urlopen(audio_url, timeout=10) as resp:
+                                ayah_audio_bytes = resp.read()
+                            st.audio(ayah_audio_bytes, format="audio/mp3")
+                        except Exception:
+                            st.warning(
+                                f"⚠️ Could not load audio automatically. "
+                                f"[▶ Listen directly]({audio_url})"
+                            )
 
                 st.markdown(
                     f'<p class="timing">⏱ Whisper: {whisper_ms}ms &nbsp;|&nbsp;'