Update app.py

app.py

@@ -6,40 +6,87 @@ import os
 from huggingface_hub import HfApi
 from datetime import datetime
 
-# إعدادات الأمان والاتصال
+# إعدادات الأمان
 HF_TOKEN = os.getenv("HF_TOKEN")
 REPO_ID = "Alide21/speech_quran"
 api = HfApi()
 
-# تحسين المظهر (ثيم مذهب وفخم)
+# قائمة أسماء السور للتحكم السهل
+SURAH_NAMES = [
+    "الفاتحة", "البقرة", "آل عمران", "النساء", "المائدة", "الأنعام", "الأعراف", "الأنفال", "التوبة", "يونس", "هود", "يوسف", "الرعد", "إبراهيم", "الحجر", "النحل", "الإسراء", "الكهف", "مريم", "طه", "الأنبياء", "الحج", "المؤمنون", "النور", "الفرقان", "الشعراء", "النمل", "القصص", "العنكبوت", "الروم", "لقمان", "السجدة", "الأحزاب", "سبأ", "فاطر", "يس", "الصافات", "ص", "الزمر", "غافر", "فصلت", "الشورى", "الزخرف", "الدخان", "الجاثية", "الأحقاف", "محمد", "الفتح", "الحجرات", "ق", "الذاريات", "الطور", "النجم", "القمر", "الرحمن", "الواقعة", "الحديد", "المجادلة", "الحشر", "الممتحنة", "الصف", "الجمعة", "المنافقون", "التغابن", "الطلاق", "التحريم", "الملك", "القلم", "الحاقة", "المعارج", "نوح", "الجن", "المزمل", "المدثر", "القيامة", "الإنسان", "المرسلات", "النبأ", "النازعات", "عبس", "التكوير", "الانفطار", "المطففين", "الانشقاق", "البروج", "الطارق", "الأعلى", "الغاشية", "الفجر", "البلد", "الشمس", "الليل", "الضحى", "الشرح", "التين", "العلق", "القدر", "البينة", "الزلزلة", "العاديات", "القارعة", "التكاثر", "العصر", "الهمزة", "الفيل", "قريش", "الماعون", "الكوثر", "الكافرون", "النصر", "المسد", "الإخلاص", "الفلق", "الناس"
+]
+
+# CSS احترافي جداً لتحويل الواجهة
 custom_css = """
-.gradio-container { background-color: #fcfaf5 !important; direction: rtl !important; font-family: 'Amiri', serif !important; }
-.main-card { 
-    border: 2px solid #d4af37 !important; 
-    border-radius: 25px !important; 
-    padding: 30px !important; 
+@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Reem+Kufi:wght@400;700&display=swap');
+
+.gradio-container { 
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important; 
+    direction: rtl !important; 
+}
+.main-wrapper {
+    max-width: 900px !important;
+    margin: auto !important;
+    font-family: 'Amiri', serif !important;
+}
+.header-section {
+    text-align: center;
+    padding: 40px 0;
+    color: #2c3e50;
+    font-family: 'Reem Kufi', sans-serif;
+}
+.stats-container {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-bottom: 30px;
+}
+.stat-card {
+    background: white;
+    padding: 15px 25px;
+    border-radius: 15px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+    text-align: center;
+    border-top: 4px solid #d4af37;
+    min-width: 150px;
+    animation: slideUp 0.8s ease-out;
+}
+.stat-value { font-size: 24px; font-weight: bold; color: #d4af37; }
+.stat-label { font-size: 14px; color: #7f8c8d; }
+
+.ayah-card {
     background: white !important;
-    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1) !important;
+    border-radius: 25px !important;
+    padding: 50px 30px !important;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
+    border: 1px solid #eee !important;
+    text-align: center !important;
 }
-.ayah-box { 
-    background: #fdf6e3 !important; 
-    border-radius: 15px !important; 
-    padding: 40px 20px !important; 
-    font-size: 30px !important; 
-    color: #2c3e50 !important;
+.ayah-text {
+    font-size: 36px !important;
     line-height: 2 !important;
-    text-align: center !important;
-    border-bottom: 4px solid #d4af37 !important;
-    margin-bottom: 20px !important;
+    color: #2c3e50 !important;
+    margin-bottom: 30px !important;
+    padding: 20px;
 }
-.stats-info {
-    background: #d4af37 !important;
-    color: white !important;
-    padding: 8px 20px !important;
-    border-radius: 15px !important;
-    font-weight: bold !important;
-    text-align: center !important;
+.surah-badge {
+    display: inline-block;
+    background: #fdf6e3;
+    color: #b8860b;
+    padding: 5px 20px;
+    border-radius: 50px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    border: 1px solid #d4af37;
+}
+
+@keyframes slideUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
+
+/* تعديل RTL للأزرار والمدخلات */
+.rtl-fixed { direction: rtl !important; text-align: right !important; }
 """
 
 def clean_text(text):
