Update app.py

app.py

@@ -1,8 +1,64 @@
+from gradio_client import Client
+client = Client("wasmdashai/wasmdashai-vits-ar-sa-huba")
+def  get_wav(text,name_model="wasmdashai/vits-ar-sa-huba-v2"):
+
+  result = client.predict(
+        text=text,
+        name_model=name_model,
+        api_name="/predict"
+  )
+  return result
+
+
+client_ai = Client("wasmdashai/wasm-speeker-sa")
+def t2t(text):
+  result = client_ai.predict(
+        text=text,
+        api_name="/t2t"
+  )
+  return result
+
+def   modelspeech(text,name_model):
+
+
+
+
+     return  get_wav(text,name_model)
+
+def   modelspeech_ai(text,name_model):
+
+
+     text=t2t(text)
+
+
+
+     return  modelspeech(text,name_model)
+
+
+
 import gradio as gr
 
 # دالة الصفحة الرئيسية
 def home_page():
     return """
+    <div class="px-4 py-5 my-5 text-center">
+    <img class="d-block mx-auto mb-4" src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
+    <h1 class="display-5 fw-bold">مرحباً بك في Wasm-Speeker</h1>
+    <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">
+        <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Primary button</button>
+        <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
+      </div>
+    </div>
+  </div>
+    <div style='text-align: right; direction: rtl;'>
     <h1>مرحباً بك في Wasm-Speeker</h1>
     <p>Wasm-Speeker هو إطار متقدم يعتمد على تقنيات الذكاء الاصطناعي لتوليد الكلام من النصوص.</p>
     <p>تعتمد جميع النماذج على بنية VITS، التي تتيح توليد موجات صوتية واقعية بناءً على المدخلات النصية.</p>
@@ -16,11 +72,53 @@ def home_page():
       <li>الشعبية والانتشار.</li>
       <li>حجم النموذج: 36.3 مليون باراميتر.</li>
     </ul>
+    </div>
+    <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">
+      </div>
+      <div class="col-lg-6">
+        <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
+        <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+        <div class="d-grid gap-2 d-md-flex justify-content-md-start">
+          <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
+          <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
+      <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
+        <h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1>
+        <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+        <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
+          <button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button>
+          <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
+        </div>
+      </div>
+      <div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg">
+          <img class="rounded-lg-3" src="bootstrap-docs.png" alt="" width="720">
+      </div>
+    </div>
+   <div class="bg-dark text-secondary px-4 py-5 text-center">
+    <div >
+      <h1 class="display-5 fw-bold text-white">Dark mode hero</h1>
+      <div class="col-lg-6 mx-auto">
+        <p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
+          <button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button>
+          <button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button>
+        </div>
+      </div>
+    </div>
+  </div>
     """
 
 # دالة صفحة "Chat AI"
 def chat_ai_service():
     return """
+    <div style='text-align: right; direction: rtl;'>
     <h2>خدمة Chat AI</h2>
     <p>خدمة تفاعلية تستخدم تقنيات الذكاء الاصطناعي المتقدمة لتوليد ردود طبيعية وسلسة على الرسائل.</p>
     <p>تتميز هذه الخدمة بالقدرة على فهم اللهجة السعودية واستخدامها في الردود.</p>
@@ -30,48 +128,108 @@ def chat_ai_service():
       <li>التعامل مع النص والصوت.</li>
       <li>تعدد الاستخدامات: خدمة العملاء، الترفيه، التعليم، التسويق.</li>
     </ul>
+    </div>
     """
 
 # دالة صفحة "خدمات الرد بالصوت السعودي"
 def saudi_voice_service():
     return """
+    <div style='text-align: right; direction: rtl;'>
     <h2>خدمة الرد بالصوت السعودي</h2>
     <p>توليد أصوات واقعية باللهجة السعودية.</p>
     <p>الخدمة مثالية لتطبيقات مثل المساعدات الصوتية أو الردود التفاعلية بالصوت.</p>
+    </div>
     """
 
 # دالة صفحة "تحويل النص إلى اللهجة السعودية"
 def text_to_najdi_service():
     return """
+    <div style='text-align: right; direction: rtl;'>
     <h2>تحويل النص من العربية إلى اللهجة السعودية</h2>
     <p>هذه الخدمة تقوم بتحويل النصوص القياسية المكتوبة باللغة العربية إلى اللهجة السعودية، مما يجعلها مثالية لتطبيقات مثل المساعدات الصوتية أو الأنظمة التعليمية.</p>
+    </div>
     """
