Update app.py

app.py

@@ -1,5 +1,5 @@
 # -*- coding: utf-8 -*-
-# app.py — واجهة واحدة: توليد أسئلة ➜ اختبار تفاعلي بنفس الثيم
+# app.py — واجهة داكنة حديثة: توليد أسئلة ➜ عرض كل الأسئلة دفعة واحدة ➜ Submit للنتيجة
 
 import os, json, uuid, random, unicodedata
 from dataclasses import dataclass
@@ -187,84 +187,56 @@ def to_records(items:List[MCQ], source:str, method:str, n:int)->List[dict]:
         })
     return recs
 
-# ---------- منطق الاختبار ----------
+# ---------- منطق الحالة ----------
 def correct_letter(rec):
     for o in rec["options"]:
         if o["is_correct"]: return o["id"]
     return ""
 
 def init_state(records):
-    return {"records": records, "idx":0, "answers":{}, "revealed":set(), "finished":False}
-
-def render(rec, user=None, revealed=False):
-    q_md = f"### السؤال\n{rec['question']}"
-    ch_list = [f"{o['id']}) {o['text']}" for o in rec["options"]]
-    exp = rec["explanation"] if revealed else ""
-    fb = ""
-    if user and revealed:
-        fb = "✅ إجابة صحيحة" if user == correct_letter(rec) else f"❌ إجابة خاطئة — الصحيح: {correct_letter(rec)}"
-    elif user:
-        fb = f"تم اختيار: {user}"
-    # مهم: تحديث الـRadio بشكل صريح
-    ch_update = gr.update(choices=ch_list, value=None, interactive=True)
-    return q_md, ch_update, exp, fb
-
-def show(state):
-    if not state:
-        return "", gr.update(choices=[], value=None), "", "", ""
-    rec = state["records"][state["idx"]]
-    q, ch_update, exp, fb = render(
-        rec,
-        state["answers"].get(rec["id"]),
-        rec["id"] in state["revealed"]
-    )
-    pos = f"{state['idx']+1} / {len(state['records'])}"
-    return q, ch_update, exp, fb, pos
-
-
+    return {"records": records, "finished": False}
 
-def choose(state, label):
-    if not state or not label: return state, ""
-    rec = state["records"][state["idx"]]
-    letter = label.split(")")[0].strip()
-    state["answers"][rec["id"]] = letter
-    if rec["id"] in state["revealed"]:
-        fb = "✅ إجابة صحيحة" if letter==correct_letter(rec) else f"❌ إجابة خاطئة — الصحيح: {correct_letter(rec)}"
-    else:
-        fb = f"تم اختيار: {letter}"
-    return state, fb
-
-def prev_(s): 
-    if s: s["idx"]=max(0, s["idx"]-1); 
-    return s
-def next_(s): 
-    if s: s["idx"]=min(len(s["records"])-1, s["idx"]+1); 
-    return s
-def reveal(s):
-    if not s: return s, ""
-    rec = s["records"][s["idx"]]
-    s["revealed"].add(rec["id"])
-    u = s["answers"].get(rec["id"])
-    fb = "✅ إجابة صحيحة" if u==correct_letter(rec) else (f"❌ إجابة خاطئة — الصحيح: {correct_letter(rec)}" if u else f"الصحيح: {correct_letter(rec)}")
-    return s, fb
-
-def finish(s):
-    if not s: return s, ""
-    c=w=sk=0
-    for r in s["records"]:
-        u=s["answers"].get(r["id"])
-        cor=correct_letter(r)
-        if u is None: sk+=1
-        elif u==cor: c+=1
-        else: w+=1
-    s["finished"]=True
-    return s, f"النتيجة: {c}/{len(s['records'])} (صحيح: {c}، خطأ: {w}، متروك: {sk})"
+# ---------- HTML للواجهة/الاختبار ----------
+def render_quiz_html(records: List[dict]) -> str:
+    # يبني HTML فيه كل الأسئلة دفعة واحدة (راديو لكل سؤال)
+    parts = []
+    for i, rec in enumerate(records, start=1):
+        qid = rec["id"]
+        qtxt = rec["question"]
+        opts = rec["options"]
+        opts_html = []
+        for o in opts:
+            lid = o["id"]
+            txt = o["text"]
+            # name = q_<id>, value = letter
+            opts_html.append(f"""
+                <label class="opt">
+                    <input type="radio" name="q_{qid}" value="{lid}" />
+                    <span class="opt-letter">{lid}</span>
+                    <span class="opt-text">{txt}</span>
+                </label>
+            """)
+        card = f"""
+        <div class="q-card" data-qid="{qid}">
+            <div class="q-title">السؤال {i}:</div>
+            <div class="q-text">{qtxt}</div>
+            <div class="opts">{''.join(opts_html)}</div>
+        </div>
+        """
+        parts.append(card)
+
+    html = f"""
+    <div class="quiz-wrap">
+        {''.join(parts)}
+    </div>
+    """
+    return html
 
 # ---------- معالجة الإدخال (نص أو ملف) ----------
 def build_quiz(text_area, file_path, n, model_id, zoom):
     text_area = (text_area or "").strip()
     if not text_area and not file_path:
