Update app.py

app.py

@@ -3,23 +3,19 @@ from huggingface_hub import InferenceClient
 import os
 import uuid
 import json
-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
 
-# CẤU HÌNH
+# 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"
 
-# HỆ THỐNG USER
-def get_user_id(username):
-    if not username: return "guest"
-    return hashlib.md5(username.encode()).hexdigest()[:8]
-
+# 2. HỆ THỐNG TRÍ NHỚ (MEMORY CACHE)
 def load_db():
     if os.path.exists(DB_FILE):
         try:
@@ -31,197 +27,210 @@ def save_db(data):
     with open(DB_FILE, "w", encoding="utf-8") as f:
         json.dump(data, f, ensure_ascii=False, indent=4)
 
-# CSS ĐƠN GIẢN
+# 3. GIAO DIỆN SIÊU ĐẸP (GLASSMORPHISM & ORANGE GLOW)
 custom_css = """
-.gradio-container { background: #0a0a0f !important; color: white !important; }
-.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; box-shadow: 0 8px 25px rgba(255,107,107,0.4) !important;
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@800&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');
+
+/* Nền vũ trụ tối */
+.gradio-container {
+    background: radial-gradient(circle at 50% 0%, #151522 0%, #050508 100%) !important;
+    font-family: 'Plus Jakarta Sans', sans-serif !important;
+    color: #e2e8f0 !important;
+    overflow-x: hidden !important;
+}
+
+/* Sidebar Kính mờ (Glassmorphism) */
+.sidebar-node {
+    position: fixed !important;
+    left: 0 !important; top: 0 !important;
+    width: 280px !important; height: 100vh !important;
+    background: rgba(15, 15, 20, 0.4) !important;
+    backdrop-filter: blur(20px) !important;
+    -webkit-backdrop-filter: blur(20px) !important;
+    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
+    z-index: 1000 !important;
+    padding: 25px 20px !important;
+    box-shadow: 5px 0 30px rgba(0,0,0,0.5) !important;
 }
-.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;
+
+/* Logo Cyberpunk */
+.logo-text {
+    font-family: 'Orbitron', sans-serif !important;
+    background: linear-gradient(90deg, #00f2fe, #4facfe, #00f2fe);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 26px; text-align: center; margin-bottom: 30px;
+    animation: shine 3s linear infinite;
 }
-.sidebar.open { left: 0 !important; }
-.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; color: white !important; cursor: pointer !important;
+@keyframes shine { to { background-position: 200% center; } }
+
+/* Nút New Workspace Màu Cam Rực Rỡ */
+.orange-btn {
+    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%) !important;
+    border: none !important; color: white !important; font-weight: 600 !important;
+    border-radius: 12px !important; padding: 10px !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3) !important;
+    margin-bottom: 20px !important;
 }
-.main-chat { padding: 80px 20px 150px 20px !important; }
-.chatbot { background: rgba(20,20,30,0.8) !important; border-radius: 20px !important; }
-.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; border-radius: 25px !important;
+.orange-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5) !important;
+}
+
+/* Nút Lịch sử Chat */
+.hist-btn {
+    background: transparent !important; border: 1px solid transparent !important;
+    color: #a0aec0 !important; text-align: left !important;
+    border-radius: 8px !important; transition: 0.2s !important;
+}
+.hist-btn:hover {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    color: #fff !important;
+}
+
+/* Khu vực Chat Chính */
+.chat-main {
+    margin-left: 280px !important;
+    width: calc(100% - 280px) !important;
+    min-height: 100vh !important;
+    padding: 20px 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+}
+
+/* Chatbot Box */
+.gr-chatbot { 
+    background: transparent !important; 
+    border: none !important; 
+    width: 100% !important;
+    max-width: 900px !important;
+    height: 78vh !important;
+    margin-bottom: 100px !important;
+}
+
+/* Thanh Nhập Liệu Cố Định Chống Tràn */
+.input-fixed-bottom {
+    position: fixed !important;
+    bottom: 30px !important;
+    left: 50% !important;
+    transform: translateX(calc(-50% + 140px)) !important; /* Cân bằng với sidebar */
+    width: 100% !important;
+    max-width: 850px !important;
+    background: rgba(20, 20, 28, 0.8) !important;
+    backdrop-filter: blur(15px) !important;
+    border: 1px solid rgba(0, 242, 254, 0.2) !important;
+    border-radius: 20px !important;
+    padding: 8px 15px !important;
+    z-index: 2000 !important;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
+    transition: 0.3s !important;
+}
+.input-fixed-bottom:focus-within {
+    border-color: rgba(0, 242, 254, 0.6) !important;
+    box-shadow: 0 10px 40px rgba(0, 242, 254, 0.15) !important;
+}
+
+/* Ẩn các thành phần thừa */
+footer, .gr-button-secondary { display: none !important; }
+
+/* Responsive Mobile */
+@media screen and (max-width: 768px) {
+    .sidebar-node { display: none !important; }
+    .chat-main { margin-left: 0 !important; width: 100% !important; }
+    .input-fixed-bottom { 
+        transform: translateX(-50%) !important; 
+        width: 90% !important; 
+        bottom: 15px !important; 
+    }
 }
-footer { display: none !important; }
 """
 
