Update app.py

app.py

@@ -1,96 +1,614 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
+from supabase import create_client, Client
 import os
+import uuid
+import json
+from datetime import datetime, timedelta
+from typing import Optional, List, Dict, Tuple, Any
+import hashlib
+import re
+from functools import lru_cache
+import logging
 
-# 1. CẤU HÌNH AI
+# ============================================================================
+# 1. SETUP LOGGING & CONFIGURATION
+# ============================================================================
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+URL = os.environ.get("SUPABASE_URL")
+KEY = os.environ.get("SUPABASE_KEY")
 HF_TOKEN = os.environ.get("HUGGINGFACE_HUB_TOKEN")
-client = InferenceClient(model="Qwen/Qwen2.5-7B-Instruct", token=HF_TOKEN)
 
-# 2. GIAO DIỆN CSS
+# Initialize Supabase
+try:
+    supabase: Client = create_client(URL, KEY) if URL and KEY else None
+    logger.info("✅ Supabase connected")
+except Exception as e:
+    logger.error(f"❌ Supabase error: {e}")
+    supabase = None
+
+# ============================================================================
+# 2. MODEL CONFIGURATION & CLIENTS
+# ============================================================================
+AVAILABLE_MODELS = {
+    "🚀 Qwen 2.5 (Balanced)": "Qwen/Qwen2.5-7B-Instruct",
+    "⚡ Mistral (Fast)": "mistralai/Mistral-7B-Instruct-v0.2",
+    "🔥 LLaMA 2 (Powerful)": "meta-llama/Llama-2-7b-chat-hf",
+    "🎯 Qwen 72B (Pro)": "Qwen/Qwen2.5-72B-Instruct",
+}
+
+DEFAULT_MODEL = "Qwen/Qwen2.5-7B-Instruct"
+
+clients = {}
+for name, model_id in AVAILABLE_MODELS.items():
+    try:
+        clients[name] = InferenceClient(model=model_id, token=HF_TOKEN)
+    except:
+        logger.warning(f"Could not load {model_id}")
+
+# ============================================================================
+# 3. ADVANCED CSS & STYLING (Dark Mode + Animations)
+# ============================================================================
 custom_css = """
+* { transition: all 0.3s ease; }
+
 footer, .built-with, header, #header { display: none !important; }
-.gradio-container { max-width: 100% !important; padding: 0 !important; }
-.sidebar-node { background: rgba(15, 23, 42, 0.9) !important; border-right: 1px solid #38bdf833; padding: 20px; }
+
+.gradio-container { 
+    max-width: 100% !important; 
+    padding: 0 !important;
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+    min-height: 100vh;
+    color: #e2e8f0;
+}
+
+body { background: #0f172a !important; }
+
+/* Sidebar */
+.sidebar-node { 
+    background: rgba(15, 23, 42, 0.95) !important; 
+    border-right: 1px solid rgba(56, 189, 248, 0.2);
+    padding: 24px;
+    max-height: 100vh;
+    overflow-y: auto;
+    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
+}
+
 .logo-area { 
-    font-family: 'Orbitron', sans-serif; 
-    background: linear-gradient(90deg, #38bdf8, #818cf8); 
-    -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
-    font-size: 22px; text-align: center; font-weight: bold; margin-bottom: 20px; 
+    font-family: 'Courier New', monospace; 
+    background: linear-gradient(135deg, #38bdf8, #8b5cf6, #ec4899);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-size: 24px;
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 24px;
+    letter-spacing: 2px;
+    text-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
+}
+
+/* Buttons */
+.btn-primary {
+    background: linear-gradient(135deg, #38bdf8, #8b5cf6) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 600 !important;
+    padding: 12px 20px !important;
+    border-radius: 8px !important;
+    cursor: pointer !important;
+    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3) !important;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5) !important;
+}
+
+/* Chatbot */
+.gradio-chatbot {
+    background: rgba(30, 41, 59, 0.8) !important;
+    border: 1px solid rgba(56, 189, 248, 0.1) !important;
+    border-radius: 12px !important;
+}
+
+.message-input {
+    background: rgba(30, 41, 59, 0.9) !important;
+    border: 1px solid rgba(56, 189, 248, 0.2) !important;
+    border-radius: 8px !important;
+    color: #e2e8f0 !important;
+}
+
+/* Datasets & Lists */
+.gradio-dataset {
+    background: rgba(30, 41, 59, 0.7) !important;
+    border: 1px solid rgba(56, 189, 248, 0.1) !important;
+    border-radius: 8px !important;
+}
+
+.dataset-item {
+    background: rgba(15, 23, 42, 0.6) !important;
+    border-left: 3px solid #38bdf8 !important;
+    padding: 12px !important;
+    margin: 8px 0 !important;
+    cursor: pointer !important;
+    border-radius: 6px !important;
+}
+
+.dataset-item:hover {
+    background: rgba(56, 189, 248, 0.1) !important;
+    transform: translateX(4px) !important;
+}
+
+/* Text Elements */
+.custom-warning {
+    text-align: center;
+    color: #94a3b8;
+    font-size: 12px;
+    margin: 15px 0;
+    font-style: italic;
+    padding: 12px;
+    background: rgba(56, 189, 248, 0.05);
+    border-radius: 6px;
+    border-left: 3px solid #38bdf8;
+}
+
+.stat-card {
+    background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(139, 92, 246, 0.1));
+    border: 1px solid rgba(56, 189, 248, 0.2);
+    border-radius: 8px;
+    padding: 16px;
+    margin: 8px 0;
+    color: #e2e8f0;
+}
+
+/* Tabs & Accordion */
+.gradio-tabs { background: transparent !important; }
+.gradio-tabitem { background: rgba(30, 41, 59, 0.8) !important; }
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-track { background: rgba(56, 189, 248, 0.1); }
+::-webkit-scrollbar-thumb { background: #38bdf8; border-radius: 4px; }
+
+/* Loading Animation */
+@keyframes pulse-glow {
+    0%, 100% { text-shadow: 0 0 10px rgba(56, 189, 248, 0.5); }
+    50% { text-shadow: 0 0 20px rgba(139, 92, 246, 0.8); }
 }
-.custom-warning { text-align: center; color: #94a3b8; font-size: 12px; margin: 10px 0; font-style: italic; }
-"""
 
