Update app.py

app.py

@@ -65,6 +65,12 @@ def set_stop_thinking():
     print(f"[STOP-THINK] set_stop_thinking CALLED! Flag is now: {global_stop_thinking[0]}")
     return gr.update(value="⚡ Forcing generation...")
 
+def reset_stop_thinking_after_delay():
+    """Wait 5 seconds then restore the button text so the user can click it again."""
+    import time
+    time.sleep(5)
+    return gr.update(value="⚡ Stop thinking, Generate now")
+
 def set_kill_threads():
     global_kill_threads[0] = True
     print(f"[KILL] set_kill_threads CALLED! Flag is now: {global_kill_threads[0]}")
@@ -443,13 +449,26 @@ CRITICAL: Do NOT overthink. Do NOT deliberate over conditions, edge cases, or re
                 thread2 = Thread(target=run_generation, args=(inputs2, streamer2, local_stop))
                 thread2.start()
                 
+                HARD_FORCE_CHARS = 10_000
                 for new_text2 in streamer2:
                     output_text += new_text2
                     yield output_text, None
                     
-                    # Allow user to force again if model still isn't producing JSON
-                    if global_stop_thinking[0] or global_kill_threads[0]:
-                        print("[STOP-THINK] Flag detected in forced generation loop! Killing...")
+                    # Hard auto-force: if total output exceeds 10K chars and
+                    # the text after the last ```json prefix has no closing ] or },
+                    # the model is still rambling — force again automatically.
+                    last_json_start = output_text.rfind('```json')
+                    text_after_json = output_text[last_json_start:] if last_json_start >= 0 else ''
+                    has_json_end = (']' in text_after_json or '}' in text_after_json) if text_after_json else False
+                    should_hard_force = (
+                        len(output_text) > HARD_FORCE_CHARS
+                        and not has_json_end
+                    )
+                    
+                    # Allow user to force again OR hard auto-force kicks in
+                    if global_stop_thinking[0] or global_kill_threads[0] or should_hard_force:
+                        reason = "hard auto-force (>10K chars)" if should_hard_force and not global_stop_thinking[0] else "user/kill flag"
+                        print(f"[STOP-THINK] Flag detected in forced generation loop ({reason})! Killing...")
                         local_stop[0] = True
                         while not streamer2.text_queue.empty():
                             try:
