Update hf.js

hf.js

@@ -216,81 +216,327 @@ app.get('/', (req, res) => {
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Cursor To OpenAI</title>
       <style>
+        /* Core Variables */
         :root {
           --bg-primary: #ffffff;
-          --bg-secondary: #f9f9f9;
-          --bg-tertiary: #f0f0f0;
-          --text-primary: #333333;
-          --text-secondary: #666666;
-          --border-color: #e0e0e0;
+          --bg-secondary: #f5f7fa;
+          --bg-tertiary: #edf0f7;
+          --text-primary: #2c3e50;
+          --text-secondary: #596877;
+          --border-color: #dce1e8;
           --accent-color: #5D5CDE;
+          --accent-hover: #4a49c8;
           --success-bg: #e1f5e1;
           --success-border: #c3e6cb;
           --warning-bg: #fff3cd;
           --warning-border: #ffeeba;
-          --card-shadow: 0 2px 10px rgba(0,0,0,0.1);
+          --card-shadow: 0 2px 5px rgba(0,0,0,0.05);
+          --hover-shadow: 0 5px 15px rgba(0,0,0,0.08);
+          --transition: all 0.2s ease-in-out;
         }
         
         [data-theme="dark"] {
-          --bg-primary: #181818;
-          --bg-secondary: #222222;
-          --bg-tertiary: #2a2a2a;
-          --text-primary: #e0e0e0;
-          --text-secondary: #b0b0b0;
-          --border-color: #444444;
+          --bg-primary: #121821;
+          --bg-secondary: #1a2332;
+          --bg-tertiary: #243044;
+          --text-primary: #e0e6ed;
+          --text-secondary: #9ba9b9;
+          --border-color: #324156;
           --accent-color: #7D7CED;
+          --accent-hover: #9795f0;
           --success-bg: #1e3a1e;
           --success-border: #2a5a2a;
           --warning-bg: #3a3018;
           --warning-border: #5a4820;
-          --card-shadow: 0 2px 10px rgba(0,0,0,0.3);
+          --card-shadow: 0 2px 5px rgba(0,0,0,0.2);
+          --hover-shadow: 0 5px 15px rgba(0,0,0,0.3);
+        }
+        
+        /* Reset & Base Styles */
+        *, *::before, *::after {
+          box-sizing: border-box;
+          margin: 0;
+          padding: 0;
         }
         
         body {
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          max-width: 800px;
-          margin: 0 auto;
-          padding: 20px;
-          line-height: 1.6;
           background-color: var(--bg-primary);
           color: var(--text-primary);
-          transition: background-color 0.3s, color 0.3s;
+          line-height: 1.5;
+          transition: var(--transition);
+          padding: 0;
+          overflow-x: hidden;
+          max-width: 100vw;
+        }
+        
+        /* Typography */
+        h1, h2, h3, h4 {
+          margin: 0;
+          font-weight: 600;
+          line-height: 1.2;
+        }
+        
+        h1 { font-size: 1.5rem; }
+        h2 { font-size: 1.25rem; }
+        h3 { font-size: 1.1rem; }
+        h4 { font-size: 1rem; }
+        
+        /* Layout */
+        .dashboard {
+          display: grid;
+          grid-template-columns: 250px 1fr;
+          min-height: 100vh;
+        }
+        
+        /* Sidebar */
+        .sidebar {
+          background: var(--bg-secondary);
+          padding: 1rem;
+          border-right: 1px solid var(--border-color);
+          display: flex;
+          flex-direction: column;
+        }
+        
+        .logo {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          padding-bottom: 1rem;
+          margin-bottom: 1rem;
+          border-bottom: 1px solid var(--border-color);
+        }
+        
+        .nav-item {
+          display: flex;
+          align-items: center;
+          padding: 0.5rem 0.75rem;
+          margin-bottom: 0.5rem;
+          border-radius: 6px;
+          cursor: pointer;
+          transition: var(--transition);
+          color: var(--text-secondary);
+        }
+        
+        .nav-item:hover, .nav-item.active {
+          background: var(--bg-tertiary);
+          color: var(--accent-color);
+        }
+        
+        .nav-item i {
+          margin-right: 8px;
+          width: 20px;
+          text-align: center;
+        }
+        
+        /* Main Content */
+        .main-content {
+          padding: 1rem;
+          overflow-y: auto;
+          height: 100vh;
         }
         
-        .container {
+        /* Stats Grid */
+        .stats-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          gap: 1rem;
+          margin-bottom: 1rem;
+        }
+        
+        .stat-card {
           background: var(--bg-secondary);
-          border-radius: 10px;
-          padding: 20px;
+          border-radius: 8px;
+          padding: 1rem;
           box-shadow: var(--card-shadow);
+          display: flex;
+          flex-direction: column;
+        }
+        
+        .stat-card .label {
+          color: var(--text-secondary);
+          font-size: 0.875rem;
+          margin-bottom: 0.25rem;
+        }
+        
+        .stat-card .value {
+          font-size: 1.25rem;
+          font-weight: 600;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        
+        /* Tabs */
+        .tabs-container {
+          margin-top: 1rem;
         }
         
-        .header {
+        .tabs-header {
           display: flex;
-          justify-content: space-between;
+          border-bottom: 1px solid var(--border-color);
+          margin-bottom: 1rem;
+        }
+        
+        .tab-button {
+          padding: 0.75rem 1rem;
+          background: none;
+          border: none;
+          border-bottom: 2px solid transparent;
+          color: var(--text-secondary);
+          cursor: pointer;
+          font-weight: 500;
+          transition: var(--transition);
+        }
+        
+        .tab-button.active {
+          color: var(--accent-color);
+          border-bottom-color: var(--accent-color);
+        }
+        
+        .tab-content {
+          display: none;
+        }
+        
+        .tab-content.active {
+          display: block;
+        }
+        
+        /* Models Wall */
+        .models-container {
+          margin-top: 1rem;
+        }
+        
+        .models-grid {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.5rem;
+          max-height: 150px;
+          overflow-y: auto;
+          padding: 0.5rem;
+          background: var(--bg-tertiary);
+          border-radius: 8px;
+        }
+        
+        .model-tag {
+          background: var(--bg-secondary);
+          color: var(--text-primary);
+          border: 1px solid var(--border-color);
+          border-radius: 15px;
+          padding: 0.25rem 0.75rem;
+          font-size: 0.8rem;
+          white-space: nowrap;
+          transition: var(--transition);
+        }
+        
+        .model-tag:hover {
+          background: var(--accent-color);
+          color: white;
+          border-color: var(--accent-color);
+          transform: translateY(-2px);
+          box-shadow: var(--hover-shadow);
+        }
+        
+        /* Setup Guide */
+        .guide-container {
+          padding: 1rem;
+          background: var(--bg-secondary);
+          border-radius: 8px;
+        }
+        
+        .guide-steps {
+          display: flex;
+          margin-top: 1rem;
+          overflow-x: auto;
+          gap: 1rem;
+          padding-bottom: 0.5rem;
+        }
+        
+        .guide-step {
+          min-width: 250px;
+          padding: 1rem;
+          background: var(--bg-tertiary);
+          border-radius: 8px;
+          border-left: 3px solid var(--accent-color);
+          flex: 1;
+        }
+        
+        .guide-step h4 {
+          margin-bottom: 0.5rem;
+          display: flex;
+          align-items: center;
+        }
+        
+        .guide-step h4 .step-number {
+          display: inline-flex;
           align-items: center;
-          margin-bottom: 20px;
+          justify-content: center;
+          width: 24px;
+          height: 24px;
+          background: var(--accent-color);
+          color: white;
+          border-radius: 50%;
+          margin-right: 0.5rem;
+          font-size: 0.8rem;
         }
         
+        .code-example {
+          margin-top: 0.75rem;
+          background: var(--bg-primary);
+          padding: 0.75rem;
+          border-radius: 6px;
+          font-family: monospace;
+          font-size: 0.8rem;
+          overflow-x: auto;
+          position: relative;
+        }
+        
+        .copy-btn {
+          position: absolute;
+          top: 5px;
+          right: 5px;
+          background: var(--bg-secondary);
+          border: none;
+          border-radius: 4px;
+          width: 28px;
+          height: 28px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          opacity: 0.7;
+          transition: var(--transition);
+        }
+        
+        .copy-btn:hover {
+          opacity: 1;
+          background: var(--accent-color);
+          color: white;
+        }
+        
+        /* Theme Toggle */
         .theme-toggle {
+          margin-top: auto;
+          padding-top: 1rem;
           display: flex;
           align-items: center;
+          justify-content: space-between;
         }
         
-        .switch {
+        .toggle-switch {
           position: relative;
           display: inline-block;
-          width: 50px;
+          width: 46px;
           height: 24px;
-          margin-left: 10px;
         }
         
-        .switch input {
+        .toggle-switch input {
           opacity: 0;
           width: 0;
           height: 0;
         }
         
-        .slider {
+        .toggle-slider {
           position: absolute;
           cursor: pointer;
           top: 0;
@@ -298,149 +544,265 @@ app.get('/', (req, res) => {
           right: 0;
           bottom: 0;
           background-color: var(--bg-tertiary);
-          transition: .4s;
+          transition: var(--transition);
           border-radius: 24px;
         }
         
-        .slider:before {
+        .toggle-slider:before {
           position: absolute;
           content: "";
-          height: 16px;
-          width: 16px;
-          left: 4px;
-          bottom: 4px;
+          height: 18px;
+          width: 18px;
+          left: 3px;
+          bottom: 3px;
           background-color: var(--accent-color);
-          transition: .4s;
+          transition: var(--transition);
           border-radius: 50%;
         }
         
-        input:checked + .slider:before {
-          transform: translateX(26px);
-        }
-        
-        .info-item {
-          margin-bottom: 10px;
-        }
-        
-        .status {
-          background: ${proxyConfig ? 'var(--success-bg)' : 'var(--warning-bg)'};
-          padding: 10px;
-          border-radius: 5px;
-          margin-top: 20px;
-          border: 1px solid ${proxyConfig ? 'var(--success-border)' : 'var(--warning-border)'};
-        }
-        
-        .models-container {
-          margin-top: 20px;
-          border-top: 1px solid var(--border-color);
-          padding-top: 20px;
-        }
-        
-        .model-list {
-          display: grid;
-          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-          gap: 10px;
-          margin-top: 15px;
-        }
-        
-        .model-item {
-          background: var(--bg-tertiary);
-          padding: 8px 12px;
-          border-radius: 4px;
-          font-size: 0.9em;
+        input:checked + .toggle-slider {
+          background-color: var(--bg-tertiary);
         }
         
-        .guide-section {
-          margin-top: 20px;
-          border-top: 1px solid var(--border-color);
-          padding-top: 20px;
+        input:checked + .toggle-slider:before {
+          transform: translateX(22px);
         }
         
-        .guide-step {
-          margin-bottom: 15px;
-          padding: 10px;
-          background: var(--bg-secondary);
-          border-radius: 5px;
-          border-left: 3px solid var(--accent-color);
+        /* Responsive Layout */
+        @media (max-width: 768px) {
+          .dashboard {
+            grid-template-columns: 1fr;
+          }
+          
+          .sidebar {
+            display: none;
+          }
+          
+          .sidebar.active {
+            display: flex;
+            position: fixed;
+            width: 250px;
+            height: 100vh;
+            z-index: 1000;
+          }
+          
+          .mobile-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem;
+            background: var(--bg-secondary);
+            box-shadow: var(--card-shadow);
+          }
+          
+          .menu-toggle {
+            display: block;
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            cursor: pointer;
+            font-size: 1.5rem;
+          }
         }
         
-        .code-example {
-          background-color: var(--bg-tertiary);
-          padding: 10px;
-          border-radius: 5px;
-          overflow-x: auto;
-          font-family: monospace;
-          margin: 10px 0;
+        @media (min-width: 769px) {
+          .mobile-header {
+            display: none;
+          }
         }
       </style>
     </head>
     <body>
-      <div class="container">
-        <div class="header">
-          <h1>Cursor To OpenAI Server</h1>
-          <div class="theme-toggle">
-            Dark Mode
-            <label class="switch">
-              <input type="checkbox" id="theme-toggle">
-              <span class="slider"></span>
-            </label>
-          </div>
+      <div class="dashboard">
+        <!-- Mobile Header (shows only on mobile) -->
+        <div class="mobile-header">
+          <button class="menu-toggle" id="menu-toggle">☰</button>
+          <h1>Cursor API</h1>
+          <div></div> <!-- Empty div for flexbox spacing -->
         </div>
         
-        <div class="info-item">
-          <strong>Chat Source:</strong> Custom (OpenAI Compatible)
-        </div>
-        <div class="info-item">
-          <strong>Custom Endpoint (Base URL):</strong> <span id="endpoint-url"></span>
-        </div>
-        <div class="info-item">
-          <strong>Custom API Key:</strong> [Cursor Cookie in format user_...]
-        </div>
-        
-        <div class="status">
-          <strong>Proxy Status:</strong> ${proxyConfig ? 'Enabled' : 'Disabled'}
-          ${proxyConfig ? `<p>Proxy Server: ${proxyConfig.host}:${proxyConfig.port}</p>` : ''}
-        </div>
-        
-        <div class="models-container">
-          <h3>Supported Models</h3>
-          <div id="model-list" class="model-list">Loading...</div>
-        </div>
-        
-        <div class="guide-section">
-          <h3>How to Connect to Cursor API</h3>
+        <!-- Sidebar -->
+        <aside class="sidebar" id="sidebar">
+          <div class="logo">
+            <h1>Cursor API</h1>
+          </div>
           
-          <div class="guide-step">
-            <h4>Step 1: Authentication</h4>
-            <p>To authenticate with the Cursor API, you need to obtain your Cursor cookie:</p>
-            <ol>
-              <li>Log in to <a href="https://cursor.so" target="_blank">Cursor.so</a></li>
-              <li>Open browser developer tools (F12)</li>
-              <li>Go to Application tab → Cookies</li>
-              <li>Find the cookie that starts with "user_..."</li>
-              <li>Use this value as your API key in the Authorization header</li>
-            </ol>
+          <div class="nav-item active" data-tab="dashboard">
+            <i>📊</i> Dashboard
+          </div>
+          <div class="nav-item" data-tab="models">
+            <i>🤖</i> Models
+          </div>
+          <div class="nav-item" data-tab="guide">
+            <i>📚</i> Integration Guide
+          </div>
+          <div class="nav-item" data-tab="tester">
+            <i>🧪</i> API Tester
           </div>
           
-          <div class="guide-step">
-            <h4>Step 2: Set up your API client</h4>
-            <p>Configure your API client with the following settings:</p>
-            <ul>
-              <li>Base URL: <span id="endpoint-url-guide"></span></li>
-              <li>Headers: <code>Authorization: Bearer your_cursor_cookie</code></li>
-              <li>Content-Type: application/json</li>
-            </ul>
+          <!-- Theme Toggle -->
+          <div class="theme-toggle">
+            <span>Dark Mode</span>
+            <label class="toggle-switch">
+              <input type="checkbox" id="theme-toggle">
+              <span class="toggle-slider"></span>
+            </label>
+          </div>
+        </aside>
+        
+        <!-- Main Content -->
+        <main class="main-content">
+          <!-- Stats Cards -->
+          <div class="stats-grid">
+            <div class="stat-card">
+              <div class="label">API Endpoint</div>
+              <div class="value" id="endpoint-url">Loading...</div>
+            </div>
+            <div class="stat-card">
+              <div class="label">Authentication</div>
+              <div class="value">Cursor Cookie (user_...)</div>
+            </div>
+            <div class="stat-card">
+              <div class="label">Proxy Status</div>
+              <div class="value">${proxyConfig ? 'Enabled' : 'Disabled'}</div>
+            </div>
+            <div class="stat-card">
+              <div class="label">Available Models</div>
+              <div class="value" id="model-count">Loading...</div>
+            </div>
           </div>
           
-          <div class="guide-step">
-            <h4>Step 3: Make API requests</h4>
-            <p>Example request to generate a completion:</p>
-            <div class="code-example">
-fetch('<span id="endpoint-url-code"></span>/chat/completions', {
+          <!-- Tabs Container -->
+          <div class="tabs-container">
+            <div class="tabs-header">
+              <button class="tab-button active" data-tab="dashboard">Dashboard</button>
+              <button class="tab-button" data-tab="models">Models</button>
+              <button class="tab-button" data-tab="guide">Integration Guide</button>
+              <button class="tab-button" data-tab="tester">API Tester</button>
+            </div>
+            
+            <!-- Dashboard Tab -->
+            <div class="tab-content active" id="dashboard-tab">
+              <h2>Server Information</h2>
+              <div class="models-container">
+                <h3>Featured Models</h3>
+                <div class="models-grid" id="featured-models">
+                  Loading...
+                </div>
+              </div>
+              
+              <!-- Connection Guide Summary -->
+              <div class="guide-container">
+                <h3>Quick Start Guide</h3>
+                <div class="guide-steps">
+                  <div class="guide-step">
+                    <h4><span class="step-number">1</span>Authentication</h4>
+                    <p>Get your Cursor cookie that starts with "user_..." from browser cookies after logging in to Cursor.</p>
+                  </div>
+                  <div class="guide-step">
+                    <h4><span class="step-number">2</span>API Requests</h4>
+                    <p>Send POST requests to <span id="endpoint-shorthand">Loading...</span> with your Cursor cookie as Bearer token.</p>
+                  </div>
+                  <div class="guide-step">
+                    <h4><span class="step-number">3</span>Request Format</h4>
+                    <p>Use OpenAI-compatible format with model, messages array, and optional parameters.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- Models Tab -->
+            <div class="tab-content" id="models-tab">
+              <h2>Available Models</h2>
+              <div class="models-grid" id="all-models">
+                Loading...
+              </div>
+              
+              <div class="models-container">
+                <h3>Model Categories</h3>
+                <div class="stats-grid">
+                  <div class="stat-card">
+                    <div class="label">Claude Models</div>
+                    <div class="value" id="claude-count">-</div>
+                  </div>
+                  <div class="stat-card">
+                    <div class="label">GPT Models</div>
+                    <div class="value" id="gpt-count">-</div>
+                  </div>
+                  <div class="stat-card">
+                    <div class="label">Gemini Models</div>
+                    <div class="value" id="gemini-count">-</div>
+                  </div>
+                  <div class="stat-card">
+                    <div class="label">Other Models</div>
+                    <div class="value" id="other-count">-</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- Integration Guide Tab -->
+            <div class="tab-content" id="guide-tab">
+              <h2>Integration Guide</h2>
+              
+              <div class="guide-steps">
+                <div class="guide-step">
+                  <h4><span class="step-number">1</span>Authentication</h4>
+                  <p>To authenticate with the Cursor API:</p>
+                  <ol style="margin-left: 1rem; margin-top: 0.5rem;">
+                    <li>Log in to <a href="https://cursor.so" target="_blank">Cursor.so</a></li>
+                    <li>Open Developer Tools (F12)</li>
+                    <li>Go to Application → Cookies</li>
+                    <li>Find cookie with name starting with "user_"</li>
+                    <li>Use this value as your API key</li>
+                  </ol>
+                </div>
+                
+                <div class="guide-step">
+                  <h4><span class="step-number">2</span>API Configuration</h4>
+                  <p>Set up your API client with:</p>
+                  <ul style="margin-left: 1rem; margin-top: 0.5rem;">
+                    <li>Base URL: <span id="endpoint-guide">Loading...</span></li>
+                    <li>Headers:</li>
+                    <div class="code-example">
+Content-Type: application/json
+Authorization: Bearer user_your_cookie_value
+                    </div>
+                  </ul>
+                </div>
+                
+                <div class="guide-step">
+                  <h4><span class="step-number">3</span>Making Requests</h4>
+                  <p>Send chat completion requests:</p>
+                  <div class="code-example">
+POST /chat/completions
+{
+  "model": "claude-3.7-sonnet",
+  "messages": [
+    {"role": "user", "content": "Hello!"}
+  ],
+  "temperature": 0.7
+}
+                    <button class="copy-btn" title="Copy to clipboard">📋</button>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="guide-container">
+                <h3>Code Examples</h3>
+                <div class="tabs-header" style="margin-top: 0.5rem;">
+                  <button class="tab-button active" data-code-tab="js">JavaScript</button>
+                  <button class="tab-button" data-code-tab="python">Python</button>
+                  <button class="tab-button" data-code-tab="curl">cURL</button>
+                </div>
+                
+                <div class="code-tab active" id="js-code">
+                  <div class="code-example">
+const response = await fetch('${req.protocol}://${req.get('host')}/hf/v1/chat/completions', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',
-    'Authorization': 'Bearer your_cursor_cookie'
+    'Authorization': 'Bearer user_your_cookie_value'
   },
   body: JSON.stringify({
     model: 'claude-3.7-sonnet',
@@ -449,16 +811,105 @@ fetch('<span id="endpoint-url-code"></span>/chat/completions', {
     ],
     temperature: 0.7
   })
-})
-.then(response => response.json())
-.then(data => console.log(data));
+});
+
+const data = await response.json();
+console.log(data);
+                    <button class="copy-btn" title="Copy to clipboard">📋</button>
+                  </div>
+                </div>
+                
+                <div class="code-tab" id="python-code">
+                  <div class="code-example">
+import requests
+
+url = "${req.protocol}://${req.get('host')}/hf/v1/chat/completions"
+headers = {
+    "Content-Type": "application/json",
+    "Authorization": "Bearer user_your_cookie_value"
+}
+payload = {
+    "model": "claude-3.7-sonnet",
+    "messages": [
+        {"role": "user", "content": "Hello, who are you?"}
+    ],
+    "temperature": 0.7
+}
+
+response = requests.post(url, headers=headers, json=payload)
+data = response.json()
+print(data)
+                    <button class="copy-btn" title="Copy to clipboard">📋</button>
+                  </div>
+                </div>
+                
+                <div class="code-tab" id="curl-code">
+                  <div class="code-example">
+curl -X POST "${req.protocol}://${req.get('host')}/hf/v1/chat/completions" \\
+  -H "Content-Type: application/json" \\
+  -H "Authorization: Bearer user_your_cookie_value" \\
+  -d '{
+    "model": "claude-3.7-sonnet",
+    "messages": [
+      {"role": "user", "content": "Hello, who are you?"}
+    ],
+    "temperature": 0.7
+  }'
+                    <button class="copy-btn" title="Copy to clipboard">📋</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- API Tester Tab -->
+            <div class="tab-content" id="tester-tab">
+              <h2>API Tester</h2>
+              
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
+                <div style="display: flex; flex-direction: column; gap: 1rem;">
+                  <div class="guide-step">
+                    <h4>Request</h4>
+                    <div style="margin-top: 0.5rem;">
+                      <label for="api-key" style="display: block; margin-bottom: 0.25rem;">API Key:</label>
+                      <input type="password" id="api-key" placeholder="user_..." style="width: 100%; padding: 0.5rem; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary);">
+                    </div>
+                    
+                    <div style="margin-top: 0.5rem;">
+                      <label for="model-select" style="display: block; margin-bottom: 0.25rem;">Model:</label>
+                      <select id="model-select" style="width: 100%; padding: 0.5rem; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary);">
+                        <option value="claude-3.7-sonnet">claude-3.7-sonnet</option>
+                      </select>
+                    </div>
+                    
+                    <div style="margin-top: 0.5rem;">
+                      <label for="prompt-input" style="display: block; margin-bottom: 0.25rem;">Prompt:</label>
+                      <textarea id="prompt-input" placeholder="Enter your prompt here..." style="width: 100%; height: 120px; padding: 0.5rem; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); resize: vertical;">Hello, can you introduce yourself?</textarea>
+                    </div>
+                    
+                    <div style="margin-top: 0.5rem; display: flex; gap: 0.5rem; align-items: center;">
+                      <label for="temperature" style="flex-shrink: 0;">Temperature:</label>
+                      <input type="range" id="temperature" min="0" max="1" step="0.1" value="0.7" style="flex-grow: 1;">
+                      <span id="temperature-value">0.7</span>
+                    </div>
+                    
+                    <button id="submit-api" style="margin-top: 1rem; width: 100%; padding: 0.75rem; background: var(--accent-color); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; transition: var(--transition);">Send Request</button>
+                  </div>
+                </div>
+                
+                <div class="guide-step">
+                  <h4>Response</h4>
+                  <div style="height: 300px; overflow-y: auto; margin-top: 0.5rem; padding: 0.75rem; background: var(--bg-tertiary); border-radius: 4px; font-family: monospace; white-space: pre-wrap; font-size: 0.8rem;" id="api-response">
+                    Response will appear here...
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        </main>
       </div>
       
       <script>
-        // Theme toggling
+        // Theme Toggle
         const themeToggle = document.getElementById('theme-toggle');
         
         // Check system preference
@@ -467,7 +918,7 @@ fetch('<span id="endpoint-url-code"></span>/chat/completions', {
           themeToggle.checked = true;
         }
         
-        // Toggle theme when switch is clicked
+        // Toggle theme
         themeToggle.addEventListener('change', function() {
           if (this.checked) {
             document.documentElement.setAttribute('data-theme', 'dark');
@@ -476,45 +927,204 @@ fetch('<span id="endpoint-url-code"></span>/chat/completions', {
           }
         });
         
-        // Listen for system theme changes
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-          if (event.matches) {
-            document.documentElement.setAttribute('data-theme', 'dark');
-            themeToggle.checked = true;
-          } else {
-            document.documentElement.removeAttribute('data-theme');
-            themeToggle.checked = false;
-          }
+        // Mobile Menu Toggle
+        const menuToggle = document.getElementById('menu-toggle');
+        const sidebar = document.getElementById('sidebar');
+        
+        if (menuToggle) {
+          menuToggle.addEventListener('click', function() {
+            sidebar.classList.toggle('active');
+          });
+        }
+        
+        // Main Tab Navigation
+        const tabButtons = document.querySelectorAll('.tab-button');
+        const tabContents = document.querySelectorAll('.tab-content');
+        const navItems = document.querySelectorAll('.nav-item');
+        
+        function setActiveTab(tabId) {
+          // Deactivate all tabs
+          tabButtons.forEach(button => button.classList.remove('active'));
+          tabContents.forEach(content => content.classList.remove('active'));
+          navItems.forEach(item => item.classList.remove('active'));
+          
+          // Activate the selected tab
+          document.querySelector(`.tab-button[data-tab="${tabId}"]`)?.classList.add('active');
+          document.getElementById(`${tabId}-tab`)?.classList.add('active');
+          document.querySelector(`.nav-item[data-tab="${tabId}"]`)?.classList.add('active');
+        }
+        
+        // Set up tab click handlers
+        tabButtons.forEach(button => {
+          button.addEventListener('click', function() {
+            const tabId = this.getAttribute('data-tab');
+            setActiveTab(tabId);
+          });
+        });
+        
+        // Set up nav item click handlers
+        navItems.forEach(item => {
+          item.addEventListener('click', function() {
+            const tabId = this.getAttribute('data-tab');
+            setActiveTab(tabId);
+            
+            // Close mobile menu if open
+            if (window.innerWidth < 769) {
+              sidebar.classList.remove('active');
+            }
+          });
+        });
+        
+        // Code example tabs
+        const codeTabButtons = document.querySelectorAll('[data-code-tab]');
+        const codeTabs = document.querySelectorAll('.code-tab');
+        
+        codeTabButtons.forEach(button => {
+          button.addEventListener('click', function() {
+            codeTabButtons.forEach(btn => btn.classList.remove('active'));
+            codeTabs.forEach(tab => tab.classList.remove('active'));
+            
+            const tabId = this.getAttribute('data-code-tab');
+            this.classList.add('active');
+            document.getElementById(`${tabId}-code`).classList.add('active');
+          });
+        });
+        
+        // Copy buttons
+        document.querySelectorAll('.copy-btn').forEach(button => {
+          button.addEventListener('click', function() {
+            const codeBlock = this.parentElement;
+            const code = codeBlock.textContent.trim();
+            
+            navigator.clipboard.writeText(code).then(() => {
+              this.textContent = '✓';
+              setTimeout(() => {
+                this.textContent = '📋';
+              }, 1500);
+            });
+          });
         });
         
         // Get and display endpoint URL
         const url = new URL(window.location.href);
         const link = url.protocol + '//' + url.host + '/hf/v1';
-        document.getElementById('endpoint-url').textContent = link;
         
-        // Also update the guide URLs
-        const guideUrlElements = document.querySelectorAll('#endpoint-url-guide, #endpoint-url-code');
-        guideUrlElements.forEach(el => {
+        // Update all endpoint URL displays
+        document.querySelectorAll('#endpoint-url, #endpoint-guide').forEach(el => {
           el.textContent = link;
         });
         
+        document.getElementById('endpoint-shorthand').textContent = link + '/chat/completions';
+        
+        // Temperature slider
+        const temperatureSlider = document.getElementById('temperature');
+        const temperatureValue = document.getElementById('temperature-value');
+        
+        if (temperatureSlider) {
+          temperatureSlider.addEventListener('input', function() {
+            temperatureValue.textContent = this.value;
+          });
+        }
+        
         // Load models list
         fetch('/hf/v1/models')
           .then(response => response.json())
           .then(data => {
-            const modelListEl = document.getElementById('model-list');
-            modelListEl.innerHTML = '';
+            // Update model counts
+            document.getElementById('model-count').textContent = data.data.length;
+            
+            // Count models by category
+            let claudeCount = 0;
+            let gptCount = 0;
+            let geminiCount = 0;
+            let otherCount = 0;
+            
+            data.data.forEach(model => {
+              if (model.id.includes('claude')) claudeCount++;
+              else if (model.id.includes('gpt')) gptCount++;
+              else if (model.id.includes('gemini')) geminiCount++;
+              else otherCount++;
+            });
+            
+            document.getElementById('claude-count').textContent = claudeCount;
+            document.getElementById('gpt-count').textContent = gptCount;
+            document.getElementById('gemini-count').textContent = geminiCount;
+            document.getElementById('other-count').textContent = otherCount;
+            
+            // Featured models (for dashboard)
+            const featuredModels = ['claude-3.7-sonnet', 'gpt-4o', 'claude-3.5-sonnet', 'gemini-1.5-flash-500k'];
+            const featuredContainer = document.getElementById('featured-models');
+            featuredContainer.innerHTML = '';
+            
+            featuredModels.forEach(modelId => {
+              const found = data.data.find(m => m.id === modelId);
+              if (found) {
+                const modelEl = document.createElement('div');
+                modelEl.className = 'model-tag';
+                modelEl.textContent = found.id;
+                featuredContainer.appendChild(modelEl);
+              }
+            });
+            
+            // All models
+            const allModelsContainer = document.getElementById('all-models');
+            allModelsContainer.innerHTML = '';
+            
+            // Sort models alphabetically
+            data.data.sort((a, b) => a.id.localeCompare(b.id));
             
             data.data.forEach(model => {
               const modelEl = document.createElement('div');
-              modelEl.className = 'model-item';
+              modelEl.className = 'model-tag';
               modelEl.textContent = model.id;
-              modelListEl.appendChild(modelEl);
+              allModelsContainer.appendChild(modelEl);
+              
+              // Add to model select dropdown
+              const option = document.createElement('option');
+              option.value = model.id;
+              option.textContent = model.id;
+              document.getElementById('model-select').appendChild(option);
             });
           })
           .catch(err => {
-            document.getElementById('model-list').textContent = 'Failed to load models: ' + err.message;
+            document.querySelectorAll('#all-models, #featured-models').forEach(el => {
+              el.textContent = 'Failed to load models: ' + err.message;
+            });
+          });
+        
+        // API Tester
+        const submitApiBtn = document.getElementById('submit-api');
+        if (submitApiBtn) {
+          submitApiBtn.addEventListener('click', async function() {
+            const apiKey = document.getElementById('api-key').value;
+            const model = document.getElementById('model-select').value;
+            const prompt = document.getElementById('prompt-input').value;
+            const temperature = parseFloat(document.getElementById('temperature').value);
+            
+            const responseContainer = document.getElementById('api-response');
+            responseContainer.textContent = 'Loading...';
+            
+            try {
+              const response = await fetch(`${link}/chat/completions`, {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                  'Authorization': `Bearer ${apiKey}`
+                },
+                body: JSON.stringify({
+                  model: model,
+                  messages: [{ role: 'user', content: prompt }],
+                  temperature: temperature
+                })
+              });
+              
+              const data = await response.json();
+              responseContainer.textContent = JSON.stringify(data, null, 2);
+            } catch (error) {
+              responseContainer.textContent = 'Error: ' + (error.message || 'Unknown error');
+            }
           });
+        }
       </script>
     </body>
     </html>