Upload 2 files

app.py

@@ -317,7 +317,9 @@ def respond(message, chat_history, affection, history, scene_params):
     
     # より強力な背景更新用のHTMLを生成
     background_html = f'''
-    <div class="chat-background {theme_name}"></div>
+    <div class="background-container">
+        <div class="chat-background {theme_name}"></div>
+    </div>
     <style>
     .chat-background {{
         background-image: url({THEME_URLS.get(theme_name, THEME_URLS["default"])}) !important;
@@ -362,21 +364,21 @@ with gr.Blocks(css=custom_css, theme=custom_theme) as demo:
     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")
+    # 背景コンテナを先に配置（固定位置で全画面に）
+    background_display = gr.HTML(f'''
+    <div class="background-container">
+        <div class="chat-background {DEFAULT_SCENE_PARAMS["theme"]}"></div>
+    </div>
+    ''', elem_id="background_container")
     
-    gr.Markdown("# 麻理チャット")
+    # ヘッダー部分（背景と分離）
+    with gr.Box(elem_classes="header-box"):
+        gr.Markdown("# 麻理チャット")
     
-    # 著作権表示を追加
-    gr.Markdown("""
-    <div style="font-size: 0.8em; text-align: center; margin-top: 10px; opacity: 0.7;">
-    背景画像: <a href="https://pixabay.com" target="_blank">Pixabay</a> | 
-    アイコン: <a href="https://pixabay.com" target="_blank">Pixabay</a>
-    </div>
-    """)
     with gr.Row():
         with gr.Column(scale=2):
-            with gr.Column(elem_id="chat_container"):
+            # チャットコンテナ（背景と分離）
+            with gr.Box(elem_id="chat_container", elem_classes="chat-box"):
                 # Gradio 5.x対応のChatbot設定
                 try:
                     # Gradio 5.x
@@ -399,10 +401,24 @@ with gr.Blocks(css=custom_css, theme=custom_theme) as demo:
                         elem_id="chat_area", 
                         show_label=False
                     )
-            msg_input = gr.Textbox(label="あなたのメッセージ", placeholder="「水族館はどう？」と聞いた後、「いいね、行こう！」のように返してみてください", scale=5, show_label=False)
+            # 入力欄（背景と分離）
+            with gr.Box(elem_classes="input-box"):
+                msg_input = gr.Textbox(label="あなたのメッセージ", placeholder="「水族館はどう？」と聞いた後、「いいね、行こう！」のように返してみてください", show_label=False)
+        
+        # ステータス部分（右側、背景と分離）
         with gr.Column(scale=1):
-            stage_display = gr.Textbox(label="現在の関係ステージ", interactive=False, value=get_relationship_stage(30))
-            affection_gauge = gr.Slider(minimum=0, maximum=100, label="麻理の好感度", value=30, interactive=False)
+            with gr.Box(elem_classes="status-box"):
+                stage_display = gr.Textbox(label="現在の関係ステージ", interactive=False, value=get_relationship_stage(30))
+                affection_gauge = gr.Slider(minimum=0, maximum=100, label="麻理の好感度", value=30, interactive=False)
+    
+    # フッター部分（背景と分離）
+    with gr.Box(elem_classes="footer-box"):
+        gr.Markdown("""
+        <div style="font-size: 0.8em; text-align: center; opacity: 0.7;">
+        背景画像: <a href="https://pixabay.com" target="_blank">Pixabay</a> | 
+        アイコン: <a href="https://pixabay.com" target="_blank">Pixabay</a>
+        </div>
+        """)
     msg_input.submit(
         respond,
         [msg_input, chatbot, affection_state, history_state, scene_state],

style.css

@@ -1,33 +1,127 @@
 /* ========================
-   全体背景用のベースクラス
+   全体レイアウト
 ======================== */
-.chat-background {
-  position: absolute !important;
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+/* メインコンテナ */
+.gradio-container {
+  max-width: 1200px !important;
+  margin: 0 auto !important;
+}
+
+/* ========================
+   背景画像設定
+======================== */
+/* 背景画像コンテナ */
+.background-container {
+  position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
-  z-index: 0 !important; /* UIの後ろに配置するが、-1だと見えない場合があるので0に */
-  background-size: cover !important;
-  background-position: center !important;
-  opacity: 0.5 !important; /* 少し透けるように、値を上げて見やすく */
+  z-index: -100 !important; /* UIの後ろに配置 */
   pointer-events: none !important;
 }
 
-/* チャットコンテナの背景を透明に */
-#chat_container {
-  position: relative !important;
-  background: transparent !important;
-}
-
-/* 背景コンテナのスタイル */
-#background_container {
+/* 背景画像 */
+.chat-background {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
-  z-index: -1 !important;
+  background-size: cover !important;
+  background-position: center !important;
+  opacity: 0.15 !important; /* 薄く表示 */
+  filter: blur(1px) !important; /* 少しぼかす */
+}
+
+/* ========================
+   コンポーネント共通スタイル
+======================== */
+/* ボックス共通スタイル */
+.header-box, .chat-box, .input-box, .status-box, .footer-box {
+  background-color: rgba(255, 255, 255, 0.85) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+  padding: 15px !important;
+  margin-bottom: 15px !important;
+  backdrop-filter: blur(5px) !important;
+  -webkit-backdrop-filter: blur(5px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.3) !important;
+}
+
+/* ========================
+   ヘッダー
+======================== */
+.header-box {
+  text-align: center !important;
+}
+
+.header-box h1 {
+  margin: 0 !important;
+  padding: 10px !important;
+  color: #333 !important;
+}
+
+/* ========================
+   チャットUI
+======================== */
+/* チャットコンテナ */
+.chat-box {
+  padding: 15px !important;
+  margin-bottom: 15px !important;
+}
+
+/* チャットエリア */
+#chat_area {
+  min-height: 400px !important;
+  max-height: 500px !important;
+  overflow-y: auto !important;
+  padding: 10px !important;
+  background-color: transparent !important;
+}
+
+/* チャットメッセージ */
+.message {
+  background-color: rgba(255, 255, 255, 0.7) !important;
+  border-radius: 8px !important;
+  padding: 10px !important;
+  margin-bottom: 8px !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+}
+
+/* ========================
+   入力欄
+======================== */
+.input-box {
+  padding: 10px !important;
+}
+
+.input-box textarea {
+  border-radius: 8px !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  padding: 10px !important;
+}
+
+/* ========================
+   ステータス表示
+======================== */
+.status-box {
+  padding: 15px !important;
+}
+
+/* ========================
+   フッター
+======================== */
+.footer-box {
+  text-align: center !important;
+  padding: 10px !important;
+  margin-top: 20px !important;
 }
 
 /* ========================