-js_cleaner = """
-<img src="x" onerror="
-    const observer = new MutationObserver(() => {
-        ['footer', '.built-with', 'header', '#header'].forEach(s => {
-            const el = document.querySelector(s); if (el) el.remove();
-        });
-    });
-    observer.observe(document.body, { childList: true, subtree: true });
-" style="display:none;">
+.loading { animation: pulse-glow 1.5s ease-in-out infinite; }
 """
 
-# 3. CHAT ENGINE (Sử dụng định dạng {'role': '...', 'content': '...'})
-def chat_engine(message, history, profile: gr.OAuthProfile | None):
-    text = message.get("text", "").strip()
-    if not text: 
-        yield gr.update(value={"text": "", "files": []}), history
-        return
+# ============================================================================
+# 4. UTILITY FUNCTIONS
+# ============================================================================
+class ChatManager:
+    """Quản lý lịch sử chat, caching, và analytics"""
+    
+    def __init__(self):
+        self.cache = {}
+        self.rate_limit = {}
+    
+    def get_cache_key(self, username: str) -> str:
+        return f"user_{username}_cache"
+    
+    def is_rate_limited(self, username: str, limit: int = 30, window: int = 60) -> bool:
+        """Check rate limiting (30 requests per 60 seconds)"""
+        key = f"rate_{username}"
+        now = datetime.now()
+        
+        if key not in self.rate_limit:
+            self.rate_limit[key] = []
+        
+        # Remove old timestamps
+        self.rate_limit[key] = [ts for ts in self.rate_limit[key] 
+                                 if (now - ts).seconds < window]
+        
+        if len(self.rate_limit[key]) >= limit:
+            return True
+        
+        self.rate_limit[key].append(now)
+        return False
+    
+    def generate_session_title(self, text: str, max_length: int = 50) -> str:
+        """Generate meaningful session title from first message"""
+        clean_text = re.sub(r'[^a-zA-Z0-9\s]', '', text)
+        words = clean_text.split()[:8]
+        title = ' '.join(words) or "New Chat"
+        return title[:max_length]
+
+chat_manager = ChatManager()
+
+# ============================================================================
+# 5. DATABASE OPERATIONS (Enhanced)
+# ============================================================================
+def get_db_history(profile: gr.OAuthProfile | None) -> Tuple[List[Dict], gr.Dataset]:
+    """Get chat history filtered by username"""
+    if not supabase or not profile:
+        return [], gr.Dataset(samples=[])
+    
+    try:
+        username = profile.username
+        res = supabase.table("chats").select("*").eq("username", username).order("last_updated", desc=True).limit(50).execute()
+        
+        data = res.data if res.data else []
+        
+        # Format for dataset display
+        samples = [
+            [f"💬 {item.get('title', 'Untitled')[:40]}", 
+             f"{item.get('message_count', 0)} msgs",
+             item.get('created_at', '').split('T')[0]]
+            for item in data
+        ]
+        
+        logger.info(f"✅ Loaded {len(data)} chats for {username}")
+        return data, gr.Dataset(samples=samples)
+    
+    except Exception as e:
+        logger.error(f"❌ DB error: {e}")
+        return [], gr.Dataset(samples=[])
+
+def load_selected_chat(evt: gr.SelectData, db_data: List[Dict]) -> Tuple[List[Dict], str]:
+    """Load selected chat session"""
+    try:
+        selected_item = db_data[evt.index]
+        history = selected_item.get('history', [])
+        session_id = selected_item.get('session_id')
+        logger.info(f"📂 Loaded session: {session_id}")
+        return history, session_id
+    except Exception as e:
+        logger.error(f"Error loading chat: {e}")
+        return [], str(uuid.uuid4())
+
+def save_chat_to_db(username: str, session_id: str, title: str, 
+                     history: List[Dict], model_used: str) -> bool:
+    """Save or update chat in database"""
+    if not supabase or not username:
+        return False
+    
+    try:
+        message_count = len([m for m in history if m.get('role') == 'user'])
+        
+        data = {
+            "username": username,
+            "session_id": session_id,
+            "title": title,
+            "history": history,
+            "message_count": message_count,
+            "model_used": model_used,
+            "last_updated": datetime.utcnow().isoformat(),
+            "created_at": datetime.utcnow().isoformat(),
+        }
+        
+        supabase.table("chats").upsert(data, on_conflict="session_id").execute()
+        logger.info(f"💾 Chat saved: {session_id}")
+        return True
+    except Exception as e:
+        logger.error(f"❌ Save error: {e}")
+        return False
+
+# ============================================================================
+# 6. SYSTEM PROMPTS & TEMPLATES
+# ============================================================================
+SYSTEM_PROMPTS = {
+    "🤖 Default": "You are NodeAI Genesis, an advanced AI assistant. Be helpful, creative, and concise.",
+    "📚 Researcher": "You are an expert researcher. Provide detailed, well-structured analysis with sources.",
+    "💻 Developer": "You are an expert programmer. Provide clean, optimized code with explanations.",
+    "📝 Writer": "You are a professional writer. Create engaging, well-written content.",
+    "🎯 Coach": "You are a personal mentor. Provide motivational, actionable advice.",
+}
 
