|
|
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(); |
|
|
|
|
|
|
|
|
app.use(morgan('dev')); |
|
|
|
|
|
|
|
|
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`); |
|
|
|
|
|
|
|
|
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) => { |
|
|
|
|
|
const maskedProxy = proxy.replace(/(https?:\/\/)([^:]+):([^@]+)@/, '$1$2:****@'); |
|
|
console.log(` [${index + 1}] ${maskedProxy}`); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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 |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
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}`); |
|
|
|
|
|
|
|
|
if (proxyRes.statusCode >= 400) { |
|
|
let responseBody = ''; |
|
|
|
|
|
proxyRes.on('data', function(chunk) { |
|
|
responseBody += chunk; |
|
|
}); |
|
|
|
|
|
proxyRes.on('end', function() { |
|
|
try { |
|
|
|
|
|
JSON.parse(responseBody); |
|
|
|
|
|
} catch (e) { |
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
.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> |
|
|
|
|
|
<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 in the chat interface.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
</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() { |
|
|
// 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 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]'); |
|
|
} |
|
|
}); |
|
|
|
|
|
// 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; |
|
|
} |
|
|
} |
|
|
|
|
|
// 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'); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
`; |
|
|
res.send(htmlContent); |
|
|
}); |
|
|
|
|
|
|
|
|
app.get('/health', (req, res) => { |
|
|
res.status(200).json({ |
|
|
status: 'ok', |
|
|
time: new Date().toISOString(), |
|
|
proxyCount: proxyPool.length, |
|
|
target: `${TARGET_URL}${API_PATH}` |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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'}`); |
|
|
}); |
