Update app.py

app.py

@@ -1,95 +1,107 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 import os
-import json
+import uuid
 
-# 1. Khởi tạo Client
+# 1. Cấu hình Model
 HF_TOKEN = os.getenv("HUGGINGFACE_HUB_TOKEN")
 client = InferenceClient(model="Qwen/Qwen2.5-7B-Instruct", token=HF_TOKEN)
 
+# 2. CSS để tạo giao diện giống Gemini
 custom_css = """
-.header-node { 
-    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); 
-    padding: 20px; border-radius: 12px; color: white; text-align: center; margin-bottom: 20px;
-}
-.log-container { 
-    background: #1e293b; color: #34d399; font-family: 'Courier New', monospace; 
-    padding: 10px; border-radius: 8px; font-size: 0.85em; height: 150px; overflow-y: auto;
+.sidebar { background-color: #1e1f20; border-right: 1px solid #333; padding: 10px; height: 100vh; }
+.chat-container { background-color: #131314; color: white; }
+.nav-item { 
+    background: transparent; border: none; color: #e3e3e3; text-align: left; 
+    width: 100%; padding: 10px; border-radius: 8px; cursor: pointer; margin-bottom: 5px;
 }
+.nav-item:hover { background: #333; }
+.gemini-header { color: #8ab4f8; font-weight: bold; font-size: 1.5rem; margin-bottom: 20px; }
 """
 
-def process_chat(message, history, session_memory, profile: gr.OAuthProfile | None):
-    # Trích xuất nội dung
-    if isinstance(message, dict): user_input = message.get("text", "")
-    elif isinstance(message, list): user_input = message[-1]["content"][0]["text"]
-    else: user_input = str(message)
-
-    user_name = profile.name if profile else "Guest"
+def chat_fn(message, history, current_chat_id, all_chats):
+    if not message: return "", history, current_chat_id, all_chats
     
-    # Logic Memory
-    system_msg = f"Bạn là NodeAI Pro. Đang hỗ trợ {user_name}."
-    if session_memory: system_msg += f" [Memory]: {session_memory}"
-
-    messages = [{"role": "system", "content": system_msg}]
+    # Trích xuất text
+    user_input = message if isinstance(message, str) else message.get("text", "")
+    
+    # Gửi API
+    messages = [{"role": "user", "content": user_input}]
+    # Thêm ngữ cảnh cũ nếu có
     for turn in history:
-        messages.append({"role": turn["role"], "content": turn["content"][0]["text"]})
-    messages.append({"role": "user", "content": user_input})
-
+        messages.insert(-1, {"role": turn["role"], "content": turn["content"][0]["text"]})
+        
+    full_response = ""
     try:
-        full_response = ""
-        for token in client.chat_completion(messages=messages, max_tokens=1500, stream=True):
+        for token in client.chat_completion(messages=messages, max_tokens=1024, stream=True):
             delta = token.choices[0].delta.content
             if delta:
                 full_response += delta
-                yield "", history + [
+                current_history = history + [
                     {"role": "user", "content": [{"type": "text", "text": user_input}]},
                     {"role": "assistant", "content": [{"type": "text", "text": full_response}]}
-                ], session_memory
-        
-        # Cập nhật bộ nhớ sau khi chat
-        if len(user_input) > 5:
-            session_memory += f" | {user_name} hỏi về {user_input[:30]}"
+                ]
+                yield "", current_history, current_chat_id, all_chats
     except Exception as e:
-        yield "", history + [{"role": "assistant", "content": [{"type": "text", "text": f"Error: {str(e)}"}]}], session_memory
+        yield "", history + [{"role": "assistant", "content": [{"type": "text", "text": str(e)}]}], current_chat_id, all_chats
 
-with gr.Blocks(title="NodeAI Pro") as demo:
-    internal_memory = gr.State("")
+    # Cập nhật danh sách cuộc trò chuyện ở Sidebar nếu là tin nhắn đầu tiên
+    if len(history) == 0:
+        all_chats[current_chat_id] = user_input[:20] + "..."
+    
+    return "", current_history, current_chat_id, all_chats
 
-    gr.HTML("<div class='header-node'><h1>NODE AI PRO v3.3</h1><p>Persistent Memory & History Interface</p></div>")
+def new_chat():
+    return [], str(uuid.uuid4()), gr.update()
 
