Update hf.js

hf.js

@@ -216,44 +216,37 @@ 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: #f5f7fa;
-          --bg-tertiary: #edf0f7;
-          --text-primary: #2c3e50;
-          --text-secondary: #596877;
-          --border-color: #dce1e8;
+          --bg-secondary: #f9f9f9;
+          --bg-tertiary: #f0f0f0;
+          --text-primary: #333333;
+          --text-secondary: #666666;
+          --border-color: #e0e0e0;
           --accent-color: #5D5CDE;
-          --accent-hover: #4a49c8;
           --success-bg: #e1f5e1;
           --success-border: #c3e6cb;
           --warning-bg: #fff3cd;
           --warning-border: #ffeeba;
-          --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;
+          --card-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
         
         [data-theme="dark"] {
-          --bg-primary: #121821;
-          --bg-secondary: #1a2332;
-          --bg-tertiary: #243044;
-          --text-primary: #e0e6ed;
-          --text-secondary: #9ba9b9;
-          --border-color: #324156;
+          --bg-primary: #181818;
+          --bg-secondary: #222222;
+          --bg-tertiary: #2a2a2a;
+          --text-primary: #e0e0e0;
+          --text-secondary: #b0b0b0;
+          --border-color: #444444;
           --accent-color: #7D7CED;
-          --accent-hover: #9795f0;
           --success-bg: #1e3a1e;
           --success-border: #2a5a2a;
           --warning-bg: #3a3018;
           --warning-border: #5a4820;
-          --card-shadow: 0 2px 5px rgba(0,0,0,0.2);
-          --hover-shadow: 0 5px 15px rgba(0,0,0,0.3);
+          --card-shadow: 0 2px 10px rgba(0,0,0,0.3);
         }
         
