Update app.py

app.py

@@ -19,7 +19,6 @@ DB_FILE = "nodeai_pro_memory.json"
 
 # 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]
 
@@ -38,38 +37,33 @@ def save_db(data):
 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');
 
-/* RESET & BASE */
 * { 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;
+    min-height: 100vh !important; position: relative !important; overflow-x: hidden !important;
 }
 
-/* MOBILE HAMBURGER MENU */
+/* 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; cursor: pointer !important;
+    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 SLIDE IN */
+/* 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;
+    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 */
 .logo-text {
     font-family: 'Orbitron', monospace !important; font-weight: 800 !important;
     background: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #ff6b6b 100%) !important;
@@ -78,14 +72,10 @@ body { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif !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 gradientShift { 0%,100%{background-position:0%50%} 50%{background-position:100%50%} }
 
-/* USER INFO CARD */
-.user-card {
-    background: rgba(255,107,107,0.15) !important; border: 1px solid rgba(255,107,107,0.3) !important;
+/* 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;
 }
@@ -93,74 +83,50 @@ body { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif !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;
+    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;
+.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, .hist-btn.active {
-    background: rgba(0,242,254,0.15) !important; color: #00f2fe !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;
 }
 
-/* MAIN CHAT - FULLSCREEN MOBILE */
-.chat-container {
-    padding: 20px !important; max-width: 100% !important; margin: 0 auto !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;
+.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;
 }
-
-/* 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;
+.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;
 }
-
-/* HIDE DEFAULT ELEMENTS */
 footer, .gr-button-secondary { display: none !important; }
 
-/* DESKTOP SIDEBAR */
-@media screen and (min-width: 1024px) {
+@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; }
 }
-
-/* 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) {
+@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; }
-    .logo-text { font-size: 24px !important; }
 }
 """
 
-# 4. CORE LOGIC CHAT - PER USER
+# 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", []): 
@@ -195,7 +161,6 @@ def chat_fn(message, history, session_id, store, username):
         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, ""
@@ -208,30 +173,68 @@ def tts_engine(text):
         return "voice.mp3"
     except: return None
 
-# 5. GIAO DIỆN CHÍNH - GRADIO 6.0 SYNTAX
+def toggle_sidebar():
+    return gr.update(visible=True, elem_classes="sidebar-mobile open")
+
+def login_event(username):
+    if username:
+        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]:
+        return [
+            gr.Button(
+                f"💬 {data['title']} ({len(data['history'])//2} tin)", 
+                elem_classes="hist-btn"
+            ) for sid, data in sorted(store[user_id]["workspaces"].items(), 
+                                    key=lambda x: x[1]["created"], reverse=True)
+        ]
+    return []
+
+def load_workspace(store, session_id, username):
+    user_id = get_user_id(username)
+    if user_id in store and session_id in store[user_id]["workspaces"]:
+        history = store[user_id]["workspaces"][session_id]["history"]
+        return history, session_id
+    return [], session_id
+
+# 5. GIAO DIỆN CHÍNH
 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 MOBILE
+    # HAMBURGER MENU
     hamburger = gr.Button("☰", elem_classes="hamburger", scale=1)
     
-    # SIDEBAR - MOBILE SLIDE
+    # SIDEBAR
     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>")
+        # ĐĂNG NHẬP BUTTON Ở ĐÂY 👈
+        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)
         
-        gr.HTML("<h3>📚 LỊCH SỬ</h3>")
+        # LỊCH SỬ CHAT Ở ĐÂY 👈
+        gr.HTML("<h3 style='color: #a0aec0; margin: 25px 0 15px 0;'>📚 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"):
@@ -249,30 +252,27 @@ with gr.Blocks(title="NodeAI Genesis Pro") as demo:
                 container=False
             )
     
-    # EVENTS - GRADIO 6.0 EVENT SYSTEM
-    def toggle_sidebar():
-        return gr.update(visible=True, elem_classes="sidebar-mobile open")
-
-    def login_event(username):
-        if username:
-            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), 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)
-    
-    # Event listeners
+    # EVENTS
     hamburger.click(toggle_sidebar, outputs=sidebar)
+    
+    # ĐĂNG NHẬP → CẬP NHẬT USER + LỊCH SỬ
+    login_btn.change(
+        login_event,
+        inputs=current_user,
+        outputs=[user_card, current_user]
+    ).then(
+        load_history_buttons,
+        inputs=[chat_store, current_user],
+        outputs=history_container
+    )
+    
+    # TẠO MỚI
     new_btn.click(
-        lambda: ([], str(uuid.uuid4())), 
+        lambda: ([], str(uuid.uuid4())),
         outputs=[chatbot, session_id]
     )
     
+    # CHAT
     msg_input.submit(
         chat_fn, 
         inputs=[msg_input, chatbot, session_id, chat_store, current_user], 
@@ -283,9 +283,6 @@ with gr.Blocks(title="NodeAI Genesis Pro") as demo:
 
 if __name__ == "__main__":
     demo.launch(
-        share=True,
-        server_name="0.0.0.0",
-        server_port=7860,
-        theme=gr.themes.Base(),
-        css=custom_css
+        share=True, server_name="0.0.0.0", server_port=7860,
+        theme=gr.themes.Base(), css=custom_css
     )