Update app.py

app.py

@@ -22,20 +22,21 @@ body { direction: rtl; background-color: #f9f9f9; }
 
 .hero-header {
     background: linear-gradient(135deg, var(--dark-green) 0%, #0a6b51 100%);
-    padding: 30px 20px;
-    border-radius: 0 0 40px 40px;
+    padding: 25px 20px;
+    border-radius: 0 0 30px 30px;
     text-align: center;
     color: white;
     box-shadow: 0 4px 15px rgba(0,0,0,0.1);
 }
-.real-count { font-size: 3.5rem; color: var(--gold); font-weight: bold; line-height: 1; }
+.real-count { font-size: 3rem; color: var(--gold); font-weight: bold; line-height: 1; margin-top: 5px; }
 .instruction-box {
-    background: #fff5e6;
-    border-right: 5px solid #ff9800;
-    padding: 15px;
+    background: #fff9e6;
+    border-right: 5px solid #ffa000;
+    padding: 12px 20px;
     border-radius: 10px;
     margin: 15px 0;
     font-size: 0.95rem;
+    line-height: 1.6;
 }
 .ayah-card {
     background: white;
@@ -43,107 +44,141 @@ body { direction: rtl; background-color: #f9f9f9; }
     padding: 30px;
     box-shadow: 0 10px 25px rgba(0,0,0,0.05);
     border: 1px solid #eee;
+    text-align: center;
 }
 .ayah-text {
     font-family: 'Amiri', serif !important;
-    font-size: 2.4rem !important;
+    font-size: 2.3rem !important;
     color: var(--dark-green);
-    line-height: 1.8 !important;
-    text-align: center;
+    line-height: 1.7 !important;
+    margin: 15px 0;
 }
 """
 
 # --- الوظائف المنطقية ---
 def get_real_total():
+    """جلب عدد الملفات الحقيقي من Hugging Face"""
     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/")])
-    except: return "..."
+        count = len([f for f in files if f.startswith("data/")])
+        return count
+    except: return "جاري التحميل..."
 
 INITIAL_TOTAL = get_real_total()
 
+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": re.sub(r'<[^>]*>', '', v.get("text_ar", "")).strip(), "surah_name": SURAH_NAMES[s_idx-1]} for v in res["verses"]]
+        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 []
 
+# تحميل البيانات بسرعة باستخدام التوازي
 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 jump_to_ayah(s_name, a_num):
-    for i, v in enumerate(ALL_AYAT):
-        if v['surah_name'] == s_name and v['ayah'] == int(a_num):
-            return "", f"<div class='ayah-text'>{v['text']}</div>", f"### {v['surah_name']} | آية {v['ayah']}", i
-    return "⚠️ لم يتم العثور على الآية", gr.update(), gr.update(), gr.update()
+    """منطق البحث عن آية محددة"""
+    try:
+        target_num = int(a_num)
+        for i, v in enumerate(ALL_AYAT):
+            if v['surah_name'] == s_name and v['ayah'] == target_num:
+                return "", f"<div class='ayah-text'>{v['text']}</div>", f"### {v['surah_name']} | آية {v['ayah']}", i
+        return "⚠️ الآية غير موجودة في هذه السورة", gr.update(), gr.update(), gr.update()
+    except:
+        return "⚠️ يرجى إدخال رقم آية صحيح", gr.update(), gr.update(), gr.update()
 
 def on_submit(audio, current_idx):
-    if not audio: return "⚠️ يرجى التسجيل أولاً", gr.update(), gr.update(), current_idx
+    if not audio: 
+        return "⚠️ يرجى تسجيل الصوت أولاً", gr.update(), gr.update(), current_idx
+    
     v = ALL_AYAT[current_idx]
     try:
-        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)
+        # رفع الملف
+        file_name = f"data/s{v['surah']}_a{v['ayah']}_{uuid.uuid4().hex[:6]}.wav"
+        api.upload_file(
+            path_or_fileobj=audio, 
+            path_in_repo=file_name, 
+            repo_id=REPO_ID, 
+            repo_type="dataset", 
+            token=HF_TOKEN
+        )
+        # اختيار آية عشوائية تالية
         next_idx = random.randint(0, len(ALL_AYAT)-1)
         nv = ALL_AYAT[next_idx]
-        return "✅ تم الحفظ بنجاح", f"<div class='ayah-text'>{nv['text']}</div>", f"### {nv['surah_name']} | آية {nv['ayah']}", next_idx
-    except Exception as e: return f"❌ خطأ: {str(e)}", gr.update(), gr.update(), current_idx
+        return "✅ تم الحفظ بنجاح! جزاك الله خيراً", f"<div class='ayah-text'>{nv['text']}</div>", f"### {nv['surah_name']} | آية {nv['ayah']}", next_idx
+    except Exception as e:
+        return f"❌ خطأ في الرفع: {str(e)}", gr.update(), gr.update(), current_idx
 
-# --- الواجهة ---
-with gr.Blocks(title="مشروع تصحيح التلاوة بالذكاء الاصطناعي") as demo:
+# --- بناء الواجهة ---
+with gr.Blocks(title="مشروع الذكاء الاصطناعي لتصحيح التلاوة") as demo:
     idx_state = gr.State(random.randint(0, len(ALL_AYAT)-1))
 
-    # الهيدر المدمج
+    # الجزء العلوي (Hero)
     gr.HTML(f"""
         <div class="hero-header">
-            <h1 style="margin:0; font-size: 2rem;">مِنَصَّة التِّلَاوَة</h1>
-            <p style="margin:5px 0 15px 0; opacity: 0.9;">مشروع بناء نموذج ذكاء اصطناعي لتصحيح التلاوة والتجويد</p>
-            <div style="background: rgba(0,0,0,0.2); padding: 10px; border-radius: 15px; display: inline-block;">
-                <span>مساهمات الأمة الحقيقية:</span>
+            <h1 style="margin:0; font-size: 1.8rem;">مِنَصَّة التِّلَاوَة</h1>
+            <p style="margin:5px 0 10px 0; opacity: 0.85; font-size: 1rem;">مشروع تقني لبناء نموذج ذكاء اصطناعي لتصحيح التجويد وتلاوة القرآن</p>
+            <div style="background: rgba(255,255,255,0.1); padding: 8px 20px; border-radius: 12px; display: inline-block; border: 1px solid var(--gold);">
+                <span style="font-size: 0.9rem;">إجمالي المساهمات الحقيقية:</span>
                 <div class="real-count">{INITIAL_TOTAL}</div>
             </div>
         </div>
     """)
 
-    with gr.Column(elem_classes="gradio-container"):
-        # تنبيه هام
+    with gr.Column(elem_id="main-container"):
+        # صندوق التعليمات
         gr.HTML("""
             <div class="instruction-box">
-                <strong>⚠️ تنبيه هام للجودة:</strong>
-                يرجى قراءة الآية بشكل مستمر وبنفس واحد قدر الإمكان. 
-                <span style="color: #d32f2f;">يُمنع الوقف ثم البدء من مكان سابق في نفس التسجيل</span> لأن ذلك يفسد تدريب نموذج الذكاء الاصطناعي.
+                <strong>💡 تنبيه للجودة:</strong>
+                نحن نبني نموذجاً يفهم التلاوة الصحيحة، لذا يرجى عدم <b>"الوقف ثم إعادة الكلمات"</b> في نفس التسجيل. 
+                اقرأ الآية بنَفَس واحد أو قف وقوفاً صحيحاً دون تكرار كلمات سابقة.
             </div>
         """)
 
         with gr.Row():
+            # قسم عرض الآية
             with gr.Column(scale=2):
                 with gr.Column(elem_classes="ayah-card"):
                     v_init = ALL_AYAT[idx_state.value]
                     info_text = gr.Markdown(f"### {v_init['surah_name']} | آية {v_init['ayah']}")
-                    text_html = gr.HTML(f<div class='ayah-text'>{v_init['text']}</div>")
+                    text_html = gr.HTML(f"<div class='ayah-text'>{v_init['text']}</div>")
                     status_msg = gr.Markdown("")
                     
                     with gr.Row():
                         send_btn = gr.Button("🎤 إرسال المساهمة", variant="primary")
-                        rnd_btn = gr.Button("🔄 آية أخرى", variant="secondary")
+                        rnd_btn = gr.Button("🔄 آية عشوائية", variant="secondary")
 
+            # قسم التسجيل والبحث
             with gr.Column(scale=1):
-                gr.Markdown("### 🎙️ استوديو التسجيل")
-                audio_ui = gr.Audio(sources=["microphone"], type="filepath", label=None)
-                
                 with gr.Group():
-                    gr.Markdown("### 🔍 الانتقال السريع")
-                    s_drop = gr.Dropdown(choices=SURAH_NAMES, label="اختر السورة", value="الفاتحة")
+                    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="اسم السورة", value="الفاتحة")
                     a_num = gr.Number(label="رقم الآية", value=1, precision=0)
-                    go_btn = gr.Button("انتقل للآية")
+                    go_btn = gr.Button("انتقل الآن", variant="secondary")
+
+    # --- إدارة الأحداث ---
+    
+    # آية عشوائية
+    def get_next_random():
+        i = random.randint(0, len(ALL_AYAT)-1)
+        v = ALL_AYAT[i]
+        return f"<div class='ayah-text'>{v['text']}</div>", f"### {v['surah_name']} | آية {v['ayah']}", i, ""
 
-    # الأحداث
     rnd_btn.click(
-        lambda: (v:=ALL_AYAT[i:=random.randint(0,len(ALL_AYAT)-1)]) and (f"<div class='ayah-text'>{v['text']}</div>", f"### {v['surah_name']} | آية {v['ayah']}", i, ""),
+        get_next_random,
         outputs=[text_html, info_text, idx_state, status_msg],
         show_progress="hidden"
     )
 
+    # الانتقال لآية محددة
     go_btn.click(
         jump_to_ayah,
         inputs=[s_drop, a_num],
@@ -151,6 +186,7 @@ with gr.Blocks(title="مشروع تصحيح التلاوة بالذكاء الا
         show_progress="hidden"
     )
 
+    # الإرسال
     send_btn.click(
         on_submit,
         inputs=[audio_ui, idx_state],
@@ -158,5 +194,6 @@ with gr.Blocks(title="مشروع تصحيح التلاوة بالذكاء الا
         show_progress="minimal"
     )
 
+# تشغيل التطبيق
 if __name__ == "__main__":
     demo.launch(css=custom_css)