-# ✅ FIX CHAT FUNCTION - TRẢ VỀ ĐÚNG 5 VALUES
-def chat_fn(message, history, session_id, store, username):
-    user_text = message.strip() if message else ""
-    if not user_text: 
-        return "", history, session_id, store, ""
+# 4. CORE LOGIC CHAT
+def chat_fn(message, history, session_id, store):
+    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:
+        store[session_id] = {"title": user_text[:25] if user_text else "Nova Workspace", "history": []}
     
-    if session_id not in store[user_id]["workspaces"]:
-        store[user_id]["workspaces"][session_id] = {
-            "title": user_text[:30], "history": [], "created": datetime.now().isoformat()
-        }
-    
-    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})
+    api_messages = [{"role": "system", "content": "Bạn là NodeAI Genesis. Master: Trần Đình Phúc."}]
+    for msg in history: api_messages.append({"role": msg["role"], "content": msg["content"]})
+    api_messages.append({"role": "user", "content": user_text})
     
     try:
-        # NON-STREAMING để tránh lỗi generator
-        response = client.chat_completion(
-            messages, max_tokens=1000, temperature=0.7
-        ).choices[0].message.content
-        
-        new_history = history + [{"role": "user", "content": user_text}]
-        final_history = new_history + [{"role": "assistant", "content": response}]
+        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 rỗng cho tts_buffer trong lúc stream để tránh lỗi
+                yield {"text": ""}, new_h + [{"role": "assistant", "content": ans}], session_id, store, ""
         
-        # Lưu vào store
-        store[user_id]["workspaces"][session_id]["history"] = final_history
-        store[user_id]["workspaces"][session_id]["title"] = user_text[:30]
+        final_h = new_h + [{"role": "assistant", "content": ans}]
+        store[session_id]["history"] = final_h
         save_db(store)
         
-        return "", final_history, session_id, store, response
-        
+        # Chỉ khi hoàn thành mới gửi ans vào tts_buffer
+        yield {"text": ""}, final_h, session_id, store, ans
     except Exception as e:
-        error_msg = f"Lỗi: {str(e)}"
-        new_history = history + [{"role": "assistant", "content": error_msg}]
-        return "", new_history, session_id, store, ""
+        yield {"text": ""}, history + [{"role": "assistant", "content": str(e)}], session_id, store, ""
 
-def tts_fn(text):
-    if not text or not gTTS: return None
+def tts_engine(text):
+    if not text or len(text) < 2 or not gTTS: return None
     try:
