diff --git "a/hf.js" "b/hf.js"
new file mode 100644--- /dev/null
+++ "b/hf.js"
@@ -0,0 +1,3316 @@
+const express = require('express');
+const morgan = require('morgan');
+const { createProxyMiddleware } = require('http-proxy-middleware');
+const axios = require('axios');
+const url = require('url');
+const app = express();
+
+// Enable logging
+app.use(morgan('dev'));
+
+// Environment variables configuration
+const PORT = process.env.HF_PORT || 7860;
+const TARGET_URL = process.env.TARGET_URL || 'http://localhost:3010';
+const API_PATH = process.env.API_PATH || '/v1';
+const TIMEOUT = parseInt(process.env.TIMEOUT) || 30000;
+
+console.log(`Service configuration:
+- Port: ${PORT}
+- Target URL: ${TARGET_URL}
+- API Path: ${API_PATH}
+- Timeout: ${TIMEOUT}ms`);
+
+// Parse proxy settings
+let proxyPool = [];
+if (process.env.PROXY) {
+  proxyPool = process.env.PROXY.split(',').map(p => p.trim()).filter(p => p);
+  console.log(`Loaded ${proxyPool.length} proxies from environment`);
+  
+  if (proxyPool.length > 0) {
+    console.log('Proxy pool initialized:');
+    proxyPool.forEach((proxy, index) => {
+      // Log with sensitive information masked
+      const maskedProxy = proxy.replace(/(https?:\/\/)([^:]+):([^@]+)@/, '$1$2:****@');
+      console.log(`  [${index + 1}] ${maskedProxy}`);
+    });
+  }
+}
+
+// Randomly select a proxy from the pool
+function getRandomProxy() {
+  if (proxyPool.length === 0) return null;
+  const randomIndex = Math.floor(Math.random() * proxyPool.length);
+  const proxyUrl = proxyPool[randomIndex];
+  const parsedUrl = url.parse(proxyUrl);
+
+  return {
+    host: parsedUrl.hostname,
+    port: parsedUrl.port || 80,
+    auth: parsedUrl.auth ? {
+      username: parsedUrl.auth.split(':')[0],
+      password: parsedUrl.auth.split(':')[1]
+    } : undefined
+  };
+}
+
+// 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"
+      }
+    ]
+  };
+  res.json(models);
+});
+
+// Proxy forwarding using dynamic proxy pool
+app.use('/hf/v1/chat/completions', (req, res, next) => {
+  const proxy = getRandomProxy();
+  const targetEndpoint = `${TARGET_URL}${API_PATH}/chat/completions`;
+  
+  console.log(`Forwarding request to: ${targetEndpoint}`);
+  
+  const middleware = createProxyMiddleware({
+    target: targetEndpoint,
+    changeOrigin: true,
+    proxy: proxy ? proxy : undefined,
+    timeout: TIMEOUT,
+    proxyTimeout: TIMEOUT,
+    onProxyReq: (proxyReq, req, res) => {
+      if (req.body) {
+        const bodyData = JSON.stringify(req.body);
+        proxyReq.setHeader('Content-Type', 'application/json');
+        proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
+        proxyReq.write(bodyData);
+        proxyReq.end();
+      }
+    },
+    onError: (err, req, res) => {
+      console.error('Proxy error:', err);
+      res.status(502).json({
+        error: {
+          message: 'Proxy connection error - unable to reach target service',
+          type: 'proxy_error',
+          details: process.env.NODE_ENV === 'development' ? err.message : undefined
+        }
+      });
+    },
+    onProxyRes: (proxyRes, req, res) => {
+      console.log(`Proxy response status: ${proxyRes.statusCode}`);
+      
+      // Handle non-JSON responses
+      if (proxyRes.statusCode >= 400) {
+        let responseBody = '';
+        
+        proxyRes.on('data', function(chunk) {
+          responseBody += chunk;
+        });
+        
+        proxyRes.on('end', function() {
+          try {
+            // Try to parse as JSON first
+            JSON.parse(responseBody);
+            // If successful, let the normal flow continue
+          } catch (e) {
+            // If not valid JSON, override the response with a proper JSON error
+            const originalStatusCode = proxyRes.statusCode;
+            res.writeHead(originalStatusCode, {'Content-Type': 'application/json'});
+            res.end(JSON.stringify({
+              error: {
+                message: `Error from target service: ${responseBody.substring(0, 200)}${responseBody.length > 200 ? '...' : ''}`,
+                type: 'target_service_error',
+                status: originalStatusCode
+              }
+            }));
+            return;
+          }
+        });
+      }
+    }
+  });
+  
+  if (proxy) {
+    const maskedProxy = `${proxy.host}:${proxy.port}` + (proxy.auth ? ' (with auth)' : '');
+    console.log(`Using proxy: ${maskedProxy}`);
+  } else {
+    console.log('Direct connection (no proxy)');
+  }
+  
+  middleware(req, res, next);
+});
+
+// Modern enhanced dashboard homepage
+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>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">
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/dist/tippy.css">
+      <script src="https://cdn.jsdelivr.net/npm/marked@4.2.5/marked.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/dist/tippy.umd.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/dompurify@2.4.0/dist/purify.min.js"></script>
+      <style>
+        :root {
+          --primary-color: #5D5CDE;
+          --primary-light: #8687E7;
+          --primary-dark: #4945C4;
+          --secondary-color: #10b981;
+          --accent-color: #f97316;
+          --bg-dark: #111827;
+          --bg-card: #1f2937;
+          --card-light: #2a3441;
+          --text-primary: #f3f4f6;
+          --text-secondary: #d1d5db;
+          --text-muted: #9ca3af;
+          --border-color: #374151;
+          --success-bg: #065f46;
+          --success-text: #a7f3d0;
+          --error-bg: #7f1d1d;
+          --error-text: #fecaca;
+          --warning-bg: #92400e;
+          --warning-text: #fde68a;
+          --input-bg: #1e293b;
+          --hover-bg: #2d3748;
+          --shadow-color: rgba(0, 0, 0, 0.25);
+          --backdrop-blur: blur(10px);
+          --toast-bg: rgba(31, 41, 55, 0.9);
+          --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .light-theme {
+          --bg-dark: #f1f5f9;
+          --bg-card: #ffffff;
+          --card-light: #f8fafc;
+          --text-primary: #0f172a;
+          --text-secondary: #1e293b;
+          --text-muted: #475569;
+          --border-color: #e2e8f0;
+          --input-bg: #f8fafc;
+          --hover-bg: #f1f5f9;
+          --shadow-color: rgba(0, 0, 0, 0.1);
+          --toast-bg: rgba(255, 255, 255, 0.9);
+        }
+
+        body {
+          background-color: var(--bg-dark);
+          color: var(--text-primary);
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          transition: var(--theme-transition);
+          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, background-color 0.3s ease;
+          z-index: 30;
+        }
+
+        .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-section {
+          padding: 1rem 0.75rem 0.5rem;
+          font-size: 0.75rem;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          color: var(--text-muted);
+        }
+
+        .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);
+          position: relative;
+        }
+
+        .nav-item:hover {
+          background-color: var(--hover-bg);
+          color: var(--text-primary);
+        }
+
+        .nav-item.active {
+          background-color: var(--primary-color);
+          color: white;
+        }
+
+        .nav-item.active::before {
+          content: '';
+          position: absolute;
+          left: -0.5rem;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 0.25rem;
+          height: 1.5rem;
+          background-color: var(--accent-color);
+          border-radius: 0 0.125rem 0.125rem 0;
+        }
+
+        .nav-item i {
+          width: 1.25rem;
+          margin-right: 0.75rem;
+          text-align: center;
+        }
+
+        .beta-tag {
+          background-color: var(--accent-color);
+          color: white;
+          font-size: 0.7rem;
+          padding: 0.1rem 0.4rem;
+          border-radius: 0.25rem;
+          margin-left: 0.5rem;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+        }
+
+        .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, background-color 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;
+          display: flex;
+          align-items: center;
+          gap: 0.375rem;
+        }
+
+        .status-badge i {
+          font-size: 0.75rem;
+        }
+
+        .status-badge.error {
+          background-color: var(--error-bg);
+          color: var(--error-text);
+        }
+
+        .status-badge.warning {
+          background-color: var(--warning-bg);
+          color: var(--warning-text);
+        }
+
+        .info-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+          gap: 1rem;
+        }
+
+        .info-item {
+          background-color: var(--card-light);
+          border-radius: 0.5rem;
+          border: 1px solid var(--border-color);
+          padding: 1rem;
+          display: flex;
+          flex-direction: column;
+          transition: background-color 0.3s ease;
+        }
+
+        .info-label {
+          color: var(--text-muted);
+          font-size: 0.875rem;
+          margin-bottom: 0.5rem;
+          display: flex;
+          align-items: center;
+          gap: 0.375rem;
+        }
+
+        .info-label i {
+          color: var(--text-secondary);
+        }
+
+        .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;
+          scrollbar-width: thin;
+          scrollbar-color: var(--primary-color) var(--bg-dark);
+        }
+
+        .model-grid::-webkit-scrollbar {
+          width: 6px;
+        }
+
+        .model-grid::-webkit-scrollbar-track {
+          background: var(--bg-dark);
+          border-radius: 3px;
+        }
+
+        .model-grid::-webkit-scrollbar-thumb {
+          background-color: var(--primary-color);
+          border-radius: 3px;
+        }
+
+        .model-item {
+          background-color: var(--card-light);
+          border-radius: 0.5rem;
+          border: 1px solid var(--border-color);
+          padding: 1rem;
+          transition: all 0.2s ease;
+          position: relative;
+          cursor: pointer;
+        }
+
+        .model-item:hover {
+          background-color: var(--hover-bg);
+          transform: translateY(-2px);
+          box-shadow: 0 4px 8px var(--shadow-color);
+        }
+
+        .model-item.selected {
+          border-color: var(--primary-color);
+          background-color: var(--hover-bg);
+        }
+
+        .model-item.selected::after {
+          content: '✓';
+          position: absolute;
+          right: 10px;
+          bottom: 10px;
+          background-color: var(--primary-color);
+          color: white;
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 12px;
+        }
+
+        .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);
+          transition: background-color 0.3s ease;
+        }
+
+        .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;
+          transition: background-color 0.3s ease;
+        }
+
+        .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;
+          display: inline-flex;
+          align-items: center;
+          gap: 0.375rem;
+        }
+
+        .copy-btn:hover {
+          background-color: var(--primary-dark);
+        }
+
+        .copy-btn:active {
+          transform: scale(0.98);
+        }
+
+        .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;
+          flex-wrap: wrap;
+          gap: 1rem;
+          background-color: var(--bg-card);
+          transition: background-color 0.3s ease;
+        }
+
+        .chat-body {
+          flex-grow: 1;
+          overflow-y: auto;
+          padding: 1rem;
+          scrollbar-width: thin;
+          scrollbar-color: var(--primary-color) var(--bg-dark);
+        }
+
+        .chat-body::-webkit-scrollbar {
+          width: 6px;
+        }
+
+        .chat-body::-webkit-scrollbar-track {
+          background: var(--bg-dark);
+        }
+
+        .chat-body::-webkit-scrollbar-thumb {
+          background-color: var(--primary-color);
+          border-radius: 3px;
+        }
+
+        .message-list {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+
+        .message {
+          display: flex;
+          max-width: 80%;
+          animation: fadeInUp 0.3s ease;
+        }
+
+        .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(--card-light);
+          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;
+        }
+
+        .message-actions {
+          visibility: hidden;
+          opacity: 0;
+          position: absolute;
+          right: 10px;
+          top: -20px;
+          display: flex;
+          gap: 5px;
+          transition: visibility 0s, opacity 0.3s;
+        }
+
+        .message:hover .message-actions {
+          visibility: visible;
+          opacity: 1;
+        }
+
+        .message-action-btn {
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          background: var(--bg-card);
+          border: 1px solid var(--border-color);
+          color: var(--text-secondary);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          font-size: 12px;
+          transition: all 0.2s;
+        }
+
+        .message-action-btn:hover {
+          background: var(--primary-color);
+          color: white;
+        }
+
+        .chat-input {
+          padding: 1rem;
+          border-top: 1px solid var(--border-color);
+          background-color: var(--bg-card);
+          transition: background-color 0.3s ease;
+        }
+
+        .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;
+          transition: border-color 0.3s ease, background-color 0.3s ease;
+        }
+
+        .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);
+          transform: scale(1.05);
+        }
+
+        .send-btn:active {
+          transform: scale(0.95);
+        }
+
+        .send-btn:disabled {
+          background-color: var(--border-color);
+          cursor: not-allowed;
+          transform: none;
+        }
+
+        .model-select-container {
+          display: flex;
+          flex-wrap: wrap;
+          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 2rem 0.5rem 0.75rem;
+          font-size: 1rem;
+          flex-grow: 1;
+          appearance: none;
+          -webkit-appearance: none;
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+          background-repeat: no-repeat;
+          background-position: right 0.5rem center;
+          background-size: 1.5em;
+          transition: border-color 0.3s ease, background-color 0.3s ease;
+          min-width: 200px;
+        }
+
+        .model-select:focus {
+          outline: none;
+          border-color: var(--primary-color);
+        }
+
+        .model-label {
+          color: var(--text-secondary);
+          font-weight: 500;
+          white-space: nowrap;
+        }
+
+        .chat-options {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+        }
+
+        .option-label {
+          color: var(--text-secondary);
+          font-size: 0.875rem;
+        }
+
+        .button-group {
+          display: flex;
+          gap: 0.5rem;
+          flex-wrap: wrap;
+        }
+
+        .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;
+          font-size: 0.875rem;
+        }
+
+        .btn:hover {
+          background-color: var(--primary-dark);
+        }
+
+        .btn:active {
+          transform: scale(0.98);
+        }
+
+        .btn.outline {
+          background-color: transparent;
+          color: var(--text-secondary);
+          border: 1px solid var(--border-color);
+        }
+
+        .btn.outline:hover {
+          background-color: var(--hover-bg);
+          color: var(--text-primary);
+        }
+
+        .btn.small {
+          padding: 0.25rem 0.75rem;
+          font-size: 0.75rem;
+        }
+
+        .system-message {
+          background-color: var(--card-light);
+          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;
+          border-left: 3px solid var(--text-muted);
+          animation: fadeIn 0.5s ease;
+        }
+
+        .system-message i {
+          margin-right: 0.5rem;
+          font-size: 1rem;
+        }
+
+        .system-message.error {
+          border-left-color: var(--error-bg);
+          background-color: rgba(127, 29, 29, 0.1);
+        }
+
+        .system-message.warning {
+          border-left-color: var(--warning-bg);
+          background-color: rgba(146, 64, 14, 0.1);
+        }
+
+        .system-message.info {
+          border-left-color: var(--primary-color);
+          background-color: rgba(79, 70, 229, 0.1);
+        }
+
+        .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);
+        }
+
+        .status-indicator.warning {
+          background-color: var(--warning-bg);
+        }
+
+        .mobile-menu-btn {
+          display: none;
+          background: none;
+          border: none;
+          color: var(--text-primary);
+          font-size: 1.5rem;
+          cursor: pointer;
+          padding: 0.5rem;
+          z-index: 40;
+        }
+
+        .settings-row {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 1rem;
+          padding-bottom: 1rem;
+          border-bottom: 1px solid var(--border-color);
+        }
+
+        .settings-row:last-child {
+          border-bottom: none;
+          margin-bottom: 0;
+          padding-bottom: 0;
+        }
+
+        .settings-label {
+          color: var(--text-primary);
+          font-weight: 500;
+        }
+
+        .settings-description {
+          color: var(--text-muted);
+          font-size: 0.875rem;
+          margin-top: 0.25rem;
+        }
+
+        .settings-control {
+          min-width: 100px;
+        }
+
+        .toggle {
+          position: relative;
+          display: inline-block;
+          width: 48px;
+          height: 24px;
+        }
+
+        .toggle input {
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+
+        .toggle-slider {
+          position: absolute;
+          cursor: pointer;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: var(--border-color);
+          transition: .4s;
+          border-radius: 24px;
+        }
+
+        .toggle-slider:before {
+          position: absolute;
+          content: "";
+          height: 18px;
+          width: 18px;
+          left: 3px;
+          bottom: 3px;
+          background-color: white;
+          transition: .4s;
+          border-radius: 50%;
+        }
+
+        .toggle input:checked + .toggle-slider {
+          background-color: var(--primary-color);
+        }
+
+        .toggle input:checked + .toggle-slider:before {
+          transform: translateX(24px);
+        }
+
+        .parameter-row {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 1rem;
+          align-items: center;
+          margin-bottom: 1rem;
+        }
+
+        .parameter-control {
+          display: flex;
+          flex-direction: column;
+          min-width: 150px;
+          flex: 1;
+        }
+
+        .parameter-label {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 0.25rem;
+        }
+
+        .parameter-name {
+          color: var(--text-secondary);
+          font-size: 0.875rem;
+        }
+
+        .parameter-value {
+          color: var(--primary-light);
+          font-size: 0.875rem;
+          font-weight: 500;
+        }
+
+        input[type="range"] {
+          -webkit-appearance: none;
+          width: 100%;
+          height: 6px;
+          background: var(--border-color);
+          border-radius: 3px;
+          outline: none;
+        }
+
+        input[type="range"]::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          background: var(--primary-color);
+          cursor: pointer;
+          border: 2px solid white;
+        }
+
+        input[type="range"]::-moz-range-thumb {
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          background: var(--primary-color);
+          cursor: pointer;
+          border: 2px solid white;
+        }
+
+        .number-input {
+          background-color: var(--input-bg);
+          border: 1px solid var(--border-color);
+          color: var(--text-primary);
+          border-radius: 0.375rem;
+          padding: 0.375rem 0.5rem;
+          font-size: 0.875rem;
+          width: 100%;
+          transition: border-color 0.3s ease;
+        }
+
+        .number-input:focus {
+          outline: none;
+          border-color: var(--primary-color);
+        }
+
+        .toast-container {
+          position: fixed;
+          top: 1rem;
+          right: 1rem;
+          z-index: 9999;
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+          max-width: 350px;
+        }
+
+        .toast {
+          background-color: var(--toast-bg);
+          color: var(--text-primary);
+          border-radius: 0.5rem;
+          padding: 1rem;
+          box-shadow: 0 4px 6px var(--shadow-color);
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          animation: slideInRight 0.3s, fadeOut 0.3s 2.7s;
+          backdrop-filter: var(--backdrop-blur);
+          border-left: 4px solid var(--primary-color);
+        }
+
+        .toast.success {
+          border-left-color: var(--success-bg);
+        }
+
+        .toast.error {
+          border-left-color: var(--error-bg);
+        }
+
+        .toast.warning {
+          border-left-color: var(--warning-bg);
+        }
+
+        .toast-content {
+          flex: 1;
+        }
+
+        .toast-title {
+          font-weight: 600;
+          margin-bottom: 0.125rem;
+        }
+
+        .toast-message {
+          font-size: 0.875rem;
+          color: var(--text-secondary);
+        }
+
+        .toast-icon {
+          font-size: 1.25rem;
+        }
+
+        .toast-close {
+          color: var(--text-muted);
+          cursor: pointer;
+          font-size: 1.25rem;
+          padding: 0.125rem;
+        }
+
+        .toast-close:hover {
+          color: var(--text-primary);
+        }
+
+        .conversation-list {
+          max-height: calc(100vh - 200px);
+          overflow-y: auto;
+        }
+
+        .conversation-item {
+          display: flex;
+          align-items: center;
+          padding: 0.75rem 1rem;
+          border-radius: 0.375rem;
+          margin-bottom: 0.5rem;
+          cursor: pointer;
+          color: var(--text-secondary);
+          transition: all 0.2s ease;
+        }
+
+        .conversation-item:hover {
+          background-color: var(--hover-bg);
+          color: var(--text-primary);
+        }
+
+        .conversation-item.active {
+          background-color: var(--card-light);
+          color: var(--primary-light);
+          font-weight: 500;
+        }
+
+        .conversation-icon {
+          margin-right: 0.75rem;
+          color: var(--text-muted);
+        }
+
+        .conversation-title {
+          flex: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .conversation-time {
+          font-size: 0.75rem;
+          color: var(--text-muted);
+        }
+
+        .modal-backdrop {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: rgba(0, 0, 0, 0.5);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 50;
+          backdrop-filter: var(--backdrop-blur);
+          transition: all 0.3s ease;
+        }
+
+        .modal {
+          background-color: var(--bg-card);
+          border-radius: 0.75rem;
+          width: 90%;
+          max-width: 500px;
+          max-height: 90vh;
+          overflow-y: auto;
+          box-shadow: 0 10px 25px var(--shadow-color);
+          animation: fadeInUp 0.3s ease;
+        }
+
+        .modal-header {
+          padding: 1.25rem;
+          border-bottom: 1px solid var(--border-color);
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+
+        .modal-title {
+          font-size: 1.25rem;
+          font-weight: 600;
+          color: var(--text-primary);
+        }
+
+        .modal-body {
+          padding: 1.25rem;
+        }
+
+        .modal-footer {
+          padding: 1.25rem;
+          border-top: 1px solid var(--border-color);
+          display: flex;
+          justify-content: flex-end;
+          gap: 0.75rem;
+        }
+
+        .modal-close {
+          color: var(--text-muted);
+          cursor: pointer;
+          font-size: 1.25rem;
+        }
+
+        .modal-close:hover {
+          color: var(--text-primary);
+        }
+
+        /* Custom scrollbar for chat */
+        .chat-body::-webkit-scrollbar {
+          width: 6px;
+        }
+
+        .chat-body::-webkit-scrollbar-track {
+          background: transparent;
+        }
+
+        .chat-body::-webkit-scrollbar-thumb {
+          background-color: var(--border-color);
+          border-radius: 3px;
+        }
+
+        .markdown-content {
+          color: inherit;
+          line-height: 1.5;
+        }
+
+        .markdown-content h1, 
+        .markdown-content h2, 
+        .markdown-content h3, 
+        .markdown-content h4, 
+        .markdown-content h5, 
+        .markdown-content h6 {
+          margin-top: 1.5em;
+          margin-bottom: 0.5em;
+          font-weight: 600;
+          line-height: 1.25;
+          color: var(--text-primary);
+        }
+
+        .markdown-content h1 { font-size: 1.5em; }
+        .markdown-content h2 { font-size: 1.3em; }
+        .markdown-content h3 { font-size: 1.1em; }
+        .markdown-content h4 { font-size: 1em; }
+
+        .markdown-content p {
+          margin: 0.8em 0;
+        }
+
+        .markdown-content a {
+          color: var(--primary-light);
+          text-decoration: none;
+        }
+
+        .markdown-content a:hover {
+          text-decoration: underline;
+        }
+
+        .markdown-content code {
+          background-color: rgba(0, 0, 0, 0.1);
+          padding: 0.2em 0.4em;
+          border-radius: 3px;
+          font-family: monospace;
+          font-size: 0.9em;
+        }
+
+        .markdown-content pre {
+          background-color: rgba(0, 0, 0, 0.15);
+          padding: 0.8em;
+          border-radius: 5px;
+          overflow-x: auto;
+          margin: 1em 0;
+        }
+
+        .markdown-content pre code {
+          background-color: transparent;
+          padding: 0;
+        }
+
+        .markdown-content ul, .markdown-content ol {
+          margin: 0.8em 0;
+          padding-left: 2em;
+        }
+
+        .markdown-content li {
+          margin: 0.3em 0;
+        }
+
+        .markdown-content blockquote {
+          border-left: 3px solid var(--text-muted);
+          padding-left: 1em;
+          margin: 1em 0;
+          color: var(--text-secondary);
+        }
+
+        .markdown-content table {
+          border-collapse: collapse;
+          width: 100%;
+          margin: 1em 0;
+        }
+
+        .markdown-content th, .markdown-content td {
+          border: 1px solid var(--border-color);
+          padding: 0.5em;
+          text-align: left;
+        }
+
+        .markdown-content th {
+          background-color: rgba(0, 0, 0, 0.05);
+        }
+
+        .spinner {
+          border: 2px solid rgba(255, 255, 255, 0.1);
+          border-radius: 50%;
+          border-top: 2px solid var(--primary-light);
+          width: 18px;
+          height: 18px;
+          animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes slideInRight {
+          from {
+            transform: translateX(100%);
+            opacity: 0;
+          }
+          to {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+
+        @keyframes fadeOut {
+          from { opacity: 1; }
+          to { opacity: 0; }
+        }
+
+        /* 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: 30;
+            transform: translateX(-100%);
+          }
+          
+          .sidebar.open {
+            transform: translateX(0);
+          }
+          
+          .mobile-menu-btn {
+            display: flex;
+            position: fixed;
+            top: 1rem;
+            left: 1rem;
+            z-index: 40;
+            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;
+          }
+          
+          .message {
+            max-width: 90%;
+          }
+          
+          .toast-container {
+            left: 1rem;
+            right: 1rem;
+            max-width: unset;
+          }
+        }
+      </style>
+    </head>
+    <body>
+      <div class="toast-container" id="toast-container"></div>
+    
+      <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-6">
+            <div class="nav-section">Main</div>
+            <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-section mt-6">History</div>
+            <div class="nav-item" data-section="history">
+              <i class="fas fa-history"></i>
+              <span>Conversations</span>
+            </div>
+            
+            <div class="nav-section mt-6">System</div>
+            <div class="nav-item" data-section="settings">
+              <i class="fas fa-cog"></i>
+              <span>Settings</span>
+            </div>
+            <div class="nav-item" data-section="help">
+              <i class="fas fa-question-circle"></i>
+              <span>Help</span>
+              <span class="beta-tag">Beta</span>
+            </div>
+          </nav>
+          
+          <div class="mt-auto p-4 text-sm flex flex-col gap-3">
+            <button id="theme-toggle" class="btn outline small w-full">
+              <i class="fas fa-moon"></i>
+              <span>Toggle Dark Mode</span>
+            </button>
+            
+            <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-6">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">
+                    <i class="fas fa-circle-notch fa-spin"></i>
+                    <span>Checking...</span>
+                  </div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">
+                    <i class="fas fa-globe"></i>
+                    <span>Target Service</span>
+                  </div>
+                  <div class="info-value" id="target-service">${TARGET_URL}${API_PATH}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">
+                    <i class="fas fa-shield-alt"></i>
+                    <span>Proxy Status</span>
+                  </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-tachometer-alt"></i>
+                    <span>Performance</span>
+                  </div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">
+                    <i class="fas fa-clock"></i>
+                    <span>Request Timeout</span>
+                  </div>
+                  <div class="info-value">${TIMEOUT}ms</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">
+                    <i class="fas fa-network-wired"></i>
+                    <span>Service Port</span>
+                  </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>
+                <div class="flex gap-2 mt-2">
+                  <button class="copy-btn" id="copy-endpoint">
+                    <i class="fas fa-copy"></i> Copy to clipboard
+                  </button>
+                  <button class="btn outline" id="test-connection">
+                    <i class="fas fa-plug"></i> Test Connection
+                  </button>
+                </div>
+              </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="spinner"></div>
+                  <span class="ml-2">Loading models...</span>
+                </div>
+              </div>
+            </div>
+            
+            <div class="card mt-6">
+              <div class="card-header">
+                <div class="card-title">
+                  <i class="fas fa-chart-bar"></i>
+                  <span>Recent Activity</span>
+                </div>
+              </div>
+              <div id="recent-activity" class="mt-2">
+                <div class="text-center text-gray-400 py-4">
+                  <i class="fas fa-comment-slash text-3xl mb-2"></i>
+                  <p>No recent conversations.</p>
+                  <p class="text-sm mt-1">Start chatting to see your activity here.</p>
+                </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="">Select a model</option>
+                  </select>
+                </div>
+                <div class="chat-options">
+                  <div class="parameter-control">
+                    <div class="parameter-label">
+                      <span class="parameter-name">Temperature</span>
+                      <span class="parameter-value" id="temp-value">0.7</span>
+                    </div>
+                    <input type="range" id="temperature" min="0" max="2" step="0.1" value="0.7">
+                  </div>
+                  
+                  <div class="button-group">
+                    <button class="btn" id="new-chat-btn">
+                      <i class="fas fa-plus"></i>
+                      <span>New Chat</span>
+                    </button>
+                    <button class="btn outline" id="export-chat-btn">
+                      <i class="fas fa-download"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="chat-body" id="chat-body">
+                <div class="system-message info">
+                  <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 class="text-right text-xs text-gray-400 mt-1 mr-2">
+                  Press Enter to send, Shift+Enter for new line
+                </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>
+                <div class="flex gap-2">
+                  <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">
+                  <button class="btn outline small" id="refresh-models-btn">
+                    <i class="fas fa-sync-alt"></i>
+                  </button>
+                </div>
+              </div>
+              <div id="all-models" class="model-grid mt-4">
+                <div class="flex justify-center items-center p-4">
+                  <div class="spinner"></div>
+                  <span class="ml-2">Loading models...</span>
+                </div>
+              </div>
+            </div>
+            
+            <div class="card mt-6">
+              <div class="card-header">
+                <div class="card-title">
+                  <i class="fas fa-info-circle"></i>
+                  <span>Model Information</span>
+                </div>
+              </div>
+              <div id="model-info-content" class="mt-2">
+                <div class="text-center text-gray-400 py-4">
+                  <i class="fas fa-cube text-3xl mb-2"></i>
+                  <p>Select a model to view information.</p>
+                </div>
+              </div>
+            </div>
+          </section>
+          
+          <!-- Conversation History Section -->
+          <section id="section-history" class="content-section hidden">
+            <h1 class="text-2xl font-bold mb-4">Conversation History</h1>
+            
+            <div class="card">
+              <div class="card-header">
+                <div class="card-title">
+                  <i class="fas fa-history"></i>
+                  <span>Recent Conversations</span>
+                </div>
+                <button class="btn outline small" id="clear-history-btn">
+                  <i class="fas fa-trash"></i>
+                  <span>Clear All</span>
+                </button>
+              </div>
+              <div id="conversations-list" class="conversation-list mt-2">
+                <div class="text-center text-gray-400 py-4">
+                  <i class="fas fa-comment-slash text-3xl mb-2"></i>
+                  <p>No conversations yet.</p>
+                  <p class="text-sm mt-1">Your chat history will appear here.</p>
+                </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-sliders-h"></i>
+                  <span>Appearance</span>
+                </div>
+              </div>
+              <div class="settings-row">
+                <div>
+                  <div class="settings-label">Dark Mode</div>
+                  <div class="settings-description">Toggle between light and dark theme.</div>
+                </div>
+                <div class="settings-control">
+                  <label class="toggle">
+                    <input type="checkbox" id="dark-mode-toggle" checked>
+                    <span class="toggle-slider"></span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            
+            <div class="card mt-6">
+              <div class="card-header">
+                <div class="card-title">
+                  <i class="fas fa-robot"></i>
+                  <span>AI Settings</span>
+                </div>
+              </div>
+              <div class="settings-row">
+                <div>
+                  <div class="settings-label">Default Model</div>
+                  <div class="settings-description">Choose your preferred model for new chats.</div>
+                </div>
+                <div class="settings-control">
+                  <select id="default-model" class="model-select w-full">
+                    <option value="">Loading models...</option>
+                  </select>
+                </div>
+              </div>
+              <div class="settings-row">
+                <div>
+                  <div class="settings-label">Default Parameters</div>
+                  <div class="settings-description">Set default generation parameters.</div>
+                </div>
+                <div class="settings-control">
+                  <a href="#" class="text-primary-light" id="edit-params-btn">Edit Parameters</a>
+                </div>
+              </div>
+            </div>
+            
+            <div class="card mt-6">
+              <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">
+                  <i class="fas fa-globe"></i>
+                  <span>Target URL</span>
+                </div>
+                <div class="info-value">${TARGET_URL}</div>
+              </div>
+              <div class="info-item">
+                <div class="info-label">
+                  <i class="fas fa-sitemap"></i>
+                  <span>API Path</span>
+                </div>
+                <div class="info-value">${API_PATH}</div>
+              </div>
+              <div class="info-item">
+                <div class="info-label">
+                  <i class="fas fa-network-wired"></i>
+                  <span>Server Port</span>
+                </div>
+                <div class="info-value">${PORT}</div>
+              </div>
+              <div class="info-item">
+                <div class="info-label">
+                  <i class="fas fa-clock"></i>
+                  <span>Timeout Setting</span>
+                </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">
+                  <i class="fas fa-toggle-on"></i>
+                  <span>Proxy Status</span>
+                </div>
+                <div class="info-value">${proxyPool.length > 0 ? 'Enabled' : 'Disabled'}</div>
+              </div>
+              <div class="info-item">
+                <div class="info-label">
+                  <i class="fas fa-server"></i>
+                  <span>Active Proxies</span>
+                </div>
+                <div class="info-value">${proxyPool.length}</div>
+              </div>
+            </div>
+          </section>
+          
+          <!-- Help Section -->
+          <section id="section-help" class="content-section hidden">
+            <h1 class="text-2xl font-bold mb-4">Help & Documentation</h1>
+            
+            <div class="card">
+              <div class="card-header">
+                <div class="card-title">
+                  <i class="fas fa-book"></i>
+                  <span>Getting Started</span>
+                </div>
+              </div>
+              <div class="mt-2">
+                <h3 class="text-xl font-semibold mb-2">Welcome to the AI Dashboard</h3>
+                <p class="mb-4">This dashboard allows you to interact with various AI models through a simple interface.</p>
+                
+                <h4 class="text-lg font-semibold mb-2">Quick Start Guide</h4>
+                <ol class="list-decimal pl-6 mb-4 space-y-2">
+                  <li>Go to the <strong>Chat</strong> section using the sidebar navigation</li>
+                  <li>Select a model from the dropdown menu</li>
+                  <li>Type your message in the input field</li>
+                  <li>Press Enter or click the send button</li>
+                  <li>View the AI's response in the chat window</li>
+                </ol>
+                
+                <h4 class="text-lg font-semibold mb-2">API Usage</h4>
+                <p class="mb-2">To use the API in your applications:</p>
+                <div class="bg-input-bg p-3 rounded-md mb-4">
+                  <code>POST https://vidbye-cursor-ai.hf.space/hf/v1/chat/completions</code>
+                  <pre class="mt-2">{
+  "model": "gpt-4o",
+  "messages": [
+    {"role": "user", "content": "Hello, how are you?"}
+  ],
+  "temperature": 0.7
+}</pre>
+                </div>
+              </div>
+            </div>
+            
+            <div class="card mt-6">
+              <div class="card-header">
+                <div class="card-title">
+                  <i class="fas fa-question-circle"></i>
+                  <span>FAQ</span>
+                </div>
+              </div>
+              <div class="mt-2 space-y-4">
+                <div>
+                  <h4 class="font-semibold">What models are available?</h4>
+                  <p class="text-gray-400">The dashboard supports various OpenAI and Anthropic models including GPT-4o, Claude, and more.</p>
+                </div>
+                <div>
+                  <h4 class="font-semibold">How do I save my conversations?</h4>
+                  <p class="text-gray-400">Conversations are automatically saved in your browser's local storage. You can also export them using the download button in the chat interface.</p>
+                </div>
+                <div>
+                  <h4 class="font-semibold">What if I encounter an error?</h4>
+                  <p class="text-gray-400">Check your connection settings and make sure the target service is available. Most errors will be displayed with helpful messages.</p>
+                </div>
+                <div>
+                  <h4 class="font-semibold">Can I customize the model parameters?</h4>
+                  <p class="text-gray-400">Yes, you can adjust temperature and other parameters in the chat interface or set defaults in the Settings section.</p>
+                </div>
+              </div>
+            </div>
+          </section>
+        </main>
+      </div>
+      
+      <!-- Parameters Modal (Hidden by default) -->
+      <div id="params-modal" class="modal-backdrop hidden">
+        <div class="modal">
+          <div class="modal-header">
+            <h3 class="modal-title">Default Model Parameters</h3>
+            <div class="modal-close" id="close-params-modal">
+              <i class="fas fa-times"></i>
+            </div>
+          </div>
+          <div class="modal-body">
+            <div class="parameter-row">
+              <div class="parameter-control">
+                <div class="parameter-label">
+                  <span class="parameter-name">Temperature</span>
+                  <span class="parameter-value" id="modal-temp-value">0.7</span>
+                </div>
+                <input type="range" id="modal-temperature" min="0" max="2" step="0.1" value="0.7">
+                <p class="mt-1 text-xs text-gray-400">Controls randomness: Lower is more deterministic, higher is more creative.</p>
+              </div>
+            </div>
+            
+            <div class="parameter-row">
+              <div class="parameter-control">
+                <div class="parameter-label">
+                  <span class="parameter-name">Top P</span>
+                  <span class="parameter-value" id="modal-top-p-value">1.0</span>
+                </div>
+                <input type="range" id="modal-top-p" min="0" max="1" step="0.05" value="1.0">
+                <p class="mt-1 text-xs text-gray-400">Alternative to temperature, controls diversity of responses.</p>
+              </div>
+            </div>
+            
+            <div class="parameter-row">
+              <div class="parameter-control">
+                <div class="parameter-label">
+                  <span class="parameter-name">Max Tokens</span>
+                  <span class="parameter-value" id="modal-max-tokens-value">2048</span>
+                </div>
+                <input type="range" id="modal-max-tokens" min="256" max="8192" step="256" value="2048">
+                <p class="mt-1 text-xs text-gray-400">Maximum length of response.</p>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn outline" id="reset-params-btn">Reset to Defaults</button>
+            <button class="btn" id="save-params-btn">Save Changes</button>
+          </div>
+        </div>
+      </div>
+      
+      <script>
+        // Declare global variables
+        let chatHistory = [];
+        let conversations = [];
+        let selectedModel = '';
+        let darkMode = true;
+        let connectionState = {
+          connected: true,
+          status: 'Connected',
+        };
+        
+        // Model parameters
+        let modelParams = {
+          temperature: 0.7,
+          top_p: 1.0,
+          max_tokens: 2048
+        };
+        
+        // Initialize the dashboard
+        document.addEventListener('DOMContentLoaded', function() {
+          // Clear any potential startup modals that might be blocking access
+          forceCloseAllModals();
+          
+          // Load saved settings
+          loadSettings();
+          
+          // 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 endpointUrl = "https://vidbye-cursor-ai.hf.space/hf/v1";
+          document.getElementById('endpoint-url').textContent = endpointUrl;
+          
+          // Copy endpoint button
+          document.getElementById('copy-endpoint').addEventListener('click', () => {
+            navigator.clipboard.writeText(endpointUrl).then(() => {
+              showToast('Copied!', 'Endpoint URL copied to clipboard', 'success');
+            }).catch(() => {
+              showToast('Error', 'Failed to copy to clipboard', 'error');
+            });
+          });
+          
+          // Test connection button
+          document.getElementById('test-connection').addEventListener('click', async () => {
+            await checkConnectionStatus(true);
+          });
+          
+          // Initialize chat
+          initChat();
+          
+          // Initialize conversation history
+          loadConversations();
+          
+          // Fetch and display models
+          fetchModels();
+          
+          // Check connection status
+          checkConnectionStatus();
+          
+          // Set up theme toggles
+          document.getElementById('theme-toggle').addEventListener('click', toggleDarkMode);
+          document.getElementById('dark-mode-toggle').addEventListener('change', function() {
+            toggleDarkMode(this.checked);
+          });
+          
+          // Set up parameters modal with proper close handlers
+          document.getElementById('edit-params-btn').addEventListener('click', (e) => {
+            e.preventDefault();
+            openModal('params-modal');
+            updateModalValues();
+          });
+          
+          // Enhanced close functionality for the parameters modal
+          setupModalCloseHandlers('params-modal', 'close-params-modal');
+          
+          // Add click event to close modal when clicking outside
+          document.getElementById('params-modal').addEventListener('click', (e) => {
+            if (e.target.id === 'params-modal') {
+              closeModal('params-modal');
+            }
+          });
+          
+          // Add ESC key handler to close modals
+          document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+              closeAllModals();
+            }
+          });
+          
+          document.getElementById('modal-temperature').addEventListener('input', (e) => {
+            document.getElementById('modal-temp-value').textContent = e.target.value;
+          });
+          
+          document.getElementById('modal-top-p').addEventListener('input', (e) => {
+            document.getElementById('modal-top-p-value').textContent = e.target.value;
+          });
+          
+          document.getElementById('modal-max-tokens').addEventListener('input', (e) => {
+            document.getElementById('modal-max-tokens-value').textContent = e.target.value;
+          });
+          
+          document.getElementById('reset-params-btn').addEventListener('click', () => {
+            resetParameters();
+            updateModalValues();
+          });
+          
+          document.getElementById('save-params-btn').addEventListener('click', () => {
+            saveParameters();
+            closeModal('params-modal');
+            showToast('Saved', 'Default parameters updated', 'success');
+          });
+          
+          // Set up refresh models button
+          document.getElementById('refresh-models-btn').addEventListener('click', fetchModels);
+          
+          // Set up clear history button
+          document.getElementById('clear-history-btn').addEventListener('click', () => {
+            clearHistory();
+          });
+          
+          // Set up export chat button
+          document.getElementById('export-chat-btn').addEventListener('click', exportChat);
+          
+          // Initialize tooltips
+          if (typeof tippy !== 'undefined') {
+            tippy('[data-tippy-content]');
+          }
+          
+          // Force close any potential initial modals again after 500ms
+          setTimeout(forceCloseAllModals, 500);
+        });
+        
+        // Force close all modals
+        function forceCloseAllModals() {
+          document.querySelectorAll('.modal-backdrop').forEach(modal => {
+            modal.classList.add('hidden');
+          });
+          console.log('Closed all modals');
+        }
+        
+        // Close all modals
+        function closeAllModals() {
+          document.querySelectorAll('.modal-backdrop').forEach(modal => {
+            closeModal(modal.id);
+          });
+        }
+        
+        // Open modal
+        function openModal(modalId) {
+          const modal = document.getElementById(modalId);
+          if (modal) {
+            modal.classList.remove('hidden');
+          }
+        }
+        
+        // Close modal
+        function closeModal(modalId) {
+          const modal = document.getElementById(modalId);
+          if (modal) {
+            modal.classList.add('hidden');
+          }
+        }
+        
+        // Setup modal close handlers
+        function setupModalCloseHandlers(modalId, closeButtonId) {
+          // Close button
+          const closeButton = document.getElementById(closeButtonId);
+          if (closeButton) {
+            closeButton.addEventListener('click', () => {
+              closeModal(modalId);
+            });
+            
+            // Add direct extra handlers
+            closeButton.onclick = function() {
+              closeModal(modalId);
+            };
+          }
+          
+          // Add clickable backdrop closing
+          const modal = document.getElementById(modalId);
+          if (modal) {
+            modal.addEventListener('click', (e) => {
+              if (e.target === modal) {
+                closeModal(modalId);
+              }
+            });
+          }
+          
+          // Save button acts as close too
+          const saveButton = document.querySelector('#' + modalId + ' #save-params-btn');
+          if (saveButton) {
+            saveButton.addEventListener('click', () => {
+              closeModal(modalId);
+            });
+          }
+        }
+        
+        // Toggle dark mode
+        function toggleDarkMode(forceDark) {
+          if (typeof forceDark === 'boolean') {
+            darkMode = forceDark;
+          } else {
+            darkMode = !darkMode;
+          }
+          
+          if (darkMode) {
+            document.body.classList.remove('light-theme');
+            document.getElementById('theme-toggle').innerHTML = '<i class="fas fa-sun"></i><span>Toggle Light Mode</span>';
+          } else {
+            document.body.classList.add('light-theme');
+            document.getElementById('theme-toggle').innerHTML = '<i class="fas fa-moon"></i><span>Toggle Dark Mode</span>';
+          }
+          
+          document.getElementById('dark-mode-toggle').checked = darkMode;
+          
+          // Save setting
+          localStorage.setItem('dark-mode', darkMode);
+        }
+        
+        // Load saved settings
+        function loadSettings() {
+          // Load dark mode setting
+          const savedDarkMode = localStorage.getItem('dark-mode');
+          if (savedDarkMode !== null) {
+            toggleDarkMode(savedDarkMode === 'true');
+          } else {
+            // Default to user's system preference
+            const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+            toggleDarkMode(prefersDark);
+          }
+          
+          // Load saved parameters
+          const savedParams = localStorage.getItem('model-params');
+          if (savedParams) {
+            try {
+              modelParams = JSON.parse(savedParams);
+            } catch (e) {
+              console.error('Error parsing saved parameters:', e);
+            }
+          }
+          
+          // Load default model
+          const defaultModel = localStorage.getItem('default-model');
+          if (defaultModel) {
+            selectedModel = defaultModel;
+          }
+        }
+        
+        // Update modal values
+        function updateModalValues() {
+          document.getElementById('modal-temperature').value = modelParams.temperature;
+          document.getElementById('modal-temp-value').textContent = modelParams.temperature;
+          
+          document.getElementById('modal-top-p').value = modelParams.top_p;
+          document.getElementById('modal-top-p-value').textContent = modelParams.top_p;
+          
+          document.getElementById('modal-max-tokens').value = modelParams.max_tokens;
+          document.getElementById('modal-max-tokens-value').textContent = modelParams.max_tokens;
+        }
+        
+        // Reset parameters to defaults
+        function resetParameters() {
+          modelParams = {
+            temperature: 0.7,
+            top_p: 1.0,
+            max_tokens: 2048
+          };
+        }
+        
+        // Save parameters
+        function saveParameters() {
+          modelParams.temperature = parseFloat(document.getElementById('modal-temperature').value);
+          modelParams.top_p = parseFloat(document.getElementById('modal-top-p').value);
+          modelParams.max_tokens = parseInt(document.getElementById('modal-max-tokens').value);
+          
+          // Save to localStorage
+          localStorage.setItem('model-params', JSON.stringify(modelParams));
+          
+          // Update UI
+          document.getElementById('temp-value').textContent = modelParams.temperature;
+          document.getElementById('temperature').value = modelParams.temperature;
+        }
+        
+        // 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');
+          const tempSlider = document.getElementById('temperature');
+          const tempValue = document.getElementById('temp-value');
+          
+          // Set initial temperature
+          tempSlider.value = modelParams.temperature;
+          tempValue.textContent = modelParams.temperature;
+          
+          // 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;
+          });
+          
+          // Update temperature
+          tempSlider.addEventListener('input', () => {
+            tempValue.textContent = tempSlider.value;
+          });
+          
+          // Enable/disable send button based on model selection
+          modelSelect.addEventListener('change', () => {
+            selectedModel = modelSelect.value;
+            sendBtn.disabled = !messageInput.value.trim() || !selectedModel;
+            
+            // Save default model
+            if (selectedModel) {
+              localStorage.setItem('default-model', selectedModel);
+              
+              // Update select in settings
+              const defaultModelSelect = document.getElementById('default-model');
+              if (defaultModelSelect) {
+                defaultModelSelect.value = 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', () => {
+            if (chatHistory.length > 0) {
+              // Save current conversation if not empty
+              saveConversation();
+            }
+            
+            // Clear chat history and UI
+            chatHistory = [];
+            messageList.innerHTML = '';
+            const systemMessage = document.createElement('div');
+            systemMessage.className = 'system-message info';
+            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);
+            
+            // Update recent activity
+            updateRecentActivity();
+          });
+        }
+        
+        // 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');
+          const temperature = document.getElementById('temperature').value;
+          
+          // 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="spinner"></div>
+                  <span class="ml-2">Thinking...</span>
+                </div>
+              </div>
+            </div>
+          \`;
+          messageList.insertAdjacentHTML('beforeend', loadingHTML);
+          messageList.scrollTop = messageList.scrollHeight;
+          
+          try {
+            // Send request to API
+            const endpoint = "https://vidbye-cursor-ai.hf.space/hf/v1/chat/completions";
+            
+            const payload = {
+              model: modelSelect.value,
+              messages: messages,
+              temperature: parseFloat(temperature),
+              max_tokens: modelParams.max_tokens,
+              top_p: modelParams.top_p,
+              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) {
+              // Parse response as JSON - with error handling
+              let data;
+              try {
+                data = await response.json();
+              } catch (error) {
+                // If response is not valid JSON
+                const text = await response.text();
+                throw new Error(\`Invalid JSON response: \${text.substring(0, 100)}...\`);
+              }
+              
+              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()
+                });
+                
+                // Update recent activity
+                updateRecentActivity();
+                
+                // Update connection status
+                updateConnectionStatus(true, 'Connected');
+              } else {
+                // Handle empty response
+                addSystemMessage('Received an empty response from the model.', 'warning');
+              }
+            } else {
+              // Handle error response
+              let errorMessage;
+              try {
+                const errorData = await response.json();
+                errorMessage = errorData.error?.message || 'An error occurred while communicating with the API.';
+              } catch (e) {
+                // If the error response is not valid JSON
+                const text = await response.text();
+                errorMessage = \`Error (\${response.status}): \${text.substring(0, 100)}\`;
+              }
+              
+              addSystemMessage('Error: ' + errorMessage, 'error');
+              
+              // 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'), 'error');
+            
+            // 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' });
+          
+          // Create message element
+          const messageDiv = document.createElement('div');
+          messageDiv.className = \`message \${role}\`;
+          
+          // Create message bubble
+          const bubbleDiv = document.createElement('div');
+          bubbleDiv.className = 'message-bubble';
+          
+          // Create actions
+          const actionsDiv = document.createElement('div');
+          actionsDiv.className = 'message-actions';
+          actionsDiv.innerHTML = \`
+            <button class="message-action-btn" title="Copy to clipboard">
+              <i class="fas fa-copy"></i>
+            </button>
+          \`;
+          
+          // Process markdown for bot messages
+          if (role === 'bot') {
+            try {
+              // Sanitize and render markdown if libraries available
+              if (typeof DOMPurify !== 'undefined' && typeof marked !== 'undefined') {
+                const sanitizedContent = DOMPurify.sanitize(marked.parse(content));
+                const contentDiv = document.createElement('div');
+                contentDiv.className = 'markdown-content';
+                contentDiv.innerHTML = sanitizedContent;
+                bubbleDiv.appendChild(contentDiv);
+              } else {
+                // Fallback to plain text if libraries not available
+                bubbleDiv.textContent = content;
+              }
+            } catch (e) {
+              console.error('Error processing markdown:', e);
+              // Fallback to plain text
+              bubbleDiv.textContent = content;
+            }
+          } else {
+            // User messages - just escape HTML
+            bubbleDiv.textContent = content;
+          }
+          
+          // Add time
+          const timeDiv = document.createElement('div');
+          timeDiv.className = 'message-time';
+          timeDiv.textContent = timestamp;
+          bubbleDiv.appendChild(timeDiv);
+          
+          // Add actions to bubble
+          bubbleDiv.appendChild(actionsDiv);
+          
+          // Add copy functionality
+          const copyBtn = actionsDiv.querySelector('.message-action-btn');
+          copyBtn.addEventListener('click', () => {
+            navigator.clipboard.writeText(content).then(() => {
+              showToast('Copied!', 'Message copied to clipboard', 'success');
+            }).catch(() => {
+              showToast('Error', 'Failed to copy to clipboard', 'error');
+            });
+          });
+          
+          // Assemble message
+          messageDiv.appendChild(bubbleDiv);
+          messageList.appendChild(messageDiv);
+          
+          // Scroll to bottom
+          messageList.scrollTop = messageList.scrollHeight;
+        }
+        
+        // Add system message
+        function addSystemMessage(message, type = 'info') {
+          const messageList = document.getElementById('message-list');
+          
+          let icon;
+          switch(type) {
+            case 'error':
+              icon = 'exclamation-circle';
+              break;
+            case 'warning':
+              icon = 'exclamation-triangle';
+              break;
+            case 'info':
+            default:
+              icon = 'info-circle';
+          }
+          
+          const systemHTML = \`
+            <div class="system-message \${type}">
+              <i class="fas fa-\${icon}"></i>
+              <span>\${message}</span>
+            </div>
+          \`;
+          
+          messageList.insertAdjacentHTML('beforeend', systemHTML);
+          messageList.scrollTop = messageList.scrollHeight;
+        }
+        
+        // Show toast notification
+        function showToast(title, message, type = 'info') {
+          const toastContainer = document.getElementById('toast-container');
+          
+          let icon;
+          switch(type) {
+            case 'success':
+              icon = 'check-circle';
+              break;
+            case 'error':
+              icon = 'exclamation-circle';
+              break;
+            case 'warning':
+              icon = 'exclamation-triangle';
+              break;
+            case 'info':
+            default:
+              icon = 'info-circle';
+          }
+          
+          const toastId = 'toast-' + Date.now();
+          const toastHTML = \`
+            <div id="\${toastId}" class="toast \${type}">
+              <div class="toast-icon">
+                <i class="fas fa-\${icon}"></i>
+              </div>
+              <div class="toast-content">
+                <div class="toast-title">\${title}</div>
+                <div class="toast-message">\${message}</div>
+              </div>
+              <div class="toast-close">
+                <i class="fas fa-times"></i>
+              </div>
+            </div>
+          \`;
+          
+          toastContainer.insertAdjacentHTML('beforeend', toastHTML);
+          
+          // Add close functionality
+          const toast = document.getElementById(toastId);
+          const closeBtn = toast.querySelector('.toast-close');
+          closeBtn.addEventListener('click', () => {
+            toast.remove();
+          });
+          
+          // Auto remove after 3 seconds
+          setTimeout(() => {
+            if (toast && toast.parentNode) {
+              toast.classList.add('animate__fadeOut');
+              setTimeout(() => {
+                if (toast && toast.parentNode) {
+                  toast.remove();
+                }
+              }, 300);
+            }
+          }, 3000);
+        }
+        
+        // Fetch models from the API
+        async function fetchModels() {
+          try {
+            // Show loading state
+            const containers = ['popular-models', 'all-models'];
+            containers.forEach(id => {
+              const container = document.getElementById(id);
+              if (container) {
+                container.innerHTML = '<div class="flex justify-center items-center p-4"><div class="spinner"></div><span class="ml-2">Loading models...</span></div>';
+              }
+            });
+            
+            document.getElementById('chat-model-select').innerHTML = '<option value="">Loading models...</option>';
+            document.getElementById('default-model').innerHTML = '<option value="">Loading models...</option>';
+            
+            const link = "https://vidbye-cursor-ai.hf.space/hf/v1/models";
+            const response = await fetch(link);
+            
+            if (!response.ok) {
+              throw new Error(\`Failed to fetch models: \${response.status} \${response.statusText}\`);
+            }
+            
+            // Parse response as JSON - with error handling
+            let data;
+            try {
+              data = await response.json();
+            } catch (error) {
+              // If response is not valid JSON
+              const text = await response.text();
+              throw new Error(\`Invalid JSON response: \${text.substring(0, 100)}...\`);
+            }
+            
+            const popularModelsContainer = document.getElementById('popular-models');
+            const allModelsContainer = document.getElementById('all-models');
+            const modelSelect = document.getElementById('chat-model-select');
+            const defaultModelSelect = document.getElementById('default-model');
+            
+            // Clear containers
+            popularModelsContainer.innerHTML = '';
+            allModelsContainer.innerHTML = '';
+            modelSelect.innerHTML = '<option value="">Select a model</option>';
+            defaultModelSelect.innerHTML = '<option value="">Select a default 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 dropdowns
+              const option = document.createElement('option');
+              option.value = model.id;
+              option.textContent = model.id;
+              modelSelect.appendChild(option.cloneNode(true));
+              defaultModelSelect.appendChild(option);
+            });
+            
+            // Set selected model if exists
+            if (selectedModel) {
+              modelSelect.value = selectedModel;
+              defaultModelSelect.value = selectedModel;
+            }
+            
+            // 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');
+            
+            // Show success toast
+            showToast('Models Loaded', \`\${data.data.length} AI models available\`, 'success');
+          } 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);
+              if (container) {
+                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>';
+            document.getElementById('default-model').innerHTML = '<option value="">Failed to load models</option>';
+            
+            // Update connection status
+            updateConnectionStatus(false, 'Connection Error');
+            
+            // Show error toast
+            showToast('Error', 'Failed to load models: ' + error.message, 'error');
+          }
+        }
+        
+        // Create model item element
+        function createModelItem(model) {
+          const div = document.createElement('div');
+          div.className = 'model-item';
+          div.dataset.model = model.id;
+          div.innerHTML = \`
+            <span class="model-name">\${model.id}</span>
+            <span class="model-provider">\${model.owned_by}</span>
+          \`;
+          
+          // Add selected class if this is the current model
+          if (model.id === selectedModel) {
+            div.classList.add('selected');
+          }
+          
+          // Click to select model for chat
+          div.addEventListener('click', () => {
+            const chatModelSelect = document.getElementById('chat-model-select');
+            chatModelSelect.value = model.id;
+            selectedModel = model.id;
+            
+            // Update selected styling
+            document.querySelectorAll('.model-item').forEach(item => {
+              item.classList.remove('selected');
+            });
+            div.classList.add('selected');
+            
+            // Trigger change event
+            const event = new Event('change');
+            chatModelSelect.dispatchEvent(event);
+            
+            // Update model info
+            updateModelInfo(model);
+            
+            // Navigate to chat section if we're in the models section
+            if (document.getElementById('section-models').classList.contains('active')) {
+              document.querySelector('.nav-item[data-section="chat"]').click();
+            }
+          });
+          
+          // Show model info on right-click
+          div.addEventListener('contextmenu', (e) => {
+            e.preventDefault();
+            updateModelInfo(model);
+          });
+          
+          return div;
+        }
+        
+        // Update model info panel
+        function updateModelInfo(model) {
+          const modelInfoContent = document.getElementById('model-info-content');
+          
+          modelInfoContent.innerHTML = \`
+            <div class="p-4">
+              <h3 class="text-xl font-semibold mb-4">\${model.id}</h3>
+              
+              <div class="info-item">
+                <div class="info-label">Provider</div>
+                <div class="info-value">\${model.owned_by}</div>
+              </div>
+              
+              <div class="info-item">
+                <div class="info-label">Created</div>
+                <div class="info-value">\${new Date(model.created * 1000).toLocaleDateString()}</div>
+              </div>
+              
+              <div class="mt-4">
+                <button class="btn w-full" data-model-id="\${model.id}" id="select-model-btn">
+                  <i class="fas fa-check-circle"></i>
+                  Select This Model
+                </button>
+              </div>
+            </div>
+          \`;
+          
+          // Add select button functionality
+          document.getElementById('select-model-btn').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
+            document.querySelector('.nav-item[data-section="chat"]').click();
+          });
+        }
+        
+        // Check and update connection status
+        async function checkConnectionStatus(showFeedback = false) {
+          try {
+            if (showFeedback) {
+              // Update status to checking
+              document.getElementById('api-status').innerHTML = '<i class="fas fa-circle-notch fa-spin"></i><span>Checking...</span>';
+            }
+            
+            // Attempt to fetch models as a connection test
+            const endpoint = "https://vidbye-cursor-ai.hf.space/hf/v1/models";
+            
+            const response = await fetch(endpoint);
+            
+            if (response.ok) {
+              updateConnectionStatus(true, 'Connected');
+              if (showFeedback) {
+                showToast('Connected', 'Successfully connected to the API', 'success');
+              }
+            } else {
+              updateConnectionStatus(false, \`Error: \${response.status}\`);
+              if (showFeedback) {
+                showToast('Connection Error', \`Status code: \${response.status}\`, 'error');
+              }
+            }
+          } catch (error) {
+            updateConnectionStatus(false, 'Connection Error');
+            if (showFeedback) {
+              showToast('Connection Error', error.message, 'error');
+            }
+          }
+          
+          // Check again after 30 seconds if not manually triggered
+          if (!showFeedback) {
+            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.innerHTML = '<i class="fas fa-check-circle"></i><span>Active</span>';
+            }
+          } else {
+            indicator.classList.add('error');
+            statusText.textContent = status;
+            
+            if (apiStatus) {
+              apiStatus.classList.add('error');
+              apiStatus.innerHTML = '<i class="fas fa-exclamation-circle"></i><span>Error</span>';
+            }
+          }
+        }
+        
+        // Save current conversation
+        function saveConversation() {
+          if (chatHistory.length === 0) return;
+          
+          const model = document.getElementById('chat-model-select').value;
+          const firstUserMsg = chatHistory.find(msg => msg.role === 'user');
+          const title = firstUserMsg ? firstUserMsg.content.substring(0, 30) + (firstUserMsg.content.length > 30 ? '...' : '') : 'Conversation';
+          
+          const conversation = {
+            id: 'conv-' + Date.now(),
+            title: title,
+            model: model,
+            messages: [...chatHistory],
+            timestamp: new Date().toISOString()
+          };
+          
+          // Add to conversations array
+          conversations.unshift(conversation);
+          
+          // Limit to 20 conversations
+          if (conversations.length > 20) {
+            conversations = conversations.slice(0, 20);
+          }
+          
+          // Save to localStorage
+          localStorage.setItem('chat-conversations', JSON.stringify(conversations));
+          
+          // Update UI
+          updateConversationsList();
+          return conversation;
+        }
+        
+        // Load saved conversations
+        function loadConversations() {
+          const saved = localStorage.getItem('chat-conversations');
+          if (saved) {
+            try {
+              conversations = JSON.parse(saved);
+              updateConversationsList();
+              updateRecentActivity();
+            } catch (e) {
+              console.error('Error loading conversations:', e);
+            }
+          }
+        }
+        
+        // Update conversations list in UI
+        function updateConversationsList() {
+          const container = document.getElementById('conversations-list');
+          
+          if (conversations.length === 0) {
+            container.innerHTML = \`
+              <div class="text-center text-gray-400 py-4">
+                <i class="fas fa-comment-slash text-3xl mb-2"></i>
+                <p>No conversations yet.</p>
+                <p class="text-sm mt-1">Your chat history will appear here.</p>
+              </div>
+            \`;
+            return;
+          }
+          
+          let html = '';
+          
+          conversations.forEach(conv => {
+            const date = new Date(conv.timestamp);
+            const formattedDate = date.toLocaleDateString(undefined, { 
+              month: 'short', 
+              day: 'numeric' 
+            });
+            
+            html += \`
+              <div class="conversation-item" data-conversation-id="\${conv.id}">
+                <i class="fas fa-comment conversation-icon"></i>
+                <div class="conversation-title">\${conv.title}</div>
+                <div class="conversation-time">\${formattedDate}</div>
+              </div>
+            \`;
+          });
+          
+          container.innerHTML = html;
+          
+          // Add click events
+          container.querySelectorAll('.conversation-item').forEach(item => {
+            item.addEventListener('click', () => {
+              const convId = item.dataset.conversationId;
+              loadConversation(convId);
+            });
+          });
+        }
+        
+        // Update recent activity on dashboard
+        function updateRecentActivity() {
+          const container = document.getElementById('recent-activity');
+          
+          if (!container) return;
+          
+          if (conversations.length === 0 && chatHistory.length === 0) {
+            container.innerHTML = \`
+              <div class="text-center text-gray-400 py-4">
+                <i class="fas fa-comment-slash text-3xl mb-2"></i>
+                <p>No recent conversations.</p>
+                <p class="text-sm mt-1">Start chatting to see your activity here.</p>
+              </div>
+            \`;
+            return;
+          }
+          
+          let html = '';
+          
+          // Add current conversation if not empty
+          if (chatHistory.length > 0) {
+            const firstUserMsg = chatHistory.find(msg => msg.role === 'user');
+            const title = firstUserMsg ? firstUserMsg.content.substring(0, 30) + (firstUserMsg.content.length > 30 ? '...' : '') : 'Current conversation';
+            const model = document.getElementById('chat-model-select').value || 'Unknown model';
+            const msgCount = chatHistory.length;
+            
+            html += \`
+              <div class="conversation-item active">
+                <i class="fas fa-comment-dots conversation-icon"></i>
+                <div class="conversation-title">\${title}</div>
+                <div class="text-xs text-gray-400">\${model} · \${msgCount} message\${msgCount !== 1 ? 's' : ''}</div>
+              </div>
+            \`;
+          }
+          
+          // Add recent conversations (up to 5)
+          conversations.slice(0, 5).forEach(conv => {
+            const date = new Date(conv.timestamp);
+            const formattedDate = date.toLocaleDateString(undefined, { 
+              month: 'short', 
+              day: 'numeric' 
+            });
+            
+            html += \`
+              <div class="conversation-item" data-conversation-id="\${conv.id}">
+                <i class="fas fa-comment conversation-icon"></i>
+                <div class="conversation-title">\${conv.title}</div>
+                <div class="text-xs text-gray-400">\${conv.model} · \${formattedDate}</div>
+              </div>
+            \`;
+          });
+          
+          container.innerHTML = html;
+          
+          // Add click events
+          container.querySelectorAll('.conversation-item').forEach(item => {
+            if (item.dataset.conversationId) {
+              item.addEventListener('click', () => {
+                const convId = item.dataset.conversationId;
+                loadConversation(convId);
+                
+                // Navigate to chat
+                document.querySelector('.nav-item[data-section="chat"]').click();
+              });
+            }
+          });
+        }
+        
+        // Load a conversation
+        function loadConversation(conversationId) {
+          const conversation = conversations.find(c => c.id === conversationId);
+          if (!conversation) return;
+          
+          // Save current conversation if not empty
+          if (chatHistory.length > 0) {
+            saveConversation();
+          }
+          
+          // Load conversation
+          chatHistory = [...conversation.messages];
+          
+          // Update UI
+          const messageList = document.getElementById('message-list');
+          messageList.innerHTML = '';
+          
+          chatHistory.forEach(msg => {
+            if (msg.role === 'user' || msg.role === 'assistant') {
+              addMessageToChat(msg.role === 'user' ? 'user' : 'bot', msg.content);
+            }
+          });
+          
+          // Set model
+          const modelSelect = document.getElementById('chat-model-select');
+          if (modelSelect && conversation.model) {
+            modelSelect.value = conversation.model;
+          }
+          
+          // Highlight active conversation
+          document.querySelectorAll('.conversation-item').forEach(item => {
+            item.classList.remove('active');
+            if (item.dataset.conversationId === conversationId) {
+              item.classList.add('active');
+            }
+          });
+          
+          // Show toast
+          showToast('Conversation Loaded', 'Loaded: ' + conversation.title, 'info');
+        }
+        
+        // Clear conversation history
+        function clearHistory() {
+          // Show confirmation dialog
+          if (confirm('Are you sure you want to clear all conversation history? This cannot be undone.')) {
+            conversations = [];
+            localStorage.removeItem('chat-conversations');
+            updateConversationsList();
+            updateRecentActivity();
+            showToast('History Cleared', 'All conversation history has been deleted', 'warning');
+          }
+        }
+        
+        // Export chat as JSON
+        function exportChat() {
+          if (chatHistory.length === 0) {
+            showToast('Nothing to Export', 'Start a conversation first', 'warning');
+            return;
+          }
+          
+          // Save current conversation
+          const conversation = saveConversation();
+          
+          // Create file content
+          const fileContent = JSON.stringify(conversation, null, 2);
+          const blob = new Blob([fileContent], {type: 'application/json'});
+          const url = URL.createObjectURL(blob);
+          
+          // Create temporary link and trigger download
+          const link = document.createElement('a');
+          link.href = url;
+          link.download = \`conversation-\${new Date().toISOString().slice(0,10)}.json\`;
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          
+          // Cleanup
+          URL.revokeObjectURL(url);
+          
+          // Show toast
+          showToast('Exported', 'Conversation exported successfully', 'success');
+        }
+        
+        // Immediately close any modals on load
+        setTimeout(forceCloseAllModals, 100);
+      </script>
+    </body>
+    </html>
+  `;
+  res.send(htmlContent);
+});
+
+// Health check endpoint
+app.get('/health', (req, res) => {
+  res.status(200).json({
+    status: 'ok',
+    time: new Date().toISOString(),
+    proxyCount: proxyPool.length,
+    target: `${TARGET_URL}${API_PATH}`
+  });
+});
+
+// Start server
+app.listen(PORT, () => {
+  console.log(`HF Proxy server is running at PORT: ${PORT}`);
+  console.log(`Target service: ${TARGET_URL}${API_PATH}`);
+  console.log(`Proxy status: ${proxyPool.length > 0 ? 'Enabled' : 'Disabled'}`);
+});
\ No newline at end of file