@@ -1081,11 +1100,8 @@ def process_pdf(pdf_file, url_input, audio_file_input, yt_url_input, yt_cookies_
     </html>
     """
     
-    import html
-    safe_srcdoc = html.escape(iframe_html)
-    
-    # Return the iframe containing the whole SPA
-    yield f'<iframe srcdoc="{safe_srcdoc}" style="width: 100%; height: 650px; border: none; overflow-y: auto;"></iframe>', current_source_hash, vocab_list, stream_text, content_text, images, extracted_audio_path
+    fc_html = build_flashcard_html(vocab_list)
+    yield fc_html, current_source_hash, vocab_list, stream_text, content_text, images, extracted_audio_path
 
 LANGUAGE_DATA = """Indo-European	Bengali, English, French, Portuguese, German, Romanian, Swedish, Danish, Bulgarian, Russian, Czech, Greek, Ukrainian, Spanish, Dutch, Slovak, Croatian, Polish, Lithuanian, Norwegian Bokmål, Norwegian Nynorsk, Persian, Slovenian, Gujarati, Latvian, Italian, Occitan, Nepali, Marathi, Belarusian, Serbian, Luxembourgish, Venetian, Assamese, Welsh, Silesian, Asturian, Chhattisgarhi, Awadhi, Maithili, Bhojpuri, Sindhi, Irish, Faroese, Hindi, Punjabi, Oriya, Tajik, Eastern Yiddish, Lombard, Ligurian, Sicilian, Friulian, Sardinian, Galician, Catalan, Icelandic, Tosk Albanian, Limburgish, Dari, Afrikaans, Macedonian, Sinhala, Urdu, Magahi, Bosnian, Armenian, Latgalian, Scottish Gaelic, Central Kurdish, Northern Kurdish, Southern Pashto, Sanskrit, Dhundari, Marwari, Ahirani, Bagheli, Bagri, Bundeli, Braj, Kumaoni, Kashmiri
 Sino-Tibetan	Chinese (Simplified), Chinese (Traditional), Cantonese, Burmese, Standard Tibetan, Meitei
@@ -1191,20 +1207,451 @@ def process_pdf_force(partial_text, pdf_file, url_input, translit_lang, translit
                 item["audio_uri"] = None
 
     progress(1.0, desc="Rendering flashcards...")
-    
-    from jinja2 import Environment, BaseLoader
-    import json
-    
-    env = Environment(loader=BaseLoader())
-    template = env.from_string(html_template)
-    html_output = template.render(
-        vocab_list=vocab_list,
-        translit_lang=translit_lang,
-        target_lang=target_lang
+    fc_html = build_flashcard_html(vocab_list)
+    yield fc_html, current_source_hash, vocab_list, stream_text, content_text, images, None
+
+
+def build_flashcard_html(vocab_list):
+    """Build the flashcard SPA with spaced repetition (SM-2 lite via localStorage)."""
+    import html as _html
+    cards_json = json.dumps(vocab_list).replace("</", "<\\/")
+
+    iframe_html = f"""<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
+<style>
+  * {{ box-sizing:border-box; margin:0; padding:0; }}
+  body {{ background:transparent; font-family:'Outfit','Inter',sans-serif; color:#f8fafc; padding:12px 8px; }}
+  .sr-header {{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }}
+  .sr-bar-wrap {{ flex:1; height:7px; background:rgba(255,255,255,.1); border-radius:4px; overflow:hidden; }}
+  .sr-bar-fill {{ height:100%; background:linear-gradient(90deg,#22c55e,#3b82f6); border-radius:4px; transition:width .5s ease; }}
+  .sr-stats-txt {{ font-size:12px; color:#94a3b8; white-space:nowrap; }}
+  .due-btn {{ padding:5px 13px; border-radius:20px; border:1px solid rgba(56,189,248,.4); background:rgba(56,189,248,.1); color:#38bdf8; font-size:12px; font-weight:700; cursor:pointer; transition:all .2s; white-space:nowrap; }}
+  .due-btn.active {{ background:rgba(56,189,248,.3); border-color:#38bdf8; box-shadow:0 0 10px rgba(56,189,248,.4); }}
+  .due-btn:hover {{ background:rgba(56,189,248,.25); }}
+  .fc-container {{ perspective:1000px; width:100%; max-width:520px; margin:0 auto; }}
+  .flashcard {{ width:100%; min-height:330px; display:grid; transition:transform .6s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; cursor:pointer; }}
+  .flashcard.is-flipped {{ transform:rotateY(180deg); }}
+  .card-face {{ grid-area:1/1; width:100%; backface-visibility:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:20px; padding:28px; box-sizing:border-box; text-align:center; }}
+  .card-front {{ background:linear-gradient(135deg,rgba(30,41,59,.95) 0%,rgba(15,23,42,.95) 100%); border-top:2px solid rgba(139,92,246,.6); box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.05); position:relative; }}
+  .card-back {{ transform:rotateY(180deg); background:linear-gradient(135deg,rgba(30,58,138,.95) 0%,rgba(15,23,42,.95) 100%); border-top:2px solid rgba(56,189,248,.6); box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.05); }}
+  .sr-badge {{ position:absolute; top:12px; right:14px; font-size:10px; padding:3px 9px; border-radius:12px; font-weight:800; letter-spacing:.5px; }}
+  .badge-new {{ background:rgba(139,92,246,.3); color:#c084fc; }}
+  .badge-learning {{ background:rgba(239,68,68,.3); color:#fca5a5; }}
+  .badge-known {{ background:rgba(34,197,94,.3); color:#86efac; }}
+  .badge-due {{ background:rgba(251,191,36,.3); color:#fde68a; }}
+  .ko-text {{ font-size:50px; font-weight:800; color:#fff; text-shadow:0 0 20px rgba(139,92,246,.7); margin-bottom:14px; line-height:1.2; }}
+  .en-text {{ font-size:28px; font-weight:800; color:#fff; text-shadow:0 0 15px rgba(56,189,248,.7); margin-bottom:6px; }}
+  .tr-text {{ font-size:17px; font-style:italic; color:#fca5a5; margin-bottom:12px; letter-spacing:1px; }}
+  .exp-text {{ font-size:14px; color:#cbd5e1; line-height:1.6; background:rgba(0,0,0,.25); padding:12px 15px; border-radius:12px; border:1px solid rgba(255,255,255,.06); max-width:100%; }}
+  .flip-hint {{ margin-top:14px; color:#475569; font-size:12px; display:flex; align-items:center; gap:5px; }}
+  .audio-btn {{ margin-top:10px; padding:9px 20px; background:rgba(56,189,248,.15); color:#38bdf8; border:1px solid rgba(56,189,248,.4); border-radius:20px; font-size:13px; font-weight:700; cursor:pointer; transition:all .3s; display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.5px; }}
+  .audio-btn:hover {{ background:rgba(56,189,248,.35); transform:scale(1.04); box-shadow:0 5px 15px rgba(56,189,248,.3); }}
+  .copy-icon {{ cursor:pointer; color:#475569; font-size:18px; transition:color .2s,transform .2s; flex-shrink:0; }}
+  .copy-icon:hover {{ color:#8b5cf6; transform:scale(1.15); }}
+  .sr-actions {{ display:flex; justify-content:center; gap:10px; margin-top:18px; width:100%; max-width:520px; margin-left:auto; margin-right:auto; }}
+  .sr-btn {{ flex:1; padding:12px 8px; border:none; border-radius:14px; font-weight:700; font-size:13px; cursor:pointer; transition:all .25s cubic-bezier(.4,0,.2,1); display:flex; align-items:center; justify-content:center; gap:5px; font-family:inherit; }}
+  .sr-dk {{ background:rgba(239,68,68,.2); border:1px solid rgba(239,68,68,.5); color:#fca5a5; }}
+  .sr-dk:hover {{ background:rgba(239,68,68,.4); transform:translateY(-2px); box-shadow:0 6px 20px rgba(239,68,68,.3); }}
+  .sr-sk {{ background:rgba(100,116,139,.2); border:1px solid rgba(100,116,139,.5); color:#94a3b8; }}
+  .sr-sk:hover {{ background:rgba(100,116,139,.4); transform:translateY(-2px); }}
+  .sr-kn {{ background:rgba(34,197,94,.2); border:1px solid rgba(34,197,94,.5); color:#86efac; }}
+  .sr-kn:hover {{ background:rgba(34,197,94,.4); transform:translateY(-2px); box-shadow:0 6px 20px rgba(34,197,94,.3); }}
+  .nav-buttons {{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; width:100%; max-width:520px; margin-left:auto; margin-right:auto; gap:10px; }}
+  .nav-btn {{ padding:9px 18px; border-radius:14px; background:rgba(139,92,246,.15); border:1px solid rgba(139,92,246,.4); color:white; font-weight:700; cursor:pointer; transition:all .25s; display:flex; align-items:center; gap:5px; font-size:13px; font-family:inherit; }}
+  .nav-btn:hover {{ background:rgba(139,92,246,.4); transform:translateY(-2px); box-shadow:0 5px 15px rgba(139,92,246,.3); }}
+  .nav-btn:disabled {{ background:rgba(100,116,139,.1); border-color:rgba(100,116,139,.2); color:#334155; cursor:not-allowed; transform:none; box-shadow:none; }}
+  .progress {{ text-align:center; margin-top:8px; color:#475569; font-size:13px; font-weight:600; }}
+</style>
+</head>
+<body>
+<div id="fc-app">
+  <div class="sr-header">
+    <div class="sr-bar-wrap"><div class="sr-bar-fill" id="sr-fill" style="width:0%"></div></div>
+    <span class="sr-stats-txt" id="sr-stats"></span>
+    <button class="due-btn" id="due-btn" onclick="toggleReview()">📅 Due Cards</button>
+  </div>
+  <div class="fc-container">
+    <div class="flashcard" id="card" onclick="flipCard()">
+      <div class="card-face card-front">
+        <span class="sr-badge badge-new" id="sr-badge">🆕 NEW</span>
+        <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;width:100%;justify-content:center;">
+          <div class="ko-text" id="front-text"><i class="fi fi-rr-spinner-third"></i></div>
+          <i class="fi fi-rr-copy copy-icon" id="copy-ko" onclick="copyText('front-text',event,this)" style="display:none;"></i>
+        </div>
+        <button class="audio-btn" onclick="playAudio(event)" id="audio-btn" style="display:none;"><i class="fi fi-rr-play-circle"></i> Play</button>
+        <p class="flip-hint"><i class="fi fi-rr-rotate-right"></i> Click card to flip 🎯</p>
+      </div>
+      <div class="card-face card-back">
+        <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;width:100%;justify-content:center;">
+          <div class="en-text" id="back-en"></div>
+          <i class="fi fi-rr-copy copy-icon" id="copy-en" onclick="copyText('back-en',event,this)" style="display:none;"></i>
+        </div>
+        <div class="tr-text" id="back-tr"></div>
+        <div class="exp-text"><i class="fi fi-rr-lightbulb-on" style="color:#f1c40f;"></i> <span id="back-exp"></span></div>
+      </div>
+    </div>
+  </div>
+  <div class="sr-actions">
+    <button class="sr-btn sr-dk" onclick="markDontKnow()">❌ Don't Know</button>
+    <button class="sr-btn sr-sk" onclick="skipCard()">⏭ Skip</button>
+    <button class="sr-btn sr-kn" onclick="markKnow()">✅ Know</button>
+  </div>
+  <div class="nav-buttons">
+    <button class="nav-btn" id="prev-btn" onclick="prevCard()"><i class="fi fi-rr-angle-left"></i> Prev</button>
+    <button class="nav-btn" id="next-btn" onclick="nextCard()">Next <i class="fi fi-rr-angle-right"></i></button>
+  </div>
+  <div class="progress" id="prog"></div>
+</div>
+<script>
+  const ALL = {cards_json};
+  let disp=[...ALL], idx=0, reviewMode=false;
+  const aud=new Audio();
+
+  function srKey(k){{ return 'sr_'+encodeURIComponent(k); }}
+  function getSR(k){{ const s=localStorage.getItem(srKey(k)); return s?JSON.parse(s):{{interval:1,ef:2.5,due:null,status:'new'}}; }}
+  function setSR(k,s){{ localStorage.setItem(srKey(k),JSON.stringify(s)); }}
+  function today(){{ return new Date().toISOString().slice(0,10); }}
+  function daysLater(n){{ const d=new Date(); d.setDate(d.getDate()+n); return d.toISOString().slice(0,10); }}
+  function isDue(s){{ return !s.due||s.status==='new'||s.due<=today(); }}
+
+  function markKnow(){{
+    if(!disp.length) return;
+    const k=disp[idx].korean; let s=getSR(k);
+    s.interval=Math.round((s.interval||1)*(s.ef||2.5));
+    s.ef=Math.min(2.5,(s.ef||2.5)+0.1);
+    s.due=daysLater(s.interval); s.status='known';
+    setSR(k,s); afterAction();
+  }}
+  function markDontKnow(){{
+    if(!disp.length) return;
+    const k=disp[idx].korean; let s=getSR(k);
+    s.interval=1; s.ef=Math.max(1.3,(s.ef||2.5)-0.2);
+    s.due=daysLater(1); s.status='learning';
+    setSR(k,s); afterAction();
+  }}
+  function skipCard(){{ if(!disp.length) return; afterAction(); }}
+  function afterAction(){{
+    if(reviewMode){{ refreshDue(); }}
+    else {{ if(idx<disp.length-1){{ idx++; }} else {{ idx=0; }} showCard(); }}
+    updateHeader();
+  }}
+
+  function toggleReview(){{
+    reviewMode=!reviewMode;
+    const btn=document.getElementById('due-btn');
+    if(reviewMode){{ btn.classList.add('active'); btn.textContent='📖 All Cards'; refreshDue(); }}
+    else{{ btn.classList.remove('active'); btn.textContent='📅 Due Cards'; disp=[...ALL]; idx=0; showCard(); }}
+    updateHeader();
+  }}
+  function refreshDue(){{
+    const due=ALL.filter(c=>isDue(getSR(c.korean)));
+    if(!due.length){{
+      disp=[];
+      document.getElementById('front-text').innerHTML='🎉 All caught up!';
+      ['audio-btn','copy-ko','copy-en','sr-badge'].forEach(id=>{{ const el=document.getElementById(id); if(el) el.style.display='none'; }});
+      document.getElementById('prev-btn').disabled=true;
+      document.getElementById('next-btn').disabled=true;
+      document.getElementById('prog').textContent='✨ Nothing due today!';
+      return;
+    }}
+    disp=due; if(idx>=disp.length) idx=0; showCard();
+  }}
+
+  function updateHeader(){{
+    const total=ALL.length; if(!total) return;
+    const known=ALL.filter(c=>getSR(c.korean).status==='known').length;
+    const due=ALL.filter(c=>isDue(getSR(c.korean))).length;
+    document.getElementById('sr-fill').style.width=Math.round(known/total*100)+'%';
+    document.getElementById('sr-stats').textContent=`✅ ${{known}}/${{total}} · 📅 ${{due}} due`;
+    if(!reviewMode){{
+      const db=document.getElementById('due-btn');
+      db.textContent=due>0?`📅 Due (${{due}})`:'📅 Due Cards';
+    }}
+  }}
+
+  function showCard(){{
+    if(!disp.length) return;
+    const c=disp[idx];
+    document.getElementById('front-text').innerText=c.korean||'—';
+    document.getElementById('back-en').innerText=c.translation||c.english||'';
+    document.getElementById('back-tr').innerText=c.transliteration?`[${{c.transliteration}}]`:'';
+    document.getElementById('back-exp').innerText=c.explanation||'';
+    const s=getSR(c.korean);
+    const badge=document.getElementById('sr-badge');
+    badge.style.display='block';
+    if(s.status==='known'){{ badge.textContent=isDue(s)?'⏰ DUE':'✅ KNOWN'; badge.className=isDue(s)?'sr-badge badge-due':'sr-badge badge-known'; }}
+    else if(s.status==='learning'){{ badge.textContent='📖 LEARNING'; badge.className='sr-badge badge-learning'; }}
+    else{{ badge.textContent='🆕 NEW'; badge.className='sr-badge badge-new'; }}
+    document.getElementById('copy-ko').style.display='block';
+    document.getElementById('copy-en').style.display='block';
+    document.getElementById('prev-btn').disabled=idx===0;
+    document.getElementById('next-btn').disabled=idx===disp.length-1;
+    document.getElementById('prog').innerHTML=`📚 Card ${{idx+1}} of ${{disp.length}}`;
+    document.getElementById('card').classList.remove('is-flipped');
+    if(c.audio_uri){{ aud.src=c.audio_uri; document.getElementById('audio-btn').style.display='flex'; }}
+    else {{ document.getElementById('audio-btn').style.display='none'; }}
+    updateHeader();
+  }}
+
+  function flipCard(){{ if(disp.length) document.getElementById('card').classList.toggle('is-flipped'); }}
+  function playAudio(e){{ e.stopPropagation(); aud.play().catch(()=>{{}}); }}
+  function nextCard(){{ if(idx<disp.length-1){{ idx++; showCard(); }} }}
+  function prevCard(){{ if(idx>0){{ idx--; showCard(); }} }}
+  function copyText(id,e,el){{
+    e.stopPropagation();
+    navigator.clipboard.writeText(document.getElementById(id).innerText).then(()=>{{
+      const old=el.className; el.className='fi fi-rr-check copy-icon'; el.style.color='#22c55e';
+      setTimeout(()=>{{ el.className=old; el.style.color=''; }},1500);
+    }}).catch(()=>{{}});
+  }}
+  window.onload=function(){{ if(ALL.length) showCard(); updateHeader(); }};
+</script>
+</body>
+</html>"""
+
+    safe_srcdoc = _html.escape(iframe_html)
+    return f'<iframe srcdoc="{safe_srcdoc}" style="width:100%; height:700px; border:none; overflow-y:auto;"></iframe>'
+
+
+def build_quiz_html(vocab_list):
+    """Build a 5-question multiple-choice quiz SPA."""
+    import html as _html
+    import random as rnd
+
+    if not vocab_list or len(vocab_list) < 2:
+        return "<p style='color:#94a3b8;text-align:center;padding:30px;font-family:Outfit,sans-serif;font-size:16px;'>⚠️ Need at least 2 flashcards to start a quiz.<br>Generate or import a deck first!</p>"
+
+    nq = min(5, len(vocab_list))
+    q_cards = rnd.sample(vocab_list, nq)
+    quiz_data = []
+    for qc in q_cards:
+        correct = qc.get('translation', '') or qc.get('english', '')
+        wrong_pool = [c for c in vocab_list if c is not qc and (c.get('translation', '') or c.get('english', '')) != correct]
+        wrongs = rnd.sample(wrong_pool, min(3, len(wrong_pool)))
+        choices = [correct] + [w.get('translation', '') or w.get('english', '') for w in wrongs]
+        rnd.shuffle(choices)
+        quiz_data.append({
+            'korean': qc.get('korean', ''),
+            'transliteration': qc.get('transliteration', ''),
+            'choices': choices,
+            'correct': choices.index(correct),
+        })
+
+    quiz_json = json.dumps(quiz_data).replace("</", "<\\/")
+
+    iframe_html = f"""<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
+<style>
+  * {{ box-sizing:border-box; margin:0; padding:0; }}
+  body {{ background:transparent; font-family:'Outfit','Inter',sans-serif; color:#f8fafc; padding:14px 10px; }}
+  .quiz-hdr {{ text-align:center; margin-bottom:18px; }}
+  .quiz-title {{ font-size:20px; font-weight:800; background:linear-gradient(to right,#c084fc,#60a5fa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:8px; }}
+  .qpbar {{ width:100%; height:5px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; margin-bottom:4px; }}
+  .qpfill {{ height:100%; background:linear-gradient(90deg,#8b5cf6,#3b82f6); border-radius:3px; transition:width .4s ease; }}
+  .qptxt {{ font-size:12px; color:#64748b; }}
+  .q-card {{ background:linear-gradient(135deg,rgba(30,41,59,.95) 0%,rgba(15,23,42,.95) 100%); border:1px solid rgba(139,92,246,.3); border-top:2px solid rgba(139,92,246,.7); border-radius:20px; padding:26px; text-align:center; margin-bottom:18px; box-shadow:0 10px 40px rgba(0,0,0,.5); }}
+  .q-label {{ font-size:11px; text-transform:uppercase; letter-spacing:2px; color:#8b5cf6; font-weight:800; margin-bottom:10px; }}
+  .q-word {{ font-size:52px; font-weight:800; color:#fff; text-shadow:0 0 25px rgba(139,92,246,.7); margin-bottom:7px; }}
+  .q-tr {{ font-size:15px; color:#fca5a5; font-style:italic; letter-spacing:1px; }}
+  .choices-grid {{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }}
+  .choice-btn {{ padding:14px 12px; border-radius:14px; border:1px solid rgba(139,92,246,.3); background:rgba(139,92,246,.1); color:#e2e8f0; font-size:14px; font-weight:600; cursor:pointer; transition:all .25s; text-align:center; line-height:1.3; font-family:inherit; }}
+  .choice-btn:hover:not(:disabled) {{ background:rgba(139,92,246,.3); border-color:rgba(139,92,246,.7); transform:translateY(-2px); box-shadow:0 5px 15px rgba(139,92,246,.3); }}
+  .choice-btn.correct {{ background:rgba(34,197,94,.3)!important; border-color:#22c55e!important; color:#86efac!important; transform:scale(1.02); box-shadow:0 0 20px rgba(34,197,94,.4)!important; }}
+  .choice-btn.wrong {{ background:rgba(239,68,68,.2)!important; border-color:rgba(239,68,68,.5)!important; color:#fca5a5!important; }}
+  .choice-btn:disabled {{ cursor:default; }}
+  .fb-txt {{ font-size:15px; font-weight:700; text-align:center; min-height:22px; margin-bottom:6px; }}
+  .nxt-btn {{ width:100%; padding:13px; border:none; border-radius:14px; background:linear-gradient(135deg,#8b5cf6,#3b82f6); color:white; font-size:14px; font-weight:800; cursor:pointer; transition:all .3s; letter-spacing:.5px; text-transform:uppercase; display:none; font-family:inherit; }}
+  .nxt-btn:hover {{ transform:translateY(-2px); box-shadow:0 8px 25px rgba(139,92,246,.5); }}
+  #score-screen {{ display:none; text-align:center; padding:28px 16px; }}
+  .score-em {{ font-size:70px; margin-bottom:14px; animation:pop .6s cubic-bezier(.68,-.55,.265,1.55); }}
+  @keyframes pop {{ from {{ transform:scale(0); opacity:0; }} to {{ transform:scale(1); opacity:1; }} }}
+  .score-ttl {{ font-size:26px; font-weight:800; background:linear-gradient(to right,#c084fc,#60a5fa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:6px; }}
+  .score-sub {{ font-size:14px; color:#94a3b8; margin-bottom:20px; }}
+  .score-details {{ background:rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.3); border-radius:16px; padding:16px; margin-bottom:20px; }}
+  .s-row {{ display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:13px; }}
+  .s-row:last-child {{ border-bottom:none; }}
+  .s-ko {{ color:#e2e8f0; }} .s-ok {{ color:#86efac; font-weight:700; }} .s-no {{ color:#fca5a5; font-weight:700; }}
+  .restart-btn {{ padding:13px 28px; border:none; border-radius:14px; background:linear-gradient(135deg,#8b5cf6,#3b82f6); color:white; font-size:14px; font-weight:800; cursor:pointer; transition:all .3s; text-transform:uppercase; letter-spacing:1px; font-family:inherit; }}
+  .restart-btn:hover {{ transform:translateY(-2px); box-shadow:0 8px 25px rgba(139,92,246,.5); }}
+</style>
+</head>
+<body>
+<div id="quiz-app">
+  <div id="question-screen">
+    <div class="quiz-hdr">
+      <div class="quiz-title">🧠 Vocabulary Quiz</div>
+      <div class="qpbar"><div class="qpfill" id="qp-fill" style="width:0%"></div></div>
+      <div class="qptxt" id="qp-txt">Question 1 of {nq}</div>
+    </div>
+    <div class="q-card">
+      <div class="q-label">What does this word mean?</div>
+      <div class="q-word" id="q-word"></div>
+      <div class="q-tr" id="q-tr"></div>
+    </div>
+    <div class="choices-grid" id="choices"></div>
+    <div class="fb-txt" id="fb"></div>
+    <button class="nxt-btn" id="nxt-btn" onclick="nextQ()">Next →</button>
+  </div>
+  <div id="score-screen">
+    <div class="score-em" id="s-em"></div>
+    <div class="score-ttl" id="s-ttl"></div>
+    <div class="score-sub" id="s-sub"></div>
+    <div class="score-details" id="s-det"></div>
+    <button class="restart-btn" onclick="restart()">🔄 Try Again</button>
+  </div>
+</div>
+<script>
+  const QD={quiz_json};
+  let qi=0,score=0,res=[],answered=false;
+  const NQ=QD.length;
+  function loadQ(){{
+    if(qi>=NQ){{ showScore(); return; }}
+    answered=false;
+    const q=QD[qi];
+    document.getElementById('q-word').textContent=q.korean;
+    document.getElementById('q-tr').textContent=q.transliteration?`[${{q.transliteration}}]`:'';
+    document.getElementById('qp-fill').style.width=(qi/NQ*100)+'%';
+    document.getElementById('qp-txt').textContent=`Question ${{qi+1}} of ${{NQ}}`;
+    document.getElementById('fb').innerHTML='';
+    document.getElementById('nxt-btn').style.display='none';
+    const ch=document.getElementById('choices'); ch.innerHTML='';
+    q.choices.forEach((c,i)=>{{
+      const b=document.createElement('button'); b.className='choice-btn';
+      b.textContent=c; b.onclick=()=>pick(i,b); ch.appendChild(b);
+    }});
+  }}
+  function pick(ci,btn){{
+    if(answered) return; answered=true;
+    const q=QD[qi]; const ok=ci===q.correct;
+    document.querySelectorAll('.choice-btn').forEach(b=>b.disabled=true);
+    document.querySelectorAll('.choice-btn')[q.correct].classList.add('correct');
+    if(ok){{ score++; document.getElementById('fb').innerHTML='✅ <span style="color:#86efac">Correct!</span>'; res.push({{k:q.korean,ok:true}}); }}
+    else{{ btn.classList.add('wrong'); document.getElementById('fb').innerHTML=`❌ <span style="color:#fca5a5">Wrong!</span> → <strong>${{q.choices[q.correct]}}</strong>`; res.push({{k:q.korean,ok:false,ans:q.choices[q.correct]}}); }}
+    const nb=document.getElementById('nxt-btn'); nb.style.display='block';
+    nb.textContent=qi<NQ-1?'Next Question →':'See Results 🎉';
+  }}
+  function nextQ(){{ qi++; loadQ(); }}
+  function showScore(){{
+    document.getElementById('question-screen').style.display='none';
+    document.getElementById('score-screen').style.display='block';
+    const p=score/NQ;
+    const data=p===1?['🏆','Perfect Score!','You nailed every question!']:p>=.8?['⭐','Excellent!','Almost perfect!']:p>=.6?['👍','Good Work!','Keep practicing!']:p>=.4?['📚','Keep Studying!','Review the flashcards!']:['💪','Keep Going!',"Practice makes perfect!"];
+    document.getElementById('s-em').textContent=data[0];
+    document.getElementById('s-ttl').textContent=`${{score}}/${{NQ}} — ${{data[1]}}`;
+    document.getElementById('s-sub').textContent=data[2];
+    document.getElementById('s-det').innerHTML=res.map(r=>`<div class="s-row"><span class="s-ko">${{r.k}}</span><span class="${{r.ok?'s-ok':'s-no'}}">${{r.ok?'✅ Correct':'❌ '+r.ans}}</span></div>`).join('');
+  }}
+  function restart(){{
+    qi=0; score=0; res=[]; answered=false;
+    document.getElementById('question-screen').style.display='block';
+    document.getElementById('score-screen').style.display='none';
+    loadQ();
+  }}
+  window.onload=loadQ;
+</script>
+</body>
+</html>"""
+
+    safe_srcdoc = _html.escape(iframe_html)
+    return f'<iframe srcdoc="{safe_srcdoc}" style="width:100%; height:700px; border:none; overflow-y:auto;"></iframe>'
+
+
+def export_json_file_fn(vocab_list):
+    """Export current vocab list to a JSON file for download."""
+    if not vocab_list:
+        gr.Warning("No flashcards to export. Generate or import a deck first!")
+        return gr.update(visible=False)
+    os.makedirs("log", exist_ok=True)
+    path = os.path.join("log", "flashcards_export.json")
+    export_data = [{k: v for k, v in item.items() if k != 'audio_uri'} for item in vocab_list]
+    with open(path, "w", encoding="utf-8") as f:
+        json.dump(export_data, f, ensure_ascii=False, indent=2)
+    return gr.update(value=path, visible=True)
+
+
+def export_anki_file_fn(vocab_list):
+    """Export current vocab list to an Anki .apkg file for download."""
+    if not vocab_list:
+        gr.Warning("No flashcards to export. Generate or import a deck first!")
+        return gr.update(visible=False)
+    try:
+        import genanki
+        import random as rnd
+    except ImportError:
+        gr.Warning("genanki not installed. Run: pip install genanki")
+        return gr.update(visible=False)
+    model = genanki.Model(
+        rnd.randrange(1 << 30, 1 << 31),
+        'LocalDuo Korean Vocab',
+        fields=[{'name': 'Korean'}, {'name': 'Translation'}, {'name': 'Transliteration'}, {'name': 'Explanation'}],
+        templates=[{
+            'name': 'Card 1',
+            'qfmt': '<div style="font-size:42px;text-align:center;font-weight:bold;color:#4a0e8f;padding:20px;">{{Korean}}</div>',
+            'afmt': '{{FrontSide}}<hr id=answer><div style="font-size:24px;font-weight:bold;color:#1a56db;">{{Translation}}</div><div style="color:#888;font-style:italic;margin:8px 0;">{{Transliteration}}</div><div style="font-size:14px;color:#555;background:#f5f5f5;padding:10px;border-radius:8px;">{{Explanation}}</div>',
+        }]
     )
-    
-    safe_srcdoc = html_output.replace('"', '&quot;')
-    yield f'<iframe srcdoc="{safe_srcdoc}" style="width: 100%; height: 650px; border: none; overflow-y: auto;"></iframe>', current_source_hash, vocab_list, stream_text, content_text, images, None
+    deck = genanki.Deck(rnd.randrange(1 << 30, 1 << 31), 'LocalDuo - Korean Vocabulary')
+    for item in vocab_list:
+        deck.add_note(genanki.Note(model=model, fields=[
+            item.get('korean', ''),
+            item.get('translation', '') or item.get('english', ''),
+            item.get('transliteration', ''),
+            item.get('explanation', ''),
+        ]))
+    os.makedirs("log", exist_ok=True)
+    path = os.path.join("log", "flashcards_export.apkg")
+    genanki.Package(deck).write_to_file(path)
+    return gr.update(value=path, visible=True)
+
+
+def import_deck_fn(json_file, anki_file):
+    """Load a flashcard deck from a JSON or Anki .apkg file."""
+    if json_file is not None:
+        try:
+            with open(json_file, "r", encoding="utf-8") as f:
+                data = json.load(f)
+            if not isinstance(data, list):
+                data = [data]
+            for item in data:
+                if 'audio_uri' not in item:
+                    item['audio_uri'] = None
+            return build_flashcard_html(data), data
+        except Exception as e:
+            return f"<p style='color:#fca5a5;padding:20px;font-family:Outfit,sans-serif;'>❌ Error loading JSON: {e}</p>", None
+    elif anki_file is not None:
+        try:
+            import zipfile, sqlite3, tempfile
+            with tempfile.TemporaryDirectory() as tmpdir:
+                with zipfile.ZipFile(anki_file, 'r') as z:
+                    z.extractall(tmpdir)
+                db_path = os.path.join(tmpdir, 'collection.anki2')
+                if not os.path.exists(db_path):
+                    db_path = os.path.join(tmpdir, 'collection.anki21')
+                conn = sqlite3.connect(db_path)
+                rows = conn.execute("SELECT flds FROM notes").fetchall()
+                conn.close()
+            vocab_list = []
+            for row in rows:
+                fields = row[0].split('\x1f')
+                vocab_list.append({
+                    'korean': fields[0] if len(fields) > 0 else '',
+                    'translation': fields[1] if len(fields) > 1 else '',
+                    'transliteration': fields[2] if len(fields) > 2 else '',
+                    'explanation': fields[3] if len(fields) > 3 else '',
+                    'audio_uri': None,
+                })
+            if not vocab_list:
+                return "<p style='color:#fca5a5;padding:20px;font-family:Outfit,sans-serif;'>❌ No notes found in Anki deck.</p>", None
+            return build_flashcard_html(vocab_list), vocab_list
+        except Exception as e:
+            return f"<p style='color:#fca5a5;padding:20px;font-family:Outfit,sans-serif;'>❌ Error loading Anki deck: {e}</p>", None
+    return "<p style='color:#94a3b8;padding:20px;text-align:center;font-family:Outfit,sans-serif;'>⚠️ Please upload a JSON or Anki (.apkg) file above.</p>", None
 
 
 def create_demo():
@@ -1324,64 +1771,86 @@ def create_demo():
             with gr.Column(scale=1):
                 with gr.Tabs() as input_tabs:
                     with gr.Tab("Website URL", id="tab_url") as tab_url:
-                        url_input = gr.Textbox(label="Enter a Website URL 🌐", 
-                        placeholder=r"e.g. https://www.bbc.com/korean/articles/cn0p7rkvxdgo", 
+                        url_input = gr.Textbox(label="Enter a Website URL 🌐",
+                        placeholder=r"e.g. https://www.bbc.com/korean/articles/cn0p7rkvxdgo",
                         value=r"https://www.bbc.com/korean/articles/cn0p7rkvxdgo")
-                    
+
                     with gr.Tab("Upload PDF", id="tab_pdf") as tab_pdf:
                         pdf_input = gr.File(label="Upload Book PDF 📚", file_types=[".pdf"], value=example_pdf)
-                    
+
                     with gr.Tab("Upload Audio", id="tab_audio") as tab_audio:
                         audio_file_input = gr.File(label="Upload Audio File 🎵", file_types=[".wav", ".mp3", ".m4a", ".ogg", ".flac", ".opus", ".webm"], value=example_audio)
                         gr.Markdown("*Upload a Korean audio file. It will be transcribed using Cohere ASR and vocabulary will be extracted from the transcript.*", elem_classes=["hint-text"])
-                    
+
                     with gr.Tab("YouTube Link", id="tab_yt") as tab_yt:
-                        yt_url_input = gr.Textbox(label="Enter a YouTube Link 🎬", 
-                        placeholder=r"e.g. https://www.youtube.com/watch?v=...", 
+                        yt_url_input = gr.Textbox(label="Enter a YouTube Link 🎬",
+                        placeholder=r"e.g. https://www.youtube.com/watch?v=...",
                         value="https://www.youtube.com/watch?v=9Nj7l73PBWE",
                         info="Audio from the first 5 minutes will be transcribed using Cohere ASR")
                         yt_cookies_input = gr.File(label="YouTube Cookies (cookies.txt)", file_types=[".txt"], value=None,
                             type="filepath")
                         gr.Markdown("*Optional. Helps bypass YouTube bot detection. Install the [cookies.txt](https://addons.mozilla.org/firefox/addon/cookies-txt/) extension, go to youtube.com while logged in, click the extension → 'Current Site' to export.*", elem_classes=["hint-text"])
-                
+
+                    with gr.Tab("📂 Import Deck", id="tab_import") as tab_import:
+                        gr.Markdown("### Load a saved deck into the app")
+                        gr.Markdown("Upload a previously exported **JSON file** or an **Anki .apkg deck** to reload flashcards without regenerating.")
+                        import_json_file_in = gr.File(label="📄 JSON Deck (.json)", file_types=[".json"])
+                        import_anki_file_in = gr.File(label="📦 Anki Deck (.apkg)", file_types=[".apkg"])
+                        import_load_btn = gr.Button("📂 Load Deck", variant="primary")
+
                 # Track active tab
                 tab_url.select(fn=lambda: "Website URL", inputs=None, outputs=active_tab)
                 tab_pdf.select(fn=lambda: "Upload PDF", inputs=None, outputs=active_tab)
                 tab_audio.select(fn=lambda: "Upload Audio", inputs=None, outputs=active_tab)
                 tab_yt.select(fn=lambda: "YouTube Link", inputs=None, outputs=active_tab)
-                
+                tab_import.select(fn=lambda: "Import Deck", inputs=None, outputs=active_tab)
+
                 gr.Markdown("### ⚙️ Customization Settings")
                 max_text_char_input = gr.Slider(minimum=1000, maximum=30000, step=1000, value=1500, label="Max Input Text Length (Characters)")
                 repetition_penalty_input = gr.Slider(minimum=0.1, maximum=2.0, step=0.1, value=1.2, label="Repetition Penalty")
                 auto_force_chars_input = gr.Slider(minimum=1_000, maximum=10_000, step=100, value=4_000, label="Auto-force JSON after (chars of thinking)")
-                
+
                 with gr.Accordion("🔧 Advanced", open=False):
                     translit_lang = gr.Dropdown(
-                        label="Word Transliteration Language", 
-                        choices=LANGUAGE_CHOICES, 
+                        label="Word Transliteration Language",
+                        choices=LANGUAGE_CHOICES,
                         value="Indo-European - English"
                     )
                     translit_format = gr.Dropdown(label="Transliteration Format", choices=["dashed syllable", "regular word with space"], value="dashed syllable")
                     target_lang = gr.Dropdown(
-                        label="Target Language (Full App)", 
-                        choices=LANGUAGE_CHOICES, 
+                        label="Target Language (Full App)",
+                        choices=LANGUAGE_CHOICES,
                         value="Indo-European - English"
                     )
-                
+
                 with gr.Row():
                     submit_btn = gr.Button("✨ Generate Flashcards ✨", variant="primary")
                     stop_thinking_btn = gr.Button("⚡ Stop thinking, Generate now", variant="secondary")
                     stop_btn = gr.Button("🛑 Stop Generation", variant="stop")
-            
+
             with gr.Column(scale=2):
-                output_html = gr.HTML(label="Flashcards will appear here")
+                with gr.Tabs() as output_tabs:
+                    with gr.Tab("📖 Flashcards"):
+                        output_html = gr.HTML(label="Flashcards will appear here")
+                        gr.Markdown("**Export current deck:**")
+                        with gr.Row():
+                            export_json_btn = gr.Button("📥 Export JSON", variant="secondary", size="sm")
+                            export_anki_btn = gr.Button("📦 Export Anki (.apkg)", variant="secondary", size="sm")
+                        export_json_out = gr.File(label="⬇️ JSON Download", visible=False, interactive=False)
+                        export_anki_out = gr.File(label="⬇️ Anki Deck Download", visible=False, interactive=False)
+
+                    with gr.Tab("❓ Quiz"):
+                        gr.Markdown("**Test your knowledge** with a randomized 5-question multiple-choice quiz from the current deck.")
+                        start_quiz_btn = gr.Button("🧪 Start 5-Question Quiz", variant="primary")
+                        quiz_output_html = gr.HTML(label="Quiz")
+
                 stream_box = gr.Textbox(label="Live Model Generation 🧠", lines=10, max_lines=20, interactive=False, autoscroll=True, elem_id="stream_box")
-                
+
                 with gr.Accordion("📄 Extracted Source Content", open=True):
                     extracted_text_box = gr.Textbox(label="Extracted Text", lines=10, max_lines=15, interactive=False)
                     extracted_images_gallery = gr.Gallery(label="Extracted Images", columns=4, height="auto", object_fit="contain")
                     extracted_audio_player = gr.Audio(label="Extracted Audio (YouTube / Uploaded)", type="filepath", interactive=False)
-                
+
         last_source_state = gr.State(None)
         last_korean_words_state = gr.State(None)
 
@@ -1391,15 +1860,30 @@ def create_demo():
         submit_btn.click(fn=reset_btn_text, inputs=None, outputs=[stop_thinking_btn, stop_btn], queue=False)
 
         generate_event = submit_btn.click(
-            fn=process_pdf, 
-            inputs=[pdf_input, url_input, audio_file_input, yt_url_input, yt_cookies_input, translit_lang, translit_format, target_lang, max_text_char_input, repetition_penalty_input, auto_force_chars_input, last_source_state, last_korean_words_state, active_tab], 
+            fn=process_pdf,
+            inputs=[pdf_input, url_input, audio_file_input, yt_url_input, yt_cookies_input, translit_lang, translit_format, target_lang, max_text_char_input, repetition_penalty_input, auto_force_chars_input, last_source_state, last_korean_words_state, active_tab],
             outputs=[output_html, last_source_state, last_korean_words_state, stream_box, extracted_text_box, extracted_images_gallery, extracted_audio_player]
         )
-        
-        stop_thinking_btn.click(fn=set_stop_thinking, inputs=None, outputs=stop_thinking_btn, queue=False)
-        
+
+        stop_thinking_btn.click(fn=set_stop_thinking, inputs=None, outputs=stop_thinking_btn, queue=False).then(
+            fn=reset_stop_thinking_after_delay, inputs=None, outputs=stop_thinking_btn
+        )
         stop_btn.click(fn=set_kill_threads, inputs=None, outputs=stop_btn, queue=False)
-        
+
+        # Export events
+        export_json_btn.click(fn=export_json_file_fn, inputs=[last_korean_words_state], outputs=[export_json_out])
+        export_anki_btn.click(fn=export_anki_file_fn, inputs=[last_korean_words_state], outputs=[export_anki_out])
+
+        # Import event
+        import_load_btn.click(
+            fn=import_deck_fn,
+            inputs=[import_json_file_in, import_anki_file_in],
+            outputs=[output_html, last_korean_words_state]
+        )
+
+        # Quiz event
+        start_quiz_btn.click(fn=build_quiz_html, inputs=[last_korean_words_state], outputs=[quiz_output_html])
+
         # Force autoscroll using Custom JS
         stream_box.change(
             fn=None,