-        /* Reset & Base Styles */
-        *, *::before, *::after {
+        * {
           box-sizing: border-box;
           margin: 0;
           padding: 0;
@@ -263,653 +256,376 @@ 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.5;
-          transition: var(--transition);
-          padding: 0;
-          overflow-x: hidden;
+          line-height: 1.6;
+          transition: background-color 0.3s, color 0.3s;
+          padding: 20px;
           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;
+          margin-bottom: 0.5rem;
         }
         
-        /* Sidebar */
-        .sidebar {
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
           background: var(--bg-secondary);
-          padding: 1rem;
-          border-right: 1px solid var(--border-color);
-          display: flex;
-          flex-direction: column;
+          border-radius: 10px;
+          box-shadow: var(--card-shadow);
+          overflow: hidden;
         }
         
-        .logo {
+        .header {
           display: flex;
+          justify-content: space-between;
           align-items: center;
-          gap: 0.5rem;
-          padding-bottom: 1rem;
-          margin-bottom: 1rem;
+          padding: 15px 20px;
           border-bottom: 1px solid var(--border-color);
         }
         
-        .nav-item {
+        .theme-toggle {
           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);
+        .switch {
+          position: relative;
+          display: inline-block;
+          width: 50px;
+          height: 24px;
+          margin-left: 10px;
         }
         
-        .nav-item i {
-          margin-right: 8px;
-          width: 20px;
-          text-align: center;
+        .switch input {
+          opacity: 0;
+          width: 0;
+          height: 0;
         }
         
-        /* Main Content */
-        .main-content {
-          padding: 1rem;
-          overflow-y: auto;
-          height: 100vh;
+        .slider {
+          position: absolute;
+          cursor: pointer;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: var(--bg-tertiary);
+          transition: .4s;
+          border-radius: 24px;
         }
         
-        /* Stats Grid */
-        .stats-grid {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-          gap: 1rem;
-          margin-bottom: 1rem;
+        .slider:before {
+          position: absolute;
+          content: "";
+          height: 16px;
+          width: 16px;
+          left: 4px;
+          bottom: 4px;
+          background-color: var(--accent-color);
+          transition: .4s;
+          border-radius: 50%;
         }
         
-        .stat-card {
-          background: var(--bg-secondary);
-          border-radius: 8px;
-          padding: 1rem;
-          box-shadow: var(--card-shadow);
-          display: flex;
-          flex-direction: column;
+        input:checked + .slider:before {
+          transform: translateX(26px);
         }
         
-        .stat-card .label {
-          color: var(--text-secondary);
-          font-size: 0.875rem;
-          margin-bottom: 0.25rem;
+        .dashboard {
+          display: flex;
+          flex-wrap: wrap;
+          padding: 20px;
+          gap: 20px;
         }
         
-        .stat-card .value {
-          font-size: 1.25rem;
-          font-weight: 600;
-          white-space: nowrap;
+        .server-info, .models-section, .guide-section {
+          flex: 1 1 300px;
+          background: var(--bg-tertiary);
+          border-radius: 8px;
+          padding: 15px;
           overflow: hidden;
-          text-overflow: ellipsis;
+          max-height: 500px;
         }
         
-        /* Tabs */
-        .tabs-container {
-          margin-top: 1rem;
+        .server-info {
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
         }
         
-        .tabs-header {
-          display: flex;
-          border-bottom: 1px solid var(--border-color);
-          margin-bottom: 1rem;
+        .info-item {
+          padding: 10px;
+          background: var(--bg-secondary);
+          border-radius: 6px;
+          margin-bottom: 5px;
         }
         
-        .tab-button {
-          padding: 0.75rem 1rem;
-          background: none;
-          border: none;
-          border-bottom: 2px solid transparent;
+        .info-item strong {
+          display: block;
+          font-size: 0.8rem;
           color: var(--text-secondary);
-          cursor: pointer;
-          font-weight: 500;
-          transition: var(--transition);
+          margin-bottom: 3px;
         }
         
-        .tab-button.active {
-          color: var(--accent-color);
-          border-bottom-color: var(--accent-color);
+        .info-item span {
+          font-size: 0.9rem;
+          word-break: break-all;
         }
         
-        .tab-content {
-          display: none;
+        .status-badge {
+          display: inline-block;
+          padding: 3px 8px;
+          border-radius: 12px;
+          font-size: 0.8rem;
+          font-weight: 500;
         }
         
-        .tab-content.active {
-          display: block;
+        .status-enabled {
+          background: var(--success-bg);
+          color: var(--success-border);
         }
         
-        /* Models Wall */
-        .models-container {
-          margin-top: 1rem;
+        .status-disabled {
+          background: var(--warning-bg);
+          color: var(--warning-border);
+        }
+        
+        .section-header {
+          margin-bottom: 15px;
+          font-size: 1rem;
         }
         
         .models-grid {
           display: flex;
           flex-wrap: wrap;
-          gap: 0.5rem;
-          max-height: 150px;
+          gap: 5px;
           overflow-y: auto;
-          padding: 0.5rem;
-          background: var(--bg-tertiary);
-          border-radius: 8px;
+          max-height: 435px;
+          padding-right: 5px;
         }
         
         .model-tag {
           background: var(--bg-secondary);
-          color: var(--text-primary);
           border: 1px solid var(--border-color);
           border-radius: 15px;
-          padding: 0.25rem 0.75rem;
+          padding: 4px 10px;
           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;
+          flex-direction: column;
+          gap: 10px;
+          overflow-y: auto;
+          max-height: 435px;
+          padding-right: 5px;
         }
         
         .guide-step {
-          min-width: 250px;
-          padding: 1rem;
-          background: var(--bg-tertiary);
+          background: var(--bg-secondary);
           border-radius: 8px;
+          padding: 10px;
           border-left: 3px solid var(--accent-color);
-          flex: 1;
         }
         
         .guide-step h4 {
-          margin-bottom: 0.5rem;
-          display: flex;
-          align-items: center;
+          font-size: 0.9rem;
+          margin-bottom: 5px;
         }
         
-        .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;
+        .guide-step p {
+          font-size: 0.85rem;
         }
         
         .code-example {
-          margin-top: 0.75rem;
+          margin-top: 8px;
           background: var(--bg-primary);
-          padding: 0.75rem;
-          border-radius: 6px;
+          padding: 8px;
+          border-radius: 4px;
           font-family: monospace;
-          font-size: 0.8rem;
+          font-size: 0.75rem;
           overflow-x: auto;
-          position: relative;
+          white-space: pre;
         }
         
-        .copy-btn {
-          position: absolute;
-          top: 5px;
-          right: 5px;
-          background: var(--bg-secondary);
-          border: none;
-          border-radius: 4px;
-          width: 28px;
-          height: 28px;
+        .tabs {
           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;
-        }
-        
-        .toggle-switch {
-          position: relative;
-          display: inline-block;
-          width: 46px;
-          height: 24px;
+          border-bottom: 1px solid var(--border-color);
+          margin-bottom: 15px;
         }
         
-        .toggle-switch input {
-          opacity: 0;
-          width: 0;
-          height: 0;
+        .tab {
+          padding: 8px 15px;
+          cursor: pointer;
+          font-size: 0.85rem;
+          border-bottom: 2px solid transparent;
         }
         
-        .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;
+        .tab.active {
+          color: var(--accent-color);
+          border-bottom-color: var(--accent-color);
         }
         
-        .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%;
+        /* Scrollbar styling */
+        .models-grid::-webkit-scrollbar, .guide-steps::-webkit-scrollbar {
+          width: 6px;
         }
         
-        input:checked + .toggle-slider {
-          background-color: var(--bg-tertiary);
+        .models-grid::-webkit-scrollbar-track, .guide-steps::-webkit-scrollbar-track {
+          background: var(--bg-tertiary);
         }
         
-        input:checked + .toggle-slider:before {
-          transform: translateX(22px);
+        .models-grid::-webkit-scrollbar-thumb, .guide-steps::-webkit-scrollbar-thumb {
+          background-color: var(--border-color);
+          border-radius: 6px;
         }
         
-        /* Responsive Layout */
+        /* Responsive adjustments */
         @media (max-width: 768px) {
           .dashboard {
-            grid-template-columns: 1fr;
-          }
-          
-          .sidebar {
-            display: none;
+            flex-direction: column;
           }
           
-          .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);
-          }
-          
-          .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;
+          .models-grid, .guide-steps {
+            max-height: 200px;
           }
         }
       </style>
     </head>
     <body>
-      <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="container">
+        <div class="header">
+          <h1>Cursor To OpenAI Server</h1>
           <div class="theme-toggle">
-            <span>Dark Mode</span>
-            <label class="toggle-switch">
+            Dark Mode
+            <label class="switch">
               <input type="checkbox" id="theme-toggle">
-              <span class="toggle-slider"></span>
+              <span class="slider"></span>
             </label>
           </div>
-        </aside>
+        </div>
         
-        <!-- 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 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>
             </div>
-            <div class="stat-card">
-              <div class="label">Authentication</div>
-              <div class="value">Cursor Cookie (user_...)</div>
+            
+            <div class="info-item">
+              <strong>Authentication</strong>
+              <span>Cursor Cookie (user_...)</span>
             </div>
-            <div class="stat-card">
-              <div class="label">Proxy Status</div>
-              <div class="value">${proxyConfig ? 'Enabled' : 'Disabled'}</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>
-            <div class="stat-card">
-              <div class="label">Available Models</div>
-              <div class="value" id="model-count">Loading...</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>
           </div>
           
-          <!-- 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>
+          <!-- 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>
             
-            <!-- 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 id="all-models" class="models-grid tab-content active">
+              Loading models...
             </div>
             
-            <!-- Models Tab -->
-            <div class="tab-content" id="models-tab">
-              <h2>Available Models</h2>
-              <div class="models-grid" id="all-models">
-                Loading...
+            <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...
+            </div>
+            
+            <div id="other-models" class="models-grid tab-content">
+              Loading other models...
+            </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>
               </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 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>
-            </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
+              <div class="guide-step">
+                <h4>3. 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>
               
-              <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', {
+              <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', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',
-    'Authorization': 'Bearer user_your_cookie_value'
+    'Authorization': 'Bearer user_your_cookie'
   },
   body: JSON.stringify({
     model: 'claude-3.7-sonnet',
     messages: [
-      { role: 'user', content: 'Hello, who are you?' }
+      { role: 'user', content: 'Hello' }
     ],
     temperature: 0.7
   })
 });
 
-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>
+const data = await response.json();</div>
               </div>
             </div>
           </div>
-        </main>
+        </div>
       </div>
       
       <script>
-        // Theme Toggle
+        // Theme toggling
         const themeToggle = document.getElementById('theme-toggle');
         
         // Check system preference
@@ -918,7 +634,7 @@ curl -X POST "${req.protocol}://${req.get('host')}/hf/v1/chat/completions" \\
           themeToggle.checked = true;
         }
         
-        // Toggle theme
+        // Toggle theme when switch is clicked
         themeToggle.addEventListener('change', function() {
           if (this.checked) {
             document.documentElement.setAttribute('data-theme', 'dark');
@@ -927,102 +643,53 @@ curl -X POST "${req.protocol}://${req.get('host')}/hf/v1/chat/completions" \\
           }
         });
         
-        // Mobile Menu Toggle
-        const menuToggle = document.getElementById('menu-toggle');
-        const sidebar = document.getElementById('sidebar');
-        
-        if (menuToggle) {
-          menuToggle.addEventListener('click', function() {
-            sidebar.classList.toggle('active');
-          });
-        }
+        // 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;
+          }
+        });
         
-        // Main Tab Navigation
-        const tabButtons = document.querySelectorAll('.tab-button');
-        const tabContents = document.querySelectorAll('.tab-content');
-        const navItems = document.querySelectorAll('.nav-item');
+        // Get and display endpoint URL
+        const url = new URL(window.location.href);
+        const link = url.protocol + '//' + url.host + '/hf/v1';
         
-        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');
+        const endpointElements = document.querySelectorAll('#endpoint-url, #endpoint-guide');
+        for (let i = 0; i < endpointElements.length; i++) {
+          endpointElements[i].textContent = link;
         }
         
-        // Set up tab click handlers
-        tabButtons.forEach(button => {
-          button.addEventListener('click', function() {
-            const tabId = this.getAttribute('data-tab');
-            setActiveTab(tabId);
-          });
-        });
+        // Model tabs
+        const modelTabs = document.querySelectorAll('[data-models-tab]');
+        const modelContents = document.querySelectorAll('.models-grid.tab-content');
         
-        // Set up nav item click handlers
-        navItems.forEach(item => {
-          item.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');
+            }
             
-            // Close mobile menu if open
-            if (window.innerWidth < 769) {
-              sidebar.classList.remove('active');
+            // Hide all tab contents
+            for (let j = 0; j < modelContents.length; j++) {
+              modelContents[j].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');
+            // Add active class to clicked 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';
-        
-        // 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;
+            // 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');
+            }
           });
         }
         
@@ -1030,101 +697,45 @@ curl -X POST "${req.protocol}://${req.get('host')}/hf/v1/chat/completions" \\
         fetch('/hf/v1/models')
           .then(response => response.json())
           .then(data => {
-            // 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);
-              }
+            // Sort models alphabetically
+            data.data.sort(function(a, b) {
+              return a.id.localeCompare(b.id);
             });
             
-            // All models
-            const allModelsContainer = document.getElementById('all-models');
-            allModelsContainer.innerHTML = '';
+            const allModelsEl = document.getElementById('all-models');
+            const claudeModelsEl = document.getElementById('claude-models');
+            const gptModelsEl = document.getElementById('gpt-models');
+            const otherModelsEl = document.getElementById('other-models');
             
-            // Sort models alphabetically
-            data.data.sort((a, b) => a.id.localeCompare(b.id));
+            // Clear loading messages
+            allModelsEl.innerHTML = '';
+            claudeModelsEl.innerHTML = '';
+            gptModelsEl.innerHTML = '';
+            otherModelsEl.innerHTML = '';
             
-            data.data.forEach(model => {
+            data.data.forEach(function(model) {
+              // Create model tag
               const modelEl = document.createElement('div');
               modelEl.className = 'model-tag';
               modelEl.textContent = model.id;
-              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);
+              // Add to all models
+              allModelsEl.appendChild(modelEl.cloneNode(true));
+              
+              // 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));
+              }
             });
           })
-          .catch(err => {
-            document.querySelectorAll('#all-models, #featured-models').forEach(el => {
-              el.textContent = 'Failed to load models: ' + err.message;
-            });
+          .catch(function(err) {
+            const allModelsEl = document.getElementById('all-models');
+            allModelsEl.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>