-        return None, gr.update(visible=True), gr.update(visible=False), "🛈 أدخل نصًا أو ارفع ملفًا أولًا."
+        return None, "", "🛈 أدخل نصًا أو ارفع ملفًا أولًا."
     if text_area:
         src_name = "pasted_text.txt"
         raw, method = text_area, "user text"
@@ -275,83 +247,96 @@ def build_quiz(text_area, file_path, n, model_id, zoom):
     items = make_mcqs(cleaned, n=int(n))
     records = to_records(items, source=src_name, method=method, n=n)
     state = init_state(records)
-    # إظهار قسم الاختبار وإخفاء قسم الإدخال
-    return state, gr.update(visible=False), gr.update(visible=True), f"تم توليد {len(records)} سؤالًا."
-
-# ---------- الثيم (CSS مطابق للصورة تقريبًا) ----------
-CSS = """
-/* خلفية داكنة ولمسة دافئة */
-body {
-  direction: rtl;
-  font-family: system-ui,'Cairo','IBM Plex Arabic',sans-serif;
-  background:#0f0f0f;
-}
+    html = render_quiz_html(records)
+    return state, html, f"تم توليد {len(records)} سؤالًا."
+
+# ---------- تصحيح الإجابات ----------
+def grade(state, answers_json):
+    try:
+        user_map = json.loads(answers_json or "{}")
+    except Exception:
+        user_map = {}
+    recs = state["records"] if state else []
+    total = len(recs)
+    correct = 0
+    wrong_details = []
+    for rec in recs:
+        qid = rec["id"]
+        chosen = (user_map.get(qid) or "").strip()
+        cor = correct_letter(rec)
+        if not chosen:
+            wrong_details.append((rec, chosen, cor, "لم يتم اختيار إجابة"))
+        elif chosen == cor:
+            correct += 1
+        else:
+            wrong_details.append((rec, chosen, cor, ""))
+
+    score_md = f"### نتيجتك: **{correct} / {total}**"
+    if wrong_details:
+        md = ["### الإجابات الخاطئة:"]
+        for rec, chosen, cor, note in wrong_details:
+            opts = {o["id"]: o["text"] for o in rec["options"]}
+            md.append(
+                f"- **السؤال:** {rec['question']}\n"
+                f"  - إجابتك: **{chosen or '—'}** — {opts.get(chosen,'')}\n"
+                f"  - الصحيحة: **{cor}** — {opts.get(cor,'')}\n"
+                f"  - الشرح: {rec['explanation']}\n"
+                + (f"  - ملاحظة: {note}\n" if note else "")
+            )
+        mistakes_md = "\n".join(md)
+    else:
+        mistakes_md = "### ممتاز! جميع الإجابات صحيحة ✅"
 
-/* عرض مناسب */
-.gradio-container { max-width: 980px; margin: 0 auto; }
+    return score_md, mistakes_md
 
-/* كارت رئيسي داكن ونص فاتح واضح */
-.card {
-  background:#1b1b1b;
-  border-radius:20px;
-  padding:24px;
-  box-shadow:0 25px 45px rgba(0,0,0,.5);
-  color:#f5efe6;
+# ---------- الثيم (CSS داكن حديث) ----------
+CSS = """
+:root{
+  --bg:#0f0f0f; --panel:#1a1a1a; --card:#1b1b1b; --muted:#9aa0a6;
+  --text:#f5efe6; --accent:#ff7d2d; --accent2:#ff9a55; --border:#2a2a2a;
 }
