Update app.py

app.py

@@ -1,61 +1,86 @@
 import os
-import gradio as gr
 try:
     from groq import Groq
 except ImportError:
     os.system('pip install groq')
     from groq import Groq
+import gradio as gr
+
+# 設定 API key
+groq_key = os.getenv("groq_key")
+if not groq_key:
+    raise ValueError("請設定環境變數 'groq_key'，包含您的 API 金鑰")
 
-# Initialize Groq client
-client = Groq(api_key=os.getenv("groq_key"))
+client = Groq(api_key=groq_key)
 
-# Chat history to store conversation
-chat_history = []
+# 定義 Chatbot 的回應邏輯
+def chat_with_groq(history):
+    """
+    與 Groq 聊天機器人互動，根據 Gradio 的 Chatbot 結構處理歷史記錄。
+    :param history: List of tuples (user_input, bot_response)
+    :return: Updated history with new bot response
+    """
+    # 提取最新的用戶輸入
+    user_message = history[-1][0] if history else "你好！"
 
-def chat(message, history):
+    # 初始化對話，帶有 role: system 的設定
     messages = [
         {
-            "role": "system", 
+            "role": "system",
             "content": "你是一個美術老師，請用繁體中文稱讚學生的問題，問什麼問題都會引導到藝術"
         }
     ]
+
+    # 添加歷史記錄作為上下文
+    for user_msg, bot_msg in history[:-1]:  # 忽略最後一條，因為它是新的輸入
+        messages.append({"role": "user", "content": user_msg})
+        messages.append({"role": "assistant", "content": bot_msg})
     
-    # Add chat history
-    for human, assistant in history:
-        messages.append({"role": "user", "content": human})
-        messages.append({"role": "assistant", "content": assistant})
+    # 添加最新的用戶訊息
+    messages.append({"role": "user", "content": user_message})
+
+    # 呼叫 Groq API 生成回應
+    try:
+        completion = client.chat.completions.create(
+            model="llama3-8b-8192",
+            messages=messages,
+            temperature=1,
+            max_tokens=1024,
+            top_p=1,
+            stream=False,  # Gradio 不支援流式輸出，設為 False
+            stop=None,
+        )
+        # 提取 AI 回應
+        response = completion.choices[0].message.content.strip()
+    except Exception as e:
+        response = f"抱歉，發生了一個錯誤：{str(e)}"
     
-    # Add current message
-    messages.append({"role": "user", "content": message})
-
-    # Get response from Groq
-    completion = client.chat.completions.create(
-        model="llama3-8b-8192",
-        messages=messages,
-        temperature=1,
-        max_tokens=1024,
-        top_p=1,
-        stream=True,
-        stop=None
-    )
+    # 將新回應加入歷史記錄
+    history[-1][1] = response
+    return history
+
+# 建立 Gradio 介面
+with gr.Blocks() as demo:
+    gr.Markdown("## 🎨 AI 美術老師 Chatbot")
+    chatbot = gr.Chatbot()
+    with gr.Row():
+        msg = gr.Textbox(
+            show_label=False,
+            placeholder="請輸入您的問題...",
+        )
+        clear = gr.Button("清除對話")
+    
+    # 定義互動邏輯
+    def user_input(user_message, chat_history):
+        chat_history = chat_history or []
+        chat_history.append((user_message, None))  # 暫時加入用戶輸入，等待回應
+        return "", chat_history
 
-    # Build response text from stream
-    response = ""
-    for chunk in completion:
-        if chunk.choices[0].delta.content is not None:
-            response += chunk.choices[0].delta.content
-            yield response
-
-# Create Gradio interface
-demo = gr.ChatInterface(
-    fn=chat,
-    title="藝術老師聊天機器人",
-    description="我是一位熱愛藝術的老師，讓我們來聊聊藝術吧！",
-    examples=["你好", "我想學畫畫", "什麼是藝術"],
-    retry_btn=None,
-    undo_btn=None,
-    clear_btn="清除對話",
-)
+    msg.submit(user_input, [msg, chatbot], [msg, chatbot], queue=False).then(
+        chat_with_groq, chatbot, chatbot
+    )
+    clear.click(lambda: None, None, chatbot, queue=False)
 
+# 啟動應用程式
 if __name__ == "__main__":
     demo.launch()