+with gr.Blocks(css=custom_css, title="NodeAI Gemini") as demo:
+    # State quản lý dữ liệu
+    all_chats = gr.State({}) # Lưu {id: title}
+    current_chat_id = gr.State(str(uuid.uuid4()))
+    
     with gr.Row():
-        # SIDEBAR: Chỉ hiện thị đầy đủ khi đã Login
-        with gr.Column(scale=1):
-            with gr.Group():
-                gr.Markdown("### 👤 Tài khoản")
-                login_btn = gr.LoginButton()
-                
-                @gr.render(inputs=login_btn)
-                def render_history_panel(profile: gr.OAuthProfile | None, *args):
-                    if profile:
-                        gr.Markdown(f"👋 Chào, **{profile.name}**")
-                        with gr.Accordion("📂 Nhật ký phiên chat", open=True):
-                            # Hiển thị log bộ nhớ hiện tại
-                            gr.Markdown("**Dữ liệu bộ nhớ AI đang giữ:**")
-                            gr.HTML("<div class='log-container' id='mem-log'>Đang phân tích ngữ cảnh...</div>")
-                            save_btn = gr.Button("💾 Xuất file Lịch sử (.json)", size="sm")
-                    else:
-                        gr.Markdown("⚠️ Đăng nhập để kích hoạt bộ nhớ và lưu lịch sử.")
-
-            clear_btn = gr.Button("🗑️ Xóa phiên chat", variant="secondary")
+        # SIDEBAR (Giống Gemini)
+        with gr.Column(scale=1, elem_classes="sidebar"):
+            gr.Markdown("### Gemini", elem_classes="gemini-header")
+            new_btn = gr.Button("+ Cuộc trò chuyện mới", variant="secondary")
+            gr.Markdown("---")
+            gr.Markdown("**Gần đây**")
+            
+            # Khu vực hiển thị danh sách chat
+            chat_list_display = gr.HTML("<i>Chưa có cuộc hội thoại nào</i>")
+            
+            # Cập nhật sidebar khi có chat mới
+            def update_sidebar(chats):
+                html = "".join([f'<div class="nav-item">💬 {title}</div>' for title in chats.values()])
+                return html if html else "<i>Chưa có cuộc hội thoại nào</i>"
+            
+        # MAIN CHAT AREA
+        with gr.Column(scale=4, elem_classes="chat-container"):
+            chatbot = gr.Chatbot(label="", height=650, type="messages")
             
-        # CHAT MAIN
-        with gr.Column(scale=3):
-            chatbot = gr.Chatbot(label="Neural Feed", height=500)
             with gr.Row():
-                msg_input = gr.Textbox(placeholder="Gõ lệnh tại đây...", show_label=False, scale=9)
-                submit_btn = gr.Button("🚀", variant="primary", scale=1)
+                msg_input = gr.Textbox(
+                    placeholder="Hỏi NodeAI...",
+                    show_label=False,
+                    container=False,
+                    scale=9
+                )
+                submit_btn = gr.Button("🚀", scale=1)
+
+    # Logic xử lý
+    msg_input.submit(
+        chat_fn, 
+        [msg_input, chatbot, current_chat_id, all_chats], 
+        [msg_input, chatbot, current_chat_id, all_chats]
+    ).then(update_sidebar, all_chats, chat_list_display)
+
+    submit_btn.click(
+        chat_fn, 
+        [msg_input, chatbot, current_chat_id, all_chats], 
+        [msg_input, chatbot, current_chat_id, all_chats]
+    ).then(update_sidebar, all_chats, chat_list_display)
 
-    # Xử lý Logic
-    chat_args = {"fn": process_chat, "inputs": [msg_input, chatbot, internal_memory], "outputs": [msg_input, chatbot, internal_memory]}
-    msg_input.submit(**chat_args)
-    submit_btn.click(**chat_args)
-    clear_btn.click(lambda: (None, [], ""), None, [msg_input, chatbot, internal_memory])
+    new_btn.click(new_chat, None, [chatbot, current_chat_id, chat_list_display])
 
 if __name__ == "__main__":
-    demo.launch(css=custom_css)
+    demo.launch()