Update app.py

app.py

@@ -48,7 +48,8 @@ model_path = "mymodel_SER_LSTM_RAVDESS.h5"
 model = load_emotion_model(model_path)
 
 model_size = "small"
-whisper_model = WhisperModel(model_size, device="cpu", compute_type="int8")
+# Usamos CPU y float32 para mayor compatibilidad, cambiar si hay GPU
+whisper_model = WhisperModel(model_size, device="cpu", compute_type="float32")
 
 def load_musicgen_model():
     try:
@@ -174,6 +175,8 @@ def upscale_image(image, target_width=4096, target_height=2048):
             return img
         with tempfile.NamedTemporaryFile(suffix=".jpg", delete=False) as tmp:
             image.save(tmp.name, "JPEG", quality=95)
+            # Nota: torch-srgan puede no estar disponible o requerir pago en DeepAI.
+            # Se usa como marcador de posición. Si falla, redimensiona localmente.
             response = requests.post(
                 "https://api.deepai.org/api/torch-srgan",
                 files={"image": open(tmp.name, "rb")},
@@ -337,7 +340,7 @@ def get_predictions(audio_input, chunk_duration=120):
     return results
 
 # ============================================================
-# 7. Generación del visor HTML 360° (Avión Rojo Coral Incorporado)
+# 7. Generación del visor HTML 360°
 # ============================================================
 
 def create_360_viewer_html(image_paths, audio_paths, output_path):
@@ -345,6 +348,7 @@ def create_360_viewer_html(image_paths, audio_paths, output_path):
     for img_path in image_paths:
         try:
             img = Image.open(img_path)
+            # Redimensionar para reducir el tamaño del HTML base64
             img = img.resize((2048, 1024), Image.Resampling.LANCZOS)
             buf = BytesIO()
             img.save(buf, format="JPEG", quality=75, optimize=True)
@@ -387,7 +391,7 @@ def create_360_viewer_html(image_paths, audio_paths, output_path):
             padding: 18px 50px; font-size: 16px; background: #2a2a3a; color: #666;
             border-radius: 30px; font-weight: bold; cursor: pointer;
         }}
