Update app.py

app.py

@@ -211,6 +211,7 @@ def t2s(text,name_model):
     #return get_answer_ai(text)
 
 
+
 def home_page():
     return """
     <div class="px-4 py-5 my-5 text-center">
@@ -219,7 +220,9 @@ def home_page():
     <div class="col-lg-6 mx-auto">
       <p class="lead mb-4">
       Wasm-Speeker هو إطار متقدم يعتمد على تقنيات الذكاء الاصطناعي لتوليد الكلام من النصوص.
+
 تعتمد جميع النماذج على بنية VITS، التي تتيح توليد موجات صوتية واقعية بناءً على المدخلات النصية.
+
 النماذج تحتوي على محولات لتحليل النص وتوليد الكلام بناءً على خصائص الصوت المحلية لكل لهجة.
       </p>
       <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
@@ -228,22 +231,11 @@ def home_page():
       </div>
     </div>
   </div>
-    <div style='text-align: right; direction: rtl;'>
-    <h1>مرحباً بك في Wasm-Speeker</h1>
-    <p>Wasm-Speeker هو إطار متقدم يعتمد على تقنيات الذكاء الاصطناعي لتوليد الكلام من النصوص.</p>
-    <p>تعتمد جميع النماذج على بنية VITS، التي تتيح توليد موجات صوتية واقعية بناءً على المدخلات النصية.</p>
-    <p>النماذج تحتوي على محولات لتحليل النص وتوليد الكلام بناءً على خصائص الصوت المحلية لكل لهجة.</p>
-    <h2>مميزات Wasm-Speeker:</h2>
-    <ul>
-      <li>التخصص في اللهجة السعودية.</li>
-      <li>سهولة التدريب.</li>
-      <li>الأداء المتوازن.</li>
-      <li>الاستخدام الفعال للموارد.</li>
-      <li>الشعبية والانتشار.</li>
-      <li>حجم النموذج: 36.3 مليون باراميتر.</li>
-    </ul>
-    </div>
-    <div class="container col-xxl-8 px-4 py-5">
+    
+    
+    """
+def  footer():
+  body="""<div class="container col-xxl-8 px-4 py-5">
     <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
       <div class="col-10 col-sm-8 col-lg-6">
         <img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
@@ -282,8 +274,9 @@ def home_page():
         </div>
       </div>
     </div>
-  </div>
-    """
+  </div>"""
+  return body
+    
 import gradio as gr
 import os
 import plotly.express as px
@@ -362,6 +355,35 @@ with gr.Blocks() as demo:  # Use gr.Blocks to wrap the entire interface
    
     with gr.Tab("الصفحة الرئيسية"):
             gr.HTML(home_page())
+            gr.Markdown("## مميزات Wasm-Speeker")
+
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("### 🛠 التخصص في اللهجة السعودية")
+                    gr.Markdown("Wasm-Speeker متخصص في إنتاج أصوات واقعية للهجة السعودية.")
+
+                with gr.Column():
+                    gr.Markdown("### 🎯 سهولة التدريب")
+                    gr.Markdown("يتميز Wasm-Speeker بسهولة التدريب وقابلية التوسع.")
+
+                with gr.Column():
+                    gr.Markdown("### ⚖️ الأداء المتوازن")
+                    gr.Markdown("يوفر أداءً متوازناً يجمع بين الجودة والسرعة.")
+
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("### ⚡️ الاستخدام الفعال للموارد")
+                    gr.Markdown("تم تصميمه لاستخدام الموارد بفعالية وكفاءة.")
+
+                with gr.Column():
+                    gr.Markdown("### 🌍 الشعبية والانتشار")
+                    gr.Markdown("نموذج واسع الانتشار بين المطورين في تطبيقات مختلفة.")
+
+                with gr.Column():
+                    gr.Markdown("### 💾 حجم النموذج")
+                    gr.Markdown("يحتوي النموذج على 36.3 مليون باراميتر.")
+
+            gr.HTML(footer())
     with gr.Tab("ChatBot "):
         chatbot = gr.Chatbot(
         elem_id="chatbot",