feat: obscure admin routes (/qaz), split public/private docs, and refine dashboard UI

admin_router.py

@@ -6,7 +6,7 @@ import uuid
 
 from db import get_supabase
 
-router = APIRouter(prefix="/admin", tags=["Admin"])
+router = APIRouter(prefix="/qaz", tags=["Admin"])
 
 # --- Models ---
 

main.py

@@ -116,30 +116,30 @@ app.include_router(admin_router)
 @app.get("/qazmlp", include_in_schema=False)
 async def admin_page():
     """Serve the Secret Admin Dashboard."""
-    return FileResponse("static/admin.html")
+    return FileResponse("static/qaz.html")
 
 
-@app.get("/admin/stats", include_in_schema=False)
+@app.get("/qaz/stats", include_in_schema=False)
 async def admin_stats():
     """Return raw model stats for dashboard."""
     return JSONResponse(engine.get_stats())
 
 
-@app.post("/admin/test_all", include_in_schema=False)
+@app.post("/qaz/test_all", include_in_schema=False)
 async def admin_test_all():
     """Trigger parallel testing of all models."""
     results = await engine.test_all_models()
     return JSONResponse(results)
 
 
-@app.post("/admin/clear_stats", include_in_schema=False)
+@app.post("/qaz/clear_stats", include_in_schema=False)
 async def admin_clear_stats():
     """Clear all stats."""
     engine.clear_stats()
     return JSONResponse({"status": "cleared"})
 
 
