Update app.py

app.py

@@ -13,232 +13,107 @@ api = HfApi()
 
 SURAH_NAMES = ["الفاتحة", "البقرة", "آل عمران", "النساء", "المائدة", "الأنعام", "الأعراف", "الأنفال", "التوبة", "يونس", "هود", "يوسف", "الرعد", "إبراهيم", "الحجر", "النحل", "الإسراء", "الكهف", "مريم", "طه", "الأنبياء", "الحج", "المؤمنون", "النور", "الفرقان", "الشعراء", "النمل", "القصص", "العنكبوت", "الروم", "لقمان", "السجدة", "الأحزاب", "سبأ", "فاطر", "يس", "الصافات", "ص", "الزمر", "غافر", "فصلت", "الشورى", "الزخرف", "الدخان", "الجاثية", "الأحقاف", "محمد", "الفتح", "الحجرات", "ق", "الذاريات", "الطور", "النجم", "القمر", "الرحمن", "الواقعة", "الحديد", "المجادلة", "الحشر", "الممتحنة", "الصف", "الجمعة", "المنافقون", "التغابن", "الطلاق", "التحريم", "الملك", "القلم", "الحاقة", "المعارج", "نوح", "الجن", "المزمل", "المدثر", "القيامة", "الإنسان", "المرسلات", "النبأ", "النازعات", "عبس", "التكوير", "الانفطار", "المطففين", "الانشقاق", "البروج", "الطارق", "الأعلى", "الغاشية", "الفجر", "البلد", "الشمس", "الليل", "الضحى", "الشرح", "التين", "العلق", "القدر", "البينة", "الزلزلة", "العاديات", "القارعة", "التكاثر", "العصر", "الهمزة", "الفيل", "قريش", "الماعون", "الكوثر", "الكافرون", "النصر", "المسد", "الإخلاص", "الفلق", "الناس"]
 
