Update app.py

app.py

@@ -8,92 +8,87 @@ client = InferenceClient("gpt2", token=HF_TOKEN)
 
 # 2. CSS Custom cho Giao diện Pro
 custom_css = """
-.header-container {
+.header-pro {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    padding: 2rem;
-    border-radius: 12px;
+    padding: 30px;
+    border-radius: 15px;
     color: white;
     text-align: center;
     margin-bottom: 20px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }
-.sidebar-info {
-    padding: 15px;
-    background: #f8f9fa;
-    border-radius: 8px;
-    height: 100%;
-}
-#chatbot-container {
-    height: 600px !important;
+.sidebar-panel {
+    background-color: #f0f2f6;
+    padding: 20px;
+    border-radius: 10px;
 }
 """
 
 def chat_fn(message, history):
-    # Định dạng msg đúng yêu cầu Gradio 6.9.0: 
-    # [{"role": "user", "content": [{"type": "text", "text": msg}]}]
-    # Gradio tự động đóng gói 'message' vào format này khi chatbot type="messages"
+    # 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"]
     
-    user_input = message[-1]["content"][0]["text"] if isinstance(message, list) else message
+    # 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}]})
     
-    # Gọi API Inference thật (GPT-2)
     response_text = ""
+    # Gọi API thực tế
     try:
-        # Generate văn bản từ prompt
-        full_response = client.text_generation(
-            user_input, 
-            max_new_tokens=150, 
-            temperature=0.7,
-            stream=False # GPT-2 Inference API đôi khi ổn định hơn với False
-        )
-        response_text = full_response
+        # 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
     except Exception as e:
-        response_text = f"⚠️ Lỗi kết nối API: {str(e)}"
-
-    # Cập nhật lịch sử theo format chuẩn
-    history.append({"role": "user", "content": [{"type": "text", "text": user_input}]})
+        response_text = f"⚠️ Lỗi API: {str(e)}"
+    
     history.append({"role": "assistant", "content": [{"type": "text", "text": response_text}]})
     
+    # Trả về chuỗi rỗng cho ô input và history mới
     return "", history
 
-with gr.Blocks(css=custom_css, title="NodeAI Pro") as demo:
-    # Header Pro
-    with gr.Div(elem_classes="header-container"):
-        gr.Markdown("# 🤖 NodeAI Pro")
-        gr.Markdown("Trợ lý AI hiệu năng cao - Powered by Hugging Face")
+with gr.Blocks(title="NodeAI Pro") as demo:
+    # Header Pro dùng HTML để tránh lỗi gr.Div
+    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>
+        </div>
+    """)
     
     with gr.Row():
-        # Sidebar (chiếm 1 phần)
-        with gr.Column(scale=1, variant="panel"):
-            gr.Markdown("### ⚙️ Thông số")
-            gr.LoginButton()
-            gr.Markdown("---")
-            gr.Markdown("**Trạng thái Token:** ✅ Đã kết nối")
-            gr.Markdown("**Model:** `gpt2` (Inference API)")
-            gr.Markdown("**Phiên bản:** NodeAI v1.0.4")
+        # Sidebar (Sử dụng integer scale)
+        with gr.Column(scale=1):
+            with gr.Group():
+                gr.Markdown("### ⚙️ Control Panel")
+                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 (chiếm 3 phần)
+        # Chat Main
         with gr.Column(scale=3):
             chatbot = gr.Chatbot(
                 label="Hội thoại",
-                type="messages", # ĐẶT Ở ĐÂY để fix lỗi "Data incompatible"
-                elem_id="chatbot-container",
+                type="messages", # Định dạng tin nhắn chuẩn Gradio 6
+                height=500,
                 bubble_full_width=False
             )
-            msg_input = gr.Textbox(
-                placeholder="Nhập câu hỏi tại đây...",
-                show_label=False,
-                container=False
-            )
             
             with gr.Row():
-                clear_btn = gr.Button("🗑️ Xóa lịch sử")
-                submit_btn = gr.Button("🚀 Gửi tin nhắn", variant="primary")
+                msg_input = gr.Textbox(
+                    placeholder="Gõ lệnh tại đây...",
+                    show_label=False,
+                    scale=4
+                )
+                submit_btn = gr.Button("Gửi", variant="primary", scale=1)
+            
+            clear_btn = gr.Button("🗑️ Clear Chat", size="sm")
 
-    # Logic xử lý
-    # Lưu ý: history ở đây được lưu trữ trong chatbot state
-    msg_input.submit(chat_fn, [msg_input, chatbot], [msg_input, chatbot])
+    # 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)
 
+# 3. CHÍNH XÁC: Truyền CSS vào launch() theo yêu cầu của Gradio 6.0+
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(css=custom_css)