Update app.py

app.py

@@ -2,30 +2,42 @@ import openai
 import gradio as gr
 import os
 
-# Hugging Face環境では APIキーを Secrets に保存
-api_key = os.getenv("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")  # Hugging FaceのSecretから取得
+# OpenAI APIキーを取得
+api_key = os.getenv("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")
+if api_key is None:
+    raise ValueError("ERROR: OpenAI APIキーが設定されていません。Hugging FaceのSettings > SecretsでAPIキーを追加してください。")
 
 client = openai.OpenAI(api_key=api_key)
 
 def chat_with_model(user_input):
     try:
         response = client.chat.completions.create(
-            model="ft:gpt-4o-mini-2024-07-18:personal:enjphsr:AukEoAFZ",  # ← ここに自分のファインチューニングモデルIDを入力
+            model="ft:gpt-4o-mini-2024-07-18:personal:enjphsr:AukEoAFZ",
             messages=[{"role": "user", "content": user_input}]
         )
         return response.choices[0].message.content
     except Exception as e:
         return f"エラーが発生しました: {e}"
 
-# 事前入力するテキスト（変更可能）
-default_text = "以下の英語を日本語に翻訳してください"
+# 事前入力するテキスト
+default_text = "こんにちは！今日はどんなことを話しましょうか？"
 
-interface = gr.Interface(
-    fn=chat_with_model,
-    inputs=gr.Textbox(lines=5, value=default_text),
-    outputs=gr.Markdown(),  # ✅ Markdown に変更
-    title="ファインチューニングモデルチャット",
-    description="Hugging Face上で動作するGradioアプリ"
-)
+with gr.Blocks() as interface:
+    gr.Markdown("# ファインチューニングモデルチャット")
+    user_input = gr.Textbox(lines=5, value=default_text)
+    output = gr.Textbox(lines=10, elem_id="output_box")  # ✅ `elem_id` を指定
+    
+    btn = gr.Button("送信")
+    btn.click(chat_with_model, inputs=user_input, outputs=output)
 
-interface.launch()
+    # ✅ CSS を適用
+    interface.load(_js="""
+    function autoResize() {
+        let box = document.getElementById("output_box");
+        box.style.height = "auto";
+        box.style.height = box.scrollHeight + "px";
+    }
+    document.getElementById("output_box").addEventListener("input", autoResize);
+    """)
+
+interface.launch()