Spaces:

Smilyai-labs
/

Sam-X-series-chat

Sleeping

App Files Files Community

Keeby-smilyai commited on Oct 22

Commit

dbe4e96

verified ·

1 Parent(s): 881cef4

Update app.py

Browse files

Files changed (1) hide show

app.py +644 -268

app.py CHANGED Viewed

@@ -806,16 +806,16 @@ def generate_response_stream(prompt, temperature=0.7, backend=None, max_tokens=2
     final_tokens_per_sec = tokens_generated / elapsed if elapsed > 0 else 0
     yield "", False, final_tokens_per_sec, final_tokens_per_sec, False
-# PART 3 - Continue from Part 2 - SESSION CODE VERSION (FIXED)
 import secrets
-# Global session codes storage
-active_sessions = {}  # {session_code: user_data}
 session_lock = threading.Lock()
 def generate_session_code():
-    """Generate a unique 4-digit session code."""
     with session_lock:
         while True:
             code = ''.join([str(secrets.randbelow(10)) for _ in range(4)])
@@ -823,10 +823,8 @@ def generate_session_code():
                 return code
 def create_session(user_data):
-    """Create a new session and return the code."""
     code = generate_session_code()
     with session_lock:
-        # Normalize the user_data to always use 'user_id'
         normalized_data = {
             'user_id': user_data.get('id') or user_data.get('user_id'),
             'username': user_data.get('username'),
@@ -837,12 +835,10 @@ def create_session(user_data):
     return code
 def validate_session(code):
-    """Validate a session code and return user data."""
     with session_lock:
         return active_sessions.get(code, None)
 def invalidate_session(code):
-    """Remove a session code."""
     with session_lock:
         if code in active_sessions:
             del active_sessions[code]
@@ -853,38 +849,297 @@ if __name__ == "__main__":
     import gradio as gr
     custom_css = """
-    .plan-explore { background: #d8b4fe; color: #7e22ce; }
-    .plan-research { background: #a5f3fc; color: #0e7490; }
-    .plan-VIP { background: #fbbf24; color: #92400e; }
-    .chat-container { height: 500px; overflow-y: auto; padding: 20px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; }
-    .user-message { background: #f7f7f8; padding: 16px; margin: 12px 0; border-radius: 8px; }
-    .assistant-message { background: #ffffff; padding: 16px; margin: 12px 0; border-radius: 8px; border-left: 3px solid #10a37f; }
-    .message-content { color: #353740; line-height: 1.6; font-size: 15px; }
-    .message-header { font-weight: 600; margin-bottom: 8px; color: #353740; font-size: 14px; }
-    .thinking-content { color: #6b7280; font-style: italic; border-left: 3px solid #d1d5db; padding-left: 12px; margin: 8px 0; background: #f9fafb; padding: 8px 12px; border-radius: 4px; }
-    .plan-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; margin-left: 8px; }
-    .plan-free { background: #e0e7ff; color: #3730a3; }
-    .plan-plus { background: #dbeafe; color: #1e40af; }
-    .plan-pro { background: #fef3c7; color: #92400e; }
-    .limits-panel { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; margin: 12px 0; }
-    .limit-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #e5e7eb; }
     .limit-item:last-child { border-bottom: none; }
     .limit-exceeded { color: #dc2626; font-weight: 600; }
-    .limit-ok { color: #059669; }
-    .circular-btn { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 50% !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; transition: all 0.2s ease !important; }
-    .circular-btn:hover:not(:disabled) { transform: scale(1.05) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; }
-    .send-btn { background: linear-gradient(135deg, #10a37f 0%, #0d8c6c 100%) !important; border: none !important; }
-    .stop-btn { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; border: none !important; }
-    .announcement-banner { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px 28px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; font-size: 16px; font-weight: 500; line-height: 1.6; }
-    .session-code-box { background: linear-gradient(135deg, #10a37f 0%, #0d8c6c 100%); color: white; padding: 20px; border-radius: 12px; text-align: center; margin: 20px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
-    .session-code-display { font-size: 32px; font-weight: 700; letter-spacing: 8px; margin: 10px 0; font-family: monospace; }
     """
     def format_message_html(role, content, show_thinking=True):
         role_class = "user-message" if role == "user" else "assistant-message"
-        role_name = "You" if role == "user" else "SAM-X-1"
         thinking = ""
         answer = ""
         if "<think>" in content:
             parts = content.split("<think>", 1)
             before_think = parts[0].strip()
@@ -905,7 +1160,8 @@ if __name__ == "__main__":
                 answer = before_think
         else:
             answer = content
-        html = f'<div class="{role_class}"><div class="message-header">{role_name}</div><div class="message-content">'
         if thinking and show_thinking:
             html += f'<div class="thinking-content">💭 {thinking}</div>'
         if answer:
@@ -925,213 +1181,329 @@ if __name__ == "__main__":
         info = get_user_limits_info(user_data['user_id'])
         if not info:
             return ""
-        plan_badge_class = f"plan-{info['plan']}"
-        html = f'<div class="limits-panel"><div style="font-weight: 600; margin-bottom: 12px; font-size: 16px;">Your Plan: <span class="plan-badge {plan_badge_class}">{info["plan"].upper()}</span></div><div style="font-size: 13px; color: #6b7280; margin-bottom: 12px;">⏰ Limits reset in: <strong>{info["reset_in"]}</strong></div>'
-        models_info = [('NANO ⚡⚡', info['nano_used'], info['nano_limit']), ('MINI 🚀', info['mini_used'], info['mini_limit']), ('FAST ⚡', info['fast_used'], info['fast_limit']), ('LARGE 💎', info['large_used'], info['large_limit'])]
         for model_name, used, limit in models_info:
             if limit == -1:
-                status = f'<span class="limit-ok">{used} messages (Unlimited)</span>'
             else:
                 remaining = limit - used
                 if remaining <= 0:
-                    status = f'<span class="limit-exceeded">{used}/{limit} (LIMIT REACHED)</span>'
                 elif remaining <= 2:
-                    status = f'<span style="color: #f59e0b; font-weight: 600;">{used}/{limit} ({remaining} left)</span>'
                 else:
-                    status = f'<span class="limit-ok">{used}/{limit} ({remaining} left)</span>'
-            html += f'<div class="limit-item"><span style="font-weight: 500;">{model_name}</span><span>{status}</span></div>'
         html += '</div>'
         return html
     with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="slate")) as demo:
