Update app.py

app.py

@@ -13,17 +13,319 @@ 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: 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; }
+@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Reem+Kufi:wght@400;500;600;700&family=Scheherazade+New:wght@400;700&display=swap');
+
+:root {
+    --primary-color: #1a5f7a;
+    --secondary-color: #57c5b6;
+    --accent-color: #159895;
+    --gold-color: #d4af37;
+    --light-bg: #f8f9fa;
+    --dark-bg: #1a252f;
+    --success-color: #28a745;
+    --warning-color: #ffc107;
+}
+
+* {
+    font-family: 'Reem Kufi', sans-serif;
+}
+
+body {
+    direction: rtl;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+}
+
+.gradio-container {
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+}
+
+/* الهيدر */
+#header-section {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
+    min-height: 50vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 60px 20px;
+    border-radius: 0 0 60px 60px;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+#header-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('https://images.unsplash.com/photo-1541250628459-d8f2f0157289?q=80&w=2070&auto=format&fit=crop') center/cover;
+    opacity: 0.15;
+}
+
+.main-title {
+    font-family: 'Reem Kufi', sans-serif;
+    font-size: 4rem;
+    color: white;
+    margin-bottom: 10px;
+    text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
+    position: relative;
+    z-index: 1;
+}
+
+.subtitle {
+    font-family: 'Scheherazade New', serif;
+    font-size: 1.8rem;
+    color: var(--gold-color);
+    margin-bottom: 30px;
+    position: relative;
+    z-index: 1;
+    font-weight: 700;
+}
+
+.logo-container {
+    background: white;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 30px;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
+    position: relative;
+    z-index: 1;
+    border: 5px solid var(--gold-color);
+}
+
+.logo-text {
+    font-family: 'Reem Kufi', sans-serif;
+    font-size: 2.5rem;
+    color: var(--primary-color);
+    font-weight: 700;
+}
+
+/* البطاقات */
+.card-box {
+    background: white;
+    border-radius: 20px;
+    padding: 30px;
+    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
+    margin-bottom: 25px;
+    border-top: 8px solid var(--secondary-color);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.card-box:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
+}
+
+.card-box::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 5px;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+}
+
+/* نص الآية */
+.ayah-container {
+    background: linear-gradient(135deg, #fff8e1 0%, #fef9e7 100%);
+    border-radius: 15px;
+    padding: 40px;
+    margin: 20px 0;
+    border-right: 8px solid var(--gold-color);
+    position: relative;
+}
+
+.ayah-container::before {
+    content: "﷽";
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    font-size: 2rem;
+    color: rgba(0,0,0,0.1);
+    font-family: 'Amiri', serif;
+}
+
+.ayah-text {
+    font-family: 'Amiri', serif;
+    font-size: 2.8rem;
+    line-height: 1.9;
+    color: #2c3e50;
+    text-align: center;
+    font-weight: 700;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
+    padding: 20px;
+}
+
+.ayah-info {
+    font-family: 'Reem Kufi', sans-serif;
+    font-size: 1.5rem;
+    color: var(--primary-color);
+    text-align: center;
+    margin-top: 20px;
+    padding: 15px;
+    background: rgba(87, 197, 182, 0.1);
+    border-radius: 10px;
+    border-right: 4px solid var(--secondary-color);
+}
+
+/* الأزرار */
+button {
+    font-family: 'Reem Kufi', sans-serif !important;
+    font-size: 1.1rem !important;
+    border-radius: 12px !important;
+    padding: 15px 30px !important;
+    transition: all 0.3s ease !important;
+    border: none !important;
+}
+
+button.primary {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%) !important;
+    color: white !important;
+    box-shadow: 0 5px 15px rgba(26, 95, 122, 0.3) !important;
+}
+
+button.primary:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 20px rgba(26, 95, 122, 0.4) !important;
+}
+
+button.secondary {
+    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
+    color: white !important;
+    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3) !important;
+}
+
+/* قسم التسجيل */
+.recording-section {
+    background: linear-gradient(135deg, var(--dark-bg) 0%, #2c3e50 100%);
+    border-radius: 20px;
+    padding: 30px;
+    color: white;
+    margin-top: 30px;
+}
+
+.recording-title {
+    color: var(--gold-color);
+    font-size: 1.8rem;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+/* الإحصائيات */
+.stats-card {
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    border-radius: 15px;
+    padding: 25px;
+    text-align: center;
+    border: 2px solid var(--secondary-color);
+    margin: 20px 0;
+}
+
+.stats-number {
+    font-size: 3rem;
+    color: var(--primary-color);
+    font-weight: 700;
+    margin: 10px 0;
+}
+
+.stats-label {
+    font-size: 1.2rem;
+    color: #666;
+}
+
+/* التنبيهات */
+.alert-box {
+    padding: 20px;
+    border-radius: 12px;
+    margin: 20px 0;
+    text-align: center;
+    font-weight: bold;
+    font-size: 1.1rem;
+    animation: slideIn 0.5s ease;
+}
+
+@keyframes slideIn {
+    from { transform: translateY(-20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+.alert-success {
+    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
+    color: #155724;
+    border-right: 5px solid var(--success-color);
+}
+
+.alert-error {
+    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
+    color: #721c24;
+    border-right: 5px solid #dc3545;
+}
+
+/* البحث السريع */
+.search-section {
+    background: white;
+    border-radius: 15px;
+    padding: 25px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
+    margin-top: 20px;
+}
+
+/* تخصيص العناصر */
+.gr-box {
+    border-radius: 15px !important;
+    border: 2px solid #e9ecef !important;
+}
+
+.gr-input {
+    border-radius: 10px !important;
+}
+
+/* تذييل الصفحة */
+footer {
+    text-align: center;
+    padding: 30px;
+    margin-top: 50px;
+    background: var(--dark-bg);
+    color: white;
+    border-radius: 30px 30px 0 0;
+}
+
+.footer-text {
+    color: var(--gold-color);
+    font-size: 1.1rem;
+}
+
+/* تأثيرات إضافية */
+.pulse {
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+.glow {
+    text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
+}
 """
 
 def clean_text(text):
@@ -45,7 +347,15 @@ def load_quran_data():
 ALL_AYAT = load_quran_data()
 
 def get_stats_html(user_session_count):
-    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>"
+    return f"""
+    <div class="stats-card">
+        <div class="stats-number">{user_session_count}</div>
+        <div class="stats-label">عدد تلاواتك في هذه الجلسة</div>
+        <div style="margin-top: 15px; font-size: 0.9rem; color: #888;">
+            كل تلاوة تساهم في بناء أكبر قاعدة بيانات صوتية للقرآن الكريم
+        </div>
+    </div>
+    """
 
 def on_submit(audio, current_idx, session_count):
     if not audio:
@@ -61,9 +371,20 @@ def on_submit(audio, current_idx, session_count):
         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)
+        
+        success_msg = f"""
+        <div class='alert-box alert-success'>
+            <div style="font-size: 1.3rem; margin-bottom: 10px;">✅ تم الحفظ بنجاح</div>
+            <div>تم رفع تلاوتك للآية {v['ayah']} من سورة {v['surah_name']}</div>
+            <div style="margin-top: 10px; font-size: 0.9rem;">
+                المعرف الفريد: {unique_id}
+            </div>
+        </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-error'>❌ خطأ في الرفع: {str(e)}</div>", gr.update(), gr.update(), current_idx, session_count, gr.update()
 
 def jump_logic(s_name, a_num):
     try:
@@ -72,48 +393,151 @@ def jump_logic(s_name, a_num):
         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
+
+def random_ayah():
+    ni = random.randint(0, len(ALL_AYAT)-1)
+    v = ALL_AYAT[ni]
+    return f"<div class='ayah-text'>{v['text']}</div>", f"### سورة {v['surah_name']} - آية {v['ayah']}", ni, ""
 
-# --- بناء الواجهة ---
-with gr.Blocks(title="منصة تلاوة مفتوحة") as demo:
+# --- بناء الواجهة المحسنة ---
+with gr.Blocks(title="مِنَصَّة التِّلَاوَة - Quran Recitation Platform", css=custom_css) as demo:
     idx_state = gr.State(random.randint(0, len(ALL_AYAT)-1))
     sess_state = gr.State(0)
     
+    # الهيدر الرئيسي
     gr.HTML("""
-        <div id="hero-section">
-            <h1 class="main-title">مِنَصَّة تِلاوَة</h1>
-            <p style="font-size: 1.2rem;">مشروع لجمع بيانات القرآن الكريم الصوتية</p>
+        <div id="header-section">
+            <div class="logo-container">
+                <div class="logo-text">ق</div>
+            </div>
+            <h1 class="main-title glow">مِنَصَّة التِّلَاوَة</h1>
+            <p class="subtitle">مشروع جماعي لجمع وتوثيق تلاوات القرآن الكريم</p>
+            <p style="color: rgba(255,255,255,0.9); font-size: 1.1rem; max-width: 800px; position: relative; z-index: 1;">
+                ساهم معنا في بناء أكبر قاعدة بيانات صوتية للقرآن الكريم من خلال تسجيل تلاوتك للآيات الكريمة
+            </p>
         </div>
     """)
     
-    with gr.Column(variant="panel"): # بديل gr.Container
-        stats_display = gr.HTML(get_stats_html(0))
+    with gr.Column():
+        # قسم الإحصائيات
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.HTML(get_stats_html(0))
+            with gr.Column(scale=2):
+                gr.HTML("""
+                    <div class="card-box">
+                        <h3 style="color: var(--primary-color); margin-bottom: 15px;">🎯 الهدف م�� المنصة</h3>
+                        <p style="line-height: 1.6;">
+                            هذه المنصة تهدف إلى جمع تسجيلات صوتية متنوعة لتلاوات القرآن الكريم 
+                            من مختلف القراء والمستويات، لاستخدامها في تطوير نماذج الذكاء الاصطناعي 
+                            لفهم وتحليل التلاوة القرآنية.
+                        </p>
+                        <div style="margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 10px;">
+                            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
+                                <span>📖 عدد الآيات المتاحة:</span>
+                                <span style="font-weight: bold;">""" + str(len(ALL_AYAT)) + """</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between;">
+                                <span>🎙️ السور المتاحة:</span>
+                                <span style="font-weight: bold;">114</span>
+                            </div>
+                        </div>
+                    </div>
+                """)
         
+        # قسم العرض الرئيسي
         with gr.Row():
-            with gr.Column(scale=3):
+            with gr.Column(scale=2):
                 with gr.Group():
+                    gr.HTML("""
+                        <div style="text-align: center; margin-bottom: 20px;">
+                            <h2 style="color: var(--primary-color);">📖 الآية الحالية</h2>
+                            <p style="color: #666;">تلاوة ثم تسجيل صوتك للآية المعروضة</p>
+                        </div>
+                    """)
+                    
                     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")
-                        rnd_btn = gr.Button("آية عشوائية 🎲")
+                        with gr.Column():
+                            send_btn = gr.Button("🎤 إرسال التلاوة", variant="primary", elem_classes="primary pulse")
+                        with gr.Column():
+                            rnd_btn = gr.Button("🔄 آية عشوائية", variant="secondary")
+                    
                     status_msg = gr.HTML("")
 
-            with gr.Column(scale=2):
+            with gr.Column(scale=1):
                 with gr.Group():
-                    gr.Markdown("### 🎙️ سجل تلاوتك")
-                    audio_ui = gr.Audio(sources=["microphone"], type="filepath", label=None)
+                    gr.HTML("""
+                        <div class="recording-section">
+                            <h3 class="recording-title">🎙️ استوديو التسجيل</h3>
+                            <p style="text-align: center; opacity: 0.9; margin-bottom: 20px;">
+                                سجل تلاوتك للآية الحالية بجودة عالية
+                            </p>
+                        </div>
+                    """)
+                    audio_ui = gr.Audio(
+                        sources=["microphone"], 
+                        type="filepath", 
+                        label=None,
+                        waveform_options={"show_controls": True}
+                    )
                 
-                with gr.Accordion("🔍 بحث سريع", open=False):
-                    s_drop = gr.Dropdown(choices=SURAH_NAMES, label="السورة")
-                    a_num = gr.Number(label="الآية", value=1, precision=0)
-                    go_btn = gr.Button("انتقال")
+                with gr.Accordion("🔍 البحث عن آية محددة", open=False):
+                    with gr.Group():
+                        s_drop = gr.Dropdown(
+                            choices=SURAH_NAMES, 
+                            label="اختر السورة",
+                            value="الفاتحة"
+                        )
+                        a_num = gr.Number(
+                            label="رقم الآية", 
+                            value=1, 
+                            precision=0,
+                            minimum=1
+                        )
+                        go_btn = gr.Button("🔍 انتقل إلى الآية", variant="primary")
+
+    # التذييل
+    gr.HTML("""
+        <footer>
+            <div class="footer-text">مِنَصَّة التِّلَاوَة - Quran Recitation Platform</div>
+            <p style="margin-top: 10px; opacity: 0.8;">
+                مشروع مفتوح المصدر يساهم في خدمة القرآن الكريم وتقنيات الذكاء الاصطناعي
+            </p>
+            <div style="margin-top: 20px; font-size: 0.9rem; opacity: 0.7;">
+                © 2024 جميع الحقوق محفوظة - للمساهمة تواصل معنا
+            </div>
+        </footer>
+    """)
 
-    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])
+    # التعامل مع الأحداث
+    rnd_btn.click(
+        random_ayah, 
+        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]
+    )
 
-# تشغيل مع نقل الـ CSS لهنا (حسب متطلبات الإصدار 6)
-demo.launch(css=custom_css)
+# تشغيل التطبيق
+if __name__ == "__main__":
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        debug=False
+    )