fix: make root index full dashboard, add stripped public docs

main.py

@@ -276,9 +276,13 @@ async def deep_research_endpoint(request: Request):
 
 @app.get("/qazmlpdocs", include_in_schema=False)
 async def qazmlp_docs():
-    """Serve the Secured Dashboard (with Stats)."""
-    return FileResponse("static/qazmlpdocs.html")
+    """Serve the Secured Dashboard (Alias to Root)."""
+    return FileResponse("static/docs.html")
 
+@app.get("/docs/public", include_in_schema=False)
+async def public_docs_page():
+    """Serve the Stripped Public Documentation."""
+    return FileResponse("static/public_docs.html")
 
 @app.get("/", tags=["Dashboard"])
 async def root():

static/docs.html

@@ -451,6 +451,15 @@
 
                     <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>
@@ -522,7 +531,60 @@
             </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>
 
@@ -558,11 +620,13 @@
                 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: "gemini-3-flash",
+                        model: modelVal,
                         messages: [{ role: "user", content: inputVal }]
                     };
                 }
@@ -647,6 +711,173 @@
             }
         }
 
+        // --- 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>

static/public_docs.html

@@ -0,0 +1,664 @@
+<!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>
+
+
+
+    </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;
+            }
+        }
+
+    </script>
+</body>
+
+</html>