-        gr.HTML('<div class="announcement-banner">🔐 <strong>SAM-X-1 V3.0 - SESSION CODE ACCESS</strong> 🔐<br>✨ Sign in to get your 4-digit session code!<br>🆓 FREE: Nano & Mini unlimited, Fast 10/3h, Large 8/3h<br>⭐ PLUS: Nano/Mini/Fast unlimited, Large 20/3h<br>💎 PRO: Everything unlimited!</div>')
-        with gr.Tabs() as main_tabs:
-            with gr.Tab("🔐 Sign In"):
-                with gr.Column():
-                    login_username = gr.Textbox(label="Username", placeholder="Enter username")
-                    login_password = gr.Textbox(label="Password", type="password", placeholder="Enter password")
-                    login_btn = gr.Button("Sign In", variant="primary", size="lg")
-                    login_msg = gr.Markdown("")
-                    session_code_display = gr.HTML("")
-            with gr.Tab("📝 Sign Up"):
-                with gr.Column():
-                    signup_username = gr.Textbox(label="Username", placeholder="Choose a username")
-                    signup_email = gr.Textbox(label="Email (optional)", placeholder="your@email.com")
-                    signup_password = gr.Textbox(label="Password", type="password", placeholder="Choose a password")
-                    signup_btn = gr.Button("Create Account", variant="primary", size="lg")
-                    signup_msg = gr.Markdown("")
-            with gr.Tab("💬 Chat") as chat_tab:
-                with gr.Row():
-                    chat_session_code = gr.Textbox(label="🔑 Enter Your 4-Digit Session Code", placeholder="0000", max_lines=1, scale=3)
-                    verify_session_btn = gr.Button("✅ Verify", variant="primary", scale=1)
-                with gr.Row():
-                    with gr.Column(scale=4):
-                        user_info = gr.Markdown("❌ Not authenticated - Enter your session code above")
-                    with gr.Column(scale=1):
-                        logout_btn = gr.Button("🚪 Logout", size="sm")
-                limits_display = gr.HTML("")
-                with gr.Accordion("⚙️ Settings", open=False):
-                    with gr.Row():
-                        model_selector = gr.Dropdown(choices=["🤖 Auto (Recommended)"], value="🤖 Auto (Recommended)", label="Model Selection", info="FREE users: Auto only. PLUS/PRO: Choose manually")
-                        max_tokens_slider = gr.Slider(minimum=64, maximum=512, value=256, step=64, label="Max Tokens")
                     with gr.Row():
-                        temperature_slider = gr.Slider(minimum=0.0, maximum=2.0, value=0.7, step=0.1, label="Temperature")
-                        show_thinking_checkbox = gr.Checkbox(label="Show Thinking", value=True)
-                speed_display = gr.Textbox(label="Generation Speed", value="⚡ Ready", interactive=False)
-                chat_html = gr.HTML(value="", elem_classes=["chat-container"])
-                with gr.Row():
-                    msg_input = gr.Textbox(placeholder="Enter session code first to chat...", show_label=False, scale=8, interactive=False)
-                    with gr.Column(scale=1, min_width=120):
                         with gr.Row():
-                            send_btn = gr.Button("▶", variant="primary", elem_classes=["circular-btn", "send-btn"], interactive=False)
-                            stop_btn = gr.Button("⏹", variant="stop", elem_classes=["circular-btn", "stop-btn"], interactive=False)
-                with gr.Row():
-                    clear_btn = gr.Button("🗑️ Clear", size="sm")
-                    upgrade_btn = gr.Button("⭐ Request Upgrade", size="sm", variant="primary")
-                with gr.Accordion("🔐 Admin Panel", visible=False, open=False) as admin_panel:
-                    gr.Markdown("### 👨‍💼 User Management Dashboard")
-                    with gr.Tabs():
-                        with gr.Tab("👥 All Users"):
-                            users_table = gr.Dataframe(headers=["ID", "Username", "Email", "Plan", "Created", "Admin"])
-                            refresh_users_btn = gr.Button("🔄 Refresh Users")
-                            with gr.Row():
-                                admin_username = gr.Textbox(label="Username to Update")
-                                admin_new_plan = gr.Dropdown(choices=["free", "plus", "pro", "explore", "Research", "VIP(hyper)"], label="New Plan", value="free")
-                                update_plan_btn = gr.Button("✏️ Update Plan", variant="primary")
-                            admin_msg = gr.Markdown("")
-                        with gr.Tab("📋 Upgrade Requests"):
-                            gr.Markdown("**Review and approve/deny user upgrade requests below:**")
-                            requests_table = gr.Dataframe(headers=["ID", "Username", "Requested Plan", "Reason", "Date"])
-                            refresh_requests_btn = gr.Button("🔄 Refresh Requests")
-                            with gr.Row():
-                                request_id_input = gr.Number(label="Request ID (from table above)", precision=0, minimum=1)
-                            with gr.Row():
-                                approve_req_btn = gr.Button("✅ Approve Request", variant="primary", size="lg")
-                                deny_req_btn = gr.Button("❌ Deny Request", variant="stop", size="lg")
-                            request_msg = gr.Markdown("")
-                with gr.Accordion("⭐ Request Plan Upgrade", visible=False, open=False) as upgrade_panel:
-                    upgrade_session_code = gr.Textbox(label="Your Session Code", placeholder="0000")
-                    upgrade_plan_choice = gr.Radio(choices=["plus", "pro", "explore", "Research"], label="Select Plan", value="plus")
-                    upgrade_reason = gr.Textbox(label="Reason for Upgrade", placeholder="Why do you need this upgrade?", lines=3)
-                    submit_upgrade_btn = gr.Button("Submit Request", variant="primary")
-                    upgrade_msg = gr.Markdown("")
-            with gr.Tab("👨‍💼 Admin Access") as admin_tab:
-                admin_session_code = gr.Textbox(label="🔑 Enter Your Admin Session Code", placeholder="0000", max_lines=1)
-                verify_admin_btn = gr.Button("✅ Verify Admin", variant="primary", size="lg")
-                admin_verify_msg = gr.Markdown("")
-                admin_logout_btn = gr.Button("🚪 Logout", size="sm")
-        # Event handlers
-        def handle_login(username, password):
-            success, user_data = authenticate_user(username, password)
-            if success:
-                session_code = create_session(user_data)
-                code_html = f'<div class="session-code-box"><div style="font-size: 18px; margin-bottom: 10px;">✅ Login Successful!</div><div style="font-size: 16px; margin-bottom: 5px;">Your Session Code:</div><div class="session-code-display">{session_code}</div><div style="font-size: 14px; margin-top: 10px;">💡 Use this code in the Chat or Admin tab</div><div style="font-size: 13px; margin-top: 5px; opacity: 0.9;">⚠️ Keep this code private!</div></div>'
-                return f"✅ Welcome back, **{username}**! Use your session code above to access chat.", code_html
-            return "❌ Invalid credentials!", ""
-        def handle_signup(username, email, password):
             if len(username) < 3:
