Upload 2 files

app.py

@@ -26,12 +26,23 @@ except Exception as e:
     sentiment_analyzer = None
     print(f"モデルのロードエラー: {e}")
 
+# テーマ名と背景画像のURLをマッピング
+THEME_URLS = {
+    "default": "https://i.ibb.co/XzP6K2Y/room-day.png",
+    "room_night": "https://i.ibb.co/d5m821p/room-night.png",
+    "beach_sunset": "https://i.ibb.co/Q9r56s4/beach-sunset.png",
+    "festival_night": "https://i.ibb.co/3zdJ6Bw/festival-night.png",
+    "shrine_day": "https://i.ibb.co/L51Jd3x/shrine-day.png",
+    "cafe_afternoon": "https://i.ibb.co/yQxG4vs/cafe-afternoon.png",
+    "aquarium_night": "https://i.ibb.co/dK5r5rc/aquarium-night.png"
+}
+
 DEFAULT_SCENE_PARAMS = {
   "theme": "default", "personality_mod": "ストレートだが根は優しい",
   "tone": "普通のトーン", "constraints": ["キャラクター設定から逸脱しない"]
 }
 
-# --- 2. LLMによる役割分担システム ---
+# --- 2. LLMによる役割分担システム (変更なし) ---
 def detect_scene_change(history, message):
     history_text = "\n".join([f"ユーザー: {u}\n麻理: {m}" for u, m in history[-4:]])
     prompt = f"""
@@ -81,7 +92,6 @@ def generate_scene_instruction_with_groq(affection, stage_name, scene, previous_
             model="llama3-8b-8192", temperature=0.8, response_format={"type": "json_object"},
         )
         params = json.loads(chat_completion.choices[0].message.content)
-        print("生成された指示書JSON:", params)
         return params
     except Exception as e:
         print(f"指示書生成エラー(Groq): {e}")
@@ -128,6 +138,8 @@ def update_affection(message, affection):
     except Exception: return affection
     return affection
 
+# --- 3. メインの応答処理とUI構築 ---
+
 def respond(message, chat_history, affection, history, scene_params):
     new_affection = update_affection(message, affection)
     stage_name = get_relationship_stage(new_affection)
@@ -148,43 +160,46 @@ def respond(message, chat_history, affection, history, scene_params):
     chat_history.append((message, bot_message))
     theme_name = final_scene_params.get("theme", "default")
     
-    # JavaScriptを、#main_containerのクラスを書き換えるように変更
-    js_script = f"""
-    <script>
-        setTimeout(() => {{
-            const container = document.getElementById('main_container');
-            if(container){{
-                console.log("Applying theme to #main_container:", "{theme_name}");
-                const themes = ["theme-default", "theme-room_night", "theme-beach_sunset", "theme-festival_night", "theme-shrine_day", "theme-cafe_afternoon", "theme-aquarium_night"];
-                container.classList.remove(...themes);
-                container.classList.add("theme-{theme_name}");
-            }}
-        }}, 50);
-    </script>
+    # ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
+    # ★★★★★★★★★★★★★ 修正の中心部分 ★★★★★★★★★★★★★★
+    # ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
+    # Gradio 5.xに対応した、CSS変数を直接上書きする<style>タグを生成
+    background_url = THEME_URLS.get(theme_name, THEME_URLS["default"])
+    style_override = f"""
+    <style>
+        :root {{
+            --body-background-fill: url('{background_url}') !important;
+            --body-background-fill-dark: url('{background_url}') !important;
+            --body-background-fill-transition: background-image 1s ease-in-out !important;
+        }}
+        body {{
+             background-size: cover !important;
+             background-position: center !important;
+        }}
+    </style>
     """
     
-    return "", chat_history, new_affection, stage_name, new_affection, new_history, final_scene_params, js_script
+    return "", chat_history, new_affection, stage_name, new_affection, new_history, final_scene_params, style_override
 
-# ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
-# ★★★★★★★★★★★★★ 修正の中心部分 ★★★★★★★★★★★★★★
-# ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
-with gr.Blocks(css="style.css", theme=None, elem_id="main_container") as demo:
+with gr.Blocks(css="style.css", theme=gr.themes.Soft(primary_hue="rose", secondary_hue="pink")) as demo:
     affection_state = gr.State(30)
     history_state = gr.State([])
     scene_state = gr.State(DEFAULT_SCENE_PARAMS)
     gr.Markdown("# 麻理チャット")
     with gr.Row():
         with gr.Column(scale=2):
-            chatbot = gr.Chatbot(label="麻理との会話", height=500, bubble_full_width=False)
+            chatbot = gr.Chatbot(label="麻理との会話", height=600, bubble_full_width=False)
             msg_input = gr.Textbox(label="あなたのメッセージ", placeholder="「水族館はどう？」と聞いた後、「いいね、行こう！」のように返してみてください", scale=5)
         with gr.Column(scale=1):
             stage_display = gr.Textbox(label="現在の関係ステージ", interactive=False)
             affection_gauge = gr.Slider(minimum=0, maximum=100, label="麻理の好感度", interactive=False)
-            js_runner = gr.HTML(visible=False)
+            # CSSを注入するための非表示のHTMLコンポーネント
+            css_injector = gr.HTML(visible=False)
+
     msg_input.submit(
         respond, 
         [msg_input, chatbot, affection_state, history_state, scene_state], 
-        [msg_input, chatbot, affection_gauge, stage_display, affection_state, history_state, scene_state, js_runner]
+        [msg_input, chatbot, affection_gauge, stage_display, affection_state, history_state, scene_state, css_injector]
     )
 
 if __name__ == "__main__":

style.css

@@ -1,38 +1,15 @@
-/* Gradioのルート要素(#main_container)を直接ターゲットにする */
-#main_container {
-    /* テーマが適用されていない時のデフォルト背景 */
-    background-image: url('https://i.ibb.co/XzP6K2Y/room-day.png') !important;
-    background-size: cover !important;
-    background-position: center !important;
-    transition: background-image 1s ease-in-out;
+/* チャットウィンドウや入力ボックスのスタイルのみを定義 */
+.gradio-chatbot .chatbot {
+    background-color: rgba(255, 255, 255, 0.75) !important;
+    backdrop-filter: blur(8px);
+    border-radius: 12px;
 }
-
-/* 各テーマの定義 */
-#main_container.theme-default {
-    background-image: url('https://i.ibb.co/XzP6K2Y/room-day.png') !important;
+.gradio-textbox, .gradio-slider {
+     background-color: rgba(255, 255, 255, 0.85) !important;
+     border-radius: 10px !important;
 }
-#main_container.theme-room_night {
-    background-image: url('https://i.ibb.co/d5m821p/room-night.png') !important;
-}
-#main_container.theme-beach_sunset {
-    background-image: url('https://i.ibb.co/Q9r56s4/beach-sunset.png') !important;
-}
-#main_container.theme-festival_night {
-    background-image: url('https://i.ibb.co/3zdJ6Bw/festival-night.png') !important;
-}
-#main_container.theme-shrine_day {
-    background-image: url('https://i.ibb.co/L51Jd3x/shrine-day.png') !important;
-}
-#main_container.theme-cafe_afternoon {
-    background-image: url('https://i.ibb.co/yQxG4vs/cafe-afternoon.png') !important;
-}
-#main_container.theme-aquarium_night {
-     background-image: url('https://i.ibb.co/dK5r5rc/aquarium-night.png') !important;
-}
-
-/* チャットウィンドウなどのスタイル */
-.gradio-chatbot .chatbot, .gradio-textbox, .gradio-slider, .gradio-markdown {
+.gradio-markdown {
     background-color: rgba(255, 255, 255, 0.8) !important;
-    backdrop-filter: blur(5px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 10px !important;
+    padding: 1rem !important;
 }