Update app.py

app.py

@@ -7,215 +7,85 @@ import uuid
 from huggingface_hub import HfApi
 from concurrent.futures import ThreadPoolExecutor
 
-# --- الإعدادات والمصادر ---
+# --- الإعدادات (نفس الكود السابق) ---
 HF_TOKEN = os.getenv("HF_TOKEN")
 REPO_ID = "Alide21/speech_quran"
 api = HfApi()
 
-SURAH_NAMES = ["الفاتحة", "البقرة", "آل عمران", "النساء", "المائدة", "الأنعام", "الأعراف", "الأنفال", "التوبة", "يونس", "هود", "يوسف", "الرعد", "إبراهيم", "الحجر", "النحل", "الإسراء", "الكهف", "مريم", "طه", "الأنبياء", "الحج", "المؤمنون", "النور", "الفرقان", "الشعراء", "النمل", "القصص", "العنكبوت", "الروم", "لقمان", "السجدة", "الأحزاب", "سبأ", "فاطر", "يس", "الصافات", "ص", "الزمر", "غافر", "فصلت", "الشورى", "الزخرف", "الدخان", "الجاثية", "الأحقاف", "محمد", "الفتح", "الحجرات", "ق", "الذاريات", "الطور", "النجم", "القمر", "الرحمن", "الواقعة", "الحديد", "المجادلة", "الحشر", "الممتحنة", "الصف", "الجمعة", "المنافقون", "التغابن", "الطلاق", "التحريم", "الملك", "اللم", "الحاقة", "المعارج", "نوح", "الجن", "المزمل", "المدثر", "القيامة", "الإنسان", "المرسلات", "النبأ", "النازعات", "عبس", "التكوير", "الانفطار", "المطففين", "الانشقاق", "البروج", "الطارق", "الأعلى", "الغاشية", "الفجر", "البلد", "الشمس", "الليل", "الضحى", "الشرح", "التين", "العلق", "القدر", "البينة", "الزلزلة", "العاديات", "القارعة", "التكاثر", "العصر", "الهمزة", "الفيل", "قريش", "الماعون", "الكوثر", "الكافرون", "النصر", "المسد", "الإخلاص", "الفلق", "الناس"]
+SURAH_NAMES = ["الفاتحة", "البقرة", "آل عمران", "النساء", "المائدة", "الأنعام", "الأعراف", "الأنفال", "التوبة", "يونس", "هود", "يوسف", "الرعد", "إبراهيم", "الحجر", "النحل", "الإسراء", "الكهف", "مريم", "طه", "الأنبياء", "الحج", "المؤمنون", "النور", "الفرقان", "الشعراء", "النمل", "القصص", "العنكبوت", "الروم", "لقمان", "السجدة", "الأحزاب", "سبأ", "فاطر", "يس", "الصافات", "ص", "الزمر", "غافر", "فصلت", "الشورى", "الزخرف", "الدخان", "الجاثية", "الأحقاف", "محمد", "الفتح", "الحجرات", "ق", "الذاريات", "الطور", "النجم", "القمر", "الرحمن", "الواقعة", "الحديد", "المجادلة", "الحشر", "الممتحنة", "الصف", "الجمعة", "المنافقون", "التغابن", "الطلاق", "التحريم", "الملك", "القلم", "الحاقة", "المعارج", "نوح", "الجن", "المزمل", "المدثر", "القيامة", "الإنسان", "المرسلات", "النبأ", "النازعات", "عبس", "التكوير", "الانفطار", "المطففين", "الانشقاق", "البروج", "الطارق", "الأعلى", "الغاشية", "الفجر", "البلد", "الشمس", "الليل", "الضحى", "الشرح", "التين", "العلق", "القدر", "البينة", "الزلزلة", "العاديات", "القارعة", "التكاثر", "العصر", "الهمزة", "الفيل", "قريش", "الماعون", "الكوثر", "الكافرون", "النصر", "المسد", "الإخلاص", "الفلق", "الناس"]
 