-        button.ready {{ background: linear-gradient(135deg, #ff7f50 0%, #cd2323 100%); color: white; }}
+        button.ready {{ background: linear-gradient(135deg, #f53737 0%, #cd2323 100%); color: white; }}
     </style>
     <script>
         AFRAME.registerComponent('paper-plane-mesh', {{
@@ -409,9 +413,8 @@ def create_360_viewer_html(image_paths, audio_paths, output_path):
                 geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
                 geometry.setIndex(indices);
                 geometry.computeVertexNormals();
-                // Color modificado a Rojo Coral (0xFF7F50)
                 const material = new THREE.MeshStandardMaterial({{
-                    color: 0xFF7F50,
+                    color: 0xf53737,
                     roughness: 0.4,
                     metalness: 0.1,
                     side: THREE.DoubleSide,
@@ -574,7 +577,7 @@ async def github_callback(request: Request):
         return HTMLResponse(f"Error: {str(e)}", status_code=500)
 
 # ============================================================
-# 9. Lógica de Interfaz y Funciones de Gradio (Mejoras Visuales)
+# 9. Lógica de Interfaz y Funciones de Gradio
 # ============================================================
 
 MAX_SEGMENTS = 1
@@ -583,15 +586,17 @@ group_components = []
 
 def process_and_display(audio_input):
     if not audio_input:
-        yield [gr.update(visible=False), gr.update(visible=False), None, None, None, None, None, None, None, None, "⚠️ Por favor, graba o sube un audio primero."]
+        yield [gr.update(visible=False), gr.update(visible=False), None, None, None, None, None, "⚠️ Por favor, graba o sube un audio primero."]
         return
 
+    # Iniciar estado de carga y ocultar contenedor anterior
     yield [
         gr.update(visible=True),   
         gr.update(visible=False),  
-        None, None, None, None, None, None, None, None, "⏳ Procesando audio y generando entorno virtual con IA..."
+        None, None, None, None, None, "⏳ Procesando audio y generando el entorno virtual afectivo..."
     ]
     
+    # Procesar solo el primer segmento (MAX_SEGMENTS = 1)
     results = get_predictions(audio_input, chunk_duration=120)
     
     if len(results) > 0:
@@ -606,28 +611,28 @@ def process_and_display(audio_input):
         
         info_msg = "✅ Entorno generado con éxito."
         
+        # Actualizar la GUI
         yield [
             gr.update(visible=False),  
             gr.update(visible=True),   
             res["emotion"], 
             res["transcription"], 
             res["sentiment"],
+            # Gradio Image y Audio tienen icono de descarga incorporado
             res["image"], 
-            res["image_360"], 
-            res["music"], 
             res["music"], 
             viewer_html_path, 
             info_msg
         ]
     else:
-        yield [gr.update(visible=False), gr.update(visible=False), None, None, None, None, None, None, None, None, "❌ Error al procesar el audio."]
+        yield [gr.update(visible=False), gr.update(visible=False), None, None, None, None, None, "❌ Error al procesar el audio."]
 
 def clear_all():
     return [
         None, 
         gr.update(visible=False), 
         gr.update(visible=False), 
-        None, None, None, None, None, None, None, None, ""
+        None, None, None, None, None, None, ""
     ]
 
 def publish_to_github(html_file_path):
@@ -640,88 +645,87 @@ def publish_to_github(html_file_path):
         return f"🔐 [Autorizar en GitHub]({auth_url}) (se abrirá una ventana)"
     return auth_url
 
-# Inyección CSS: Fondo estrictamente oscuro y remoción de blanco/contrastes defectuosos
+# Estilos CSS adaptados para Gradio 6 Full Width y FONDO CIELO AZUL OSCURO
 custom_css = """
-body, .gradio-container, html { 
-    background-color: #121212 !important; 
-    color: #e0e0e0 !important;
-}
+/* FONDO CIELO TARDE NOCHE AZUL OSCURO */
 .gradio-container { 
+    background-color: #0a192f !important;
+    background-image: radial-gradient(circle at center, #112240 0%, #0a192f 100%) !important;
     max-width: 100% !important; 
     width: 100% !important; 
     padding-left: 20px !important; 
     padding-right: 20px !important; 
+    color: #e6f1ff !important;
 }
 .row, .column, .tabs, .tabitem, .gr-group {
     width: 100% !important;
     max-width: 100% !important;
     flex-grow: 1 !important;
 }
-/* Forzar fondos oscuros en bloques internos de Gradio */
-.gr-box, .gr-panel, .gr-button, .input-container, .output-container, .gr-form, .gr-wrapper {
-    background-color: #1e1e1e !important;
-    border-color: #2d2d2d !important;
-}
-.main-title { text-align: center; font-size: 52px !important; font-weight: 900; margin-bottom: 0px; color: #ff7f50; }
-.sub-title { text-align: center; font-size: 20px !important; color: #888; margin-top: 5px; margin-bottom: 15px; font-style: italic; }
-.question-title { text-align: center; font-size: 22px !important; color: #fff; margin-bottom: 25px; font-weight: 600; }
-.step-header { font-size: 18px !important; font-weight: 700; margin-bottom: 10px; color: #ff7f50; margin-top: 15px; }
-.download-section { background: #1e1e1e !important; border: 1px solid #2d2d2d; padding: 15px; border-radius: 12px; margin: 25px 0; width: 100% !important; }
+/* Estilos de texto para contrastar */
+.main-title { text-align: center; font-size: 52px !important; font-weight: 900; margin-bottom: 0px; color: #ff3737; text-shadow: 0 0 10px rgba(255,55,55,0.5); }
+.sub-title { text-align: center; font-size: 20px !important; color: #8892b0; margin-top: 5px; margin-bottom: 15px; font-style: italic; }
+.question-title { text-align: center; font-size: 22px !important; color: #ccd6f6; margin-bottom: 25px; font-weight: 600; }
+.step-header { font-size: 18px !important; font-weight: 700; margin-bottom: 10px; color: #f53737; margin-top: 15px; }
+.download-section { background: rgba(23, 42, 69, 0.7); padding: 15px; border-radius: 12px; margin: 25px 0; width: 100% !important; border: 1px solid #1e3a61; }
+
 audio { max-height: 50px !important; width: 100% !important; }
-.file-download button, .file-download a { font-size: 12px !important; padding: 4px 8px !important; }
-.gr-box { border-radius: 12px; }
-.loader { border: 4px solid #333; border-top: 4px solid #ff7f50; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 20px auto; }
+.gr-box { border-radius: 12px; background-color: rgba(17, 34, 64, 0.5); border: 1px solid #1e3a61; }
+
+/* Ajustes de contraste para componentes de entrada/salida */
+.gr-input, .gr-textbox, .gr-markdown { color: #e6f1ff !important; }
+.gr-label { color: #8892b0 !important; }
+
+.loader { border: 4px solid #172a45; border-top: 4px solid #f53737; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 20px auto; }
 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 """
 
-# Inicializar Tema en Modo Oscuro (Dark Mode) nativo
-theme = gr.themes.Soft(primary_hue="red", secondary_hue="orange", font=gr.themes.GoogleFont("Inter")).set(
-    body_background_fill="*neutral_950",
-    block_background_fill="*neutral_900",
-    block_border_color="*neutral_800"
-)
+theme = gr.themes.Soft(primary_hue="red", secondary_hue="orange", font=gr.themes.GoogleFont("Inter"))
 
-with gr.Blocks(title="BELLO", fill_width=True, theme=theme) as interface:
+with gr.Blocks(title="BELLO", fill_width=True) 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, dónde y cuándo te perdiste? (Física o emocionalmente)</div>')
     
-    # PASO 1: Grabación + Botones acoplados verticalmente abajo
+    # PASO 1: Grabación Ancha
     with gr.Row():
-        with gr.Column():
-            gr.HTML('<div class="step-header">Paso 1: Record + Generate</div>')
-            audio_input = gr.Audio(label="🎤 Micrófono / Grabadora", type="filepath", sources=["microphone", "upload"])
+        with gr.Column(scale=4):
+            gr.HTML('<div class="step-header">Paso 1: Graba tu voz: Registra tu experiencia</div>')
+            audio_input = gr.Audio(label="🎤 Entrada de Audio", type="filepath", sources=["microphone"])
+        with gr.Column(scale=1, min_width=200):
+            gr.HTML('<div class="step-header">&nbsp;</div>')
+            process_btn = gr.Button("🚀 Generar ", variant="primary", size="lg")
+            clear_btn = gr.Button("🗑️ Limpiar", variant="secondary")
             
-            # Sub-fila interna para colocar los botones debajo del reproductor/editor de audio
-            with gr.Row():
-                process_btn = gr.Button("🚀 Generar EVA", variant="primary", size="lg")
-                clear_btn = gr.Button("🗑️ Limpiar", variant="secondary")
-            
-    # Visualizador de carga y resultados (Texto Paso 2 removido por completo)
+    # PASO 2: Resultados debajo de los botones
     with gr.Row():
         with gr.Column(scale=1):
+            gr.HTML('<div class="step-header">Paso 2: Generar Entorno Virtual Afectivo </div>')
+            
             loading_indicator = gr.Group(visible=False)
             with loading_indicator:
-                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>')
+                gr.HTML('<div class="loader"></div><p style="text-align:center; font-weight:bold; color:#f53737;">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="😌 Emoción Detectada")
-                        sent = gr.Label(label="💭 Sentimiento Analizado")
+                        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="🖼️ Vista Previa Panorama 360°", height=320)
-                        img_file = gr.File(label="📁 Descargar Imagen 360° (.jpg)")
+                        # Imagen y Audio de Gradio ya tienen botones de descarga incorporados
+                        # SE ELIMINAimg_out = gr.Image(label="🖼️ Vista Previa Panorama 360°", height=320)
+                         gr.File para imagen
                     with gr.Row():
-                        audio_out = gr.Audio(label="🎶 Música Generada por IA")
-                        audio_file = gr.File(label="📁 Descargar Audio (.wav)")
+                        # SE ELIMINAaudio_out = gr.Audio(label="🎶 Música Generada por IA")
+                         gr.File para audio
             
             group_components.append(tab)
 
-    # PASO 3: Descarga e Inmersión
+    # PASO 3: Descarga
     with gr.Group(elem_classes="download-section"):
         gr.HTML('<div class="step-header">Paso 3: Descargar e Inmersión</div>')
+        # Este componente sí es necesario porque es un archivo HTML generado, no una imagen/audio estándar
         html_download = gr.File(label="📥 Descargar Visor Inmersivo HTML 360°", type="filepath", interactive=False)
         publish_btn = gr.Button("📤 Publicar Escena en GitHub (Gist)", variant="primary")
         publish_status = gr.Markdown("")
@@ -730,20 +734,23 @@ with gr.Blocks(title="BELLO", fill_width=True, theme=theme) as interface:
     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]
+        # Se ajustan las salidas eliminando img_file y audio_file
+        outputs=[loading_indicator, tab, emo, trans, sent, img_out, audio_out, html_download, publish_status]
     )
     
     clear_btn.click(
         fn=clear_all, 
         inputs=[],
-        outputs=[audio_input, loading_indicator, tab, emo, trans, sent, img_out, img_file, audio_out, audio_file, html_download, publish_status]
+        # Se ajustan las salidas eliminando img_file y audio_file
+        outputs=[audio_input, loading_indicator, tab, emo, trans, sent, img_out, audio_out, html_download, publish_status]
     )
     
     publish_btn.click(fn=publish_to_github, inputs=[html_download], outputs=[publish_status])
 
-# Forzar la inicialización con el CSS personalizado oscuro
+# Corrección para Gradio 6.0: Pasar el tema y CSS dentro de mount_gradio_app
 app = mount_gradio_app(fastapi_app, interface, path="/", theme=theme, css=custom_css)
 
 if __name__ == "__main__":
     import uvicorn
+    # Ejecutar uvicorn apuntando a la aplicación FastAPI 'app'
     uvicorn.run(app, host="0.0.0.0", port=7860)