from gradio_client import Client

def  get_wav(text,name_model="wasmdashai/vits-ar-sa-huba-v2"):
  client = Client("wasmdashai/wasmdashai-vits-ar-sa-huba")
  result = client.predict(
        text=text,
        name_model=name_model,
        api_name="/predict"
  )
  return result



def t2t(text):
  client_ai = Client("wasmdashai/wasm-speeker-sa")
  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>
    <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">
    <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>
    <h3>مزايا الخدمة:</h3>
    <ul>
      <li>توليد ردود طبيعية وشبيهة بردود الإنسان.</li>
      <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 مع إضافة الـ 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="Wasm-Speeker")

    # إضافة CSS لجعل التبويبات RTL
    gr.HTML("""
    <style>
    .gradio-tabs {
        direction: rtl;
    }
    </style>
    """)

    # تبويبات الصفحات
    with gr.Tabs():
        # صفحة رئيسية
        with gr.TabItem("الصفحة الرئيسية"):
            gr.HTML(home_page())

        # صفحة خدمة Chat AI
        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("ChatBot"):
            gr.HTML(saudi_voice_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( )