Update hf.js

hf.js

@@ -216,37 +216,44 @@ 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;
@@ -256,376 +263,653 @@ app.get('/', (req, res) => {
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
           background-color: var(--bg-primary);
           color: var(--text-primary);
-          line-height: 1.6;
-          transition: background-color 0.3s, color 0.3s;
-          padding: 20px;
+          line-height: 1.5;
+          transition: var(--transition);
+          padding: 0;
+          overflow-x: hidden;
           max-width: 100vw;
         }
         
+        /* Typography */
         h1, h2, h3, h4 {
-          margin-bottom: 0.5rem;
+          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;
         }
         
-        .container {
-          max-width: 1200px;
-          margin: 0 auto;
+        /* Sidebar */
+        .sidebar {
           background: var(--bg-secondary);
-          border-radius: 10px;
-          box-shadow: var(--card-shadow);
-          overflow: hidden;
+          padding: 1rem;
+          border-right: 1px solid var(--border-color);
+          display: flex;
+          flex-direction: column;
         }
         
-        .header {
+        .logo {
           display: flex;
-          justify-content: space-between;
           align-items: center;
-          padding: 15px 20px;
+          gap: 0.5rem;
+          padding-bottom: 1rem;
+          margin-bottom: 1rem;
           border-bottom: 1px solid var(--border-color);
         }
         
-        .theme-toggle {
+        .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);
         }
         
-        .switch {
-          position: relative;
-          display: inline-block;
-          width: 50px;
-          height: 24px;
-          margin-left: 10px;
+        .nav-item:hover, .nav-item.active {
+          background: var(--bg-tertiary);
+          color: var(--accent-color);
         }
         
-        .switch input {
-          opacity: 0;
-          width: 0;
-          height: 0;
+        .nav-item i {
+          margin-right: 8px;
+          width: 20px;
+          text-align: center;
         }
         
-        .slider {
-          position: absolute;
-          cursor: pointer;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background-color: var(--bg-tertiary);
-          transition: .4s;
-          border-radius: 24px;
+        /* Main Content */
+        .main-content {
+          padding: 1rem;
+          overflow-y: auto;
+          height: 100vh;
         }
         
-        .slider:before {
-          position: absolute;
-          content: "";
-          height: 16px;
-          width: 16px;
-          left: 4px;
-          bottom: 4px;
-          background-color: var(--accent-color);
-          transition: .4s;
-          border-radius: 50%;
+        /* Stats Grid */
+        .stats-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          gap: 1rem;
+          margin-bottom: 1rem;
         }
         
-        input:checked + .slider:before {
-          transform: translateX(26px);
+        .stat-card {
+          background: var(--bg-secondary);
+          border-radius: 8px;
+          padding: 1rem;
+          box-shadow: var(--card-shadow);
+          display: flex;
+          flex-direction: column;
         }
         
-        .dashboard {
-          display: flex;
-          flex-wrap: wrap;
-          padding: 20px;
-          gap: 20px;
+        .stat-card .label {
+          color: var(--text-secondary);
+          font-size: 0.875rem;
+          margin-bottom: 0.25rem;
         }
         
-        .server-info, .models-section, .guide-section {
-          flex: 1 1 300px;
-          background: var(--bg-tertiary);
-          border-radius: 8px;
-          padding: 15px;
+        .stat-card .value {
+          font-size: 1.25rem;
+          font-weight: 600;
+          white-space: nowrap;
           overflow: hidden;
-          max-height: 500px;
+          text-overflow: ellipsis;
         }
         
-        .server-info {
-          display: flex;
-          flex-direction: column;
-          gap: 10px;
+        /* Tabs */
+        .tabs-container {
+          margin-top: 1rem;
         }
         
-        .info-item {
-          padding: 10px;
-          background: var(--bg-secondary);
-          border-radius: 6px;
-          margin-bottom: 5px;
+        .tabs-header {
+          display: flex;
+          border-bottom: 1px solid var(--border-color);
+          margin-bottom: 1rem;
         }
         
-        .info-item strong {
-          display: block;
-          font-size: 0.8rem;
+        .tab-button {
+          padding: 0.75rem 1rem;
+          background: none;
+          border: none;
+          border-bottom: 2px solid transparent;
           color: var(--text-secondary);
-          margin-bottom: 3px;
-        }
-        
-        .info-item span {
-          font-size: 0.9rem;
-          word-break: break-all;
+          cursor: pointer;
+          font-weight: 500;
+          transition: var(--transition);
         }
         
-        .status-badge {
-          display: inline-block;
-          padding: 3px 8px;
-          border-radius: 12px;
-          font-size: 0.8rem;
-          font-weight: 500;
+        .tab-button.active {
+          color: var(--accent-color);
+          border-bottom-color: var(--accent-color);
         }
         
-        .status-enabled {
-          background: var(--success-bg);
-          color: var(--success-border);
+        .tab-content {
+          display: none;
         }
         
-        .status-disabled {
-          background: var(--warning-bg);
-          color: var(--warning-border);
+        .tab-content.active {
+          display: block;
         }
         
-        .section-header {
-          margin-bottom: 15px;
-          font-size: 1rem;
+        /* Models Wall */
+        .models-container {
+          margin-top: 1rem;
         }
         
         .models-grid {
           display: flex;
           flex-wrap: wrap;
-          gap: 5px;
+          gap: 0.5rem;
+          max-height: 150px;
           overflow-y: auto;
-          max-height: 435px;
-          padding-right: 5px;
+          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: 4px 10px;
+          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;
-          flex-direction: column;
-          gap: 10px;
-          overflow-y: auto;
-          max-height: 435px;
-          padding-right: 5px;
+          margin-top: 1rem;
+          overflow-x: auto;
+          gap: 1rem;
+          padding-bottom: 0.5rem;
         }
         
         .guide-step {
-          background: var(--bg-secondary);
+          min-width: 250px;
+          padding: 1rem;
+          background: var(--bg-tertiary);
           border-radius: 8px;
-          padding: 10px;
           border-left: 3px solid var(--accent-color);
+          flex: 1;
         }
         
         .guide-step h4 {
-          font-size: 0.9rem;
-          margin-bottom: 5px;
+          margin-bottom: 0.5rem;
+          display: flex;
+          align-items: center;
         }
         
-        .guide-step p {
-          font-size: 0.85rem;
+        .guide-step h4 .step-number {
+          display: inline-flex;
+          align-items: center;
+          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: 8px;
+          margin-top: 0.75rem;
           background: var(--bg-primary);
-          padding: 8px;
-          border-radius: 4px;
+          padding: 0.75rem;
+          border-radius: 6px;
           font-family: monospace;
-          font-size: 0.75rem;
+          font-size: 0.8rem;
           overflow-x: auto;
-          white-space: pre;
+          position: relative;
         }
         
-        .tabs {
+        .copy-btn {
+          position: absolute;
+          top: 5px;
+          right: 5px;
+          background: var(--bg-secondary);
+          border: none;
+          border-radius: 4px;
+          width: 28px;
+          height: 28px;
           display: flex;
-          border-bottom: 1px solid var(--border-color);
-          margin-bottom: 15px;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          opacity: 0.7;
+          transition: var(--transition);
         }
         
-        .tab {
-          padding: 8px 15px;
-          cursor: pointer;
-          font-size: 0.85rem;
-          border-bottom: 2px solid transparent;
+        .copy-btn:hover {
+          opacity: 1;
+          background: var(--accent-color);
+          color: white;
         }
         
-        .tab.active {
-          color: var(--accent-color);
-          border-bottom-color: var(--accent-color);
+        /* Theme Toggle */
+        .theme-toggle {
+          margin-top: auto;
+          padding-top: 1rem;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
         }
         
-        /* Scrollbar styling */
-        .models-grid::-webkit-scrollbar, .guide-steps::-webkit-scrollbar {
-          width: 6px;
+        .toggle-switch {
+          position: relative;
+          display: inline-block;
+          width: 46px;
+          height: 24px;
         }
         
-        .models-grid::-webkit-scrollbar-track, .guide-steps::-webkit-scrollbar-track {
-          background: var(--bg-tertiary);
+        .toggle-switch input {
+          opacity: 0;
+          width: 0;
+          height: 0;
         }
         
-        .models-grid::-webkit-scrollbar-thumb, .guide-steps::-webkit-scrollbar-thumb {
-          background-color: var(--border-color);
-          border-radius: 6px;
+        .toggle-slider {
+          position: absolute;
+          cursor: pointer;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: var(--bg-tertiary);
+          transition: var(--transition);
+          border-radius: 24px;
         }
         
-        /* Responsive adjustments */
+        .toggle-slider:before {
+          position: absolute;
+          content: "";
+          height: 18px;
+          width: 18px;
+          left: 3px;
+          bottom: 3px;
+          background-color: var(--accent-color);
+          transition: var(--transition);
+          border-radius: 50%;
+        }
+        
+        input:checked + .toggle-slider {
+          background-color: var(--bg-tertiary);
+        }
+        
+        input:checked + .toggle-slider:before {
+          transform: translateX(22px);
+        }
+        
+        /* Responsive Layout */
         @media (max-width: 768px) {
           .dashboard {
-            flex-direction: column;
+            grid-template-columns: 1fr;
+          }
+          
+          .sidebar {
+            display: none;
+          }
+          
+          .sidebar.active {
+            display: flex;
+            position: fixed;
+            width: 250px;
+            height: 100vh;
+            z-index: 1000;
           }
           
-          .server-info, .models-section, .guide-section {
-            max-height: none;
+          .mobile-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem;
+            background: var(--bg-secondary);
+            box-shadow: var(--card-shadow);
           }
           
-          .models-grid, .guide-steps {
-            max-height: 200px;
+          .menu-toggle {
+            display: block;
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            cursor: pointer;
+            font-size: 1.5rem;
+          }
+        }
+        
+        @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="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>
+        
+        <!-- Sidebar -->
+        <aside class="sidebar" id="sidebar">
+          <div class="logo">
+            <h1>Cursor API</h1>
+          </div>
+          
+          <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>
+          
+          <!-- Theme Toggle -->
           <div class="theme-toggle">
-            Dark Mode
-            <label class="switch">
+            <span>Dark Mode</span>
+            <label class="toggle-switch">
               <input type="checkbox" id="theme-toggle">
-              <span class="slider"></span>
+              <span class="toggle-slider"></span>
             </label>
           </div>
-        </div>
+        </aside>
         
-        <div class="dashboard">
-          <!-- Server Information -->
-          <div class="server-info">
-            <h3 class="section-header">Server Information</h3>
-            
-            <div class="info-item">
-              <strong>API Endpoint</strong>
-              <span id="endpoint-url">Loading...</span>
+        <!-- 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="info-item">
-              <strong>Authentication</strong>
-              <span>Cursor Cookie (user_...)</span>
+            <div class="stat-card">
+              <div class="label">Authentication</div>
+              <div class="value">Cursor Cookie (user_...)</div>
             </div>
-            
-            <div class="info-item">
-              <strong>Proxy Status</strong>
-              <span>
-                <span class="status-badge ${proxyConfig ? 'status-enabled' : 'status-disabled'}">
-                  ${proxyConfig ? 'Enabled' : 'Disabled'}
-                </span>
-                ${proxyConfig ? `<div style="margin-top:5px">Server: ${proxyConfig.host}:${proxyConfig.port}</div>` : ''}
-              </span>
+            <div class="stat-card">
+              <div class="label">Proxy Status</div>
+              <div class="value">${proxyConfig ? 'Enabled' : 'Disabled'}</div>
             </div>
-            
-            <div class="info-item">
-              <strong>Usage</strong>
-              <span>Send requests to the endpoint with your Cursor cookie as the Bearer token in the Authorization header.</span>
+            <div class="stat-card">
+              <div class="label">Available Models</div>
+              <div class="value" id="model-count">Loading...</div>
             </div>
           </div>
           
-          <!-- Models Section -->
-          <div class="models-section">
-            <h3 class="section-header">Supported Models</h3>
-            
-            <div class="tabs">
-              <div class="tab active" data-models-tab="all">All Models</div>
-              <div class="tab" data-models-tab="claude">Claude</div>
-              <div class="tab" data-models-tab="gpt">GPT</div>
-              <div class="tab" data-models-tab="other">Other</div>
-            </div>
-            
-            <div id="all-models" class="models-grid tab-content active">
-              Loading models...
-            </div>
-            
-            <div id="claude-models" class="models-grid tab-content">
-              Loading Claude models...
-            </div>
-            
-            <div id="gpt-models" class="models-grid tab-content">
-              Loading GPT models...
+          <!-- 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>
             
-            <div id="other-models" class="models-grid tab-content">
-              Loading other models...
+            <!-- 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>
-          </div>
-          
-          <!-- Integration Guide -->
-          <div class="guide-section">
-            <h3 class="section-header">Integration Guide</h3>
             
-            <div class="guide-steps">
-              <div class="guide-step">
-                <h4>1. Authentication</h4>
-                <p>Obtain your Cursor cookie that starts with "user_..." from browser cookies after logging in to Cursor.</p>
+            <!-- Models Tab -->
+            <div class="tab-content" id="models-tab">
+              <h2>Available Models</h2>
+              <div class="models-grid" id="all-models">
+                Loading...
               </div>
               
-              <div class="guide-step">
-                <h4>2. API Configuration</h4>
-                <p>Set up your API client with:</p>
-                <p><strong>Base URL:</strong> <span id="endpoint-guide">Loading...</span></p>
-                <p><strong>Headers:</strong></p>
-                <div class="code-example">Content-Type: application/json
-Authorization: Bearer user_your_cookie</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-step">
-                <h4>3. Making Requests</h4>
-                <p>Send chat completion requests:</p>
-                <div class="code-example">POST /chat/completions
+              <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
-}</div>
+}
+                    <button class="copy-btn" title="Copy to clipboard">📋</button>
+                  </div>
+                </div>
               </div>
               
-              <div class="guide-step">
-                <h4>4. Code Example</h4>
-                <div class="code-example">const response = await fetch('${req.protocol}://${req.get('host')}/hf/v1/chat/completions', {
+              <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 user_your_cookie'
+    'Authorization': 'Bearer user_your_cookie_value'
   },
   body: JSON.stringify({
     model: 'claude-3.7-sonnet',
     messages: [
-      { role: 'user', content: 'Hello' }
+      { role: 'user', content: 'Hello, who are you?' }
     ],
     temperature: 0.7
   })
 });
 
-const data = await response.json();</div>
+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
@@ -634,7 +918,7 @@ const data = await response.json();</div>
           themeToggle.checked = true;
         }
         
-        // Toggle theme when switch is clicked
+        // Toggle theme
         themeToggle.addEventListener('change', function() {
           if (this.checked) {
             document.documentElement.setAttribute('data-theme', 'dark');
@@ -643,99 +927,253 @@ const data = await response.json();</div>
           }
         });
         
-        // 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');
         
-        // Get and display endpoint URL
-        const url = new URL(window.location.href);
-        const link = url.protocol + '//' + url.host + '/hf/v1';
+        if (menuToggle) {
+          menuToggle.addEventListener('click', function() {
+            sidebar.classList.toggle('active');
+          });
+        }
         
-        const endpointElements = document.querySelectorAll('#endpoint-url, #endpoint-guide');
-        for (let i = 0; i < endpointElements.length; i++) {
-          endpointElements[i].textContent = link;
+        // 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
+          const tabButton = document.querySelector('.tab-button[data-tab="' + tabId + '"]');
+          if (tabButton) {
+            tabButton.classList.add('active');
+          }
+          
+          const tabContent = document.getElementById(tabId + '-tab');
+          if (tabContent) {
+            tabContent.classList.add('active');
+          }
+          
+          const navItem = document.querySelector('.nav-item[data-tab="' + tabId + '"]');
+          if (navItem) {
+            navItem.classList.add('active');
+          }
         }
         
-        // Model tabs
-        const modelTabs = document.querySelectorAll('[data-models-tab]');
-        const modelContents = document.querySelectorAll('.models-grid.tab-content');
+        // Set up tab click handlers
+        tabButtons.forEach(button => {
+          button.addEventListener('click', function() {
+            const tabId = this.getAttribute('data-tab');
+            setActiveTab(tabId);
+          });
+        });
         
-        for (let i = 0; i < modelTabs.length; i++) {
-          modelTabs[i].addEventListener('click', function() {
-            // Remove active class from all tabs
-            for (let j = 0; j < modelTabs.length; j++) {
-              modelTabs[j].classList.remove('active');
-            }
+        // Set up nav item click handlers
+        navItems.forEach(item => {
+          item.addEventListener('click', function() {
+            const tabId = this.getAttribute('data-tab');
+            setActiveTab(tabId);
             
-            // Hide all tab contents
-            for (let j = 0; j < modelContents.length; j++) {
-              modelContents[j].classList.remove('active');
+            // 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'));
             
-            // Add active class to clicked tab
+            const tabId = this.getAttribute('data-code-tab');
             this.classList.add('active');
             
-            // Show corresponding content
-            const tabId = this.getAttribute('data-models-tab') + '-models';
-            const tabContent = document.getElementById(tabId);
-            if (tabContent) {
-              tabContent.classList.add('active');
-            } else if (tabId === 'all-models') {
-              document.getElementById('all-models').classList.add('active');
+            const codeTab = document.getElementById(tabId + '-code');
+            if (codeTab) {
+              codeTab.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';
+        
+        // Update all endpoint URL displays
+        document.querySelectorAll('#endpoint-url, #endpoint-guide').forEach(el => {
+          el.textContent = link;
+        });
+        
+        const endpointShorthand = document.getElementById('endpoint-shorthand');
+        if (endpointShorthand) {
+          endpointShorthand.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 => {
-            // Sort models alphabetically
-            data.data.sort(function(a, b) {
-              return a.id.localeCompare(b.id);
+            // Update model counts
+            const modelCount = document.getElementById('model-count');
+            if (modelCount) {
+              modelCount.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++;
             });
             
-            const allModelsEl = document.getElementById('all-models');
-            const claudeModelsEl = document.getElementById('claude-models');
-            const gptModelsEl = document.getElementById('gpt-models');
-            const otherModelsEl = document.getElementById('other-models');
+            const claudeCountEl = document.getElementById('claude-count');
+            if (claudeCountEl) {
+              claudeCountEl.textContent = claudeCount;
+            }
+            
+            const gptCountEl = document.getElementById('gpt-count');
+            if (gptCountEl) {
+              gptCountEl.textContent = gptCount;
+            }
+            
+            const geminiCountEl = document.getElementById('gemini-count');
+            if (geminiCountEl) {
+              geminiCountEl.textContent = geminiCount;
+            }
             
-            // Clear loading messages
-            allModelsEl.innerHTML = '';
-            claudeModelsEl.innerHTML = '';
-            gptModelsEl.innerHTML = '';
-            otherModelsEl.innerHTML = '';
+            const otherCountEl = document.getElementById('other-count');
+            if (otherCountEl) {
+              otherCountEl.textContent = otherCount;
+            }
             
-            data.data.forEach(function(model) {
-              // Create model tag
-              const modelEl = document.createElement('div');
-              modelEl.className = 'model-tag';
-              modelEl.textContent = model.id;
+            // 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');
+            if (featuredContainer) {
+              featuredContainer.innerHTML = '';
               
-              // Add to all models
-              allModelsEl.appendChild(modelEl.cloneNode(true));
+              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');
+            if (allModelsContainer) {
+              allModelsContainer.innerHTML = '';
               
-              // Add to specific category
-              if (model.id.includes('claude')) {
-                claudeModelsEl.appendChild(modelEl.cloneNode(true));
-              } else if (model.id.includes('gpt')) {
-                gptModelsEl.appendChild(modelEl.cloneNode(true));
-              } else {
-                otherModelsEl.appendChild(modelEl.cloneNode(true));
-              }
-            });
+              // 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-tag';
+                modelEl.textContent = model.id;
+                allModelsContainer.appendChild(modelEl);
+                
+                // Add to model select dropdown
+                const modelSelect = document.getElementById('model-select');
+                if (modelSelect) {
+                  const option = document.createElement('option');
+                  option.value = model.id;
+                  option.textContent = model.id;
+                  modelSelect.appendChild(option);
+                }
+              });
+            }
           })
-          .catch(function(err) {
+          .catch(err => {
             const allModelsEl = document.getElementById('all-models');
-            allModelsEl.textContent = 'Failed to load models: ' + err.message;
+            if (allModelsEl) {
+              allModelsEl.textContent = 'Failed to load models: ' + err.message;
+            }
+            
+            const featuredModelsEl = document.getElementById('featured-models');
+            if (featuredModelsEl) {
+              featuredModelsEl.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>