+choices=[
+                                "wasmdashai/vits-ar-sa-huba",
+                                "wasmdashai/vits-ar-sa-ms",
+                                "wasmdashai/vtk",
+                                "wasmdashai/mak",
+                                "wasmdashai/vits-ar-sa-huba-v1",
+                                 "wasmdashai/vits-ar-sa-huba-v2",
+
+                                 "wasmdashai/vits-ar-sa-A",
+
 
-# إنشاء واجهة Gradio
+                            ]
+# إنشاء واجهة Gradio مع إضافة الـ Bootstrap و CSS مخصص لتبويبات RTL
 with gr.Blocks() as demo:
+    # إضافة Bootstrap في الـ head
+    gr.HTML("""
+    <head>
+        <!-- Required meta tags -->
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- Bootstrap CSS -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+
+        <title>Wasm-Speeker</title>
+    </head>
+    """)
+
     # العنوان الرئيسي
     gr.Markdown("# Wasm-Speeker: إطار الذكاء الاصطناعي لتوليد الكلام")
-    
+
     # عرض الصورة الترحيبية
-    gr.Image("9588e6d4-9959-4cfc-9697-fc9b996fcd97.jpeg", label="صورة ترحيبية")
+    gr.Image("9588e6d4-9959-4cfc-9697-fc9b996fcd97.jpeg", label="Wasm-Speeker")
+
+    # إضافة CSS لجعل التبويبات RTL
+    gr.HTML("""
+    <style>
+    .gradio-tabs {
+        direction: rtl;
+    }
+    </style>
+    """)
 
     # تبويبات الصفحات
     with gr.Tabs():
         # صفحة رئيسية
         with gr.TabItem("الصفحة الرئيسية"):
-            gr.HTML(home_page)
+            gr.HTML(home_page())
 
         # صفحة خدمة Chat AI
-        with gr.TabItem("خدمة Chat AI"):
-            gr.HTML(chat_ai_service)
+        with gr.TabItem("Chat AI"):
+            gr.HTML(chat_ai_service())
+            text_input = gr.Textbox(label="الرسالة")
+            model_choices = gr.Dropdown(
+                            choices=choices,
+                            label="اختر النموذج",
+                            value="wasmdashai/vits-ar-sa-huba-v2",
+                        )
+            btn_submit=gr.Button("تحويل النص")
+            audio_output = gr.Audio(label="القصة")
+
+            btn_submit.click(modelspeech_ai, inputs=[text_input,model_choices], outputs=[audio_output])
+
+
 
         # صفحة خدمة الرد بالصوت السعودي
-        with gr.TabItem("خدمة الرد بالصوت السعودي"):
-            gr.HTML(saudi_voice_service)
+        with gr.TabItem("ChatBot"):
+            gr.HTML(saudi_voice_service())
 
         # صفحة خدمة تحويل النص إلى اللهجة السعودية
-        with gr.TabItem("تحويل النص إلى اللهجة السعودية"):
-            gr.HTML(text_to_najdi_service)
+        with gr.TabItem("T2T"):
+            gr.HTML(text_to_najdi_service())
+            text_input = gr.Textbox(label="الرسالة")
+
+            btn_submit=gr.Button("تحويل النص")
+            text_output = gr.Textbox(label="القصة")
+
+
+
+            btn_submit.click(t2t, inputs=[text_input], outputs=[text_output])
 
 # تشغيل الموقع
-demo.launch()
+demo.launch( )