Update app.py

app.py

@@ -6,17 +6,114 @@ import os
 import json
 import gradio as gr
 from tools.final_answer import FinalAnswerTool
+import logging
+
+# Configurar logging para depuración
+logging.basicConfig(level=logging.INFO, 
+                   format='%(asctime)s - %(name)s - %(levelname)s - %(message)s')
+logger = logging.getLogger('music_recognition_app')
 
 # File to save the history of recognized songs
 HISTORY_FILE = "song_history.json"
 
-# Supported languages (sin alemán)
+# Supported languages - removed German
 LANGUAGES = {
     "English": "en",
     "Español": "es",
     "Français": "fr"
 }
 
+# UI messages for different languages
+UI_MESSAGES = {
+    "en": {
+        "title": "Music Recognition & Fun Facts",
+        "subtitle": "Record a song and get interesting facts about the artist",
+        "choose_language": "Choose your language",
+        "rec_button": "🎙 REC AND IDENTIFY SONG",
+        "please_record": "Please click REC to record a song or upload an audio file",
+        "recording": "Recording... Click Stop when done",
+        "audio_loaded": "✅ Audio loaded! Identifying song...",
+        "loading_audio": "Please wait while processing the audio",
+        "searching_song": "Searching for your song in the sound multiverse, please wait...",
+        "identified_song": "🎵 Identified Song: \"{song}\" by {artist}",
+        "loading_artist_info": "Now loading interesting facts about {artist}...",
+        "song_recognized": "Song successfully recognized! Ask questions about the artist in the chat below",
+        "about_artist": "About",
+        "ask_more": "Ask me more about this artist or music in general",
+        "chat_placeholder": "Ask about the artist, song, or anything music related...",
+        "send_button": "Send",
+        "history_tab": "Song History",
+        "history_title": "History of recognized songs",
+        "songs_to_show": "Number of songs to show",
+        "view_history": "📋 View History",
+        "recognized_song": "Recognized Song",
+        "artist": "Artist",
+        "album": "Album",
+        "listen_spotify": "Listen on Spotify",
+        "listen_apple": "Listen on Apple Music",
+        "no_audio_error": "Please record an audio clip first",
+        "processing_error": "Error processing audio"
+    },
+    "es": {
+        "title": "Reconocimiento de Música y Datos Curiosos",
+        "subtitle": "Graba una canción y obtén datos interesantes sobre el artista",
+        "choose_language": "Elige tu idioma",
+        "rec_button": "🎙 GRABAR E IDENTIFICAR CANCIÓN",
+        "please_record": "Haz clic en GRABAR para grabar una canción o sube un archivo de audio",
+        "recording": "Grabando... Haz clic en Detener cuando termines",
+        "audio_loaded": "✅ ¡Audio cargado! Identificando canción...",
+        "loading_audio": "Por favor espere mientras se procesa el audio",
+        "searching_song": "Buscando tu canción en el multiverso sonoro, por favor espera...",
+        "identified_song": "🎵 Canción identificada: \"{song}\" por {artist}",
+        "loading_artist_info": "Ahora cargando datos interesantes sobre {artist}...",
+        "song_recognized": "¡Canción reconocida con éxito! Haz preguntas sobre el artista en el chat de abajo",
+        "about_artist": "Sobre",
+        "ask_more": "Pregúntame más sobre este artista o música en general",
+        "chat_placeholder": "Pregunta sobre el artista, canción o cualquier tema relacionado con la música...",
+        "send_button": "Enviar",
+        "history_tab": "Historial de Canciones",
+        "history_title": "Historial de canciones reconocidas",
+        "songs_to_show": "Número de canciones para mostrar",
+        "view_history": "📋 Ver Historial",
+        "recognized_song": "Canción Reconocida",
+        "artist": "Artista",
+        "album": "Álbum",
+        "listen_spotify": "Escuchar en Spotify",
+        "listen_apple": "Escuchar en Apple Music",
+        "no_audio_error": "Por favor graba un clip de audio primero",
+        "processing_error": "Error al procesar el audio"
+    },
+    "fr": {
+        "title": "Reconnaissance de Musique et Anecdotes",
+        "subtitle": "Enregistrez une chanson et découvrez des faits intéressants sur l'artiste",
+        "choose_language": "Choisissez votre langue",
+        "rec_button": "🎙 ENREGISTRER ET IDENTIFIER LA CHANSON",
+        "please_record": "Cliquez sur ENREGISTRER pour enregistrer une chanson ou téléchargez un fichier audio",
+        "recording": "Enregistrement... Cliquez sur Arrêter quand vous avez terminé",
+        "audio_loaded": "✅ Audio chargé ! Identification de la chanson...",
+        "loading_audio": "Veuillez patienter pendant le traitement de l'audio",
+        "searching_song": "Recherche de votre chanson dans le multivers sonore, veuillez patienter...",
+        "identified_song": "🎵 Chanson identifiée: \"{song}\" par {artist}",
+        "loading_artist_info": "Chargement de faits intéressants sur {artist}...",
+        "song_recognized": "Chanson reconnue avec succès ! Posez des questions sur l'artiste dans le chat ci-dessous",
+        "about_artist": "À propos de",
+        "ask_more": "Demandez-moi plus d'informations sur cet artiste ou sur la musique en général",
+        "chat_placeholder": "Posez une question sur l'artiste, la chanson ou tout ce qui concerne la musique...",
+        "send_button": "Envoyer",
+        "history_tab": "Historique des Chansons",
+        "history_title": "Historique des chansons reconnues",
+        "songs_to_show": "Nombre de chansons à afficher",
+        "view_history": "📋 Voir l'historique",
+        "recognized_song": "Chanson Reconnue",
+        "artist": "Artiste",
+        "album": "Album",
+        "listen_spotify": "Écouter sur Spotify",
+        "listen_apple": "Écouter sur Apple Music",
+        "no_audio_error": "Veuillez d'abord enregistrer un clip audio",
+        "processing_error": "Erreur lors du traitement de l'audio"
+    }
+}
+
 # Tool to recognize songs using AudD
 @tool
 def recognize_song(audio_path: str) -> dict:
