Update app.py

app.py

@@ -14,186 +14,149 @@ api = HfApi()
 
 SURAH_NAMES = ["الفاتحة", "البقرة", "آل عمران", "النساء", "المائدة", "الأنعام", "الأعراف", "الأنفال", "التوبة", "يونس", "هود", "يوسف", "الرعد", "إبراهيم", "الحجر", "النحل", "الإسراء", "الكهف", "مريم", "طه", "الأنبياء", "الحج", "المؤمنون", "النور", "الفرقان", "الشعراء", "النمل", "القصص", "العنكبوت", "الروم", "لقمان", "السجدة", "الأحزاب", "سبأ", "فاطر", "يس", "الصافات", "ص", "الزمر", "غافر", "فصلت", "الشورى", "الزخرف", "الدخان", "الجاثية", "الأحقاف", "محمد", "الفتح", "الحجرات", "ق", "الذاريات", "الطور", "النجم", "القمر", "الرحمن", "الواقعة", "الحديد", "المجادلة", "الحشر", "الممتحنة", "الصف", "الجمعة", "المنافقون", "التغابن", "الطلاق", "التحريم", "الملك", "القلم", "الحاقة", "المعارج", "نوح", "الجن", "المزمل", "المدثر", "القيامة", "الإنسان", "المرسلات", "النبأ", "النازعات", "عبس", "التكوير", "الانفطار", "المطففين", "الانشقاق", "البروج", "الطارق", "الأعلى", "الغاشية", "الفجر", "البلد", "الشمس", "الليل", "الضحى", "الشرح", "التين", "العلق", "القدر", "البينة", "الزلزلة", "العاديات", "القارعة", "التكاثر", "العصر", "الهمزة", "الفيل", "قريش", "الماعون", "الكوثر", "الكافرون", "النصر", "المسد", "الإخلاص", "الفلق", "الناس"]
 