-                return "❌ Username must be at least 3 characters!"
             if len(password) < 6:
-                return "❌ Password must be at least 6 characters!"
-            success, message = create_user(username, password, email)
-            if success:
-                return f"✅ {message} Now sign in to get your session code!"
-            return f"❌ {message}"
-        def verify_session_code(code):
-            if not code or len(code) != 4 or not code.isdigit():
-                return "❌ Invalid code format", "", gr.update(visible=False), gr.update(), gr.update(), gr.update(interactive=False, placeholder="Enter valid session code first..."), gr.update(interactive=False)
-            user_data = validate_session(code)
-            if not user_data:
-                return "❌ Invalid or expired session code", "", gr.update(visible=False), gr.update(), gr.update(), gr.update(interactive=False, placeholder="Enter valid session code first..."), gr.update(interactive=False)
-            info = get_user_limits_info(user_data['user_id'])
-            if not info:
-                return "❌ Could not load user info", "", gr.update(visible=False), gr.update(), gr.update(), gr.update(interactive=False), gr.update(interactive=False)
-            plan_badge = f'<span class="plan-badge plan-{info["plan"]}">{info["plan"].upper()}</span>'
-            user_info_text = f"✅ **Authenticated as: {user_data['username']}** {plan_badge}"
-            limits_html = render_limits_panel(user_data)
             if info['can_choose_model']:
-                available_model_names = list(available_models.keys())
-                choices = ["🤖 Auto (Recommended)"] + available_model_names
             else:
-                choices = ["🤖 Auto (Recommended)"]
-            is_admin = user_data.get('is_admin', False)
             return (
-                user_info_text,
-                limits_html,
-                gr.update(visible=is_admin),
-                gr.update(choices=choices, value="🤖 Auto (Recommended)"),
-                gr.update(maximum=info['max_tokens'], value=min(256, info['max_tokens'])),
-                gr.update(interactive=True, placeholder="Ask me anything..."),
-                gr.update(interactive=True)
             )
-        def send_message_handler(message, show_thinking, temperature, model_choice, max_tokens, session_code):
             global stop_generation
             stop_generation.clear()
-            if not session_code or len(session_code) != 4:
-                return "", "", "❌ Invalid session code", gr.update(), gr.update()
-            user_data = validate_session(session_code)
-            if not user_data:
-                return "", "", "❌ Session expired - please re-enter your code", gr.update(), gr.update()
             if not message.strip():
-                return "", "", "⚡ Ready", gr.update(interactive=True), gr.update(interactive=False)
-            info = get_user_limits_info(user_data['user_id'])
-            # Auto or manual model selection
             if model_choice == "🤖 Auto (Recommended)" or not info['can_choose_model']:
-                user_available = get_available_models_for_user(user_data['user_id'])
                 if not user_available:
-                    return "", "", "❌ No models available (limits reached)", gr.update(interactive=True), gr.update(interactive=False)
                 backend = select_model_auto(message, available_models, user_available)
                 if not backend:
-                    return "", "", "❌ Could not select model", gr.update(interactive=True), gr.update(interactive=False)
                 model_name = backend.get_name()
             else:
                 model_name = model_choice
-                can_use, msg = can_use_model(user_data['user_id'], model_name)
                 if not can_use:
-                    return "", "", f"❌ {msg}", gr.update(interactive=True), gr.update(interactive=False)
                 backend = available_models[model_name]
             # Final check
-            can_use, msg = can_use_model(user_data['user_id'], model_name)
             if not can_use:
-                return "", "", f"❌ {msg}", gr.update(interactive=True), gr.update(interactive=False)
             # Increment usage
-            increment_model_usage(user_data['user_id'], model_name)
-            yield "", "", f"⚡ Using {model_name}...", gr.update(interactive=False), gr.update(interactive=True)
             history = [{"role": "user", "content": message}]
-            yield "", render_history(history, show_thinking), f"⚡ Generating...", gr.update(interactive=False), gr.update(interactive=True)
             prompt = f"User: {message}\nSam: <think>"
             history.append({"role": "assistant", "content": "<think>"})
@@ -1153,153 +1525,157 @@ if __name__ == "__main__":
                         history[-1]["content"] += new_chunk
                     last_speed = avg_speed
-                    yield "", render_history(history, show_thinking), f"⚡ {tokens_per_sec:.1f} tok/s", gr.update(interactive=False), gr.update(interactive=True)
-            final = f"{'🛑 Stopped' if was_stopped else '✅ Done'} - {last_speed:.1f} tok/s"
-            yield "", render_history(history, show_thinking), final, gr.update(interactive=True), gr.update(interactive=False)
         def stop_generation_handler():
             global stop_generation
             stop_generation.set()
-            return "🛑 Stopping...", gr.update(interactive=False), gr.update(interactive=False)
         def clear_chat():
-            return "", "⚡ Ready", gr.update(interactive=True), gr.update(interactive=False)
-        def show_upgrade_panel():
-            return gr.update(visible=True, open=True)
-        def submit_upgrade_request(session_code, plan, reason):
-            if not session_code or len(session_code) != 4:
-                return "❌ Invalid session code"
-            user_data = validate_session(session_code)
-            if not user_data:
                 return "❌ Session expired"
             if not reason.strip():
                 return "❌ Please provide a reason"
-            success, msg = request_upgrade(user_data['user_id'], plan, reason)
             return f"{'✅' if success else '❌'} {msg}"
-        def handle_logout(session_code):
-            if session_code and len(session_code) == 4:
-                invalidate_session(session_code)
-            return (
-                "",
-                "❌ Logged out - Session code invalidated",
-                "",
-                gr.update(visible=False),
-                gr.update(choices=["🤖 Auto (Recommended)"], value="🤖 Auto (Recommended)"),
-                gr.update(value=256),
-                gr.update(interactive=False, placeholder="Enter session code first..."),
-                gr.update(interactive=False)
-            )
-        def verify_admin_session(code):
-            if not code or len(code) != 4 or not code.isdigit():
-                return "❌ Invalid code format", gr.update(visible=False)
-            user_data = validate_session(code)
-            if not user_data:
-                return "❌ Invalid or expired session code", gr.update(visible=False)
-            if not user_data.get('is_admin', False):
-                return "❌ Access denied - Admin privileges required", gr.update(visible=False)
-            return f"✅ Admin access granted for **{user_data['username']}**", gr.update(visible=True, open=True)
-        def admin_logout_handler(code):
-            if code and len(code) == 4:
-                invalidate_session(code)
-            return "", "❌ Logged out", gr.update(visible=False)
         def load_all_users():
             users = get_all_users()
             formatted = []
             for user in users:
-                formatted.append([user[0], user[1], user[2] or "N/A", user[3], user[4][:10] if user[4] else "N/A", "Yes" if user[5] else "No"])
             return formatted
         def load_pending_requests():
             requests = get_pending_requests()
             formatted = []
             for req in requests:
-                formatted.append([req[0], req[1], req[2], req[3], req[4][:10] if req[4] else "N/A"])
             return formatted
-        def admin_update_plan(username, new_plan):
             if not username or not new_plan:
                 return "❌ Please fill all fields"
             success, msg = update_user_plan(username, new_plan)
             return f"{'✅' if success else '❌'} {msg}"
-        def admin_approve_request(request_id):
             if not request_id:
                 return "❌ Please enter request ID"
             success, msg = approve_request(int(request_id))
             return f"{'✅' if success else '❌'} {msg}"
-        def admin_deny_request(request_id):
             if not request_id:
                 return "❌ Please enter request ID"
             success, msg = deny_request(int(request_id))
             return f"{'✅' if success else '❌'} {msg}"
-        # Wire up events
-        login_btn.click(handle_login, [login_username, login_password], [login_msg, session_code_display])
-        signup_btn.click(handle_signup, [signup_username, signup_email, signup_password], [signup_msg])
-        # Session verification
-        verify_outputs = [user_info, limits_display, admin_panel, model_selector, max_tokens_slider, msg_input, send_btn]
-        verify_session_btn.click(verify_session_code, [chat_session_code], verify_outputs)
-        # Chat functionality
-        send_outputs = [msg_input, chat_html, speed_display, send_btn, stop_btn]
-        send_btn.click(send_message_handler, [msg_input, show_thinking_checkbox, temperature_slider, model_selector, max_tokens_slider, chat_session_code], send_outputs)
-        msg_input.submit(send_message_handler, [msg_input, show_thinking_checkbox, temperature_slider, model_selector, max_tokens_slider, chat_session_code], send_outputs)
         stop_btn.click(stop_generation_handler, outputs=[speed_display, send_btn, stop_btn])
         clear_btn.click(clear_chat, outputs=[chat_html, speed_display, send_btn, stop_btn])
-        upgrade_btn.click(show_upgrade_panel, outputs=[upgrade_panel])
-        submit_upgrade_btn.click(submit_upgrade_request, [upgrade_session_code, upgrade_plan_choice, upgrade_reason], [upgrade_msg])
-        logout_outputs = [chat_session_code, user_info, limits_display, admin_panel, model_selector, max_tokens_slider, msg_input, send_btn]
-        logout_btn.click(handle_logout, [chat_session_code], logout_outputs)
-        # Admin panel events
-        verify_admin_btn.click(verify_admin_session, [admin_session_code], [admin_verify_msg, admin_panel])
-        admin_logout_btn.click(admin_logout_handler, [admin_session_code], [admin_session_code, admin_verify_msg, admin_panel])
         refresh_users_btn.click(load_all_users, outputs=[users_table])
         refresh_requests_btn.click(load_pending_requests, outputs=[requests_table])
-        update_plan_btn.click(admin_update_plan, [admin_username, admin_new_plan], [admin_msg])
-        approve_req_btn.click(admin_approve_request, [request_id_input], [request_msg])
-        deny_req_btn.click(admin_deny_request, [request_id_input], [request_msg])
         gr.Markdown("""
         ---
-        ### 🔑 How Session Codes Work
-        1. **Sign In** on the "Sign In" tab to get your unique 4-digit code
-        2. **Copy** your session code (displayed after login)
-        3. **Enter** the code in the Chat or Admin tab to access features
-        4. **Logout** invalidates your code (you'll need to sign in again)
-        ### 📊 Plan Comparison
-        | Feature | FREE | PLUS ⭐ | PRO 💎 |
-        |---------|------|---------|--------|
-        | **Nano Model** | ✅ Unlimited | ✅ Unlimited | ✅ Unlimited |
-        | **Mini Model** | ✅ Unlimited | ✅ Unlimited | ✅ Unlimited |
-        | **Fast Model** | 10 msgs/3h | ✅ Unlimited | ✅ Unlimited |
-        | **Large Model** | 8 msgs/3h | 20 msgs/3h | ✅ Unlimited |
-        | **Model Selection** | 🤖 Auto only | ✅ Manual choice | ✅ Manual choice |
-        | **Max Tokens** | 256 | 384 | 512 |
-        ### 🆓 Sign up for FREE account - Nano & Mini unlimited!
-        ### 👨‍💼 Admins: Use your session code in the Admin Access tab
         """)
     demo.launch(debug=True, share=False, server_name="0.0.0.0", server_port=7860)

     final_tokens_per_sec = tokens_generated / elapsed if elapsed > 0 else 0
     yield "", False, final_tokens_per_sec, final_tokens_per_sec, False
+# PART 3 - Multi-Page Website UI (No Backend Changes)
 import secrets
