Update layout, as in "Create a Huggingface demo page #39" @gongouveia (#7)

- Update layout, as in "Create a Huggingface demo page #39"

@gongouveia

(86e09d9a3ce7b70162967ec410bd20839e77e41a)


Co-authored-by: Gouveia <gongouveia@users.noreply.huggingface.co>

app.py

@@ -20,8 +20,8 @@ You can also use 🌬️💬📝WhisperSpeech by cloning this space. 🧬🔬
 We're **celebrating the release of the whisperspeech** at [the LAION community, if you love open source ai learn more here : https://laion.ai/](https://laion.ai/) big thanks to the folks at huggingface for the community grant 🤗
 
 ### How to Use
-Input text with tahe language identifiers provided to create a multilingual speech. Optionally you can add an audiosample to make a voice print.Scroll down and try the api <3 Gradio.
-This space runs on ZeroGPU, so **you need to be patient** while you acquire the GPU and load the model the first time you make a request !
+Input text with the language identifiers provided to create a multilingual speech. Optionally you can add an audiosample to make a voice print.Scroll down and try the api <3 Gradio.
+This space runs on ZeroGPU, so **you need to be patient** while you acquire the GPU and load the model the first time you make a request!
 """
 
 
@@ -78,33 +78,31 @@ def whisper_speech_demo(multilingual_text, speaker_audio):
 
     return (24000, concatenated_audio.T)
 
-
 with gr.Blocks() as demo:
     gr.Markdown(title)
-    output_audio = gr.Audio(label="🌟Collabora🌬️💬📝WhisperSpeech")
-    generate_button = gr.Button("Try 🌟Collabora🌬️💬📝WhisperSpeech")
-    with gr.Accordion("🌟Collabora🌬️WhisperSpeech💬Voice Print and📝Language List", open=False):
-        with gr.Row():
-            speaker_input = gr.Audio(label="Upload or Record Speaker Audio (optional)🌬️💬", 
-                                     sources=["upload", "microphone"])
-        with gr.Row():
-            with gr.Accordion("Available Languages and Their Tags", open=False):
-                formatted_language_list = "\n".join([f"`<{lang}>` {LANGUAGES[lang]}" for lang in LANGUAGES])
-                gr.Markdown(formatted_language_list)
-    with gr.Row():
-        text_input = gr.Textbox(label="Enter multilingual text💬📝", 
-                                placeholder="e.g., <en> Hello <fr> Bonjour <es> Hola")
-    with gr.Row():
-        with gr.Accordion("Try Multilingual Text Examples", open=False):
-            gr.Examples(
-                examples=text_examples,
-                inputs=[text_input],
-                outputs=[output_audio],
-                fn=whisper_speech_demo,
-                cache_examples=False,
-                label="Try these to get started !🌟🌬️"
-            )
+    output_audio = gr.Audio(label="🌟Collabora🌬️💬📝WhisperSpeech", show_download_button=True)
+    generate_button = gr.Button("🌟Collabora🌬️💬📝WhisperSpeech")
 
+    with gr.Row(equal_height=True):
+      
+        with gr.Column():
+            text_input = gr.Textbox(label="Enter multilingual text💬📝", placeholder="e.g., <en> Hello <fr> Bonjour <es> Hola", lines = 10 )
+            with gr.Accordion("Available Languages and Their Tags", open=False):
+                gr.Markdown("\n".join([f"`<{lang}>` {LANGUAGES[lang]}" for lang in LANGUAGES])),
+            with gr.Accordion("Try Multilingual Text Examples", open=False):
+                gr.Examples(
+                    examples=text_examples,
+                    inputs=[text_input],
+                    outputs=[output_audio],
+                    fn=whisper_speech_demo,
+                    cache_examples=True,
+                    label="Try these text examples to get started !🌟🌬️"
+                )
+        speaker_input = gr.Audio( sources=["upload", "microphone"],label="Upload or Record Speaker Audio (optional)🌬️💬")
+
+    # gr.Examples(examples=examples, inputs=[text_input, speaker_input], outputs=output_audio,cache_examples=True, label ='Plug and Play with this Examples !🌟🌬️'),
     generate_button.click(whisper_speech_demo, inputs=[text_input, speaker_input], outputs=output_audio)
 
-demo.launch()
+   
+
+demo.launch()