cursor-ai

Paused

App Files Files Community

vidbye commited on Mar 19, 2025

Commit

97d9de8

verified ·

1 Parent(s): c884913

Update hf.js

Browse files

Files changed (1) hide show

hf.js +1026 -276

hf.js CHANGED Viewed

@@ -236,7 +236,7 @@ app.use('/hf/v1/chat/completions', (req, res, next) => {
   middleware(req, res, next);
 });
-// Homepage with dark themed dashboard
 app.get('/', (req, res) => {
   const htmlContent = `
     <!DOCTYPE html>
@@ -244,42 +244,104 @@ app.get('/', (req, res) => {
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>Cursor To OpenAI</title>
       <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
       <style>
         :root {
           --primary-color: #5D5CDE;
-          --secondary-color: #4f46e5;
-          --accent-color: #818cf8;
-          --bg-color: #181818;
-          --card-bg: #242424;
-          --text-primary: #e2e8f0;
-          --text-secondary: #94a3b8;
           --border-color: #374151;
           --success-bg: #065f46;
           --success-text: #a7f3d0;
-          --input-bg: #1e1e1e;
-          --hover-bg: #2d2d2d;
         }
         body {
-          background-color: var(--bg-color);
           color: var(--text-primary);
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          transition: all 0.3s ease;
         }
-        .container {
-          max-width: 1200px;
-          margin: 0 auto;
           padding: 1.5rem;
         }
         .card {
-          background-color: var(--card-bg);
           border-radius: 0.75rem;
           border: 1px solid var(--border-color);
-          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
           margin-bottom: 1.5rem;
           padding: 1.5rem;
           transition: transform 0.3s ease, box-shadow 0.3s ease;
@@ -287,308 +349,958 @@ app.get('/', (req, res) => {
         .card:hover {
           transform: translateY(-2px);
-          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
         }
-        .info-item {
-          background-color: var(--bg-color);
-          border-radius: 0.5rem;
-          border: 1px solid var(--border-color);
-          margin: 0.75rem 0;
-          padding: 0.75rem;
         }
-        .service-status {
           background-color: var(--success-bg);
           color: var(--success-text);
           border-radius: 0.5rem;
-          padding: 0.5rem 0.75rem;
-          display: inline-block;
           font-weight: 500;
-          margin: 1rem 0;
         }
         .model-item {
-          background-color: var(--bg-color);
           border-radius: 0.5rem;
           border: 1px solid var(--border-color);
-          padding: 0.75rem 1rem;
-          margin: 0.5rem 0;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
           transition: all 0.2s ease;
         }
         .model-item:hover {
-          background-color: var(--hover-bg);
           transform: translateY(-2px);
         }
         .model-provider {
           background-color: var(--primary-color);
           color: white;
           border-radius: 0.25rem;
-          padding: 0.25rem 0.5rem;
-          font-size: 0.875rem;
         }
-        .tab-button {
-          background-color: var(--card-bg);
-          color: var(--text-secondary);
           border: 1px solid var(--border-color);
-          border-bottom: none;
-          border-radius: 0.5rem 0.5rem 0 0;
-          padding: 0.75rem 1.5rem;
-          font-weight: 500;
-          cursor: pointer;
-          transition: all 0.2s ease;
         }
-        .tab-button.active {
           background-color: var(--primary-color);
           color: white;
         }
-        .tab-content {
-          display: none;
         }
-        .tab-content.active {
-          display: block;
         }
-        pre {
-          background-color: var(--input-bg);
-          border-radius: 0.5rem;
           padding: 1rem;
-          overflow-x: auto;
           color: var(--text-primary);
-          border: 1px solid var(--border-color);
         }
-        input, textarea, select {
           background-color: var(--input-bg);
           border: 1px solid var(--border-color);
           color: var(--text-primary);
-          padding: 0.75rem;
-          border-radius: 0.5rem;
           width: 100%;
           font-size: 1rem;
         }
-        input:focus, textarea:focus, select:focus {
-          outline: 2px solid var(--primary-color);
           border-color: var(--primary-color);
         }
-        button {
           background-color: var(--primary-color);
           color: white;
           border: none;
-          border-radius: 0.5rem;
-          padding: 0.75rem 1.5rem;
-          font-weight: 500;
           cursor: pointer;
-          transition: all 0.2s ease;
         }
-        button:hover {
-          background-color: var(--secondary-color);
         }
-        button:disabled {
-          opacity: 0.6;
           cursor: not-allowed;
         }
-        .response-area {
           background-color: var(--input-bg);
-          border-radius: 0.5rem;
           border: 1px solid var(--border-color);
-          padding: 1rem;
-          min-height: 200px;
-          max-height: 500px;
-          overflow-y: auto;
-          white-space: pre-wrap;
-          font-family: monospace;
         }
-        .loading {
           display: inline-block;
-          width: 20px;
-          height: 20px;
-          border: 3px solid rgba(255,255,255,.3);
           border-radius: 50%;
           border-top-color: white;
           animation: spin 1s ease-in-out infinite;
         }
         @keyframes spin {
           to { transform: rotate(360deg); }
         }
-        .form-group {
-          margin-bottom: 1.5rem;
         }
-        .form-label {
-          display: block;
-          margin-bottom: 0.5rem;
           color: var(--text-secondary);
         }
-        /* Light/Dark mode toggle support */
         @media (prefers-color-scheme: light) {
           :root {
-            --bg-color: #f8fafc;
-            --card-bg: #ffffff;
-            --text-primary: #1a1a1a;
-            --text-secondary: #4b5563;
-            --border-color: #e5e7eb;
             --success-bg: #dcfce7;
             --success-text: #166534;
-            --input-bg: #f8fafc;
-            --hover-bg: #f1f5f9;
           }
         }
       </style>
     </head>
     <body>
-      <div class="container">
-        <div class="text-center mt-4 mb-8">
-          <h1 class="text-4xl font-bold mb-2" style="color: var(--primary-color);">Cursor To OpenAI Server</h1>
-          <p class="text-xl">High-performance AI Model Proxy Service</p>
-          <div class="service-status">Service is running</div>
-        </div>
-        <div class="mb-6">
-          <div class="flex">
-            <button id="tab-dashboard" class="tab-button active mr-2">Dashboard</button>
-            <button id="tab-interact" class="tab-button">API Interaction</button>
           </div>
-        </div>
-        <div id="content-dashboard" class="tab-content active">
-          <div class="card">
-            <h2 class="text-2xl font-bold mb-4">Configuration Information</h2>
-            <div class="info-item">
-              <div class="text-sm text-gray-400 mb-1">Service Environment</div>
-              <div class="font-medium" style="color: var(--primary-color);">Environment Variable Configuration Mode</div>
             </div>
-            <div class="info-item">
-              <div class="text-sm text-gray-400 mb-1">Custom Endpoint (Base URL)</div>
-              <div class="font-medium" id="endpoint-url" style="color: var(--primary-color);"></div>
             </div>
-            <div class="info-item">
-              <div class="text-sm text-gray-400 mb-1">Target Service</div>
-              <div class="font-medium" id="target-service" style="color: var(--primary-color);">${TARGET_URL}${API_PATH}</div>
             </div>
-            <div class="info-item">
-              <div class="text-sm text-gray-400 mb-1">Proxy Status</div>
-              <div class="font-medium" id="proxy-status" style="color: var(--primary-color);">${proxyPool.length > 0 ? `Enabled (${proxyPool.length} proxies)` : 'Disabled'}</div>
             </div>
-          </div>
-          <div class="card">
-            <h2 class="text-2xl font-bold mb-4">Supported Models</h2>
-            <div id="model-list" class="mt-4">
-              <div class="flex justify-center">
-                <div class="loading"></div>
-                <span class="ml-2">Loading models...</span>
-              </div>
             </div>
           </div>
-          <div class="card">
-            <h2 class="text-2xl font-bold mb-4">Usage Instructions</h2>
-            <p class="mb-3">Configure the following in your client:</p>
-            <pre id="usage-instructions">API URL: http://{server-address}:${PORT}/hf/v1
-API Key: Your API Key</pre>
-            <p class="mt-3">Supports requests compatible with OpenAI format, pre-configured for forwarding to the target service.</p>
-          </div>
-        </div>
-        <div id="content-interact" class="tab-content">
-          <div class="card">
-            <h2 class="text-2xl font-bold mb-4">Test API Interaction</h2>
-            <div class="form-group">
-              <label class="form-label">Model</label>
-              <select id="model-select" class="text-base">
-                <option value="">Loading models...</option>
-              </select>
             </div>
-            <div class="form-group">
-              <label class="form-label">System Message (optional)</label>
-              <input id="system-message" type="text" placeholder="You are a helpful AI assistant" class="text-base" />
             </div>
-            <div class="form-group">
-              <label class="form-label">User Message</label>
-              <textarea id="user-message" rows="4" placeholder="Enter your message here" class="text-base"></textarea>
             </div>
-            <div class="form-group">
-              <label class="form-label">Temperature (0-2)</label>
-              <input id="temperature" type="range" min="0" max="2" step="0.1" value="0.7" />
-              <div class="flex justify-between">
-                <span>0 (More deterministic)</span>
-                <span id="temp-value">0.7</span>
-                <span>2 (More random)</span>
               </div>
             </div>
-            <div class="form-group">
-              <button id="send-button" class="w-full">Send Request</button>
             </div>
-            <div class="mt-6">
-              <h3 class="text-xl font-bold mb-3">Response</h3>
-              <div id="response-container" class="response-area">No response yet.</div>
             </div>
-          </div>
-        </div>
       </div>
       <script>
-        // Set up UI elements with server config
         document.addEventListener('DOMContentLoaded', function() {
-          // Handle tabs
-          const tabButtons = document.querySelectorAll('.tab-button');
-          const tabContents = document.querySelectorAll('.tab-content');
-          tabButtons.forEach(button => {
-            button.addEventListener('click', () => {
-              const target = button.id.replace('tab-', 'content-');
-              // Update active tab button
-              tabButtons.forEach(btn => btn.classList.remove('active'));
-              button.classList.add('active');
-              // Update visible content
-              tabContents.forEach(content => content.classList.remove('active'));
-              document.getElementById(target).classList.add('active');
             });
           });
-          // Set up configuration info
           const url = new URL(window.location.href);
-          const link = url.protocol + '//' + url.host + '/hf/v1';
-          document.getElementById('endpoint-url').textContent = link;
-          // Update usage instructions
-          document.getElementById('usage-instructions').textContent = \`API URL: \${link}
-API Key: Your API Key\`;
           // Fetch and display models
           fetchModels();
-          // Set up temperature slider
-          const tempSlider = document.getElementById('temperature');
-          const tempValue = document.getElementById('temp-value');
-          tempSlider.addEventListener('input', () => {
-            tempValue.textContent = tempSlider.value;
           });
-          // Set up API interaction
-          document.getElementById('send-button').addEventListener('click', sendAPIRequest);
-        });
         // Fetch models from the API
         async function fetchModels() {
@@ -598,23 +1310,37 @@ API Key: Your API Key\`;
             const response = await fetch(link);
             const data = await response.json();
-            // Populate model list in dashboard
-            const modelList = document.getElementById('model-list');
-            modelList.innerHTML = '';
-            // Populate model select dropdown
-            const modelSelect = document.getElementById('model-select');
-            modelSelect.innerHTML = '';
             data.data.forEach(model => {
-              // Add to dashboard list
-              const div = document.createElement('div');
-              div.className = 'model-item';
-              div.innerHTML = \`
-                <span class="model-name">\${model.id}</span>
-                <span class="model-provider">\${model.owned_by}</span>
-              \`;
-              modelList.appendChild(div);
               // Add to select dropdown
               const option = document.createElement('option');
@@ -622,91 +1348,115 @@ API Key: Your API Key\`;
               option.textContent = model.id;
               modelSelect.appendChild(option);
             });
           } catch (error) {
             console.error('Error fetching models:', error);
-            document.getElementById('model-list').innerHTML = '<div class="text-red-500">Failed to load models</div>';
-            document.getElementById('model-select').innerHTML = '<option value="">Failed to load models</option>';
           }
         }
-        // Send API request for interaction tab
-        async function sendAPIRequest() {
-          const modelSelect = document.getElementById('model-select');
-          const systemMessage = document.getElementById('system-message');
-          const userMessage = document.getElementById('user-message');
-          const temperature = document.getElementById('temperature');
-          const responseContainer = document.getElementById('response-container');
-          const sendButton = document.getElementById('send-button');
-          // Validate inputs
-          if (!modelSelect.value) {
-            responseContainer.textContent = 'Error: Please select a model';
-            return;
-          }
-          if (!userMessage.value.trim()) {
-            responseContainer.textContent = 'Error: Please enter a user message';
-            return;
-          }
-          // Prepare request
-          const url = new URL(window.location.href);
-          const endpoint = url.protocol + '//' + url.host + '/hf/v1/chat/completions';
-          const payload = {
-            model: modelSelect.value,
-            messages: [
-              ...(systemMessage.value.trim() ? [{ role: 'system', content: systemMessage.value }] : []),
-              { role: 'user', content: userMessage.value }
-            ],
-            temperature: parseFloat(temperature.value),
-            stream: false
-          };
-          // Show loading state
-          sendButton.disabled = true;
-          responseContainer.innerHTML = '<div class="flex justify-center"><div class="loading"></div><span class="ml-2">Waiting for response...</span></div>';
           try {
-            const response = await fetch(endpoint, {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json'
-              },
-              body: JSON.stringify(payload)
-            });
-            const data = await response.json();
             if (response.ok) {
-              if (data.choices && data.choices.length > 0) {
-                const messageContent = data.choices[0].message.content;
-                responseContainer.textContent = messageContent;
-              } else {
-                responseContainer.textContent = 'Received an empty response from the API.';
-              }
             } else {
-              responseContainer.textContent = \`Error: \${data.error?.message || 'Unknown error'}\`;
             }
           } catch (error) {
-            responseContainer.textContent = \`Error: \${error.message || 'Failed to send request'}\`;
-          } finally {
-            sendButton.disabled = false;
           }
         }
-        // Light/Dark mode support
-        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-          document.documentElement.classList.add('dark');
-        }
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-          if (event.matches) {
-            document.documentElement.classList.add('dark');
           } else {
-            document.documentElement.classList.remove('dark');
           }
-        });
       </script>
     </body>
     </html>

   middleware(req, res, next);
 });
+// Modern dashboard homepage
 app.get('/', (req, res) => {
   const htmlContent = `
     <!DOCTYPE html>
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>AI Models Dashboard</title>
       <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css">
       <style>
         :root {
           --primary-color: #5D5CDE;
+          --primary-dark: #4338ca;
+          --primary-light: #818cf8;
+          --secondary-color: #10b981;
+          --accent-color: #f97316;
+          --bg-dark: #111827;
+          --bg-card: #1f2937;
+          --text-primary: #f3f4f6;
+          --text-secondary: #d1d5db;
+          --text-muted: #9ca3af;
           --border-color: #374151;
           --success-bg: #065f46;
           --success-text: #a7f3d0;
+          --error-bg: #7f1d1d;
+          --error-text: #fecaca;
+          --input-bg: #1e293b;
+          --hover-bg: #2d3748;
+          --shadow-color: rgba(0, 0, 0, 0.25);
         }
         body {
+          background-color: var(--bg-dark);
           color: var(--text-primary);
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          transition: background-color 0.3s ease, color 0.3s ease;
+          min-height: 100vh;
         }
+        .dashboard-container {
+          display: grid;
+          grid-template-columns: 260px 1fr;
+          min-height: 100vh;
+        }
+        .sidebar {
+          background-color: var(--bg-card);
+          border-right: 1px solid var(--border-color);
+          overflow-y: auto;
+          transition: transform 0.3s ease;
+        }
+        .main-content {
+          overflow-y: auto;
           padding: 1.5rem;
         }
+        .logo {
+          font-size: 1.5rem;
+          font-weight: 600;
+          color: var(--primary-light);
+          display: flex;
+          align-items: center;
+          padding: 1.5rem 1rem;
+          border-bottom: 1px solid var(--border-color);
+        }
+        .logo i {
+          margin-right: 0.5rem;
+          color: var(--accent-color);
+        }
+        .nav-item {
+          padding: 0.875rem 1rem;
+          border-radius: 0.375rem;
+          margin: 0.25rem 0.5rem;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          display: flex;
+          align-items: center;
+          color: var(--text-secondary);
+        }
+        .nav-item:hover {
+          background-color: var(--hover-bg);
+          color: var(--text-primary);
+        }
+        .nav-item.active {
+          background-color: var(--primary-color);
+          color: white;
+        }
+        .nav-item i {
+          width: 1.25rem;
+          margin-right: 0.75rem;
+          text-align: center;
+        }
         .card {
+          background-color: var(--bg-card);
           border-radius: 0.75rem;
           border: 1px solid var(--border-color);
+          box-shadow: 0 4px 6px var(--shadow-color);
           margin-bottom: 1.5rem;
           padding: 1.5rem;
           transition: transform 0.3s ease, box-shadow 0.3s ease;
         .card:hover {
           transform: translateY(-2px);
+          box-shadow: 0 8px 15px var(--shadow-color);
         }
+        .card-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1rem;
+          padding-bottom: 0.75rem;
+          border-bottom: 1px solid var(--border-color);
+        }
+        .card-title {
+          font-size: 1.25rem;
+          font-weight: 600;
+          color: var(--text-primary);
+          display: flex;
+          align-items: center;
+        }
+        .card-title i {
+          margin-right: 0.5rem;
+          color: var(--primary-light);
         }
+        .status-badge {
           background-color: var(--success-bg);
           color: var(--success-text);
+          border-radius: 2rem;
+          padding: 0.25rem 0.75rem;
+          font-size: 0.875rem;
+          font-weight: 500;
+        }
+        .status-badge.error {
+          background-color: var(--error-bg);
+          color: var(--error-text);
+        }
+        .info-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+          gap: 1rem;
+        }
+        .info-item {
+          background-color: var(--hover-bg);
           border-radius: 0.5rem;
+          border: 1px solid var(--border-color);
+          padding: 1rem;
+          display: flex;
+          flex-direction: column;
+        }
+        .info-label {
+          color: var(--text-muted);
+          font-size: 0.875rem;
+          margin-bottom: 0.5rem;
+        }
+        .info-value {
+          color: var(--primary-light);
           font-weight: 500;
+          word-break: break-all;
+        }
+        .model-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+          gap: 1rem;
+          max-height: 400px;
+          overflow-y: auto;
+          padding-right: 0.5rem;
         }
         .model-item {
+          background-color: var(--hover-bg);
           border-radius: 0.5rem;
           border: 1px solid var(--border-color);
+          padding: 1rem;
           transition: all 0.2s ease;
+          position: relative;
         }
         .model-item:hover {
+          background-color: var(--bg-dark);
           transform: translateY(-2px);
+          box-shadow: 0 4px 8px var(--shadow-color);
+        }
+        .model-name {
+          font-weight: 600;
+          color: var(--text-primary);
+          margin-bottom: 0.5rem;
+          display: block;
         }
         .model-provider {
+          position: absolute;
+          top: 0.5rem;
+          right: 0.5rem;
           background-color: var(--primary-color);
           color: white;
           border-radius: 0.25rem;
+          padding: 0.125rem 0.375rem;
+          font-size: 0.75rem;
         }
