Update app.py

app.py

@@ -4,10 +4,12 @@ import os
 import uuid
 import json
 
-# 1. CẤU HÌNH HỆ THỐNG
+# 1. CẤU HÌNH (Sử dụng model hỗ trợ Hình ảnh/Vision)
 HF_TOKEN = os.getenv("HUGGINGFACE_HUB_TOKEN")
-client = InferenceClient(model="Qwen/Qwen2.5-7B-Instruct", token=HF_TOKEN)
-DB_FILE = "nodeai_user_vault.json"
+# Chuyển sang model Vision để AI xem được ảnh
+MODEL_ID = "Qwen/Qwen2-VL-7B-Instruct" 
+client = InferenceClient(model=MODEL_ID, token=HF_TOKEN)
+DB_FILE = "nodeai_vision_vault.json"
 
 def load_vault():
     if os.path.exists(DB_FILE):
@@ -16,109 +18,67 @@ def load_vault():
         except: return {}
     return {}
 
-def save_vault(vault_data):
+def save_vault(data):
     with open(DB_FILE, "w", encoding="utf-8") as f:
-        json.dump(vault_data, f, ensure_ascii=False, indent=4)
+        json.dump(data, f, ensure_ascii=False, indent=4)
 
-# 2. GIAO DIỆN SIÊU CẤP (GLASSMORPHISM DIAMOND)
+# 2. UI DIAMOND GLASS (Cập nhật để hiển thị file gửi lên đẹp hơn)
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@800&family=Plus+Jakarta+Sans:wght@400;600&display=swap');
-
-.gradio-container {
-    background: radial-gradient(circle at 50% 0%, #0f172a 0%, #020617 100%) !important;
-    font-family: 'Plus Jakarta Sans', sans-serif !important;
-}
-
-/* Sidebar Kính Mờ */
-.sidebar-node {
-    position: fixed !important;
-    left: 0 !important; top: 0 !important;
-    width: 280px !important; height: 100vh !important;
-    background: rgba(15, 23, 42, 0.6) !important;
-    backdrop-filter: blur(20px) !important;
-    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
-    z-index: 1000 !important;
-    padding: 25px !important;
-}
-
-.logo-text {
-    font-family: 'Orbitron', sans-serif !important;
-    background: linear-gradient(90deg, #38bdf8, #818cf8);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-size: 22px; text-align: center; margin-bottom: 25px;
-}
-
-.orange-btn {
-    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%) !important;
-    border: none !important; color: white !important;
-    font-weight: 600 !important; border-radius: 12px !important;
-    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3) !important;
-}
-
-/* Chat Main Area */
-.chat-main {
-    margin-left: 280px !important;
-    width: calc(100% - 280px) !important;
-    height: 100vh !important;
-    padding: 0 20px !important;
-    box-sizing: border-box !important;
-}
-
-.gr-chatbot { 
-    background: transparent !important; border: none !important; 
-    height: 75vh !important; margin-bottom: 110px !important;
-}
-
-/* Input Area Fixed - Không bao giờ tràn */
-.input-fixed-bottom {
-    position: fixed !important;
-    bottom: 25px !important;
-    left: 50% !important;
-    transform: translateX(calc(-50% + 140px)) !important;
-    width: calc(100% - 340px) !important;
-    max-width: 800px !important;
-    background: rgba(30, 41, 59, 0.8) !important;
-    backdrop-filter: blur(10px) !important;
-    border: 1px solid rgba(56, 189, 248, 0.3) !important;
-    border-radius: 20px !important;
-    padding: 5px 15px !important;
-    z-index: 2000 !important;
-    box-sizing: border-box !important;
-}
-
+.gradio-container { background: radial-gradient(circle at 50% 0%, #0f172a 0%, #020617 100%) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }
+.sidebar-node { position: fixed !important; left: 0 !important; top: 0 !important; width: 280px !important; height: 100vh !important; background: rgba(15, 23, 42, 0.6) !important; backdrop-filter: blur(20px) !important; border-right: 1px solid rgba(255, 255, 255, 0.1) !important; z-index: 1000 !important; padding: 25px !important; }
+.logo-text { font-family: 'Orbitron', sans-serif !important; background: linear-gradient(90deg, #38bdf8, #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 22px; text-align: center; margin-bottom: 25px; }
+.orange-btn { background: linear-gradient(135deg, #f97316 0%, #fb923c 100%) !important; border: none !important; color: white !important; font-weight: 600 !important; border-radius: 12px !important; }
+.chat-main { margin-left: 280px !important; width: calc(100% - 280px) !important; height: 100vh !important; padding: 0 20px !important; box-sizing: border-box !important; }
+.gr-chatbot { background: transparent !important; border: none !important; height: 75vh !important; margin-bottom: 110px !important; }
+.input-fixed-bottom { position: fixed !important; bottom: 25px !important; left: 50% !important; transform: translateX(calc(-50% + 140px)) !important; width: calc(100% - 340px) !important; max-width: 800px !important; background: rgba(30, 41, 59, 0.9) !important; border: 1px solid rgba(56, 189, 248, 0.3) !important; border-radius: 20px !important; padding: 5px 15px !important; z-index: 2000 !important; box-sizing: border-box !important; }
 footer { display: none !important; }
-
-@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: 92% !important; }
-}
+@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: 92% !important; } }
 """
 
-# 3. CORE LOGIC
-def get_username(profile: gr.OAuthProfile | None):
-    return profile.username if profile else "Master_Phuc"
-
+# 3. CORE LOGIC (Xử lý đa phương tiện)
 def chat_fn(message, history, session_id, profile: gr.OAuthProfile | None):
-    username = get_username(profile)
+    username = profile.username if profile else "Master_Phuc"
     user_text = message.get("text", "")
-    if not user_text: yield {"text": ""}, history, session_id, "" ; return
+    files = message.get("files", [])
     
+    if not user_text and not files:
+        yield {"text": ""}, history, session_id, ""
+        return
+
+    # Chuẩn bị tin nhắn cho AI
+    # Lưu ý: Gradio gửi tin nhắn dưới dạng list các nội dung (văn bản hoặc file)
+    content = []
+    if user_text:
+        content.append({"type": "text", "text": user_text})
+    
+    for f in files:
+        # Nếu là ảnh, gửi dưới dạng image_url cho AI xem
+        if f.lower().endswith(('.png', '.jpg', '.jpeg', '.gif', '.webp')):
+            content.append({"type": "image_url", "image_url": {"url": f}})
+        else:
+            # Nếu là file khác, AI sẽ được thông báo có file gửi kèm (Hỗ trợ đọc nội dung file text/code)
+            content.append({"type": "text", "text": f"[Gửi kèm file: {os.path.basename(f)}]"})
+
     vault = load_vault()
     if username not in vault: vault[username] = {}
-    
     if session_id not in vault[username]:
-        vault[username][session_id] = {"title": user_text[:20] + "...", "history": []}
-    
-    api_messages = [{"role": "system", "content": f"Master: {username}. Bạn là NodeAI Genesis."}]
-    for msg in history: api_messages.append({"role": msg["role"], "content": msg["content"]})
-    api_messages.append({"role": "user", "content": user_text})
+        vault[username][session_id] = {"title": user_text[:20] if user_text else "Media Chat", "history": []}
+
+    # Xây dựng prompt
+    messages = [{"role": "system", "content": f"Bạn là NodeAI Genesis. Master: {username}. Bạn có khả năng xem ảnh và đọc file."}]
+    for msg in history:
+        messages.append({"role": msg["role"], "content": msg["content"]})
     
+    messages.append({"role": "user", "content": content})
+
     try:
         ans = ""
-        new_h = history + [{"role": "user", "content": user_text}]
-        for token in client.chat_completion(messages=api_messages, max_tokens=2000, stream=True):
+        # Thêm tin nhắn người dùng vào giao diện ngay lập tức
+        user_msg = {"role": "user", "content": content}
+        new_h = history + [user_msg]
+        
+        for token in client.chat_completion(messages=messages, max_tokens=1500, stream=True):
             if token.choices[0].delta.content:
                 ans += token.choices[0].delta.content
                 yield {"text": ""}, new_h + [{"role": "assistant", "content": ans}], session_id, ""
@@ -128,58 +88,46 @@ def chat_fn(message, history, session_id, profile: gr.OAuthProfile | None):
         save_vault(vault)
         yield {"text": ""}, final_h, session_id, ans
     except Exception as e:
-        yield {"text": ""}, history + [{"role": "assistant", "content": str(e)}], session_id, ""
+        yield {"text": ""}, history + [{"role": "assistant", "content": f"Lỗi: {str(e)}"}], session_id, ""
 
 # 4. GIAO DIỆN
-with gr.Blocks(title="NodeAI Genesis v32.7") as demo:
+with gr.Blocks(title="NodeAI Genesis Vision") as demo:
     session_id = gr.State(str(uuid.uuid4()))
     tts_buffer = gr.Textbox(visible=False)
     vault_state = gr.State(load_vault())
     
     with gr.Row():
-        # SIDEBAR
         with gr.Column(elem_classes="sidebar-node"):
-            gr.HTML("<div class='logo-text'>NODEAI GENESIS</div>")
+            gr.HTML("<div class='logo-text'>NODEAI VISION</div>")
             gr.LoginButton(value="Xác thực Nick")
             new_btn = gr.Button("＋ NEW WORKSPACE", elem_classes="orange-btn")
-            
             gr.Markdown("### 🕒 Lịch sử Chat")
-            
             @gr.render(inputs=[vault_state]) 
             def render_history(current_vault, profile: gr.OAuthProfile | None):
-                username = get_username(profile)
+                username = profile.username if profile else "Master_Phuc"
                 user_chats = current_vault.get(username, {})
                 with gr.Column():
                     for sid in reversed(list(user_chats.keys())):
                         btn = gr.Button(f"◈ {user_chats[sid]['title']}", variant="ghost")
-                        btn.click(lambda s=sid, u=username: (load_vault()[u][s]["history"], s), 
-                                  None, [chatbot, session_id])
+                        btn.click(lambda s=sid, u=username: (load_vault()[u][s]["history"], s), None, [chatbot, session_id])
 
-        # MAIN
         with gr.Column(elem_classes="chat-main"):
-            # Đã xóa type="messages" để fix lỗi runtime
             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
+                    placeholder="Gửi ảnh hoặc hỏi Master Phúc...", 
+                    container=False,
+                    file_types=["image", ".pdf", ".txt", ".py", ".html"] # Cho phép gửi nhiều loại file
                 )
 
-    # EVENT HANDLERS
-    def update_vault(): return load_vault()
-
     msg_input.submit(
         chat_fn, [msg_input, chatbot, session_id], [msg_input, chatbot, session_id, tts_buffer]
-    ).then(
-        update_vault, None, vault_state
-    ).then(
+    ).then(lambda: load_vault(), None, vault_state).then(
         lambda x: f"https://translate.google.com/translate_tts?ie=UTF-8&tl=vi&client=tw-ob&q={x[:200]}" if x else None,
         tts_buffer, audio_out
     )
-    
     new_btn.click(lambda: ([], str(uuid.uuid4())), None, [chatbot, session_id])
 
 if __name__ == "__main__":