Spaces:
Running
Running
File size: 17,734 Bytes
3bcb678 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings - OmniLoop AI</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌀</text></svg>">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
ai: {
green: '#10b981',
greenGlow: '#34d399',
orange: '#f97316',
orangeGlow: '#fb923c',
dark: '#0f172a',
darker: '#020617',
surface: '#1e293b'
}
}
}
}
}
</script>
</head>
<body class="bg-ai-darker text-slate-200 font-sans antialiased overflow-hidden selection:bg-ai-green selection:text-black">
<div class="flex h-screen w-full">
<nav-sidebar></nav-sidebar>
<main class="flex-1 flex flex-col h-full relative overflow-hidden">
<header class="h-16 border-b border-slate-800 flex items-center justify-between px-6 bg-ai-dark/80 backdrop-blur-md z-10">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-slate-400 animate-pulse shadow-[0_0_10px_#94a3b8]"></div>
<h2 class="text-xl font-bold tracking-wider text-white">SYSTEM <span class="text-slate-400">CONFIGURATION</span></h2>
</div>
<div class="flex items-center gap-4">
<div id="system-clock" class="font-mono text-sm text-slate-400">00:00:00</div>
</div>
</header>
<div id="content-area" class="flex-1 overflow-y-auto p-6 scroll-smooth">
<section class="space-y-6">
<div class="flex justify-between items-end">
<div>
<h1 class="text-3xl font-bold text-white mb-1">System Settings</h1>
<p class="text-slate-400">Configure OmniLoop AI parameters and preferences</p>
</div>
<div class="flex gap-2">
<button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white font-bold text-sm rounded transition-all">
Reset Defaults
</button>
<button class="px-4 py-2 bg-ai-green hover:bg-ai-greenGlow text-black font-bold text-sm rounded transition-all">
Save Changes
</button>
</div>
</div>
<!-- Settings Tabs -->
<tabs-container>
<tab-panel id="general" active>
<div class="space-y-6">
<h3 class="text-xl font-bold text-white">General Settings</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-ai-surface border border-slate-700 rounded-xl p-6 space-y-4">
<div>
<label class="block text-sm font-medium text-slate-300 mb-2">System Name</label>
<input type="text" value="OmniLoop AI" class="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2 text-white">
</div>
<div>
<label class="block text-sm font-medium text-slate-300 mb-2">Default Language</label>
<select class="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2 text-white">
<option>English</option>
<option>Spanish</option>
<option>French</option>
<option>German</option>
<option>Japanese</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-300 mb-2">Timezone</label>
<select class="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2 text-white">
<option>UTC</option>
<option>America/New_York</option>
<option>America/Los_Angeles</option>
<option>Europe/London</option>
</select>
</div>
</div>
<div class="bg-ai-surface border border-slate-700 rounded-xl p-6 space-y-4">
<div class="flex items-center justify-between">
<div>
<p class="font-medium text-white">Dark Mode</p>
<p class="text-sm text-slate-400">Always enabled for AI systems</p>
</div>
<div class="w-12 h-6 bg-ai-green rounded-full relative cursor-not-allowed opacity-50">
<div class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full"></div>
</div>
</div>
<div class="flex items-center justify-between">
<div>
<p class="font-medium text-white">Sound Effects</p>
<p class="text-sm text-slate-400">Audio feedback for actions</p>
</div>
<div class="w-12 h-6 bg-slate-600 rounded-full relative cursor-pointer">
<div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full"></div>
</div>
</div>
<div class="flex items-center justify-between">
<div>
<p class="font-medium text-white">Animations</p>
<p class="text-sm text-slate-400">Enable UI animations</p>
</div>
<div class="w-12 h-6 bg-ai-green rounded-full relative cursor-pointer">
<div class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full"></div>
</div>
</div>
</div>
</div>
</div>
</tab-panel>
<tab-panel id="performance">
<div class="space-y-6">
<h3 class="text-xl font-bold text-white">Performance Settings</h3>
<div class="bg-ai-surface border border-slate-700 rounded-xl p-6">
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-slate-300 mb-2">Max Concurrent Requests</label>
<input type="range" min="1" max="1000" value="500" class="w-full">
<div class="flex justify-between text-xs text-slate-500 mt-1">
<span>1</span>
<span>500</span>
<span>1000</span>
</div>
</div>
<div>
<label class="block text-sm font-medium text-slate-300 mb-2">Response Timeout (ms)</label>
<input type="number" value="30000" class="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2 text-white">
</div>
<div>
<label class="block text-sm font-medium text-slate-300 mb-2">Cache Size (GB)</label>
<input type="number" value="64" class="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2 text-white">
</div>
<div class="flex items-center justify-between p-4 bg-slate-800 rounded-lg">
<div>
<p class="font-medium text-white">Enable GPU Acceleration</p>
<p class="text-sm text-slate-400">Use available GPUs for inference</p>
</div>
<div class="w-12 h-6 bg-ai-green rounded-full relative cursor-pointer">
<div class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full"></div>
</div>
</div>
</div>
</div>
</div>
</tab-panel>
<tab-panel id="security">
<div class="space-y-6">
<h3 class="text-xl font-bold text-white">Security Settings</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-ai-surface border border-slate-700 rounded-xl p-6 space-y-4">
<h4 class="font-bold text-white">API Keys</h4>
<div class="p-3 bg-slate-800 rounded border border-slate-600">
<code class="text-xs text-slate-400">sk-omniloop-*******************abc123</code>
</div>
<button class="text-sm text-ai-orange hover:underline">Regenerate Key</button>
<h4 class="font-bold text-white mt-6">Rate Limits</h4>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-xs text-slate-400 mb-1">Requests/min</label>
<input type="number" value="1000" class="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1 text-sm text-white">
</div>
<div>
<label class="block text-xs text-slate-400 mb-1">Tokens/day</label>
<input type="number" value="1000000" class="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1 text-sm text-white">
</div>
</div>
</div>
<div class="bg-ai-surface border border-slate-700 rounded-xl p-6 space-y-4">
<h4 class="font-bold text-white">Access Control</h4>
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="text-sm text-slate-300">Require 2FA</span>
<div class="w-10 h-5 bg-ai-green rounded-full relative cursor-pointer">
<div class="absolute right-0.5 top-0.5 w-4 h-4 bg-white rounded-full"></div>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-slate-300">IP Whitelist</span>
<div class="w-10 h-5 bg-slate-600 rounded-full relative cursor-pointer">
<div class="absolute left-0.5 top-0.5 w-4 h-4 bg-white rounded-full"></div>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-slate-300">Audit Logging</span>
<div class="w-10 h-5 bg-ai-green rounded-full relative cursor-pointer">
<div class="absolute right-0.5 top-0.5 w-4 h-4 bg-white rounded-full"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</tab-panel>
<tab-panel id="advanced">
<div class="space-y-6">
<h3 class="text-xl font-bold text-white">Advanced Configuration</h3>
<div class="bg-ai-surface border border-slate-700 rounded-xl p-6">
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-slate-300 mb-2">Custom Model Parameters (JSON)</label>
<textarea class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-white font-mono text-sm h-40" placeholder='{
"temperature": 0.7,
"max_tokens": 2048,
"top_p": 0.9,
"frequency_penalty": 0.5
}'>{
"temperature": 0.7,
"max_tokens": 2048,
"top_p": 0.9,
"frequency_penalty": 0.5,
"presence_penalty": 0.0
}</textarea>
</div>
<div>
<label class="block text-sm font-medium text-slate-300 mb-2">System Prompt</label>
<textarea class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-white text-sm h-32" placeholder="You are OmniLoop AI, a helpful assistant...">You are OmniLoop AI, an advanced AI system designed to assist with a wide range of tasks while maintaining ethical guidelines and promoting beneficial outcomes.</textarea>
</div>
<div class="p-4 bg-red-900/20 border border-red-700/50 rounded-lg">
<p class="text-red-400 font-medium mb-2">⚠️ Danger Zone</p>
<p class="text-sm text-slate-400 mb-3">These actions cannot be undone.</p>
<button class="px-4 py-2 bg-red-600 hover:bg-red-500 text-white text-sm rounded transition-colors">
Purge All Training Data
</button>
</div>
</div>
</div>
</div>
</tab-panel>
</tabs-container>
</section>
</div>
</main>
</div>
<script src="components/sidebar.js"></script>
<script src="components/tabs.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
</body>
</html> |