Fix examples and migrate UI to blocks

.gitignore

@@ -1,2 +1,2 @@
-.venv
 __pycache__
+venv

app.py

@@ -1,32 +1,28 @@
-import tempfile
 import gradio as gr
 import os
+from AinaTheme import AinaGradioTheme
 from espeak_phonemizer import Phonemizer
+from dotenv import load_dotenv
 
-MAX_TXT_LEN = 325
+load_dotenv()
 
-#fonemitzador = Phonemizer("ca")
+MAX_INPUT_TEXT_LEN = int(os.environ.get("MAX_INPUT_TEXT_LEN", default=325))
 
-request_count = 0
+#fonemitzador = Phonemizer("ca")
 
 def phonemiser(text, dialect):
     dialects = {"Central": "ca", "Valencian": "ca-va", "North-West": "ca-nw"}
     dialect = dialects[dialect] #Define dialect from espeak-ng-data/lang/roa/ca*
     fonemitzador = Phonemizer(dialect) #Set correct dialect for the phonemiser
-    if len(text) > MAX_TXT_LEN:
-        text = text[:MAX_TXT_LEN]
-        print(f"Input text was cutoff since it went over the {MAX_TXT_LEN} character limit.")
-    print(text)
 
     # synthesize
 
     fonemes = fonemitzador.phonemize(text, keep_clause_breakers=True)
 
-    global request_count
-    request_count += 1
-    print(f"Requests: {request_count}")
     return fonemes
 
+
+title = "Comparativa de síntesi lliure en català️"
 description="""
 Transcripció fonètica en català
 Transcipció fonètica per a diferents dialectes del català mitjançant eSpeak.
@@ -34,34 +30,75 @@ Phonetic transcription for different dialects of Catalan
 using eSpeak.
 repo: https://github.com/projecte-aina/espeak-ng/tree/dev-ca 
 """
-article= ""
-
-iface = gr.Interface(
-    fn=phonemiser,
-    inputs=[
-        gr.Textbox(
-            label="Text",
-            value="Les coses importants són les que no ho semblen.",
-        ),
-        gr.Dropdown(label="Dialect", choices=["Central", "Valencian", "North-West"],
-        value="Central",
-        )
-    ],
-    outputs=[
-        gr.Markdown(label="Fonemes")
-    ],
-
-    title="Comparativa de síntesi lliure en català️",
-    description=description,
-    article=article,
-    allow_flagging="never",
-    layout="vertical",
-    live=False,
-    examples=[
-        ["Les coses importants són les que no ho semblen.", "ca", "ca"],
-        ["Les coses importants són les que no ho semblen.", "ca-va", "ca-va"],
-        ["Les coses importants són les que no ho semblen.", "ca-nw", "ca-nw"],
-        ["Ses coses importants són ses que no ho semblen.", "ca-ba", "ca-ba"]
-    ]
-)   
-iface.launch(server_name="0.0.0.0", server_port=7860)
+
+def submit_input(input_, dialect):
+    output = None
+    if input_ is not None and len(input_) < MAX_INPUT_TEXT_LEN:
+        output = phonemiser(input_, dialect)
+    else:
+        gr.Warning(f"Your text exceeds the {MAX_INPUT_TEXT_LEN}-character limit.")
+    return output
+
+def change_interactive(text):
+    input_state = text
+    if input_state.strip() != "":
+        return gr.update(interactive = True)
+    else:
+        return gr.update(interactive = False)
+def clean(): 
+    return (
+        None, 
+        None,
+    )
+
+
+
+with gr.Blocks(**AinaGradioTheme().get_kwargs()) as app:
+        
+        gr.Markdown(f"<h1 style='text-align: center; margin-bottom: 1rem'>{title}</h1>")
+
+        gr.Markdown(description)
+
+        with gr.Row(equal_height=False):
+    
+            with gr.Column(variant='panel'):
+                input_ = gr.Textbox(
+                    label="Text",
+                    value="Les coses importants són les que no ho semblen.",
+                    lines=4
+                )
+
+                dialect = gr.Dropdown(label="Dialect", choices=["Central", "Valencian", "North-West"], value="Central")
+                with gr.Row():
+                    clear_btn = gr.Button(
+                        "Clean", 
+                    )
+                    submit_btn = gr.Button(
+                        "Submit", 
+                        variant="primary", 
+                    )
+            with gr.Column(variant='panel'):
+                output = gr.Textbox( 
+                    label="Output", 
+                    interactive=False, 
+                    show_copy_button=True
+                )
+        gr.Examples(
+            label="Examples",
+            examples=[
+                ["Les coses importants són les que no ho semblen.", "Central"],
+                ["Les coses importants són les que no ho semblen.", "Valencian",],
+                ["Les coses importants són les que no ho semblen.", "North-West",],
+            ],
+            inputs=[input_, dialect],
+            outputs=output,
+            fn=submit_input)
+
+        for button in [submit_btn, clear_btn]:
+            input_.change(fn=change_interactive, inputs=[input_], outputs=button)
+
+        clear_btn.click(fn=clean, inputs=[], outputs=[input_, output] , queue=False)
+        submit_btn.click(fn=submit_input, inputs=[input_, dialect], outputs=output)
+        
+app.queue(concurrency_count=2, api_open=False)
+app.launch(show_api=False)

requirements.txt

@@ -1,2 +1,4 @@
-gradio
-espeak-phonemizer>=1.1.0,<2 
+git+https://gitlab.bsc.es/projecte-aina/aina-gradio-theme.git@1.3.6
+gradio==3.44.2
+espeak-phonemizer>=1.1.0,<2 
+python-dotenv==1.0.0