Update app.py

app.py

@@ -6,46 +6,40 @@ import os
 from huggingface_hub import HfApi
 from datetime import datetime
 
-# إعدادات الأمان
+# إعدادات الأمان والاتصال
 HF_TOKEN = os.getenv("HF_TOKEN")
 REPO_ID = "Alide21/speech_quran"
 api = HfApi()
 
-# CSS متطور لتحويل شكل الصفحة جذرياً
+# تحسين المظهر (ثيم مذهب وفخم)
 custom_css = """
-body { background-color: #f4f1ea !important; }
-.gradio-container { font-family: 'Amiri', serif !important; direction: rtl !important; }
+.gradio-container { background-color: #fcfaf5 !important; direction: rtl !important; font-family: 'Amiri', serif !important; }
 .main-card { 
-    background: white !important; 
-    border-radius: 20px !important; 
-    padding: 25px !important; 
-    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
-    border: 1px solid #e0d5b1 !important;
+    border: 2px solid #d4af37 !important; 
+    border-radius: 25px !important; 
+    padding: 30px !important; 
+    background: white !important;
+    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1) !important;
 }
 .ayah-box { 
-    background-color: #fdfdfd !important; 
-    border: 2px solid #d3af37 !important; 
-    padding: 40px 20px !important; 
+    background: #fdf6e3 !important; 
     border-radius: 15px !important; 
-    font-size: 32px !important; 
+    padding: 40px 20px !important; 
+    font-size: 30px !important; 
     color: #2c3e50 !important;
-    line-height: 1.8 !important;
+    line-height: 2 !important;
     text-align: center !important;
+    border-bottom: 4px solid #d4af37 !important;
     margin-bottom: 20px !important;
-    font-weight: bold !important;
 }
-.stats-badge {
-    background: #d3af37 !important;
+.stats-info {
+    background: #d4af37 !important;
     color: white !important;
-    padding: 5px 15px !important;
-    border-radius: 50px !important;
+    padding: 8px 20px !important;
+    border-radius: 15px !important;
     font-weight: bold !important;
+    text-align: center !important;
 }
-button.primary { 
-    background: linear-gradient(45deg, #d4af37, #b8860b) !important; 
-    border: none !important; 
-}
-button.secondary { background: white !important; border: 1px solid #d3af37 !important; color: #d3af37 !important; }
 """
 
 def clean_text(text):
@@ -53,11 +47,10 @@ def clean_text(text):
 
 def load_quran_data():
     all_verses = []
-    # سنحمل الفاتحة وسور أخرى للتجربة السريعة (يمكنك توسيع المدى لـ 115)
     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=5)
+            res = requests.get(url, timeout=10)
             if res.status_code == 200:
                 data = res.json()
                 s_name = data.get("name_ar", "")
@@ -83,90 +76,99 @@ def get_stats():
 
 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()
+        return "⚠️ يرجى تسجيل الصوت أولاً قبل الإرسال", gr.update(), gr.update(), current_idx, session_count, get_stats()
     
     verse = ALL_AYAT[current_idx]
     ext = audio_path.split('.')[-1]
+    # الصيغة المطلوبة {رقم السورة}|{رقم الآية}
     file_name = f"{verse['surah']}|{verse['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)
+        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 = random.randint(0, len(ALL_AYAT)-1)
+        if next_idx >= len(ALL_AYAT): next_idx = 0
         
         new_v = ALL_AYAT[next_idx]
         new_sess = session_count + 1
         total = get_stats()
         
-        return (f"✅ تم الحفظ بنجاح! آياتك اليوم: {new_sess}", 
-                f"<div class='ayah-box'>{new_v['text']}</div>", 
-                f"سورة {new_v['surah_name']} - آية {new_v['ayah']}", 
+        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)
     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_stats()
 
 def jump_to_verse(s_num, a_num):
     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:red'>⚠️ الآية المختارة طويلة جداً ({len(v['text'])} رمز)</div>", gr.update(), i
-            return f"<div class='ayah-box'>{v['text']}</div>", f"سورة {v['surah_name']} - آية {v['ayah']}", i
-    return "<div class='ayah-box'>⚠️ لم يتم العثور على الآية</div>", gr.update(), 0
-
-with gr.Blocks(css=custom_css) as demo:
-    # حالات مخفية
-    current_verse_idx = gr.State(value=random.randint(0, len(ALL_AYAT)-1))
+                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)
     
     with gr.Column(elem_classes="main-card"):
-        gr.Markdown("<div style='text-align:center'><h1>🌙 منصة خادم القرآن</h1><p>ساهم بتسجيل صوتك لتدريب نماذج الذكاء الاصطناعي على تصحيح التلاوة</p></div>")
+        gr.Markdown("<div style='text-align:center'><h1>🌙 مشروع جامع التلاوات</h1><p>صوتك يساعد في تدريب ذكاء اصطناعي لخدمة كتاب الله</p></div>")
         
         with gr.Row():
-            total_db = gr.Markdown(f"**إجمالي القاعدة:** <span class='stats-badge'>{get_stats()}</span>")
-            user_sess = gr.Markdown("**مساهماتك الآن:** <span class='stats-badge'>0</span>")
-
-        # عرض الآية
-        initial_v = ALL_AYAT[current_verse_idx.value]
-        ayah_info = gr.Markdown(f"### سورة {initial_v['surah_name']} - آية {initial_v['ayah']}", elem_id="info")
-        ayah_display = gr.HTML(f"<div class='ayah-box'>{initial_v['text']}</div>")
-
-        audio_input = gr.Audio(sources=["microphone", "upload"], type="filepath", label="سجل تلاوتك")
+            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>")
+        
+        audio_input = gr.Audio(sources=["microphone", "upload"], type="filepath", label="سجل أو ارفع الملف")
         
         with gr.Row():
             submit_btn = gr.Button("إرسال التسجيل ✅", variant="primary")
-            random_btn = gr.Button("آية عشوائية 🎲", variant="secondary")
+            random_btn = gr.Button("آية عشوائية 🎲")
 
-        status_msg = gr.Markdown("", text_align="center")
+        status_msg = gr.Markdown("")
 
-        with gr.Accordion("🔍 اختيار آية مخصصة", open=False):
+        with gr.Accordion("🔍 اختيار آية محددة", open=False):
             with gr.Row():
-                s_input = gr.Number(label="رقم السورة", value=1, precision=0)
-                a_input = gr.Number(label="رقم الآية", value=1, precision=0)
+                s_input = gr.Number(label="رقم السورة (1-114)", precision=0)
+                a_input = gr.Number(label="رقم الآية", precision=0)
                 go_btn = gr.Button("انتقال")
 
     # JavaScript لمنع الخروج
-    demo.load(None, None, None, js="""() => { window.onbeforeunload = () => "تنبيه: ستفقد التسجيل غير المحفوظ!"; }""")
+    demo.load(None, None, None, js="""() => { window.onbeforeunload = () => "تنبيه: هل تريد الخروج قبل حفظ تسجيلك؟"; }""")
 
-    # الأوامر البرمجية
+    # المنطق البرمجي للأزرار
     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])
-
+    
     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]
-    ).then(lambda count: f"**مساهماتك الآن:** <span class='stats-badge'>{count}</span>", inputs=session_counter, outputs=user_sess)
+    )
 
-demo.launch()
+# تشغيل الموقع مع الـ CSS الصحيح
+demo.launch(css=custom_css)