+# Global session storage (unchanged from original)
+active_sessions = {}
 session_lock = threading.Lock()
 def generate_session_code():
     with session_lock:
         while True:
             code = ''.join([str(secrets.randbelow(10)) for _ in range(4)])
                 return code
 def create_session(user_data):
     code = generate_session_code()
     with session_lock:
         normalized_data = {
             'user_id': user_data.get('id') or user_data.get('user_id'),
             'username': user_data.get('username'),
     return code
 def validate_session(code):
     with session_lock:
         return active_sessions.get(code, None)
 def invalidate_session(code):
     with session_lock:
         if code in active_sessions:
             del active_sessions[code]
     import gradio as gr
     custom_css = """
+    /* Modern Website Styling */
+    .app-container { max-width: 1400px; margin: 0 auto; }
+    /* Navigation Bar */
+    .nav-bar {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 16px 32px;
+        border-radius: 12px;
+        margin-bottom: 24px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+    .nav-left { display: flex; align-items: center; gap: 24px; }
+    .nav-brand { font-size: 24px; font-weight: 700; color: white; }
+    .nav-links { display: flex; gap: 16px; }
+    .nav-link {
+        color: white;
+        padding: 8px 16px;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+        background: rgba(255,255,255,0.1);
+    }
+    .nav-link:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
+    .nav-link.active { background: rgba(255,255,255,0.3); font-weight: 600; }
+    .nav-right { display: flex; align-items: center; gap: 16px; }
+    .user-greeting { color: white; font-weight: 500; font-size: 15px; }
+    /* Plan Badge */
+    .plan-badge {
+        display: inline-block;
+        padding: 6px 14px;
+        border-radius: 16px;
+        font-size: 12px;
+        font-weight: 700;
+        margin-left: 8px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+    .plan-free { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); color: #3730a3; }
+    .plan-plus { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af; }
+    .plan-pro { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #92400e; }
+    .plan-explore { background: linear-gradient(135deg, #d8b4fe 0%, #c4b5fd 100%); color: #7e22ce; }
+    .plan-research { background: linear-gradient(135deg, #a5f3fc 0%, #67e8f9 100%); color: #0e7490; }
+    .plan-vip { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: #78350f; }
+    /* Auth Page */
+    .auth-container {
+        max-width: 480px;
+        margin: 60px auto;
+        background: white;
+        padding: 40px;
+        border-radius: 16px;
+        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+    }
+    .auth-title {
+        font-size: 32px;
+        font-weight: 700;
+        text-align: center;
+        margin-bottom: 8px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+    .auth-subtitle {
+        text-align: center;
+        color: #6b7280;
+        margin-bottom: 32px;
+        font-size: 14px;
+    }
+    /* Chat Interface */
+    .chat-container {
+        height: 520px;
+        overflow-y: auto;
+        padding: 24px;
+        background: #f9fafb;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        margin-bottom: 16px;
+    }
+    .user-message {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 16px 20px;
+        margin: 12px 0;
+        border-radius: 16px 16px 4px 16px;
+        max-width: 80%;
+        margin-left: auto;
+    }
+    .assistant-message {
+        background: white;
+        padding: 16px 20px;
+        margin: 12px 0;
+        border-radius: 16px 16px 16px 4px;
+        border-left: 4px solid #10a37f;
+        max-width: 80%;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    }
+    .message-content { color: #353740; line-height: 1.7; font-size: 15px; }
+    .user-message .message-content { color: white; }
+    .thinking-content {
+        color: #6b7280;
+        font-style: italic;
+        border-left: 3px solid #d1d5db;
+        padding-left: 12px;
+        margin: 12px 0;
+        background: #f9fafb;
+        padding: 12px;
+        border-radius: 8px;
+    }
+    /* Input Area */
+    .input-row {
+        display: flex;
+        gap: 12px;
+        align-items: flex-end;
+    }
+    .circular-btn {
+        width: 52px !important;
+        height: 52px !important;
+        min-width: 52px !important;
+        border-radius: 50% !important;
+        padding: 0 !important;
+        font-size: 22px !important;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
+        transition: all 0.2s ease !important;
+        border: none !important;
+    }
+    .circular-btn:hover:not(:disabled) {
+        transform: scale(1.08) !important;
+        box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
+    }
+    .send-btn {
+        background: linear-gradient(135deg, #10a37f 0%, #0d8c6c 100%) !important;
+    }
+    .stop-btn {
+        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
+    }
+    /* Sidebar/Limits Panel */
+    .limits-panel {
+        background: white;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        padding: 20px;
+        margin-bottom: 16px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    }
+    .limit-item {
+        display: flex;
+        justify-content: space-between;
+        padding: 12px 0;
+        border-bottom: 1px solid #f3f4f6;
+        align-items: center;
+    }
     .limit-item:last-child { border-bottom: none; }
     .limit-exceeded { color: #dc2626; font-weight: 600; }
+    .limit-ok { color: #059669; font-weight: 500; }
+    .limit-warning { color: #f59e0b; font-weight: 600; }
+    /* Plans Section */
+    .plans-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 24px;
+        margin-top: 24px;
+    }
+    .plan-card {
+        background: white;
+        border: 2px solid #e5e7eb;
+        border-radius: 16px;
+        padding: 28px;
+        transition: all 0.3s;
+        position: relative;
+        overflow: hidden;
+    }
+    .plan-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 12px 24px rgba(0,0,0,0.12);
+        border-color: #667eea;
+    }
+    .plan-card.featured {
+        border: 3px solid #667eea;
+        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
+    }
+    .plan-card.featured::before {
+        content: '⭐ POPULAR';
+        position: absolute;
+        top: 16px;
+        right: -32px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 4px 40px;
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 1px;
+        transform: rotate(45deg);
+    }
+    .plan-name {
+        font-size: 24px;
+        font-weight: 700;
+        margin-bottom: 8px;
+        color: #1f2937;
+    }
+    .plan-price {
+        font-size: 14px;
+        color: #6b7280;
+        margin-bottom: 20px;
+    }
+    .plan-features {
+        list-style: none;
+        padding: 0;
+        margin: 20px 0;
+    }
+    .plan-features li {
+        padding: 8px 0;
+        color: #4b5563;
+        font-size: 14px;
+    }
+    .plan-features li::before {
+        content: '✓ ';
+        color: #10a37f;
+        font-weight: 700;
+        margin-right: 8px;
+    }
+    /* Admin Dashboard */
+    .admin-dashboard {
+        background: white;
+        border-radius: 12px;
+        padding: 24px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    }
+    .dashboard-header {
+        font-size: 24px;
+        font-weight: 700;
+        margin-bottom: 24px;
+        color: #1f2937;
+    }
+    /* Settings Panel */
+    .settings-panel {
+        background: white;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        padding: 20px;
+        margin-bottom: 16px;
+    }
+    /* Speed indicator */
+    .speed-indicator {
+        text-align: center;
+        padding: 12px;
+        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
+        border-radius: 8px;
+        font-weight: 600;
+        color: #166534;
+        margin-bottom: 12px;
+    }
+    /* Responsive */
+    @media (max-width: 768px) {
+        .nav-bar { flex-direction: column; gap: 16px; }
+        .nav-left, .nav-right { width: 100%; justify-content: center; }
+        .chat-container { height: 400px; }
+        .plans-grid { grid-template-columns: 1fr; }
+    }
     """
+    # User greeting variations
+    def get_greeting(username):
+        import random
+        greetings = [
+            f"Hey {username}! 👋",
+            f"Welcome back, {username}! ✨",
+            f"Hi {username}! 🚀",
+            f"Hello {username}! 😊",
+            f"Great to see you, {username}! 🎉",
+            f"What's up, {username}? 💫"
+        ]
+        return random.choice(greetings)
+    # Format message HTML
     def format_message_html(role, content, show_thinking=True):
         role_class = "user-message" if role == "user" else "assistant-message"
         thinking = ""
         answer = ""
         if "<think>" in content:
             parts = content.split("<think>", 1)
             before_think = parts[0].strip()
                 answer = before_think
         else:
             answer = content
+        html = f'<div class="{role_class}"><div class="message-content">'
         if thinking and show_thinking:
             html += f'<div class="thinking-content">💭 {thinking}</div>'
         if answer:
         info = get_user_limits_info(user_data['user_id'])
         if not info:
             return ""
+        plan_class = f"plan-{info['plan'].lower()}"
+        html = f'''<div class="limits-panel">
+            <div style="font-weight: 700; margin-bottom: 16px; font-size: 18px; color: #1f2937;">
+                Usage Limits
+                <span class="plan-badge {plan_class}">{info["plan"]}</span>
+            </div>
+            <div style="font-size: 13px; color: #6b7280; margin-bottom: 16px; padding: 8px; background: #f9fafb; border-radius: 6px;">
+                ⏰ Resets in: <strong>{info["reset_in"]}</strong>
+            </div>'''
+        models_info = [
+            ('Nano ⚡⚡', info['nano_used'], info['nano_limit']),
+            ('Mini 🚀', info['mini_used'], info['mini_limit']),
+            ('Fast ⚡', info['fast_used'], info['fast_limit']),
+            ('Large 💎', info['large_used'], info['large_limit'])
+        ]
         for model_name, used, limit in models_info:
             if limit == -1:
+                status = f'<span class="limit-ok">{used} / ∞</span>'
             else:
                 remaining = limit - used
                 if remaining <= 0:
+                    status = f'<span class="limit-exceeded">{used}/{limit}</span>'
                 elif remaining <= 2:
+                    status = f'<span class="limit-warning">{used}/{limit}</span>'
                 else:
+                    status = f'<span class="limit-ok">{used}/{limit}</span>'
+            html += f'<div class="limit-item"><span style="font-weight: 500;">{model_name}</span>{status}</div>'
         html += '</div>'
         return html
     with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="slate")) as demo:
+        # State to track current page and session
+        current_page = gr.State("auth")  # auth, chat, admin
+        session_code = gr.State("")
+        user_data = gr.State(None)
+        # Navigation Bar
+        with gr.Row(elem_classes="nav-bar"):
+            with gr.Column(scale=1, elem_classes="nav-left"):
+                gr.HTML('<div class="nav-brand">🤖 SAM-X-1</div>')
+            with gr.Column(scale=2, elem_classes="nav-right"):
+                user_greeting = gr.HTML('<div class="user-greeting">Please sign in</div>')
+                upgrade_nav_btn = gr.Button("⭐ Upgrade", size="sm", visible=False)
+                logout_nav_btn = gr.Button("🚪 Logout", size="sm", visible=False)
+        # AUTH PAGE
+        with gr.Group(visible=True) as auth_page:
+            with gr.Column(elem_classes="auth-container"):
+                gr.HTML('<div class="auth-title">Welcome to SAM-X-1</div>')
+                gr.HTML('<div class="auth-subtitle">Sign in or create a new account</div>')
+                auth_username = gr.Textbox(label="Username", placeholder="Enter your username")
+                auth_password = gr.Textbox(label="Password", type="password", placeholder="Enter your password")
+                auth_email = gr.Textbox(label="Email (optional, for new accounts)", placeholder="your@email.com")
+                auth_btn = gr.Button("Continue →", variant="primary", size="lg")
+                auth_msg = gr.Markdown("")
+        # CHAT PAGE
+        with gr.Group(visible=False) as chat_page:
+            with gr.Row():
+                with gr.Column(scale=3):
+                    chat_html = gr.HTML(value='<div class="chat-container"></div>')
+                    with gr.Row(elem_classes="input-row"):
+                        msg_input = gr.Textbox(
+                            placeholder="Ask me anything...",
+                            show_label=False,
+                            scale=10,
+                            lines=1
+                        )
+                        send_btn = gr.Button("▶", elem_classes=["circular-btn", "send-btn"])
+                        stop_btn = gr.Button("⏹", elem_classes=["circular-btn", "stop-btn"], visible=False)
+                    speed_display = gr.HTML('<div class="speed-indicator">⚡ Ready</div>')
                     with gr.Row():
+                        clear_btn = gr.Button("🗑️ Clear", size="sm")
+                        new_chat_btn = gr.Button("➕ New Chat", size="sm", variant="primary")
+                with gr.Column(scale=1):
+                    limits_display = gr.HTML("")
+                    with gr.Accordion("⚙️ Settings", open=False, elem_classes="settings-panel"):
+                        model_selector = gr.Dropdown(
+                            choices=["🤖 Auto (Recommended)"],
+                            value="🤖 Auto (Recommended)",
+                            label="Model Selection"
+                        )
+                        max_tokens_slider = gr.Slider(
+                            minimum=64, maximum=512, value=256, step=64,
+                            label="Max Tokens"
+                        )
+                        temperature_slider = gr.Slider(
+                            minimum=0.0, maximum=2.0, value=0.7, step=0.1,
+                            label="Temperature"
+                        )
+                        show_thinking_checkbox = gr.Checkbox(
+                            label="Show Thinking Process",
+                            value=True
+                        )
+        # UPGRADE PAGE (Plans)
+        with gr.Group(visible=False) as upgrade_page:
+            gr.HTML('<div class="dashboard-header" style="text-align: center;">Choose Your Plan</div>')
+            gr.Markdown("**Select the perfect plan for your needs**", elem_classes="text-center")
+            with gr.Column(elem_classes="plans-grid"):
+                gr.HTML('''
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 24px;">
+                    <div class="plan-card">
+                        <div class="plan-name">Free</div>
+                        <div class="plan-price">Perfect for getting started</div>
+                        <ul class="plan-features">
+                            <li>Nano: Unlimited messages</li>
+                            <li>Mini: Unlimited messages</li>
+                            <li>Fast: 10 messages/3h</li>
+                            <li>Large: 8 messages/3h</li>
+                            <li>Auto model selection</li>
+                            <li>256 max tokens</li>
+                        </ul>
+                    </div>
+                    <div class="plan-card featured">
+                        <div class="plan-name">Plus ⭐</div>
+                        <div class="plan-price">Great for power users</div>
+                        <ul class="plan-features">
+                            <li>Everything in Free</li>
+                            <li>Fast: Unlimited messages</li>
+                            <li>Large: 20 messages/3h</li>
+                            <li>Manual model selection</li>
+                            <li>384 max tokens</li>
+                            <li>Priority support</li>
+                        </ul>
+                    </div>
+                    <div class="plan-card">
+                        <div class="plan-name">Pro 💎</div>
+                        <div class="plan-price">For professionals</div>
+                        <ul class="plan-features">
+                            <li>Everything in Plus</li>
+                            <li>All models unlimited</li>
+                            <li>512 max tokens</li>
+                            <li>Fastest reset (3h)</li>
+                            <li>24/7 premium support</li>
+                            <li>Early feature access</li>
+                        </ul>
+                    </div>
+                </div>
+                ''')
+            upgrade_plan_choice = gr.Radio(
+                choices=["plus", "pro", "explore", "Research"],
+                label="Select Plan to Request",
+                value="plus"
+            )
+            upgrade_reason = gr.Textbox(
+                label="Why do you need this upgrade?",
+                placeholder="Tell us about your use case...",
+                lines=3
+            )
+            submit_upgrade_btn = gr.Button("Submit Upgrade Request", variant="primary", size="lg")
+            upgrade_msg = gr.Markdown("")
+            back_to_chat_btn = gr.Button("← Back to Chat", size="sm")
+        # ADMIN PAGE
+        with gr.Group(visible=False) as admin_page:
+            with gr.Column(elem_classes="admin-dashboard"):
+                gr.HTML('<div class="dashboard-header">👨‍💼 Admin Dashboard</div>')
+                with gr.Tabs():
+                    with gr.Tab("👥 Users"):
+                        users_table = gr.Dataframe(
+                            headers=["ID", "Username", "Email", "Plan", "Created", "Admin"]
+                        )
+                        refresh_users_btn = gr.Button("🔄 Refresh", size="sm")
                         with gr.Row():