-    user_name = profile.name if profile else "Master"
+# ============================================================================
+# 7. ADVANCED CHAT ENGINE
+# ============================================================================
+def chat_engine(message: Dict, history: List[Dict], session_id: str, 
+                selected_model: str, system_prompt: str,
+                profile: gr.OAuthProfile | None) -> Tuple:
+    """Advanced chat engine with streaming, caching, and analytics"""
     
-    # Tạo danh sách tin nhắn gửi đi cho AI (Bao gồm System Prompt)
-    messages = [{"role": "system", "content": f"Bạn là NodeAI Genesis. Master: {user_name}."}]
+    text = message.get("text", "").strip() if isinstance(message, dict) else str(message).strip()
+    
+    if not text:
+        yield gr.update(value={"text": "", "files": []}), history, session_id, "⚠️ Empty message"
+        return
     
-    # history bây giờ là danh sách các dict, chỉ cần cộng vào là xong
-    messages.extend(history)
+    # Rate limiting check
+    username = profile.username if profile else "guest"
+    if chat_manager.is_rate_limited(username):
+        yield gr.update(value={"text": "", "files": []}), history, session_id, "⏱️ Rate limited. Wait a moment."
+        return
+    
+    # Get the selected client
+    client = clients.get(selected_model)
+    if not client:
+        client = InferenceClient(model=DEFAULT_MODEL, token=HF_TOKEN)
+    
+    # Build message context
+    messages = [{"role": "system", "content": system_prompt}]
+    messages.extend(history[-10:])  # Keep last 10 messages for context
     messages.append({"role": "user", "content": text})
     
