Added Custom Layout

app.py

@@ -36,4 +36,53 @@ examples = [
     "./examples/audio_4.mp3"
 ]
 
-gr.Interface(fn=transcribe, inputs="microphone", outputs="text", examples=examples).launch(share=True)
+title = "# 🇵🇾 Reconocimiento de Voz en Guaraní"
+
+description = """Esta es una demostración del reconocimiento de voz en Guaraní utilizando el modelo speech-to-text [Whisper](https://arxiv.org/pdf/2212.04356.pdf)
+
+                Autores:
+                - Mateo Andrés Fidabel Gill
+                - Santiago Ruben Acevedo Zarza
+              """
+
+audio_input = gr.Audio(value="./examples/audio_1.mp3", 
+                       sources=["upload", "microphone"],
+                       label="🎤 Audio a transcribir",
+                       interactive=True)
+
+transcription = gr.Textbox(label="📝 Transcripción",
+                           interactive=False)
+
+with gr.Blocks() as demo:
+    
+    with gr.Row():
+        # Model Title and Description
+        gr.Markdown(title)
+        gr.Markdown(description)
+        
+    with gr.Row():
+        # Audio Input
+        audio_input.render()
+        
+    with gr.Row():
+        # Text Output
+        transcription.render()
+        
+    with gr.Row():
+        # Submit and Clear Buttons
+        submit = gr.Button("📝 Transcribir el Audio")
+
+    with gr.Row():
+        gr.Examples(examples=examples,
+                    inputs=[audio_input],
+                    outputs=[transcription],
+                    fn=transcribe,
+                    label="Ejemplos")
+
+    submit.click(transcribe, 
+                 inputs=[audio_input],
+                 outputs = [transcription])
+
+
+demo.queue()
+demo.launch(share=True)