+                            admin_username = gr.Textbox(label="Username", scale=2)
+                            admin_new_plan = gr.Dropdown(
+                                choices=["free", "plus", "pro", "explore", "Research", "VIP"],
+                                label="New Plan",
+                                scale=1
+                            )
+                            update_plan_btn = gr.Button("Update", variant="primary", scale=1)
+                        admin_msg = gr.Markdown("")
+                    with gr.Tab("📋 Requests"):
+                        requests_table = gr.Dataframe(
+                            headers=["ID", "Username", "Plan", "Reason", "Date"]
+                        )
+                        refresh_requests_btn = gr.Button("🔄 Refresh", size="sm")
+                        with gr.Row():
+                            request_id_input = gr.Number(label="Request ID", precision=0)
+                            approve_req_btn = gr.Button("✅ Approve", variant="primary")
+                            deny_req_btn = gr.Button("❌ Deny", variant="stop")
+                        request_msg = gr.Markdown("")
+        # ==================== EVENT HANDLERS ====================
+        def handle_auth(username, password, email):
+            """Unified auth handler - auto signup if new user"""
             if len(username) < 3:
+                return None, "❌ Username must be at least 3 characters", gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update()
             if len(password) < 6:
+                return None, "❌ Password must be at least 6 characters", gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update()
+            # Try login first
+            success, data = authenticate_user(username, password)
+            if not success:
+                # Try signup
+                success, message = create_user(username, password, email)
+                if success:
+                    # Auto-login after signup
+                    success, data = authenticate_user(username, password)
+                    if not success:
+                        return None, "❌ Account created but login failed", gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update()
+                else:
+                    return None, f"❌ {message}", gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update()
+            # Generate session code
+            code = create_session(data)
+            # Get user info
+            info = get_user_limits_info(data['user_id'])
+            plan_class = f"plan-{info['plan'].lower()}"
+            greeting_html = f'<div class="user-greeting">{get_greeting(username)} <span class="plan-badge {plan_class}">{info["plan"]}</span></div>'
+            # Set model choices
             if info['can_choose_model']:
+                model_choices = ["🤖 Auto (Recommended)"] + list(available_models.keys())
             else:
+                model_choices = ["🤖 Auto (Recommended)"]
+            limits_html = render_limits_panel(data)
             return (
+                code,
+                f"✅ Welcome, {username}!",
+                gr.update(visible=False),  # auth_page
+                gr.update(visible=True),   # chat_page
+                gr.update(visible=data.get('is_admin', False)),  # admin_page
+                greeting_html,
+                gr.update(visible=True),   # upgrade_nav_btn
+                gr.update(visible=True),   # logout_nav_btn
+                model_choices,
+                info['max_tokens'],
+                limits_html
+            )
+        def show_upgrade_page():
+            return gr.update(visible=False), gr.update(visible=True)
+        def back_to_chat():
+            return gr.update(visible=True), gr.update(visible=False)
+        def handle_logout(code):
+            if code:
+                invalidate_session(code)
+            return (
+                "",
+                gr.update(visible=True),   # auth_page
+                gr.update(visible=False),  # chat_page
+                gr.update(visible=False),  # admin_page
+                gr.update(visible=False),  # upgrade_page
+                '<div class="user-greeting">Please sign in</div>',
+                gr.update(visible=False),  # upgrade_nav_btn
+                gr.update(visible=False),  # logout_nav_btn
+                "",
+                ""
             )
+        def send_message_handler(message, show_thinking, temperature, model_choice, max_tokens, code):
             global stop_generation
             stop_generation.clear()
+            if not code:
+                return "", "", '<div class="speed-indicator" style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b;">❌ Session expired</div>', gr.update(), gr.update(), ""
+            data = validate_session(code)
+            if not data:
+                return "", "", '<div class="speed-indicator" style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b;">❌ Session expired</div>', gr.update(), gr.update(), ""
             if not message.strip():
+                return "", "", '<div class="speed-indicator">⚡ Ready</div>', gr.update(), gr.update(), ""
+            info = get_user_limits_info(data['user_id'])
+            # Model selection logic
             if model_choice == "🤖 Auto (Recommended)" or not info['can_choose_model']:
+                user_available = get_available_models_for_user(data['user_id'])
                 if not user_available:
+                    return "", "", '<div class="speed-indicator" style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b;">❌ No models available</div>', gr.update(), gr.update(), render_limits_panel(data)
                 backend = select_model_auto(message, available_models, user_available)
                 if not backend:
+                    return "", "", '<div class="speed-indicator" style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b;">❌ Could not select model</div>', gr.update(), gr.update(), render_limits_panel(data)
                 model_name = backend.get_name()
             else:
                 model_name = model_choice
+                can_use, msg = can_use_model(data['user_id'], model_name)
                 if not can_use:
+                    return "", "", f'<div class="speed-indicator" style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b;">❌ {msg}</div>', gr.update(), gr.update(), render_limits_panel(data)
                 backend = available_models[model_name]
             # Final check
+            can_use, msg = can_use_model(data['user_id'], model_name)
             if not can_use:
+                return "", "", f'<div class="speed-indicator" style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b;">❌ {msg}</div>', gr.update(), gr.update(), render_limits_panel(data)
             # Increment usage
+            increment_model_usage(data['user_id'], model_name)
+            yield "", "", f'<div class="speed-indicator" style="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af;">⚡ Using {model_name}...</div>', gr.update(interactive=False), gr.update(visible=True), render_limits_panel(data)
             history = [{"role": "user", "content": message}]
