Update app.py

app.py

@@ -9,14 +9,13 @@ 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')
+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 - removed German
+# Supported languages
 LANGUAGES = {
     "English": "en",
     "Español": "es",
@@ -27,16 +26,14 @@ LANGUAGES = {
 UI_MESSAGES = {
     "en": {
         "title": "Music Recognition & Fun Facts",
-        "subtitle": "Record a song and get interesting facts about the artist",
+        "subtitle": "Identify songs, learn interesting facts about artists, and chat about music",
         "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",
+        "rec_button": " REC MUSIC",
+        "please_record": "Please record or upload an audio clip",
         "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}...",
+        "audio_loaded": " Audio loaded! Processing song recognition...",
+        "loading_audio": "Please wait while the audio is loading",
+        "searching_song": "Searching for your song in the sound multiverse, please wait to discover incredible facts about your 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",
@@ -45,7 +42,7 @@ UI_MESSAGES = {
         "history_tab": "Song History",
         "history_title": "History of recognized songs",
         "songs_to_show": "Number of songs to show",
-        "view_history": "📋 View History",
+        "view_history": " View History",
         "recognized_song": "Recognized Song",
         "artist": "Artist",
         "album": "Album",
@@ -56,16 +53,14 @@ UI_MESSAGES = {
     },
     "es": {
         "title": "Reconocimiento de Música y Datos Curiosos",
-        "subtitle": "Graba una canción y obtén datos interesantes sobre el artista",
+        "subtitle": "Identifica canciones, aprende datos interesantes sobre artistas y chatea sobre música",
         "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",
+        "rec_button": " GRABAR MÚSICA",
+        "please_record": "Por favor graba o sube un clip 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}...",
+        "audio_loaded": " ¡Audio cargado! Procesando el reconocimiento de la canción...",
+        "loading_audio": "Por favor espera mientras se carga el audio",
+        "searching_song": "Buscando tu canción en el multiverso sonoro, espera para descubrir datos increíbles sobre tu artista.",
         "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",
@@ -74,7 +69,7 @@ UI_MESSAGES = {
         "history_tab": "Historial de Canciones",
         "history_title": "Historial de canciones reconocidas",
         "songs_to_show": "Número de canciones para mostrar",
-        "view_history": "📋 Ver Historial",
+        "view_history": " Ver Historial",
         "recognized_song": "Canción Reconocida",
         "artist": "Artista",
         "album": "Álbum",
@@ -85,16 +80,14 @@ UI_MESSAGES = {
     },
     "fr": {
         "title": "Reconnaissance de Musique et Anecdotes",
-        "subtitle": "Enregistrez une chanson et découvrez des faits intéressants sur l'artiste",
+        "subtitle": "Identifiez des chansons, découvrez des faits intéressants sur les artistes et discutez de musique",
         "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",
+        "rec_button": " ENREGISTRER MUSIQUE",
+        "please_record": "Veuillez enregistrer ou télécharger un clip 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}...",
+        "audio_loaded": " Audio chargé ! Traitement de la reconnaissance de la chanson...",
+        "loading_audio": "Veuillez patienter pendant le chargement de l'audio",
+        "searching_song": "Recherche de votre chanson dans le multivers sonore, patientez pour découvrir des faits incroyables sur votre artiste.",
         "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",
@@ -103,7 +96,7 @@ UI_MESSAGES = {
         "history_tab": "Historique des Chansons",
         "history_title": "Historique des chansons reconnues",
         "songs_to_show": "Nombre de chansons à afficher",
-        "view_history": "📋 Voir l'historique",
+        "view_history": " Voir l'historique",
         "recognized_song": "Chanson Reconnue",
         "artist": "Artiste",
         "album": "Album",
@@ -122,35 +115,24 @@ def recognize_song(audio_path: str) -> dict:
         audio_path: path to the audio file to recognize
     """
     AUDD_API_TOKEN = os.getenv("AUDD_API_TOKEN")
-    
     if not os.path.exists(audio_path):
         return {"error": "The audio file does not exist"}
-    
     try:
         with open(audio_path, 'rb') as file:
             data = {
                 'api_token': AUDD_API_TOKEN,
                 'return': 'spotify,apple_music'
             }
-            files = {
-                'file': file
-            }
+            files = {'file': file}
             response = requests.post('https://api.audd.io/', data=data, files=files)
-            
         if response.status_code != 200:
             return {"error": f"API Error: {response.status_code}"}
-            
         result = response.json()
-        
         if result['status'] == 'error':
             return {"error": result['error']['error_message']}
-            
         if not result.get('result'):
             return {"error": "Could not recognize the song"}
-            
         song_info = result['result']
-        
-        # Create object with song information
         song_data = {
             "Song": song_info.get('title', 'Unknown'),
             "Artist": song_info.get('artist', 'Unknown'),
@@ -159,12 +141,8 @@ def recognize_song(audio_path: str) -> dict:
             "Apple Music": song_info.get('apple_music', {}).get('url', 'Not available'),
             "Recognition Date": datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
         }
-        
-        # Save to history
         save_to_history(song_data)
-        
         return song_data
-        
     except Exception as e:
         return {"error": f"Error processing audio: {str(e)}"}
 
@@ -172,7 +150,6 @@ def recognize_song(audio_path: str) -> dict:
 def save_to_history(song_data):
     """Saves a song to the history"""
     try:
-        # Load existing history or create new
         if os.path.exists(HISTORY_FILE):
             with open(HISTORY_FILE, 'r') as f:
                 try:
@@ -181,18 +158,11 @@ def save_to_history(song_data):
                     history = []
         else:
             history = []
-        
-        # Add song to the beginning of history (most recent first)
         history.insert(0, song_data)
-        
-        # Limit history to the 50 most recent songs
         if len(history) > 50:
             history = history[:50]
-        
-        # Save updated history
         with open(HISTORY_FILE, 'w') as f:
             json.dump(history, f, indent=2)
-            
     except Exception as e:
         print(f"Error saving to history: {str(e)}")
 
@@ -205,37 +175,25 @@ def view_song_history(limit: int = 10) -> str:
     """
     try:
         if not os.path.exists(HISTORY_FILE):
-            return "📋 No song recognition history yet."
-        
+            return " No song recognition history yet."
         with open(HISTORY_FILE, 'r') as f:
             try:
                 history = json.load(f)
             except json.JSONDecodeError:
                 return "📋 Error loading song history."
-        
         if not history:
             return "📋 Song history is empty."
-        
-        # Limit the number of songs to display
         history = history[:min(limit, len(history))]
-        
-        # Format output
         result = "📋 **Song Recognition History:**\n\n"
-        
         for i, song in enumerate(history, 1):
             result += f"{i}. **{song.get('Song', 'Unknown')}** - *{song.get('Artist', 'Unknown')}*\n"
             result += f"   📀 Album: {song.get('Album', 'Unknown')}\n"
-            
             if song.get('Spotify', 'Not available') != 'Not available':
                 result += f"   🎧 [Spotify]({song.get('Spotify')})\n"
-                
             if song.get('Apple Music', 'Not available') != 'Not available':
                 result += f"   🍏 [Apple Music]({song.get('Apple Music')})\n"
-                
             result += f"   🕒 Recognized on: {song.get('Recognition Date', 'Unknown date')}\n\n"
-        
         return result
-        
     except Exception as e:
         return f"❌ Error getting history: {str(e)}"
 
@@ -243,32 +201,20 @@ def view_song_history(limit: int = 10) -> str:
 @tool
 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
     prompts = {
         "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
     if language not in prompts:
         language = "en"
-    
-    # Create messages for the model
-    messages = [
-        {"role": "user", "content": prompts[language]}
-    ]
-    
+    messages = [{"role": "user", "content": prompts[language]}]
     try:
-        # Using the same model that powers our agent
         response = model(messages)
         return response.content
     except Exception as e:
@@ -283,30 +229,19 @@ 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
     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.",
         "fr": "Vous êtes un assistant expert en musique qui se spécialise dans la fourniture d'informations intéressantes sur les artistes, les chansons et l'histoire de la musique. Concentrez-vous sur le partage de faits intéressants et amusants qui mettent en évidence les contributions uniques et les histoires de l'artiste."
     }
-    
-    # Default to English if language not supported
     if language not in system_messages:
         language = "en"
-    
-    # Create context
-    context = ""
-    if artist_info:
-        context = f"Previous context about the artist: {artist_info}\n\n"
-    
-    # Create messages for the model
+    context = f"Previous context about the artist: {artist_info}\n\n" if artist_info else ""
     messages = [
         {"role": "system", "content": system_messages[language]},
         {"role": "user", "content": context + query}
     ]
-    
     try:
-        # Using the model to generate a response
         response = model(messages)
         return response.content
     except Exception as e:
@@ -320,20 +255,12 @@ model = HfApiModel(
     model_id='Qwen/Qwen2.5-Coder-32B-Instruct',
     custom_role_conversions=None,
 )
-
 with open("prompts.yaml", 'r') as stream:
     prompt_templates = yaml.safe_load(stream)
 
-# Agent definition
 agent = CodeAgent(
     model=model,
-    tools=[
-        final_answer,
-        recognize_song,
-        view_song_history,
-        get_artist_info,
-        chat_with_assistant
-    ],
+    tools=[final_answer, recognize_song, view_song_history, get_artist_info, chat_with_assistant],
     max_steps=8,
     verbosity_level=1,
     grammar=None,
@@ -345,58 +272,14 @@ agent = CodeAgent(
 
 # 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;
-    }
+    .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;
+        .large-button {width: 100% !important; margin-bottom: 10px !important;}
+        #audio-input {width: 100% !important; margin-top: 10px !important; margin-bottom: 10px !important;}
+        button.record, button.stop {width: 60px !important; height: 60px !important; border-radius: 50% !important;}
+        .error-text {color: red !important; font-weight: bold !important; font-size: 16px !important;}
     }
+    #mic-status {margin-top: 5px; margin-bottom: 15px; font-style: italic;}
 """) as demo:
     # State variables
     selected_language = gr.State("en")
@@ -404,19 +287,19 @@ with gr.Blocks(title="Music Recognition & Fun Facts", css="""
     song_info_state = gr.State(None)
     artist_info_state = gr.State("")
     song_name_state = gr.State("")
-    audio_status = gr.State("no_audio")  # States: no_audio, loading, ready, processing
-    
+    audio_status = gr.State("no_audio")
+
     # 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
     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(
@@ -424,23 +307,17 @@ with gr.Blocks(title="Music Recognition & Fun Facts", css="""
             value="English",
             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(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):
-                # Audio input siempre visible
                 audio_input = gr.Audio(
                     label="Audio Recording",
-                    type="filepath", 
-                    visible=True,
+                    type="filepath",
+                    visible=False,
                     sources=["microphone", "upload"],
                     streaming=False,
                     elem_id="audio-input",
@@ -449,9 +326,7 @@ with gr.Blocks(title="Music Recognition & Fun Facts", css="""
                     show_download_button=False,
                     interactive=True
                 )
-                
-                # Solo un botón que abre el audio y después identifica
-                rec_btn = gr.Button(
+                record_btn = gr.Button(
                     get_ui_message('rec_button', current_lang),
                     size="lg",
                     variant="primary",
@@ -459,21 +334,22 @@ with gr.Blocks(title="Music Recognition & Fun Facts", css="""
                     elem_id="record-button",
                     elem_classes="large-button"
                 )
-                
-                # Indicador de estado del micrófono/proceso
-                microphone_status = gr.Markdown("", elem_id="mic-status")
+                microphone_status = gr.Markdown("Please click 'REC MUSIC' to start recording.", elem_id="mic-status")
         
+        # Song title display (nuevo componente para mostrar el título inmediatamente)
+        song_title_display = gr.Markdown("")
+
         # Processing indicator
         with gr.Row():
             processing_indicator = gr.Markdown("")
         
-        # Artist info section
+        # Recognition results section
         with gr.Row():
-            artist_facts = gr.Markdown("")
+            recognition_results = gr.Markdown("")
         
-        # Recognition results section with links
+        # Artist info section
         with gr.Row():
-            recognition_results = gr.Markdown("")
+            artist_facts = gr.Markdown("")
         
         # Chat section
         with gr.Row():
@@ -490,321 +366,212 @@ with gr.Blocks(title="Music Recognition & Fun Facts", css="""
                 get_ui_message('send_button', current_lang),
                 variant="primary"
             )
-        
-        # Function to handle language changes
-        def update_ui_language(language_name):
-            lang_code = LANGUAGES.get(language_name, "en")
-            
+
+    # 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
+    def toggle_audio_widget(lang_code):
+        mobile_guidance = {
+            "en": "Recording... Click Stop when done\n\nIf you're having trouble with the microphone:\n- Ensure your browser has microphone permission\n- Use a secure connection (HTTPS)\n- Check if another app is using the microphone\n- Refresh the page and allow microphone access\n- On mobile, use Chrome or Safari",
+            "es": "Grabando... Haz clic en Detener cuando termines\n\nSi tienes problemas con el micrófono:\n- Asegúrate de que tu navegador tenga permiso para el micrófono\n- Usa una conexión segura (HTTPS)\n- Verifica si otra app está usando el micrófono\n- Refresca la página y permite el acceso\n- En móviles, usa Chrome o Safari",
+            "fr": "Enregistrement... Cliquez sur Arrêter quand vous avez terminé\n\nSi vous avez des problèmes avec le microphone:\n- Assurez-vous que votre navigateur a l'autorisation\n- Utilisez une connexion sécurisée (HTTPS)\n- Vérifiez si une autre application utilise le micro\n- Rafraîchissez la page et autorisez l'accès\n- Sur mobile, utilisez Chrome ou Safari"
+        }
+        return (
+            gr.update(visible=True),
+            "loading",
+            mobile_guidance.get(lang_code, mobile_guidance["en"]),
+            ""  # Clear processing indicator
+        )
+
+    # Function to update status and trigger recognition
+    def update_audio_status(audio_path, lang_code):
+        if audio_path:
             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
+                "ready",
+                f"{get_ui_message('audio_loaded', lang_code)}",
+                ""  # Clear processing indicator
             )
-        
-        # 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
+        else:
+            troubleshooting = {
+                "en": "No audio recorded. Please try again.\n\nMicrophone troubleshooting:\n- Check browser microphone permissions\n- Use Chrome or Safari\n- Ensure no other app is using the microphone",
+                "es": "No se grabó audio. Intenta de nuevo.\n\nSolución de problemas:\n- Verifica los permisos del micrófono en el navegador\n- Usa Chrome o Safari\n- Asegúrate de que ninguna otra app use el micrófono",
+                "fr": "Aucun audio enregistré. Réessayez.\n\nDépannage:\n- Vérifiez les autorisations du microphone\n- Utilisez Chrome ou Safari\n- Assurez-vous qu'aucune autre app n'utilise le micro"
+            }
             return (
-                gr.update(visible=True),
-                "loading",
-                mobile_guidance,
-                "",  # Clear processing indicator
-                ""   # Clear song identification
+                "no_audio",
+                troubleshooting.get(lang_code, troubleshooting["en"]),
+                ""  # Clear processing indicator
             )
-        
-        # Function to update status when audio is uploaded/recorded and trigger automatic recognition
-        def update_audio_status(audio_path, lang_code):
-            if audio_path:
-                audio_loaded_msg = f"*{get_ui_message('audio_loaded', lang_code)}*"
-                # Activar automáticamente el reconocimiento
+
+    # Recognition function with immediate song title display
+    def process_audio(audio_path, language_name, status, lang_code):
+        if not audio_path or status != "ready":
+            return (
+                None,
+                "",
+                "",
+                "",
+                f"{get_ui_message('no_audio_error', lang_code)}",
+                "",
+                "",
+                ""
+            )
+        try:
+            # First step: Recognize the song and show the title immediately
+            result = recognize_song(audio_path)
+            if "error" in result:
                 return (
-                    "ready",
-                    audio_loaded_msg,
-                    f"*{get_ui_message('searching_song', lang_code)}*",
+                    None,
                     "",
-                    audio_path,
-                    lang_code
-                )
-            else:
-                # 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 f"Error recognizing the song: {result['error']}", ""
-                
-                # Obtener datos básicos
-                song_name = result['Song']
-                artist_name = result['Artist']
-                
-                # 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
-                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 = 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
+                    "",
+                    "",
+                    f"Error recognizing the song: {result['error']}",
+                    "",
+                    "",
+                    ""
                 )
-                
-            except Exception as 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, lang_code):
-            if not query:
-                return []
-            
-            try:
-                # Get response
-                response = chat_with_assistant(query, artist_info, lang_code)
-                
-                return [{"role": "user", "content": query}, {"role": "assistant", "content": response}]
-            except Exception as 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 - 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=[microphone_status]
-        )
-        
-        # Reconocer automáticamente cuando se sube o graba audio
-        audio_input.change(
-            fn=update_audio_status,
-            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(
-            # 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, lang_code],
-            outputs=[chat_history]
-        ).then(
-            fn=lambda: "",  # Clear input after sending
-            inputs=[],
-            outputs=[chat_input]
-        )
-    
+            song_name = result['Song']
+            artist_name = result['Artist']
+            song_title_msg = f"🎵 **{song_name}** by {artist_name}"
+
+            # Second step: Prepare detailed recognition info
+            recognition_msg = f"### {get_ui_message('recognized_song', lang_code)}: {song_name}\n\n"
+            recognition_msg += f"{get_ui_message('artist', lang_code)}: {artist_name}\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)} ([Spotify]({result['Spotify']}))\n"
+            if result['Apple Music'] != "Not available":
+                recognition_msg += f"[{get_ui_message('listen_apple', lang_code)}]({result['Apple Music']})\n"
+
+            # Third step: Get artist info
+            artist_info = get_artist_info(artist_name, song_name, lang_code)
+            artist_facts_title = f"### {get_ui_message('about_artist', lang_code)} {artist_name}\n\n"
+            artist_facts_content = artist_facts_title + artist_info
+
+            status_msg = f"{get_ui_message('song_recognized', lang_code)}"
+            return (
+                result,
+                song_name,
+                song_title_msg,
+                recognition_msg,
+                artist_facts_content,
+                status_msg,
+                "",
+                artist_name
+            )
+        except Exception as e:
+            return (
+                None,
+                "",
+                "",
+                "",
+                f"{get_ui_message('processing_error', lang_code)}: {str(e)}",
+                "",
+                "",
+                ""
+            )
+
+    # Chat function
+    def process_chat(query, language_name, song_info, artist_info, lang_code):
+        if not query:
+            return []
+        try:
+            response = chat_with_assistant(query, artist_info, lang_code)
+            return [{"role": "user", "content": query}, {"role": "assistant", "content": response}]
+        except Exception as 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,
+            record_btn,
+            audio_status_msg,
+            chat_btn,
+            chat_section_title,
+            chat_input,
+            lang_code
+        ]
+    )
+
+    # Event handlers
+    record_btn.click(
+        fn=toggle_audio_widget,
+        inputs=[lang_code],
+        outputs=[
+            audio_input,
+            audio_status,
+            audio_status_msg,
+            processing_indicator
+        ]
+    ).then(
+        fn=lambda: "Microphone activated. Please speak or sing the song you want to recognize.",
+        inputs=[],
+        outputs=[microphone_status]
+    )
+
+    audio_input.change(
+        fn=update_audio_status,
+        inputs=[audio_input, lang_code],
+        outputs=[audio_status, audio_status_msg, processing_indicator]
+    ).then(
+        fn=process_audio,
+        inputs=[audio_input, language_dropdown, audio_status, lang_code],
+        outputs=[
+            song_info_state,
+            song_name_state,
+            song_title_display,
+            recognition_results,
+            artist_facts,
+            audio_status_msg,
+            processing_indicator,
+            artist_info_state
+        ]
+    )
+
+    chat_btn.click(
+        fn=process_chat,
+        inputs=[chat_input, language_dropdown, song_info_state, artist_info_state, lang_code],
+        outputs=[chat_history]
+    ).then(
+        fn=lambda: "",
+        inputs=[],
+        outputs=[chat_input]
+    )
+
     with gr.Tab("Song History"):
         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=get_ui_message('songs_to_show', current_lang))
             view_history_btn = gr.Button(get_ui_message('view_history', current_lang))
-        
         history_output = gr.Markdown()
-        
+
         def view_history_process(limit):
             return view_song_history(int(limit))
-        
+
         view_history_btn.click(
             fn=view_history_process,
             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 (
@@ -812,23 +579,18 @@ with gr.Blocks(title="Music Recognition & Fun Facts", css="""
                 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
-            ]
+            outputs=[history_tab_title, history_limit, view_history_btn]
         )
 
-# Set the configuration for mobile compatibility
 demo.launch(
-    show_error=True, 
+    show_error=True,
     share=True,
     inbrowser=True,
     debug=True,
     allowed_paths=[],
-    server_name="0.0.0.0"  # Esto permite conexiones desde cualquier dirección
+    server_name="0.0.0.0"
 )