Upload 2 files

app.py

@@ -333,21 +333,21 @@ def respond(message, chat_history, affection, history, scene_params):
 with open("style.css", "r") as f:
     custom_css = f.read()
 
-# Gradio 5.x用のテーマ設定
+# Gradio 5.x用のシンプルなテーマ設定
 custom_theme = gr.themes.Soft(
     primary_hue="rose",
     secondary_hue="pink",
 )
 
-# Gradio 5.xでのテーマカスタマイズ
+# Gradio 5.xでのテーマカスタマイズ（最小限の設定のみ）
 try:
-    # 透明度を持つ背景色を設定
-    custom_theme = custom_theme.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)",
+    # 透明度を持つ背景色を設定（Gradio 5.0で確実に動作するプロパティのみ）
+    custom_theme = gr.themes.Soft(
+        primary_hue="rose",
+        secondary_hue="pink",
+        neutral_hue="slate",
+        spacing_size="sm",
+        radius_size="lg",
     )
 except Exception as e:
     print(f"テーマカスタマイズエラー: {e}")
@@ -379,6 +379,7 @@ with gr.Blocks(css=custom_css, theme=custom_theme) as demo:
                     elem_id="chat_area", 
                     show_label=False,
                     height=400,
+                    type="messages",  # 警告を解消するために追加
                     avatar_images=[
                         "https://cdn.pixabay.com/photo/2016/04/01/10/04/amusing-1299756_1280.png", 
                         "https://cdn.pixabay.com/photo/2016/03/31/21/40/bot-1296595_1280.png"

style.css

@@ -7,10 +7,21 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
-/* メインコンテナ */
+/* Gradio 5.0のコンテナスタイル */
 .gradio-container {
   max-width: 1200px !important;
   margin: 0 auto !important;
+  position: relative !important;
+  z-index: 1 !important;
+}
+
+/* Gradio 5.0のブロックスタイル */
+.gradio-container > div > div {
+  background-color: rgba(255, 255, 255, 0.85) !important;
+  border-radius: 12px !important;
+  margin-bottom: 16px !important;
+  padding: 16px !important;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
 }
 
 /* ========================
@@ -25,6 +36,7 @@ body {
   height: 100% !important;
   z-index: -100 !important; /* UIの後ろに配置 */
   pointer-events: none !important;
+  overflow: hidden !important;
 }
 
 /* 背景画像 */
@@ -36,8 +48,20 @@ body {
   height: 100% !important;
   background-size: cover !important;
   background-position: center !important;
-  opacity: 0.15 !important; /* 薄く表示 */
-  filter: blur(1px) !important; /* 少しぼかす */
+  opacity: 0.2 !important; /* 薄く表示 */
+  filter: blur(2px) !important; /* 少しぼかす */
+}
+
+/* 背景画像の上に半透明のオーバーレイを追加 */
+.background-container::after {
+  content: "" !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5)) !important;
+  z-index: -99 !important;
 }
 
 /* ========================