Upload 2 files

app.py

@@ -8,23 +8,16 @@ from transformers import pipeline
 import re
 
 # --- 1. 初期設定とAPIクライアントの初期化 ---
-# Hugging Face SpacesのSecretsからAPIキーを読み込む
 load_dotenv()
-
-# Geminiクライアント
 GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")
-if not GEMINI_API_KEY:
-    raise ValueError("SecretsにGEMINI_API_KEYが見つかりません。")
+GROQ_API_KEY = os.getenv("GROQ_API_KEY")
+if not GEMINI_API_KEY or not GROQ_API_KEY:
+    raise ValueError("GEMINI_API_KEY と GROQ_API_KEY をSecretsに設定してください。")
+
 genai.configure(api_key=GEMINI_API_KEY)
 gemini_model = genai.GenerativeModel('gemini-1.5-flash-latest')
-
-# Groqクライアント
-GROQ_API_KEY = os.getenv("GROQ_API_KEY")
-if not GROQ_API_KEY:
-    raise ValueError("SecretsにGROQ_API_KEYが見つかりません。")
 groq_client = Groq(api_key=GROQ_API_KEY)
 
-# 感情分析モデル
 print("日本語感情分析モデルをロード中...")
 try:
     sentiment_analyzer = pipeline("sentiment-analysis", model="koheiduck/bert-japanese-finetuned-sentiment")
@@ -34,14 +27,11 @@ except Exception as e:
     print(f"モデルのロードエラー: {e}")
 
 DEFAULT_SCENE_PARAMS = {
-  "theme": "default",
-  "personality_mod": "ストレートな感情表現をするが、少しぶっきらぼう。優しさと冷たさが混在している。",
-  "tone": "普通のトーン。",
-  "constraints": ["キャラクター設定から逸脱しない"]
+  "theme": "default", "personality_mod": "ストレートだが根は優しい",
+  "tone": "普通のトーン", "constraints": ["キャラクター設定から逸脱しない"]
 }
 
 # --- 2. LLMによる役割分担システム ---
-
 def detect_scene_change(history, message):
     history_text = "\n".join([f"ユーザー: {u}\n麻理: {m}" for u, m in history[-4:]])
     prompt = f"""
@@ -49,11 +39,11 @@ def detect_scene_change(history, message):
 # タスク
 直近の会話履歴と最後のユーザー発言を分析し、**会話の結果として登場人物がどこか特定の場所へ行くことに合意したか**を判断してください。
 # 判断基準
-1.  会話の中で具体的な場所（例：水族館、カフェ、神社）が提案されているか？
+1.  会話の中で具体的な場所が提案されているか？
 2.  最後のユーザー発言が、その提案に対する明確な同意（例：「行こう」「いいね」「そうしよう」など）を示しているか？
 # 出力形式
-- 合意が成立した場合：その場所の英語キーワード（例: "aquarium_night", "cafe_afternoon"）を一つだけ出力してください。
-- 合意に至らなかった場合：「none」とだけ出力してください。
+- 合意が成立した場合：その場所の英語キーワード（例: "aquarium_night"）を一つだけ出力。
+- 合意に至らなかった場合：「none」とだけ出力。
 ---
 # 分析対象の会話
 {history_text}
@@ -73,30 +63,22 @@ def detect_scene_change(history, message):
         return None
 
 def generate_scene_instruction_with_groq(affection, stage_name, scene, previous_topic):
-    print("Groq/Llama3に「指示書」生成をリクエストします...")
+    print(f"Groqに指示書生成をリクエスト (シーン: {scene})")
     prompt_template = f"""
 あなたは会話アプリの演出AIです。以下の条件に基づき、演出プランをJSON形式で生成してください。
-【条件】
-好感度：{affection}
-関係段階：「{stage_name}」
-シーン名：「{scene}」
-直前の話題：「{previous_topic}」
-【指示】
-- `initial_dialogue_instruction`には、麻理が言うべき最初のセリフの内容や感情の指示を日本語で記述してください。実際のセリフは絶対に生成しないでください。
-- `personality_mod`と`tone`は、シーンと現在の関係性を反映した簡潔なものにしてください。
-- 必ず、以下のJSON形式のみを出力してください。説明文は不要です。
 {{
   "theme": "{scene}",
-  "personality_mod": "（シーンと関係段階に応じた性格設定）",
-  "tone": "（シーンと好感度に応じた口調や感情トーン）",
-  "initial_dialogue_instruction": "（例：少し戸惑いながらも、提案された場所への期待感を滲ませる）",
+  "personality_mod": "（シーンと関係段階「{stage_name}」に応じた性格設定）",
+  "tone": "（シーンと好感度「{affection}」に応じた口調や感情トーン）",
+  "initial_dialogue_instruction": "（「{previous_topic}」という話題から、シーン遷移直後の麻理が言うべきセリフの指示を日本語で記述）",
   "constraints": ["（出力時の制約1）", "（制約2）"]
 }}
 """
     try:
         chat_completion = groq_client.chat.completions.create(
-            messages=[{"role": "user", "content": prompt_template}],
-            model="llama3-8b-8192", temperature=0.7, response_format={"type": "json_object"},
+            messages=[{"role": "system", "content": "You must generate a response in valid JSON format."},
+                      {"role": "user", "content": prompt_template}],
+            model="llama3-8b-8192", temperature=0.8, response_format={"type": "json_object"},
         )
         params = json.loads(chat_completion.choices[0].message.content)
         print("生成された指示書JSON:", params)
@@ -165,27 +147,29 @@ 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")
+    
+    # JavaScriptを、data-theme属性を書き換えるように変更
     js_script = f"""
     <script>
         setTimeout(() => {{
             const body = document.body;
-            const themes = ["theme-default", "theme-room_night", "theme-beach_sunset", "theme-festival_night", "theme-shrine_day", "theme-cafe_afternoon", "theme-aquarium_night"];
-            body.classList.remove(...themes);
-            body.classList.add("theme-{theme_name}");
-        }}, 100);
+            console.log("Applying data-theme:", "{theme_name}");
+            body.setAttribute('data-theme', '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=None) 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)
-            msg_input = gr.Textbox(label="あなたのメッセージ", placeholder="「水族館はどう？」と聞いた後、「いいね、行こう！」のように返してみてください")
+            chatbot = gr.Chatbot(label="麻理との会話", height=500, 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)

style.css

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