Update hf.js

hf.js

@@ -223,13 +223,11 @@ app.get('/', (req, res) => {
           --text-secondary: #666666;
           --border-color: #e0e0e0;
           --accent-color: #5D5CDE;
-          --accent-light: #7D7CED;
           --success-bg: #e1f5e1;
           --success-border: #c3e6cb;
           --warning-bg: #fff3cd;
           --warning-border: #ffeeba;
-          --code-bg: #f5f5f5;
-          --shadow-color: rgba(0,0,0,0.1);
+          --card-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
         
         [data-theme="dark"] {
@@ -240,58 +238,29 @@ app.get('/', (req, res) => {
           --text-secondary: #b0b0b0;
           --border-color: #444444;
           --accent-color: #7D7CED;
-          --accent-light: #8D8CF0;
           --success-bg: #1e3a1e;
           --success-border: #2a5a2a;
           --warning-bg: #3a3018;
           --warning-border: #5a4820;
-          --code-bg: #2d2d2d;
-          --shadow-color: rgba(0,0,0,0.3);
-        }
-        
-        * {
-          box-sizing: border-box;
-          margin: 0;
-          padding: 0;
+          --card-shadow: 0 2px 10px rgba(0,0,0,0.3);
         }
         
         body {
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          color: var(--text-primary);
-          background-color: var(--bg-primary);
-          max-width: 1200px;
+          max-width: 800px;
           margin: 0 auto;
           padding: 20px;
           line-height: 1.6;
-          transition: background-color 0.3s, color 0.3s;
-        }
-        
-        h1, h2, h3, h4 {
-          margin-top: 1.5rem;
-          margin-bottom: 1rem;
+          background-color: var(--bg-primary);
           color: var(--text-primary);
-        }
-        
-        p {
-          margin-bottom: 1rem;
-        }
-        
-        a {
-          color: var(--accent-color);
-          text-decoration: none;
-        }
-        
-        a:hover {
-          color: var(--accent-light);
-          text-decoration: underline;
+          transition: background-color 0.3s, color 0.3s;
         }
         
         .container {
           background: var(--bg-secondary);
           border-radius: 10px;
-          padding: 30px;
-          box-shadow: 0 4px 16px var(--shadow-color);
-          margin-bottom: 30px;
+          padding: 20px;
+          box-shadow: var(--card-shadow);
         }
         
         .header {
@@ -299,8 +268,6 @@ app.get('/', (req, res) => {
           justify-content: space-between;
           align-items: center;
           margin-bottom: 20px;
-          padding-bottom: 20px;
-          border-bottom: 1px solid var(--border-color);
         }
         
         .theme-toggle {
@@ -308,15 +275,12 @@ app.get('/', (req, res) => {
           align-items: center;
         }
         
-        .theme-toggle-label {
-          margin-right: 10px;
-        }
-        
         .switch {
           position: relative;
           display: inline-block;
           width: 50px;
           height: 24px;
+          margin-left: 10px;
         }
         
         .switch input {
@@ -349,32 +313,19 @@ app.get('/', (req, res) => {
           border-radius: 50%;
         }
         
-        input:checked + .slider {
-          background-color: var(--accent-light);
-        }
-        
         input:checked + .slider:before {
           transform: translateX(26px);
         }
         
         .info-item {
-          margin-bottom: 16px;
-          padding: 10px;
-          background: var(--bg-secondary);
-          border-radius: 6px;
-          border: 1px solid var(--border-color);
-        }
-        
-        .info-item strong {
-          display: block;
-          margin-bottom: 5px;
+          margin-bottom: 10px;
         }
         
         .status {
           background: ${proxyConfig ? 'var(--success-bg)' : 'var(--warning-bg)'};
-          padding: 15px;
-          border-radius: 8px;
-          margin: 20px 0;
+          padding: 10px;
+          border-radius: 5px;
+          margin-top: 20px;
           border: 1px solid ${proxyConfig ? 'var(--success-border)' : 'var(--warning-border)'};
         }
         
@@ -386,154 +337,39 @@ app.get('/', (req, res) => {
         
         .model-list {
           display: grid;
-          grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-          gap: 12px;
+          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+          gap: 10px;
           margin-top: 15px;
         }
         
         .model-item {
           background: var(--bg-tertiary);
-          padding: 10px 15px;
-          border-radius: 6px;
+          padding: 8px 12px;
+          border-radius: 4px;
           font-size: 0.9em;
-          transition: all 0.2s;
-          cursor: pointer;
-          border: 1px solid var(--border-color);
-        }
-        
-        .model-item:hover {
-          transform: translateY(-2px);
-          box-shadow: 0 4px 8px var(--shadow-color);
         }
         
         .guide-section {
-          margin-top: 40px;
-        }
-        
-        .step {
-          margin-bottom: 20px;
-          padding: 15px;
-          background: var(--bg-secondary);
-          border-radius: 8px;
-          border-left: 4px solid var(--accent-color);
-        }
-        
-        .step h3 {
-          margin-top: 0;
-        }
-        
-        .code-block {
-          background: var(--code-bg);
-          border-radius: 6px;
-          padding: 15px;
-          margin: 15px 0;
-          overflow-x: auto;
-          font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-          font-size: 14px;
-          line-height: 1.5;
-          border: 1px solid var(--border-color);
-        }
-        
-        .tab-container {
           margin-top: 20px;
+          border-top: 1px solid var(--border-color);
+          padding-top: 20px;
         }
         
-        .tabs {
-          display: flex;
-          border-bottom: 1px solid var(--border-color);
-        }
-        
-        .tab {
-          padding: 10px 20px;
-          cursor: pointer;
-          background: var(--bg-secondary);
-          border: 1px solid var(--border-color);
-          border-bottom: none;
-          border-radius: 6px 6px 0 0;
-          margin-right: 5px;
-        }
-        
-        .tab.active {
-          background: var(--accent-color);
-          color: white;
-          border-color: var(--accent-color);
-        }
-        
-        .tab-content {
-          display: none;
-          padding: 20px;
-          background: var(--bg-secondary);
-          border: 1px solid var(--border-color);
-          border-top: none;
-          border-radius: 0 0 6px 6px;
-        }
-        
-        .tab-content.active {
-          display: block;
-        }
-        
-        .api-tester {
-          margin-top: 30px;
-        }
-        
-        .form-group {
+        .guide-step {
           margin-bottom: 15px;
-        }
-        
-        .form-group label {
-          display: block;
-          margin-bottom: 5px;
-          font-weight: bold;
-        }
-        
-        .form-control {
-          width: 100%;
           padding: 10px;
-          border: 1px solid var(--border-color);
-          border-radius: 4px;
-          background: var(--bg-primary);
-          color: var(--text-primary);
-          font-size: 16px;
-        }
-        
-        textarea.form-control {
-          min-height: 100px;
-          font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-        }
-        
-        .btn {
-          padding: 10px 20px;
-          background: var(--accent-color);
-          color: white;
-          border: none;
-          border-radius: 4px;
-          cursor: pointer;
-          font-size: 16px;
-          transition: background 0.2s;
-        }
-        
-        .btn:hover {
-          background: var(--accent-light);
-        }
-        
-        .response-container {
-          margin-top: 20px;
-          padding: 15px;
           background: var(--bg-secondary);
-          border-radius: 6px;
-          border: 1px solid var(--border-color);
-          max-height: 300px;
-          overflow-y: auto;
+          border-radius: 5px;
+          border-left: 3px solid var(--accent-color);
         }
         
-        @media (max-width: 768px) {
-          .container {
-            padding: 20px;
-          }
-          
-          .model-list {
-            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-          }
+        .code-example {
+          background-color: var(--bg-tertiary);
+          padding: 10px;
+          border-radius: 5px;
+          overflow-x: auto;
+          font-family: monospace;
+          margin: 10px 0;
         }
       </style>
     </head>
@@ -542,7 +378,7 @@ app.get('/', (req, res) => {
         <div class="header">
           <h1>Cursor To OpenAI Server</h1>
           <div class="theme-toggle">
-            <span class="theme-toggle-label">Dark Mode</span>
+            Dark Mode
             <label class="switch">
               <input type="checkbox" id="theme-toggle">
               <span class="slider"></span>
@@ -569,252 +405,52 @@ app.get('/', (req, res) => {
           <h3>Supported Models</h3>
           <div id="model-list" class="model-list">Loading...</div>
         </div>
-      </div>
-      
-      <div class="container guide-section">
-        <h2>Complete Guide to Cursor API Integration</h2>
         
-        <div class="tab-container">
-          <div class="tabs">
-            <div class="tab active" data-tab="setup">Setup</div>
-            <div class="tab" data-tab="auth">Authentication</div>
-            <div class="tab" data-tab="usage">Usage Examples</div>
-            <div class="tab" data-tab="test">API Tester</div>
-          </div>
-          
-          <div class="tab-content active" id="setup">
-            <h3>Setting Up Cursor API Connection</h3>
-            
-            <div class="step">
-              <h3>Step 1: Install the Required Dependencies</h3>
-              <p>Make sure you have Node.js installed, then install the necessary packages:</p>
-              <div class="code-block">
-                npm install axios
-              </div>
-            </div>
-            
-            <div class="step">
-              <h3>Step 2: Configure Your Environment</h3>
-              <p>Set up your environment with the Cursor API endpoint:</p>
-              <div class="code-block">
-                const CURSOR_API_URL = "http://localhost:7860/hf/v1";  // Or your server URL
-              </div>
-            </div>
-            
-            <div class="step">
-              <h3>Step 3: Create a Helper Function</h3>
-              <p>Create a helper function to interact with the API:</p>
-              <div class="code-block">
-                const axios = require('axios');
-
-async function queryCursorAPI(model, messages, options = {}) {
-  try {
-    const response = await axios.post(`${CURSOR_API_URL}/chat/completions`, {
-      model: model,
-      messages: messages,
-      temperature: options.temperature || 0.7,
-      max_tokens: options.max_tokens,
-      stream: options.stream || false
-    }, {
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${YOUR_API_KEY}` // Your Cursor cookie
-      }
-    });
-    
-    return response.data;
-  } catch (error) {
-    console.error('Error querying Cursor API:', error.response?.data || error.message);
-    throw error;
-  }
-}
-              </div>
-            </div>
-          </div>
+        <div class="guide-section">
+          <h3>How to Connect to Cursor API</h3>
           
-          <div class="tab-content" id="auth">
-            <h3>Authentication with Cursor API</h3>
-            
-            <div class="step">
-              <h3>Step 1: Obtain Your Cursor Cookie</h3>
-              <p>To authenticate with the Cursor API, you need to extract your Cursor cookie:</p>
-              <ol>
-                <li>Log in to <a href="https://cursor.so" target="_blank">Cursor.so</a></li>
-                <li>Open Developer Tools (F12 or Right-click → Inspect)</li>
-                <li>Go to the Application tab</li>
-                <li>Under Storage, select Cookies</li>
-                <li>Find the cookie that starts with <code>user_...</code></li>
-                <li>Copy this value - this is your API key</li>
-              </ol>
-            </div>
-            
-            <div class="step">
-              <h3>Step 2: Use the Cookie as Your API Key</h3>
-              <p>Include your Cursor cookie in the Authorization header:</p>
-              <div class="code-block">
-                headers: {
-  'Content-Type': 'application/json',
-  'Authorization': 'Bearer user_your_cookie_value_here'
-}
-              </div>
-              <p class="warning">Important: Treat your Cursor cookie as a secret. Never share it publicly or include it in client-side code.</p>
-            </div>
-            
-            <div class="step">
-              <h3>Step 3: Test Authentication</h3>
-              <p>Verify your authentication is working:</p>
-              <div class="code-block">
-                async function testAuth() {
-  try {
-    const response = await queryCursorAPI('claude-3.5-sonnet', [
-      { role: 'user', content: 'Hello, can you hear me?' }
-    ]);
-    console.log('Authentication successful!', response.choices[0].message.content);
-  } catch (error) {
-    console.error('Authentication failed:', error);
-  }
-}
-
-testAuth();
-              </div>
-            </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>
           
-          <div class="tab-content" id="usage">
-            <h3>Cursor API Usage Examples</h3>
-            
-            <div class="step">
-              <h3>Basic Text Completion</h3>
-              <div class="code-block">
-                const messages = [
-  { role: 'system', content: 'You are a helpful assistant.' },
-  { role: 'user', content: 'What is the capital of France?' }
-];
-
-const response = await queryCursorAPI('claude-3.5-sonnet', messages);
-console.log(response.choices[0].message.content);
-              </div>
-            </div>
-            
-            <div class="step">
-              <h3>Streaming Response</h3>
-              <div class="code-block">
-                const axios = require('axios');
-
-async function streamResponse(model, messages) {
-  try {
-    const response = await axios.post(`${CURSOR_API_URL}/chat/completions`, {
-      model: model,
-      messages: messages,
-      stream: true
-    }, {
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${YOUR_API_KEY}`
-      },
-      responseType: 'stream'
-    });
-
-    response.data.on('data', chunk => {
-      const lines = chunk.toString().split('\\n').filter(line => line.trim() !== '');
-      
-      for (const line of lines) {
-        if (line.includes('[DONE]')) return;
-        
-        if (line.startsWith('data:')) {
-          const jsonStr = line.replace('data:', '').trim();
-          try {
-            const json = JSON.parse(jsonStr);
-            if (json.choices?.[0]?.delta?.content) {
-              process.stdout.write(json.choices[0].delta.content);
-            }
-          } catch (e) {
-            // Skip invalid JSON
-          }
-        }
-      }
-    });
-
-  } catch (error) {
-    console.error('Streaming error:', error);
-  }
-}
-
-// Usage
-streamResponse('gpt-4o', [{ role: 'user', content: 'Write a short story about a robot.' }]);
-              </div>
-            </div>
-            
-            <div class="step">
-              <h3>Using Different Models</h3>
-              <p>You can use any model from the supported models list:</p>
-              <div class="code-block">
-                // Using Claude 3.7 Sonnet
-const claudeResponse = await queryCursorAPI('claude-3.7-sonnet', [
-  { role: 'user', content: 'Explain quantum computing briefly.' }
-]);
-
-// Using GPT-4o
-const gptResponse = await queryCursorAPI('gpt-4o', [
-  { role: 'user', content: 'What are the benefits of clean energy?' }
-]);
-
-// Using the "thinking" variant for complex reasoning
-const thinkingResponse = await queryCursorAPI('claude-3.7-sonnet-thinking', [
-  { role: 'user', content: 'Solve this math problem: If a² + b² = 25 and ab = 12, what is a + b?' }
-]);
-              </div>
-            </div>
-            
-            <div class="step">
-              <h3>Setting Custom Parameters</h3>
-              <div class="code-block">
-                const response = await queryCursorAPI('gpt-4', [
-  { role: 'user', content: 'Generate a creative story idea.' }
-], {
-  temperature: 0.9,  // Higher creativity
-  max_tokens: 500    // Limit response length
-});
-              </div>
-            </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>
           </div>
           
-          <div class="tab-content" id="test">
-            <h3>Cursor API Tester</h3>
-            <p>Use this tool to test API calls directly from the browser:</p>
-            
-            <div class="api-tester">
-              <div class="form-group">
-                <label for="api-key">API Key (Cursor Cookie)</label>
-                <input type="password" id="api-key" class="form-control" placeholder="user_...">
-              </div>
-              
-              <div class="form-group">
-                <label for="model-select">Model</label>
-                <select id="model-select" class="form-control">
-                  <option value="claude-3.7-sonnet">claude-3.7-sonnet</option>
-                  <option value="gpt-4o">gpt-4o</option>
-                  <option value="claude-3.5-sonnet">claude-3.5-sonnet</option>
-                  <option value="gpt-4">gpt-4</option>
-                </select>
-              </div>
-              
-              <div class="form-group">
-                <label for="prompt-input">Prompt</label>
-                <textarea id="prompt-input" class="form-control" placeholder="Enter your prompt here...">Hello, can you introduce yourself?</textarea>
-              </div>
-              
-              <div class="form-group">
-                <label for="temperature">Temperature</label>
-                <input type="range" id="temperature" class="form-control" min="0" max="1" step="0.1" value="0.7">
-                <span id="temperature-value">0.7</span>
-              </div>
-              
-              <button id="submit-api" class="btn">Send Request</button>
-              
-              <div class="response-container">
-                <pre id="api-response">Response will appear here...</pre>
-              </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', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'Authorization': 'Bearer your_cursor_cookie'
+  },
+  body: JSON.stringify({
+    model: 'claude-3.7-sonnet',
+    messages: [
+      { role: 'user', content: 'Hello, who are you?' }
+    ],
+    temperature: 0.7
+  })
+})
+.then(response => response.json())
+.then(data => console.log(data));
             </div>
           </div>
         </div>
@@ -824,9 +460,8 @@ const thinkingResponse = await queryCursorAPI('claude-3.7-sonnet-thinking', [
         // Theme toggling
         const themeToggle = document.getElementById('theme-toggle');
         
-        // Check for saved theme preference or system preference
-        if (localStorage.getItem('theme') === 'dark' || 
-            (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        // Check system preference
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
           document.documentElement.setAttribute('data-theme', 'dark');
           themeToggle.checked = true;
         }
@@ -835,10 +470,19 @@ const thinkingResponse = await queryCursorAPI('claude-3.7-sonnet-thinking', [
         themeToggle.addEventListener('change', function() {
           if (this.checked) {
             document.documentElement.setAttribute('data-theme', 'dark');
-            localStorage.setItem('theme', 'dark');
           } else {
-            document.documentElement.setAttribute('data-theme', 'light');
-            localStorage.setItem('theme', 'light');
+            document.documentElement.removeAttribute('data-theme');
+          }
+        });
+        
+        // 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;
           }
         });
         
@@ -847,6 +491,12 @@ const thinkingResponse = await queryCursorAPI('claude-3.7-sonnet-thinking', [
         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 => {
+          el.textContent = link;
+        });
+        
         // Load models list
         fetch('/hf/v1/models')
           .then(response => response.json())
@@ -854,89 +504,16 @@ const thinkingResponse = await queryCursorAPI('claude-3.7-sonnet-thinking', [
             const modelListEl = document.getElementById('model-list');
             modelListEl.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.textContent = model.id;
-              modelEl.addEventListener('click', () => {
-                if (document.getElementById('model-select')) {
-                  document.getElementById('model-select').value = model.id;
-                }
-              });
               modelListEl.appendChild(modelEl);
-              
-              // Also add to dropdown if it exists
-              if (document.getElementById('model-select')) {
-                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;
           });
-        
-        // Tab switching
-        const tabs = document.querySelectorAll('.tab');
-        tabs.forEach(tab => {
-          tab.addEventListener('click', () => {
-            // Remove active class from all tabs
-            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
-            
-            // Add active class to clicked tab
-            tab.classList.add('active');
-            document.getElementById(tab.dataset.tab).classList.add('active');
-          });
-        });
-        
-        // Temperature slider
-        const temperatureSlider = document.getElementById('temperature');
-        const temperatureValue = document.getElementById('temperature-value');
-        if (temperatureSlider) {
-          temperatureSlider.addEventListener('input', () => {
-            temperatureValue.textContent = temperatureSlider.value;
-          });
-        }
-        
-        // API test functionality
-        const submitApiBtn = document.getElementById('submit-api');
-        if (submitApiBtn) {
-          submitApiBtn.addEventListener('click', async () => {
-            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>