fix: add proper loading screen and fix initial music generation

src/audio/audio_generator.py

@@ -15,7 +15,7 @@ logger = logging.getLogger(__name__)
 client = genai.Client(api_key=settings.gemini_api_key.get_secret_value(), http_options={'api_version': 'v1alpha'})
 audio_queue = queue.Queue(maxsize=1)
 
-async def generate_music(request: gr.Request, receive_audio):
+async def generate_music(request: gr.Request, music_tone: str, receive_audio):
       async with (
         client.aio.live.music.connect(model='models/lyria-realtime-exp') as session,
         asyncio.TaskGroup() as tg,
@@ -26,14 +26,14 @@ async def generate_music(request: gr.Request, receive_audio):
         # Send initial prompts and config
         await session.set_weighted_prompts(
           prompts=[
-            types.WeightedPrompt(text='The mysterious music of the forest', weight=1.0),
+            types.WeightedPrompt(text=music_tone, weight=1.0),
           ]
         )
         await session.set_music_generation_config(
           config=types.LiveMusicGenerationConfig(bpm=90, temperature=1.0)
         )
         await session.play()
-        logger.info(f"Started music generation for session {request.session_hash}")
+        logger.info(f"Started music generation for session {request.session_hash}, music tone: {music_tone}")
         sessions[request.session_hash] = session
         
 async def change_music_tone(request: gr.Request, new_tone):
@@ -65,9 +65,9 @@ async def receive_audio(session):
 
 sessions = {}
 
-async def start_music_generation(request: gr.Request):
+async def start_music_generation(request: gr.Request, music_tone: str):
     """Start the music generation in a separate thread."""
-    await generate_music(request, receive_audio)
+    await generate_music(request, music_tone, receive_audio)
     
 async def cleanup_music_session(request: gr.Request):
     if request.session_hash in sessions:

src/css.py

@@ -123,4 +123,26 @@ img {
 .overlay-content .form {
     background: transparent !important;
 }
+"""
+
+# CSS for the loading indicator
+loading_css_styles = """
+#loading-indicator {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
+    /* When Gradio makes this gr.Column visible, it will set display:flex !important; (or similar). */
+    /* These properties will then apply to center the content of the Column: */
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; /* Ensure it's on top */
+}
+#loading-indicator .loading-text { /* Style for the text inside */
+    color: white;
+    font-size: 2em;
+    text-align: center;
+}
 """

src/game_constructor.py

@@ -5,6 +5,8 @@ from game_setting import Character, GameSetting
 from game_state import story, state, get_current_scene
 from agent.llm_agent import process_user_input
 from images.image_generator import generate_image
+from audio.audio_generator import start_music_generation
+import asyncio
 
 # Predefined suggestions for demo
 SETTING_SUGGESTIONS = [
@@ -106,6 +108,7 @@ def save_game_config(
         return f"❌ Error saving configuration: {str(e)}"
 
 async def start_game_with_settings(
+    request: gr.Request,
     setting_desc: str,
     char_name: str,
     char_age: str,
@@ -119,6 +122,7 @@ async def start_game_with_settings(
     ):
         return (
             gr.update(visible=True),  # constructor_interface
+            gr.update(visible=False),  # loading indicator
             gr.update(visible=False),  # game_interface
             gr.update(
                 value="❌ Please fill in all fields before starting the game.",
@@ -155,8 +159,14 @@ NOTE FOR THE ASSISTANT: YOU HAVE TO GENERATE THE IMAGE FOR THE START SCENE.
 """
 
     response = await process_user_input(initial_story)
+    
+    music_tone = response.change_music.music_description
+    
+    if music_tone:
+        asyncio.create_task(start_music_generation(request, music_tone))
 
     img = "forest.jpg"
+    
     if response.change_scene.change_scene:
         img_path, _ = await generate_image(response.change_scene.scene_description)
         if img_path:
@@ -174,6 +184,7 @@ NOTE FOR THE ASSISTANT: YOU HAVE TO GENERATE THE IMAGE FOR THE START SCENE.
     scene_text, scene_image, scene_choices = get_current_scene()
 
     return (
+        gr.update(visible=False),  # loading indicator
         gr.update(visible=False),  # constructor_interface
         gr.update(visible=True),  # game_interface
         gr.update(visible=False),  # error_message

src/main.py

@@ -1,8 +1,7 @@
 import gradio as gr
-from css import custom_css
+from css import custom_css, loading_css_styles
 from audio.audio_generator import (
     update_audio,
-    start_music_generation,
     change_music_tone,
     cleanup_music_session,
 )
@@ -25,8 +24,9 @@ logger = logging.getLogger(__name__)
 
 
 def return_to_constructor():
-    """Return to the game constructor interface"""
+    """Return to the game constructor interface, ensure loading is hidden."""
     return (
+        gr.update(visible=False),  # loading_indicator
         gr.update(visible=True),  # constructor_interface
         gr.update(visible=False),  # game_interface
         gr.update(visible=False),  # error_message
@@ -102,26 +102,42 @@ async def start_game_with_music(
     genre: str,
 ):
     """Start the game with custom settings and initialize music"""
+    yield (
+        gr.update(visible=True),  # loading indicator
+        gr.update(),  # constructor_interface
+        gr.update(),  # game_interface
+        gr.update(),  # error_message
+        gr.update(),
+        gr.update(),
+        gr.update(),  # game components unchanged
+    )
+
     # First, get the game interface updates
     result = await start_game_with_settings(
-        setting_desc, char_name, char_age, char_background, char_personality, genre
+        request,
+        setting_desc,
+        char_name,
+        char_age,
+        char_background,
+        char_personality,
+        genre,
     )
-    # If game is starting successfully (interface is switching), start music
-    if len(result) >= 2 and result[1].get(
-        "visible", False
-    ):  # game_interface becoming visible
-        asyncio.create_task(start_music_generation(request))
-
-    if state["scene"] in story and "music_tone" in story[state["scene"]]:
-        await change_music_tone(request, story[state["scene"]]["music_tone"])
+    yield result
 
-    return result
 
 with gr.Blocks(
-    theme="soft", title="Game Constructor & Visual Novel", css=custom_css
+    theme="soft",
+    title="Game Constructor & Visual Novel",
+    css=custom_css + loading_css_styles,
 ) as demo:
+    # Fullscreen Loading Indicator (hidden by default)
+    with gr.Column(visible=False, elem_id="loading-indicator") as loading_indicator:
+        gr.HTML("<div class='loading-text'>🚀 Starting your adventure...</div>")
+
     # Constructor Interface (visible by default)
-    with gr.Column(visible=True, elem_id="constructor-interface") as constructor_interface:
+    with gr.Column(
+        visible=True, elem_id="constructor-interface"
+    ) as constructor_interface:
         gr.Markdown("# 🎮 Interactive Game Constructor")
         gr.Markdown(
             "Create your own interactive story game by defining the setting, character, and genre!"
@@ -289,6 +305,7 @@ with gr.Blocks(
             genre_selection,
         ],
         outputs=[
+            loading_indicator,
             constructor_interface,
             game_interface,
             error_message,
@@ -301,7 +318,12 @@ with gr.Blocks(
     back_btn.click(
         fn=return_to_constructor,
         inputs=[],
-        outputs=[constructor_interface, game_interface, error_message],
+        outputs=[
+            loading_indicator,
+            constructor_interface,
+            game_interface,
+            error_message,
+        ],
     )
 
     game_choices.change(