Update app.py

app.py

@@ -5,64 +5,174 @@ import random
 import os
 from huggingface_hub import HfApi
 
+# إعدادات الأمان
 HF_TOKEN = os.getenv("HF_TOKEN")
 REPO_ID = "Alide21/speech_quran"
 api = HfApi()
 
 SURAH_NAMES = ["الفاتحة", "البقرة", "آل عمران", "النساء", "المائدة", "الأنعام", "الأعراف", "الأنفال", "التوبة", "يونس", "هود", "يوسف", "الرعد", "إبراهيم", "الحجر", "النحل", "الإسراء", "الكهف", "مريم", "طه", "الأنبياء", "الحج", "المؤمنون", "النور", "الفرقان", "الشعراء", "النمل", "القصص", "العنكبوت", "الروم", "لقمان", "السجدة", "الأحزاب", "سبأ", "فاطر", "يس", "الصافات", "ص", "الزمر", "غافر", "فصلت", "الشورى", "الزخرف", "الدخان", "الجاثية", "الأحقاف", "محمد", "الفتح", "الحجرات", "ق", "الذاريات", "الطور", "النجم", "القمر", "الرحمن", "الواقعة", "الحديد", "المجادلة", "الحشر", "الممتحنة", "الصف", "الجمعة", "المنافقون", "التغابن", "الطلاق", "التحريم", "الملك", "القلم", "الحاقة", "المعارج", "نوح", "الجن", "المزمل", "المدثر", "القيامة", "الإنسان", "المرسلات", "النبأ", "النازعات", "عبس", "التكوير", "الانفطار", "المطففين", "الانشقاق", "البروج", "الطارق", "الأعلى", "الغاشية", "الفجر", "البلد", "الشمس", "الليل", "الضحى", "الشرح", "التين", "العلق", "القدر", "البينة", "الزلزلة", "العاديات", "القارعة", "التكاثر", "العصر", "الهمزة", "الفيل", "قريش", "الماعون", "الكوثر", "الكافرون", "النصر", "المسد", "الإخلاص", "الفلق", "الناس"]
 
+# CSS احترافي جداً
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@700&family=Reem+Kufi:wght@700&display=swap');
 
