Update app.py

app.py

@@ -681,101 +681,67 @@ theme = gr.themes.Soft(primary_hue="red", secondary_hue="orange", font=gr.themes
     block_border_color="*neutral_800"
 )
 
-
 with gr.Blocks(title="BELLO", fill_width=True, theme=theme) as interface:
     gr.HTML('<div class="main-title">Bello</div>')
     gr.HTML('<div class="sub-title">Lo que acaba por no terminar</div>')
-    gr.HTML('<div class="question-title">¿Cómo fue que te perdiste? </div>')
+    gr.HTML('<div class="question-title">¿Y tú, cómo, cuándo y dónde fue que te perdiste? </div>')
     
-    # PASO 1: Grabación + Botones
+    # PASO 1: Grabación + Botones acoplados verticalmente abajo
     with gr.Row():
         with gr.Column():
             gr.HTML('<div class="step-header">Paso 1: Graba tu experiencia y genera un ambiente virtual afectivo </div>')
             audio_input = gr.Audio(label="🎤 Grabadora", type="filepath", sources=["microphone", "upload"])
+            
+            # Sub-fila interna para colocar los botones debajo del reproductor/editor de audio
             with gr.Row():
                 process_btn = gr.Button("🚀 GENERAR", variant="primary", size="lg")
                 clear_btn = gr.Button("🗑️ LIMPIAR", variant="secondary")
-    
-    # Carga con efecto máquina de escribir y sonido
+            
+    # Visualizador de carga y resultados (Texto Paso 2 removido por completo)
     with gr.Row():
         with gr.Column(scale=1):
             loading_indicator = gr.Group(visible=False)
             with loading_indicator:
-                gr.HTML('''
-                <div style="text-align: center;">
-                  <pre id="poetry" style="font-family: monospace; font-size: 16px; color:#ff7f50;"></pre>
-                </div>
-                <audio id="typewriter-sound" src="https://cdn.pixabay.com/download/audio/2022/11/05/audio_4d7a4f223b.mp3?filename=typewriter-keys.mp3" loop></audio>
-                <script>
-                const poetry = `
-A ver, adivine:
-
- ¿Lengua o labio?
-¿ Bello o terrible?
-
-
-A ver, digame:
-¿La boca dice
-                                                O el aire empuja?
-
-                     ¿Tiene algo que decir, 
-                                                     O solo tiene ganas de decirlo?
-
-
-A ver:
-¿Es usted ciego?
-`;
-                const textContainer = document.getElementById('poetry');
-                const sound = document.getElementById('typewriter-sound');
-                let index = 0;
-                function typeWriter() {
-                  if (index < poetry.length) {
-                    textContainer.innerHTML += poetry.charAt(index);
-                    sound.currentTime = 0;
-                    sound.play();
-                    index++;
-                    setTimeout(typeWriter, 50);
-                  }
-                }
-                typeWriter();
-                </script>
-                '''
-            )
+                gr.HTML('<div class="loader"></div><p style="text-align:center; font-weight:bold; color:#ff7f50;">La IA está dibujando tu panorama y componiendo tu música...</p>')
+            
             with gr.TabItem("Resultado de la Experiencia", visible=False) as tab:
                 with gr.Group():
                     with gr.Row():
-                        emo = gr.Label(label="😌 Tono emocional", elem_id="emotion-label")
-                        sent = gr.Label(label="💭 Análisis sentimental", elem_id="sentiment-label")
-                    trans = gr.Textbox(label="📝 Transcripción", lines=2)
+                        emo = gr.Label(label="😌 Tono emocional")
+                        sent = gr.Label(label="💭 Análisis sentimental")
+                    trans = gr.Textbox(label="📝 Transcripción del relato", lines=2)
                     with gr.Row():
-                        img_out = gr.Image(label="🖼️ Imagen Generada°", height=320)
-                        img_file = gr.File(label="", visible=False)
+                        img_out = gr.Image(label="🖼️ Vista Previa Panorama 360°", height=320)
+                        img_file = gr.File(label="📁 Descargar Imagen 360° (.jpg)")
                     with gr.Row():
-                        audio_out = gr.Audio(label="🎶 Música Generada")
-                        audio_file = gr.File(label="", visible=False)
+                        audio_out = gr.Audio(label="🎶 Música Generada por IA")
+                        audio_file = gr.File(label="📁 Descargar Audio (.wav)")
+            
             group_components.append(tab)
-    
-    # PASO 3: Descargar HTML
+
+    # PASO 3: Descarga e Inmersión
     with gr.Group(elem_classes="download-section"):
         gr.HTML('<div class="step-header">Paso 2: Descarga el HTML y visualizalo en tu navegador</div>')
         html_download = gr.File(label="📥 Descargar Visor Inmersivo HTML 360°", type="filepath", interactive=False)
-        # La opción de publicar en GitHub está comentada para evitar errores
-        """
         publish_btn = gr.Button("📤 Publicar Escena en GitHub (Gist)", variant="primary")
-        # publish_status = gr.Markdown("")
-        """
-    
-    # Eventos
-    def clear_all():
-        return [None, gr.update(visible=False), None, None, None, None, None, None, None, None, ""]
+        publish_status = gr.Markdown("")
 
+    # Mapeos de eventos
+    process_btn.click(
+        fn=process_and_display, 
+        inputs=[audio_input],
+        outputs=[loading_indicator, tab, emo, trans, sent, img_out, img_file, audio_out, audio_file, html_download, publish_status]
+    )
+    
     clear_btn.click(
-        fn=clear_all,
+        fn=clear_all, 
         inputs=[],
-        outputs=[audio_input, loading_indicator, tab, emo, trans, sent, img_out, img_file, audio_out, audio_file, html_download]
+        outputs=[audio_input, loading_indicator, tab, emo, trans, sent, img_out, img_file, audio_out, audio_file, html_download, publish_status]
     )
+    
+    publish_btn.click(fn=publish_to_github, inputs=[html_download], outputs=[publish_status])
 
-# Montar la app
+# Forzar la inicialización con el CSS personalizado oscuro
 app = mount_gradio_app(fastapi_app, interface, path="/", theme=theme, css=custom_css)
 
 if __name__ == "__main__":