Update app.py

app.py

@@ -80,37 +80,38 @@ def run_inference(input_image, input_audio=None, input_text=None):
 
 def run():
     custom_css = """
-    /* Fondo general blanco */
-    .gradio-container,
-    .gr-block,
-    .gr-row,
-    .gr-column {
+    /* Fondo blanco general */
+    .gradio-container {
         background-color: #ffffff !important;
-        border: none !important;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
 
     /* Contenedor principal */
-    #main-container {
+    .main-container {
         background-color: #ffffff !important;
         border-radius: 15px;
         padding: 40px 50px;
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
         margin: 40px auto;
-        max-width: 1100px;
+        max-width: 1000px;
     }
 
-    /* Títulos */
+    /* Título */
     .title-container {
-        text-align: center !important;
-        margin-bottom: 40px;
+        text-align: center;
+        margin-bottom: 30px;
     }
+
     h1 {
+        text-align: center;
         color: #2c3e50;
-        font-size: 2.6em;
+        font-size: 2.4em;
         font-weight: 700;
         margin-bottom: 10px;
     }
+
     .subtitle {
+        text-align: center;
         color: #7f8c8d;
         font-size: 1.2em;
     }
@@ -126,7 +127,7 @@ def run():
         border: none !important;
         cursor: pointer;
         transition: all 0.25s ease;
-        margin-top: 20px;
+        margin-top: 15px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     }
 
@@ -136,13 +137,7 @@ def run():
         box-shadow: 0 8px 18px rgba(0,0,0,0.2);
     }
 
-    /* Filas y vídeo */
-    .input-container, .output-container {
-        margin-bottom: 25px;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-    }
+    /* Centrar video */
     .output-video video {
         border-radius: 10px;
         max-width: 100%;
@@ -151,36 +146,36 @@ def run():
     """
 
     with gr.Blocks(css=custom_css) as demo:
-        with gr.Group(elem_id="main-container"):
-
-            # Título
-            with gr.Row(elem_classes="title-container"):
-                gr.Markdown("""
-                <h1>Talkie</h1>
-                <div class='subtitle'>Upload an image, add some audio or text, and watch the magic happen! ✨</div>
-                """)
-
-            # Imagen sola
-            with gr.Row(elem_classes="input-container"):
-                input_image = gr.Image(label="📸 Your image")
+        with gr.Box(elem_classes=["main-container"]):
+            gr.Markdown(
+                """
+                <div class='title-container'>
+                    <h1>Talkie</h1>
+                    <div class='subtitle'>Upload an image, add some audio or text, and watch the magic happen! ✨</div>
+                </div>
+                """
+            )
+
+            # Imagen
+            input_image = gr.Image(label="📸 Your image")
 
             # Audio + texto
-            with gr.Row(elem_classes="input-container"):
+            with gr.Row():
                 input_audio = gr.Audio(label="🎵 Your audio (Optional)")
                 input_text = gr.Textbox(label="💭 Your text", placeholder="Type your text here...")
 
-            # Botón gris bonito
-            with gr.Row():
-                btn = gr.Button("GENERATE", elem_classes="generate-btn")
-                btn.click(run_inference, inputs=[input_image, input_audio, input_text], outputs=[video_out])
+            # Botón
+            btn = gr.Button("GENERATE", elem_classes=["generate-btn"])
 
-            # Video separado
-            with gr.Row(elem_classes="output-container"):
-                video_out = gr.Video(label="🎥 Your video", show_label=True, elem_classes="output-video")
+            # Salida de video
+            video_out = gr.Video(label="🎥 Your video", show_label=True, elem_classes=["output-video"])
+
+        # Conexión del botón (fuera del bloque visual)
+        btn.click(run_inference, inputs=[input_image, input_audio, input_text], outputs=video_out)
 
-            
         demo.queue()
         demo.launch()
 
+
 if __name__ == "__main__":
     run()