+        .endpoint-box {
+          background-color: var(--input-bg);
+          border-radius: 0.5rem;
+          padding: 1rem;
+          margin-top: 1rem;
           border: 1px solid var(--border-color);
         }
+        .endpoint-url {
+          font-family: monospace;
+          background-color: var(--bg-dark);
+          padding: 0.75rem;
+          border-radius: 0.25rem;
+          margin: 0.5rem 0;
+          overflow-x: auto;
+          white-space: nowrap;
+        }
+        .copy-btn {
           background-color: var(--primary-color);
           color: white;
+          border: none;
+          border-radius: 0.25rem;
+          padding: 0.375rem 0.75rem;
+          font-size: 0.875rem;
+          cursor: pointer;
+          transition: all 0.2s;
         }
+        .copy-btn:hover {
+          background-color: var(--primary-dark);
         }
+        .chat-container {
+          display: flex;
+          flex-direction: column;
+          height: calc(100vh - 3rem);
         }
+        .chat-header {
           padding: 1rem;
+          border-bottom: 1px solid var(--border-color);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .chat-body {
+          flex-grow: 1;
+          overflow-y: auto;
+          padding: 1rem;
+        }
+        .message-list {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+        .message {
+          display: flex;
+          max-width: 80%;
+        }
+        .message.user {
+          align-self: flex-end;
+        }
+        .message.bot {
+          align-self: flex-start;
+        }
+        .message-bubble {
+          padding: 0.75rem 1rem;
+          border-radius: 1rem;
+          position: relative;
+        }
+        .message.user .message-bubble {
+          background-color: var(--primary-color);
+          color: white;
+          border-bottom-right-radius: 0.25rem;
+        }
+        .message.bot .message-bubble {
+          background-color: var(--hover-bg);
           color: var(--text-primary);
+          border-bottom-left-radius: 0.25rem;
+        }
+        .message-time {
+          font-size: 0.75rem;
+          color: var(--text-muted);
+          margin-top: 0.25rem;
+          text-align: right;
         }
+        .chat-input {
+          padding: 1rem;
+          border-top: 1px solid var(--border-color);
+        }
+        .input-container {
+          position: relative;
+          display: flex;
+          align-items: center;
+        }
+        .message-input {
           background-color: var(--input-bg);
           border: 1px solid var(--border-color);
           color: var(--text-primary);
+          border-radius: 1.5rem;
+          padding: 0.875rem 4rem 0.875rem 1rem;
           width: 100%;
+          resize: none;
+          max-height: 120px;
+          overflow-y: auto;
           font-size: 1rem;
         }
+        .message-input:focus {
+          outline: none;
           border-color: var(--primary-color);
         }
+        .send-btn {
+          position: absolute;
+          right: 0.5rem;
           background-color: var(--primary-color);
           color: white;
           border: none;
+          border-radius: 50%;
+          width: 2.5rem;
+          height: 2.5rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
           cursor: pointer;
+          transition: all 0.2s;
         }
+        .send-btn:hover {
+          background-color: var(--primary-dark);
         }
+        .send-btn:disabled {
+          background-color: var(--border-color);
           cursor: not-allowed;
         }
+        .model-select-container {
+          display: flex;
+          gap: 0.75rem;
+          align-items: center;
+          margin-bottom: 1rem;
+        }
+        .model-select {
           background-color: var(--input-bg);
           border: 1px solid var(--border-color);
+          color: var(--text-primary);
+          border-radius: 0.5rem;
+          padding: 0.5rem;
+          font-size: 1rem;
+          flex-grow: 1;
+        }
+        .model-label {
+          color: var(--text-secondary);
+          font-weight: 500;
+          white-space: nowrap;
+        }
+        .new-chat-btn {
+          background-color: var(--primary-color);
+          color: white;
+          border: none;
+          border-radius: 0.5rem;
+          padding: 0.5rem 1rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          cursor: pointer;
+          transition: all 0.2s;
+          font-weight: 500;
+        }
+        .new-chat-btn:hover {
+          background-color: var(--primary-dark);
         }
+        .loading-spinner {
           display: inline-block;
+          width: 1.5rem;
+          height: 1.5rem;
+          border: 0.25rem solid rgba(255,255,255,.3);
           border-radius: 50%;
           border-top-color: white;
           animation: spin 1s ease-in-out infinite;
+          margin-right: 0.5rem;
         }
         @keyframes spin {
           to { transform: rotate(360deg); }
         }
+        .system-message {
+          background-color: var(--hover-bg);
+          border-radius: 0.5rem;
+          padding: 0.75rem;
+          margin-bottom: 1rem;
+          color: var(--text-muted);
+          font-style: italic;
+          font-size: 0.875rem;
+          display: flex;
+          align-items: center;
         }
+        .system-message i {
+          margin-right: 0.5rem;
+          font-size: 1rem;
+        }
+        .connection-status {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
           color: var(--text-secondary);
+          font-size: 0.875rem;
         }
+        .status-indicator {
+          width: 0.625rem;
+          height: 0.625rem;
+          border-radius: 50%;
+          background-color: var(--success-bg);
+        }
+        .status-indicator.error {
+          background-color: var(--error-bg);
+        }
+        .mobile-menu-btn {
+          display: none;
+          background: none;
+          border: none;
+          color: var(--text-primary);
+          font-size: 1.5rem;
+          cursor: pointer;
+          padding: 0.5rem;
+        }
+        /* Light mode theming */
         @media (prefers-color-scheme: light) {
           :root {
+            --bg-dark: #f8fafc;
+            --bg-card: #ffffff;
+            --text-primary: #1e293b;
+            --text-secondary: #475569;
+            --text-muted: #64748b;
+            --border-color: #e2e8f0;
             --success-bg: #dcfce7;
             --success-text: #166534;
+            --error-bg: #fee2e2;
+            --error-text: #991b1b;
+            --input-bg: #f1f5f9;
+            --hover-bg: #f8fafc;
+            --shadow-color: rgba(0, 0, 0, 0.1);
+          }
+        }
+        /* Responsive design */
+        @media (max-width: 1024px) {
+          .dashboard-container {
+            grid-template-columns: 220px 1fr;
+          }
+          .info-grid, .model-grid {
+            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+          }
+        }
+        @media (max-width: 768px) {
+          .dashboard-container {
+            grid-template-columns: 1fr;
+          }
+          .sidebar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            width: 260px;
+            z-index: 10;
+            transform: translateX(-100%);
+          }
+          .sidebar.open {
+            transform: translateX(0);
+          }
+          .mobile-menu-btn {
+            display: flex;
+            position: fixed;
+            top: 1rem;
+            left: 1rem;
+            z-index: 20;
+            background-color: var(--bg-card);
+            border-radius: 0.5rem;
+            box-shadow: 0 2px 5px var(--shadow-color);
+          }
+          .main-content {
+            padding-top: 4rem;
+          }
+        }
+        @media (max-width: 640px) {
+          .info-grid, .model-grid {
+            grid-template-columns: 1fr;
           }
         }
       </style>
     </head>
     <body>
+      <button class="mobile-menu-btn" id="mobile-menu-btn">
+        <i class="fas fa-bars"></i>
+      </button>
+      <div class="dashboard-container">
+        <aside class="sidebar" id="sidebar">
+          <div class="logo">
+            <i class="fas fa-robot"></i>
+            <span>AI Dashboard</span>
           </div>
+          <nav class="mt-4">
+            <div class="nav-item active" data-section="dashboard">
+              <i class="fas fa-chart-line"></i>
+              <span>Dashboard</span>
             </div>
+            <div class="nav-item" data-section="chat">
+              <i class="fas fa-comments"></i>
+              <span>Chat</span>
             </div>
+            <div class="nav-item" data-section="models">
+              <i class="fas fa-cube"></i>
+              <span>Models</span>
             </div>
+            <div class="nav-item" data-section="settings">
+              <i class="fas fa-cog"></i>
+              <span>Settings</span>
             </div>
+          </nav>
+          <div class="mt-auto p-4 text-sm text-gray-400">
+            <div class="connection-status">
+              <div class="status-indicator" id="connection-indicator"></div>
+              <span id="connection-status">Connected</span>
             </div>
           </div>
+        </aside>
+        <main class="main-content">
+          <!-- Dashboard Section -->
+          <section id="section-dashboard" class="content-section active">
+            <h1 class="text-2xl font-bold mb-4">Dashboard Overview</h1>
+            <div class="info-grid">
+              <div class="card">
+                <div class="card-header">
+                  <div class="card-title">
+                    <i class="fas fa-server"></i>
+                    <span>API Status</span>
+                  </div>
+                  <div class="status-badge" id="api-status">Active</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">Target Service</div>
+                  <div class="info-value" id="target-service">${TARGET_URL}${API_PATH}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">Proxy Status</div>
+                  <div class="info-value" id="proxy-status">${proxyPool.length > 0 ? `Enabled (${proxyPool.length} proxies)` : 'Disabled'}</div>
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-header">
+                  <div class="card-title">
+                    <i class="fas fa-clock"></i>
+                    <span>Performance</span>
+                  </div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">Request Timeout</div>
+                  <div class="info-value">${TIMEOUT}ms</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">Service Port</div>
+                  <div class="info-value">${PORT}</div>
+                </div>
+              </div>
             </div>
+            <div class="card mt-6">
+              <div class="card-header">
+                <div class="card-title">
+                  <i class="fas fa-link"></i>
+                  <span>API Endpoint</span>
+                </div>
+              </div>
+              <p class="text-sm text-gray-400 mb-2">Use this endpoint in your applications to connect to the AI models.</p>
+              <div class="endpoint-box">
+                <div class="endpoint-url" id="endpoint-url"></div>
+                <button class="copy-btn" id="copy-endpoint">
+                  <i class="fas fa-copy mr-2"></i> Copy to clipboard
+                </button>
+              </div>
             </div>
+            <div class="card mt-6">
+              <div class="card-header">
+                <div class="card-title">
+                  <i class="fas fa-cube"></i>
+                  <span>Popular Models</span>
+                </div>
+                <a href="#" class="text-primary-light hover:underline text-sm" data-section="models">View All</a>
+              </div>
+              <div id="popular-models" class="model-grid mt-4">
+                <div class="flex justify-center items-center p-4">
+                  <div class="loading-spinner"></div>
+                  <span class="ml-2">Loading models...</span>
+                </div>
+              </div>
             </div>
+          </section>
+          <!-- Chat Section -->
+          <section id="section-chat" class="content-section hidden">
+            <div class="chat-container">
+              <div class="chat-header">
+                <div class="model-select-container">
+                  <label class="model-label">Model:</label>
+                  <select id="chat-model-select" class="model-select">
+                    <option value="">Loading models...</option>
+                  </select>
+                </div>
+                <button class="new-chat-btn" id="new-chat-btn">
+                  <i class="fas fa-plus"></i>
+                  <span>New Chat</span>
+                </button>
+              </div>
+              <div class="chat-body">
+                <div class="system-message">
+                  <i class="fas fa-info-circle"></i>
+                  <span>This is a new conversation. Select a model and start chatting!</span>
+                </div>
+                <div class="message-list" id="message-list"></div>
+              </div>
+              <div class="chat-input">
+                <div class="input-container">
+                  <textarea
+                    id="message-input"
+                    class="message-input"
+                    placeholder="Type your message here..."
+                    rows="1"></textarea>
+                  <button id="send-message-btn" class="send-btn" disabled>
+                    <i class="fas fa-paper-plane"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </section>
+          <!-- Models Section -->
+          <section id="section-models" class="content-section hidden">
+            <h1 class="text-2xl font-bold mb-4">Available Models</h1>
+            <div class="card">
+              <div class="card-header">
+                <div class="card-title">
+                  <i class="fas fa-search"></i>
+                  <span>Model Library</span>
+                </div>
+                <input
+                  type="text"
+                  id="model-search"
+                  placeholder="Search models..."
+                  class="px-3 py-1 bg-input-bg text-text-primary border border-border-color rounded-md w-64 text-sm">
+              </div>
+              <div id="all-models" class="model-grid mt-4">
+                <div class="flex justify-center items-center p-4">
+                  <div class="loading-spinner"></div>
+                  <span class="ml-2">Loading models...</span>
+                </div>
               </div>
             </div>
+          </section>
+          <!-- Settings Section -->
+          <section id="section-settings" class="content-section hidden">
+            <h1 class="text-2xl font-bold mb-4">Settings</h1>
+            <div class="card">
+              <div class="card-header">
+                <div class="card-title">
+                  <i class="fas fa-wrench"></i>
+                  <span>Connection Settings</span>
+                </div>
+              </div>
+              <div class="info-item">
+                <div class="info-label">Target URL</div>
+                <div class="info-value">${TARGET_URL}</div>
+              </div>
+              <div class="info-item">
+                <div class="info-label">API Path</div>
+                <div class="info-value">${API_PATH}</div>
+              </div>
+              <div class="info-item">
+                <div class="info-label">Server Port</div>
+                <div class="info-value">${PORT}</div>
+              </div>
+              <div class="info-item">
+                <div class="info-label">Timeout Setting</div>
+                <div class="info-value">${TIMEOUT}ms</div>
+              </div>
             </div>
+            <div class="card mt-6">
+              <div class="card-header">
+                <div class="card-title">
+                  <i class="fas fa-shield-alt"></i>
+                  <span>Proxy Configuration</span>
+                </div>
+              </div>
+              <div class="info-item">
+                <div class="info-label">Proxy Status</div>
+                <div class="info-value">${proxyPool.length > 0 ? 'Enabled' : 'Disabled'}</div>
+              </div>
+              <div class="info-item">
+                <div class="info-label">Active Proxies</div>
+                <div class="info-value">${proxyPool.length}</div>
+              </div>
             </div>
+          </section>
+        </main>
       </div>
       <script>
+        // Store chat history
+        let chatHistory = [];
+        let selectedModel = '';
+        let connectionState = {
+          connected: true,
+          status: 'Connected',
+        };
+        // Initialize the dashboard
         document.addEventListener('DOMContentLoaded', function() {
+          // Set up mobile menu
+          const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+          const sidebar = document.getElementById('sidebar');
+          mobileMenuBtn.addEventListener('click', () => {
+            sidebar.classList.toggle('open');
+          });
+          // Handle navigation
+          const navItems = document.querySelectorAll('.nav-item');
+          const sections = document.querySelectorAll('.content-section');
+          navItems.forEach(item => {
+            item.addEventListener('click', () => {
+              const sectionId = item.getAttribute('data-section');
+              // Update active nav item
+              navItems.forEach(navItem => navItem.classList.remove('active'));
+              item.classList.add('active');
+              // Show selected section
+              sections.forEach(section => {
+                section.classList.add('hidden');
+                section.classList.remove('active');
+              });
+              const selectedSection = document.getElementById('section-' + sectionId);
+              selectedSection.classList.remove('hidden');
+              selectedSection.classList.add('active');
+              // Close mobile menu after selection
+              sidebar.classList.remove('open');
             });
           });
+          // Section links
+          document.querySelectorAll('[data-section]').forEach(link => {
+            if (!link.classList.contains('nav-item')) {
+              link.addEventListener('click', (e) => {
+                e.preventDefault();
+                const sectionId = link.getAttribute('data-section');
+                document.querySelector('.nav-item[data-section="' + sectionId + '"]').click();
+              });
+            }
+          });
+          // Set endpoint URL
           const url = new URL(window.location.href);
+          const endpointUrl = url.protocol + '//' + url.host + '/hf/v1';
+          document.getElementById('endpoint-url').textContent = endpointUrl;
+          // Copy endpoint button
+          document.getElementById('copy-endpoint').addEventListener('click', () => {
+            navigator.clipboard.writeText(endpointUrl).then(() => {
+              const btn = document.getElementById('copy-endpoint');
+              const originalText = btn.innerHTML;
+              btn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!';
+              setTimeout(() => {
+                btn.innerHTML = originalText;
+              }, 2000);
+            });
+          });
+          // Initialize chat
+          initChat();
           // Fetch and display models
           fetchModels();
+          // Check connection status
+          checkConnectionStatus();
+        });
+        // Initialize chat functionality
+        function initChat() {
+          const messageInput = document.getElementById('message-input');
+          const sendBtn = document.getElementById('send-message-btn');
+          const messageList = document.getElementById('message-list');
+          const modelSelect = document.getElementById('chat-model-select');
+          const newChatBtn = document.getElementById('new-chat-btn');
+          // Auto-resize textarea
+          messageInput.addEventListener('input', () => {
+            messageInput.style.height = 'auto';
+            messageInput.style.height = (messageInput.scrollHeight) + 'px';
+            // Enable/disable send button based on input and model selection
+            sendBtn.disabled = !messageInput.value.trim() || !modelSelect.value;
           });
+          // Enable/disable send button based on model selection
+          modelSelect.addEventListener('change', () => {
+            selectedModel = modelSelect.value;
+            sendBtn.disabled = !messageInput.value.trim() || !selectedModel;
+          });
+          // Send message
+          sendBtn.addEventListener('click', sendMessage);
+          // Send message with Enter (but Shift+Enter for new line)
+          messageInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              if (!sendBtn.disabled) {
+                sendMessage();
+              }
+            }
+          });
+          // New chat button
+          newChatBtn.addEventListener('click', () => {
+            chatHistory = [];
+            messageList.innerHTML = '';
+            const systemMessage = document.createElement('div');
+            systemMessage.className = 'system-message';
+            systemMessage.innerHTML = '<i class="fas fa-info-circle"></i><span>This is a new conversation. Select a model and start chatting!</span>';
+            messageList.appendChild(systemMessage);
+          });
+        }
+        // Send chat message
+        async function sendMessage() {
+          const messageInput = document.getElementById('message-input');
+          const sendBtn = document.getElementById('send-message-btn');
+          const messageList = document.getElementById('message-list');
+          const modelSelect = document.getElementById('chat-model-select');
+          // Get message content
+          const messageText = messageInput.value.trim();
+          if (!messageText || !modelSelect.value) return;
+          // Disable input during sending
+          messageInput.disabled = true;
+          sendBtn.disabled = true;
+          // Add user message to chat
+          addMessageToChat('user', messageText);
+          // Clear input
+          messageInput.value = '';
+          messageInput.style.height = 'auto';
+          // Prepare payload
+          const messages = [
+            ...chatHistory.map(msg => ({
+              role: msg.role,
+              content: msg.content
+            })),
+            { role: 'user', content: messageText }
+          ];
+          // Add user message to history
+          chatHistory.push({
+            role: 'user',
+            content: messageText,
+            timestamp: new Date().toISOString()
+          });
+          // Show loading indicator for bot response
+          const loadingMessageId = 'msg-loading-' + Date.now();
+          const loadingHTML = \`
+            <div class="message bot" id="\${loadingMessageId}">
+              <div class="message-bubble">
+                <div class="flex items-center">
+                  <div class="loading-spinner" style="width: 1rem; height: 1rem;"></div>
+                  <span class="ml-2">Thinking...</span>
+                </div>
+              </div>
+            </div>
+          \`;
+          messageList.insertAdjacentHTML('beforeend', loadingHTML);
+          messageList.scrollTop = messageList.scrollHeight;
+          try {
+            // Send request to API
+            const url = new URL(window.location.href);
+            const endpoint = url.protocol + '//' + url.host + '/hf/v1/chat/completions';
+            const payload = {
+              model: modelSelect.value,
+              messages: messages,
+              temperature: 0.7,
+              stream: false
+            };
+            const response = await fetch(endpoint, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify(payload)
+            });
+            // Remove loading message
+            const loadingElement = document.getElementById(loadingMessageId);
+            if (loadingElement) {
+              loadingElement.remove();
+            }
+            if (response.ok) {
+              const data = await response.json();
+              if (data.choices && data.choices.length > 0) {
+                const botResponse = data.choices[0].message.content;
+                // Add bot message to chat
+                addMessageToChat('bot', botResponse);
+                // Add to history
+                chatHistory.push({
+                  role: 'assistant',
+                  content: botResponse,
+                  timestamp: new Date().toISOString()
+                });
+              } else {
+                // Handle empty response
+                addSystemMessage('Received an empty response from the model.');
+              }
+            } else {
+              // Handle error response
+              const errorData = await response.json();
+              const errorMessage = errorData.error?.message || 'An error occurred while communicating with the API.';
+              addSystemMessage('Error: ' + errorMessage);
+              // Update connection status
+              updateConnectionStatus(false, 'Connection Error');
+            }
+          } catch (error) {
+            // Remove loading message
+            const loadingElement = document.getElementById(loadingMessageId);
+            if (loadingElement) {
+              loadingElement.remove();
+            }
+            // Handle error
+            console.error('Error sending message:', error);
+            addSystemMessage('Error: ' + (error.message || 'Failed to send message'));
+            // Update connection status
+            updateConnectionStatus(false, 'Connection Error');
+          } finally {
+            // Re-enable input
+            messageInput.disabled = false;
+            sendBtn.disabled = !modelSelect.value;
+            messageList.scrollTop = messageList.scrollHeight;
+            // Focus back on input
+            messageInput.focus();
+          }
+        }
+        // Add message to chat
+        function addMessageToChat(role, content) {
+          const messageList = document.getElementById('message-list');
+          const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+          const messageHTML = \`
+            <div class="message \${role}">
+              <div class="message-bubble">
+                \${content}
+                <div class="message-time">\${timestamp}</div>
+              </div>
+            </div>
+          \`;
+          messageList.insertAdjacentHTML('beforeend', messageHTML);
+          messageList.scrollTop = messageList.scrollHeight;
+        }
+        // Add system message
+        function addSystemMessage(message) {
+          const messageList = document.getElementById('message-list');
+          const systemHTML = \`
+            <div class="system-message">
+              <i class="fas fa-exclamation-circle"></i>
+              <span>\${message}</span>
+            </div>
+          \`;
+          messageList.insertAdjacentHTML('beforeend', systemHTML);
+          messageList.scrollTop = messageList.scrollHeight;
+        }
         // Fetch models from the API
         async function fetchModels() {
             const response = await fetch(link);
             const data = await response.json();
+            if (!response.ok) {
+              throw new Error('Failed to fetch models');
+            }
+            const popularModelsContainer = document.getElementById('popular-models');
+            const allModelsContainer = document.getElementById('all-models');
+            const modelSelect = document.getElementById('chat-model-select');
+            // Clear containers
+            popularModelsContainer.innerHTML = '';
+            allModelsContainer.innerHTML = '';
+            modelSelect.innerHTML = '<option value="">Select a model</option>';
+            // Categorize models
+            const popularModels = data.data.filter(model =>
+              model.id.includes('gpt-4') ||
+              model.id.includes('claude-3') ||
+              model.id === 'o1' ||
+              model.id === 'gemini-1.5-flash-500k'
+            );
+            // Display popular models (limited to 8)
+            popularModels.slice(0, 8).forEach(model => {
+              const modelItem = createModelItem(model);
+              popularModelsContainer.appendChild(modelItem);
+            });
+            // Display all models
             data.data.forEach(model => {
+              const modelItem = createModelItem(model);
+              allModelsContainer.appendChild(modelItem);
               // Add to select dropdown
               const option = document.createElement('option');
               option.textContent = model.id;
               modelSelect.appendChild(option);
             });
+            // Set up model search
+            const modelSearch = document.getElementById('model-search');
+            modelSearch.addEventListener('input', (e) => {
+              const searchTerm = e.target.value.toLowerCase().trim();
+              // Filter models
+              const modelItems = allModelsContainer.querySelectorAll('.model-item');
+              modelItems.forEach(item => {
+                const modelName = item.querySelector('.model-name').textContent.toLowerCase();
+                if (searchTerm === '' || modelName.includes(searchTerm)) {
+                  item.style.display = 'block';
+                } else {
+                  item.style.display = 'none';
+                }
+              });
+            });
+            // Update connection status on successful fetch
+            updateConnectionStatus(true, 'Connected');
           } catch (error) {
             console.error('Error fetching models:', error);
+            // Update UI for error state
+            const containers = ['popular-models', 'all-models'];
+            containers.forEach(id => {
+              const container = document.getElementById(id);
+              container.innerHTML = '<div class="p-4 text-center text-red-400"><i class="fas fa-exclamation-circle mr-2"></i>Failed to load models</div>';
+            });
+            document.getElementById('chat-model-select').innerHTML = '<option value="">Failed to load models</option>';
+            // Update connection status
+            updateConnectionStatus(false, 'Connection Error');
           }
         }
+        // Create model item element
+        function createModelItem(model) {
+          const div = document.createElement('div');
+          div.className = 'model-item';
+          div.innerHTML = \`
+            <span class="model-name">\${model.id}</span>
+            <span class="model-provider">\${model.owned_by}</span>
+          \`;
+          // Click to select model for chat
+          div.addEventListener('click', () => {
+            const chatModelSelect = document.getElementById('chat-model-select');
+            chatModelSelect.value = model.id;
+            // Trigger change event
+            const event = new Event('change');
+            chatModelSelect.dispatchEvent(event);
+            // Navigate to chat section
+            document.querySelector('.nav-item[data-section="chat"]').click();
+          });
+          return div;
+        }
+        // Check and update connection status
+        async function checkConnectionStatus() {
           try {
+            const url = new URL(window.location.href);
+            const endpoint = url.protocol + '//' + url.host + '/health';
+            const response = await fetch(endpoint);
             if (response.ok) {
+              updateConnectionStatus(true, 'Connected');
             } else {
+              updateConnectionStatus(false, 'Connection Error');
             }
           } catch (error) {
+            updateConnectionStatus(false, 'Connection Error');
           }
+          // Check again after 30 seconds
+          setTimeout(checkConnectionStatus, 30000);
         }
+        // Update connection status display
+        function updateConnectionStatus(connected, status) {
+          connectionState.connected = connected;
+          connectionState.status = status;
+          const indicator = document.getElementById('connection-indicator');
+          const statusText = document.getElementById('connection-status');
+          const apiStatus = document.getElementById('api-status');
+          if (connected) {
+            indicator.classList.remove('error');
+            statusText.textContent = status;
+            if (apiStatus) {
+              apiStatus.classList.remove('error');
+              apiStatus.textContent = 'Active';
+            }
           } else {
+            indicator.classList.add('error');
+            statusText.textContent = status;
+            if (apiStatus) {
+              apiStatus.classList.add('error');
+              apiStatus.textContent = 'Error';
+            }
           }
+        }
       </script>
     </body>
     </html>