Upload 2 files

app.py

@@ -148,20 +148,27 @@ def respond(message, chat_history, affection, history, scene_params):
     chat_history.append((message, bot_message))
     theme_name = final_scene_params.get("theme", "default")
     
-    # JavaScriptを、data-theme属性を書き換えるように変更
+    # JavaScriptを、#main_containerのクラスを書き換えるように変更
     js_script = f"""
     <script>
         setTimeout(() => {{
-            const body = document.body;
-            console.log("Applying data-theme:", "{theme_name}");
-            body.setAttribute('data-theme', 'theme-{theme_name}');
+            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>
     """
     
     return "", chat_history, new_affection, stage_name, new_affection, new_history, final_scene_params, js_script
 
-with gr.Blocks(css="style.css", theme=gr.themes.Soft(primary_hue="rose", secondary_hue="pink")) as demo:
+# ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
+# ★★★★★★★★★★★★★ 修正の中心部分 ★★★★★★★★★★★★★★
+# ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
+with gr.Blocks(css="style.css", theme=None, elem_id="main_container") as demo:
     affection_state = gr.State(30)
     history_state = gr.State([])
     scene_state = gr.State(DEFAULT_SCENE_PARAMS)

style.css

@@ -1,41 +1,38 @@
-/* bodyタグの属性を直接ターゲットにする */
-body[data-theme="theme-default"] {
-    --background-image: url('https://i.ibb.co/XzP6K2Y/room-day.png');
+/* 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;
 }
-body[data-theme="theme-room_night"] {
-    --background-image: url('https://i.ibb.co/d5m821p/room-night.png');
+
+/* 各テーマの定義 */
+#main_container.theme-default {
+    background-image: url('https://i.ibb.co/XzP6K2Y/room-day.png') !important;
 }
-body[data-theme="theme-beach_sunset"] {
-    --background-image: url('https://i.ibb.co/Q9r56s4/beach-sunset.png');
+#main_container.theme-room_night {
+    background-image: url('https://i.ibb.co/d5m821p/room-night.png') !important;
 }
-body[data-theme="theme-festival_night"] {
-    --background-image: url('https://i.ibb.co/3zdJ6Bw/festival-night.png');
+#main_container.theme-beach_sunset {
+    background-image: url('https://i.ibb.co/Q9r56s4/beach-sunset.png') !important;
 }
-body[data-theme="theme-shrine_day"] {
-    --background-image: url('https://i.ibb.co/L51Jd3x/shrine-day.png');
+#main_container.theme-festival_night {
+    background-image: url('https://i.ibb.co/3zdJ6Bw/festival-night.png') !important;
 }
-body[data-theme="theme-cafe_afternoon"] {
-    --background-image: url('https://i.ibb.co/yQxG4vs/cafe-afternoon.png');
+#main_container.theme-shrine_day {
+    background-image: url('https://i.ibb.co/L51Jd3x/shrine-day.png') !important;
 }
-body[data-theme="theme-aquarium_night"] {
-     --background-image: url('https://i.ibb.co/dK5r5rc/aquarium-night.png');
+#main_container.theme-cafe_afternoon {
+    background-image: url('https://i.ibb.co/yQxG4vs/cafe-afternoon.png') !important;
 }
-
-/* どのテーマでも背景画像を適用するための共通ルール */
-body {
-    transition: background-image 1s ease-in-out;
-    background-image: var(--background-image) !important;
-    background-size: cover !important;
-    background-position: center !important;
+#main_container.theme-aquarium_night {
+     background-image: url('https://i.ibb.co/dK5r5rc/aquarium-night.png') !important;
 }
 
 /* チャットウィンドウなどのスタイル */
-.gradio-chatbot .chatbot {
-    background-color: rgba(255, 255, 255, 0.75) !important;
-    backdrop-filter: blur(8px);
+.gradio-chatbot .chatbot, .gradio-textbox, .gradio-slider, .gradio-markdown {
+    background-color: rgba(255, 255, 255, 0.8) !important;
+    backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.2);
-}
-.gradio-textbox, .gradio-slider {
-     background-color: rgba(255, 255, 255, 0.85) !important;
-     border-radius: 10px !important;
 }