Update app.py

app.py

@@ -1,5 +1,5 @@
 # -*- coding: utf-8 -*-
-# واجهة حديثة: سؤال + زر تحقق لكل سؤال، تلوين أخضر/أحمر مباشرة، بدون نتيجة نهائية
+# واجهة صفحتين: إدخال بسيط + صفحة أسئلة مع Submit لكل سؤال
 
 import os, json, uuid, random, unicodedata
 from dataclasses import dataclass
@@ -176,7 +176,7 @@ def to_records(items:List[MCQ])->List[dict]:
         recs.append({"id":it.id,"question":it.question.strip(),"options":opts})
     return recs
 
-# ------------------ HTML: كل الأسئلة + زر تحقق لكل سؤال ------------------
+# ------------------ HTML صفحة الأسئلة (Submit لكل سؤال) ------------------
 def render_quiz_html(records: List[dict]) -> str:
     parts=[]
     for i, rec in enumerate(records, start=1):
@@ -202,18 +202,16 @@ def render_quiz_html(records: List[dict]) -> str:
             <div class="q-text">{qtxt}</div>
             <div class="opts">{''.join(opts_html)}</div>
             <div class="q-actions">
-                <button class="q-submit">تحقّق</button>
+                <button class="q-submit">Submit</button>
                 <span class="q-note" id="n_{qid}"></span>
             </div>
         </div>
         """)
     html = f"""
     <div id="quiz" class="quiz-wrap">
-      <div class="hint">اختر إجابة لكل سؤال ثم اضغط <b>تحقّق</b>، سيتم تلوين اختيارك أخضر/أحمر ويُقفل السؤال.</div>
       {''.join(parts)}
     </div>
     <script>
