Update app.py

app.py

@@ -5,396 +5,137 @@ import random
 import os
 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;500;600;700&family=Scheherazade+New:wght@400;700&display=swap');
+@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-color: #1a5f7a;
-    --secondary-color: #57c5b6;
-    --accent-color: #159895;
-    --gold-color: #d4af37;
-    --light-bg: #f8f9fa;
-    --dark-bg: #1a252f;
-    --success-color: #28a745;
-    --warning-color: #ffc107;
+    --primary: #064635;
+    --secondary: #519259;
+    --accent: #F4BB44;
+    --text-dark: #2C3333;
+    --bg-light: #F0F2F5;
 }
 
-* {
-    font-family: 'Reem Kufi', sans-serif;
-}
-
-body {
-    direction: rtl;
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-    min-height: 100vh;
-    margin: 0;
-    padding: 0;
+body { 
+    direction: rtl; 
+    background-color: var(--bg-light); 
 }
 
+/* تحسين شكل الحاوية الرئيسية */
 .gradio-container {
-    max-width: 1400px !important;
-    margin: 0 auto !important;
-    padding: 20px !important;
+    font-family: 'Reem Kufi', sans-serif !important;
 }
 
-/* الهيدر */
+/* الهيدر الأنيق */
 #header-section {
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
-    min-height: 40vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    background: linear-gradient(135deg, var(--primary) 0%, #0a6b51 100%);
+    padding: 50px 20px;
+    border-radius: 0 0 50px 50px;
     text-align: center;
-    padding: 40px 20px;
-    border-radius: 0 0 60px 60px;
-    position: relative;
-    overflow: hidden;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-    margin-bottom: 30px;
-}
-
-#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: 3.5rem;
     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.5rem;
-    color: var(--gold-color);
-    margin-bottom: 20px;
-    position: relative;
-    z-index: 1;
-    font-weight: 700;
-}
-
-.logo-container {
-    background: white;
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 20px;
-    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
-    position: relative;
-    z-index: 1;
-    border: 5px solid var(--gold-color);
+    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+    margin-bottom: 30px;
 }
 