-@app.get("/admin/debug_g4f", include_in_schema=False)
+@app.get("/qaz/debug_g4f", include_in_schema=False)
 async def admin_debug_g4f():
     """
     Verbose Debug for G4F Provider on Server.
@@ -203,18 +203,60 @@ async def admin_debug_g4f():
     return HTMLResponse(f"<pre>{output}</pre>")
 
 
+# ---------- Custom Swagger UI ----------
 # ---------- Custom Swagger UI ----------
 @app.get("/docs", include_in_schema=False)
-async def custom_swagger_ui_html():
-    """Serve custom dark-themed Swagger UI."""
+async def public_swagger_ui():
+    """Serve Public Swagger UI (No Admin)."""
     return get_swagger_ui_html(
-        openapi_url=app.openapi_url,
-        title=f"{API_TITLE} - Swagger UI",
+        openapi_url="/openapi_public.json",
+        title=f"{API_TITLE} - Public Docs",
         swagger_css_url="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui.css",
         swagger_js_url="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui-bundle.js",
         swagger_favicon_url="https://fastapi.tiangolo.com/img/favicon.png",
     )
 
+@app.get("/qazmlpdocs", include_in_schema=False)
+async def admin_swagger_ui():
+    """Serve Admin Swagger UI (Full)."""
+    return get_swagger_ui_html(
+        openapi_url=app.openapi_url, # Default includes Admin
+        title=f"{API_TITLE} - Admin Docs",
+        swagger_css_url="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui.css",
+        swagger_js_url="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui-bundle.js",
+        swagger_favicon_url="https://fastapi.tiangolo.com/img/favicon.png",
+    )
+
+@app.get("/openapi_public.json", include_in_schema=False)
+async def get_public_openapi():
+    """Generate OpenAPI schema without Admin routes."""
+    if app.openapi_schema:
+        schema = app.openapi_schema.copy()
+    else:
+        schema = app.openapi()
+        
+    # Deep copy to avoid modifying the cached schema
+    import copy
+    public_schema = copy.deepcopy(schema)
+    
+    # Filter paths
+    paths_to_remove = []
+    for path, methods in public_schema.get("paths", {}).items():
+        # Check if any Method in this path has "Admin" tag
+        is_admin = False
+        for method, details in methods.items():
+            if "tags" in details and "Admin" in details["tags"]:
+                is_admin = True
+                break
+        
+        if is_admin or path.startswith("/qaz") or path.startswith("/admin"):
+            paths_to_remove.append(path)
+            
+    for p in paths_to_remove:
+        del public_schema["paths"][p]
+        
+    return JSONResponse(public_schema)
+
 
 # ---------- Search Routes ----------
 @app.post("/search")
@@ -274,10 +316,7 @@ async def deep_research_endpoint(request: Request):
 # ---------- Routes ----------
 
 
-@app.get("/qazmlpdocs", include_in_schema=False)
-async def qazmlp_docs():
-    """Serve the Secured Dashboard."""
-    return FileResponse("static/qazmlpdocs.html")
+
 
 @app.get("/docs/public", include_in_schema=False)
 async def public_docs_page():

static/docs.html

@@ -269,6 +269,19 @@
             margin-bottom: 12px;
             border-radius: var(--radius-sm);
             border: 1px solid var(--border);
+            appearance: none;
+            /* Remove default arrow to ensure styling applies */
+            -webkit-appearance: none;
+            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%239898aa%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+            background-repeat: no-repeat;
+            background-position: right 12px top 50%;
+            background-size: 12px auto;
+        }
+
+        .demo-select option {
+            background: var(--bg-card);
+            color: var(--text-primary);
+            padding: 10px;
         }
 
         .demo-btn {
@@ -432,7 +445,6 @@
                     <div class="demo-response visible" style="color: #a78bfa;">
                         curl https://kiwa001-kai-api-gateway.hf.space/v1/chat/completions \
                         -H "Content-Type: application/json" \
-                        -H "Authorization: Bearer sk-kai-demo-public" \
                         -d '{"model": "gemini-3-flash", "messages": [{"role": "user", "content": "Hello!"}]}'
                     </div>
                 </div>
@@ -442,23 +454,13 @@
                         placeholder='{"message": "What is AI?"}'>What is the capital of France?</textarea>
 
                     <select id="chat-basic-model" class="demo-select" style="margin-top:10px;">
-                        <option value="gemini-3-flash">gemini-3-flash (Default)</option>
-                        <option value="gpt-4o">gpt-4o</option>
-                        <option value="gpt-4o-mini">gpt-4o-mini</option>
-                        <option value="glm-4">glm-4</option>
-                        <option value="mistral-large">mistral-large</option>
+                        <option value="gemini-3-flash" selected>Loading models...</option>
                     </select>
 
                     <button class="demo-btn" onclick="runDemo('chat-basic')">Run Request ▶</button>
                     <div id="chat-basic-status" class="demo-status"></div>
 
-                    <select id="chat-basic-model" class="demo-select" style="margin-top:10px;">
-                        <option value="gemini-3-flash">gemini-3-flash (Default)</option>
-                        <option value="gpt-4o">gpt-4o</option>
-                        <option value="gpt-4o-mini">gpt-4o-mini</option>
-                        <option value="glm-4">glm-4</option>
-                        <option value="mistral-large">mistral-large</option>
-                    </select>
+
 
                     <div id="chat-basic-res" class="demo-response"></div>
                 </div>
@@ -483,6 +485,11 @@
                 <div class="endpoint-docs">
                     <p style="color:var(--text-secondary); font-size:14px;">Returns a JSON list of all models supported
                         by the API, ranked by quality.</p>
+                    <br>
+                    <span class="demo-label">Example Request</span>
+                    <div class="demo-response visible" style="color: #a78bfa;">
+                        curl https://kiwa001-kai-api-gateway.hf.space/models
+                    </div>
                 </div>
                 <div class="endpoint-demo">
                     <span class="demo-label">Try It Live</span>
@@ -517,6 +524,29 @@
                             </td>
                         </tr>
                     </table>
+                    <br>
+                    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;">
+                        <span class="demo-label" style="margin-bottom:0;">Example Request</span>
+                        <div style="display:flex; gap:8px;">
+                            <button onclick="toggleSearchEx('simple')" id="btn-ex-simple"
+                                style="padding:4px 8px; border-radius:4px; border:1px solid var(--accent); background:var(--accent); color:white; font-size:11px; cursor:pointer;">Simple</button>
+                            <button onclick="toggleSearchEx('deep')" id="btn-ex-deep"
+                                style="padding:4px 8px; border-radius:4px; border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:11px; cursor:pointer;">Deep
+                                Research</button>
+                        </div>
+                    </div>
+
+                    <div id="ex-code-simple" class="demo-response visible" style="color: #a78bfa;">
+                        curl -X POST https://kiwa001-kai-api-gateway.hf.space/search \
+                        -H "Content-Type: application/json" \
+                        -d '{"query": "Machine Learning", "limit": 5}'
+                    </div>
+
+                    <div id="ex-code-deep" class="demo-response" style="color: #a78bfa; display:none;">
+                        curl -X POST https://kiwa001-kai-api-gateway.hf.space/deep_research \
+                        -H "Content-Type: application/json" \
+                        -d '{"query": "Future of AI", "limit": 2}'
+                    </div>
                 </div>
                 <div class="endpoint-demo">
                     <span class="demo-label">Try It Live</span>
@@ -594,6 +624,75 @@
         // Global flag for Pie Chart
         window.pieChartRendered = false;
 
+        // Auto-load models for dropdown
+        async function loadModelsDropdown() {
+            const select = document.getElementById('chat-basic-model');
+            if (!select) return;
+
+            try {
+                const res = await fetch('/models');
+                if (!res.ok) throw new Error("Failed to fetch models");
+
+                const data = await res.json();
+                const models = Array.isArray(data) ? data : (data.models || []);
+
+                if (models.length === 0) throw new Error("No models returned");
+
+                select.innerHTML = '';
+                models.forEach(m => {
+                    const opt = document.createElement('option');
+                    opt.value = m.id;
+                    opt.textContent = m.id;
+                    if (m.id === 'gemini-3-flash') opt.selected = true;
+                    select.appendChild(opt);
+                });
+            } catch (e) {
+                console.error("Model load error", e);
+                // Fallback if empty or error
+                if (select.options.length <= 1) {
+                    select.innerHTML = `
+                        <option value="gemini-3-flash" selected>gemini-3-flash (Default)</option>
+                        <option value="gpt-4o">gpt-4o</option>
+                        <option value="gpt-4o-mini">gpt-4o-mini</option>
+                        <option value="glm-4">glm-4</option>
+                        <option value="mistral-large">mistral-large</option>
+                    `;
+                }
+            }
+        }
+        document.addEventListener('DOMContentLoaded', loadModelsDropdown);
+
+        function toggleSearchEx(mode) {
+            const simpleBtn = document.getElementById('btn-ex-simple');
+            const deepBtn = document.getElementById('btn-ex-deep');
+            const simpleCode = document.getElementById('ex-code-simple');
+            const deepCode = document.getElementById('ex-code-deep');
+
+            if (mode === 'simple') {
+                simpleCode.style.display = 'block';
+                deepCode.style.display = 'none';
+                
+                simpleBtn.style.background = 'var(--accent)';
+                simpleBtn.style.borderColor = 'var(--accent)';
+                simpleBtn.style.color = 'white';
+                
+                deepBtn.style.background = 'transparent';
+                deepBtn.style.borderColor = 'var(--border)';
+                deepBtn.style.color = 'var(--text-muted)';
+            } else {
+                simpleCode.style.display = 'none';
+                deepCode.style.display = 'block';
+                
+                deepBtn.style.background = 'var(--accent)';
+                deepBtn.style.borderColor = 'var(--accent)';
+                deepBtn.style.color = 'white';
+                
+                simpleBtn.style.background = 'transparent';
+                simpleBtn.style.borderColor = 'var(--border)';
+                simpleBtn.style.color = 'var(--text-muted)';
+            }
+        }
+
         async function runDemo(type) {
             const resBox = document.getElementById(type + '-res');
             const statusBox = document.getElementById(type + '-status');
@@ -613,8 +712,7 @@
             try {
                 let url, body, method = 'POST';
                 let headers = {
-                    'Content-Type': 'application/json',
-                    'Authorization': 'Bearer sk-kai-demo-public'  // Use Demo Key for Dashboard
+                    'Content-Type': 'application/json'
                 };
 
                 if (type === 'chat-basic') {
@@ -720,7 +818,7 @@
             try {
                 const t = new Date().getTime();
                 const [statsRes, modelsRes] = await Promise.all([
-                    fetch(`/admin/stats?t=${t}`),
+                    fetch(`/qaz/stats?t=${t}`),
                     fetch(`/models?t=${t}`)
                 ]);
 

static/{admin.html → qaz.html}

@@ -268,7 +268,7 @@
 
             try {
                 // Call backend
-                const res = await fetch('/admin/test_all', { method: 'POST' });
+                const res = await fetch('/qaz/test_all', { method: 'POST' });
                 const results = await res.json();
 
                 console.log("Test Results:", results);
@@ -297,7 +297,7 @@
             btn.disabled = true;
 
             try {
-                await fetch('/admin/clear_stats', { method: 'POST' });
+                await fetch('/qaz/clear_stats', { method: 'POST' });
                 alert("Stats cleared successfully.");
             } catch (e) {
                 alert("Clear failed: " + e.message);
@@ -308,7 +308,7 @@
         }
         async function loadKeys() {
             try {
-                const res = await fetch('/admin/keys');
+                const res = await fetch('/qaz/keys');
                 const keys = await res.json();
 
                 const tbody = document.getElementById('keys-list');
@@ -348,7 +348,7 @@
             if (!name) return;
 
             try {
-                const res = await fetch('/admin/keys', {
+                const res = await fetch('/qaz/keys', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ name: name, limit_tokens: 1000000 })
@@ -369,7 +369,7 @@
         async function revokeKey(id) {
             if (!confirm("Are you sure you want to delete this key? Access will be immediately revoked.")) return;
             try {
-                await fetch(`/admin/keys/${id}`, { method: 'DELETE' });
+                await fetch(`/qaz/keys/${id}`, { method: 'DELETE' });
                 loadKeys();
             } catch (e) {
                 alert("Error: " + e.message);

static/qazmlpdocs.html

@@ -1,885 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>K-AI API — Feel free to AI</title>
-    <meta name="description" content="K-AI API — Free AI proxy API. No signup, no API keys. Feel free to AI.">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link
-        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap"
-        rel="stylesheet">
-    <!-- Chart.js -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <style>
-        :root {
-            --bg-primary: #0a0a0f;
-            --bg-secondary: #12121a;
-            --bg-card: #16161f;
-            --bg-card-hover: #1c1c28;
-            --border: #2a2a3a;
-            --text-primary: #f0f0f5;
-            --text-secondary: #9898aa;
-            --text-muted: #6b6b80;
-            --accent: #6366f1;
-            --accent-hover: #818cf8;
-            --accent-glow: rgba(99, 102, 241, 0.15);
-            --gradient-hero: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
-            --radius-lg: 16px;
-            --radius-sm: 8px;
-
-            /* Ranking Colors */
-            --success: #22c55e;
-            --error: #ef4444;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Inter', -apple-system, sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-        }
-
-        .container {
-            max-width: 1000px;
-            margin: 0 auto;
-            padding: 0 24px;
-        }
-
-        /* ─── Hero ─── */
-        .hero {
-            text-align: center;
-            padding: 100px 0 80px;
-            background: radial-gradient(circle at top center, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
-        }
-
-        .hero h1 {
-            font-size: 72px;
-            font-weight: 900;
-            letter-spacing: -3px;
-            background: var(--gradient-hero);
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-            margin-bottom: 8px;
-        }
-
-        .hero .motto {
-            font-size: 24px;
-            font-weight: 300;
-            letter-spacing: 2px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-        }
-
-        .hero .desc {
-            margin-top: 24px;
-            font-size: 18px;
-            color: var(--text-muted);
-            max-width: 600px;
-            margin-left: auto;
-            margin-right: auto;
-        }
-
-        /* ─── Section ─── */
-        section {
-            padding: 60px 0;
-            border-top: 1px solid var(--bg-secondary);
-        }
-
-        .section-title {
-            font-size: 28px;
-            font-weight: 700;
-            margin-bottom: 40px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .section-title .icon {
-            width: 32px;
-            height: 32px;
-            background: var(--bg-card);
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-        }
-
-        /* ─── Endpoint Block ─── */
-        .endpoint-block {
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: var(--radius-lg);
-            overflow: hidden;
-            margin-bottom: 40px;
-        }
-
-        .endpoint-header {
-            padding: 24px;
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-        }
-
-        .endpoint-title h3 {
-            font-size: 20px;
-            font-weight: 700;
-            margin-bottom: 4px;
-        }
-
-        .endpoint-title p {
-            color: var(--text-secondary);
-            font-size: 14px;
-        }
-
-        .method-badge {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 13px;
-            font-weight: 700;
-            padding: 4px 10px;
-            border-radius: 6px;
-            background: rgba(99, 102, 241, 0.2);
-            color: #818cf8;
-        }
-
-        .method-badge.GET {
-            background: rgba(34, 197, 94, 0.2);
-            color: #4ade80;
-        }
-
-        .method-badge.LIVE {
-            background: rgba(245, 158, 11, 0.2);
-            color: #fbbf24;
-        }
-
-        .endpoint-body {
-            display: grid;
-            grid-template-columns: 1.2fr 0.8fr;
-        }
-
-        .endpoint-body.full-width {
-            grid-template-columns: 1fr;
-        }
-
-        @media (max-width: 800px) {
-
-            .endpoint-body,
-            #analytics-body {
-                flex-direction: column !important;
-                display: flex !important;
-            }
-        }
-
-        .endpoint-docs {
-            padding: 24px;
-            border-right: 1px solid var(--border);
-        }
-
-        .endpoint-demo {
-            padding: 24px;
-            background: var(--bg-secondary);
-        }
-
-        .param-table {
-            width: 100%;
-            border-collapse: collapse;
-            font-size: 14px;
-            margin-top: 16px;
-        }
-
-        .param-table th {
-            text-align: left;
-            color: var(--text-muted);
-            font-weight: 600;
-            padding-bottom: 8px;
-            border-bottom: 1px solid var(--border);
-        }
-
-        .param-table td {
-            padding: 12px 0;
-            /* More padding for ranking */
-            border-bottom: 1px solid var(--border);
-            color: var(--text-secondary);
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 13px;
-        }
-
-        .param-table tr:last-child td {
-            border-bottom: none;
-        }
-
-        .param-name {
-            font-family: 'JetBrains Mono', monospace;
-            color: var(--accent-hover);
-        }
-
-        .param-desc {
-            color: var(--text-secondary);
-        }
-
-        .param-req {
-            color: var(--text-muted);
-            font-size: 12px;
-            margin-left: 6px;
-        }
-
-        /* ─── Interactive Demo ─── */
-        .demo-label {
-            font-size: 11px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            color: var(--text-muted);
-            margin-bottom: 12px;
-            display: block;
-        }
-
-        .demo-input {
-            width: 100%;
-            background: var(--bg-input);
-            border: 1px solid var(--border);
-            border-radius: var(--radius-sm);
-            padding: 10px;
-            color: var(--text-primary);
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 13px;
-            margin-bottom: 12px;
-        }
-
-        .demo-input:focus {
-            outline: none;
-            border-color: var(--accent);
-        }
-
-        .demo-select {
-            width: 100%;
-            background: var(--bg-card);
-            color: var(--text-primary);
-            padding: 10px;
-            margin-bottom: 12px;
-            border-radius: var(--radius-sm);
-            border: 1px solid var(--border);
-        }
-
-        .demo-btn {
-            width: 100%;
-            padding: 8px 12px;
-            /* Reduced padding */
-            background: var(--accent);
-            color: white;
-            border: none;
-            border-radius: var(--radius-sm);
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-
-        .demo-btn:hover {
-            background: var(--accent-hover);
-        }
-
-        .demo-btn:disabled {
-            opacity: 0.5;
-            cursor: wait;
-        }
-
-        .demo-response {
-            margin-top: 16px;
-            background: #0d0d14;
-            border: 1px solid var(--border);
-            border-radius: var(--radius-sm);
-            padding: 12px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 11px;
-            /* Reduced font size */
-            color: var(--text-secondary);
-            white-space: pre-wrap;
-            display: none;
-            max-height: 500px;
-            /* Scrollable */
-            /* Scrollable */
-            overflow-y: auto;
-        }
-
-        .demo-response pre {
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            margin: 0;
-            font-family: inherit;
-        }
-
-        .demo-status {
-            margin-top: 12px;
-            font-weight: 600;
-            font-size: 13px;
-            display: none;
-        }
-
-        .demo-response.visible {
-            display: block;
-        }
-
-        .demo-response.success {
-            border-color: rgba(34, 197, 94, 0.3);
-            color: #4ade80;
-        }
-
-        .demo-response.error {
-            border-color: rgba(239, 68, 68, 0.3);
-            color: #f87171;
-        }
-
-        /* ─── Ranking Badges & Styles ─── */
-        .rank-badge {
-            display: inline-block;
-            width: 24px;
-            height: 24px;
-            line-height: 24px;
-            text-align: center;
-            border-radius: 50%;
-            background: var(--border);
-            color: var(--text-muted);
-            font-weight: bold;
-            font-size: 11px;
-        }
-
-        tr:nth-child(1) .rank-badge {
-            background: #Eab308;
-            color: #000;
-        }
-
-        /* Gold */
-        tr:nth-child(2) .rank-badge {
-            background: #94a3b8;
-            color: #000;
-        }
-
-        /* Silver */
-        tr:nth-child(3) .rank-badge {
-            background: #b45309;
-            color: #fff;
-        }
-
-        /* Bronze */
-
-        .score-good {
-            color: var(--success);
-        }
-
-        .score-bad {
-            color: var(--error);
-        }
-
-        /* Charts */
-        canvas {
-            max-height: 250px;
-            width: 100%;
-        }
-
-        /* ─── Footer ─── */
-        footer {
-            text-align: center;
-            padding: 40px;
-            color: var(--text-muted);
-            font-size: 14px;
-        }
-    </style>
-</head>
-
-<body>
-
-    <div class="hero">
-        <div class="container">
-            <h1>K-AI API</h1>
-            <p class="motto">Feel free to AI</p>
-            <p class="desc">The completely free AI proxy. No signup. No keys. Just code.</p>
-        </div>
-    </div>
-
-    <div class="container">
-
-        <!-- POST /chat (Basic) -->
-        <div class="endpoint-block">
-            <div class="endpoint-header">
-                <div class="endpoint-title">
-                    <h3>Chat Completion</h3>
-                    <p>Send a message and get a response from the best available AI.</p>
-                </div>
-                <span class="method-badge">POST /v1/chat/completions</span>
-            </div>
-            <div class="endpoint-body">
-                <div class="endpoint-docs">
-                    <span class="demo-label">Parameters</span>
-                    <table class="param-table">
-                        <tr>
-                            <td><span class="param-name">message</span></td>
-                            <td><span class="param-desc">Your prompt</span><span class="param-req">(required)</span>
-                            </td>
-                        </tr>
-                    </table>
-                    <br>
-                    <span class="demo-label">Example Request</span>
-                    <div class="demo-response visible" style="color: #a78bfa;">
-                        curl https://kiwa001-kai-api-gateway.hf.space/v1/chat/completions \
-                        -H "Content-Type: application/json" \
-                        -H "Authorization: Bearer sk-kai-demo-public" \
-                        -d '{"model": "gemini-3-flash", "messages": [{"role": "user", "content": "Hello!"}]}'
-                    </div>
-                </div>
-                <div class="endpoint-demo">
-                    <span class="demo-label">Try It Live</span>
-                    <textarea id="chat-basic-input" class="demo-input" rows="3"
-                        placeholder='{"message": "What is AI?"}'>What is the capital of France?</textarea>
-
-                    <select id="chat-basic-model" class="demo-select" style="margin-top:10px;">
-                        <option value="gemini-3-flash">gemini-3-flash (Default)</option>
-                        <option value="gpt-4o">gpt-4o</option>
-                        <option value="gpt-4o-mini">gpt-4o-mini</option>
-                        <option value="glm-4">glm-4</option>
-                        <option value="mistral-large">mistral-large</option>
-                    </select>
-
-                    <button class="demo-btn" onclick="runDemo('chat-basic')">Run Request ▶</button>
-                    <div id="chat-basic-status" class="demo-status"></div>
-
-                    <select id="chat-basic-model" class="demo-select" style="margin-top:10px;">
-                        <option value="gemini-3-flash">gemini-3-flash (Default)</option>
-                        <option value="gpt-4o">gpt-4o</option>
-                        <option value="gpt-4o-mini">gpt-4o-mini</option>
-                        <option value="glm-4">glm-4</option>
-                        <option value="mistral-large">mistral-large</option>
-                    </select>
-
-                    <div id="chat-basic-res" class="demo-response"></div>
-                </div>
-            </div>
-        </div>
-
-
-
-
-
-
-        <!-- GET /models -->
-        <div class="endpoint-block">
-            <div class="endpoint-header">
-                <div class="endpoint-title">
-                    <h3>List Models</h3>
-                    <p>Get all currently available AI models.</p>
-                </div>
-                <span class="method-badge GET">GET /models</span>
-            </div>
-            <div class="endpoint-body">
-                <div class="endpoint-docs">
-                    <p style="color:var(--text-secondary); font-size:14px;">Returns a JSON list of all models supported
-                        by the API, ranked by quality.</p>
-                </div>
-                <div class="endpoint-demo">
-                    <span class="demo-label">Try It Live</span>
-                    <button class="demo-btn" onclick="runDemo('models')">Fetch Models ▶</button>
-                    <div id="models-res" class="demo-response"></div>
-                </div>
-            </div>
-        </div>
-
-
-        <!-- POST /search & /deep_research -->
-        <div class="endpoint-block">
-            <div class="endpoint-header">
-                <div class="endpoint-title">
-                    <h3>Web Search & Research</h3>
-                    <p>Reverse-engineered web search and deep content gathering. No API keys required.</p>
-                </div>
-                <span class="method-badge">POST /search</span>
-            </div>
-            <div class="endpoint-body">
-                <div class="endpoint-docs">
-                    <span class="demo-label">Endpoints</span>
-                    <ul style="color:var(--text-secondary); font-size:13px; margin-left:18px; margin-bottom:10px;">
-                        <li><code>/search</code>: Standard web search (Links)</li>
-                        <li><code>/deep_research</code>: Deep content gathering (Scraper)</li>
-                    </ul>
-                    <span class="demo-label">Parameters</span>
-                    <table class="param-table">
-                        <tr>
-                            <td><span class="param-name">query</span></td>
-                            <td><span class="param-desc">Search topic</span><span class="param-req">(required)</span>
-                            </td>
-                        </tr>
-                    </table>
-                </div>
-                <div class="endpoint-demo">
-                    <span class="demo-label">Try It Live</span>
-                    <input id="search-query" class="demo-input" placeholder="Query" value="When was Python released?">
-                    <select id="search-mode" class="demo-select">
-                        <option value="search">Simple Search (Links)</option>
-                        <option value="deep">Deep Research (Content Gathering)</option>
-                    </select>
-                    <button class="demo-btn" onclick="runSearch()">Execute Search ▶</button>
-                    <div id="search-res" class="demo-response"></div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Live Ranking Container -->
-        <div class="endpoint-block">
-            <div class="endpoint-header">
-                <div class="endpoint-title">
-                    <h3>🏆 Live Model Ranking (Time-Weighted)</h3>
-                    <p>Real-time performance tracked by the engine (Speed & Reliability).</p>
-                </div>
-                <span class="method-badge LIVE">LIVE UPDATES</span>
-            </div>
-            <div class="endpoint-body full-width">
-                <div style="padding: 24px; width: 100%; overflow-x: auto;">
-                    <table class="param-table" id="rankings-table">
-                        <thead>
-                            <tr>
-                                <th width="50">#</th>
-                                <th>Model ID</th>
-                                <th>Score</th>
-                                <th>Avg Time</th>
-                                <th>Success</th>
-                                <th>Fail</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td colspan="7" style="text-align:center; padding: 20px;">Loading live stats...</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-
-        <!-- Network Analytics (Graphs) -->
-        <div class="endpoint-block">
-            <div class="endpoint-header">
-                <div class="endpoint-title">
-                    <h3>Network Analytics</h3>
-                    <p>Live Latency vs. Reliability & Provider Distribution.</p>
-                </div>
-            </div>
-            <div class="endpoint-body" id="analytics-body"
-                style="display: flex; flex-direction: column; gap: 20px; padding: 20px;">
-                <div style="background: var(--bg-secondary); padding: 15px; border-radius: 8px; flex: 1;">
-                    <h4 style="margin-bottom:10px; color:var(--text-secondary); font-size:12px; font-weight:700;">SPEED
-                        vs RELIABILITY</h4>
-                    <canvas id="scatterChart"></canvas>
-                </div>
-                <div style="background: var(--bg-secondary); padding: 15px; border-radius: 8px; flex: 1;">
-                    <h4 style="margin-bottom:10px; color:var(--text-secondary); font-size:12px; font-weight:700;">
-                        PROVIDER DISTRIBUTION</h4>
-                    <canvas id="pieChart"></canvas>
-                </div>
-            </div>
-        </div>
-
-    </div>
-
-    <footer>K-AI API — Feel free to AI</footer>
-
-    <script>
-        // Global flag for Pie Chart
-        window.pieChartRendered = false;
-
-        async function runDemo(type) {
-            const resBox = document.getElementById(type + '-res');
-            const statusBox = document.getElementById(type + '-status');
-
-            resBox.className = 'demo-response visible';
-            resBox.style.display = 'none'; // Hide content while loading
-            resBox.innerHTML = '';
-
-            if (statusBox) {
-                statusBox.style.display = 'block';
-                statusBox.innerHTML = 'Sending Request... <span class="loading-spin"></span>';
-                statusBox.style.color = 'var(--text-muted)';
-            }
-
-            const startTime = Date.now();
-
-            try {
-                let url, body, method = 'POST';
-                let headers = {
-                    'Content-Type': 'application/json',
-                    'Authorization': 'Bearer sk-kai-demo-public'  // Use Demo Key for Dashboard
-                };
-
-                if (type === 'chat-basic') {
-                    // Simple Chat
-                    const inputVal = document.getElementById('chat-basic-input').value;
-                    const modelVal = document.getElementById('chat-basic-model').value || "gemini-3-flash";
-
-                    if (!inputVal) { alert("Please enter a message"); return; }
-
-                    url = '/v1/chat/completions';
-                    body = {
-                        model: modelVal,
-                        messages: [{ role: "user", content: inputVal }]
-                    };
-                }
-                else if (type === 'chat-adv') {
-                    // Advanced Chat
-                    const model = document.getElementById('chat-adv-model').value || "gemini-3-flash";
-                    const userMsg = document.getElementById('chat-adv-msg').value;
-
-                    if (!userMsg) { alert("Please enter a message"); return; }
-
-                    url = '/v1/chat/completions';
-                    body = {
-                        model: model,
-                        messages: [
-                            { role: "user", content: userMsg }
-                        ]
-                    };
-                }
-                else if (type === 'models') {
-                    // List Models
-                    url = '/models'; // This is GET, no body
-                    method = 'GET';
-                    body = undefined;
-                    // Keep models as public? Or require auth? 
-                    // Usually /models is authenticated in OpenAI but let's keep it open for now or add auth.
-                }
-
-                const response = await fetch(url, {
-                    method: method,
-                    headers: headers,
-                    body: body ? JSON.stringify(body) : undefined
-                });
-
-                const data = await response.json();
-                const duration = Date.now() - startTime;
-
-                if (!response.ok) throw new Error(data.detail || 'Request failed');
-
-                if (!response.ok) throw new Error(data.detail || 'Request failed');
-
-                if (statusBox) {
-                    statusBox.innerHTML = `Success (${duration}ms)`;
-                    statusBox.style.color = 'var(--success)';
-                }
-
-                resBox.style.display = 'block';
-                resBox.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
-
-            } catch (err) {
-                resBox.innerHTML = `
-                    <div style="margin-bottom:5px; font-weight:bold; color:var(--error);">
-                        Error
-                    </div>
-                    <pre>${err.message}</pre>
-                `;
-            }
-        }
-
-        async function runSearch() {
-            const query = document.getElementById('search-query').value;
-            const mode = document.getElementById('search-mode').value;
-            const resBox = document.getElementById('search-res');
-
-            if (!query) { alert("Please enter a query"); return; }
-
-            resBox.className = 'demo-response visible';
-            resBox.textContent = '⏳ Searching... (Deep Research may take 10s+)';
-
-            const endpoint = mode === 'deep' ? '/deep_research' : '/search';
-
-            try {
-                const res = await fetch(endpoint, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ query: query })
-                });
-                const data = await res.json();
-                resBox.className = 'demo-response visible ' + (res.ok ? 'success' : 'error');
-                resBox.innerText = JSON.stringify(data, null, 2);
-            } catch (e) {
-                resBox.innerText = 'Error: ' + e.message;
-            }
-        }
-
-        // --- Live Ranking Logic ---
-
-        let availableModelsSet = new Set();
-        let scatterChart, pieChart;
-
-        async function fetchRankingStats() {
-            try {
-                const t = new Date().getTime();
-                const [statsRes, modelsRes] = await Promise.all([
-                    fetch(`/admin/stats?t=${t}`),
-                    fetch(`/models?t=${t}`)
-                ]);
-
-                if (!statsRes.ok) {
-                    throw new Error(`Stats HTTP ${statsRes.status}`);
-                }
-                const stats = await statsRes.json();
-
-                availableModelsSet.clear();
-                if (modelsRes.ok) {
-                    const data = await modelsRes.json();
-                    // Robust handling: Support both array and object wrapper
-                    const modelsList = Array.isArray(data) ? data : (data.models || []);
-
-                    if (Array.isArray(modelsList)) {
-                        modelsList.forEach(m => availableModelsSet.add(`${m.provider}/${m.model}`));
-                    } else {
-                        console.error("Expected array but got:", data);
-                    }
-                }
-
-                renderDashboard(stats);
-            } catch (e) {
-                console.error("Failed to fetch ranking", e);
-                const tbody = document.querySelector('#rankings-table tbody');
-                // Only replace if we haven't rendered data yet (or if it's the loading state)
-                if (tbody.innerHTML.includes('Loading')) {
-                    tbody.innerHTML = `<tr><td colspan="7" style="color:#ef4444; text-align:center; padding: 20px;">
-                        Failed to load stats: ${e.message}<br>
-                        <small style="opacity:0.7">If on Hugging Face, check "Logs" tab for backend errors.</small>
-                    </td></tr>`;
-                }
-            }
-        }
-
-        function calculateScore(s, f, timeMs, cf) {
-            let base = s - (f * 2);
-            let penalty = (timeMs || 0) / 1000.0;
-            let score = base - penalty;
-            if (cf >= 3) return score - 100000;
-            return score;
-        }
-
-        function renderDashboard(data) {
-            let rows = [];
-            let providerCounts = {};
-            let scatterData = [];
-
-            for (let [key, val] of Object.entries(data)) {
-                let score = calculateScore(val.success, val.failure, val.avg_time_ms, val.consecutive_failures);
-                rows.push({ id: key, ...val, score: score });
-
-                // Provider stats for Pie
-                let prov = key.split('/')[0];
-                providerCounts[prov] = (providerCounts[prov] || 0) + val.success;
-
-                // Scatter Data
-                scatterData.push({
-                    x: val.avg_time_ms || 0,
-                    y: score,
-                    id: key
-                });
-            }
-            rows.sort((a, b) => b.score - a.score);
-
-            // Render Table
-            const tbody = document.querySelector('#rankings-table tbody');
-            tbody.innerHTML = '';
-
-            if (rows.length === 0) {
-                tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; padding: 20px;">No stats available yet. Make a request!</td></tr>';
-            } else {
-                rows.forEach((row, index) => {
-                    const tr = document.createElement('tr');
-                    let scoreClass = row.score > 0 ? 'score-good' : 'score-bad';
-                    let timeStr = row.avg_time_ms ? Math.round(row.avg_time_ms) + 'ms' : '-';
-
-                    tr.innerHTML = `
-                         <td><span class="rank-badge">${index + 1}</span></td>
-                         <td><b>${row.id}</b></td>
-                         <td class="${scoreClass}">${row.score.toFixed(2)}</td>
-                         <td>${timeStr}</td>
-                         <td>${row.success}</td>
-                         <td>${row.failure}</td>
-                     `;
-                    tbody.appendChild(tr);
-                });
-            }
-
-            // Render Charts
-            updateScatterChart(scatterData);
-            updatePieChart(providerCounts);
-        }
-
-        function updateScatterChart(data) {
-            const ctx = document.getElementById('scatterChart').getContext('2d');
-            if (scatterChart) {
-                scatterChart.data.datasets[0].data = data;
-                scatterChart.update('none');
-                return;
-            }
-            const validData = data.filter(d => d.x > 0);
-            scatterChart = new Chart(ctx, {
-                type: 'scatter',
-                data: {
-                    datasets: [{
-                        label: 'Models',
-                        data: validData,
-                        backgroundColor: '#8b5cf6',
-                        borderColor: '#8b5cf6',
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    animation: { duration: 1000 },
-                    scales: {
-                        x: { type: 'linear', position: 'bottom', title: { display: true, text: 'Time (ms)', color: '#6b6b80' }, grid: { color: '#2a2a3a' } },
-                        y: { title: { display: true, text: 'Score', color: '#6b6b80' }, grid: { color: '#2a2a3a' } }
-                    },
-                    plugins: {
-                        legend: { display: false },
-                        tooltip: { callbacks: { label: (ctx) => ctx.raw.id + ': ' + ctx.raw.y.toFixed(2) } }
-                    }
-                }
-            });
-        }
-
-        function updatePieChart(counts) {
-            if (window.pieChartRendered) return;
-            const ctx = document.getElementById('pieChart').getContext('2d');
-            window.pieChartRendered = true;
-            pieChart = new Chart(ctx, {
-                type: 'doughnut',
-                data: {
-                    labels: Object.keys(counts),
-                    datasets: [{
-                        data: Object.values(counts),
-                        backgroundColor: ['#8b5cf6', '#22c55e', '#f59e0b', '#ef4444', '#ec4899', '#3b82f6'],
-                        borderWidth: 0
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    animation: { duration: 1000 },
-                    plugins: {
-                        legend: { position: 'right', labels: { color: '#9898aa', font: { size: 10 } } }
-                    }
-                }
-            });
-        }
-
-        // Init Live Ranking
-        fetchRankingStats();
-        setInterval(fetchRankingStats, 5000);
-
-    </script>
-
-</body>
-
-</html>