Spaces:
Running
Running
| <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> |