@@ -142,19 +239,23 @@ def view_song_history(limit: int = 10) -> str:
     except Exception as e:
         return f"❌ Error getting history: {str(e)}"
 
-# Tool to get artist information in selected language (sin alemán)
+# Tool to get artist information in selected language with enhanced details
 @tool
-def get_artist_info(artist_name: str, language: str = "en") -> str:
-    """Gets background information and fun facts about a music artist in the specified language
+def get_artist_info(artist_name: str, song_name: str = "", language: str = "en") -> str:
+    """Gets detailed background information, fun facts about a music artist and the specific song in the specified language
+    
     Args:
         artist_name: name of the artist to get information about
+        song_name: name of the song (if available)
         language: language code (en, es, fr)
     """
-    # Language-specific prompts (sin alemán)
+    # Language-specific prompts
     prompts = {
-        "en": f"Provide interesting and fun facts about the music artist '{artist_name}' that fans would love to know. Include stories about their career, personal anecdotes, how their most famous songs were created, or surprising facts about their life. Focus on highlighting their contributions to music and anything that makes them unique as an artist. Keep it engaging and positive.",
-        "es": f"Proporciona datos interesantes y curiosos sobre el artista musical '{artist_name}' que a los fans les encantaría conocer. Incluye historias sobre su carrera, anécdotas personales, cómo se crearon sus canciones más famosas o datos sorprendentes sobre su vida. Céntrate en destacar sus contribuciones a la música y cualquier cosa que les haga únicos como artistas. Mantenlo atractivo y positivo.",
-        "fr": f"Fournissez des faits intéressants et amusants sur l'artiste musical '{artist_name}' que les fans aimeraient connaître. Incluez des histoires sur leur carrière, des anecdotes personnelles, comment leurs chansons les plus célèbres ont été créées, ou des faits surprenants sur leur vie. Concentrez-vous sur la mise en valeur de leurs contributions à la musique et tout ce qui les rend uniques en tant qu'artiste. Gardez-le engageant et positif."
+        "en": f"Provide a comprehensive overview about the music artist '{artist_name}'. Include the following sections clearly marked with headers:\n\n1. General Biography: Brief overview of their career and significance in music.\n\n2. Fun Facts: 4-5 surprising or interesting facts about the artist or group that fans would find fascinating.\n\n3. Behind-the-scenes Anecdotes: 2-3 memorable stories about the artist's career, performances, or personal life that showcase their character or impact.\n\n" + (f'4. About the Song "{song_name}": If you know anything specific about how this song was created, its meaning, its impact, or interesting trivia related to it, please share those details.' if song_name else '') + "\n\nKeep the tone engaging and enthusiastic, highlighting what makes this artist unique and beloved by fans. Limit your response to around 500 words total.",
+        
+        "es": f"Proporciona una visión completa sobre el artista musical '{artist_name}'. Incluye las siguientes secciones claramente marcadas con encabezados:\n\n1. Biografía General: Breve resumen de su carrera y significado en la música.\n\n2. Datos Curiosos: 4-5 hechos sorprendentes o interesantes sobre el artista o grupo que los fans encontrarían fascinantes.\n\n3. Anécdotas entre bastidores: 2-3 historias memorables sobre la carrera del artista, actuaciones o vida personal que muestren su carácter o impacto.\n\n" + (f'4. Sobre la canción "{song_name}": Si conoces algo específico sobre cómo se creó esta canción, su significado, su impacto o curiosidades interesantes relacionadas con ella, por favor comparte esos detalles.' if song_name else '') + "\n\nMantén un tono atractivo y entusiasta, destacando lo que hace que este artista sea único y querido por los fans. Limita tu respuesta a alrededor de 500 palabras en total.",
+        
+        "fr": f"Fournissez un aperçu complet de l'artiste musical '{artist_name}'. Incluez les sections suivantes clairement marquées avec des en-têtes:\n\n1. Biographie générale: Bref aperçu de sa carrière et de son importance dans la musique.\n\n2. Anecdotes intéressantes: 4-5 faits surprenants ou intéressants sur l'artiste ou le groupe que les fans trouveraient fascinants.\n\n3. Anecdotes en coulisses: 2-3 histoires mémorables sur la carrière de l'artiste, ses performances ou sa vie personnelle qui mettent en valeur son caractère ou son impact.\n\n" + (f'4. À propos de la chanson "{song_name}": Si vous connaissez quelque chose de spécifique sur la façon dont cette chanson a été créée, sa signification, son impact ou des anecdotes intéressantes liées à elle, veuillez partager ces détails.' if song_name else '') + "\n\nGardez un ton engageant et enthousiaste, mettant en évidence ce qui rend cet artiste unique et apprécié des fans. Limitez votre réponse à environ 500 mots au total."
     }
     
     # Default to English if language not supported
@@ -173,7 +274,7 @@ def get_artist_info(artist_name: str, language: str = "en") -> str:
     except Exception as e:
         return f"Could not retrieve information about {artist_name}: {str(e)}"
 
-# Chat with LLM tool (sin alemán)
+# Chat with LLM tool
 @tool
 def chat_with_assistant(query: str, artist_info: str = "", language: str = "en") -> str:
     """Chat with the AI assistant about any music related topic in the specified language
