Update app.py

app.py

@@ -78,68 +78,108 @@ def run_inference(input_image, input_audio=None, input_text=None):
     return audio_video()
 
 
-import gradio as gr
-
-def run_inference(image, audio, text):
-    # Aquí pones tu lógica real de generación de video
-    # De momento devuelve None si no hay output
-    return None
-
 def run():
     custom_css = """
-    /* Estilo simplificado compatible con Gradio 4.29 */
-    .gradio-container {
+    /* Fondo general blanco */
+    .gradio-container,
+    .gr-block,
+    .gr-row,
+    .gr-column {
         background-color: #ffffff !important;
-        min-height: 100vh;
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        border: none !important;
     }
+
+    /* Contenedor principal */
     #main-container {
         background-color: #ffffff !important;
         border-radius: 15px;
-        padding: 40px;
+        padding: 40px 50px;
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
         margin: 40px auto;
         max-width: 1100px;
     }
+
+    /* Títulos */
     .title-container {
-        background-color: #ffffff !important;
         text-align: center !important;
         margin-bottom: 40px;
     }
     h1 {
-        text-align: center !important;
         color: #2c3e50;
-        font-size: 2.8em;
+        font-size: 2.6em;
         font-weight: 700;
+        margin-bottom: 10px;
     }
     .subtitle {
         color: #7f8c8d;
-        font-size: 1.3em;
+        font-size: 1.2em;
+    }
+
+    /* Botón gris moderno */
+    .generate-btn {
+        background: linear-gradient(90deg, #a8a8a8, #7d7d7d);
+        color: #ffffff !important;
+        font-size: 1.1em;
+        font-weight: 600;
+        padding: 14px 32px;
+        border-radius: 10px;
+        border: none !important;
+        cursor: pointer;
+        transition: all 0.25s ease;
+        margin-top: 20px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .generate-btn:hover {
+        background: linear-gradient(90deg, #b3b3b3, #8a8a8a);
+        transform: translateY(-2px);
+        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;
+    }
+    .output-video video {
+        border-radius: 10px;
+        max-width: 100%;
+        height: auto;
     }
     """
 
     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>")
+                gr.Markdown("""
+                <h1>Talkie</h1>
+                <div class='subtitle'>Upload an image, add some audio or text, and watch the magic happen! ✨</div>
+                """)
 
-            with gr.Row():
-                with gr.Column(scale=1):
-                    input_image = gr.Image(label="📸 Your image")
-                with gr.Column(scale=1):
-                    input_audio = gr.Audio(label="🎵 Your audio (Optional)")
-                    input_text = gr.Textbox(label="💭 Your text", placeholder="Type your text here to convert it to speech...")
+            # Imagen sola
+            with gr.Row(elem_classes="input-container"):
+                input_image = gr.Image(label="📸 Your image")
+
+            # Audio + texto
+            with gr.Row(elem_classes="input-container"):
+                input_audio = gr.Audio(label="🎵 Your audio (Optional)")
+                input_text = gr.Textbox(label="💭 Your text", placeholder="Type your text here...")
 
-            btn = gr.Button("GENERATE")
-            video_out = gr.Video(label="🎥 Your video")
+            # 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])
+            # Video separado
+            with gr.Row(elem_classes="output-container"):
+                video_out = gr.Video(label="🎥 Your video", show_label=True, elem_classes="output-video")
 
+        btn.click(run_inference, inputs=[input_image, input_audio, input_text], outputs=[video_out])
         demo.queue()
-        # No se pone share=True, ni server_name/port: Spaces se encarga de eso
         demo.launch()
 
 if __name__ == "__main__":
-    run()
-
-
- 
+    run()