-/* إلغاء المسافات والهوامش */
-.gradio-container { direction: rtl !important; max-width: 1200px !important; margin: 0 auto !important; padding: 10px !important; min-height: unset !important; }
-.gap { gap: 10px !important; }
+/* إعادة ضبط الصفحة */
+body, .gradio-container { margin: 0 !important; padding: 0 !important; max-width: 100% !important; direction: rtl; background-color: #f8f9fa; }
 
-/* رأس الصفحة المدمج */
-.header-mini {
-    background: linear-gradient(90deg, #1a1a1a, #2c3e50);
-    padding: 15px;
-    border-radius: 15px;
+/* Hero Section - الشاشة الافتتاحية */
+.hero-wrapper {
+    height: 100vh; /* ارتفاع كامل للشاشة */
+    width: 100%;
+    background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1609599006353-e629aaabfeae?q=80&w=2070&auto=format&fit=crop');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     text-align: center;
+    color: white;
+    position: relative;
+}
+
+.hero-title { 
+    font-size: 80px !important; 
+    font-family: 'Reem Kufi', sans-serif !important; 
+    color: #ffffff !important; 
+    text-shadow: 0px 0px 20px rgba(212, 175, 55, 0.6);
+    margin-bottom: 10px;
+}
+
+.hero-subtitle {
+    font-size: 24px;
+    color: #e0e0e0;
+    margin-bottom: 40px;
+    font-family: 'Amiri', serif;
+}
+
+.cta-button {
+    background: #d4af37;
+    color: #1a1a1a;
+    padding: 18px 50px;
+    border-radius: 50px;
+    font-size: 22px;
+    font-weight: bold;
+    text-decoration: none;
+    transition: transform 0.3s, box-shadow 0.3s;
+    border: 2px solid #d4af37;
+    cursor: pointer;
+    display: inline-block;
+}
+.cta-button:hover {
+    background: transparent;
     color: #d4af37;
-    margin-bottom: 15px;
-    border-bottom: 3px solid #d4af37;
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
+}
+
+/* سهم النزول */
+.scroll-down {
+    position: absolute;
+    bottom: 30px;
+    animation: bounce 2s infinite;
+    color: white;
+    font-size: 30px;
+    opacity: 0.8;
+}
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+    40% {transform: translateY(-10px);}
+    60% {transform: translateY(-5px);}
+}
+
+/* منطقة العمل (بعد النزول) */
+#work-section {
+    padding: 60px 20px;
+    max-width: 1200px;
+    margin: 0 auto;
 }
-.header-mini h1 { font-size: 35px !important; margin: 0; font-family: 'Reem Kufi', sans-serif; }
-
-/* بطاقة الآية الاستعراضية */
-.ayah-card { 
-    background: white; 
-    border-radius: 15px; 
-    padding: 20px; 
-    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
-    border-top: 4px solid #d4af37;
-    min-height: 200px;
+
+/* شريط الإحصائيات */
+.stats-container {
+    background: white;
+    border-radius: 15px;
+    padding: 20px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+    margin-bottom: 40px;
+    border-right: 5px solid #d4af37;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.stat-item { text-align: center; }
+.stat-val { font-size: 30px; color: #2c3e50; font-weight: bold; font-family: 'Reem Kufi'; }
+.stat-label { color: #7f8c8d; font-size: 16px; }
+
+/* بطاقة الآية */
+.ayah-display {
+    background: #fff;
+    padding: 40px;
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+.ayah-display::before {
+    content: "❝";
+    font-size: 100px;
+    color: #f4f4f4;
+    position: absolute;
+    top: -20px;
+    right: 20px;
 }
-.ayah-text { font-size: 28px !important; line-height: 1.5 !important; color: #2c3e50; font-family: 'Amiri', serif; text-align: center; }
-
-/* منطقة التسجيل الاحترافية */
-.studio-box { 
-    background: #1e272e !important; 
-    border-radius: 15px !important; 
-    padding: 15px !important; 
-    border: 1px solid #d4af37;
+.ayah-text { 
+    font-size: 36px !important; 
+    line-height: 1.8; 
+    color: #2c3e50; 
+    font-family: 'Amiri', serif !important; 
+    position: relative;
+    z-index: 2;
 }
-.studio-box label { color: #d4af37 !important; font-size: 14px !important; }
 
-/* الإحصائيات في سطر واحد */
-.stats-bar { display: flex; gap: 10px; margin-bottom: 10px; }
-.stat-pill { background: white; flex: 1; padding: 8px; border-radius: 10px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); font-size: 14px; }
-.stat-pill b { color: #d4af37; font-size: 18px; }
+/* منطقة التسجيل المحسنة */
+.studio-container {
+    background: #2c3e50;
+    color: white;
+    padding: 30px;
+    border-radius: 20px;
+    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
+    border: 1px solid #34495e;
+}
+.studio-header {
+    border-bottom: 1px solid #465f76;
+    padding-bottom: 15px;
+    margin-bottom: 20px;
+    font-size: 18px;
+    color: #d4af37;
+    font-weight: bold;
+}
 
-/* تصغير الأزرار */
-.btn-compact { border-radius: 10px !important; padding: 5px !important; }
+/* تحسين شكل رسائل التنبيه */
+.toast-msg {
+    padding: 15px;
+    border-radius: 8px;
+    margin-top: 15px;
+    font-weight: bold;
+    text-align: center;
+    animation: fadeIn 0.5s;
+}
+.toast-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
+.toast-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
+.toast-warn { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
+
+@keyframes fadeIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }
 """
 
-def clean_text(text): return re.sub(r'<[^>]*>', '', text).strip()
+def clean_text(text):
+    return re.sub(r'<[^>]*>', '', text).strip()
 
 def load_quran_data():
     all_verses = []
@@ -77,64 +187,128 @@ def load_quran_data():
     return all_verses
 
 ALL_AYAT = load_quran_data()
+TARGET_GOAL = 1000
 
 def get_total():
     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/")])
+        count = len([f for f in files if f.startswith("data/")])
+        return count
     except: return 0
 
 def on_submit(audio, current_idx, session_count):
-    if not audio: return "⚠️ يرجى التسجيل", gr.update(), gr.update(), current_idx, session_count, gr.update()
+    if not audio: 
+        return "<div class='toast-msg toast-error'>⚠️ لم يتم استلام أي صوت! الرجاء التسجيل أولاً.</div>", gr.update(), gr.update(), current_idx, session_count, gr.update()
+    
     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_in_repo=f"data/{file_name}", repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
-        new_sess, new_total = session_count + 1, get_total()
+        new_sess = session_count + 1
+        new_total = get_total()
+        
+        # اختيار الآية التالية (تجاوز الطويلة)
         next_idx = (current_idx + 1) % len(ALL_AYAT)
-        while len(ALL_AYAT[next_idx]["text"]) > 150: next_idx = (next_idx + 1) % len(ALL_AYAT)
+        while len(ALL_AYAT[next_idx]["text"]) > 250: 
+            next_idx = (next_idx + 1) % len(ALL_AYAT)
+        
         nv = ALL_AYAT[next_idx]
-        stats_html = f"<div class='stats-bar'><div class='stat-pill'><b>{new_total}</b><br>تجميعات الأمة</div><div class='stat-pill'><b>{new_sess}</b><br>مساهماتك الآن</div></div>"
-        return "✨ تم بنجاح", f"<div class='ayah-text'>{nv['text']}</div>", f"### سورة {nv['surah_name']} - آ��ة {nv['ayah']}", next_idx, new_sess, stats_html
-    except: return "❌ خطأ في الرفع", gr.update(), gr.update(), current_idx, session_count, gr.update()
+        stats_html = create_stats_html(new_total, new_sess)
+        
+        return "<div class='toast-msg toast-success'>✨ تم الحفظ بنجاح، جزاك الله خيراً!</div>", f"<div class='ayah-text'>{nv['text']}</div>", f"### سورة {nv['surah_name']} - آية {nv['ayah']}", next_idx, new_sess, stats_html
+    except Exception as e:
+        return f"<div class='toast-msg toast-error'>❌ خطأ تقني: {str(e)}</div>", gr.update(), gr.update(), current_idx, session_count, gr.update()
+
+def create_stats_html(total, session):
+    percent = min((total / TARGET_GOAL) * 100, 100)
+    return f"""
+    <div class='stats-container'>
+        <div class='stat-item'>
+            <div class='stat-val' style='color:#d4af37'>{TARGET_GOAL}</div>
+            <div class='stat-label'>الهدف المنشود</div>
+        </div>
+        <div class='stat-item' style='flex-grow:2; margin:0 20px;'>
+            <div style='background:#eee; height:10px; border-radius:5px; margin-top:10px; overflow:hidden;'>
+                <div style='background:#d4af37; height:100%; width:{percent}%'></div>
+            </div>
+            <div style='font-size:12px; color:#999; margin-top:5px;'>تم جمع {total} تسجيل حتى الآن</div>
+        </div>
+        <div class='stat-item'>
+            <div class='stat-val'>{session}</div>
+            <div class='stat-label'>مساهمتك الحالية</div>
+        </div>
+    </div>
+    """
+
+def jump_logic(s_name, a_num):
+    # تصحيح منطق البحث
+    try:
+        s_idx = SURAH_NAMES.index(s_name) + 1
+        # البحث عن الآية المطابقة بدقة
+        target = next((v for v in ALL_AYAT if v["surah"] == s_idx and v["ayah"] == int(a_num)), None)
+        
+        if not target:
+            return "<div class='toast-msg toast-error'>❌ عذراً، هذه الآية غير موجودة في قاعدة البيانات. تأكد من الرقم.</div>", gr.update(), gr.update(), 0
+        
+        if len(target["text"]) > 250:
+            return "<div class='toast-msg toast-warn'>⚠️ الآية موجودة ولكنها طويلة جداً (أكثر من 250 حرف)، يرجى اختيار آية أقصر للتسجيل.</div>", gr.update(), gr.update(), 0
+        
+        return "", f"<div class='ayah-text'>{target['text']}</div>", f"### سورة {target['surah_name']} - آية {target['ayah']}", ALL_AYAT.index(target)
+    
+    except ValueError:
+        return "<div class='toast-msg toast-error'>❌ خطأ في إدخال البيانات</div>", gr.update(), gr.update(), 0
 
-with gr.Blocks(title="منصة تلاوة") as demo:
+with gr.Blocks(title="منصة تلاوة", css=custom_css) as demo:
     idx_state = gr.State(random.randint(0, len(ALL_AYAT)-1))
     sess_state = gr.State(0)
 
-    gr.HTML("<div class='header-mini'><h1>مِنَصَّة تِلاوَة</h1></div>")
+    # 1. القسم الافتتاحي (Hero Section)
+    with gr.Column(elem_classes="hero-wrapper"):
+        gr.HTML("""
+            <h1 class="hero-title">مِنَصَّة تِلاوَة</h1>
+            <p class="hero-subtitle">ساهم بصوتك في بناء أكبر قاعدة بيانات مفتوحة للقرآن الكريم</p>
+            <button class="cta-button" onclick="document.getElementById('work-section').scrollIntoView({behavior: 'smooth'})">ساهم الآن 👇</button>
+            <div class="scroll-down">﹀</div>
+        """)
 
-    with gr.Column():
-        stats_display = gr.HTML(f"<div class='stats-bar'><div class='stat-pill'><b>{get_total()}</b><br>تجميعات الأمة</div><div class='stat-pill'><b>0</b><br>مساهماتك الآن</div></div>")
+    # 2. منطقة العمل (Work Section)
+    with gr.Column(elem_id="work-section"):
+        
+        # شريط الإحصائيات
+        stats_display = gr.HTML(create_stats_html(get_total(), 0))
 
-        with gr.Row(variant="panel"):
-            # قسم الآية
-            with gr.Column(scale=2):
-                with gr.Group(elem_classes="ayah-card"):
+        with gr.Row():
+            # اليمين: عرض الآية
+            with gr.Column(scale=3):
+                with gr.Group(elem_classes="ayah-display"):
                     init_v = ALL_AYAT[idx_state.value]
                     info_text = gr.Markdown(f"### سورة {init_v['surah_name']} - آية {init_v['ayah']}")
                     text_html = gr.HTML(f"<div class='ayah-text'>{init_v['text']}</div>")
+                    
+                    with gr.Row():
+                        send_btn = gr.Button("إرسال التسجيل ✅", variant="primary", scale=2)
+                        rnd_btn = gr.Button("تغيير الآية 🎲", scale=1)
                 
-                with gr.Row():
-                    send_btn = gr.Button("إرسال ✅", variant="primary", scale=2)
-                    rnd_btn = gr.Button("🎲", scale=1)
-                
-                status_msg = gr.Markdown("")
+                status_msg = gr.HTML("")
 
-            # قسم التسجيل والبحث
-            with gr.Column(scale=1):
-                with gr.Group(elem_classes="studio-box"):
-                    audio_ui = gr.Audio(sources=["microphone", "upload"], type="filepath", label="🎙️ التسجيل")
+            # اليسار: استوديو التسجيل والتحكم
+            with gr.Column(scale=2):
+                with gr.Group(elem_classes="studio-container"):
+                    gr.HTML("<div class='studio-header'>🎙️ استوديو التسجيل</div>")
+                    audio_ui = gr.Audio(sources=["microphone", "upload"], type="filepath", label=None)
                 
-                with gr.Accordion("⚙️ بحث سريع", open=False):
-                    s_drop = gr.Dropdown(choices=SURAH_NAMES, label="السورة", value=init_v['surah_name'])
-                    a_num = gr.Number(label="الآية", value=init_v['ayah'], precision=0)
-                    go_btn = gr.Button("انتقال")
+                with gr.Accordion("🔍 بحث عن آية محددة", open=False):
+                    s_drop = gr.Dropdown(choices=SURAH_NAMES, label="اسم السورة", value=init_v['surah_name'])
+                    a_num = gr.Number(label="رقم الآية", value=init_v['ayah'], precision=0)
+                    go_btn = gr.Button("انتقال لهذه الآية")
 
-    demo.load(None, None, None, js="""() => { document.body.dir = 'rtl'; }""")
-    
+    # Events
     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, ""), outputs=[text_html, info_text, idx_state, status_msg])
+    
+    go_btn.click(jump_logic, inputs=[s_drop, a_num], outputs=[status_msg, text_html, info_text, idx_state])
+    
     send_btn.click(on_submit, inputs=[audio_ui, idx_state, sess_state], outputs=[status_msg, text_html, info_text, idx_state, sess_state, stats_display])
 
-demo.launch(css=custom_css)
+demo.launch()