@@ -182,7 +283,7 @@ def chat_with_assistant(query: str, artist_info: str = "", language: str = "en")
         artist_info: previous artist info to provide context
         language: language code (en, es, fr)
     """
-    # Language-specific system messages (sin alemán)
+    # Language-specific system messages
     system_messages = {
         "en": "You are a music expert assistant who specializes in providing engaging information about artists, songs, and music history. Focus on sharing interesting, fun facts that highlight the artist's unique contributions and stories.",
         "es": "Eres un asistente experto en música que se especializa en proporcionar información interesante sobre artistas, canciones e historia musical. Céntrate en compartir datos curiosos e interesantes que destaquen las contribuciones únicas y las historias del artista.",
@@ -242,171 +343,442 @@ agent = CodeAgent(
     prompt_templates=prompt_templates
 )
 
-# Gradio user interface
-with gr.Blocks(title="Music Recognition & Fun Facts") as demo:
+# Gradio user interface con CSS personalizado para mejor experiencia móvil
+with gr.Blocks(title="Music Recognition & Fun Facts", css="""
+    .large-button {
+        min-height: 60px !important;
+        font-size: 18px !important;
+        padding: 15px !important;
+    }
+    @media (max-width: 600px) {
+        .large-button {
+            width: 100% !important;
+            margin-bottom: 10px !important;
+        }
+        #audio-input {
+            width: 100% !important;
+            margin-top: 10px !important;
+            margin-bottom: 10px !important;
+        }
+        /* Hacer el botón de grabar y parar más grande */
+        button.record, button.stop {
+            width: 60px !important;
+            height: 60px !important;
+            border-radius: 50% !important;
+        }
+        /* Hacer el texto de error más visible */
+        .error-text {
+            color: red !important;
+            font-weight: bold !important;
+            font-size: 16px !important;
+        }
+        /* Destacar el título de la canción identificada */
+        .identified-song {
+            font-size: 1.3em !important;
+            margin: 15px 0 !important;
+            padding: 10px !important;
+            border-radius: 5px !important;
+            background-color: rgba(0, 123, 255, 0.1) !important;
+            border-left: 4px solid #007bff !important;
+        }
+    }
+    /* Estilos para el indicador de micrófono */
+    #mic-status {
+        margin-top: 5px;
+        margin-bottom: 15px;
+        font-style: italic;
+    }
+    /* Destacar el título de la canción identificada */
+    .identified-song {
+        font-size: 1.2em;
+        margin: 10px 0;
+        padding: 8px;
+        border-radius: 5px;
+        background-color: rgba(0, 123, 255, 0.1);
+        border-left: 4px solid #007bff;
+    }
+""") as demo:
     # State variables
     selected_language = gr.State("en")
+    lang_code = gr.State("en")
     song_info_state = gr.State(None)
     artist_info_state = gr.State("")
-    audio_status = gr.State("no_audio")  # States: no_audio, loading, ready
+    song_name_state = gr.State("")
+    audio_status = gr.State("no_audio")  # States: no_audio, loading, ready, processing
+    
+    # Function to get UI messages based on language
+    def get_ui_message(message_key, language_code="en"):
+        return UI_MESSAGES.get(language_code, UI_MESSAGES["en"]).get(message_key, UI_MESSAGES["en"][message_key])
+    
+    # Initial UI language is English
+    current_lang = "en"
     
     # Title and intro
-    gr.Markdown("# 🎵 Music Recognition & Fun Facts")
-    gr.Markdown("Identify songs, learn interesting facts about artists, and chat about music")
+    title_component = gr.Markdown(f"# 🎵 {get_ui_message('title', current_lang)}")
+    subtitle_component = gr.Markdown(get_ui_message('subtitle', current_lang))
     
     # Language selection
     with gr.Row():
         language_dropdown = gr.Dropdown(
             choices=list(LANGUAGES.keys()),
             value="English",
-            label="Choose your language"
+            label=get_ui_message('choose_language', current_lang)
         )
     
     # Combined recognition and chat interface
     with gr.Tab("Song Recognition & Chat"):
         # Audio status message
-        audio_status_msg = gr.Markdown("*Por favor, graba o sube un clip de audio*")
+        audio_status_msg = gr.Markdown(f"*{get_ui_message('please_record', current_lang)}*")
+        
+        # Componente para mostrar inmediatamente la canción identificada
+        song_identification = gr.Markdown("", elem_classes="identified-song")
         
         # Song recognition section
         with gr.Row():
             with gr.Column(scale=1):
-                # Configuramos el componente de audio para usar el micrófono directamente
-                audio_input = gr.Audio(source="microphone", type="filepath", visible=False)
-                record_btn = gr.Button("🎙 REC MUSIC", size="lg", variant="primary")
-                recognize_btn = gr.Button("🔍 RECOGNIZE SONG", variant="secondary")
+                # Audio input siempre visible
+                audio_input = gr.Audio(
+                    label="Audio Recording",
+                    type="filepath", 
+                    visible=True,
+                    sources=["microphone", "upload"],
+                    streaming=False,
+                    elem_id="audio-input",
+                    format="mp3",
+                    autoplay=False,
+                    show_download_button=False,
+                    interactive=True
+                )
+                
+                # Solo un botón que abre el audio y después identifica
+                rec_btn = gr.Button(
+                    get_ui_message('rec_button', current_lang),
+                    size="lg",
+                    variant="primary",
+                    scale=2,
+                    elem_id="record-button",
+                    elem_classes="large-button"
+                )
+                
+                # Indicador de estado del micrófono/proceso
+                microphone_status = gr.Markdown("", elem_id="mic-status")
         
-        # Recognition results section (separate from chat)
+        # Processing indicator
         with gr.Row():
-            recognition_results = gr.Markdown("")
+            processing_indicator = gr.Markdown("")
         
         # Artist info section
         with gr.Row():
             artist_facts = gr.Markdown("")
         
+        # Recognition results section with links
+        with gr.Row():
+            recognition_results = gr.Markdown("")
+        
         # Chat section
-        gr.Markdown("### Pregúntame más sobre este artista o música en general")
-        chat_history = gr.Chatbot(label="Music Chat")
+        with gr.Row():
+            chat_section_title = gr.Markdown(f"### {get_ui_message('ask_more', current_lang)}")
+        
+        chat_history = gr.Chatbot(label="Music Chat", type="messages")
         
         with gr.Row():
             chat_input = gr.Textbox(
-                placeholder="Pregunta sobre el artista, la canción o cualquier tema musical...",
-                label="Tu pregunta"
+                placeholder=get_ui_message('chat_placeholder', current_lang),
+                label="Your question"
+            )
+            chat_btn = gr.Button(
+                get_ui_message('send_button', current_lang),
+                variant="primary"
             )
-            chat_btn = gr.Button("Enviar", variant="primary")
         
-        # Function to handle audio recording
-        def toggle_audio_widget():
-            return gr.update(visible=True), "loading", "*Espera mientras se graba el audio... Haz clic en Stop cuando termines*"
+        # Function to handle language changes
+        def update_ui_language(language_name):
+            lang_code = LANGUAGES.get(language_name, "en")
+            
+            return (
+                f"# 🎵 {get_ui_message('title', lang_code)}",
+                get_ui_message('subtitle', lang_code),
+                gr.update(label=get_ui_message('choose_language', lang_code)),
+                gr.update(value=get_ui_message('rec_button', lang_code)),
+                f"*{get_ui_message('please_record', lang_code)}*",
+                gr.update(value=get_ui_message('send_button', lang_code)),
+                f"### {get_ui_message('ask_more', lang_code)}",
+                gr.update(placeholder=get_ui_message('chat_placeholder', lang_code)),
+                lang_code
+            )
+        
+        # Function to handle audio recording with automatic recognition
+        def toggle_audio_widget(lang_code):
+            # Mensaje detallado con instrucciones para solucionar problemas de micrófono
+            mobile_guidance = ""
+            
+            if lang_code == "en":
+                mobile_guidance = """
+*Recording... Click Stop when done. The song will be identified automatically.*
+
+**If you're having trouble with the microphone:**
+- Make sure your browser has permission to access your microphone
+- Make sure you're using a secure connection (HTTPS)
+- Your microphone might be in use by another application
+- Try refreshing the page and allow microphone access when prompted
+- If using a mobile device, try using Chrome or Safari
+                """
+            elif lang_code == "es":
+                mobile_guidance = """
+*Grabando... Haz clic en Detener cuando termines. La canción se identificará automáticamente.*
+
+**Si tienes problemas con el micrófono:**
+- Asegúrate de que tu navegador tiene permiso para acceder a tu micrófono
+- Asegúrate de que estás usando una conexión segura (HTTPS)
+- Tu micrófono podría estar siendo usado por otra aplicación
+- Intenta refrescar la página y permitir el acceso al micrófono cuando se te solicite
+- Si usas un dispositivo móvil, intenta usar Chrome o Safari
+                """
+            else:  # French
+                mobile_guidance = """
+*Enregistrement... Cliquez sur Arrêter quand vous avez terminé. La chanson sera identifiée automatiquement.*
+
+**Si vous avez des problèmes avec le microphone:**
+- Assurez-vous que votre navigateur a l'autorisation d'accéder à votre microphone
+- Assurez-vous que vous utilisez une connexion sécurisée (HTTPS)
+- Votre microphone pourrait être utilisé par une autre application
+- Essayez d'actualiser la page et d'autoriser l'accès au microphone lorsque vous y êtes invité
+- Si vous utilisez un appareil mobile, essayez d'utiliser Chrome ou Safari
+                """
+            
+            # Hacer visible el componente de audio
+            return (
+                gr.update(visible=True),
+                "loading",
+                mobile_guidance,
+                "",  # Clear processing indicator
+                ""   # Clear song identification
+            )
         
-        # Function to update status when audio is recorded
-        def update_audio_status(audio_path):
+        # Function to update status when audio is uploaded/recorded and trigger automatic recognition
+        def update_audio_status(audio_path, lang_code):
             if audio_path:
-                return "ready", "✅ *¡Audio cargado! Listo para reconocer. Presiona RECOGNIZE SONG*"
+                audio_loaded_msg = f"*{get_ui_message('audio_loaded', lang_code)}*"
+                # Activar automáticamente el reconocimiento
+                return (
+                    "ready",
+                    audio_loaded_msg,
+                    f"*{get_ui_message('searching_song', lang_code)}*",
+                    "",
+                    audio_path,
+                    lang_code
+                )
             else:
-                return "no_audio", "*Por favor, graba o sube un clip de audio*"
-        
-        # Recognition function (sin alemán)
-        def process_audio(audio_path, language_name, status):
-            if not audio_path or status != "ready":
-                return None, "", "", "*Por favor, graba un clip de audio primero*"
-            
-            lang_code = LANGUAGES.get(language_name, "en")
+                # Si no hay audio, probable problema con el micrófono
+                troubleshooting = ""
+                
+                if lang_code == "en":
+                    troubleshooting = """
+*No audio was recorded. Please try again.*
+
+**Microphone troubleshooting:**
+- Check if your browser shows a microphone permission dialog
+- Make sure microphone permissions are granted in your browser settings
+- Try using a different browser (Chrome or Safari recommended)
+- Check if your microphone is working in other applications
+                    """
+                elif lang_code == "es":
+                    troubleshooting = """
+*No se grabó audio. Por favor, inténtalo de nuevo.*
+
+**Solución de problemas de micrófono:**
+- Verifica si tu navegador muestra un diálogo de permiso de micrófono
+- Asegúrate de que los permisos de micrófono estén concedidos en la configuración de tu navegador
+- Intenta usar un navegador diferente (se recomienda Chrome o Safari)
+- Comprueba si tu micrófono funciona en otras aplicaciones
+                    """
+                else:  # French
+                    troubleshooting = """
+*Aucun audio n'a été enregistré. Veuillez réessayer.*
+
+**Dépannage du microphone:**
+- Vérifiez si votre navigateur affiche une boîte de dialogue d'autorisation de microphone
+- Assurez-vous que les autorisations de microphone sont accordées dans les paramètres de votre navigateur
+- Essayez d'utiliser un navigateur différent (Chrome ou Safari recommandé)
+- Vérifiez si votre microphone fonctionne dans d'autres applications
+                    """
+                
+                return (
+                    "no_audio",
+                    troubleshooting,
+                    "",  # Clear processing indicator
+                    "",  # Clear song identification
+                    None, # No audio path
+                    lang_code
+                )
+        
+        # Initial song recognition (just identifies the song)
+        def initial_song_recognition(audio_path, lang_code):
+            if not audio_path:
+                return "", ""
             
             try:
+                # Reconocer la canción
                 result = recognize_song(audio_path)
                 
                 if "error" in result:
-                    return None, "", "", f"Error al reconocer la canción: {result['error']}"
+                    return f"Error recognizing the song: {result['error']}", ""
                 
-                # Get artist information in selected language
-                artist_info = get_artist_info(result['Artist'], lang_code)
+                # Obtener datos básicos
+                song_name = result['Song']
+                artist_name = result['Artist']
                 
-                # Format recognition result based on language
-                if lang_code == "en":
-                    recognition_msg = f"### 🎵 Recognized Song: {result['Song']}\n\n"
-                    recognition_msg += f"**🎤 Artist:** {result['Artist']}\n"
-                    recognition_msg += f"**📀 Album:** {result['Album']}\n\n"
-                    if result['Spotify'] != "Not available":
-                        recognition_msg += f"**🎧 [Listen on Spotify]({result['Spotify']})**\n"
-                    if result['Apple Music'] != "Not available":
-                        recognition_msg += f"**🍏 [Listen on Apple Music]({result['Apple Music']})**\n"
-                elif lang_code == "es":
-                    recognition_msg = f"### 🎵 Canción Reconocida: {result['Song']}\n\n"
-                    recognition_msg += f"**🎤 Artista:** {result['Artist']}\n"
-                    recognition_msg += f"**📀 Álbum:** {result['Album']}\n\n"
-                    if result['Spotify'] != "Not available":
-                        recognition_msg += f"**🎧 [Escuchar en Spotify]({result['Spotify']})**\n"
-                    if result['Apple Music'] != "Not available":
-                        recognition_msg += f"**🍏 [Escuchar en Apple Music]({result['Apple Music']})**\n"
-                elif lang_code == "fr":
-                    recognition_msg = f"### 🎵 Chanson Reconnue: {result['Song']}\n\n"
-                    recognition_msg += f"**🎤 Artiste:** {result['Artist']}\n"
-                    recognition_msg += f"**📀 Album:** {result['Album']}\n\n"
-                    if result['Spotify'] != "Not available":
-                        recognition_msg += f"**🎧 [Écouter sur Spotify]({result['Spotify']})**\n"
-                    if result['Apple Music'] != "Not available":
-                        recognition_msg += f"**🍏 [Écouter sur Apple Music]({result['Apple Music']})**\n"
+                # Mensaje de identificación rápida
+                identified_song_msg = get_ui_message('identified_song', lang_code).format(
+                    song=song_name, 
+                    artist=artist_name
+                )
+                
+                # Mensaje de carga de info del artista
+                loading_artist_info_msg = get_ui_message('loading_artist_info', lang_code).format(
+                    artist=artist_name
+                )
+                
+                # Devolver solo el mensaje de identificación y el resultado
+                return identified_song_msg, json.dumps(result)
+                
+            except Exception as e:
+                error_msg = f"❌ {get_ui_message('processing_error', lang_code)}: {str(e)}"
+                return error_msg, ""
+        
+        # Load detailed artist information
+        def load_artist_info(song_result_json, lang_code):
+            if not song_result_json:
+                return "", "", "", "", ""
+            
+            try:
+                # Convertir el JSON a dict
+                result = json.loads(song_result_json)
+                
+                # Obtener datos básicos
+                song_name = result['Song']
+                artist_name = result['Artist']
+                
+                # Obtener información detallada del artista
+                artist_info = get_artist_info(artist_name, song_name, lang_code)
+                
+                # Format recognition result based on language (links y detalles)
+                recognition_msg = f"### 🎵 {get_ui_message('recognized_song', lang_code)}: {result['Song']}\n\n"
+                recognition_msg += f"**🎤 {get_ui_message('artist', lang_code)}:** {result['Artist']}\n"
+                recognition_msg += f"**📀 {get_ui_message('album', lang_code)}:** {result['Album']}\n\n"
+                
+                if result['Spotify'] != "Not available":
+                    recognition_msg += f"**🎧 [{get_ui_message('listen_spotify', lang_code)}]({result['Spotify']})**\n"
+                if result['Apple Music'] != "Not available":
+                    recognition_msg += f"**🍏 [{get_ui_message('listen_apple', lang_code)}]({result['Apple Music']})**\n"
                 
                 # Artist info section title based on language
-                if lang_code == "en":
-                    artist_facts_title = f"### 🌟 About {result['Artist']}\n\n"
-                elif lang_code == "es":
-                    artist_facts_title = f"### 🌟 Sobre {result['Artist']}\n\n"
-                elif lang_code == "fr":
-                    artist_facts_title = f"### 🌟 À propos de {result['Artist']}\n\n"
+                artist_facts_title = f"### 🌟 {get_ui_message('about_artist', lang_code)} {result['Artist']}\n\n"
                 
                 # Format the artist info with a title
                 artist_facts_content = artist_facts_title + artist_info
                 
                 # Update status message
-                status_msg = "*¡Canción reconocida con éxito! Haz preguntas sobre el artista en el chat abajo*"
+                status_msg = f"*{get_ui_message('song_recognized', lang_code)}*"
+                
+                return (
+                    recognition_msg,  # Recognition result with links
+                    artist_facts_content,  # Artist info
+                    status_msg,  # Status message
+                    song_name,  # Song name for state
+                    artist_name  # Artist name for state
+                )
                 
-                return result, recognition_msg, artist_facts_content, status_msg
-            
             except Exception as e:
-                return None, "", "", f"❌ Error procesando el audio: {str(e)}"
+                error_msg = f"❌ Error loading artist information: {str(e)}"
+                return error_msg, "", "", "", ""
         
         # Chat function
-        def process_chat(query, language_name, song_info, artist_info):
+        def process_chat(query, language_name, song_info, artist_info, lang_code):
             if not query:
                 return []
             
-            lang_code = LANGUAGES.get(language_name, "en")
-            
             try:
                 # Get response
                 response = chat_with_assistant(query, artist_info, lang_code)
                 
-                return [(query, response)]
+                return [{"role": "user", "content": query}, {"role": "assistant", "content": response}]
             except Exception as e:
-                return [(query, f"Lo siento, no pude procesar tu solicitud: {str(e)}")]
+                return [{"role": "user", "content": query}, {"role": "assistant", "content": f"Sorry, I couldn't process your request: {str(e)}"}]
+        
+        # Language selection event handler
+        language_dropdown.change(
+            fn=update_ui_language,
+            inputs=[language_dropdown],
+            outputs=[
+                title_component,
+                subtitle_component,
+                language_dropdown,
+                rec_btn,
+                audio_status_msg,
+                chat_btn,
+                chat_section_title,
+                chat_input,
+                lang_code
+            ]
+        )
         
-        # Event handlers
-        record_btn.click(
+        # Event handlers - Mostrar componente de audio al hacer clic en REC
+        rec_btn.click(
             fn=toggle_audio_widget,
+            inputs=[lang_code],
+            outputs=[
+                audio_input,
+                audio_status,
+                audio_status_msg,
+                processing_indicator,
+                song_identification
+            ]
+        ).then(
+            # Actualizar el estado del micrófono
+            fn=lambda: "Microphone activated. The song will be identified automatically when you stop recording.",
             inputs=[],
-            outputs=[audio_input, audio_status, audio_status_msg]
+            outputs=[microphone_status]
         )
         
+        # Reconocer automáticamente cuando se sube o graba audio
         audio_input.change(
             fn=update_audio_status,
-            inputs=[audio_input],
-            outputs=[audio_status, audio_status_msg]
-        )
-        
-        recognize_btn.click(
-            fn=process_audio,
-            inputs=[audio_input, language_dropdown, audio_status],
-            outputs=[song_info_state, recognition_results, artist_facts, audio_status_msg]
+            inputs=[audio_input, lang_code],
+            outputs=[
+                audio_status,
+                audio_status_msg,
+                processing_indicator,
+                song_identification,
+                # Pasamos estos dos para activar el reconocimiento automático
+                audio_input,  # Audio path
+                lang_code     # Language code
+            ]
+        ).then(
+            # Etapa 1: Identificación rápida de la canción
+            fn=initial_song_recognition,
+            inputs=[audio_input, lang_code],
+            outputs=[
+                song_identification,  # Mostrar inmediatamente el título identificado
+                song_info_state       # Guardar resultado para siguiente etapa
+            ]
         ).then(
-            fn=lambda a: a,
-            inputs=[artist_facts],
-            outputs=[artist_info_state]
+            # Etapa 2: Cargar información detallada del artista
+            fn=load_artist_info,
+            inputs=[song_info_state, lang_code],
+            outputs=[
+                recognition_results,  # Resultado con links 
+                artist_facts,         # Información del artista
+                audio_status_msg,     # Mensaje de estado
+                song_name_state,      # Guardar nombre de canción
+                artist_info_state     # Guardar nombre de artista
+            ]
         )
         
+        # Botón de chat
         chat_btn.click(
             fn=process_chat,
-            inputs=[chat_input, language_dropdown, song_info_state, artist_info_state],
+            inputs=[chat_input, language_dropdown, song_info_state, artist_info_state, lang_code],
             outputs=[chat_history]
         ).then(
             fn=lambda: "",  # Clear input after sending
@@ -415,11 +787,11 @@ with gr.Blocks(title="Music Recognition & Fun Facts") as demo:
         )
     
     with gr.Tab("Song History"):
-        gr.Markdown("### Historial de canciones reconocidas")
+        history_tab_title = gr.Markdown(f"### {get_ui_message('history_title', current_lang)}")
         
         with gr.Row():
-            history_limit = gr.Slider(minimum=5, maximum=50, value=10, step=5, label="Número de canciones a mostrar")
-            view_history_btn = gr.Button("📋 Ver Historial")
+            history_limit = gr.Slider(minimum=5, maximum=50, value=10, step=5, label=get_ui_message('songs_to_show', current_lang))
+            view_history_btn = gr.Button(get_ui_message('view_history', current_lang))
         
         history_output = gr.Markdown()
         
@@ -431,5 +803,32 @@ with gr.Blocks(title="Music Recognition & Fun Facts") as demo:
             inputs=[history_limit],
             outputs=[history_output]
         )
+        
+        # Update history tab language
+        def update_history_tab_language(lang_name):
+            lang_code = LANGUAGES.get(lang_name, 'en')
+            return (
+                f"### {get_ui_message('history_title', lang_code)}",
+                gr.update(label=get_ui_message('songs_to_show', lang_code)),
+                gr.update(value=get_ui_message('view_history', lang_code))
+            )
+        
+        language_dropdown.change(
+            fn=update_history_tab_language,
+            inputs=[language_dropdown],
+            outputs=[
+                history_tab_title,
+                history_limit,
+                view_history_btn
+            ]
+        )
 
-demo.launch()
+# Set the configuration for mobile compatibility
+demo.launch(
+    show_error=True, 
+    share=True,
+    inbrowser=True,
+    debug=True,
+    allowed_paths=[],
+    server_name="0.0.0.0"  # Esto permite conexiones desde cualquier dirección
+)