-    # Cập nhật history cho chatbot hiển thị
     new_history = history + [{"role": "user", "content": text}]
     ans = ""
     
-    # Gửi trạng thái đang chờ
-    yield gr.update(value={"text": "", "files": []}), new_history + [{"role": "assistant", "content": "..."}]
+    # Show loading state
+    yield (
+        gr.update(value={"text": "", "files": []}, interactive=False),
+        new_history + [{"role": "assistant", "content": "⏳ Thinking..."}],
+        session_id,
+        "🔄 Processing..."
+    )
     
     try:
-        for token in client.chat_completion(messages=messages, max_tokens=2048, stream=True):
+        # Stream response
+        for token in client.chat_completion(
+            messages=messages,
+            max_tokens=2048,
+            temperature=0.7,
+            top_p=0.95,
+            stream=True
+        ):
             if token.choices[0].delta.content:
                 ans += token.choices[0].delta.content
-                # Gửi history kèm tin nhắn assistant đang được cập nhật
-                yield gr.update(), new_history + [{"role": "assistant", "content": ans}]
-    except Exception as e:
-        yield gr.update(), new_history + [{"role": "assistant", "content": f"Lỗi: {str(e)}"}]
-
-# 4. GIAO DIỆN UI
-with gr.Blocks() as demo:
-    gr.HTML(js_cleaner, visible=False)
-    
-    with gr.Row():
-        with gr.Column(scale=1, elem_classes="sidebar-node"):
-            gr.HTML("<div class='logo-area'>NODEAI GENESIS</div>")
-            gr.LoginButton(value="Đăng nhập", size="sm")
-            new_chat_btn = gr.Button("＋ CLEAR MEMORY", variant="stop")
-            gr.Markdown("---")
-            gr.Markdown("💡 **Status**: Script Memory (Messages Format)")
-
-        with gr.Column(scale=4):
-            # Không đặt type="messages" nữa vì bản này tự hiểu khi nhận list dict
-            chatbot = gr.Chatbot(show_label=False, height="78vh")
-            
-            gr.HTML("<div class='custom-warning'>NodeAI không thể chắc chắn 100%, hãy rà soát lại khi bạn có chuyện gì quan trọng!</div>")
-            
-            msg_input = gr.MultimodalTextbox(
-                show_label=False, 
-                placeholder="Nhập nội dung Master cần hỏi...", 
-                container=False
+                yield (
+                    gr.update(value={"text": "", "files": []}, interactive=True),
+                    new_history + [{"role": "assistant", "content": ans}],
+                    session_id,
+                    f"✅ Complete ({len(ans)} chars)"
+                )
+        
+        # Save to database
+        final_history = new_history + [{"role": "assistant", "content": ans}]
+        session_title = chat_manager.generate_session_title(text)
+        
+        if profile:
+            save_chat_to_db(
+                profile.username,
+                session_id,
+                session_title,
+                final_history,
+                selected_model
             )
+        
+        yield (
+            gr.update(value={"text": "", "files": []}, interactive=True),
+            final_history,
+            session_id,
+            "✅ Saved to database"
+        )
+        
+    except Exception as e:
+        error_msg = f"❌ Error: {str(e)[:100]}"
+        logger.error(error_msg)
+        yield (
+            gr.update(value={"text": "", "files": []}, interactive=True),
+            new_history + [{"role": "assistant", "content": f"Error occurred: {str(e)}"}],
+            session_id,
+            error_msg
+        )
 
-    # Xử lý sự kiện
-    msg_input.submit(chat_engine, [msg_input, chatbot], [msg_input, chatbot])
-    new_chat_btn.click(lambda: [], None, chatbot) # Trả về mảng rỗng để xóa chat
+# ============================================================================
+# 8. ANALYTICS & STATS
+# ============================================================================
+def get_user_stats(profile: gr.OAuthProfile | None) -> str:
+    """Get user statistics"""
+    if not supabase or not profile:
+        return "📊 No data"
+    
+    try:
+        res = supabase.table("chats").select("id,message_count").eq("username", profile.username).execute()
+        data = res.data if res.data else []
+        
+        total_chats = len(data)
+        total_messages = sum(d.get('message_count', 0) for d in data)
+        
+        return f"""
+📊 **Your Statistics**
+- Total Chats: **{total_chats}**
+- Total Messages: **{total_messages}**
+- Avg per Chat: **{total_messages // max(total_chats, 1)}**
+        """
+    except:
+        return "📊 Unable to load stats"
+
+def clear_chat_history(session_id: str, profile: gr.OAuthProfile | None) -> Tuple[List, str]:
+    """Clear current session"""
+    if supabase and profile and session_id:
+        try:
+            supabase.table("chats").delete().eq("session_id", session_id).execute()
+            logger.info(f"🗑️ Cleared session: {session_id}")
+        except Exception as e:
+            logger.error(f"Error clearing: {e}")
+    
+    return [], str(uuid.uuid4())
+
+# ============================================================================
+# 9. UI INTERFACE (Gradio)
+# ============================================================================
+def create_interface():
+    with gr.Blocks(theme=gr.themes.Slate()) as demo:
+        
+        # States
+        session_id = gr.State(str(uuid.uuid4()))
+        db_state = gr.State([])
+        status_message = gr.State("Ready")
+        
+        with gr.Row(equal_height=False):
+            # ===== SIDEBAR =====
+            with gr.Column(scale=1, elem_classes="sidebar-node"):
+                gr.HTML("<div class='logo-area'>⚡ NODEAI</div>")
+                
+                # Auth Button
+                profile = gr.LoginButton(
+                    value="🔐 Login with HF",
+                    size="sm",
+                    scale=1
+                )
+                
+                # Action Buttons
+                with gr.Row(scale=1):
+                    new_chat_btn = gr.Button("➕ New Chat", variant="primary", scale=1)
+                    delete_chat_btn = gr.Button("🗑️ Delete", scale=1)
+                
+                # Model & System Prompt Selection
+                gr.Markdown("### ⚙️ Settings")
+                selected_model = gr.Dropdown(
+                    choices=list(AVAILABLE_MODELS.keys()),
+                    value=list(AVAILABLE_MODELS.keys())[0],
+                    label="🤖 AI Model",
+                    interactive=True
+                )
+                
+                system_prompt = gr.Dropdown(
+                    choices=list(SYSTEM_PROMPTS.keys()),
+                    value=list(SYSTEM_PROMPTS.keys())[0],
+                    label="📝 Personality",
+                    interactive=True
+                )
+                
+                # History Section
+                gr.Markdown("### 📚 Chat History")
+                history_list = gr.Dataset(
+                    components=[
+                        gr.Textbox(visible=False),
+                        gr.Textbox(visible=False),
+                        gr.Textbox(visible=False),
+                    ],
+                    samples=[],
+                    type="index",
+                    label="Your Conversations"
+                )
+                
+                # Statistics
+                gr.Markdown("### 📊 Analytics")
+                stats_display = gr.Markdown("📊 Loading stats...")
+                
+                # Warning
+                gr.HTML("<div class='custom-warning'>🔒 Data saved securely with your HF account</div>")
+            
+            # ===== MAIN CHAT AREA =====
+            with gr.Column(scale=4):
+                # Header
+                gr.HTML("""
+                <div style='text-align: center; margin-bottom: 20px;'>
+                    <h1 style='color: #38bdf8; margin: 0;'>🚀 NodeAI Genesis Pro</h1>
+                    <p style='color: #94a3b8; margin: 5px 0;'>Advanced AI Chat with Multi-Model Support</p>
+                </div>
+                """)
+                
+                # Chatbot
+                chatbot = gr.Chatbot(
+                    show_label=False,
+                    height="70vh",
+                    bubble_full_width=False,
+                    scale=1
+                )
+                
+                # Status & Info
+                with gr.Row(scale=1):
+                    status_display = gr.Textbox(
+                        value="✅ Ready",
+                        label="Status",
+                        interactive=False,
+                        scale=1
+                    )
+                    model_info = gr.Textbox(
+                        value=list(AVAILABLE_MODELS.keys())[0],
+                        label="Current Model",
+                        interactive=False,
+                        scale=1
+                    )
+                
+                # Input Area
+                with gr.Row(scale=1):
+                    msg_input = gr.MultimodalTextbox(
+                        show_label=False,
+                        placeholder="💬 Ask me anything... (Ctrl+Enter to send)",
+                        container=False,
+                        scale=1
+                    )
+        
+        # ===== EVENT HANDLERS =====
+        
+        # Load history on page load
+        demo.load(
+            fn=lambda profile: get_db_history(profile),
+            inputs=[profile],
+            outputs=[db_state, history_list]
+        ).then(
+            fn=lambda profile: get_user_stats(profile),
+            inputs=[profile],
+            outputs=[stats_display]
+        )
+        
+        # Select chat from history
+        history_list.select(
+            fn=lambda evt, db_data: load_selected_chat(evt, db_data),
+            inputs=[history_list, db_state],
+            outputs=[chatbot, session_id]
+        )
+        
+        # Send message
+        msg_input.submit(
+            fn=chat_engine,
+            inputs=[
+                msg_input,
+                chatbot,
+                session_id,
+                selected_model,
+                system_prompt,
+                profile
+            ],
+            outputs=[msg_input, chatbot, session_id, status_display]
+        ).then(
+            fn=lambda profile: get_db_history(profile),
+            inputs=[profile],
+            outputs=[db_state, history_list]
+        ).then(
+            fn=lambda profile: get_user_stats(profile),
+            inputs=[profile],
+            outputs=[stats_display]
+        )
+        
+        # Update model info display
+        selected_model.change(
+            fn=lambda model: gr.update(value=model),
+            inputs=[selected_model],
+            outputs=[model_info]
+        )
+        
+        # New chat button
+        new_chat_btn.click(
+            fn=lambda: ([], str(uuid.uuid4()), "✅ Ready"),
+            outputs=[chatbot, session_id, status_display]
+        )
+        
+        # Delete chat button
+        delete_chat_btn.click(
+            fn=lambda session_id, profile: clear_chat_history(session_id, profile),
+            inputs=[session_id, profile],
+            outputs=[chatbot, session_id]
+        ).then(
+            fn=lambda profile: get_db_history(profile),
+            inputs=[profile],
+            outputs=[db_state, history_list]
+        )
+        
+        return demo
 
-# 5. LAUNCH
+# ============================================================================
+# 10. MAIN EXECUTION
+# ============================================================================
 if __name__ == "__main__":
-    demo.queue().launch(css=custom_css)
+    demo = create_interface()
+    demo.queue(max_size=20, default_concurrency_limit=3).launch(
+        css=custom_css,
+        share=False,
+        server_name="0.0.0.0",
+        server_port=7860,
+        show_error=True,
+        analytics_enabled=False
+    )