Update app.py

app.py

@@ -1,39 +1,66 @@
-import base64
 import gradio as gr
 from chatbot.core import get_chat_response
 
-# ------------------- Load avatar as base64 -------------------
-def load_image_as_base64(image_path):
-    with open(image_path, "rb") as img_file:
-        img_bytes = img_file.read()
-    encoded = base64.b64encode(img_bytes).decode("utf-8")
-    return f"data:image/png;base64,{encoded}"
-
-avatar_base64 = load_image_as_base64("avatar.png")
-
-# ------------------- Chat logic -------------------
-def chat(user_input, history=[]):
-    response = get_chat_response(user_input)
-    return history, history
-
-# ------------------- Gradio UI -------------------
-with gr.Blocks(theme="shivi/calm_seafoam") as demo:
-    gr.Markdown(f"""
-    <div style="text-align:center;">
-        <h1>🎺 Kumiko v1.5 Assistant 📯</h1>
-        <p>Một trợ lý AI dễ thương từ <i>Hibike! Euphonium</i>, sẵn sàng trò chuyện cùng bạn!</p>
-        <img src="{avatar_base64}" width="120px" style="border-radius: 100px;" />
-    </div>
-    """)
-
-    chatbot = gr.Chatbot(label="Kumiko Chat", show_label=True)
-    msg = gr.Textbox(label="Nhập tin nhắn của bạn...", placeholder="Gõ gì đó nhé...")
-
-    state = gr.State([])  # giữ lịch sử
-
-    msg.submit(chat, inputs=[msg, state], outputs=[chatbot, state])
-    msg.submit(lambda: "", None, msg)  # Clear textbox sau khi gửi
-
-# ------------------- Launch -------------------
-if __name__ == "__main__":
-    demo.launch()
+# Lưu tin nhắn trong bộ nhớ
+history = []
+
+# Hàm xử lý chat
+def chat(user_message):
+    if user_message.strip() == "":
+        return gr.update(value="", visible=True), gr.update(visible=True)
+
+    # Thêm tin nhắn của user
+    history.append(("left", user_message))
+
+    # Lấy phản hồi từ assistant (Kumiko)
+    response = get_chat_response(user_message)
+    history.append(("right", response))
+
+    # Tạo HTML để hiển thị hội thoại
+    chat_html = ""
+    for sender, msg in history:
+        align = "left" if sender == "left" else "right"
+        chat_html += f"""
+        <div style='text-align: {align}; margin: 10px;'>
+            <div style='
+                display: inline-block;
+                padding: 10px 15px;
+                border-radius: 20px;
+                max-width: 60%;
+                background-color: {"#e6f0ff" if align=="left" else "#d6f5d6"};
+                color: black;
+                font-size: 16px;
+            '>{msg}</div>
+        </div>
+        """
+
+    return gr.update(value=""), chat_html
+
+
+# ---------------- UI ---------------- #
+with gr.Blocks(css="""
+body {
+    background-image: url('https://i.imgur.com/Qr71crq.jpg');
+    background-size: cover;
+    background-attachment: fixed;
+    background-position: center;
+}
+.messagebox {
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 16px;
+    border-radius: 20px;
+    margin: 8px;
+}
+""") as demo:
+    gr.Markdown("<h1 style='text-align: center;'>🎺 Kumiko Assistant v1.5 📯</h1>")
+
+    chat_display = gr.HTML()
+
+    with gr.Row():
+        user_input = gr.Textbox(placeholder="Nhập tin nhắn của bạn...", show_label=False, lines=2)
+        send_btn = gr.Button("Gửi")
+
+    send_btn.click(fn=chat, inputs=user_input, outputs=[user_input, chat_display])
+    user_input.submit(fn=chat, inputs=user_input, outputs=[user_input, chat_display])
+
+demo.launch()