Update app.py

app.py

@@ -16,21 +16,53 @@ except:
 
 client = InferenceClient(model="Qwen/Qwen2.5-7B-Instruct", token=HF_TOKEN)
 
-# 2. GIAO DIỆN CSS (Xóa Footer & Header)
+# 2. JAVASCRIPT "DIỆT" TẬN GỐC (Xóa thành phần ngay khi nó vừa xuất hiện)
+head_js = """
+<script>
+    const observer = new MutationObserver(() => {
+        // Danh sách các thành phần cần xóa bỏ
+        const targets = [
+            'footer', 
+            '.built-with', 
+            'header', 
+            '#header', 
+            '.share-button',
+            '.gr-pro',
+            '#component-10' // ID thường thấy của footer trong Gradio 6
+        ];
+        
+        targets.forEach(selector => {
+            const el = document.querySelector(selector);
+            if (el) el.remove();
+        });
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+</script>
+"""
+
+# 3. GIAO DIỆN CSS (Ẩn trước khi JS kịp xóa)
 custom_css = """
-/* Ẩn triệt để các thành phần mặc định của Gradio */
-footer { display: none !important; }
-.built-with { display: none !important; }
-#component-0 { border: none !important; } /* Xóa viền ngoài cùng */
+/* Ẩn triệt để footer và header */
+footer, .built-with, header, #header, .share-button { 
+    display: none !important; 
+    visibility: hidden !important; 
+}
+
+/* Cấu hình tràn viền hoàn toàn */
+.gradio-container { 
+    max-width: 100% !important; 
+    padding: 0 !important; 
+    background: radial-gradient(circle at 50% 0%, #0f172a 0%, #020617 100%) !important;
+}
 
-/* Sidebar Glassmorphism */
+/* Sidebar & UI phong cách NodeAI */
 .sidebar-node { 
     background: rgba(15, 23, 42, 0.8) !important; 
     border-right: 1px solid #38bdf833; 
     padding: 20px; 
 }
 
-/* Logo phong cách Sci-fi */
 .logo-area { 
     font-family: 'Orbitron', sans-serif; 
     background: linear-gradient(90deg, #38bdf8, #818cf8); 
@@ -42,37 +74,18 @@ footer { display: none !important; }
     margin-bottom: 20px; 
 }
 
-/* Dòng cảnh báo tùy chỉnh của Master */
 .custom-warning {
     text-align: center; 
-    color: #64748b; 
+    color: #94a3b8; 
     font-size: 12px; 
-    margin-top: 5px; 
-    margin-bottom: 5px;
+    margin-top: 8px; 
+    margin-bottom: 8px;
     font-style: italic;
-}
-
-/* Ẩn thanh header của Hugging Face khi nhúng */
-#header {
-    display: none !important;
-}
-
-/* Ép ứng dụng tràn viền thực sự */
-.gradio-container {
-    max-width: 100% !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-footer, .built-with, .gr-pro, .footer {
-    display: none !important;
-    visibility: hidden !important;
-    height: 0 !important;
-    padding: 0 !important;
+    font-family: sans-serif;
 }
 """
 
-# 3. LOGIC DATABASE
+# 4. LOGIC XỬ LÝ DỮ LIỆU
 def get_db_history(profile: gr.OAuthProfile | None):
     if not supabase or not profile: return []
     try:
@@ -85,7 +98,6 @@ def load_selected_chat(evt: gr.SelectData, db_data):
     selected_item = db_data[evt.index]
     return selected_item['history'], selected_item['session_id']
 
-# 4. ENGINE XỬ LÝ AI
 def chat_engine(message, history, session_id, profile: gr.OAuthProfile | None):
     text = message.get("text", "").strip()
     if not text: 
@@ -93,7 +105,7 @@ def chat_engine(message, history, session_id, profile: gr.OAuthProfile | None):
         return
 
     user_name = profile.username if profile else "Guest"
-    messages = [{"role": "system", "content": f"Bạn là NodeAI Genesis. Master: {user_name}. Hãy phản hồi chuyên nghiệp."}]
+    messages = [{"role": "system", "content": f"Bạn là NodeAI Genesis. Master: {user_name}. Phản hồi bằng tiếng Việt."}]
     
     for msg in history:
         messages.append({"role": msg["role"], "content": msg["content"]})
@@ -119,15 +131,15 @@ def chat_engine(message, history, session_id, profile: gr.OAuthProfile | None):
             }
             supabase.table("chats").upsert(data, on_conflict="session_id").execute()
     except Exception as e:
-        yield gr.update(), new_history + [{"role": "assistant", "content": f"Lỗi AI: {str(e)}"}], session_id
+        yield gr.update(), new_history + [{"role": "assistant", "content": f"Lỗi: {str(e)}"}], session_id
 
-# 5. XÂY DỰNG GIAO DIỆN
-with gr.Blocks() as demo:
+# 5. XÂY DỰNG UI VỚI HEAD SCRIPT
+with gr.Blocks(head=head_js) as demo:
     session_id = gr.State(str(uuid.uuid4()))
     db_state = gr.State([])
 
     with gr.Row():
-        # Sidebar trái
+        # Sidebar
         with gr.Column(scale=1, elem_classes="sidebar-node"):
             gr.HTML("<div class='logo-area'>NODEAI GENESIS</div>")
             gr.LoginButton(value="Đăng nhập Hugging Face", size="sm")
@@ -141,9 +153,9 @@ with gr.Blocks() as demo:
                 type="index"
             )
 
-        # Khu vực Chat chính
+        # Main Chat Area
         with gr.Column(scale=4):
-            chatbot = gr.Chatbot(show_label=False, height="78vh")
+            chatbot = gr.Chatbot(show_label=False, height="76vh")
             
             # Dòng cảnh báo Master yêu cầu
             gr.HTML("<div class='custom-warning'>"
@@ -152,24 +164,21 @@ with gr.Blocks() as demo:
             
             msg_input = gr.MultimodalTextbox(
                 show_label=False, 
-                placeholder="Nhập câu hỏi hoặc dán code Roblox vào đây...", 
+                placeholder="Hỏi NodeAI hoặc dán code Roblox...", 
                 container=False
             )
 
-    # 6. SỰ KIỆN & ĐIỀU KHIỂN
+    # 6. ĐIỀU KHIỂN SỰ KIỆN
     def refresh_data(profile: gr.OAuthProfile | None):
         if not profile: return [], gr.Dataset(samples=[])
         data = get_db_history(profile)
         samples = [[item['title']] for item in data]
         return data, gr.Dataset(samples=samples)
 
-    # Load dữ liệu khi mở trang
     demo.load(refresh_data, None, [db_state, history_list])
 
-    # Chọn chat cũ
     history_list.select(fn=load_selected_chat, inputs=[db_state], outputs=[chatbot, session_id])
 
-    # Gửi tin nhắn & Tải lại sidebar
     msg_input.submit(
         chat_engine, 
         [msg_input, chatbot, session_id], 
@@ -178,8 +187,7 @@ with gr.Blocks() as demo:
         refresh_data, None, [db_state, history_list]
     )
     
-    # Nút chat mới
     new_chat_btn.click(lambda: ([], str(uuid.uuid4())), None, [chatbot, session_id])
 
 if __name__ == "__main__":
-    demo.launch(css=custom_css)
+    demo.queue().launch(css=custom_css)