-.logo-text {
-    font-family: 'Reem Kufi', sans-serif;
-    font-size: 2.2rem;
-    color: var(--primary-color);
+.main-title { 
+    font-size: 3rem !important; 
+    margin-bottom: 10px; 
     font-weight: 700;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
 }
 
-/* البطاقات */
-.card-box {
+/* بطاقة الآية */
+.ayah-card {
     background: white;
-    border-radius: 20px;
-    padding: 25px;
-    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
-    margin-bottom: 20px;
-    border-top: 6px 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: 4px;
-    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
-}
-
-/* نص الآية */
-.ayah-container {
-    background: linear-gradient(135deg, #fff8e1 0%, #fef9e7 100%);
-    border-radius: 15px;
-    padding: 30px;
-    margin: 15px 0;
-    border-right: 6px solid var(--gold-color);
-    position: relative;
-}
-
-.ayah-container::before {
-    content: "﷽";
-    position: absolute;
-    top: 10px;
-    left: 20px;
-    font-size: 1.8rem;
-    color: rgba(0,0,0,0.1);
-    font-family: 'Amiri', serif;
-}
-
-.ayah-text {
-    font-family: 'Amiri', serif;
-    font-size: 2.4rem;
-    line-height: 1.8;
-    color: #2c3e50;
-    text-align: center;
-    font-weight: 700;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
-    padding: 15px;
-}
-
-.ayah-info {
-    font-family: 'Reem Kufi', sans-serif;
-    font-size: 1.3rem;
-    color: var(--primary-color);
-    text-align: center;
-    margin-top: 15px;
-    padding: 12px;
-    background: rgba(87, 197, 182, 0.1);
-    border-radius: 10px;
-    border-right: 3px solid var(--secondary-color);
-}
-
-/* الأزرار */
-button {
-    font-family: 'Reem Kufi', sans-serif !important;
-    font-size: 1rem !important;
-    border-radius: 10px !important;
-    padding: 12px 25px !important;
-    transition: all 0.3s ease !important;
-    border: none !important;
-    margin: 5px !important;
-}
-
-button[data-variant="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[data-variant="primary"]:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 8px 20px rgba(26, 95, 122, 0.4) !important;
-}
-
-button[data-variant="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: 25px;
-    color: white;
-    margin-top: 20px;
-}
-
-.recording-title {
-    color: var(--gold-color);
-    font-size: 1.5rem;
-    margin-bottom: 15px;
+    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;
 }
 
-/* الإحصائيات */
-.stats-card {
-    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-    border-radius: 15px;
+.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;
-    text-align: center;
-    border: 2px solid var(--secondary-color);
-    margin: 15px 0;
-}
-
-.stats-number {
-    font-size: 2.5rem;
-    color: var(--primary-color);
-    font-weight: 700;
-    margin: 10px 0;
 }
 
-.stats-label {
-    font-size: 1.1rem;
-    color: #666;
+/* الأزرار */
+.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: 15px 0;
-    text-align: center;
+    margin: 10px 0;
     font-weight: bold;
-    font-size: 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: 4px solid var(--success-color);
-}
-
-.alert-error {
-    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
-    color: #721c24;
-    border-right: 4px solid #dc3545;
-}
-
-/* البحث السريع */
-.search-section {
-    background: white;
-    border-radius: 15px;
-    padding: 20px;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
-    margin-top: 15px;
-}
-
-/* تخصيص العناصر */
-.gr-box {
-    border-radius: 15px !important;
-    border: 2px solid #e9ecef !important;
-}
-
-.gr-input {
-    border-radius: 10px !important;
-}
-
-/* تذييل الصفحة */
-footer {
-    text-align: center;
-    padding: 25px;
-    margin-top: 40px;
-    background: var(--dark-bg);
-    color: white;
-    border-radius: 30px 30px 0 0;
-}
-
-.footer-text {
-    color: var(--gold-color);
-    font-size: 1rem;
-}
-
-/* تأثيرات إضافية */
-.pulse {
-    animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.03); }
-    100% { transform: scale(1); }
 }
+.alert-success { background: #d4edda; color: #155724; border-right: 5px solid #28a745; }
+.alert-error { background: #f8d7da; color: #721c24; border-right: 5px solid #dc3545; }
 
-.glow {
-    text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
-}
-
-/* تعديلات Gradio */
-.gr-form {
-    background: transparent !important;
-}
-
-.gr-button {
-    cursor: pointer !important;
-}
-
-/* تعديلات الـ Audio */
-.gr-audio {
-    background: rgba(255, 255, 255, 0.9) !important;
-    border-radius: 10px !important;
-    padding: 10px !important;
-}
-
-/* تحسين الـ Dropdown */
-.gr-dropdown {
-    border-radius: 10px !important;
-}
-
-/* تحسين الـ Number */
-.gr-number {
-    border-radius: 10px !important;
-}
+/* تخصيص المسافات */
+.gap-20 { gap: 20px; }
 """
 
+# --- منطق البيانات ---
 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 = []
-    # لتحسين السرعة، سنحمل عينة من السور أولاً
-    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]})
-        except: 
-            continue
+    # استخدام الـ 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
 
 ALL_AYAT = load_quran_data()
 
-def get_stats_html(user_session_count):
+# --- الوظائف المساعدة ---
+def get_stats_html(count):
     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 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>
     """
 
 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()
+        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]
-    ext = audio.split('.')[-1] if '.' in audio else "wav"
-    file_name = f"s{v['surah']}_a{v['ayah']}_{unique_id}.{ext}"
+    file_name = f"s{v['surah']}_a{v['ayah']}_{unique_id}.wav"
     
     try:
         api.upload_file(
@@ -405,175 +146,76 @@ def on_submit(audio, current_idx, session_count):
             token=HF_TOKEN
         )
         new_sess = session_count + 1
-        next_idx = (current_idx + 1) % len(ALL_AYAT)
+        next_idx = random.randint(0, len(ALL_AYAT)-1) # الانتقال لآية عشوائية بعد النجاح
         nv = ALL_AYAT[next_idx]
         
-        success_msg = f"""
-        <div class='alert-box alert-success'>
-            <div style="font-size: 1.2rem; 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)
+        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-error'>❌ فشل الرفع: {str(e)}</div>", gr.update(), gr.update(), current_idx, session_count, gr.update()
 
-def jump_logic(s_name, a_num):
+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)), 0)
-        target = ALL_AYAT[t_idx]
-        return "", f"<div class='ayah-text'>{target['text']}</div>", f"### سورة {target['surah_name']} - آية {target['ayah']}", t_idx
+        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
+        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="مِنَصَّة التِّلَاوَة - Quran Recitation Platform") as demo:
+# --- بناء الواجهة ---
+with gr.Blocks(css=custom_css, title="منصة تلاوة") as demo:
     idx_state = gr.State(random.randint(0, len(ALL_AYAT)-1))
     sess_state = gr.State(0)
-    
-    # الهيدر الرئيسي
+
+    # الهيدر
     gr.HTML("""
         <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>
+            <h1 class="main-title">مِنَصَّة التِّلَاوَة</h1>
+            <p style="font-size: 1.2rem; opacity: 0.9;">ساهم في بناء أول قاعدة بيانات صوتية مفتوحة المصدر للقرآن الكريم</p>
         </div>
     """)
-    
-    with gr.Column():
-        # قسم الإحصائيات
-        with gr.Row():
-            with gr.Column(scale=1):
-                stats_display = gr.HTML(get_stats_html(0))
-            with gr.Column(scale=2):
-                gr.HTML(f"""
-                    <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;">{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=2):
-                with gr.Group():
-                    gr.HTML("""
-                        <div style="text-align: center; margin-bottom: 15px;">
-                            <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():
-                        with gr.Column():
-                            send_btn = gr.Button("🎤 إرسال التلاوة", variant="primary")
-                        with gr.Column():
-                            rnd_btn = gr.Button("🔄 آية عشوائية", variant="secondary")
-                    
-                    status_msg = gr.HTML("")
 
-            with gr.Column(scale=1):
-                with gr.Group():
-                    gr.HTML("""
-                        <div class="recording-section">
-                            <h3 class="recording-title">🎙️ استوديو التسجيل</h3>
-                            <p style="text-align: center; opacity: 0.9; margin-bottom: 15px;">
-                                سجل تلاوتك للآية الحالية بجودة عالية
-                            </p>
-                        </div>
-                    """)
-                    # إزالة المعلمات غير المدعومة في Gradio
-                    audio_ui = gr.Audio(
-                        sources=["microphone"], 
-                        type="filepath", 
-                        label=None
-                    )
+    with gr.Row(elem_classes="gap-20"):
+        # العمود الأيمن: العرض
+        with gr.Column(scale=3):
+            with gr.Div(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.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")
+                with gr.Row():
+                    send_btn = gr.Button("🎤 إرسال التلاوة الآن", variant="primary", elem_classes="custom-btn")
+                    rnd_btn = gr.Button("🔄 آية أخرى", variant="secondary", elem_classes="custom-btn")
+
+        # العمود الأيسر: التحكم والإحصائيات
+        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):
+                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("""
-        <footer>
-            <div class="footer-text">مِنَصَّة التِّلَاوَة - Quran Recitation Platform</div>
-            <p style="margin-top: 10px; opacity: 0.8; font-size: 0.95rem;">
-                مشروع مفتوح المصدر يساهم في خدمة القرآن الكريم وتقنيات الذكاء الاصطناعي
-            </p>
-            <div style="margin-top: 20px; font-size: 0.85rem; opacity: 0.7;">
-                © 2024 جميع الحقوق محفوظة - للمساهمة تواصل معنا
-            </div>
-        </footer>
+        <div style="text-align: center; margin-top: 50px; padding: 20px; color: #666; border-top: 1px solid #ddd;">
+            <p>© 2026 مشروع تلاوة - صدقة جارية لكل من ساهم بقراءته</p>
+        </div>
     """)
 
-    # التعامل مع الأحداث
-    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]
-    )
+    # الأحداث
+    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])
 
-# تشغيل التطبيق
 if __name__ == "__main__":
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        share=False,
-        css=custom_css
-    )
+    demo.launch()