-        tts = gTTS(text=text[:200], lang='vi', slow=False)
-        tts.save("response.mp3")
-        return "response.mp3"
+        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 open")
-
-# ✅ FIX LOGIN - Không cần input
-def handle_login():
-    # Mặc định guest - vì LoginButton chỉ hoạt động trong HF Spaces
-    return """
-    <div style='background: rgba(255,107,107,0.2); padding: 20px; border-radius: 16px; border: 1px solid rgba(255,107,107,0.5); text-align: center;'>
-        <h3 style='color: #ff8e53;'>👤 Khách (Guest)</h3>
-        <p>Đăng nhập HF Spaces để lưu lịch sử riêng</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.get("history", [])) // 2
-            html += f"""
-            <div style='background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); 
-                        color: #a0aec0; border-radius: 10px; padding: 15px; margin-bottom: 10px; 
-                        cursor: pointer; text-align: left;'>
-                💬 {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>"
-
-# GIAO DIỆN
-with gr.Blocks(title="NodeAI Genesis") as demo:
-    store = gr.State(load_db())
+# 5. DỰNG GIAO DIỆN
+with gr.Blocks(title="NodeAI Genesis", theme=gr.themes.Base()) as demo:
+    chat_store = gr.State(load_db())
     session_id = gr.State(str(uuid.uuid4()))
-    current_user = gr.State("guest")
-    tts_buffer = gr.State("")
-    
-    # Header
-    gr.HTML("<h1 style='text-align:center; color:#00f2fe; font-size:48px; margin:40px 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 style='font-size:32px; text-align:center; margin-bottom:30px; background: linear-gradient(90deg, #00f2fe, #ff6b6b); -webkit-background-clip: text; -webkit-text-fill-color: transparent;'>NODEAI</div>")
-        
-        login_btn = gr.Button("🔐 ĐĂNG NHẬP", elem_classes="sidebar-btn", variant="primary")
-        user_info = gr.HTML()
-        
-        new_chat = gr.Button("➕ CHAT MỚI", elem_classes="sidebar-btn", variant="secondary")
-        history_list = gr.HTML(value="Chưa có lịch sử")
-    
-    # Main Chat
-    with gr.Column(elem_classes="main-chat"):
-        chatbot = gr.Chatbot(height=500, show_label=False, 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...", scale=8, show_label=False)
-            send_btn = gr.Button("GỬI", scale=1, variant="primary")
-    
-    # Events
-    hamburger.click(toggle_sidebar, outputs=sidebar)
-    
-    # Login (demo)
-    login_btn.click(handle_login, outputs=[user_info, current_user])
+    tts_buffer = gr.Textbox(visible=False) # Chìa khóa chống lỗi Audio
     
-    # Update history sau login
-    def update_after_login(store, user):
-        return get_history(store, user)
-    
-    current_user.change(
-        update_after_login,
-        inputs=[store, current_user],
-        outputs=history_list
-    )
-    
-    # New chat
-    new_chat.click(
-        lambda: ([], str(uuid.uuid4())),
-        outputs=[chatbot, session_id]
-    )
-    
-    # Chat submit
+    with gr.Row():
+        # SIDEBAR
+        with gr.Column(elem_classes="sidebar-node"):
+            gr.HTML("<div class='logo-text'>NODEAI GENESIS</div>")
+            gr.LoginButton(value="Xác thực Hugging Face")
+            new_btn = gr.Button("＋ TẠO KHÔNG GIAN MỚI", elem_classes="orange-btn")
+            
+            with gr.Column():
+                @gr.render(inputs=chat_store)
+                def render_history(store):
+                    for sid in reversed(list(store.keys())):
+                        btn = gr.Button(f"💬 {store[sid]['title']}", elem_classes="hist-btn")
+                        btn.click(lambda s=sid: (store[s]["history"], s), None, [chatbot, session_id])
+
+        # MAIN CHAT
+        with gr.Column(elem_classes="chat-main"):
+            chatbot = gr.Chatbot(show_label=False, avatar_images=(None, "https://cdn-icons-png.flaticon.com/512/4712/4712139.png")) 
+            audio_out = gr.Audio(autoplay=True, visible=False)
+            
+            with gr.Row(elem_classes="input-fixed-bottom"):
+                msg_input = gr.MultimodalTextbox(
+                    show_label=False, 
+                    placeholder="Nhập lệnh cho NodeAI...", 
+                    container=False
+                )
+
+    # XỬ LÝ SỰ KIỆN KHÔNG LỖI
     msg_input.submit(
-        chat_fn,
-        inputs=[msg_input, chatbot, session_id, store, current_user],
-        outputs=[msg_input, chatbot, session_id, store, tts_buffer]
+        chat_fn, 
+        [msg_input, chatbot, session_id, chat_store], 
+        [msg_input, chatbot, session_id, chat_store, tts_buffer]
     ).then(
-        tts_fn, tts_buffer, audio_player
+        tts_engine, tts_buffer, audio_out
     )
     
-    send_btn.click(
-        chat_fn,
-        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
-    )
+    new_btn.click(lambda: ([], str(uuid.uuid4())), None, [chatbot, session_id])
 
 if __name__ == "__main__":
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        theme=gr.themes.Base(),
-        css=custom_css,
-        share=False,  # Tắt share cho HF Spaces
-        show_error=True
-    )
+    demo.launch(css=custom_css)