Spaces:

lamgamepro1
/

NodeAI

Sleeping

App Files Files Community

lamgamepro1 commited on Mar 15

Commit

320f523

verified ·

1 Parent(s): 7aaf5c0

Update app.py

Browse files

Files changed (1) hide show

app.py +193 -163

app.py CHANGED Viewed

@@ -7,17 +7,15 @@ import hashlib
 from datetime import datetime
 # Import an toàn
-try: from duckduckgo_search import DDGS
-except: DDGS = None
 try: from gtts import gTTS
 except: gTTS = None
-# 1. CẤU HÌNH HỆ THỐNG & MODEL
 HF_TOKEN = os.getenv("HUGGINGFACE_HUB_TOKEN")
 client = InferenceClient(model="Qwen/Qwen2.5-7B-Instruct", token=HF_TOKEN)
 DB_FILE = "nodeai_pro_memory.json"
-# 2. HỆ THỐNG TRÍ NHỚ THEO USER
 def get_user_id(username):
     if not username: return "guest"
     return hashlib.md5(username.encode()).hexdigest()[:8]
@@ -33,251 +31,283 @@ def save_db(data):
     with open(DB_FILE, "w", encoding="utf-8") as f:
         json.dump(data, f, ensure_ascii=False, indent=4)
-# 3. GIAO DIỆN SIÊU ĐẸP - GRADIO 6.0 COMPATIBLE
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
-* { box-sizing: border-box; }
-body { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif !important; }
 .gradio-container {
     background: linear-gradient(135deg, #0a0a0f 0%, #1a0d1a 50%, #0f0a1a 100%) !important;
-    min-height: 100vh !important; position: relative !important; overflow-x: hidden !important;
 }
-/* MOBILE HAMBURGER */
-.hamburger {
-    position: fixed !important; top: 20px !important; left: 20px !important; z-index: 3000 !important;
-    background: rgba(20,20,30,0.95) !important; border: 1px solid rgba(0,242,254,0.3) !important;
-    border-radius: 12px !important; width: 56px !important; height: 56px !important;
-    backdrop-filter: blur(20px) !important; transition: all 0.3s ease !important;
 }
-.hamburger:hover { box-shadow: 0 8px 25px rgba(0,242,254,0.3) !important; }
-/* SIDEBAR MOBILE */
-.sidebar-mobile {
-    position: fixed !important; top: 0 !important; left: -320px !important; width: 320px !important;
-    height: 100vh !important; z-index: 2500 !important; background: rgba(15,15,25,0.98) !important;
-    backdrop-filter: blur(25px) !important; border-right: 1px solid rgba(255,255,255,0.08) !important;
-    transition: left 0.4s cubic-bezier(0.25,0.46,0.45,0.94) !important; padding: 80px 25px 25px !important;
     overflow-y: auto !important;
 }
-.sidebar-mobile.open { left: 0 !important; }
 /* LOGO */
-.logo-text {
-    font-family: 'Orbitron', monospace !important; font-weight: 800 !important;
-    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #ff6b6b 100%) !important;
-    background-size: 300% 300% !important; -webkit-background-clip: text !important;
-    -webkit-text-fill-color: transparent !important; font-size: 28px !important;
-    text-align: center !important; margin-bottom: 35px !important;
-    animation: gradientShift 4s ease infinite !important;
 }
-@keyframes gradientShift { 0%,100%{background-position:0%50%} 50%{background-position:100%50%} }
-/* USER CARD */
-.user-card { background: rgba(255,107,107,0.15) !important; border: 1px solid rgba(255,107,107,0.3) !important;
-    border-radius: 16px !important; padding: 20px !important; margin-bottom: 25px !important;
-    text-align: center !important; backdrop-filter: blur(15px) !important;
-}
-.user-card h3 { color: #ff8e53 !important; margin: 0 0 8px 0 !important; font-size: 18px !important; }
 /* BUTTONS */
-.orange-btn, .hist-btn {
-    width: 100% !important; border-radius: 12px !important; border: none !important; font-weight: 600 !important;
-    cursor: pointer !important; transition: all 0.3s ease !important; margin-bottom: 12px !important;
-    padding: 14px 18px !important; font-size: 15px !important;
 }
-.orange-btn {
-    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 50%, #FF6B6B 100%) !important;
-    box-shadow: 0 6px 20px rgba(255,107,107,0.4) !important; color: white !important;
 }
-.orange-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 30px rgba(255,107,107,0.6) !important; }
-.hist-btn { background: rgba(255,255,255,0.05) !important; color: #a0aec0 !important;
-    border: 1px solid rgba(255,255,255,0.1) !important; text-align: left !important;
-}
-.hist-btn:hover { background: rgba(0,242,254,0.15) !important; color: #00f2fe !important;
-    border-color: rgba(0,242,254,0.4) !important; box-shadow: 0 4px 15px rgba(0,242,254,0.2) !important;
 }
-/* CHAT */
-.chat-container { padding: 20px !important; max-width: 100% !important; margin: 0 auto !important;
-    min-height: 100vh !important; display: flex !important; flex-direction: column !important;
 }
-.chatbot-box { flex: 1 !important; background: rgba(20,20,30,0.6) !important; border: 1px solid rgba(0,242,254,0.2) !important;
-    border-radius: 24px !important; padding: 25px !important; margin-bottom: 120px !important;
-    max-height: 70vh !important; overflow-y: auto !important; backdrop-filter: blur(20px) !important;
-    box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
 }
-.input-bar { position: fixed !important; bottom: 20px !important; left: 20px !important; right: 20px !important;
-    z-index: 1000 !important; background: rgba(20,20,30,0.95) !important; backdrop-filter: blur(25px) !important;
-    border: 1px solid rgba(0,242,254,0.3) !important; border-radius: 24px !important; padding: 12px 20px !important;
-    box-shadow: 0 15px 50px rgba(0,0,0,0.6) !important;
 }
-footer, .gr-button-secondary { display: none !important; }
-@media (min-width: 1024px) {
-    .hamburger { display: none !important; }
-    .sidebar-mobile { position: static !important; left: 0 !important; width: 340px !important; }
-    .chat-container { margin-left: 340px !important; max-width: calc(100% - 360px) !important; }
 }
-@media (max-width: 768px) {
-    .chatbot-box { margin-bottom: 140px !important; padding: 20px !important; border-radius: 20px !important; }
-    .input-bar { padding: 10px 16px !important; bottom: 15px !important; }
 }
 """
-# 4. CORE FUNCTIONS
 def chat_fn(message, history, session_id, store, username):
-    user_text = message.get("text", "")
-    if not user_text and not message.get("files", []):
-        yield {"text": ""}, history, session_id, store, ""
-        return
     user_id = get_user_id(username)
-    if user_id not in store:
-        store[user_id] = {"workspaces": {}}
     if session_id not in store[user_id]["workspaces"]:
         store[user_id]["workspaces"][session_id] = {
-            "title": user_text[:30] if user_text else "Nova Workspace",
-            "history": [],
-            "created": datetime.now().isoformat()
         }
-    api_messages = [{"role": "system", "content": f"Bạn là NodeAI Genesis. Master: Trần Đình Phúc. User: {username}"}]
-    for msg in history:
-        api_messages.append({"role": msg["role"], "content": msg["content"]})
-    api_messages.append({"role": "user", "content": user_text})
     try:
-        ans = ""
-        new_h = history + [{"role": "user", "content": user_text}]
-        for token in client.chat_completion(messages=api_messages, max_tokens=2000, stream=True):
-            if token.choices[0].delta.content:
-                ans += token.choices[0].delta.content
-                yield {"text": ""}, new_h + [{"role": "assistant", "content": ans}], session_id, store, ""
-        final_h = new_h + [{"role": "assistant", "content": ans}]
-        store[user_id]["workspaces"][session_id]["history"] = final_h
-        store[user_id]["workspaces"][session_id]["title"] = user_text[:30] if user_text else store[user_id]["workspaces"][session_id]["title"]
         save_db(store)
-        yield {"text": ""}, final_h, session_id, store, ans
     except Exception as e:
-        yield {"text": f"Lỗi: {str(e)}"}, history + [{"role": "assistant", "content": str(e)}], session_id, store, ""
-def tts_engine(text):
-    if not text or len(text) < 2 or not gTTS: return None
     try:
-        tts = gTTS(text=text[:300], lang='vi')
-        tts.save("voice.mp3")
-        return "voice.mp3"
     except: return None
 def toggle_sidebar():
-    return gr.update(visible=True, elem_classes="sidebar-mobile open")
 def handle_login(profile):
-    """Xử lý đăng nhập từ LoginButton"""
-    if profile and hasattr(profile, 'name') and profile.name:
         username = profile.name
         user_id = get_user_id(username)
-        user_html = f"""
-        <div class='user-card'>
             <h3>👋 Xin chào</h3>
-            <p style='color: #ff8e53; font-weight: 600;'>@{username}</p>
             <small>ID: {user_id}</small>
         </div>
-        """
-        return gr.update(value=user_html), username
-    return gr.update(value="<div class='user-card'><h3>Guest</h3><p>Chưa đăng nhập</p></div>"), "guest"
-def load_history_buttons(store, username):
     user_id = get_user_id(username)
     if user_id in store and "workspaces" in store[user_id]:
-        html_buttons = []
-        for sid, data in sorted(store[user_id]["workspaces"].items(), key=lambda x: x[1]["created"], reverse=True):
-            html_buttons.append(f"""
-            <div class="hist-btn" style="cursor: pointer; margin-bottom: 8px;">
-                💬 {data['title']} ({len(data['history'])//2} tin)
             </div>
-            """)
-        return gr.update(value="".join(html_buttons))
-    return gr.update(value="<div>Chưa có lịch sử chat</div>")
-# 5. GIAO DIỆN CHÍNH - FIX LOGINBUTTON
-with gr.Blocks(title="NodeAI Genesis Pro") as demo:
-    chat_store = gr.State(load_db())
     session_id = gr.State(str(uuid.uuid4()))
     current_user = gr.State("guest")
-    tts_buffer = gr.Textbox(visible=False)
-    # HAMBURGER MENU
-    hamburger = gr.Button("☰", elem_classes="hamburger", scale=1)
     # SIDEBAR
-    with gr.Column(elem_classes="sidebar-mobile", visible=False) as sidebar:
-        gr.HTML("<div class='logo-text'>NODEAI GENESIS</div>")
-        # ✅ FIX: LoginButton dùng .click() thay vì .change()
-        login_btn = gr.LoginButton(value="🔐 ĐĂNG NHẬP HF", elem_classes="orange-btn", scale=1)
-        # USER INFO
-        gr.HTML("<h3 style='color: #a0aec0; margin: 25px 0 15px 0;'>👤 NGƯỜI DÙNG</h3>")
-        user_card = gr.HTML(value="<div class='user-card'><h3>Guest</h3><p>Chưa đăng nhập</p></div>")
-        # TẠO WORKSPACE MỚI
-        new_btn = gr.Button("＋ TẠO KHÔNG GIAN MỚI", elem_classes="orange-btn", scale=1)
-        # LỊCH SỬ CHAT
-        gr.HTML("<h3 style='color: #a0aec0; margin: 25px 0 15px 0;'>📚 LỊCH SỬ</h3>")
-        history_display = gr.HTML(value="Chưa có lịch sử chat")
     # MAIN CHAT
-    with gr.Column(elem_classes="chat-container"):
         chatbot = gr.Chatbot(
-            show_label=False,
-            avatar_images=(None, "https://cdn-icons-png.flaticon.com/512/4712/4712139.png"),
-            elem_classes="chatbot-box"
         )
-        audio_out = gr.Audio(autoplay=True, visible=False)
-        with gr.Row(elem_classes="input-bar"):
-            msg_input = gr.MultimodalTextbox(
-                show_label=False,
-                placeholder="✨ Nhập lệnh cho NodeAI Genesis...",
-                container=False
             )
-    # ✅ EVENTS - FIX LOGINBUTTON
     hamburger.click(toggle_sidebar, outputs=sidebar)
-    # LoginButton chỉ có .click()
     login_btn.click(
         handle_login,
-        outputs=[user_card, current_user]
     ).then(
-        load_history_buttons,
-        inputs=[chat_store, current_user],
-        outputs=history_display
     )
-    # TẠO MỚI
-    new_btn.click(
         lambda: ([], str(uuid.uuid4())),
         outputs=[chatbot, session_id]
     )
-    # CHAT
     msg_input.submit(
-        chat_fn,
-        inputs=[msg_input, chatbot, session_id, chat_store, current_user],
-        outputs=[msg_input, chatbot, session_id, chat_store, tts_buffer]
-    ).then(
-        tts_engine, tts_buffer, audio_out
-    )
 if __name__ == "__main__":
     demo.launch(
-        share=True, server_name="0.0.0.0", server_port=7860,
-        theme=gr.themes.Base(), css=custom_css
     )

 from datetime import datetime
 # Import an toàn
 try: from gtts import gTTS
 except: gTTS = None
+# 1. CẤU HÌNH
 HF_TOKEN = os.getenv("HUGGINGFACE_HUB_TOKEN")
 client = InferenceClient(model="Qwen/Qwen2.5-7B-Instruct", token=HF_TOKEN)
 DB_FILE = "nodeai_pro_memory.json"
+# 2. HỆ THỐNG USER
 def get_user_id(username):
     if not username: return "guest"
     return hashlib.md5(username.encode()).hexdigest()[:8]
     with open(DB_FILE, "w", encoding="utf-8") as f:
         json.dump(data, f, ensure_ascii=False, indent=4)
+# 3. CSS SIMPLIFIED - ĐẢM BẢO HIỂN THỊ
 custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@800&family=Inter:wght@400;500;600&display=swap');
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: 'Inter', sans-serif; }
+/* CONTAINER CHÍNH */
 .gradio-container {
     background: linear-gradient(135deg, #0a0a0f 0%, #1a0d1a 50%, #0f0a1a 100%) !important;
+    color: white !important; min-height: 100vh !important;
 }
+/* HAMBURGER - LUÔN HIỂN THỊ */
+.hamburger-btn {
+    position: fixed !important; top: 20px !important; left: 20px !important;
+    z-index: 9999 !important; width: 60px !important; height: 60px !important;
+    background: linear-gradient(135deg, #FF6B6B, #FF8E53) !important;
+    border: none !important; border-radius: 15px !important;
+    color: white !important; font-size: 24px !important; font-weight: bold !important;
+    box-shadow: 0 8px 25px rgba(255,107,107,0.4) !important;
+    cursor: pointer !important;
 }
+.hamburger-btn:hover { transform: scale(1.05) !important; }
+/* SIDEBAR - SIÊU RÕ */
+.sidebar {
+    position: fixed !important; top: 0 !important; left: -350px !important;
+    width: 350px !important; height: 100vh !important; z-index: 9998 !important;
+    background: rgba(20,20,30, 0.98) !important;
+    backdrop-filter: blur(20px) !important; border-right: 2px solid #00f2fe !important;
+    transition: left 0.4s ease !important; padding: 90px 25px 25px !important;
     overflow-y: auto !important;
 }
+.sidebar.open { left: 0 !important; }
 /* LOGO */
+.logo {
+    font-family: 'Orbitron', monospace !important; font-size: 28px !important;
+    font-weight: 800 !important; text-align: center !important; margin-bottom: 30px !important;
+    background: linear-gradient(90deg, #00f2fe, #4facfe, #ff6b6b) !important;
+    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
 }
 /* BUTTONS */
+.sidebar-btn {
+    width: 100% !important; height: 50px !important; margin-bottom: 15px !important;
+    border: none !important; border-radius: 12px !important; font-size: 16px !important;
+    font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s !important;
+    display: flex !important; align-items: center !important; padding: 0 20px !important;
 }
+.login-btn {
+    background: linear-gradient(135deg, #FF6B6B, #FF8E53) !important; color: white !important;
+    box-shadow: 0 6px 20px rgba(255,107,107,0.4) !important;
 }
+.login-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 30px rgba(255,107,107,0.6) !important; }
+.new-chat-btn {
+    background: linear-gradient(135deg, #00f2fe, #4facfe) !important; color: white !important;
+    box-shadow: 0 6px 20px rgba(0,242,254,0.4) !important;
 }
+.new-chat-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 30px rgba(0,242,254,0.6) !important; }
+/* USER INFO */
+.user-info {
+    background: rgba(255,107,107,0.2) !important; border: 1px solid rgba(255,107,107,0.5) !important;
+    border-radius: 16px !important; padding: 20px !important; margin: 20px 0 !important;
+    text-align: center !important;
 }
+.user-name { color: #ff8e53 !important; font-weight: 600 !important; font-size: 18px !important; }
+/* HISTORY */
+.history-item {
+    background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important;
+    color: #a0aec0 !important; border-radius: 10px !important; padding: 15px !important;
+    margin-bottom: 10px !important; cursor: pointer !important; transition: all 0.3s !important;
+    text-align: left !important; font-size: 14px !important;
 }
+.history-item:hover {
+    background: rgba(0,242,254,0.15) !important; color: #00f2fe !important;
+    border-color: #00f2fe !important; transform: translateX(5px) !important;
 }
+/* MAIN CHAT */
+.main-chat {
+    margin-left: 0 !important; padding: 80px 20px 150px 20px !important; max-width: 100% !important;
+    display: flex !important; flex-direction: column !important; min-height: 100vh !important;
 }
+.chatbot {
+    flex: 1 !important; background: rgba(20,20,30,0.8) !important;
+    border: 1px solid rgba(0,242,254,0.3) !important; border-radius: 20px !important;
+    padding: 25px !important; max-height: 70vh !important; overflow-y: auto !important;
+    backdrop-filter: blur(20px) !important; margin-bottom: 20px !important;
 }
+/* INPUT BAR FIXED */
+.input-container {
+    position: fixed !important; bottom: 20px !important; left: 20px !important; right: 20px !important;
+    z-index: 1000 !important; background: rgba(20,20,30,0.95) !important;
+    backdrop-filter: blur(25px) !important; border: 1px solid rgba(0,242,254,0.4) !important;
+    border-radius: 25px !important; padding: 15px 20px !important;
+}
+footer { display: none !important; }
 """
+# 4. FUNCTIONS
 def chat_fn(message, history, session_id, store, username):
+    user_text = message.strip() if isinstance(message, str) else ""
+    if not user_text:
+        return "", history, session_id, store, ""
     user_id = get_user_id(username)
+    if user_id not in store: store[user_id] = {"workspaces": {}}
     if session_id not in store[user_id]["workspaces"]:
         store[user_id]["workspaces"][session_id] = {
+            "title": user_text[:30], "history": [], "created": datetime.now().isoformat()
         }
+    # Tạo messages cho API
+    messages = [{"role": "system", "content": f"Bạn là NodeAI Genesis. User: {username}"}]
+    for msg in history: messages.append({"role": msg["role"], "content": msg["content"]})
+    messages.append({"role": "user", "content": user_text})
     try:
+        # Stream response
+        response = ""
+        new_history = history + [{"role": "user", "content": user_text}]
+        for chunk in client.chat_completion(messages, max_tokens=1500, stream=True):
+            if chunk.choices[0].delta.content:
+                response += chunk.choices[0].delta.content
+                yield "", new_history + [{"role": "assistant", "content": response}], session_id, store, ""
+        # Lưu history
+        final_history = new_history + [{"role": "assistant", "content": response}]
+        store[user_id]["workspaces"][session_id]["history"] = final_history
+        store[user_id]["workspaces"][session_id]["title"] = user_text[:30]
         save_db(store)
+        yield "", final_history, session_id, store, response
     except Exception as e:
+        yield f"Lỗi: {str(e)}", history, session_id, store, ""
+def tts_fn(text):
+    if not text or not gTTS: return None
     try:
+        tts = gTTS(text=text[:200], lang='vi', slow=False)
+        tts.save("response.mp3")
+        return "response.mp3"
     except: return None
 def toggle_sidebar():
+    return gr.update(visible=True, elem_classes="sidebar open")
 def handle_login(profile):
+    if profile and hasattr(profile, 'name'):
         username = profile.name
         user_id = get_user_id(username)
+        return f"""
+        <div class='user-info'>
             <h3>👋 Xin chào</h3>
+            <div class='user-name'>@{username}</div>
             <small>ID: {user_id}</small>
         </div>
+        """, username
+    return """
+    <div class='user-info'>
+        <h3>👤 Khách</h3>
+        <p>Vui lòng đăng nhập để lưu lịch sử</p>
+    </div>
+    """, "guest"
+def get_history(store, username):
     user_id = get_user_id(username)
     if user_id in store and "workspaces" in store[user_id]:
+        html = ""
+        for sid, data in sorted(store[user_id]["workspaces"].items(),
+                              key=lambda x: x[1].get("created", ""), reverse=True)[:10]:
+            msg_count = len(data["history"]) // 2
+            html += f"""
+            <div class='history-item'>
+                💬 {data['title']}
+                <div style='font-size: 12px; opacity: 0.7;'>
+                    {msg_count} tin nhắn
+                </div>
             </div>
+            """
+        return html or "<div>Chưa có lịch sử chat</div>"
+    return "<div>Chưa có lịch sử chat</div>"
+# 5. GIAO DIỆN
+with gr.Blocks(title="NodeAI Genesis") as demo:
+    # States
+    store = gr.State(load_db())
     session_id = gr.State(str(uuid.uuid4()))
     current_user = gr.State("guest")
+    tts_buffer = gr.State("")
+    gr.HTML("<h1 style='text-align:center; color:#00f2fe; font-size:48px; margin:20px 0;'>🤖 NODEAI GENESIS</h1>")
+    # HAMBURGER
+    hamburger = gr.Button("☰ MENU", elem_classes="hamburger-btn")
     # SIDEBAR
+    with gr.Column(elem_classes="sidebar", visible=False) as sidebar:
+        gr.HTML("<div class='logo'>NODEAI GENESIS</div>")
+        login_btn = gr.LoginButton(value="🔐 ĐĂNG NHẬP", elem_classes="sidebar-btn login-btn")
+        user_info = gr.HTML(value="""
+        <div class='user-info'>
+            <h3>👤 Khách</h3>
+            <p>Vui lòng đăng nhập để lưu lịch sử</p>
+        </div>
+        """)
+        gr.HTML("<h3 style='color:#a0aec0; margin: 30px 0 20px 0;'>➕ KHÔNG GIAN MỚI</h3>")
+        new_chat = gr.Button("TẠO CHAT MỚI", elem_classes="sidebar-btn new-chat-btn")
+        gr.HTML("<h3 style='color:#a0aec0; margin: 30px 0 20px 0;'>📚 LỊCH SỬ</h3>")
+        history_list = gr.HTML(value="Chưa có lịch sử chat")
     # MAIN CHAT
+    with gr.Column(elem_classes="main-chat"):
         chatbot = gr.Chatbot(
+            height=500,
+            show_label=False,
+            avatar_images=("user.png", "https://cdn-icons-png.flaticon.com/512/4712/4712139.png"),
+            elem_classes="chatbot"
         )
+        audio_player = gr.Audio(visible=False)
+        with gr.Row(elem_classes="input-container"):
+            msg_input = gr.Textbox(
+                placeholder="✨ Gõ tin nhắn của bạn vào đây...",
+                show_label=False,
+                scale=8
             )
+            send_btn = gr.Button("GỬI", scale=1)
+    # EVENTS
     hamburger.click(toggle_sidebar, outputs=sidebar)
     login_btn.click(
         handle_login,
+        outputs=[user_info, current_user]
     ).then(
+        get_history,
+        inputs=[store, current_user],
+        outputs=history_list
     )
+    new_chat.click(
         lambda: ([], str(uuid.uuid4())),
         outputs=[chatbot, session_id]
     )
+    def send_message(msg, history, sid, store, user):
+        return chat_fn(msg, history, sid, store, user)
     msg_input.submit(
+        send_message,
+        inputs=[msg_input, chatbot, session_id, store, current_user],
+        outputs=[msg_input, chatbot, session_id, store, tts_buffer]
+    ).then(tts_fn, tts_buffer, audio_player)
+    send_btn.click(
+        send_message,
+        inputs=[msg_input, chatbot, session_id, store, current_user],
+        outputs=[msg_input, chatbot, session_id, store, tts_buffer]
+    ).then(tts_fn, tts_buffer, audio_player)
 if __name__ == "__main__":
     demo.launch(
+        share=True,
+        server_name="0.0.0.0",
+        server_port=7860,
+        theme=gr.themes.Base(),
+        css=custom_css,
+        auth=None  # Tắt auth mặc định để LoginButton hoạt động
     )