-# --- CSS الاحترافي المعدل ---
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Reem+Kufi:wght@700&display=swap');
-
-body { 
-    direction: rtl; 
-    background-color: #f8f9fa; 
-}
-
-#hero-section {
-    min-height: 60vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1609599006353-e629aaabfeae?q=80&w=2070&auto=format&fit=crop');
-    background-size: cover;
-    background-position: center;
-    color: white;
-    padding: 40px 20px;
-    border-radius: 0 0 50px 50px;
-}
-
-.main-title {
-    font-family: 'Reem Kufi', sans-serif;
-    font-size: 4rem;
-    color: #f1c40f;
-    margin-bottom: 20px;
-}
-
-.sub-title {
-    font-family: 'Amiri', serif;
-    font-size: 1.5rem;
-    max-width: 800px;
-    margin-bottom: 30px;
-}
-
-.card-box {
-    background: white;
-    border-radius: 15px;
-    padding: 25px;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
-    margin-bottom: 20px;
-    border-top: 5px solid #d4af37;
-}
-
-.ayah-text {
-    font-family: 'Amiri', serif;
-    font-size: 2.5rem;
-    line-height: 1.8;
-    color: #2c3e50;
-    text-align: center;
-    padding: 20px;
-}
-
-.studio-dark {
-    background: #1a252f;
-    color: white;
-    border-radius: 15px;
-    padding: 20px;
-}
-
+body { direction: rtl; background-color: #f8f9fa; }
+#hero-section { min-height: 40vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1609599006353-e629aaabfeae?q=80&w=2070&auto=format&fit=crop'); background-size: cover; background-position: center; color: white; padding: 40px 20px; border-radius: 0 0 50px 50px; }
+.main-title { font-family: 'Reem Kufi', sans-serif; font-size: 3.5rem; color: #f1c40f; margin-bottom: 10px; }
+.card-box { background: white; border-radius: 15px; padding: 25px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); margin-bottom: 20px; border-top: 5px solid #d4af37; }
+.ayah-text { font-family: 'Amiri', serif; font-size: 2.2rem; line-height: 1.8; color: #2c3e50; text-align: center; }
+.studio-dark { background: #1a252f; color: white; border-radius: 15px; padding: 20px; }
 .alert-box { padding: 15px; border-radius: 8px; margin-top: 15px; text-align: center; font-weight: bold; }
 .alert-success { background: #d4edda; color: #155724; }
 .alert-error { background: #f8d7da; color: #721c24; }
 """
 
-# --- الدوال البرمجية ---
 def clean_text(text):
     return re.sub(r'<[^>]*>', '', text).strip()
 
 def load_quran_data():
     all_verses = []
-    # لتقليل وقت التحميل في البداية، يمكن تحميل أول 10 سور أو استخدام كاش
+    # لتحسين السرعة، سنحمل عينة من السور أولاً
     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).json()
             for v in res["verses"]:
                 txt = clean_text(v.get("text_ar", ""))
-                all_verses.append({
-                    "surah": s, 
-                    "ayah": v["ayah"], 
-                    "text": txt, 
-                    "surah_name": SURAH_NAMES[s-1]
-                })
+                all_verses.append({"surah": s, "ayah": v["ayah"], "text": txt, "surah_name": SURAH_NAMES[s-1]})
         except: continue
     return all_verses
 
 ALL_AYAT = load_quran_data()
-TARGET_GOAL = 1000
 
 def get_stats_html(user_session_count):
-    try:
-        files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
-        total_count = len([f for f in files if f.startswith("data/")])
-    except:
-        total_count = 0
-            
-    percent = min((total_count / TARGET_GOAL) * 100, 100)
-    return f"""
-    <div style="background: white; padding: 20px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); margin-bottom: 20px;">
-        <div style="display:flex; justify-content:space-between; margin-bottom:10px; direction: rtl;">
-            <span style="font-weight:bold; color:#d4af37;">🎯 الهدف: {TARGET_GOAL} تلاوة</span>
-            <span style="font-weight:bold; color:#2c3e50;">الإجمالي الحالي: {total_count}</span>
-        </div>
-        <div style="width:100%; background-color:#eee; border-radius:10px; height:12px; overflow:hidden;">
-            <div style="width:{percent}%; background-color:#d4af37; height:100%;"></div>
-        </div>
-        <div style="margin-top:10px; text-align:right; color:#777; font-size:14px;">
-            مساهماتك الآن: <b>{user_session_count}</b>
-        </div>
-    </div>
-    """
+    return f"<div style='text-align:center; padding:10px; background:#fff; border-radius:10px; margin-bottom:20px; border:1px solid #ddd;'>عدد تلاواتك في هذه الجلسة: <b>{user_session_count}</b></div>"
 
 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, gr.update()
     
     v = ALL_AYAT[current_idx]
-    # إضافة UUID لمنع استبدال الملفات بنفس السورة والآية
     unique_id = str(uuid.uuid4())[:8]
     ext = audio.split('.')[-1]
-    file_path_in_repo = f"data/s{v['surah']}_a{v['ayah']}_{unique_id}.{ext}"
+    file_name = f"s{v['surah']}_a{v['ayah']}_{unique_id}.{ext}"
     
     try:
-        api.upload_file(
-            path_or_fileobj=audio,
-            path_in_repo=file_path_in_repo,
-            repo_id=REPO_ID,
-            repo_type="dataset",
-            token=HF_TOKEN
-        )
+        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_sess = session_count + 1
-        
-        # اختيار الآية التالية
         next_idx = (current_idx + 1) % len(ALL_AYAT)
         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,
-            new_sess,
-            get_stats_html(new_sess)
-        )
+        return "<div class='alert-box alert-success'>✅ تم الحفظ بنجاح</div>", f"<div class='ayah-text'>{nv['text']}</div>", f"### سورة {nv['surah_name']} - آية {nv['ayah']}", next_idx, new_sess, get_stats_html(new_sess)
     except Exception as e:
         return f"<div class='alert-box alert-error'>❌ خطأ: {str(e)}</div>", gr.update(), gr.update(), current_idx, session_count, gr.update()
 
 def jump_logic(s_name, a_num):
     try:
         s_idx = SURAH_NAMES.index(s_name) + 1
-        target_idx = next((i for i, v in enumerate(ALL_AYAT) if v["surah"] == s_idx and v["ayah"] == int(a_num)), None)
-        
-        if target_idx is None:
-            return "<div class='alert-box alert-error'>⚠️ الآية غير موجودة</div>", gr.update(), gr.update(), 0
-        
-        target = ALL_AYAT[target_idx]
-        return "", f"<div class='ayah-text'>{target['text']}</div>", f"### سورة {target['surah_name']} - آية {target['ayah']}", target_idx
+        t_idx = next((i for i, v in enumerate(ALL_AYAT) if v["surah"] == s_idx and v["ayah"] == int(a_num)), 0)
+        target = ALL_AYAT[t_idx]
+        return "", f"<div class='ayah-text'>{target['text']}</div>", f"### سورة {target['surah_name']} - آية {target['ayah']}", t_idx
     except:
-        return "<div class='alert-box alert-error'>❌ حدث خطأ في البحث</div>", gr.update(), gr.update(), 0
+        return "<div class='alert-box alert-error'>⚠️ لم يتم العثور على الآية</div>", gr.update(), gr.update(), 0
 
 # --- بناء الواجهة ---
-with gr.Blocks(title="منصة تلاوة مفتوحة", css=custom_css) as demo:
+with gr.Blocks(title="منصة تلاوة مفتوحة") as demo:
     idx_state = gr.State(random.randint(0, len(ALL_AYAT)-1))
     sess_state = gr.State(0)
     
-    gr.HTML(f"""
+    gr.HTML("""
         <div id="hero-section">
             <h1 class="main-title">مِنَصَّة تِلاوَة</h1>
-            <p class="sub-title">ساهم في بناء مستقبل التقنيات الإسلامية بصوتك</p>
+            <p style="font-size: 1.2rem;">مشروع لجمع بيانات القرآن الكريم الصوتية</p>
         </div>
     """)
     
-    with gr.Container():
+    with gr.Column(variant="panel"): # بديل gr.Container
         stats_display = gr.HTML(get_stats_html(0))
         
         with gr.Row():
-            # الجزء الأيمن (عرض الآية)
             with gr.Column(scale=3):
-                with gr.Div(elem_classes="card-box"):
+                with gr.Group():
                     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>")
                     
                     with gr.Row():
-                        send_btn = gr.Button("إرسال التسجيل ✅", variant="primary")
+                        send_btn = gr.Button("إرسال ✅", variant="primary")
                         rnd_btn = gr.Button("آية عشوائية 🎲")
-                    
                     status_msg = gr.HTML("")
 
-            # الجزء الأيسر (التحكم)
             with gr.Column(scale=2):
-                with gr.Div(elem_classes="studio-dark"):
+                with gr.Group():
                     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="السورة")
-                    a_num = gr.Number(label="رقم الآية", value=1, precision=0)
+                    a_num = gr.Number(label="الآية", value=1, precision=0)
                     go_btn = gr.Button("انتقال")
 
-    # الأحداث (Events)
-    rnd_btn.click(
-        fn=lambda: (
-            f"<div class='ayah-text'>{ALL_AYAT[ni:=random.randint(0, len(ALL_AYAT)-1)]['text']}</div>", 
-            f"### سورة {ALL_AYAT[ni]['surah_name']} - آية {ALL_AYAT[ni]['ayah']}", 
-            ni, 
-            ""
-        ),
-        outputs=[text_html, info_text, idx_state, status_msg]
-    )
-    
-    go_btn.click(
-        fn=jump_logic,
-        inputs=[s_drop, a_num],
-        outputs=[status_msg, text_html, info_text, idx_state]
-    )
-    
-    send_btn.click(
-        fn=on_submit,
-        inputs=[audio_ui, idx_state, sess_state],
-        outputs=[status_msg, text_html, info_text, idx_state, sess_state, stats_display]
-    )
+    rnd_btn.click(lambda: (f"<div class='ayah-text'>{ALL_AYAT[ni:=random.randint(0, len(ALL_AYAT)-1)]['text']}</div>", f"### سورة {ALL_AYAT[ni]['surah_name']} - آية {ALL_AYAT[ni]['ayah']}", ni, ""), None, [text_html, info_text, idx_state, status_msg])
+    go_btn.click(jump_logic, [s_drop, a_num], [status_msg, text_html, info_text, idx_state])
+    send_btn.click(on_submit, [audio_ui, idx_state, sess_state], [status_msg, text_html, info_text, idx_state, sess_state, stats_display])
 
-if __name__ == "__main__":
-    demo.launch()
+# تشغيل مع نقل الـ CSS لهنا (حسب متطلبات الإصدار 6)
+demo.launch(css=custom_css)