Upload 2 files

app.py

@@ -23,13 +23,9 @@ genai.configure(api_key=GEMINI_API_KEY)
 gemini_model = genai.GenerativeModel('gemini-2.5-flash')
 groq_client = Groq(api_key=GROQ_API_KEY)
 
-print("日本語感情分析モデルをロード中...")
-try:
-    sentiment_analyzer = pipeline("sentiment-analysis", model="koheiduck/bert-japanese-finetuned-sentiment")
-    print("モデルのロード完了。")
-except Exception as e:
-    sentiment_analyzer = None
-    print(f"モデルのロードエラー: {e}")
+# 日本語感情分析モデルの読み込みを無効化（パフォーマンス向上のため）
+print("日本語感情分析モデルは無効化されています（パフォーマンス向上のため）")
+sentiment_analyzer = None
 
 THEME_URLS = {
     "default": "https://cdn.pixabay.com/photo/2017/03/28/12/11/chairs-2181960_1280.jpg",
@@ -295,18 +291,21 @@ def get_relationship_stage(affection):
     return "ステージ4：最親密"
 
 def update_affection(message, affection):
-    if not sentiment_analyzer: return affection
-    try:
-        result = sentiment_analyzer(message)[0]
-        if result['label'] == 'positive': return min(100, affection + 5)
-        if result['label'] == 'negative': return max(0, affection - 5)
-    except Exception:
-        return affection
-    return affection
+    # 感情分析モデルを使用せず、メッセージの長さに基づいて好感度を更新
+    # これにより、モデルの読み込みによるパフォーマンス問題を回避
+    message_length = len(message)
+    
+    # 短いメッセージは好感度を下げる、長いメッセージは好感度を上げる
+    if message_length < 10:
+        return max(0, affection - 1)  # 短いメッセージ
+    elif message_length > 30:
+        return min(100, affection + 3)  # 長いメッセージ
+    else:
+        return min(100, affection + 1)  # 普通のメッセージ
 
 
 
-async def respond(message, chat_history, affection, history, scene_params):
+def respond(message, chat_history, affection, history, scene_params):
     new_affection = update_affection(message, affection)
     stage_name = get_relationship_stage(new_affection)
     current_theme = scene_params.get("theme", "default")
@@ -468,16 +467,12 @@ with gr.Blocks(css=custom_css, theme=custom_theme) as demo:
         [msg_input, chatbot, affection_gauge, stage_display, affection_state, history_state, scene_state, background_display],
         api_name="respond"  # API名を指定して非同期処理を適切に処理
     )
-    # 非同期関数として定義
-    async def load_stage(affection):
+    # 通常の関数として定義
+    def load_stage(affection):
         return get_relationship_stage(affection)
     
     demo.load(load_stage, affection_state, stage_display)
 
 if __name__ == "__main__":
-    # 非同期処理の問題を解決するためのパラメータを追加
-    demo.launch(
-        prevent_thread_lock=True,  # スレッドロックを防止
-        show_error=True,           # エラーを表示
-        quiet=False                # 詳細なログを出力
-    )
+    # シンプルな起動方法に戻す
+    demo.launch()

style.css

@@ -125,30 +125,79 @@ body {
   padding: 10px !important;
 }
 