-      // تفويض حدث للنقر على كل أزرار "تحقّق"
       document.querySelectorAll('.q-card .q-submit').forEach(btn => {{
         btn.addEventListener('click', (e) => {{
           const card = e.target.closest('.q-card');
@@ -224,14 +222,11 @@ def render_quiz_html(records: List[dict]) -> str:
           const chosenInput = card.querySelector('input[type="radio"]:checked');
 
           if (!chosenInput) {{
-            if (note) {{
-              note.textContent = 'اختر إجابة أولاً';
-              note.className = 'q-note warn';
-            }}
+            if (note) {{ note.textContent = 'اختر إجابة أولاً'; note.className='q-note warn'; }}
             return;
           }}
 
-          // امسح ألوان قديمة
+          // تنظيف ألوان سابقة
           card.querySelectorAll('.opt').forEach(l => l.classList.remove('ok','err'));
 
           const chosen = chosenInput.value;
@@ -239,13 +234,13 @@ def render_quiz_html(records: List[dict]) -> str:
 
           if (chosen === correct) {{
             chosenLabel.classList.add('ok');
-            if (badge) {{ badge.hidden = false; badge.className='q-badge ok'; badge.textContent='Correct!'; }}
+            if (badge) {{ badge.hidden=false; badge.className='q-badge ok'; badge.textContent='Correct!'; }}
           }} else {{
             chosenLabel.classList.add('err');
-            if (badge) {{ badge.hidden = false; badge.className='q-badge err'; badge.textContent='Incorrect.'; }}
+            if (badge) {{ badge.hidden=false; badge.className='q-badge err'; badge.textContent='Incorrect.'; }}
           }}
 
-          // قفل السؤال بعد التحقق
+          // قفل هذا السؤال فقط
           card.querySelectorAll('input[type="radio"]').forEach(i => i.disabled = true);
           e.target.disabled = true;
           if (note) note.textContent = '';
@@ -255,11 +250,11 @@ def render_quiz_html(records: List[dict]) -> str:
     """
     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 "", "🛈 أدخل نصًا أو ارفع ملفًا."
+        return "", gr.update(visible=True), gr.update(visible=False), "🛈 الصق نصًا أو ارفع ملفًا أولًا."
     if text_area:
         raw = text_area
     else:
@@ -267,9 +262,9 @@ def build_quiz(text_area, file_path, n, model_id, zoom):
     cleaned = postprocess(raw)
     items = make_mcqs(cleaned, n=int(n))
     recs = to_records(items)
-    return render_quiz_html(recs), f"تم توليد {len(recs)} سؤالًا. لكل سؤال زر تحقّق مستقل."
+    return render_quiz_html(recs), gr.update(visible=False), gr.update(visible=True), ""
 
-# ------------------ الثيم ------------------
+# ============================== الثيم ==============================
 CSS = """
 :root{
   --bg:#0e0e11; --panel:#15161a; --card:#1a1b20; --muted:#a7b0be;
@@ -278,17 +273,16 @@ CSS = """
 body{direction:rtl; font-family:system-ui,'Cairo','IBM Plex Arabic',sans-serif; background:var(--bg);}
 .gradio-container{max-width:980px;margin:0 auto;padding:12px 12px 40px;}
 h2.top{color:#eaeaf2;margin:6px 0 16px}
-.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:0 16px 38px rgba(0,0,0,.35)}
+
+.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 16px 38px rgba(0,0,0,.35)}
 .small{opacity:.9;color:#d9dee8}
+.upload-like{border:2px dashed #3b3f52;background:#121318;border-radius:12px;padding:10px;color:#cfd5e3}
 
 .button-primary>button{background:linear-gradient(180deg,var(--accent),var(--accent2));border:none;color:#0b0d10;font-weight:800}
 .button-primary>button:hover{filter:brightness(.95)}
-.upload-like{border:2px dashed #3b3f52;background:#121318;border-radius:12px;padding:10px;color:#cfd5e3}
-
 textarea{min-height:120px}
 
-/* الامتحان */
-.hint{color:#cfd5e3;background:#0f1116;border:1px solid #2a2d3a;border-radius:10px;padding:10px;margin:10px 0}
+/* صفحة الأسئلة */
 .q-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;margin:12px 0}
 .q-header{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:6px}
 .q-title{color:#eaeaf2;font-weight:800}
@@ -302,32 +296,31 @@ textarea{min-height:120px}
 .opt input{accent-color:var(--accent2)}
 .opt-letter{display:inline-flex;width:28px;height:28px;border-radius:8px;background:#0f1116;border:1px solid #2a2d3a;align-items:center;justify-content:center;font-weight:800;color:#dfe6f7}
 .opt-text{color:#eaeaf2}
-
-/* التلوين بعد التحقق */
 .opt.ok{background:#0f2f22;border-color:#1b6a52}
 .opt.err{background:#3a0d14;border-color:#6a1e2b}
 
 .q-actions{display:flex;gap:10px;align-items:center;margin-top:10px}
 .q-actions .q-submit{
-  background:linear-gradient(180deg,var(--accent),var(--accent2));
-  border:none;color:#0b0d10;font-weight:800;border-radius:10px;padding:8px 14px;cursor:pointer;
+  background:#2dd4bf;border:none;color:#0b0d10;font-weight:800;border-radius:10px;padding:8px 14px;cursor:pointer;
 }
 .q-actions .q-submit:disabled{opacity:.5;cursor:not-allowed}
 .q-note{color:#ffd1d6}
 .q-note.warn{color:#ffd1d6}
 """
 
-# ------------------ واجهة Gradio ------------------
+# ============================== الواجهة ==============================
 with gr.Blocks(title="Question Generator", css=CSS) as demo:
     gr.Markdown("<h2 class='top'>Question Generator</h2>")
 
-    with gr.Group(elem_classes=["panel"]):
-        gr.Markdown("**أدخل نصًا أو ارفع ملفًا، حدّد عدد الأسئلة، ثم اضغط توليد.**", elem_classes=["small"])
-        text_area = gr.Textbox(lines=6, placeholder="ألصق هنا مقطع نصي...", label="أدخل نصًا")
-        num_q = gr.Slider(4, 20, value=DEFAULT_NUM_QUESTIONS, step=1, label="عدد الأسئلة")
-        file_comp = gr.File(label="أو اختر ملف PDF/TXT", file_count="single",
+    # الصفحة 1: إدخال بسيط (خياران فقط + زر واحد)
+    page1 = gr.Group(visible=True, elem_classes=["panel"])
+    with page1:
+        gr.Markdown("اختر **أحد** الخيارين فقط ثم اضغط الزر.", elem_classes=["small"])
+        text_area = gr.Textbox(lines=6, placeholder="ألصق نصك هنا...", label="لصق نص")
+        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):
+        num_q = gr.Slider(4, 20, value=DEFAULT_NUM_QUESTIONS, step=1, label="عدد الأسئلة")
+        with gr.Accordion("خيارات PDF المصوّر (اختياري)", open=False):
             trocr_model = gr.Dropdown(
                 choices=[
                     "microsoft/trocr-base-printed",
@@ -338,15 +331,19 @@ 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")
-        btn_build = gr.Button("توليد الأسئلة", elem_classes=["button-primary"])
-        toast = gr.Markdown("", elem_classes=["small"])
+        btn_build = gr.Button("generate quistion", elem_classes=["button-primary"])
+        msg = gr.Markdown("", elem_classes=["small"])
 
-    quiz_html = gr.HTML("")  # أسئلة + زر تحقق لكل سؤال
+    # الصفحة 2: الأسئلة
+    page2 = gr.Group(visible=False)
+    with page2:
+        quiz_html = gr.HTML("")
 
+    # حدث الانتقال
     btn_build.click(
         build_quiz,
         inputs=[text_area, file_comp, num_q, trocr_model, trocr_zoom],
-        outputs=[quiz_html, toast]
+        outputs=[quiz_html, page1, page2, msg]
     )
 
 if __name__ == "__main__":