Update hf.js

hf.js

@@ -6,11 +6,11 @@ const app = express();
 
 app.use(morgan('dev'));
 
-// 从环境变量获取代理配置
+// Get proxy configuration from environment variables
 const proxyUrl = process.env.PROXY || '';
-console.log(`Proxy configuration: ${proxyUrl ? '已配置' : '未配置'}`);
+console.log(`Proxy configuration: ${proxyUrl ? 'Configured' : 'Not configured'}`);
 
-// 解析代理URL
+// Parse proxy URL
 let proxyConfig = null;
 if (proxyUrl) {
   try {
@@ -24,7 +24,7 @@ if (proxyUrl) {
       } : undefined
     };
     
-    // 打印代理配置（安全处理密码）
+    // Print proxy configuration (with masked password)
     const maskedConfig = {
       ...proxyConfig,
       auth: proxyConfig.auth ? {
@@ -38,7 +38,7 @@ if (proxyUrl) {
   }
 }
 
-// 添加模型列表API
+// Add models list API
 app.get('/hf/v1/models', (req, res) => {
   const models = {
     "object": "list",
@@ -169,7 +169,7 @@ app.get('/hf/v1/models', (req, res) => {
         "created": 1706745938,
         "owned_by": "cursor"
       },
-      // 新增模型
+      // New models
       {
         "id": "claude-3.7-sonnet",
         "object": "model",
@@ -187,13 +187,13 @@ app.get('/hf/v1/models', (req, res) => {
   res.json(models);
 });
 
-// 配置代理中间件
+// Configure proxy middleware
 app.use('/hf/v1/chat/completions', createProxyMiddleware({
   target: 'http://localhost:3010/v1/chat/completions',
   changeOrigin: true,
-  // 添加代理配置
+  // Add proxy configuration
   proxy: proxyConfig,
-  // 增加错误处理
+  // Add error handling
   onError: (err, req, res) => {
     console.error('Proxy error:', err);
     res.status(500).send('Proxy error occurred: ' + err.message);
@@ -215,92 +215,728 @@ app.get('/', (req, res) => {
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Cursor To OpenAI</title>
       <style>
+        :root {
+          --bg-primary: #ffffff;
+          --bg-secondary: #f9f9f9;
+          --bg-tertiary: #f0f0f0;
+          --text-primary: #333333;
+          --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);
+        }
+        
+        [data-theme="dark"] {
+          --bg-primary: #181818;
+          --bg-secondary: #222222;
+          --bg-tertiary: #2a2a2a;
+          --text-primary: #e0e0e0;
+          --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;
+        }
+        
         body {
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          max-width: 800px;
+          color: var(--text-primary);
+          background-color: var(--bg-primary);
+          max-width: 1200px;
           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;
+          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;
+        }
+        
         .container {
-          background: #f9f9f9;
+          background: var(--bg-secondary);
           border-radius: 10px;
-          padding: 20px;
-          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+          padding: 30px;
+          box-shadow: 0 4px 16px var(--shadow-color);
+          margin-bottom: 30px;
+        }
+        
+        .header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 20px;
+          padding-bottom: 20px;
+          border-bottom: 1px solid var(--border-color);
+        }
+        
+        .theme-toggle {
+          display: flex;
+          align-items: center;
         }
+        
+        .theme-toggle-label {
+          margin-right: 10px;
+        }
+        
+        .switch {
+          position: relative;
+          display: inline-block;
+          width: 50px;
+          height: 24px;
+        }
+        
+        .switch input {
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+        
+        .slider {
+          position: absolute;
+          cursor: pointer;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: var(--bg-tertiary);
+          transition: .4s;
+          border-radius: 24px;
+        }
+        
+        .slider:before {
+          position: absolute;
+          content: "";
+          height: 16px;
+          width: 16px;
+          left: 4px;
+          bottom: 4px;
+          background-color: var(--accent-color);
+          transition: .4s;
+          border-radius: 50%;
+        }
+        
+        input:checked + .slider {
+          background-color: var(--accent-light);
+        }
+        
+        input:checked + .slider:before {
+          transform: translateX(26px);
+        }
+        
         .info-item {
-          margin-bottom: 10px;
+          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;
         }
+        
         .status {
-          background: ${proxyConfig ? '#e1f5e1' : '#fff3cd'};
-          padding: 10px;
-          border-radius: 5px;
-          margin-top: 20px;
-          border: 1px solid ${proxyConfig ? '#c3e6cb' : '#ffeeba'};
+          background: ${proxyConfig ? 'var(--success-bg)' : 'var(--warning-bg)'};
+          padding: 15px;
+          border-radius: 8px;
+          margin: 20px 0;
+          border: 1px solid ${proxyConfig ? 'var(--success-border)' : 'var(--warning-border)'};
         }
+        
         .models-container {
           margin-top: 20px;
-          border-top: 1px solid #eee;
+          border-top: 1px solid var(--border-color);
           padding-top: 20px;
         }
+        
         .model-list {
           display: grid;
-          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-          gap: 10px;
+          grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+          gap: 12px;
           margin-top: 15px;
         }
+        
         .model-item {
-          background: #f0f0f0;
-          padding: 8px 12px;
-          border-radius: 4px;
+          background: var(--bg-tertiary);
+          padding: 10px 15px;
+          border-radius: 6px;
           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;
+        }
+        
+        .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 {
+          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;
+        }
+        
+        @media (max-width: 768px) {
+          .container {
+            padding: 20px;
+          }
+          
+          .model-list {
+            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+          }
         }
       </style>
     </head>
     <body>
       <div class="container">
-        <h1>Cursor To OpenAI Server</h1>
+        <div class="header">
+          <h1>Cursor To OpenAI Server</h1>
+          <div class="theme-toggle">
+            <span class="theme-toggle-label">Dark Mode</span>
+            <label class="switch">
+              <input type="checkbox" id="theme-toggle">
+              <span class="slider"></span>
+            </label>
+          </div>
+        </div>
+        
         <div class="info-item">
-          <strong>聊天来源:</strong> 自定义(兼容 OpenAI)
+          <strong>Chat Source:</strong> Custom (OpenAI Compatible)
         </div>
         <div class="info-item">
-          <strong>自定义端点(基本URL)：</strong><span id="endpoint-url"></span>
+          <strong>Custom Endpoint (Base URL):</strong> <span id="endpoint-url"></span>
         </div>
         <div class="info-item">
-          <strong>自定义API密钥：</strong>[抓取的Cursor Cookie，格式为user_...]
+          <strong>Custom API Key:</strong> [Cursor Cookie in format user_...]
         </div>
+        
         <div class="status">
-          <strong>代理状态：</strong> ${proxyConfig ? '已启用' : '未启用'}
-          ${proxyConfig ? `<p>代理服务器: ${proxyConfig.host}:${proxyConfig.port}</p>` : ''}
+          <strong>Proxy Status:</strong> ${proxyConfig ? 'Enabled' : 'Disabled'}
+          ${proxyConfig ? `<p>Proxy Server: ${proxyConfig.host}:${proxyConfig.port}</p>` : ''}
         </div>
         
         <div class="models-container">
-          <h3>支持的模型</h3>
-          <div id="model-list" class="model-list">加载中...</div>
+          <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="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>
+          
+          <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>
+          
+          <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>
+          </div>
+        </div>
+      </div>
+      
       <script>
+        // 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)) {
+          document.documentElement.setAttribute('data-theme', 'dark');
+          themeToggle.checked = true;
+        }
+        
+        // Toggle theme when switch is clicked
+        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');
+          }
+        });
+        
+        // Get and display endpoint URL
         const url = new URL(window.location.href);
         const link = url.protocol + '//' + url.host + '/hf/v1';
         document.getElementById('endpoint-url').textContent = link;
         
-        // 加载模型列表
+        // Load models list
         fetch('/hf/v1/models')
           .then(response => response.json())
           .then(data => {
             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 = '加载模型失败: ' + err.message;
+            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>
@@ -312,4 +948,4 @@ const port = process.env.HF_PORT || 7860;
 app.listen(port, () => {
   console.log(`HF Proxy server is running at PORT: ${port}`);
   console.log(`Proxy status: ${proxyConfig ? 'Enabled' : 'Disabled'}`);
-});
+});