Update app.py

app.py

@@ -2,93 +2,97 @@ import gradio as gr
 from huggingface_hub import InferenceClient
 import os
 
-# 1. Khởi tạo Client (Zero config - sử dụng Secret HF_TOKEN)
+# 1. Khởi tạo Client (Sử dụng Secret HF_TOKEN)
 HF_TOKEN = os.getenv("HUGGINGFACE_HUB_TOKEN")
+# Sử dụng gpt2 để sinh văn bản (text-generation)
 client = InferenceClient("gpt2", token=HF_TOKEN)
 
-# 2. CSS Custom cho Giao diện Pro
+# 2. CSS chuyên nghiệp
 custom_css = """
 .header-pro {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    padding: 30px;
-    border-radius: 15px;
+    background: linear-gradient(135deg, #1e3a8a 0%, #7e22ce 100%);
+    padding: 25px;
+    border-radius: 12px;
     color: white;
     text-align: center;
     margin-bottom: 20px;
 }
-.sidebar-panel {
-    background-color: #f0f2f6;
-    padding: 20px;
-    border-radius: 10px;
+#chatbot-style {
+    border-radius: 10px !important;
+    border: 1px solid #e5e7eb !important;
 }
 """
 
-def chat_fn(message, history):
-    # Trích xuất nội dung từ định dạng tin nhắn mới của Gradio 6.9.0
-    # message: [{"role": "user", "content": [{"type": "text", "text": "..."}]}]
-    user_input = message[-1]["content"][0]["text"]
+def respond(message, history):
+    # Định dạng msg đúng yêu cầu Gradio 6.9.0 của bạn:
+    # [{"role": "user", "content": [{"type": "text", "text": msg}]}]
     
-    # Khởi tạo tin nhắn phản hồi của Assistant theo format Gradio 6
-    history.append({"role": "user", "content": [{"type": "text", "text": user_input}]})
+    # Lấy text từ message (Gradio 6 truyền list các dict tin nhắn)
+    if isinstance(message, list):
+        user_text = message[-1]["content"][0]["text"]
+    else:
+        user_text = message
+
+    # Cấu trúc tin nhắn mới để lưu vào history
+    user_msg = {"role": "user", "content": [{"type": "text", "text": user_text}]}
+    history.append(user_msg)
     
-    response_text = ""
-    # Gọi API thực tế
+    # Gọi API Inference thực tế
     try:
-        # GPT-2 sinh văn bản dựa trên input
-        output = client.text_generation(user_input, max_new_tokens=100)
-        response_text = output
+        # GPT-2 trả về text nối tiếp từ input
+        api_output = client.text_generation(user_text, max_new_tokens=100)
+        bot_text = api_output
     except Exception as e:
-        response_text = f"⚠️ Lỗi API: {str(e)}"
+        bot_text = f"❌ API Error: {str(e)}"
     
-    history.append({"role": "assistant", "content": [{"type": "text", "text": response_text}]})
+    bot_msg = {"role": "assistant", "content": [{"type": "text", "text": bot_text}]}
+    history.append(bot_msg)
     
-    # Trả về chuỗi rỗng cho ô input và history mới
     return "", history
 
 with gr.Blocks(title="NodeAI Pro") as demo:
-    # Header Pro dùng HTML để tránh lỗi gr.Div
+    # Header UI Pro
     gr.HTML("""
         <div class="header-pro">
-            <h1>🤖 NodeAI Pro</h1>
-            <p>Hệ thống AI Assistant tối ưu cho hiệu suất</p>
+            <h1 style='margin:0'>🚀 NodeAI Pro</h1>
+            <p style='margin:0; opacity: 0.8;'>Hệ thống Trợ lý AI Thông minh (V6.9.0)</p>
         </div>
     """)
     
     with gr.Row():
-        # Sidebar (Sử dụng integer scale)
+        # Sidebar
         with gr.Column(scale=1):
             with gr.Group():
-                gr.Markdown("### ⚙️ Control Panel")
+                gr.Markdown("### 🛠️ Hệ thống")
                 gr.LoginButton()
                 gr.Markdown("---")
-                gr.Markdown(f"**Status:** {'🟢 Ready' if HF_TOKEN else '🔴 Missing Token'}")
-                gr.Markdown("**Model:** `GPT-2` Standard")
-                gr.Markdown("**Version:** 6.9.0")
-            
-        # Chat Main
-        with gr.Column(scale=3):
+                gr.Markdown(f"**Token:** {'✅ OK' if HF_TOKEN else '⚠️ Thiếu'}")
+                gr.Markdown("**Model:** `gpt2` (Real API)")
+                gr.Markdown("**Trạng thái:** Sẵn sàng")
+        
+        # Chat area
+        with gr.Column(scale=4):
             chatbot = gr.Chatbot(
                 label="Hội thoại",
-                type="messages", # Định dạng tin nhắn chuẩn Gradio 6
-                height=500,
-                bubble_full_width=False
+                elem_id="chatbot-style",
+                height=550
             )
             
             with gr.Row():
                 msg_input = gr.Textbox(
-                    placeholder="Gõ lệnh tại đây...",
+                    placeholder="Nhập yêu cầu cho NodeAI Pro...",
                     show_label=False,
-                    scale=4
+                    scale=9
                 )
                 submit_btn = gr.Button("Gửi", variant="primary", scale=1)
             
-            clear_btn = gr.Button("🗑️ Clear Chat", size="sm")
+            clear = gr.Button("🗑️ Xóa hội thoại", size="sm")
 
-    # Xử lý sự kiện
-    submit_event = msg_input.submit(chat_fn, [msg_input, chatbot], [msg_input, chatbot])
-    submit_btn.click(chat_fn, [msg_input, chatbot], [msg_input, chatbot])
-    clear_btn.click(lambda: [], None, chatbot)
+    # Sự kiện điều khiển
+    msg_input.submit(respond, [msg_input, chatbot], [msg_input, chatbot])
+    submit_btn.click(respond, [msg_input, chatbot], [msg_input, chatbot])
+    clear.click(lambda: [], None, chatbot)
 
-# 3. CHÍNH XÁC: Truyền CSS vào launch() theo yêu cầu của Gradio 6.0+
 if __name__ == "__main__":
+    # CSS được đẩy vào launch() theo chuẩn Gradio 6
     demo.launch(css=custom_css)