-/* 入力欄の背景を半透明に */
-textarea, input[type="text"], input[type="number"] {
-  background-color: rgba(255, 255, 255, 0.8) !important;
+/* 入力欄のスタイル - より目立つように */
+textarea, input[type="text"], input[type="number"], .gradio-textbox {
+  background-color: rgba(255, 255, 255, 0.95) !important;
   border-radius: 8px !important;
-  border: 1px solid rgba(0, 0, 0, 0.1) !important;
-  padding: 10px !important;
+  border: 2px solid rgba(255, 100, 100, 0.5) !important;
+  padding: 12px !important;
+  font-size: 16px !important;
+  color: #333 !important;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
   backdrop-filter: blur(5px) !important;
   -webkit-backdrop-filter: blur(5px) !important;
+  margin-bottom: 10px !important;
+  min-height: 50px !important;
+  width: 100% !important;
+  display: block !important;
+  box-sizing: border-box !important;
 }
 
-/* ボタンのスタイル */
-button {
+/* 入力欄のコンテナ */
+.gradio-textbox {
   background-color: rgba(255, 255, 255, 0.8) !important;
+  padding: 10px !important;
+  border-radius: 10px !important;
+  margin-bottom: 15px !important;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* 入力欄のフォーカス時のスタイル */
+textarea:focus, input[type="text"]:focus, input[type="number"]:focus {
+  border-color: rgba(255, 50, 50, 0.8) !important;
+  box-shadow: 0 0 8px rgba(255, 100, 100, 0.5) !important;
+  outline: none !important;
+}
+
+/* ボタンのスタイル - より目立つように */
+button, .submit, button[type="submit"], .gradio-button {
+  background-color: rgba(255, 100, 100, 0.9) !important;
+  color: white !important;
   border-radius: 8px !important;
-  border: 1px solid rgba(0, 0, 0, 0.1) !important;
-  padding: 8px 16px !important;
-  backdrop-filter: blur(5px) !important;
-  -webkit-backdrop-filter: blur(5px) !important;
+  border: 1px solid rgba(200, 0, 0, 0.2) !important;
+  padding: 10px 20px !important;
+  font-weight: bold !important;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
+  margin: 5px !important;
+  height: auto !important;
+  min-height: 40px !important;
   transition: all 0.2s ease !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  display: block !important;
+  width: auto !important;
+  min-width: 100px !important;
+  font-size: 16px !important;
+  cursor: pointer !important;
+  z-index: 1000 !important;
+  position: relative !important;
 }
 
-button:hover {
-  background-color: rgba(240, 240, 255, 0.9) !important;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+button:hover, .submit:hover, button[type="submit"]:hover, .gradio-button:hover {
+  background-color: rgba(255, 50, 50, 1.0) !important;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
+  transform: translateY(-2px) !important;
+}
+
+/* 送信ボタン特有のスタイル */
+.submit, button[type="submit"] {
+  background-color: #ff4757 !important;
+  font-size: 18px !important;
+  padding: 12px 24px !important;
+  margin-top: 10px !important;
+  margin-bottom: 10px !important;
+  width: 100% !important;
+  max-width: 200px !important;
 }
 
 /* ========================
@@ -156,6 +205,55 @@ button:hover {
 ======================== */
 .status-box {
   padding: 15px !important;
+  background-color: rgba(255, 255, 255, 0.9) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+  margin-bottom: 15px !important;
+}
+
+/* スライダー（好感度バー）のスタイル */
+.status-box input[type="range"], .gradio-slider input[type="range"] {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  width: 100% !important;
+  height: 20px !important;
+  border-radius: 10px !important;
+  background: linear-gradient(to right, #ff6b6b, #ff9e9e) !important;
+  outline: none !important;
+  opacity: 1 !important;
+  transition: opacity 0.2s !important;
+  margin: 15px 0 !important;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
+  border: 2px solid rgba(255, 255, 255, 0.5) !important;
+}
+
+.status-box input[type="range"]::-webkit-slider-thumb, .gradio-slider input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  width: 30px !important;
+  height: 30px !important;
+  border-radius: 50% !important;
+  background: #ff4757 !important;
+  cursor: pointer !important;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) !important;
+  border: 2px solid white !important;
+}
+
+/* スライダーのコンテナ */
+.gradio-slider {
+  background-color: rgba(255, 255, 255, 0.8) !important;
+  padding: 15px !important;
+  border-radius: 10px !important;
+  margin-bottom: 15px !important;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* ラベルのスタイル */
+.status-box label {
+  font-weight: bold !important;
+  color: #333 !important;
+  margin-bottom: 5px !important;
+  display: block !important;
 }
 
 /* ========================
@@ -215,31 +313,68 @@ button:hover {
    チャットエリアなど（必要に応じて）
 ======================== */
 .gradio-container {
-  position: relative; /* 背景をabsoluteで置くために */
-  overflow: hidden;
+  position: relative !important; /* 背景をabsoluteで置くために */
+  overflow: hidden !important;
+}
+
+/* Gradio 5.0の特定のクラスに対するスタイル */
+.gradio-row {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  margin: 0 -10px !important;
+}
+
+.gradio-column {
+  padding: 0 10px !important;
+  box-sizing: border-box !important;
+}
+
+/* 入力エリアのコンテナ */
+.input-container, .gradio-textbox-input {
+  background-color: rgba(255, 255, 255, 0.8) !important;
+  border-radius: 10px !important;
+  padding: 15px !important;
+  margin-bottom: 15px !important;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* 送信ボタンのコンテナ */
+.submit-container {
+  display: flex !important;
+  justify-content: center !important;
+  margin-top: 10px !important;
 }
 
 .chatbot {
-  background-color: transparent !important;
+  background-color: rgba(255, 255, 255, 0.7) !important;
   border-radius: 12px !important;
-  padding: 10px !important;
+  padding: 15px !important;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+  margin-bottom: 20px !important;
+  min-height: 400px !important;
+  max-height: 600px !important;
+  overflow-y: auto !important;
 }
 
 /* チャットメッセージのスタイル */
 .chatbot > div > div > div {
-  background-color: rgba(255, 255, 255, 0.8) !important;
-  border-radius: 8px !important;
-  padding: 10px !important;
-  margin-bottom: 8px !important;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+  background-color: rgba(255, 255, 255, 0.9) !important;
+  border-radius: 12px !important;
+  padding: 12px !important;
+  margin-bottom: 12px !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+  font-size: 16px !important;
+  line-height: 1.5 !important;
 }
 
 /* ユーザーメッセージ */
 .chatbot > div > div:nth-child(odd) > div {
-  background-color: rgba(240, 240, 255, 0.9) !important;
+  background-color: rgba(230, 230, 255, 0.95) !important;
+  border-left: 4px solid #6c5ce7 !important;
 }
 
 /* ボットメッセージ */
 .chatbot > div > div:nth-child(even) > div {
-  background-color: rgba(255, 240, 240, 0.9) !important;
+  background-color: rgba(255, 230, 230, 0.95) !important;
+  border-left: 4px solid #ff6b6b !important;
 }