|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Forge - AI Hub</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Turret+Road:wght@200;300;400;500;700;800&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
--bg-primary: #000800; |
|
|
--bg-secondary: #001000; |
|
|
--bg-tertiary: #001800; |
|
|
--text-primary: #004d00; |
|
|
--text-secondary: #003300; |
|
|
--text-accent: #006600; |
|
|
--border-color: #001a00; |
|
|
--success: #004000; |
|
|
--warning: #669900; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: var(--bg-primary); |
|
|
color: var(--text-primary); |
|
|
font-family: 'Turret Road', monospace; |
|
|
font-weight: 500; |
|
|
height: 100vh; |
|
|
overflow: hidden; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.loading-container { |
|
|
background-color: var(--bg-primary); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
height: 100vh; |
|
|
width: 100vw; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
z-index: 9999; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.loading-logo { |
|
|
width: 100px; |
|
|
opacity: 0.9; |
|
|
filter: drop-shadow(0 0 8px rgba(198, 40, 40, 0.3)); |
|
|
} |
|
|
|
|
|
.loading-text { |
|
|
margin-top: 20px; |
|
|
letter-spacing: 0.1em; |
|
|
font-weight: 500; |
|
|
font-size: 0.9rem; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
width: 0; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.sidebar.expanded, |
|
|
.sidebar:hover { |
|
|
width: 250px; |
|
|
padding: 16px; |
|
|
} |
|
|
|
|
|
.tab-button { |
|
|
transition: all 0.3s ease; |
|
|
border-bottom: 2px solid transparent; |
|
|
} |
|
|
|
|
|
.tab-button.active { |
|
|
border-bottom: 2px solid var(--primary-accent); |
|
|
color: var(--primary-accent); |
|
|
} |
|
|
|
|
|
.card { |
|
|
background-color: var(--bg-secondary); |
|
|
border: 1px solid var(--text-secondary); |
|
|
transition: all 0.2s ease-out; |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
border-color: var(--text-primary); |
|
|
box-shadow: 0 0 8px var(--text-accent); |
|
|
} |
|
|
|
|
|
.status-connected { |
|
|
background-color: var(--success); |
|
|
} |
|
|
|
|
|
.status-disconnected { |
|
|
background-color: var(--quaternary-accent); |
|
|
} |
|
|
|
|
|
.message-user { |
|
|
background-color: var(--bg-secondary); |
|
|
border-left: 3px solid var(--border-color); |
|
|
} |
|
|
|
|
|
.message-ai { |
|
|
background-color: var(--bg-tertiary); |
|
|
border-left: 3px solid var(--text-accent); |
|
|
} |
|
|
|
|
|
.modal { |
|
|
background-color: rgba(0, 0, 0, 0.9); |
|
|
backdrop-filter: blur(5px); |
|
|
} |
|
|
|
|
|
.tag { |
|
|
font-size: 0.75rem; |
|
|
padding: 0.2rem 0.5rem; |
|
|
border-radius: 4px; |
|
|
display: inline-block; |
|
|
margin-right: 0.3rem; |
|
|
margin-bottom: 0.3rem; |
|
|
} |
|
|
|
|
|
.tag-purpose { |
|
|
background-color: #002200; |
|
|
color: #00FF00; |
|
|
border: 1px solid var(--text-secondary); |
|
|
} |
|
|
|
|
|
.tag-finetuned { |
|
|
background-color: #003300; |
|
|
color: #00FF66; |
|
|
border: 1px solid var(--text-secondary); |
|
|
} |
|
|
|
|
|
.tag-original { |
|
|
background-color: #001100; |
|
|
color: #009900; |
|
|
border: 1px solid var(--text-secondary); |
|
|
} |
|
|
|
|
|
.tag-parameters { |
|
|
background-color: #002200; |
|
|
color: #00FF44; |
|
|
border: 1px solid var(--text-secondary); |
|
|
} |
|
|
|
|
|
.tag-distilled { |
|
|
background-color: #003300; |
|
|
color: #00FF88; |
|
|
border: 1px solid var(--text-secondary); |
|
|
} |
|
|
|
|
|
.code-block { |
|
|
background-color: #000000; |
|
|
font-family: 'Courier New', monospace; |
|
|
border: 1px solid var(--border-color); |
|
|
padding: 1rem; |
|
|
overflow-x: auto; |
|
|
} |
|
|
|
|
|
.code-keyword { color: #008800; } |
|
|
.code-function { color: #006600; } |
|
|
.code-string { color: #00AA00; } |
|
|
.code-number { color: #00CC44; } |
|
|
.code-comment { color: #003300; } |
|
|
.code-operator { color: #008800; } |
|
|
|
|
|
.filter-btn.active { |
|
|
background-color: var(--bg-secondary); |
|
|
border-color: var(--text-accent); |
|
|
color: var(--text-accent); |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.typing-indicator { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.typing-dot { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
background-color: var(--text-primary); |
|
|
border-radius: 50%; |
|
|
margin: 0 2px; |
|
|
animation: typingAnimation 1.4s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
.typing-dot:nth-child(1) { animation-delay: 0s; } |
|
|
.typing-dot:nth-child(2) { animation-delay: 0.2s; } |
|
|
.typing-dot:nth-child(3) { animation-delay: 0.4s; } |
|
|
|
|
|
@keyframes typingAnimation { |
|
|
0%, 60%, 100% { transform: translateY(0); } |
|
|
30% { transform: translateY(-5px); } |
|
|
} |
|
|
|
|
|
.parameter-slider::-webkit-slider-thumb { |
|
|
background: var(--primary-accent); |
|
|
} |
|
|
|
|
|
.parameter-slider::-moz-range-thumb { |
|
|
background: var(--primary-accent); |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: var(--text-secondary); |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: var(--text-primary); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="h-full flex flex-col"> |
|
|
|
|
|
<div id="loadingScreen" class="loading-container"> |
|
|
<div class="text-center"> |
|
|
<img src="logo_black_icon.png" alt="Prometheus Logo" class="loading-logo mb-4 mx-auto"> |
|
|
<h1 class="text-4xl font-bold text-[#D32F2F] mb-2">PROMETHEUS</h1> |
|
|
<p class="text-[#F7FAFC]">Initializing Forge...</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="appContainer" class="h-full flex flex-col hidden"> |
|
|
|
|
|
<header class="bg-black border-b border-[#1E1E1E] py-3 px-4 flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<img src="logo_black_icon.png" alt="Forge Logo" class="h-7 opacity-90"> |
|
|
<h1 class="text-lg font-medium tracking-wider">FORGE</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="group relative"> |
|
|
<button class="flex items-center space-x-2"> |
|
|
<span class="text-sm">Active Model:</span> |
|
|
<span class="font-medium text-[#F9A825] hover:text-[#FFC107]" id="activeModelIndicator">None</span> |
|
|
<i class="fas fa-chevron-down text-xs"></i> |
|
|
</button> |
|
|
<div class="absolute left-0 mt-2 w-48 bg-[#121212] border border-[#1E1E1E] rounded shadow-lg hidden group-hover:block z-10"> |
|
|
<div class="px-3 py-2 text-xs text-[#A0A0A0]">Foundation Models</div> |
|
|
<button class="w-full text-left px-3 py-2 text-sm hover:bg-[#1E1E1E]" data-model="gemini-1.5-flash"> |
|
|
<i class="fas fa-bolt mr-2 text-[#006600]"></i>gemini-1.5-flash |
|
|
</button> |
|
|
<button class="w-full text-left px-3 py-2 text-sm hover:bg-[#1E1E1E]" data-model="gpt-4o-mini"> |
|
|
<i class="fas fa-bolt mr-2 text-[#F4511E]"></i>gpt-4o-mini |
|
|
</button> |
|
|
<div class="px-3 py-2 text-xs text-[#A0A0A0]">Local Models</div> |
|
|
<button class="w-full text-left px-3 py-2 text-sm hover:bg-[#1E1E1E]" data-model="llama3-8b"> |
|
|
<i class="fas fa-server mr-2 text-[#76E050]"></i>llama3-8b |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-xs mr-1">v</span> |
|
|
<span class="text-xs text-[#A0A0A0] hover:text-white cursor-pointer">1.2.0</span> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex flex-1 overflow-hidden"> |
|
|
|
|
|
<div class="w-16 bg-[#0E0E0E] flex flex-col items-center py-4 border-r border-[#1E1E1E]"> |
|
|
<button class="tab-button active mb-6 p-2 rounded-lg flex flex-col items-center" data-tab="settings"> |
|
|
<i class="fas fa-cog text-xl mb-1"></i> |
|
|
<span class="text-xs">Settings</span> |
|
|
</button> |
|
|
<button class="tab-button mb-6 p-2 rounded-lg flex flex-col items-center" data-tab="models"> |
|
|
<i class="fas fa-brain text-xl mb-1"></i> |
|
|
<span class="text-xs">Models</span> |
|
|
</button> |
|
|
<button class="tab-button mb-6 p-2 rounded-lg flex flex-col items-center" data-tab="prompts"> |
|
|
<i class="fas fa-comment-alt text-xl mb-1"></i> |
|
|
<span class="text-xs">Prompts</span> |
|
|
</button> |
|
|
<button class="tab-button mb-6 p-2 rounded-lg flex flex-col items-center" data-tab="chat"> |
|
|
<i class="fas fa-comments text-xl mb-1"></i> |
|
|
<span class="text-xs">Chat</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<div id="settingsTab" class="tab-content p-4 flex-1 overflow-y-auto"> |
|
|
<h2 class="text-xl font-bold mb-6 text-[#F9A825]">AI Service Configuration</h2> |
|
|
<p class="text-sm text-[#A0A0A0] mb-6">Configure your connections to various AI services. Keys can be set via environment variables or entered directly below.</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
|
|
|
|
|
<div class="card rounded-lg p-4 cursor-pointer" data-service="gemini"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-[#004d00] flex items-center justify-center mr-3"> |
|
|
<span class="text-white font-bold">G</span> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold">Gemini</h3> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-xs text-[#006600] mr-2">▲ 78ms</span> |
|
|
<span class="text-xs text-[#A0A0A0]">90% uptime</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-xs mb-1 text-[#A0A0A0]">Model: <span class="text-[#006600]">gemini-pro</span></div> |
|
|
<div class="text-xs mb-1 text-[#A0A0A0]">Max Tokens: <span class="text-[#006600]">32,768</span></div> |
|
|
<div class="text-xs mb-1 text-[#A0A0A0]">Input: $0.50/1M tokens</div> |
|
|
<div class="text-xs mb-1 text-[#A0A0A0]">Output: $1.50/1M tokens</div> |
|
|
<div class="text-xs mb-2 text-[#A0A0A0]">API Endpoint:</div> |
|
|
<div class="text-xs mb-3 py-1 px-2 bg-[#001a00] rounded truncate" id="geminiEndpoint">Not configured</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<span class="status-indicator w-3 h-3 rounded-full mr-2" id="geminiStatus"></span> |
|
|
<span class="text-xs" id="geminiStatusText">Not configured</span> |
|
|
</div> |
|
|
<div class="flex space-x-1"> |
|
|
<button class="text-xs bg-[#001a00] px-2 py-0.5 rounded" title="Pricing info"> |
|
|
<i class="fas fa-dollar-sign"></i> |
|
|
</button> |
|
|
<span class="text-xs bg-[#001a00] px-2 py-0.5 rounded">API</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card rounded-lg p-4 cursor-pointer" data-service="openai"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-10 h-10 rounded bg-[#1E1E1E] flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-bolt text-[#F4511E]"></i> |
|
|
</div> |
|
|
<h3 class="font-bold">OpenAI</h3> |
|
|
</div> |
|
|
<div class="text-xs mb-2 text-[#A0A0A0]">API Endpoint:</div> |
|
|
<div class="text-xs mb-4 truncate" id="openaiEndpoint">Not configured</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="status-indicator w-3 h-3 rounded-full mr-2" id="openaiStatus"></span> |
|
|
<span class="text-xs" id="openaiStatusText">Not configured</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card rounded-lg p-4 cursor-pointer" data-service="ollama"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-10 h-10 rounded bg-[#1E1E1E] flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-server text-[#76E050]"></i> |
|
|
</div> |
|
|
<h3 class="font-bold">Ollama</h3> |
|
|
</div> |
|
|
<div class="text-xs mb-2 text-[#A0A0A0]">Local Endpoint:</div> |
|
|
<div class="text-xs mb-4 truncate" id="ollamaEndpoint">Not configured</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="status-indicator w-3 h-3 rounded-full mr-2" id="ollamaStatus"></span> |
|
|
<span class="text-xs" id="ollamaStatusText">Not configured</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card rounded-lg p-4 cursor-pointer" data-service="huggingface"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-10 h-10 rounded bg-[#1E1E1E] flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-heart text-[#E53935]"></i> |
|
|
</div> |
|
|
<h3 class="font-bold">Hugging Face</h3> |
|
|
</div> |
|
|
<div class="text-xs mb-2 text-[#A0A0A0]">API Endpoint:</div> |
|
|
<div class="text-xs mb-4 truncate" id="huggingfaceEndpoint">Not configured</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="status-indicator w-3 h-3 rounded-full mr-2" id="huggingfaceStatus"></span> |
|
|
<span class="text-xs" id="huggingfaceStatusText">Not configured</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card rounded-lg p-4 cursor-pointer" data-service="comfyui"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-10 h-10 rounded bg-[#1E1E1E] flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-image text-[#D32F2F]"></i> |
|
|
</div> |
|
|
<h3 class="font-bold">ComfyUI</h3> |
|
|
</div> |
|
|
<div class="text-xs mb-2 text-[#A0A0A0]">Local Endpoint:</div> |
|
|
<div class="text-xs mb-4 truncate" id="comfyuiEndpoint">Not configured</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="status-indicator w-3 h-3 rounded-full mr-2" id="comfyuiStatus"></span> |
|
|
<span class="text-xs" id="comfyuiStatusText">Not configured</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="modelsTab" class="tab-content p-4 flex-1 overflow-y-auto hidden"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<h2 class="text-xl font-bold text-[#F9A825]">AI Models</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="filter-btn active px-3 py-1 rounded bg-[#002200] text-[#00FF00] border border-[#003300] text-sm" data-filter="all"> |
|
|
All |
|
|
</button> |
|
|
<button class="filter-btn px-3 py-1 rounded bg-[#0E0E0E] hover:bg-[#1E1E1E] border border-[#1E1E1E] text-sm" data-filter="local"> |
|
|
Local |
|
|
</button> |
|
|
<button class="filter-btn px-3 py-1 rounded bg-[#0E0E0E] hover:bg-[#1E1E1E] border border-[#1E1E1E] text-sm" data-filter="api"> |
|
|
API |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<button id="filterBtn" class="bg-[#1E1E1E] hover:bg-[#2E2E2E] px-4 py-2 rounded flex items-center"> |
|
|
<i class="fas fa-filter mr-2"></i> |
|
|
<span>Filters</span> |
|
|
</button> |
|
|
|
|
|
<div id="filtersModal" class="modal fixed inset-0 z-50 items-center justify-center hidden"> |
|
|
<div class="bg-[#121212] border border-[#1E1E1E] rounded-lg w-full max-w-md p-6 mx-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-bold">Filter Models</h3> |
|
|
<button id="closeFiltersModal" class="text-xl">×</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm mb-2">Model Type</label> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<button class="filter-tag active" data-filter="all">All</button> |
|
|
<button class="filter-tag" data-filter="api">API</button> |
|
|
<button class="filter-tag" data-filter="local">Local</button> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm mb-2">Purpose</label> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<button class="filter-tag" data-filter="text">Text</button> |
|
|
<button class="filter-tag" data-filter="code">Code</button> |
|
|
<button class="filter-tag" data-filter="multimodal">Multimodal</button> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm mb-2">Size</label> |
|
|
<input type="range" min="0" max="100" value="50" class="w-full parameter-slider"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-end space-x-3"> |
|
|
<button id="resetFiltersBtn" class="px-4 py-2 rounded bg-[#1E1E1E] hover:bg-[#2E2E2E] text-sm"> |
|
|
Reset |
|
|
</button> |
|
|
<button id="applyFiltersBtn" class="px-4 py-2 rounded bg-[#D32F2F] hover:bg-[#E53935] text-sm"> |
|
|
Apply |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-4 model-container"> |
|
|
<div class="card rounded-lg p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold">gemini-1.5-flash</h3> |
|
|
<div class="flex items-center"> |
|
|
<span class="status-indicator w-2 h-2 rounded-full mr-2 bg-green-500"></span> |
|
|
<button class="bg-[#1E1E1E] hover:bg-[#2E2E2E] px-3 py-1 rounded text-sm"> |
|
|
Select |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-[#A0A0A0] mb-3">Ultra-fast Gemini 2.5 optimized for speed and quality with 128K token context.</p> |
|
|
<div class="flex flex-wrap mb-3"> |
|
|
<span class="tag tag-purpose">Text & Code</span> |
|
|
<span class="tag tag-original">Google</span> |
|
|
<span class="tag tag-parameters">128K context</span> |
|
|
<span class="tag tag-distilled">Distilled</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-[#A0A0A0]"> |
|
|
<span>API Only</span> |
|
|
<span>~1.5GB</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card rounded-lg p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold">gpt-4o-mini</h3> |
|
|
<button class="bg-[#1E1E1E] hover:bg-[#2E2E2E] px-3 py-1 rounded text-sm"> |
|
|
Select |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-sm text-[#A0A0A0] mb-3">Smaller, efficient version of GPT-4 optimized for common tasks.</p> |
|
|
<div class="flex flex-wrap mb-3"> |
|
|
<span class="tag tag-purpose">Chat</span> |
|
|
<span class="tag tag-original">OpenAI</span> |
|
|
<span class="tag tag-parameters">8K context</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-[#A0A0A0]"> |
|
|
<span>API Only</span> |
|
|
<span>~2.1GB</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card rounded-lg p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold">llama3-8b</h3> |
|
|
<button class="bg-[#1E1E1E] hover:bg-[#2E2E2E] px-3 py-1 rounded text-sm"> |
|
|
Select |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-sm text-[#A0A0A0] mb-3">Meta's 8 billion parameter model, general purpose.</p> |
|
|
<div class="flex flex-wrap mb-3"> |
|
|
<span class="tag tag-purpose">Text</span> |
|
|
<span class="tag tag-original">Meta</span> |
|
|
<span class="tag tag-parameters">8K context</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-[#A0A0A0]"> |
|
|
<span>Local/API</span> |
|
|
<span>4.1GB</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="promptsTab" class="tab-content p-4 flex-1 overflow-y-auto hidden"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-[#F9A825]">System Prompts</h2> |
|
|
<button id="addPromptBtn" class="bg-[#1E1E1E] hover:bg-[#2E2E2E] px-4 py-2 rounded flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> |
|
|
<span>Add Prompt</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
|
|
|
<div class="card rounded-lg p-4"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="font-bold">General Assistant</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded"> |
|
|
Edit |
|
|
</button> |
|
|
<button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded"> |
|
|
Select |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-[#A0A0A0] mb-2 truncate">You are a helpful, harmless, and honest AI assistant. Provide concise answers and ask for clarification when needed.</p> |
|
|
</div> |
|
|
|
|
|
<div class="card rounded-lg p-4"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="font-bold">Code Expert</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded"> |
|
|
Edit |
|
|
</button> |
|
|
<button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded"> |
|
|
Select |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-[#A0A0A0] mb-2 truncate">You are an expert programmer in all languages. Provide high-quality, efficient code with explanations. Format code properly.</p> |
|
|
</div> |
|
|
|
|
|
<div class="card rounded-lg p-4"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="font-bold">Creative Writer</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded"> |
|
|
Edit |
|
|
</button> |
|
|
<button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded"> |
|
|
Select |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-[#A0A0A0] mb-2 truncate">You are a creative writer with a distinctive voice. Generate engaging, original content with rich vocabulary and stylistic flair.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chatTab" class="tab-content flex-1 flex flex-col overflow-hidden hidden"> |
|
|
|
|
|
<div class="flex border-b border-[#1E1E1E]"> |
|
|
<button class="prompt-tab active px-4 py-2 text-sm border-b-2 border-[#007700]" data-prompt="general"> |
|
|
General |
|
|
</button> |
|
|
<button class="prompt-tab px-4 py-2 text-sm" data-prompt="code"> |
|
|
Code |
|
|
</button> |
|
|
<button class="prompt-tab px-4 py-2 text-sm" data-prompt="writer"> |
|
|
Writer |
|
|
</button> |
|
|
<div class="flex-1 border-b border-[#1E1E1E]"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4" style="max-height: calc(100vh - 200px);"> |
|
|
|
|
|
<div class="message-user rounded p-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-6 h-6 rounded-full bg-[#F9A825] flex items-center justify-center text-xs font-bold mr-2">U</div> |
|
|
<span class="text-sm font-medium">User</span> |
|
|
</div> |
|
|
<div class="flex space-x-1"> |
|
|
<button class="text-xs p-1 opacity-0 group-hover:opacity-100" title="Copy"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
<button class="text-xs p-1 opacity-0 group-hover:opacity-100" title="Edit"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm">Explain quantum computing in simple terms.</p> |
|
|
<div class="mt-2 pt-2 border-t border-[#1E1E1E]"> |
|
|
<span class="text-xs text-[#A0A0A0]">Today at 2:15 PM</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="message-ai rounded p-4 group"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-6 h-6 rounded-full bg-[#F4511E] flex items-center justify-center text-xs font-bold mr-2">AI</div> |
|
|
<span class="text-sm font-medium" id="assistantName">Gemini-1.5-flash</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-1"> |
|
|
<button class="text-xs bg-[#1E1E1E] px-2 py-0.5 rounded" title="Tokens: 87"> |
|
|
<span class="text-xs">87 t</span> |
|
|
</button> |
|
|
<button class="text-xs p-1 opacity-0 group-hover:opacity-100" title="Copy"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
<button class="text-xs p-1 opacity-0 group-hover:opacity-100" title="Regenerate"> |
|
|
<i class="fas fa-sync-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-sm"> |
|
|
<p>Quantum computing is an area of computing focused on developing computer technologies centered around quantum theory principles. Unlike classical computers that use bits (0s or 1s), quantum computers use quantum bits or qubits that can represent and store information in both 0 and 1 simultaneously (superposition).</p> |
|
|
<div class="mt-3 flex items-center space-x-2"> |
|
|
<button class="text-xs bg-[#001a00] hover:bg-[#002200] px-2 py-1 rounded flex items-center"> |
|
|
<i class="fas fa-thumbs-up mr-1"></i> |
|
|
<span>Good</span> |
|
|
</button> |
|
|
<button class="text-xs bg-[#001a00] hover:bg-[#002200] px-2 py-1 rounded flex items-center"> |
|
|
<i class="fas fa-thumbs-down mr-1"></i> |
|
|
<span>Bad</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2 pt-2 border-t border-[#1E1E1E]"> |
|
|
<span class="text-xs text-[#A0A0A0]">Today at 2:15 PM • 0.78s</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-[#1E1E1E] p-3"> |
|
|
<div class="flex items-end space-x-2"> |
|
|
<div class="flex-1 bg-[#1E1E1E] rounded-lg p-2"> |
|
|
<textarea id="chatInput" class="w-full bg-transparent outline-none resize-none text-sm" rows="2" placeholder="Type your message here..."></textarea> |
|
|
</div> |
|
|
<button id="sendMessageBtn" class="h-10 w-10 rounded-lg bg-[#D32F2F] hover:bg-[#E53935] flex items-center justify-center"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center justify-between mt-2"> |
|
|
<div class="flex space-x-2"> |
|
|
<label class="cursor-pointer"> |
|
|
<button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded flex items-center"> |
|
|
<i class="fas fa-paperclip mr-1"></i> |
|
|
<span>Attach</span> |
|
|
</button> |
|
|
<input type="file" id="fileUpload" class="hidden" multiple> |
|
|
</label> |
|
|
<div id="filePreview" class="hidden fixed bottom-32 right-4 bg-[#1E1E1E] rounded-lg p-3 max-w-xs"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h4 class="text-sm font-medium">Attachments</h4> |
|
|
<button id="clearFilesBtn" class="text-xs bg-[#2E2E2E] hover:bg-[#3E3E3E] px-1 rounded"> |
|
|
Clear All |
|
|
</button> |
|
|
</div> |
|
|
<div id="fileList" class="text-xs space-y-1"></div> |
|
|
</div> |
|
|
<button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded"> |
|
|
<i class="fas fa-lock"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded flex items-center"> |
|
|
<i class="fas fa-search mr-1"></i> |
|
|
<span>Web</span> |
|
|
</button> |
|
|
<button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded flex items-center"> |
|
|
<i class="fas fa-code mr-1"></i> |
|
|
<span>Code</span> |
|
|
</button> |
|
|
<button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded flex items-center"> |
|
|
<i class="fas fa-cog mr-1"></i> |
|
|
<span>Params</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div id="serviceConfigModal" class="modal fixed inset-0 z-50 items-center justify-center hidden"> |
|
|
<div class="bg-[#121212] border border-[#1E1E1E] rounded-lg w-full max-w-md p-6 mx-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-bold" id="serviceConfigTitle">Configure Service</h3> |
|
|
<button id="closeServiceConfigModal" class="text-xl">×</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm mb-2">API Key Configuration</label> |
|
|
<div class="bg-[#1E1E1E] rounded-lg p-4 mb-3"> |
|
|
<p class="text-xs mb-3">Recommended: Set as environment variable</p> |
|
|
<div class="bg-black rounded p-3 font-mono text-xs overflow-x-auto"> |
|
|
<p id="envVarExample">setx SERVICE_API_KEY "your_api_key_here"</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<input type="checkbox" id="toggleKeyInput" class="mr-2"> |
|
|
<label for="toggleKeyInput" class="text-sm">Enter API key directly</label> |
|
|
</div> |
|
|
<div id="keyInputContainer" class="hidden"> |
|
|
<input type="password" id="apiKeyInput" class="w-full bg-[#1E1E1E] rounded p-2 text-sm mb-2" placeholder="Enter API key"> |
|
|
<p class="text-xs text-[#A0A0A0]">Note: This will be stored in your browser's local storage</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="endpointInput" class="block text-sm mb-2">API Endpoint URL</label> |
|
|
<input type="text" id="endpointInput" class="w-full bg-[#1E1E1E] rounded p-2 text-sm" placeholder="https://api.example.com"> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button id="testConnectionBtn" class="px-4 py-2 rounded bg-[#1E1E1E] hover:bg-[#2E2E2E] text-sm"> |
|
|
Test Connection |
|
|
</button> |
|
|
<button id="saveServiceConfigBtn" class="px-4 py-2 rounded bg-[#D32F2F] hover:bg-[#E53935] text-sm"> |
|
|
Save Configuration |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="paramsModal" class="modal fixed inset-0 z-50 items-center justify-center hidden"> |
|
|
<div class="bg-[#121212] border border-[#1E1E1E] rounded-lg w-full max-w-md p-6 mx-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-bold">Model Parameters</h3> |
|
|
<button id="closeParamsModal" class="text-xl">×</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm mb-2">Temperature: <span id="tempValue">0.7</span></label> |
|
|
<input type="range" id="tempSlider" min="0" max="1" step="0.1" value="0.7" class="w-full parameter-slider"> |
|
|
<div class="flex justify-between text-xs text-[#A0A0A0]"> |
|
|
<span>Precise</span> |
|
|
<span>Balanced</span> |
|
|
<span>Creative</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm mb-2">Max Tokens: <span id="tokensValue">2048</span></label> |
|
|
<input type="range" id="tokensSlider" min="256" max="16384" step="256" value="2048" class="w-full parameter-slider"> |
|
|
<div class="flex justify-between text-xs text-[#A0A0A0]"> |
|
|
<span>256</span> |
|
|
<span>2048</span> |
|
|
<span>8192</span> |
|
|
<span>16384</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm mb-2">Context Window: <span id="contextValue">Full (8192)</span></label> |
|
|
<input type="range" id="contextSlider" min="1024" max="8192" step="1024" value="8192" class="w-full parameter-slider"> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="streamToggle" class="mr-2" checked> |
|
|
<label for="streamToggle" class="text-sm">Stream Responses</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-end"> |
|
|
<button id="saveParamsBtn" class="px-4 py-2 rounded bg-[#D32F2F] hover:bg-[#E53935] text-sm"> |
|
|
Apply Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="promptEditorModal" class="modal fixed inset-0 z-50 items-center justify-center hidden"> |
|
|
<div class="bg-[#121212] border border-[#1E1E1E] rounded-lg w-full max-w-2xl p-6 mx-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-bold">Edit System Prompt</h3> |
|
|
<button id="closePromptEditorModal" class="text-xl">×</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="promptNameInput" class="block text-sm mb-2">Prompt Name</label> |
|
|
<input type="text" id="promptNameInput" class="w-full bg-[#1E1E1E] rounded p-2 text-sm" placeholder="Creative Writer"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="promptContentInput" class="block text-sm mb-2">Prompt Content</label> |
|
|
<textarea id="promptContentInput" class="w-full bg-[#1E1E1E] rounded p-3 text-sm h-40" placeholder="You are an expert creative writer..."></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button id="cancelPromptBtn" class="px-4 py-2 rounded bg-[#1E1E1E] hover:bg-[#2E2E2E] text-sm"> |
|
|
Cancel |
|
|
</button> |
|
|
<button id="savePromptBtn" class="px-4 py-2 rounded bg-[#D32F2F] hover:bg-[#E53935] text-sm"> |
|
|
Save Prompt |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="typingIndicator" class="fixed bottom-24 left-1/2 transform -translate-x-1/2 bg-[#1E1E1E] rounded-full px-4 py-2 hidden"> |
|
|
<div class="typing-indicator"> |
|
|
<div class="typing-dot"></div> |
|
|
<div class="typing-dot"></div> |
|
|
<div class="typing-dot"></div> |
|
|
<span class="ml-2 text-sm">AI is thinking...</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
setTimeout(() => { |
|
|
document.getElementById('loadingScreen').style.opacity = '0'; |
|
|
setTimeout(() => { |
|
|
document.getElementById('loadingScreen').style.display = 'none'; |
|
|
document.getElementById('appContainer').classList.remove('hidden'); |
|
|
}, 500); |
|
|
}, 2000); |
|
|
|
|
|
|
|
|
const tabButtons = document.querySelectorAll('.tab-button'); |
|
|
const tabContents = document.querySelectorAll('.tab-content'); |
|
|
|
|
|
tabButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
|
|
|
tabButtons.forEach(btn => btn.classList.remove('active')); |
|
|
button.classList.add('active'); |
|
|
|
|
|
|
|
|
const tabName = button.getAttribute('data-tab'); |
|
|
tabContents.forEach(content => { |
|
|
content.classList.add('hidden'); |
|
|
if (content.id === `${tabName}Tab`) { |
|
|
content.classList.remove('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const serviceCards = document.querySelectorAll('[data-service]'); |
|
|
const serviceConfigModal = document.getElementById('serviceConfigModal'); |
|
|
const closeServiceConfigModal = document.getElementById('closeServiceConfigModal'); |
|
|
const toggleKeyInput = document.getElementById('toggleKeyInput'); |
|
|
const keyInputContainer = document.getElementById('keyInputContainer'); |
|
|
|
|
|
serviceCards.forEach(card => { |
|
|
card.addEventListener('click', () => { |
|
|
const service = card.getAttribute('data-service'); |
|
|
document.getElementById('serviceConfigTitle').textContent = `Configure ${service.charAt(0).toUpperCase() + service.slice(1)}`; |
|
|
|
|
|
|
|
|
const serviceVar = service.toUpperCase() + '_API_KEY'; |
|
|
document.getElementById('envVarExample').textContent = `setx ${serviceVar} "your_api_key_here"`; |
|
|
|
|
|
serviceConfigModal.classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
closeServiceConfigModal.addEventListener('click', () => { |
|
|
serviceConfigModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
toggleKeyInput.addEventListener('change', () => { |
|
|
keyInputContainer.classList.toggle('hidden', !toggleKeyInput.checked); |
|
|
}); |
|
|
|
|
|
|
|
|
const paramsModal = document.getElementById('paramsModal'); |
|
|
const closeParamsModal = document.getElementById('closeParamsModal'); |
|
|
const tempSlider = document.getElementById('tempSlider'); |
|
|
const tempValue = document.getElementById('tempValue'); |
|
|
const tokensSlider = document.getElementById('tokensSlider'); |
|
|
const tokensValue = document.getElementById('tokensValue'); |
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (e.target && e.target.textContent === 'Params') { |
|
|
paramsModal.classList.remove('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
closeParamsModal.addEventListener('click', () => { |
|
|
paramsModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
tempSlider.addEventListener('input', () => { |
|
|
tempValue.textContent = tempSlider.value; |
|
|
}); |
|
|
|
|
|
tokensSlider.addEventListener('input', () => { |
|
|
tokensValue.textContent = tokensSlider.value; |
|
|
}); |
|
|
|
|
|
|
|
|
const promptEditorModal = document.getElementById('promptEditorModal'); |
|
|
const closePromptEditorModal = document.getElementById('closePromptEditorModal'); |
|
|
const addPromptBtn = document.getElementById('addPromptBtn'); |
|
|
|
|
|
addPromptBtn.addEventListener('click', () => { |
|
|
promptEditorModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closePromptEditorModal.addEventListener('click', () => { |
|
|
promptEditorModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const chatInput = document.getElementById('chatInput'); |
|
|
const sendMessageBtn = document.getElementById('sendMessageBtn'); |
|
|
const chatMessages = document.getElementById('chatMessages'); |
|
|
const typingIndicator = document.getElementById('typingIndicator'); |
|
|
|
|
|
sendMessageBtn.addEventListener('click', sendMessage); |
|
|
|
|
|
chatInput.addEventListener('keydown', (e) => { |
|
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function scrollToBottom() { |
|
|
const container = document.getElementById('chatMessages'); |
|
|
container.scrollTop = container.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
setTimeout(scrollToBottom, 100); |
|
|
}); |
|
|
|
|
|
function sendMessage() { |
|
|
const message = chatInput.value.trim(); |
|
|
if (message) { |
|
|
|
|
|
setTimeout(scrollToBottom, 10); |
|
|
|
|
|
const userMessage = document.createElement('div'); |
|
|
userMessage.className = 'message-user rounded p-4'; |
|
|
userMessage.innerHTML = ` |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-6 h-6 rounded-full bg-[#F9A825] flex items-center justify-center text-xs font-bold mr-2">U</div> |
|
|
<span class="text-sm font-medium">User</span> |
|
|
</div> |
|
|
<p class="text-sm">${message}</p> |
|
|
`; |
|
|
chatMessages.appendChild(userMessage); |
|
|
|
|
|
|
|
|
chatInput.value = ''; |
|
|
|
|
|
|
|
|
typingIndicator.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
typingIndicator.classList.add('hidden'); |
|
|
|
|
|
|
|
|
const aiMessage = document.createElement('div'); |
|
|
aiMessage.className = 'message-ai rounded p-4'; |
|
|
aiMessage.innerHTML = ` |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-6 h-6 rounded-full bg-[#F4511E] flex items-center justify-center text-xs font-bold mr-2">AI</div> |
|
|
<span class="text-sm font-medium" id="activeModelIndicator">${document.getElementById('assistantName').textContent}</span> |
|
|
</div> |
|
|
<p class="text-sm">${getDummyResponse(message)}</p> |
|
|
`; |
|
|
chatMessages.appendChild(aiMessage); |
|
|
|
|
|
|
|
|
setTimeout(scrollToBottom, 10); |
|
|
}, 1500); |
|
|
} |
|
|
} |
|
|
|
|
|
function getDummyResponse(message) { |
|
|
const responses = [ |
|
|
"I'm analyzing your request about '" + message + "'. Here's what I can tell you...", |
|
|
"That's an interesting question regarding '" + message + "'. From my knowledge...", |
|
|
"Regarding '" + message + "', the key points to consider are...", |
|
|
"Thanks for asking about '" + message + "'. Here's a summary...", |
|
|
"The topic '" + message + "' is complex, but I'll break it down simply..." |
|
|
]; |
|
|
return responses[Math.floor(Math.random() * responses.length)]; |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
const modals = ['serviceConfigModal', 'paramsModal', 'promptEditorModal']; |
|
|
|
|
|
modals.forEach(modalId => { |
|
|
const modal = document.getElementById(modalId); |
|
|
if (modal && !modal.contains(e.target) && !e.target.closest(`[data-target="${modalId}"]`) && !modal.classList.contains('hidden')) { |
|
|
modal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function initStatusIndicators() { |
|
|
const services = ['gemini', 'openai', 'ollama', 'huggingface', 'comfyui']; |
|
|
services.forEach(service => { |
|
|
document.getElementById(`${service}Status`).classList.add('status-disconnected'); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('sidebarToggle').addEventListener('click', () => { |
|
|
document.querySelector('.sidebar').classList.toggle('expanded'); |
|
|
}); |
|
|
|
|
|
|
|
|
const promptTabs = document.querySelectorAll('.prompt-tab'); |
|
|
const assistantNames = { |
|
|
general: 'General Assistant', |
|
|
code: 'Code Expert', |
|
|
writer: 'Creative Writer' |
|
|
}; |
|
|
|
|
|
promptTabs.forEach(tab => { |
|
|
tab.addEventListener('click', () => { |
|
|
promptTabs.forEach(t => t.classList.remove('active', 'border-[#007700]')); |
|
|
tab.classList.add('active', 'border-[#007700]'); |
|
|
document.getElementById('assistantName').textContent = assistantNames[tab.dataset.prompt]; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.filter-btn').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); |
|
|
btn.classList.add('active'); |
|
|
|
|
|
const filter = btn.dataset.filter; |
|
|
const models = document.querySelectorAll('.model-container > .card'); |
|
|
|
|
|
models.forEach(model => { |
|
|
const isLocal = model.querySelector('div.flex.justify-between.text-xs.text-[#A0A0A0] > span:first-child').textContent.includes('Local'); |
|
|
const isAPI = model.querySelector('div.flex.justify-between.text-xs.text-[#A0A0A0] > span:first-child').textContent.includes('API'); |
|
|
|
|
|
if (filter === 'all') { |
|
|
model.style.display = ''; |
|
|
} else if (filter === 'local' && isLocal) { |
|
|
model.style.display = ''; |
|
|
} else if (filter === 'api' && isAPI) { |
|
|
model.style.display = ''; |
|
|
} else { |
|
|
model.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('DOMContentLoaded', () => { |
|
|
initStatusIndicators(); |
|
|
document.getElementById('activeModelIndicator').textContent = 'None'; |
|
|
document.getElementById('assistantName').textContent = 'General Assistant'; |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=PrometheusGroup/prometheus-forge-ai-hub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
