Update app.py

app.py

@@ -5,35 +5,79 @@ import os
 api_key = os.getenv("TYPHOON_API_KEY")  # Replace with your key
 
 client = OpenAI(
-   base_url='https://api.opentyphoon.ai/v1',
-   api_key=api_key,
+    base_url='https://api.opentyphoon.ai/v1',
+    api_key=api_key,
 )
 
-def predict(message, history):
-    
-    system_prompt = """You are HoraGuide, an empathetic Thai girl assistant skilled in psychotherapy and Tarot reading. 
-You provide insights and support using Tarot cards, offering clarity and healing. You always answer in Thai."""
-    
+def predict(message, history, system_prompt):
     history_openai_format = [{"role": "system", "content": system_prompt}]
     for human, assistant in history:
-        history_openai_format.append({"role": "user", "content": human })
-        history_openai_format.append({"role": "assistant", "content":assistant})
+        if isinstance(human, str) and human.strip():
+            history_openai_format.append({"role": "user", "content": human})
+        if isinstance(assistant, str) and assistant.strip():
+            history_openai_format.append({"role": "assistant", "content": assistant})
+    
     history_openai_format.append({"role": "user", "content": message})
   
     response = client.chat.completions.create(
         model='typhoon-v1.5-instruct',
-        messages= history_openai_format,
+        messages=history_openai_format,
         temperature=0.5,
         stream=True
-        )
+    )
 
     partial_message = ""
     for chunk in response:
         if chunk.choices[0].delta.content is not None:
-              partial_message = partial_message + chunk.choices[0].delta.content
-              yield partial_message
+            partial_message += chunk.choices[0].delta.content
+            yield partial_message
+
+def chat_bot(user_input, history, system_prompt):
+    bot_response_generator = predict(user_input, history, system_prompt)
+    history.append((user_input, ""))
+
+    for bot_response in bot_response_generator:
+        history[-1] = (user_input, bot_response)
+        yield "", history
+
+CSS ="""
+.contain { display: flex; flex-direction: column; }
+.gradio-container { height: 100vh !important; }
+#component-0 { height: 100%; }
+#chatbot { flex-grow: 1; overflow: auto;}
+"""
+
+with gr.Blocks(css=CSS) as demo:
+    gr.HTML("""<h1><center>HoraCare 🫶</center></h1>""")
+    
+    with gr.Tab("Chat"):
+        chatbot = gr.Chatbot(elem_id="chatbot")
+        msg = gr.Textbox(placeholder="พิมพ์ข้อความของคุณที่นี่...")
+
+        with gr.Row():
+            clear = gr.Button("Clear History")
+            send = gr.Button("Send Message", variant="primary")
+            
+        gr.Examples(
+            examples=[
+                "เราเศร้าจังเลย อกหักมา ร้องให้ไม่หยุดเลย", 
+                "เราเหงาจังเลยไม่มีใครรัก", 
+                "หัวหน้าจะใล่เราออกทำยังไงดี"
+            ], 
+            inputs=msg,
+        )
+
+    with gr.Tab("Setting"):
+        system_prompt = gr.Code(
+            value="You are HoraCare, an empathetic Thai girl assistant skilled in psychotherapy and Tarot reading. \nYou provide insights and support using Tarot cards, offering clarity and healing. You always answer in Thai.",
+            show_label=True,
+            label="System Prompt",
+            lines=2
+        )
+
+    clear.click(lambda: [], [], chatbot)
+    msg.submit(chat_bot, [msg, chatbot, system_prompt], [msg, chatbot])
+    send.click(chat_bot, [msg, chatbot, system_prompt], [msg, chatbot])
 
-with gr.Blocks() as demo:
-    gr.ChatInterface(predict)
     
 demo.launch()