-# --- تحسين CSS ---
+# --- التنسيقات (نفس الـ CSS الرائع) ---
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Reem+Kufi:wght@400;700&family=Scheherazade+New:wght@400;700&display=swap');
-
-:root {
-    --primary: #064635;
-    --secondary: #519259;
-    --accent: #F4BB44;
-    --text-dark: #2C3333;
-    --bg-light: #F0F2F5;
-}
-
-body { 
-    direction: rtl; 
-    background-color: var(--bg-light); 
-}
-
-/* تحسين شكل الحاوية الرئيسية */
-.gradio-container {
-    font-family: 'Reem Kufi', sans-serif !important;
-}
-
-/* الهيدر الأنيق */
-#header-section {
-    background: linear-gradient(135deg, var(--primary) 0%, #0a6b51 100%);
-    padding: 50px 20px;
-    border-radius: 0 0 50px 50px;
-    text-align: center;
-    color: white;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
-    margin-bottom: 30px;
-}
-
-.main-title { 
-    font-size: 3rem !important; 
-    margin-bottom: 10px; 
-    font-weight: 700;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-}
-
-/* بطاقة الآية */
-.ayah-card {
-    background: white;
-    border-radius: 25px;
-    padding: 40px;
-    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
-    border: 1px solid rgba(0,0,0,0.05);
-    text-align: center;
-    transition: all 0.3s ease;
-}
-
-.ayah-text {
-    font-family: 'Amiri', serif !important;
-    font-size: 2.8rem !important;
-    line-height: 1.8 !important;
-    color: var(--primary);
-    margin: 20px 0;
-    padding: 20px;
-}
-
-/* الأزرار */
-.custom-btn {
-    border-radius: 12px !important;
-    font-weight: bold !important;
-    transition: transform 0.2s !important;
-}
-.custom-btn:hover { transform: scale(1.02); }
-
-/* التنبيهات */
-.alert-box {
-    padding: 15px;
-    border-radius: 12px;
-    margin: 10px 0;
-    font-weight: bold;
-}
+:root { --primary: #064635; --secondary: #519259; --accent: #F4BB44; --bg-light: #F0F2F5; }
+body { direction: rtl; background-color: var(--bg-light); }
+#header-section { background: linear-gradient(135deg, var(--primary) 0%, #0a6b51 100%); padding: 50px 20px; border-radius: 0 0 50px 50px; text-align: center; color: white; margin-bottom: 30px; }
+.ayah-card { background: white; border-radius: 25px; padding: 40px; box-shadow: 0 15px 35px rgba(0,0,0,0.05); text-align: center; }
+.ayah-text { font-family: 'Amiri', serif !important; font-size: 2.5rem !important; line-height: 1.8 !important; color: var(--primary); }
+.alert-box { padding: 15px; border-radius: 12px; margin: 10px 0; font-weight: bold; }
 .alert-success { background: #d4edda; color: #155724; border-right: 5px solid #28a745; }
 .alert-error { background: #f8d7da; color: #721c24; border-right: 5px solid #dc3545; }
-
-/* تخصيص المسافات */
-.gap-20 { gap: 20px; }
 """
 
-# --- منطق البيانات ---
-def clean_text(text):
-    return re.sub(r'<[^>]*>', '', text).strip()
+# --- الوظائف المنطقية ---
+def clean_text(text): return re.sub(r'<[^>]*>', '', text).strip()
 
 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"]]
-    except:
-        return []
-
-def load_quran_data():
-    all_verses = []
-    # استخدام الـ Threading لتحميل البيانات بسرعة بدلاً من الانتظار التسلسلي
-    with ThreadPoolExecutor(max_workers=10) as executor:
-        results = list(executor.map(fetch_surah, range(1, 115)))
-    for r in results:
-        all_verses.extend(r)
-    return all_verses
+    except: return []
 
-ALL_AYAT = load_quran_data()
+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 get_stats_html(count):
-    return f"""
-    <div style="background: white; padding: 20px; border-radius: 15px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
-        <div style="font-size: 0.9rem; color: #666;">تلاواتك في هذه الجلسة</div>
-        <div style="font-size: 2.5rem; color: var(--secondary); font-weight: bold;">{count}</div>
-        <div style="font-size: 0.8rem; color: #aaa; margin-top: 5px;">جزاك الله خيراً على مساهمتك</div>
-    </div>
-    """
+    return f"<div style='background: white; padding: 15px; border-radius: 15px; text-align: center;'>جلسة تلاوة: <b style='color:var(--secondary)'>{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()
-    
+    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]
-    unique_id = str(uuid.uuid4())[:8]
-    file_name = f"s{v['surah']}_a{v['ayah']}_{unique_id}.wav"
-    
     try:
-        api.upload_file(
-            path_or_fileobj=audio, 
-            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_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)
         new_sess = session_count + 1
-        next_idx = random.randint(0, len(ALL_AYAT)-1) # الانتقال لآية عشوائية بعد النجاح
+        next_idx = random.randint(0, len(ALL_AYAT)-1)
         nv = ALL_AYAT[next_idx]
-        
-        success_msg = f"<div class='alert-box alert-success'>✅ تم حفظ التلاوة بنجاح! (آية {v['ayah']} - {v['surah_name']})</div>"
-        return success_msg, 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()
+        return f"<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_to_ayah(s_name, a_num):
-    try:
-        s_idx = SURAH_NAMES.index(s_name) + 1
-        t_idx = next((i for i, v in enumerate(ALL_AYAT) if v["surah"] == s_idx and v["ayah"] == int(a_num)), None)
-        if t_idx is not None:
-            target = ALL_AYAT[t_idx]
-            return "", f"<div class='ayah-text'>{target['text']}</div>", f"### {target['surah_name']} | آية {target['ayah']}", t_idx
-        return "<div class='alert-box alert-error'>⚠️ لم نجد هذه الآية في السورة المختارة</div>", gr.update(), gr.update(), 0
-    except:
-        return "<div class='alert-box alert-error'>⚠️ حدث خطأ في البحث</div>", gr.update(), gr.update(), 0
-
-# --- بناء الواجهة ---
-with gr.Blocks(css=custom_css, title="منصة تلاوة") as demo:
+# --- بناء الواجهة المحسنة لـ Gradio 6.0 ---
+with gr.Blocks(title="منصة تلاوة") as demo: # لاحظ: حذفنا css من هنا
     idx_state = gr.State(random.randint(0, len(ALL_AYAT)-1))
     sess_state = gr.State(0)
 
-    # الهيدر
-    gr.HTML("""
-        <div id="header-section">
-            <h1 class="main-title">مِنَصَّة التِّلَاوَة</h1>
-            <p style="font-size: 1.2rem; opacity: 0.9;">ساهم في بناء أول قاعدة بيانات صوتية مفتوحة المصدر للقرآن الكريم</p>
-        </div>
-    """)
+    gr.HTML('<div id="header-section"><h1>مِنَصَّة التِّلَاوَة</h1><p>بناء قاعدة بيانات صوتية للقرآن الكريم</p></div>')
 
-    with gr.Row(elem_classes="gap-20"):
-        # العمود الأيمن: العرض
+    with gr.Row():
         with gr.Column(scale=3):
-            with gr.Div(elem_classes="ayah-card"):
+            # تم استبدال gr.Div بـ gr.Column مع الكلاس المناسب
+            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("")
-                
                 with gr.Row():
-                    send_btn = gr.Button("🎤 إرسال التلاوة الآن", variant="primary", elem_classes="custom-btn")
-                    rnd_btn = gr.Button("🔄 آية أخرى", variant="secondary", elem_classes="custom-btn")
+                    send_btn = gr.Button("🎤 إرسال التلاوة", variant="primary")
+                    rnd_btn = gr.Button("🔄 آية عشوائية", variant="secondary")
 
-        # العمود الأيسر: التحكم والإحصائيات
         with gr.Column(scale=1):
             stats_display = gr.HTML(get_stats_html(0))
-            
-            with gr.Group():
-                gr.Markdown("### 🎙️ استوديو التسجيل")
-                audio_ui = gr.Audio(sources=["microphone"], type="filepath", label=None)
-            
-            with gr.Accordion("🔍 انتقل لآية محددة", open=False):
+            audio_ui = gr.Audio(sources=["microphone"], type="filepath", label="سجل هنا")
+            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("انتقال", variant="secondary")
-
-    # التذييل
-    gr.HTML("""
-        <div style="text-align: center; margin-top: 50px; padding: 20px; color: #666; border-top: 1px solid #ddd;">
-            <p>© 2026 مشروع تلاوة - صدقة جارية لكل من ساهم بقراءته</p>
-        </div>
-    """)
+                go_btn = gr.Button("انتقال")
 
-    # الأحداث
+    # ربط الأحداث
     rnd_btn.click(lambda: (f"<div class='ayah-text'>{ALL_AYAT[i:=random.randint(0,len(ALL_AYAT)-1)]['text']}</div>", f"### {ALL_AYAT[i]['surah_name']} | آية {ALL_AYAT[i]['ayah']}", i, ""), None, [text_html, info_text, idx_state, status_msg])
-    go_btn.click(jump_to_ayah, [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])
 
+# تشغيل التطبي�� مع تمرير الـ CSS هنا (قاعدة Gradio 6.0)
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(css=custom_css)