| 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')); |
|
|
| |
| const proxyUrl = process.env.PROXY || ''; |
| console.log(`Proxy configuration: ${proxyUrl ? 'Configured' : 'Not configured'}`); |
| console.log(`Raw proxy URL: ${proxyUrl}`); |
|
|
| |
| 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 |
| }; |
| |
| |
| console.log('Using proxy with EXACT credentials:', JSON.stringify(proxyConfig)); |
| |
| if (proxyConfig.auth) { |
| console.log('EXACT AUTH DETAILS:'); |
| console.log('Username:', proxyConfig.auth.username); |
| console.log('Password:', proxyConfig.auth.password); |
| } |
| |
| } catch (error) { |
| console.error('Failed to parse proxy URL:', error.message); |
| } |
| } |
|
|
| |
| 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" |
| }, |
| |
| { |
| "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); |
| }); |
|
|
| |
| app.use('/hf/v1/chat/completions', createProxyMiddleware({ |
| target: 'http://localhost:3010/v1/chat/completions', |
| changeOrigin: true, |
| |
| proxy: proxyConfig, |
| |
| 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> |
| /* Core Variables */ |
| :root { |
| --bg-primary: #ffffff; |
| --bg-secondary: #f5f7fa; |
| --bg-tertiary: #edf0f7; |
| --text-primary: #2c3e50; |
| --text-secondary: #596877; |
| --border-color: #dce1e8; |
| --accent-color: #5D5CDE; |
| --accent-hover: #4a49c8; |
| --success-bg: #e1f5e1; |
| --success-border: #c3e6cb; |
| --warning-bg: #fff3cd; |
| --warning-border: #ffeeba; |
| --card-shadow: 0 2px 5px rgba(0,0,0,0.05); |
| --hover-shadow: 0 5px 15px rgba(0,0,0,0.08); |
| --transition: all 0.2s ease-in-out; |
| } |
| |
| [data-theme="dark"] { |
| --bg-primary: #121821; |
| --bg-secondary: #1a2332; |
| --bg-tertiary: #243044; |
| --text-primary: #e0e6ed; |
| --text-secondary: #9ba9b9; |
| --border-color: #324156; |
| --accent-color: #7D7CED; |
| --accent-hover: #9795f0; |
| --success-bg: #1e3a1e; |
| --success-border: #2a5a2a; |
| --warning-bg: #3a3018; |
| --warning-border: #5a4820; |
| --card-shadow: 0 2px 5px rgba(0,0,0,0.2); |
| --hover-shadow: 0 5px 15px rgba(0,0,0,0.3); |
| } |
| |
| /* Reset & Base Styles */ |
| *, *::before, *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| 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; |
| 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; |
| } |
| |
| /* Sidebar */ |
| .sidebar { |
| background: var(--bg-secondary); |
| padding: 1rem; |
| border-right: 1px solid var(--border-color); |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding-bottom: 1rem; |
| margin-bottom: 1rem; |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| .nav-item { |
| display: flex; |
| align-items: center; |
| padding: 0.5rem 0.75rem; |
| margin-bottom: 0.5rem; |
| border-radius: 6px; |
| cursor: pointer; |
| transition: var(--transition); |
| color: var(--text-secondary); |
| } |
| |
| .nav-item:hover, .nav-item.active { |
| background: var(--bg-tertiary); |
| color: var(--accent-color); |
| } |
| |
| .nav-item i { |
| margin-right: 8px; |
| width: 20px; |
| text-align: center; |
| } |
| |
| /* Main Content */ |
| .main-content { |
| padding: 1rem; |
| overflow-y: auto; |
| height: 100vh; |
| } |
| |
| /* Stats Grid */ |
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 1rem; |
| margin-bottom: 1rem; |
| } |
| |
| .stat-card { |
| background: var(--bg-secondary); |
| border-radius: 8px; |
| padding: 1rem; |
| box-shadow: var(--card-shadow); |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .stat-card .label { |
| color: var(--text-secondary); |
| font-size: 0.875rem; |
| margin-bottom: 0.25rem; |
| } |
| |
| .stat-card .value { |
| font-size: 1.25rem; |
| font-weight: 600; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| /* Tabs */ |
| .tabs-container { |
| margin-top: 1rem; |
| } |
| |
| .tabs-header { |
| display: flex; |
| border-bottom: 1px solid var(--border-color); |
| margin-bottom: 1rem; |
| } |
| |
| .tab-button { |
| padding: 0.75rem 1rem; |
| background: none; |
| border: none; |
| border-bottom: 2px solid transparent; |
| color: var(--text-secondary); |
| cursor: pointer; |
| font-weight: 500; |
| transition: var(--transition); |
| } |
| |
| .tab-button.active { |
| color: var(--accent-color); |
| border-bottom-color: var(--accent-color); |
| } |
| |
| .tab-content { |
| display: none; |
| } |
| |
| .tab-content.active { |
| display: block; |
| } |
| |
| /* Models Wall */ |
| .models-container { |
| margin-top: 1rem; |
| } |
| |
| .models-grid { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.5rem; |
| max-height: 150px; |
| overflow-y: auto; |
| padding: 0.5rem; |
| background: var(--bg-tertiary); |
| border-radius: 8px; |
| } |
| |
| .model-tag { |
| background: var(--bg-secondary); |
| color: var(--text-primary); |
| border: 1px solid var(--border-color); |
| border-radius: 15px; |
| padding: 0.25rem 0.75rem; |
| font-size: 0.8rem; |
| white-space: nowrap; |
| transition: var(--transition); |
| } |
| |
| .model-tag:hover { |
| background: var(--accent-color); |
| color: white; |
| border-color: var(--accent-color); |
| transform: translateY(-2px); |
| box-shadow: var(--hover-shadow); |
| } |
| |
| /* Setup Guide */ |
| .guide-container { |
| padding: 1rem; |
| background: var(--bg-secondary); |
| border-radius: 8px; |
| } |
| |
| .guide-steps { |
| display: flex; |
| margin-top: 1rem; |
| overflow-x: auto; |
| gap: 1rem; |
| padding-bottom: 0.5rem; |
| } |
| |
| .guide-step { |
| min-width: 250px; |
| padding: 1rem; |
| background: var(--bg-tertiary); |
| border-radius: 8px; |
| border-left: 3px solid var(--accent-color); |
| flex: 1; |
| } |
| |
| .guide-step h4 { |
| margin-bottom: 0.5rem; |
| display: flex; |
| align-items: center; |
| } |
| |
| .guide-step h4 .step-number { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 24px; |
| height: 24px; |
| background: var(--accent-color); |
| color: white; |
| border-radius: 50%; |
| margin-right: 0.5rem; |
| font-size: 0.8rem; |
| } |
| |
| .code-example { |
| margin-top: 0.75rem; |
| background: var(--bg-primary); |
| padding: 0.75rem; |
| border-radius: 6px; |
| font-family: monospace; |
| font-size: 0.8rem; |
| overflow-x: auto; |
| position: relative; |
| } |
| |
| .copy-btn { |
| position: absolute; |
| top: 5px; |
| right: 5px; |
| background: var(--bg-secondary); |
| border: none; |
| border-radius: 4px; |
| width: 28px; |
| height: 28px; |
| 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; |
| } |
| |
| .toggle-switch input { |
| opacity: 0; |
| width: 0; |
| height: 0; |
| } |
| |
| .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; |
| } |
| |
| .toggle-slider:before { |
| position: absolute; |
| content: ""; |
| height: 18px; |
| width: 18px; |
| left: 3px; |
| bottom: 3px; |
| background-color: var(--accent-color); |
| transition: var(--transition); |
| border-radius: 50%; |
| } |
| |
| input:checked + .toggle-slider { |
| background-color: var(--bg-tertiary); |
| } |
| |
| input:checked + .toggle-slider:before { |
| transform: translateX(22px); |
| } |
| |
| /* Responsive Layout */ |
| @media (max-width: 768px) { |
| .dashboard { |
| grid-template-columns: 1fr; |
| } |
| |
| .sidebar { |
| display: none; |
| } |
| |
| .sidebar.active { |
| display: flex; |
| position: fixed; |
| width: 250px; |
| height: 100vh; |
| z-index: 1000; |
| } |
| |
| .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; |
| } |
| } |
| </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="theme-toggle"> |
| <span>Dark Mode</span> |
| <label class="toggle-switch"> |
| <input type="checkbox" id="theme-toggle"> |
| <span class="toggle-slider"></span> |
| </label> |
| </div> |
| </aside> |
| |
| <!-- Main Content --> |
| <main class="main-content"> |
| <!-- Stats Cards --> |
| <div class="stats-grid"> |
| <div class="stat-card"> |
| <div class="label">API Endpoint</div> |
| <div class="value" id="endpoint-url">Loading...</div> |
| </div> |
| <div class="stat-card"> |
| <div class="label">Authentication</div> |
| <div class="value">Cursor Cookie (user_...)</div> |
| </div> |
| <div class="stat-card"> |
| <div class="label">Proxy Status</div> |
| <div class="value">${proxyConfig ? 'Enabled' : 'Disabled'}</div> |
| </div> |
| <div class="stat-card"> |
| <div class="label">Available Models</div> |
| <div class="value" id="model-count">Loading...</div> |
| </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> |
| </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> |
| |
| <!-- Models Tab --> |
| <div class="tab-content" id="models-tab"> |
| <h2>Available Models</h2> |
| <div class="models-grid" id="all-models"> |
| Loading... |
| </div> |
| |
| <div class="models-container"> |
| <h3>Model Categories</h3> |
| <div class="stats-grid"> |
| <div class="stat-card"> |
| <div class="label">Claude Models</div> |
| <div class="value" id="claude-count">-</div> |
| </div> |
| <div class="stat-card"> |
| <div class="label">GPT Models</div> |
| <div class="value" id="gpt-count">-</div> |
| </div> |
| <div class="stat-card"> |
| <div class="label">Gemini Models</div> |
| <div class="value" id="gemini-count">-</div> |
| </div> |
| <div class="stat-card"> |
| <div class="label">Other Models</div> |
| <div class="value" id="other-count">-</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Integration Guide Tab --> |
| <div class="tab-content" id="guide-tab"> |
| <h2>Integration Guide</h2> |
| |
| <div class="guide-steps"> |
| <div class="guide-step"> |
| <h4><span class="step-number">1</span>Authentication</h4> |
| <p>To authenticate with the Cursor API:</p> |
| <ol style="margin-left: 1rem; margin-top: 0.5rem;"> |
| <li>Log in to <a href="https://cursor.so" target="_blank">Cursor.so</a></li> |
| <li>Open Developer Tools (F12)</li> |
| <li>Go to Application → Cookies</li> |
| <li>Find cookie with name starting with "user_"</li> |
| <li>Use this value as your API key</li> |
| </ol> |
| </div> |
| |
| <div class="guide-step"> |
| <h4><span class="step-number">2</span>API Configuration</h4> |
| <p>Set up your API client with:</p> |
| <ul style="margin-left: 1rem; margin-top: 0.5rem;"> |
| <li>Base URL: <span id="endpoint-guide">Loading...</span></li> |
| <li>Headers:</li> |
| <div class="code-example"> |
| Content-Type: application/json |
| Authorization: Bearer user_your_cookie_value |
| </div> |
| </ul> |
| </div> |
| |
| <div class="guide-step"> |
| <h4><span class="step-number">3</span>Making Requests</h4> |
| <p>Send chat completion requests:</p> |
| <div class="code-example"> |
| POST /chat/completions |
| { |
| "model": "claude-3.7-sonnet", |
| "messages": [ |
| {"role": "user", "content": "Hello!"} |
| ], |
| "temperature": 0.7 |
| } |
| <button class="copy-btn" title="Copy to clipboard">📋</button> |
| </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', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| 'Authorization': 'Bearer user_your_cookie_value' |
| }, |
| body: JSON.stringify({ |
| model: 'claude-3.7-sonnet', |
| messages: [ |
| { role: 'user', content: 'Hello, who are you?' } |
| ], |
| 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> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| |
| <script> |
| // Theme Toggle |
| const themeToggle = document.getElementById('theme-toggle'); |
| |
| // Check system preference |
| if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { |
| document.documentElement.setAttribute('data-theme', 'dark'); |
| themeToggle.checked = true; |
| } |
| |
| // Toggle theme |
| themeToggle.addEventListener('change', function() { |
| if (this.checked) { |
| document.documentElement.setAttribute('data-theme', 'dark'); |
| } else { |
| document.documentElement.removeAttribute('data-theme'); |
| } |
| }); |
| |
| // Mobile Menu Toggle |
| const menuToggle = document.getElementById('menu-toggle'); |
| const sidebar = document.getElementById('sidebar'); |
| |
| if (menuToggle) { |
| menuToggle.addEventListener('click', function() { |
| sidebar.classList.toggle('active'); |
| }); |
| } |
| |
| // Main Tab Navigation |
| const tabButtons = document.querySelectorAll('.tab-button'); |
| const tabContents = document.querySelectorAll('.tab-content'); |
| const navItems = document.querySelectorAll('.nav-item'); |
| |
| function setActiveTab(tabId) { |
| // Deactivate all tabs |
| tabButtons.forEach(button => button.classList.remove('active')); |
| tabContents.forEach(content => content.classList.remove('active')); |
| navItems.forEach(item => item.classList.remove('active')); |
| |
| // Activate the selected tab |
| const tabButton = document.querySelector('.tab-button[data-tab="' + tabId + '"]'); |
| if (tabButton) { |
| tabButton.classList.add('active'); |
| } |
| |
| const tabContent = document.getElementById(tabId + '-tab'); |
| if (tabContent) { |
| tabContent.classList.add('active'); |
| } |
| |
| const navItem = document.querySelector('.nav-item[data-tab="' + tabId + '"]'); |
| if (navItem) { |
| navItem.classList.add('active'); |
| } |
| } |
| |
| // Set up tab click handlers |
| tabButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| const tabId = this.getAttribute('data-tab'); |
| setActiveTab(tabId); |
| }); |
| }); |
| |
| // Set up nav item click handlers |
| navItems.forEach(item => { |
| item.addEventListener('click', function() { |
| const tabId = this.getAttribute('data-tab'); |
| setActiveTab(tabId); |
| |
| // Close mobile menu if open |
| if (window.innerWidth < 769) { |
| sidebar.classList.remove('active'); |
| } |
| }); |
| }); |
| |
| // Code example tabs |
| const codeTabButtons = document.querySelectorAll('[data-code-tab]'); |
| const codeTabs = document.querySelectorAll('.code-tab'); |
| |
| codeTabButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| codeTabButtons.forEach(btn => btn.classList.remove('active')); |
| codeTabs.forEach(tab => tab.classList.remove('active')); |
| |
| const tabId = this.getAttribute('data-code-tab'); |
| this.classList.add('active'); |
| |
| const codeTab = document.getElementById(tabId + '-code'); |
| if (codeTab) { |
| codeTab.classList.add('active'); |
| } |
| }); |
| }); |
| |
| // Copy buttons |
| document.querySelectorAll('.copy-btn').forEach(button => { |
| button.addEventListener('click', function() { |
| const codeBlock = this.parentElement; |
| const code = codeBlock.textContent.trim(); |
| |
| navigator.clipboard.writeText(code).then(() => { |
| this.textContent = '✓'; |
| setTimeout(() => { |
| this.textContent = '📋'; |
| }, 1500); |
| }); |
| }); |
| }); |
| |
| // Get and display endpoint URL |
| const url = new URL(window.location.href); |
| const link = url.protocol + '//' + url.host + '/hf/v1'; |
| |
| // Update all endpoint URL displays |
| document.querySelectorAll('#endpoint-url, #endpoint-guide').forEach(el => { |
| el.textContent = link; |
| }); |
| |
| const endpointShorthand = document.getElementById('endpoint-shorthand'); |
| if (endpointShorthand) { |
| endpointShorthand.textContent = link + '/chat/completions'; |
| } |
| |
| // Temperature slider |
| const temperatureSlider = document.getElementById('temperature'); |
| const temperatureValue = document.getElementById('temperature-value'); |
| |
| if (temperatureSlider) { |
| temperatureSlider.addEventListener('input', function() { |
| temperatureValue.textContent = this.value; |
| }); |
| } |
| |
| // Load models list |
| fetch('/hf/v1/models') |
| .then(response => response.json()) |
| .then(data => { |
| // Update model counts |
| const modelCount = document.getElementById('model-count'); |
| if (modelCount) { |
| modelCount.textContent = data.data.length; |
| } |
| |
| // Count models by category |
| let claudeCount = 0; |
| let gptCount = 0; |
| let geminiCount = 0; |
| let otherCount = 0; |
| |
| data.data.forEach(model => { |
| if (model.id.includes('claude')) claudeCount++; |
| else if (model.id.includes('gpt')) gptCount++; |
| else if (model.id.includes('gemini')) geminiCount++; |
| else otherCount++; |
| }); |
| |
| const claudeCountEl = document.getElementById('claude-count'); |
| if (claudeCountEl) { |
| claudeCountEl.textContent = claudeCount; |
| } |
| |
| const gptCountEl = document.getElementById('gpt-count'); |
| if (gptCountEl) { |
| gptCountEl.textContent = gptCount; |
| } |
| |
| const geminiCountEl = document.getElementById('gemini-count'); |
| if (geminiCountEl) { |
| geminiCountEl.textContent = geminiCount; |
| } |
| |
| const otherCountEl = document.getElementById('other-count'); |
| if (otherCountEl) { |
| otherCountEl.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'); |
| if (featuredContainer) { |
| 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); |
| } |
| }); |
| } |
| |
| // All models |
| const allModelsContainer = document.getElementById('all-models'); |
| if (allModelsContainer) { |
| allModelsContainer.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-tag'; |
| modelEl.textContent = model.id; |
| allModelsContainer.appendChild(modelEl); |
| |
| // Add to model select dropdown |
| const modelSelect = document.getElementById('model-select'); |
| if (modelSelect) { |
| const option = document.createElement('option'); |
| option.value = model.id; |
| option.textContent = model.id; |
| modelSelect.appendChild(option); |
| } |
| }); |
| } |
| }) |
| .catch(err => { |
| const allModelsEl = document.getElementById('all-models'); |
| if (allModelsEl) { |
| allModelsEl.textContent = 'Failed to load models: ' + err.message; |
| } |
| |
| const featuredModelsEl = document.getElementById('featured-models'); |
| if (featuredModelsEl) { |
| featuredModelsEl.textContent = 'Failed to load models: ' + err.message; |
| } |
| }); |
| |
| // API Tester |
| const submitApiBtn = document.getElementById('submit-api'); |
| if (submitApiBtn) { |
| submitApiBtn.addEventListener('click', async function() { |
| const apiKey = document.getElementById('api-key').value; |
| const model = document.getElementById('model-select').value; |
| const prompt = document.getElementById('prompt-input').value; |
| const temperature = parseFloat(document.getElementById('temperature').value); |
| |
| const responseContainer = document.getElementById('api-response'); |
| responseContainer.textContent = 'Loading...'; |
| |
| try { |
| const response = await fetch(link + '/chat/completions', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| 'Authorization': 'Bearer ' + apiKey |
| }, |
| body: JSON.stringify({ |
| model: model, |
| messages: [{ role: 'user', content: prompt }], |
| temperature: temperature |
| }) |
| }); |
| |
| const data = await response.json(); |
| responseContainer.textContent = JSON.stringify(data, null, 2); |
| } catch (error) { |
| responseContainer.textContent = 'Error: ' + (error.message || 'Unknown error'); |
| } |
| }); |
| } |
| </script> |
| </body> |
| </html> |
| `; |
| 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'}`); |
| }); |