+            yield "", render_history(history, show_thinking), '<div class="speed-indicator" style="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af;">⚡ Generating...</div>', gr.update(interactive=False), gr.update(visible=True), render_limits_panel(data)
             prompt = f"User: {message}\nSam: <think>"
             history.append({"role": "assistant", "content": "<think>"})
                         history[-1]["content"] += new_chunk
                     last_speed = avg_speed
+                    yield "", render_history(history, show_thinking), f'<div class="speed-indicator" style="background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); color: #166534;">⚡ {tokens_per_sec:.1f} tok/s</div>', gr.update(interactive=False), gr.update(visible=True), render_limits_panel(data)
+            final_html = f'<div class="speed-indicator" style="background: linear-gradient(135deg, {"#fee2e2 0%, #fecaca 100%); color: #991b1b;" if was_stopped else "#dcfce7 0%, #bbf7d0 100%); color: #166534;"}>{"🛑 Stopped" if was_stopped else "✅ Done"} - {last_speed:.1f} tok/s</div>'
+            yield "", render_history(history, show_thinking), final_html, gr.update(interactive=True), gr.update(visible=False), render_limits_panel(data)
         def stop_generation_handler():
             global stop_generation
             stop_generation.set()
+            return '<div class="speed-indicator" style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b;">🛑 Stopping...</div>', gr.update(interactive=False), gr.update(visible=False)
         def clear_chat():
+            return '<div class="chat-container"></div>', '<div class="speed-indicator">⚡ Ready</div>', gr.update(interactive=True), gr.update(visible=False)
+        def submit_upgrade_request(code, plan, reason):
+            if not code:
+                return "❌ Session expired"
+            data = validate_session(code)
+            if not data:
                 return "❌ Session expired"
             if not reason.strip():
                 return "❌ Please provide a reason"
+            success, msg = request_upgrade(data['user_id'], plan, reason)
             return f"{'✅' if success else '❌'} {msg}"
         def load_all_users():
             users = get_all_users()
             formatted = []
             for user in users:
+                formatted.append([
+                    user[0],
+                    user[1],
+                    user[2] or "N/A",
+                    user[3],
+                    user[4][:10] if user[4] else "N/A",
+                    "Yes" if user[5] else "No"
+                ])
             return formatted
         def load_pending_requests():
             requests = get_pending_requests()
             formatted = []
             for req in requests:
+                formatted.append([
+                    req[0],
+                    req[1],
+                    req[2],
+                    req[3],
+                    req[4][:10] if req[4] else "N/A"
+                ])
             return formatted
+        def admin_update_plan_handler(username, new_plan):
             if not username or not new_plan:
                 return "❌ Please fill all fields"
             success, msg = update_user_plan(username, new_plan)
             return f"{'✅' if success else '❌'} {msg}"
+        def admin_approve_request_handler(request_id):
             if not request_id:
                 return "❌ Please enter request ID"
             success, msg = approve_request(int(request_id))
             return f"{'✅' if success else '❌'} {msg}"
+        def admin_deny_request_handler(request_id):
             if not request_id:
                 return "❌ Please enter request ID"
             success, msg = deny_request(int(request_id))
             return f"{'✅' if success else '❌'} {msg}"
+        # ==================== WIRE UP EVENTS ====================
+        # Auth
+        auth_outputs = [
+            session_code, auth_msg, auth_page, chat_page, admin_page,
+            user_greeting, upgrade_nav_btn, logout_nav_btn,
+            model_selector, max_tokens_slider, limits_display
+        ]
+        auth_btn.click(
+            handle_auth,
+            [auth_username, auth_password, auth_email],
+            auth_outputs
+        )
+        # Navigation
+        upgrade_nav_btn.click(show_upgrade_page, outputs=[chat_page, upgrade_page])
+        back_to_chat_btn.click(back_to_chat, outputs=[chat_page, upgrade_page])
+        logout_outputs = [
+            session_code, auth_page, chat_page, admin_page, upgrade_page,
+            user_greeting, upgrade_nav_btn, logout_nav_btn, chat_html, limits_display
+        ]
+        logout_nav_btn.click(handle_logout, [session_code], logout_outputs)
+        # Chat
+        send_outputs = [msg_input, chat_html, speed_display, send_btn, stop_btn, limits_display]
+        send_btn.click(
+            send_message_handler,
+            [msg_input, show_thinking_checkbox, temperature_slider, model_selector, max_tokens_slider, session_code],
+            send_outputs
+        )
+        msg_input.submit(
+            send_message_handler,
+            [msg_input, show_thinking_checkbox, temperature_slider, model_selector, max_tokens_slider, session_code],
+            send_outputs
+        )
         stop_btn.click(stop_generation_handler, outputs=[speed_display, send_btn, stop_btn])
         clear_btn.click(clear_chat, outputs=[chat_html, speed_display, send_btn, stop_btn])
+        new_chat_btn.click(clear_chat, outputs=[chat_html, speed_display, send_btn, stop_btn])
+        # Upgrade
+        submit_upgrade_btn.click(
+            submit_upgrade_request,
+            [session_code, upgrade_plan_choice, upgrade_reason],
+            [upgrade_msg]
+        )
+        # Admin
         refresh_users_btn.click(load_all_users, outputs=[users_table])
         refresh_requests_btn.click(load_pending_requests, outputs=[requests_table])
+        update_plan_btn.click(admin_update_plan_handler, [admin_username, admin_new_plan], [admin_msg])
+        approve_req_btn.click(admin_approve_request_handler, [request_id_input], [request_msg])
+        deny_req_btn.click(admin_deny_request_handler, [request_id_input], [request_msg])
+        # Footer
         gr.Markdown("""
         ---
+        ### 🚀 Getting Started
+        1. **Enter your username and password** - We'll automatically create an account if you're new!
+        2. **Start chatting** - Ask anything and SAM-X-1 will help you
+        3. **Need more?** - Click the ⭐ Upgrade button to see plans and request an upgrade
+        ### 📊 Quick Plan Overview
+        - **Free**: Nano & Mini unlimited, Fast 10/3h, Large 8/3h
+        - **Plus**: Fast unlimited, Large 20/3h + manual model selection
+        - **Pro**: Everything unlimited + 512 tokens + priority support
+        ### 💡 Tips
+        - Use **Auto mode** for best results - SAM will pick the right model for you
+        - Watch the **limits panel** on the right to track your usage
+        - Enable **Show Thinking** to see SAM's reasoning process
+        ---
+        Made with ❤️ by the SAM-X-1 Team | Powered by Keras & TensorFlow
         """)
     demo.launch(debug=True, share=False, server_name="0.0.0.0", server_port=7860)