Upload 2 files

app.py

@@ -314,19 +314,80 @@ def respond(message, chat_history, affection, history, scene_params):
     new_history = history + [(message, bot_message)]
     chat_history.append((message, bot_message))
     theme_name = final_scene_params.get("theme", "default")
-    background_html = f'<div class="chat-background {theme_name}"></div>'
+    
+    # より強力な背景更新用のHTMLを生成
+    background_html = f'''
+    <div class="chat-background {theme_name}"></div>
+    <style>
+    .chat-background {{
+        background-image: url({THEME_URLS.get(theme_name, THEME_URLS["default"])}) !important;
+    }}
+    </style>
+    '''
+    
     return "", chat_history, new_affection, stage_name, new_affection, new_history, final_scene_params, background_html
 
-with gr.Blocks(css="style.css", theme=gr.themes.Soft(primary_hue="rose", secondary_hue="pink")) as demo:
+# カスタムCSSを読み込む
+with open("style.css", "r") as f:
+    custom_css = f.read()
+
+# Gradio 5.x対応のテーマ設定
+try:
+    # Gradio 5.x
+    custom_theme = gr.themes.Soft(
+        primary_hue="rose",
+        secondary_hue="pink",
+    )
+    # Gradio 5.xでは.setメソッドが廃止されているため、直接プロパティを設定
+    custom_theme.body_background_fill = "rgba(255, 255, 255, 0.2)"
+    custom_theme.block_background_fill = "rgba(255, 255, 255, 0.1)"
+    custom_theme.block_label_background_fill = "rgba(255, 255, 255, 0.2)"
+    custom_theme.input_background_fill = "rgba(255, 255, 255, 0.6)"
+    custom_theme.chatbot_code_background_fill = "rgba(0, 0, 0, 0.1)"
+except AttributeError:
+    # Gradio 3.x/4.x
+    custom_theme = gr.themes.Soft(
+        primary_hue="rose",
+        secondary_hue="pink",
+    ).set(
+        body_background_fill="rgba(255, 255, 255, 0.2)",
+        block_background_fill="rgba(255, 255, 255, 0.1)",
+        block_label_background_fill="rgba(255, 255, 255, 0.2)",
+        input_background_fill="rgba(255, 255, 255, 0.6)",
+        chatbot_code_background_fill="rgba(0, 0, 0, 0.1)",
+    )
+
+with gr.Blocks(css=custom_css, theme=custom_theme) as demo:
     scene_state = gr.State(DEFAULT_SCENE_PARAMS)
     affection_state = gr.State(30)
     history_state = gr.State([])
+    
+    # 背景コンテナを先に配置
+    background_display = gr.HTML(f'<div class="chat-background {DEFAULT_SCENE_PARAMS["theme"]}"></div>', elem_id="background_container")
+    
     gr.Markdown("# 麻理チャット")
     with gr.Row():
         with gr.Column(scale=2):
             with gr.Column(elem_id="chat_container"):
-                background_display = gr.HTML(f'<div class="chat-background {DEFAULT_SCENE_PARAMS["theme"]}"></div>', elem_id="background_container")
-                chatbot = gr.Chatbot(label="麻理との会話", bubble_full_width=False, elem_id="chat_area", show_label=False)
+                # Gradio 5.x対応のChatbot設定
+                try:
+                    # Gradio 5.x
+                    chatbot = gr.Chatbot(
+                        label="麻理との会話", 
+                        elem_id="chat_area", 
+                        show_label=False,
+                        # Gradio 5.xでは bubble_full_width が廃止され、container が使用される
+                        container=False,
+                        avatar_images=["👤", "🤖"]
+                    )
+                except TypeError:
+                    # Gradio 3.x/4.x
+                    chatbot = gr.Chatbot(
+                        label="麻理との会話", 
+                        bubble_full_width=False, 
+                        elem_id="chat_area", 
+                        show_label=False
+                    )
             msg_input = gr.Textbox(label="あなたのメッセージ", placeholder="「水族館はどう？」と聞いた後、「いいね、行こう！」のように返してみてください", scale=5, show_label=False)
         with gr.Column(scale=1):
             stage_display = gr.Textbox(label="現在の関係ステージ", interactive=False, value=get_relationship_stage(30))

requirements.txt

@@ -1,4 +1,4 @@
-gradio
+gradio>=5.0.0
 google-generativeai
 groq
 python-dotenv