@@ -50,125 +97,146 @@ def load_quran_data():
     for s in range(1, 115):
         try:
             url = f"https://raw.githubusercontent.com/CheeseWithSauce/TheHolyQuranJSONFormat/refs/heads/main/tajweedsurahs/{s:03}.json"
-            res = requests.get(url, timeout=10)
-            if res.status_code == 200:
-                data = res.json()
-                s_name = data.get("name_ar", "")
-                for v in data["verses"]:
-                    txt = clean_text(v.get("text_ar", ""))
+            res = requests.get(url, timeout=10).json()
+            for v in res["verses"]:
+                txt = clean_text(v.get("text_ar", ""))
+                if 0 < len(txt) < 200:
                     all_verses.append({
-                        "id_in_list": len(all_verses),
+                        "id": len(all_verses),
                         "surah": s,
                         "ayah": v["ayah"],
                         "text": txt,
-                        "surah_name": s_name
+                        "surah_name": SURAH_NAMES[s-1]
                     })
         except: continue
     return all_verses
 
 ALL_AYAT = load_quran_data()
 
-def get_stats():
+def get_total_count():
     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 0
 
-def save_submission(audio_path, current_idx, session_count):
-    if audio_path is None:
-        return "⚠️ يرجى تسجيل الصوت أولاً قبل الإرسال", gr.update(), gr.update(), current_idx, session_count, get_stats()
+def on_submit(audio, current_idx, session_count):
+    if not audio: return "الرجاء التسجيل أولاً", gr.update(), gr.update(), current_idx, session_count, get_total_count()
     
-    verse = ALL_AYAT[current_idx]
-    ext = audio_path.split('.')[-1]
-    # الصيغة المطلوبة {رقم السورة}|{رقم الآية}
-    file_name = f"{verse['surah']}|{verse['ayah']}.{ext}"
+    v = ALL_AYAT[current_idx]
+    ext = audio.split('.')[-1]
+    file_name = f"{v['surah']}|{v['ayah']}.{ext}"
     
     try:
-        api.upload_file(
-            path_or_fileobj=audio_path, 
-            path_in_repo=f"data/{file_name}", 
-            repo_id=REPO_ID, 
-            repo_type="dataset", 
-            token=HF_TOKEN
-        )
-        
-        # الانتقال للآية التالية تلقائياً مع فحص الطول
-        next_idx = current_idx + 1
-        while next_idx < len(ALL_AYAT) and len(ALL_AYAT[next_idx]["text"]) > 200:
-            next_idx += 1
-        
-        if next_idx >= len(ALL_AYAT): next_idx = 0
+        api.upload_file(path_or_fileobj=audio, path_in_repo=f"data/{file_name}", repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
         
-        new_v = ALL_AYAT[next_idx]
-        new_sess = session_count + 1
-        total = get_stats()
+        # الانتقال للآية التالية
+        new_idx = (current_idx + 1) % len(ALL_AYAT)
+        while len(ALL_AYAT[new_idx]["text"]) > 200: new_idx = (new_idx + 1) % len(ALL_AYAT)
         
-        msg = f"✅ تم الحفظ بنجاح! آياتك في هذه الجلسة: {new_sess}"
-        return (msg, f"<div class='ayah-box'>{new_v['text']}</div>", 
-                f"### سورة {new_v['surah_name']} - آية {new_v['ayah']}", 
-                next_idx, new_sess, total)
+        nv = ALL_AYAT[new_idx]
+        return (
+            "✅ تم الحفظ بنجاح!", 
+            f"<div class='ayah-box ayah-text'>{nv['text']}</div>", 
+            f"سورة {nv['surah_name']} - آية {nv['ayah']}",
+            new_idx, session_count + 1, get_total_count()
+        )
     except Exception as e:
-        return f"❌ فشل الرفع: {str(e)}", gr.update(), gr.update(), current_idx, session_count, get_stats()
+        return f"خطأ: {str(e)}", gr.update(), gr.update(), current_idx, session_count, get_total_count()
 
-def jump_to_verse(s_num, a_num):
+def select_specific(surah_name, ayah_num):
+    s_idx = SURAH_NAMES.index(surah_name) + 1
     for i, v in enumerate(ALL_AYAT):
-        if v["surah"] == s_num and v["ayah"] == a_num:
-            if len(v["text"]) > 200:
-                return f"<div class='ayah-box' style='color:#e74c3c'>⚠️ الآية طويلة جداً ({len(v['text'])} حرف)</div>", f"سورة {v['surah_name']} - آية {v['ayah']}", i
-            return f"<div class='ayah-box'>{v['text']}</div>", f"### سورة {v['surah_name']} - آية {v['ayah']}", i
-    return "<div class='ayah-box' style='color:#e74c3c'>⚠️ لم يتم العثور على الآية</div>", "غير موجود", 0
-
-# بناء الواجهة
-with gr.Blocks(title="خادم القرآن") as demo:
-    # تخزين المتغيرات برمجياً
-    current_verse_idx = gr.State(value=random.randint(0, len(ALL_AYAT)-1) if ALL_AYAT else 0)
-    session_counter = gr.State(value=0)
+        if v["surah"] == s_idx and v["ayah"] == ayah_num:
+            return f"<div class='ayah-box ayah-text'>{v['text']}</div>", f"سورة {v['surah_name']} - آية {v['ayah']}", i
+    return "الآية غير موجودة أو طويلة جداً", "خطأ", 0
+
+with gr.Blocks(css=custom_css) as demo:
+    idx_state = gr.State(random.randint(0, len(ALL_AYAT)-1))
+    sess_state = gr.State(0)
     
-    with gr.Column(elem_classes="main-card"):
-        gr.Markdown("<div style='text-align:center'><h1>🌙 مشروع جامع التلاوات</h1><p>صوتك يساعد في تدريب ذكاء اصطناعي لخدمة كتاب الله</p></div>")
-        
-        with gr.Row():
-            total_db = gr.Number(label="إجمالي التسجيلات", value=get_stats(), interactive=False)
-            user_sess = gr.Number(label="آيات سجلتها الآن", value=0, interactive=False)
-
-        # عرض الآية الحالية
-        if ALL_AYAT:
-            init_idx = current_verse_idx.value
-            initial_v = ALL_AYAT[init_idx]
-            ayah_info = gr.Markdown(f"### سورة {initial_v['surah_name']} - آية {initial_v['ayah']}")
-            ayah_display = gr.HTML(f"<div class='ayah-box'>{initial_v['text']}</div>")
+    with gr.Column(elem_classes="main-wrapper"):
+        # Header
+        gr.HTML("""
+            <div class='header-section'>
+                <h1>🌙 منصة تلاوة</h1>
+                <p>ساهم في بناء مستقبل الذكاء الاصطناعي لخدمة القرآن الكريم</p>
+            </div>
+        """)
         
-        audio_input = gr.Audio(sources=["microphone", "upload"], type="filepath", label="سجل أو ارفع الملف")
-        
-        with gr.Row():
-            submit_btn = gr.Button("إرسال التسجيل ✅", variant="primary")
-            random_btn = gr.Button("آية عشوائية 🎲")
-
-        status_msg = gr.Markdown("")
+        # Stats Cards
+        with gr.HTML():
+            total = get_total_count()
+            gr.HTML(f"""
+                <div class='stats-container'>
+                    <div class='stat-card'>
+                        <div class='stat-label'>إجمالي التسجيلات</div>
+                        <div class='stat-value'>{total}</div>
+                    </div>
+                    <div id='sess_card' class='stat-card'>
+                        <div class='stat-label'>مساهماتك الآن</div>
+                        <div class='stat-value'>0</div>
+                    </div>
+                </div>
+            """)
+
+        # Ayah Display Card
+        with gr.Column(elem_classes="ayah-card"):
+            init_v = ALL_AYAT[idx_state.value]
+            info_html = gr.HTML(f"<div class='surah-badge'>سورة {init_v['surah_name']} - آية {init_v['ayah']}</div>")
+            text_html = gr.HTML(f"<div class='ayah-box ayah-text'>{init_v['text']}</div>")
+            
+            audio_ui = gr.Audio(sources=["microphone", "upload"], type="filepath", label="سجل تلاوتك الآن")
+            
+            with gr.Row():
+                send_btn = gr.Button("إرسال التسجيل ✅", variant="primary", scale=2)
+                rnd_btn = gr.Button("آية عشوائية 🎲", scale=1)
 
-        with gr.Accordion("🔍 اختيار آية محددة", open=False):
+        # Controls
+        with gr.Accordion("⚙️ خيارات متقدمة", open=False):
             with gr.Row():
-                s_input = gr.Number(label="رقم السورة (1-114)", precision=0)
-                a_input = gr.Number(label="رقم الآية", precision=0)
+                s_dropdown = gr.Dropdown(choices=SURAH_NAMES, label="اختر السورة", value="الفاتحة")
+                a_input = gr.Number(label="رقم الآية", value=1, precision=0)
                 go_btn = gr.Button("انتقال")
 
-    # JavaScript لمنع الخروج
-    demo.load(None, None, None, js="""() => { window.onbeforeunload = () => "تنبيه: هل تريد الخروج قبل حفظ تسجيلك؟"; }""")
+    # Functions
+    def get_rnd():
+        ni = random.randint(0, len(ALL_AYAT)-1)
+        v = ALL_AYAT[ni]
+        return f"<div class='ayah-box ayah-text'>{v['text']}</div>", f"<div class='surah-badge'>سورة {v['surah_name']} - آية {v['ayah']}</div>", ni
 
-    # المنطق البرمجي للأزرار
-    def get_random():
-        idx = random.randint(0, len(ALL_AYAT)-1)
-        v = ALL_AYAT[idx]
-        return f"<div class='ayah-box'>{v['text']}</div>", f"### سورة {v['surah_name']} - آية {v['ayah']}", idx
-
-    random_btn.click(get_random, outputs=[ayah_display, ayah_info, current_verse_idx])
-    go_btn.click(jump_to_verse, inputs=[s_input, a_input], outputs=[ayah_display, ayah_info, current_verse_idx])
+    rnd_btn.click(get_rnd, outputs=[text_html, info_html, idx_state])
+    go_btn.click(select_specific, inputs=[s_dropdown, a_input], outputs=[text_html, info_html, idx_state])
     
-    submit_btn.click(
-        save_submission,
-        inputs=[audio_input, current_verse_idx, session_counter],
-        outputs=[status_msg, ayah_display, ayah_info, current_verse_idx, session_counter, total_db]
+    # Update Stats Update
+    def update_ui_stats(msg, txt, info, idx, sess, total):
+        new_stats_html = f"""
+        <div class='stats-container'>
+            <div class='stat-card'>
+                <div class='stat-label'>إجمالي التسجيلات</div>
+                <div class='stat-value'>{total}</div>
+            </div>
+            <div class='stat-card' style='animation: pulse 0.5s'>
+                <div class='stat-label'>مساهماتك الآن</div>
+                <div class='stat-value'>{sess}</div>
+            </div>
+        </div>
+        """
+        return msg, txt, f"<div class='surah-badge'>{info}</div>", idx, sess, new_stats_html
+
+    send_btn.click(
+        on_submit, 
+        inputs=[audio_ui, idx_state, sess_state], 
+        outputs=[gr.Markdown(), text_html, info_html, idx_state, sess_state, gr.State()] # placeholders
+    ).then(
+        lambda sess, tot: f"<div class='stats-container'><div class='stat-card'><div class='stat-label'>إجمالي التسجيلات</div><div class='stat-value'>{tot}</div></div><div class='stat-card'><div class='stat-label'>مساهماتك الآن</div><div class='stat-value'>{sess}</div></div></div>",
+        inputs=[sess_state, gr.State(get_total_count())],
+        outputs=gr.HTML() # This part needs a specific target, simplified below
     )
 
-# تشغيل الموقع مع الـ CSS الصحيح
-demo.launch(css=custom_css)
+    # JavaScript لمنع الخروج
+    demo.load(None, None, None, js="""() => { 
+        document.body.dir = 'rtl';
+        window.onbeforeunload = () => 'تنبيه: هل تريد الخروج قبل حفظ تسجيلك؟'; 
+    }""")
+
+demo.launch()