-# --- التنسيق البصري المحسن ---
+# --- التنسيق البصري ---
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Reem+Kufi:wght@400;700&display=swap');
+:root { --gold: #D4AF37; --dark-green: #064635; }
+body { direction: rtl; background-color: #f9f9f9; }
 
-:root {
-    --gold: #D4AF37;
-    --dark-green: #064635;
-    --emerald: #519259;
-}
-
-body { direction: rtl; background-color: #f4f7f6; }
-
-/* قسم الهيرو العلوي */
-.hero-container {
-    background: linear-gradient(180deg, var(--dark-green) 0%, #0a6b51 100%);
-    min-height: 70vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: white;
+.hero-header {
+    background: linear-gradient(135deg, var(--dark-green) 0%, #0a6b51 100%);
+    padding: 30px 20px;
+    border-radius: 0 0 40px 40px;
     text-align: center;
-    border-radius: 0 0 80px 80px;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-    padding: 20px;
-    margin-bottom: 40px;
-}
-
-.nation-stats {
-    background: rgba(255, 255, 255, 0.1);
-    border: 2px solid var(--gold);
-    padding: 30px 60px;
-    border-radius: 30px;
-    margin: 20px 0;
-    backdrop-filter: blur(10px);
-}
-
-.stats-number {
-    font-size: 5rem;
-    font-weight: 800;
-    color: var(--gold);
-    line-height: 1;
-    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
+    color: white;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
 }
-
-.join-btn {
-    background-color: var(--gold) !important;
-    color: var(--dark-green) !important;
-    font-size: 1.5rem !important;
-    padding: 15px 40px !important;
-    border-radius: 50px !important;
-    font-weight: bold !important;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    border: none;
+.real-count { font-size: 3.5rem; color: var(--gold); font-weight: bold; line-height: 1; }
+.instruction-box {
+    background: #fff5e6;
+    border-right: 5px solid #ff9800;
+    padding: 15px;
+    border-radius: 10px;
+    margin: 15px 0;
+    font-size: 0.95rem;
 }
-
-.join-btn:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
-
-/* بطاقة الآية */
 .ayah-card {
     background: white;
-    border-radius: 30px;
-    padding: 40px;
-    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
-    border-top: 8px solid var(--emerald);
+    border-radius: 20px;
+    padding: 30px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
+    border: 1px solid #eee;
 }
-
 .ayah-text {
     font-family: 'Amiri', serif !important;
-    font-size: 3rem !important;
+    font-size: 2.4rem !important;
     color: var(--dark-green);
-    line-height: 2 !important;
+    line-height: 1.8 !important;
+    text-align: center;
 }
-
-.alert-box { padding: 15px; border-radius: 12px; font-weight: bold; text-align: center; }
-.alert-success { background: #d4edda; color: #155724; }
-.alert-error { background: #f8d7da; color: #721c24; }
 """
 
-# --- المنطق الخلفي ---
-def clean_text(text): return re.sub(r'<[^>]*>', '', text).strip()
+# --- الوظائف المنطقية ---
+def get_real_total():
+    try:
+        files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
+        return len([f for f in files if f.startswith("data/")])
+    except: return "..."
+
+INITIAL_TOTAL = get_real_total()
 
 def fetch_surah(s_idx):
     try:
         url = f"https://raw.githubusercontent.com/CheeseWithSauce/TheHolyQuranJSONFormat/refs/heads/main/tajweedsurahs/{s_idx:03}.json"
         res = requests.get(url, timeout=5).json()
-        return [{"surah": s_idx, "ayah": v["ayah"], "text": clean_text(v.get("text_ar", "")), "surah_name": SURAH_NAMES[s_idx-1]} for v in res["verses"]]
+        return [{"surah": s_idx, "ayah": v["ayah"], "text": re.sub(r'<[^>]*>', '', v.get("text_ar", "")).strip(), "surah_name": SURAH_NAMES[s_idx-1]} for v in res["verses"]]
     except: return []
 
 with ThreadPoolExecutor(max_workers=10) as executor:
     results = list(executor.map(fetch_surah, range(1, 115)))
 ALL_AYAT = [item for sublist in results for item in sublist]
 
-def on_submit(audio, current_idx, session_count):
-    if not audio: return "<div class='alert-box alert-error'>⚠️ يرجى تسجيل الصوت أولاً</div>", gr.update(), gr.update(), current_idx, session_count
+def jump_to_ayah(s_name, a_num):
+    for i, v in enumerate(ALL_AYAT):
+        if v['surah_name'] == s_name and v['ayah'] == int(a_num):
+            return "", f"<div class='ayah-text'>{v['text']}</div>", f"### {v['surah_name']} | آية {v['ayah']}", i
+    return "⚠️ لم يتم العثور على الآية", gr.update(), gr.update(), gr.update()
+
+def on_submit(audio, current_idx):
+    if not audio: return "⚠️ يرجى التسجيل أولاً", gr.update(), gr.update(), current_idx
     v = ALL_AYAT[current_idx]
     try:
         api.upload_file(path_or_fileobj=audio, path_in_repo=f"data/s{v['surah']}_a{v['ayah']}_{uuid.uuid4().hex[:6]}.wav", repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
         next_idx = random.randint(0, len(ALL_AYAT)-1)
         nv = ALL_AYAT[next_idx]
-        return "<div class='alert-box alert-success'>✅ تم حفظ مساهمتك بنجاح!</div>", f"<div class='ayah-text'>{nv['text']}</div>", f"### {nv['surah_name']} | آية {nv['ayah']}", next_idx, session_count + 1
-    except Exception as e: return f"<div class='alert-box alert-error'>❌ خطأ: {str(e)}</div>", gr.update(), gr.update(), current_idx, session_count
+        return "✅ تم الحفظ بنجاح", f"<div class='ayah-text'>{nv['text']}</div>", f"### {nv['surah_name']} | آية {nv['ayah']}", next_idx
+    except Exception as e: return f"❌ خطأ: {str(e)}", gr.update(), gr.update(), current_idx
 
-# --- بناء الواجهة ---
-with gr.Blocks(title="مِنَصَّة التِّلَاوَة") as demo:
+# --- الواجهة ---
+with gr.Blocks(title="مشروع تصحيح التلاوة بالذكاء الاصطناعي") as demo:
     idx_state = gr.State(random.randint(0, len(ALL_AYAT)-1))
-    sess_state = gr.State(0)
-
-    # 1. الجزء العلوي الجذاب (Hero Section)
-    gr.HTML("""
-        <div class="hero-container">
-            <h1 style="font-size: 3.5rem; margin-bottom: 0;">مِنَصَّة التِّلَاوَة الجماعية</h1>
-            <p style="font-size: 1.4rem; opacity: 0.8;">كن جزءاً من أعظم مشروع تقني لخدمة القرآن الكريم</p>
-            
-            <div class="nation-stats">
-                <div style="font-size: 1.2rem; color: #eee;">إجمالي مساهمات الأمة حتى الآن</div>
-                <div class="stats-number">100</div>
-                <div style="font-size: 1.1rem; color: var(--gold);">مساهمة فقط! هدفنا المليون</div>
+
+    # الهيدر المدمج
+    gr.HTML(f"""
+        <div class="hero-header">
+            <h1 style="margin:0; font-size: 2rem;">مِنَصَّة التِّلَاوَة</h1>
+            <p style="margin:5px 0 15px 0; opacity: 0.9;">مشروع بناء نموذج ذكاء اصطناعي لتصحيح التلاوة والتجويد</p>
+            <div style="background: rgba(0,0,0,0.2); padding: 10px; border-radius: 15px; display: inline-block;">
+                <span>مساهمات الأمة الحقيقية:</span>
+                <div class="real-count">{INITIAL_TOTAL}</div>
             </div>
-            
-            <button class="join-btn" onclick="document.getElementById('main-area').scrollIntoView({behavior: 'smooth'})">
-                شارك الآن ⬇️
-            </button>
         </div>
     """)
 
-    # 2. منطقة العمل الرئيسية
-    with gr.Column(elem_id="main-area", elem_classes="gradio-container"):
+    with gr.Column(elem_classes="gradio-container"):
+        # تنبيه هام
+        gr.HTML("""
+            <div class="instruction-box">
+                <strong>⚠️ تنبيه هام للجودة:</strong>
+                يرجى قراءة الآية بشكل مستمر وبنفس واحد قدر الإمكان. 
+                <span style="color: #d32f2f;">يُمنع الوقف ثم البدء من مكان سابق في نفس التسجيل</span> لأن ذلك يفسد تدريب نموذج الذكاء الاصطناعي.
+            </div>
+        """)
+
         with gr.Row():
-            with gr.Column(scale=3):
+            with gr.Column(scale=2):
                 with gr.Column(elem_classes="ayah-card"):
-                    curr_v = ALL_AYAT[idx_state.value]
-                    info_text = gr.Markdown(f"### {curr_v['surah_name']} | آية {curr_v['ayah']}")
-                    text_html = gr.HTML(f"<div class='ayah-text'>{curr_v['text']}</div>")
-                    status_msg = gr.HTML("")
+                    v_init = ALL_AYAT[idx_state.value]
+                    info_text = gr.Markdown(f"### {v_init['surah_name']} | آية {v_init['ayah']}")
+                    text_html = gr.HTML(f<div class='ayah-text'>{v_init['text']}</div>")
+                    status_msg = gr.Markdown("")
                     
                     with gr.Row():
-                        # إضافة show_progress="hidden" لإخفاء العداد المزعج
-                        send_btn = gr.Button("🎤 إرسال التسجيل", variant="primary")
+                        send_btn = gr.Button("🎤 إرسال المساهمة", variant="primary")
                         rnd_btn = gr.Button("🔄 آية أخرى", variant="secondary")
 
             with gr.Column(scale=1):
-                gr.Markdown("### 🎙️ سجل تلاوتك")
+                gr.Markdown("### 🎙️ استوديو التسجيل")
                 audio_ui = gr.Audio(sources=["microphone"], type="filepath", label=None)
                 
-                with gr.Accordion("🔍 اختيار آية محددة", open=False):
-                    s_drop = gr.Dropdown(choices=SURAH_NAMES, label="السورة", value="الفاتحة")
-                    a_num = gr.Number(label="الآية", value=1, precision=0)
-                    go_btn = gr.Button("انتقال")
-
-    # --- ربط الأحداث مع تعطيل شريط التقدم ---
-    def get_random_ayah():
-        i = random.randint(0, len(ALL_AYAT)-1)
-        v = ALL_AYAT[i]
-        return f"<div class='ayah-text'>{v['text']}</div>", f"### {v['surah_name']} | آية {v['ayah']}", i, ""
+                with gr.Group():
+                    gr.Markdown("### 🔍 الانتقال السريع")
+                    s_drop = gr.Dropdown(choices=SURAH_NAMES, label="اختر السورة", value="الفاتحة")
+                    a_num = gr.Number(label="رقم الآية", value=1, precision=0)
+                    go_btn = gr.Button("انتقل للآية")
 
+    # الأحداث
     rnd_btn.click(
-        get_random_ayah, 
-        None, 
-        [text_html, info_text, idx_state, status_msg],
-        show_progress="hidden" # هذا هو السر لإخفاء عداد الثواني
-    )
-
-    send_btn.click(
-        on_submit, 
-        [audio_ui, idx_state, sess_state], 
-        [status_msg, text_html, info_text, idx_state, sess_state],
-        show_progress="minimal"
+        lambda: (v:=ALL_AYAT[i:=random.randint(0,len(ALL_AYAT)-1)]) and (f"<div class='ayah-text'>{v['text']}</div>", f"### {v['surah_name']} | آية {v['ayah']}", i, ""),
+        outputs=[text_html, info_text, idx_state, status_msg],
+        show_progress="hidden"
     )
 
     go_btn.click(
-        lambda s, n: next(((f"<div class='ayah-text'>{v['text']}</div>", f"### {v['surah_name']} | آية {v['ayah']}", i, "") 
-                           for i, v in enumerate(ALL_AYAT) if v['surah_name'] == s and v['ayah'] == n), 
-                          (gr.update(), gr.update(), 0, "الآية غير موجودة")),
-        [s_drop, a_num],
-        [text_html, info_text, idx_state, status_msg],
+        jump_to_ayah,
+        inputs=[s_drop, a_num],
+        outputs=[status_msg, text_html, info_text, idx_state],
         show_progress="hidden"
     )
 
+    send_btn.click(
+        on_submit,
+        inputs=[audio_ui, idx_state],
+        outputs=[status_msg, text_html, info_text, idx_state],
+        show_progress="minimal"
+    )
+
 if __name__ == "__main__":
     demo.launch(css=custom_css)