Update app.py

app.py

@@ -3,6 +3,8 @@ 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
@@ -15,7 +17,12 @@ 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Ớ (MEMORY CACHE)
+# 2. HỆ THỐNG TRÍ NHỚ THEO USER
+def get_user_id(username):
+    """Tạo ID unique cho mỗi user dựa trên username"""
+    if not username: return "guest"
+    return hashlib.md5(username.encode()).hexdigest()[:8]
+
 def load_db():
     if os.path.exists(DB_FILE):
         try:
@@ -27,140 +34,153 @@ 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 (GLASSMORPHISM & ORANGE GLOW)
+# 3. GIAO DIỆN SIÊU ĐẸP - MOBILE FIRST
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@800&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
 
-/* Nền vũ trụ tối */
+/* RESET & BASE */
+* { box-sizing: border-box; }
+body { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif !important; }
 .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;
+    background: linear-gradient(135deg, #0a0a0f 0%, #1a0d1a 50%, #0f0a1a 100%) !important;
+    min-height: 100vh !important;
+    position: relative !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;
+/* MOBILE HAMBURGER MENU */
+.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; cursor: pointer !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; }
 
-/* Logo Cyberpunk */
+/* SIDEBAR - MOBILE SLIDE IN */
+.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 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;
+    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%; }
 }
-@keyframes shine { to { background-position: 200% center; } }
 
-/* Nút New Workspace Màu Cam Rực Rỡ */
+/* USER INFO 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 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;
+    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;
 }
-.orange-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5) !important;
+.hist-btn:hover, .hist-btn.active {
+    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;
 }
 
-/* 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;
+/* MAIN CHAT - FULLSCREEN MOBILE */
+.chat-container {
+    padding: 20px !important; max-width: 100% !important; margin: 0 auto !important;
+    min-height: 100vh !important; display: flex !important; flex-direction: column !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;
+.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;
 }
 
-/* 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 */
+/* FIXED INPUT BAR */
+.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; transition: all 0.3s ease !important;
+}
+.input-bar:focus-within {
+    border-color: rgba(0,242,254,0.6) !important; box-shadow: 0 20px 60px rgba(0,242,254,0.2) !important;
+}
+
+/* HIDE DEFAULT ELEMENTS */
 footer, .gr-button-secondary { display: none !important; }
 
-/* Responsive Mobile */
+/* DESKTOP SIDEBAR */
+@media screen and (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; }
+}
+
+/* TABLET */
+@media screen and (max-width: 1023px) and (min-width: 769px) {
+    .sidebar-mobile { width: 300px !important; }
+    .chat-container { margin-left: 0 !important; }
+}
+
+/* PERFECT 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; 
-    }
+    .chatbot-box { margin-bottom: 140px !important; padding: 20px !important; border-radius: 20px !important; }
+    .input-bar { padding: 10px 16px !important; bottom: 15px !important; }
+    .logo-text { font-size: 24px !important; }
 }
 """
 
-# 4. CORE LOGIC CHAT
-def chat_fn(message, history, session_id, store):
+# 4. CORE LOGIC CHAT - PER USER
+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
     
-    if session_id not in store:
-        store[session_id] = {"title": user_text[:25] if user_text else "Nova Workspace", "history": []}
+    user_id = get_user_id(username)
+    if user_id not in store:
+        store[user_id] = {"workspaces": {}}
     
-    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"]})
+    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:
@@ -169,17 +189,16 @@ def chat_fn(message, history, session_id, store):
         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, ""
         
         final_h = new_h + [{"role": "assistant", "content": ans}]
-        store[session_id]["history"] = final_h
+        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)
         
-        # 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:
-        yield {"text": ""}, history + [{"role": "assistant", "content": str(e)}], session_id, store, ""
+        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
@@ -189,48 +208,104 @@ def tts_engine(text):
         return "voice.mp3"
     except: return None
 
-# 5. DỰNG GIAO DIỆN
-with gr.Blocks(title="NodeAI Genesis", theme=gr.themes.Base()) as demo:
+def toggle_sidebar():
+    return gr.update(visible=True, elem_classes="sidebar-mobile open")
+
+def load_user_workspaces(store, username):
+    user_id = get_user_id(username)
+    if user_id in store and "workspaces" in store[user_id]:
+        workspaces = store[user_id]["workspaces"]
+        buttons = []
+        for sid, data in sorted(workspaces.items(), key=lambda x: x[1]["created"], reverse=True):
+            btn = gr.Button(
+                f"💬 {data['title']} ({len(data['history'])//2} tin)", 
+                elem_classes="hist-btn"
+            )
+            buttons.append(btn)
+        return buttons
+    return []
+
+# 5. GIAO DIỆN CHÍNH
+with gr.Blocks(title="NodeAI Genesis Pro", theme=gr.themes.Base(), css=custom_css) as demo:
     chat_store = gr.State(load_db())
     session_id = gr.State(str(uuid.uuid4()))
-    tts_buffer = gr.Textbox(visible=False) # Chìa khóa chống lỗi Audio
+    current_user = gr.State("guest")
+    tts_buffer = gr.Textbox(visible=False)
+    
+    # HAMBURGER MENU MOBILE
+    hamburger = gr.Button("☰", elem_classes="hamburger").style(size="lg")
+    
+    # SIDEBAR - MOBILE SLIDE
+    with gr.Column(elem_classes="sidebar-mobile", visible=False) as sidebar:
+        gr.HTML("<div class='logo-text'>NODEAI GENESIS</div>")
+        
+        with gr.Row():
+            gr.HTML("<h3>👤 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>")
+        
+        new_btn = gr.Button("＋ TẠO KHÔNG GIAN MỚI", elem_classes="orange-btn").style(size="lg")
+        
+        gr.HTML("<h3>📚 LỊCH SỬ</h3>")
+        history_container = gr.Column()
+        
+        gr.HTML("<div style='height: 200px;'></div>")  # Spacer
+    
+    # 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
+    def login_event(username):
+        if username:
+            user_id = get_user_id(username)
+            workspaces = load_user_workspaces(chat_store.value, 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), gr.update(visible=True)
+        return gr.update(value="<div class='user-card'><h3>Guest</h3><p>Chưa đăng nhập</p></div>"), gr.update(visible=False)
+    
+    gr.LoginButton(value="🔐 ĐĂNG NHẬP", elem_classes="orange-btn").change(
+        login_event, current_user, [user_card, history_container]
+    )
+    
+    hamburger.click(toggle_sidebar, None, sidebar)
+    new_btn.click(
+        lambda: ([], str(uuid.uuid4())), 
+        None, [chatbot, session_id]
+    ).then(
+        lambda store, user: load_user_workspaces(store, user), 
+        [chat_store, current_user], history_container
+    )
     
-    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, 
-        [msg_input, chatbot, session_id, chat_store], 
+        [msg_input, chatbot, session_id, chat_store, current_user], 
         [msg_input, chatbot, session_id, chat_store, tts_buffer]
     ).then(
         tts_engine, tts_buffer, audio_out
     )
-    
-    new_btn.click(lambda: ([], str(uuid.uuid4())), None, [chatbot, session_id])
 
 if __name__ == "__main__":
-    demo.launch(css=custom_css)
+    demo.launch(
+        share=True, 
+        server_name="0.0.0.0",
+        server_port=7860,
+        favicon_path="favicon.ico"  # Thêm favicon nếu có
+    )