-.card * { color:#f5efe6 !important; }
-.card h1,.card h2,.card h3 { margin-top:0; }
-
-/* نص السؤال أكبر وتباعد مريح */
-.card p { font-size:1.12rem; line-height:1.9; word-wrap:break-word; overflow-wrap:anywhere; }
+body{direction:rtl; font-family:system-ui,'Cairo','IBM Plex Arabic',sans-serif; background:var(--bg);}
+.gradio-container{max-width:1024px;margin:0 auto;padding:8px 8px 40px;}
+.top-title{color:#e9ded6;margin:8px 0 16px 0}
 
-/* زر أساسي بلون برتقالي دافئ */
-.button-primary > button {
-  background: linear-gradient(180deg,#ff9a55,#ff7d2d);
-  border:none; color:#1b1b1b; font-weight:700;
-}
-.button-primary > button:hover { filter:brightness(0.95); }
+.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 20px 45px rgba(0,0,0,.4)}
+.small{opacity:.85;color:#ddd}
 
-/* صندوق الرفع */
-.upload-like {
-  border:2px dashed #ff9a5555; background:#161616;
-  border-radius:16px; padding:14px; color:#ddd;
+.button-primary > button{
+  background:linear-gradient(180deg,var(--accent2),var(--accent));
+  border:none;color:#161616;font-weight:700;
 }
-
-/* سلايدر وأزرار داكنة متناسقة */
-input[type="range"]::-webkit-slider-thumb { background:#ff7d2d; }
-.gr-button { background:#2a2a2a; color:#eaeaea; border:none; }
-.gr-button:hover { filter:brightness(1.08); }
-
-/* خيارات الراديو */
-.radio .wrap label { text-align:right; justify-content:flex-end; }
-.radio .wrap label span { font-size:1.05rem; }
-
-/* شريط التقدم */
-.progress { text-align:left; opacity:.85; color:#cfcfcf; }
-
-/* عنوان أعلى الصفحة */
-.top-title { color:#e9ded6; }
+.button-primary > button:hover{filter:brightness(.95)}
+.upload-like{border:2px dashed #ff9a5555;background:#141414;border-radius:12px;padding:10px;color:#ddd}
+
+/* حقل النص أصغر */
+textarea{min-height:140px}
+
+/* بطاقة السؤال */
+.q-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin:14px 0}
+.q-title{color:#f0e6dc;font-weight:700;margin-bottom:8px}
+.q-text{color:var(--text);font-size:1.08rem;line-height:1.8;margin-bottom:10px}
+.opts{display:flex;flex-direction:column;gap:8px}
+.opt{display:flex;gap:10px;align-items:center;background:#191919;border:1px solid #282828;border-radius:12px;padding:10px}
+.opt input{accent-color:var(--accent)}
+.opt-letter{display:inline-flex;width:28px;height:28px;border-radius:8px;background:#222;align-items:center;justify-content:center;font-weight:800;color:#f1f1f1}
+.opt-text{color:#eaeaea}
+
+/* قسم النتيجة */
+.result-card{background:#121212;border:1px solid #2a2a2a;border-radius:16px;padding:16px;margin-top:18px}
 """
 
-
-
 # ---------- واجهة Gradio ----------
 with gr.Blocks(title="Question Generator", css=CSS) as demo:
-    gr.Markdown("<h2 class='top-title' style='text-align:center;margin-top:8px;'>Question Generator</h2>")
+    gr.Markdown("<h2 class='top-title'>Question Generator</h2>")
 
-    # ===== القسم A: الإدخال (نص/ملف) =====
-    input_group = gr.Group(visible=True)
-    with input_group:
+    # لوحة الإدخال (ثابتة)
+    with gr.Group(elem_classes=["panel"]):
+        gr.Markdown("**ارفع ملفك أو ألصق نصًا، حدّد عدد الأسئلة، ثم اضغط توليد.**", elem_classes=["small"])
         with gr.Row():
-            with gr.Column(scale=2):
-                gr.Markdown("<h3>أدخل نصًا أو ارفع ملفًا</h3>")
-                text_area = gr.Textbox(lines=10, placeholder="ألصق هنا مقطع نصي...", label=None)
-                num_q = gr.Slider(4, 20, value=DEFAULT_NUM_QUESTIONS, step=1, label="عدد الأسئلة")
             with gr.Column(scale=1):
-                file_comp = gr.File(
-                    label="اختر ملفًا", file_count="single",
-                    file_types=[".pdf",".txt"], type="filepath", elem_classes=["upload-like"]
-                )
+                file_comp = gr.File(label="اختر ملف PDF أو TXT", file_count="single",
+                                    file_types=[".pdf",".txt"], type="filepath", elem_classes=["upload-like"])
                 with gr.Accordion("خيارات متقدمة (لـ PDF المصوّر)", open=False):
                     trocr_model = gr.Dropdown(
                         choices=[
@@ -363,93 +348,48 @@ with gr.Blocks(title="Question Generator", css=CSS) as demo:
                         value=DEFAULT_TROCR_MODEL, label="نموذج TrOCR"
                     )
                     trocr_zoom = gr.Slider(2.0, 3.5, value=DEFAULT_TROCR_ZOOM, step=0.1, label="Zoom OCR")
+            with gr.Column(scale=1):
+                text_area = gr.Textbox(lines=6, placeholder="ألصق هنا مقطع نصي...", label="أدخل نصًا أو ارفع ملفًا")
+                num_q = gr.Slider(4, 20, value=DEFAULT_NUM_QUESTIONS, step=1, label="عدد الأسئلة")
         btn_build = gr.Button("توليد الأسئلة", elem_classes=["button-primary"])
-        toast = gr.Markdown("", elem_classes=["soft"])
+        toast = gr.Markdown("", elem_classes=["small"])
 
-    # حالة عامة للاختبار
+    # حالة عامة + مكان عرض الاختبار
     state = gr.State(None)
+    quiz_html = gr.HTML("")  # كل الأسئلة ستُعرض هنا دفعة واحدة
 
-    # ===== القسم B: الاختبار =====
-    quiz_group = gr.Group(visible=False)
-    with quiz_group:
-        with gr.Row():
-            progress = gr.Label("", elem_classes=["progress"])
-        with gr.Row():
-            with gr.Column():
-                # مكوّنات السؤال
-                q_md     = gr.Markdown("", elem_classes=["card"])
-                choices  = gr.Radio(choices=[], label="اختر الإجابة", interactive=True, elem_classes=["radio"])
-                feedback = gr.Markdown("")
-                exp_md   = gr.Markdown("")
-        with gr.Row():
-            btn_prev   = gr.Button("السابق")
-            btn_next   = gr.Button("التالي")
-            btn_reveal = gr.Button("إظهار الإجابة")
-            btn_finish = gr.Button("إنهاء الاختبار", elem_classes=["button-primary"])
-            btn_reset  = gr.Button("العودة للواجهة", variant="secondary")
-
-    # ===== الربط المنطقي =====
-    # بناء الاختبار من الإدخال
+    # زر الإرسال + حقل سري لتجميع الإجابات + مكان النتيجة
+    btn_submit = gr.Button("إنهاء وإرسال الإجابات", elem_classes=["button-primary"])
+    answers_box = gr.Textbox(visible=False)
+    score_md = gr.Markdown("")
+    mistakes_md = gr.Markdown("")
+
+    # توليد الأسئلة
     btn_build.click(
         build_quiz,
         inputs=[text_area, file_comp, num_q, trocr_model, trocr_zoom],
-        outputs=[state, input_group, quiz_group, toast]
-    ).then(
-        fn=show, inputs=[state],
-        outputs=[q_md, choices, exp_md, feedback, progress]
+        outputs=[state, quiz_html, toast]
     )
 
-    # تفاعلات الاختبار
-    choices.change(lambda s, c: choose(s, c), inputs=[state, choices], outputs=[state, feedback])
-    btn_prev.click(prev_, inputs=[state], outputs=[state]).then(show, inputs=[state], outputs=[q_md, choices, exp_md, feedback, progress])
-    btn_next.click(next_, inputs=[state], outputs=[state]).then(show, inputs=[state], outputs=[q_md, choices, exp_md, feedback, progress])
-    btn_reveal.click(reveal, inputs=[state], outputs=[state, feedback]).then(show, inputs=[state], outputs=[q_md, choices, exp_md, feedback, progress])
-    btn_finish.click(finish, inputs=[state], outputs=[state, feedback])
-
-    # رجوع للواجهة الأولى
-    btn_reset.click(
-        lambda: (None, gr.update(visible=True), gr.update(visible=False), "", "", "", "", ""),
-        outputs=[state, input_group, quiz_group, feedback, q_md, choices, exp_md, progress]
+    # JS لالتقاط الإجابات من الـ HTML (جميع الأسئلة)
+    js_collect = """
+    function () {
+      const data = {};
+      document.querySelectorAll('.q-card').forEach(card => {
+        const qid = card.getAttribute('data-qid');
+        const checked = card.querySelector('input[type="radio"]:checked');
+        data[qid] = checked ? checked.value : null;
+      });
+      return JSON.stringify(data);
+    }
+    """
+
+    # عند Submit: نجمع الإجابات بالـJS ثم نقيّمها في الباك إند
+    btn_submit.click(
+        None, inputs=None, outputs=[answers_box], js=js_collect
+    ).then(
+        grade, inputs=[state, answers_box], outputs=[score_md, mistakes_md]
     )
 
-if __name__ == "__main__":
-    demo.queue().launch()
-
-   # القسم B: الاختبار
-quiz_group = gr.Group(visible=False)
-with quiz_group:
-    with gr.Row():
-        progress = gr.Label("", elem_classes=["progress"])
-    with gr.Row():
-        with gr.Column():
-            # ---------- مكونات عرض السؤال ----------
-            q_md     = gr.Markdown("", elem_classes=["card"])
-            choices  = gr.Radio(choices=[], label="اختر الإجابة", interactive=True, elem_classes=["radio"])
-            feedback = gr.Markdown("")
-            exp_md   = gr.Markdown("")
-
-    with gr.Row():
-        btn_prev   = gr.Button("السابق")
-        btn_next   = gr.Button("التالي")
-        btn_reveal = gr.Button("إظهار الإجابة")
-        btn_finish = gr.Button("إنهاء الاختبار", elem_classes=["button-primary"])
-        btn_reset  = gr.Button("العودة للواجهة", variant="secondary")
-
-    # بناء الاختبار من الإدخال
-    btn_build.click(
-        build_quiz,
-        inputs=[text_area, file_comp, num_q, trocr_model, trocr_zoom],
-        outputs=[state, input_group, quiz_group, toast]
-    ).then(fn=show, inputs=[state], outputs=[q_md, choices, exp_md, feedback, progress])
-
-    # تفاعلات الاختبار
-    choices.change(lambda s,c: choose(s,c), inputs=[state, choices], outputs=[state, feedback])
-    btn_prev.click(prev_, inputs=[state], outputs=[state]).then(show, inputs=[state], outputs=[q_md, choices, exp_md, feedback, progress])
-    btn_next.click(next_, inputs=[state], outputs=[state]).then(show, inputs=[state], outputs=[q_md, choices, exp_md, feedback, progress])
-    btn_reveal.click(reveal, inputs=[state], outputs=[state, feedback]).then(show, inputs=[state], outputs=[q_md, choices, exp_md, feedback, progress])
-    btn_finish.click(finish, inputs=[state], outputs=[state, feedback])
-    btn_reset.click(lambda: (None, gr.update(visible=True), gr.update(visible=False), "", "", "", "", ""),
-                    outputs=[state, input_group, quiz_group, feedback, q_md, choices, exp_md, progress])
-
 if __name__ == "__main__":
     demo.queue().launch()