Update app.py

app.py

@@ -10,11 +10,12 @@ except: DDGS = None
 try: from gtts import gTTS
 except: gTTS = None
 
-# 1. 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_platinum_v31.json"
+DB_FILE = "nodeai_pro_memory.json"
 
+# 2. HỆ THỐNG TRÍ NHỚ (MEMORY CACHE)
 def load_db():
     if os.path.exists(DB_FILE):
         try:
@@ -26,81 +27,129 @@ def save_db(data):
     with open(DB_FILE, "w", encoding="utf-8") as f:
         json.dump(data, f, ensure_ascii=False, indent=4)
 
-# 2. GUI DESIGN (FIX TRÀN MÀN HÌNH)
+# 3. GIAO DIỆN SIÊU ĐẸP (GLASSMORPHISM & ORANGE GLOW)
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Plus+Jakarta+Sans:wght@400;600&display=swap');
+@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: #08080c !important;
+    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 linh hoạt */
+/* Sidebar Kính mờ (Glassmorphism) */
 .sidebar-node {
     position: fixed !important;
     left: 0 !important; top: 0 !important;
-    width: 260px !important; height: 100vh !important;
-    background: #0d0d12 !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: 20px !important;
+    padding: 25px 20px !important;
+    box-shadow: 5px 0 30px rgba(0,0,0,0.5) !important;
 }
 
+/* Logo Cyberpunk */
 .logo-text {
     font-family: 'Orbitron', sans-serif !important;
-    background: linear-gradient(90deg, #00f2fe, #4facfe);
+    background: linear-gradient(90deg, #00f2fe, #4facfe, #00f2fe);
+    background-size: 200% auto;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    font-size: 20px; text-align: center; margin-bottom: 20px;
+    font-size: 26px; text-align: center; margin-bottom: 30px;
+    animation: shine 3s linear infinite;
 }
+@keyframes shine { to { background-position: 200% center; } }
 
+/* Nút New Workspace Màu Cam Rực Rỡ */
 .orange-btn {
-    background: linear-gradient(90deg, #ff7e5f, #feb47b) !important;
-    border: none !important; color: white !important; font-weight: bold !important;
+    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;
+}
+.orange-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5) !important;
 }
 
-/* Chat Area - Sửa lỗi tràn màn hình */
+/* 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: 260px !important;
-    width: calc(100% - 260px) !important;
+    margin-left: 280px !important;
+    width: calc(100% - 280px) !important;
     min-height: 100vh !important;
-    padding: 10px 20px !important;
-    box-sizing: border-box !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; 
-    height: 75vh !important;
-    margin-bottom: 120px !important;
+    width: 100% !important;
+    max-width: 900px !important;
+    height: 78vh !important;
+    margin-bottom: 100px !important;
 }
 
-/* Thanh nhập liệu - Tự động co giãn theo màn hình */
+/* Thanh Nhập Liệu Cố Định Chống Tràn */
 .input-fixed-bottom {
     position: fixed !important;
-    bottom: 20px !important;
-    left: 280px !important; /* Cách sidebar */
-    right: 20px !important; /* Cách lề phải */
-    background: #16161e !important;
-    border: 1px solid rgba(0, 242, 254, 0.3) !important;
-    border-radius: 15px !important;
-    padding: 5px 15px !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-sizing: border-box !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;
 }
 
-/* Responsive cho điện thoại */
+/* Ẩ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 { left: 15px !important; right: 15px !important; }
+    .input-fixed-bottom { 
+        transform: translateX(-50%) !important; 
+        width: 90% !important; 
+        bottom: 15px !important; 
+    }
 }
-
-footer { display: none !important; }
 """
 
-# 3. CORE LOGIC
+# 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", []): 
@@ -108,7 +157,7 @@ def chat_fn(message, history, session_id, store):
         return
     
     if session_id not in store:
-        store[session_id] = {"title": user_text[:20] if user_text else "New Workspace", "history": []}
+        store[session_id] = {"title": user_text[:25] if user_text else "Nova Workspace", "history": []}
     
     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"]})
@@ -120,13 +169,14 @@ 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
-                # Chỉ gửi text về chatbot, không gửi về audio_out ở đây
+                # 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
         save_db(store)
-        # Khi xong hẳn, gửi văn bản cuối cùng vào tts_buffer (một Textbox ẩn)
+        
+        # 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, ""
@@ -139,42 +189,45 @@ def tts_engine(text):
         return "voice.mp3"
     except: return None
 
-# 4. INTERFACE
-with gr.Blocks(title="NodeAI Genesis") as demo:
+# 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()))
-    tts_buffer = gr.Textbox(visible=False) # Dùng làm trung gian để fix lỗi audio
+    tts_buffer = gr.Textbox(visible=False) # Chìa khóa chống lỗi Audio
     
-    with gr.Column(elem_classes="sidebar-node"):
-        gr.HTML("<div class='logo-text'>NODEAI GENESIS</div>")
-        gr.LoginButton(value="Đăng nhập")
-        new_btn = gr.Button("＋ NEW WORKSPACE", variant="primary", 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']}", variant="ghost")
-                    btn.click(lambda s=sid: (store[s]["history"], s), None, [chatbot, session_id])
-
-    with gr.Column(elem_classes="chat-main"):
-        chatbot = gr.Chatbot(show_label=False) 
-        audio_out = gr.Audio(autoplay=True, visible=False)
-        
-        with gr.Row(elem_classes="input-fixed-bottom"):
-            msg_input = gr.MultimodalTextbox(
-                show_label=False, 
-                placeholder="Hỏi Master Phúc bất cứ điều gì...", 
-                container=False
-            )
-
-    # LUỒNG XỬ LÝ (QUAN TRỌNG ĐỂ FIX LỖI)
+    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, tts_buffer] # Trả kết quả TTS vào buffer
+        [msg_input, chatbot, session_id, chat_store, tts_buffer]
     ).then(
-        tts_engine, tts_buffer, audio_out # TTS chỉ đọc từ buffer, không đọc từ Chatbot
+        tts_engine, tts_buffer, audio_out
     )
     
     new_btn.click(lambda: ([], str(uuid.uuid4())), None, [chatbot, session_id])