hf.js

const express = require('express');
const morgan = require('morgan');
const { createProxyMiddleware } = require('http-proxy-middleware');
const url = require('url');
const app = express();

app.use(morgan('dev'));

// Get proxy configuration from environment variables
const proxyUrl = process.env.PROXY || '';
console.log(`Proxy configuration: ${proxyUrl ? 'Configured' : 'Not configured'}`);

// Parse proxy URL
let proxyConfig = null;
if (proxyUrl) {
  try {
    const parsedUrl = url.parse(proxyUrl);
    proxyConfig = {
      host: parsedUrl.hostname,
      port: parsedUrl.port || 80,
      auth: parsedUrl.auth ? {
        username: parsedUrl.auth.split(':')[0],
        password: parsedUrl.auth.split(':')[1]
      } : undefined
    };
    
    // Print proxy configuration (with masked password)
    const maskedConfig = {
      ...proxyConfig,
      auth: proxyConfig.auth ? {
        username: proxyConfig.auth.username,
        password: '******'
      } : undefined
    };
    console.log('Using proxy:', JSON.stringify(maskedConfig));
  } catch (error) {
    console.error('Failed to parse proxy URL:', error.message);
  }
}

// Add models list API
app.get('/hf/v1/models', (req, res) => {
  const models = {
    "object": "list",
    "data": [
      {
        "id": "claude-3.5-sonnet",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "gpt-4",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "gpt-4o",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "claude-3-opus",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "gpt-3.5-turbo",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "gpt-4-turbo-2024-04-09",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "gpt-4o-128k",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "gemini-1.5-flash-500k",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "claude-3-haiku-200k",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "claude-3-5-sonnet-200k",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "claude-3-5-sonnet-20241022",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "gpt-4o-mini",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "o1-mini",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "o1-preview",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "o1",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "claude-3.5-haiku",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "gemini-exp-1206",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "gemini-2.0-flash-thinking-exp",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "gemini-2.0-flash-exp",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "deepseek-v3",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "deepseek-r1",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      // New models
      {
        "id": "claude-3.7-sonnet",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      },
      {
        "id": "claude-3.7-sonnet-thinking",
        "object": "model",
        "created": 1706745938,
        "owned_by": "cursor"
      }
    ]
  };
  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);
  },
  onProxyReq: (proxyReq, req, res) => {
    console.log(`Proxying request to chat completions ${proxyConfig ? 'using proxy' : 'directly'}`);
  },
  onProxyRes: (proxyRes, req, res) => {
    console.log(`Received response with status: ${proxyRes.statusCode}`);
  }
}));

app.get('/', (req, res) => {
  const htmlContent = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <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;
          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: var(--bg-secondary);
          border-radius: 10px;
          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: 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 ? '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 var(--border-color);
          padding-top: 20px;
        }
        
        .model-list {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
          gap: 12px;
          margin-top: 15px;
        }
        
        .model-item {
          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">
        <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>Chat Source:</strong> Custom (OpenAI Compatible)
        </div>
        <div class="info-item">
          <strong>Custom Endpoint (Base URL):</strong> <span id="endpoint-url"></span>
        </div>
        <div class="info-item">
          <strong>Custom API Key:</strong> [Cursor Cookie in format user_...]
        </div>
        
        <div class="status">
          <strong>Proxy Status:</strong> ${proxyConfig ? 'Enabled' : 'Disabled'}
          ${proxyConfig ? `<p>Proxy Server: ${proxyConfig.host}:${proxyConfig.port}</p>` : ''}
        </div>
        
        <div class="models-container">
          <h3>Supported Models</h3>
          <div id="model-list" class="model-list">Loading...</div>
        </div>
      </div>
      
      <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 = '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>
  `;
  res.send(htmlContent);
});

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'}`);
});