Fix lỗi app.py

app.py

@@ -1,66 +1,91 @@
+import base64
 import gradio as gr
 from chatbot.core import get_chat_response
 
-# Lưu tin nhắn trong bộ nhớ
-history = []
+# ------------------- Load local assets -------------------
+def load_image_as_base64(image_path):
+    with open(image_path, "rb") as img_file:
+        img_bytes = img_file.read()
+    return base64.b64encode(img_bytes).decode("utf-8")
+
+# Load background & avatar
+background_base64 = load_image_as_base64("background.jpg")  # ảnh nền
+avatar_base64 = load_image_as_base64("avatar.png")          # ảnh Kumiko
 
-# Hàm xử lý chat
-def chat(user_message):
-    if user_message.strip() == "":
-        return gr.update(value="", visible=True), gr.update(visible=True)
+# ------------------- Chat logic -------------------
+history = []
 
-    # Thêm tin nhắn của user
-    history.append(("left", user_message))
+def chat(user_input):
+    if not user_input.strip():
+        return "", ""
 
-    # Lấy phản hồi từ assistant (Kumiko)
-    response = get_chat_response(user_message)
-    history.append(("right", response))
+    # Append user message (bên phải)
+    history.append(("right", user_input))
 
-    # 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>
-        """
+    # Get Kumiko response (bên trái)
+    response = get_chat_response(user_input)
+    history.append(("left", response))
 
-    return gr.update(value=""), chat_html
+    # Render chat HTML
+    rendered = ""
+    for side, msg in history:
+        if side == "left":
+            # Kumiko (trái, có avatar)
+            rendered += f"""
+            <div style='text-align: left; margin: 10px;'>
+                <div style='display: flex; align-items: flex-end; gap: 10px;'>
+                    <img src="data:image/png;base64,{avatar_base64}" width="40" style="border-radius: 50%;" />
+                    <div style='
+                        display: inline-block;
+                        padding: 10px 15px;
+                        border-radius: 20px;
+                        background-color: #f0f0f0cc;
+                        max-width: 60%;
+                        font-size: 16px;
+                    '>{msg}</div>
+                </div>
+            </div>
+            """
+        else:
+            # User (phải, không avatar)
+            rendered += f"""
+            <div style='text-align: right; margin: 10px;'>
+                <div style='
+                    display: inline-block;
+                    padding: 10px 15px;
+                    border-radius: 20px;
+                    background-color: #d1f0ffcc;
+                    max-width: 60%;
+                    font-size: 16px;
+                '>{msg}</div>
+            </div>
+            """
 
+    return "", rendered
 
-# ---------------- UI ---------------- #
-with gr.Blocks(css="""
-body {
-    background-image: url('https://i.imgur.com/Qr71crq.jpg');
+# ------------------- Gradio UI -------------------
+with gr.Blocks(css=f"""
+body {{
+    background-image: url("data:image/jpg;base64,{background_base64}");
     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;
-}
+    background-attachment: fixed;
+}}
 """) as demo:
-    gr.Markdown("<h1 style='text-align: center;'>🎺 Kumiko Assistant v1.5 📯</h1>")
-
-    chat_display = gr.HTML()
+    gr.HTML(f"""
+        <div style="text-align:center;">
+            <h1>🎺 Kumiko v1.5 Assistant 📯</h1>
+            <p>Một trợ lý AI dễ thương từ Hibike! Euphonium, sẵn sàng trò chuyện cùng bạn!</p>
+            <img src="data:image/png;base64,{avatar_base64}" width="100px" style="border-radius: 100px;" />
+        </div>
+    """)
 
-    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")
+    chat_html = gr.HTML()
+    txt = gr.Textbox(placeholder="Nhập gì đó...", show_label=False)
 
-    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])
+    txt.submit(chat, inputs=txt, outputs=[txt, chat_html])
+    txt.submit(lambda: "", None, txt)  # Clear textbox sau khi gửi
 
-demo.launch()
+# ------------------- Launch -------------------
+if __name__ == "__main__":
+    demo.launch()