Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ethics - 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-ai-green animate-pulse shadow-[0_0_10px_#10b981]"></div> | |
| <h2 class="text-xl font-bold tracking-wider text-white">ETHICS <span class="text-ai-green">MONITOR</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">Ethical Compliance Dashboard</h1> | |
| <p class="text-slate-400">Real-time monitoring of AI behavior and alignment metrics</p> | |
| </div> | |
| <button class="px-4 py-2 bg-ai-green hover:bg-ai-greenGlow text-black font-bold text-sm rounded transition-all"> | |
| <i data-feather="file-text" class="w-4 h-4 inline"></i> Full Report | |
| </button> | |
| </div> | |
| <!-- Overall Score --> | |
| <div class="bg-gradient-to-r from-ai-green/20 to-transparent border border-ai-green/30 rounded-xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-lg font-bold text-white mb-2">Overall Ethical Score</h3> | |
| <p class="text-slate-400 text-sm">All systems operating within acceptable parameters</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-5xl font-bold text-ai-green">98.7</p> | |
| <p class="text-slate-400 text-sm">/ 100</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ethical Dimensions --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h4 class="font-bold text-white">Fairness & Bias</h4> | |
| <span class="text-ai-green font-bold">99.2%</span> | |
| </div> | |
| <div class="w-full bg-slate-700 rounded-full h-3 mb-4"> | |
| <div class="bg-ai-green h-3 rounded-full transition-all duration-1000" style="width: 99.2%"></div> | |
| </div> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> No demographic bias detected | |
| </li> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Equal opportunity metrics passed | |
| </li> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Cultural sensitivity verified | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h4 class="font-bold text-white">Transparency</h4> | |
| <span class="text-ai-green font-bold">97.8%</span> | |
| </div> | |
| <div class="w-full bg-slate-700 rounded-full h-3 mb-4"> | |
| <div class="bg-blue-400 h-3 rounded-full transition-all duration-1000" style="width: 97.8%"></div> | |
| </div> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Decision explainability active | |
| </li> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Audit trail maintained | |
| </li> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Model documentation current | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h4 class="font-bold text-white">Safety & Control</h4> | |
| <span class="text-ai-green font-bold">99.9%</span> | |
| </div> | |
| <div class="w-full bg-slate-700 rounded-full h-3 mb-4"> | |
| <div class="bg-purple-400 h-3 rounded-full transition-all duration-1000" style="width: 99.9%"></div> | |
| </div> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Harmful content filters active | |
| </li> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Emergency override ready | |
| </li> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Rate limiting enforced | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h4 class="font-bold text-white">Privacy Protection</h4> | |
| <span class="text-ai-green font-bold">98.5%</span> | |
| </div> | |
| <div class="w-full bg-slate-700 rounded-full h-3 mb-4"> | |
| <div class="bg-ai-orange h-3 rounded-full transition-all duration-1000" style="width: 98.5%"></div> | |
| </div> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Data encryption at rest | |
| </li> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> PII handling verified | |
| </li> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> GDPR compliance checked | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h4 class="font-bold text-white">Accountability</h4> | |
| <span class="text-ai-green font-bold">97.1%</span> | |
| </div> | |
| <div class="w-full bg-slate-700 rounded-full h-3 mb-4"> | |
| <div class="bg-pink-400 h-3 rounded-full transition-all duration-1000" style="width: 97.1%"></div> | |
| </div> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Responsibility tracking enabled | |
| </li> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Error reporting active | |
| </li> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Human oversight scheduled | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h4 class="font-bold text-white">Environmental Impact</h4> | |
| <span class="text-ai-green font-bold">96.4%</span> | |
| </div> | |
| <div class="w-full bg-slate-700 rounded-full h-3 mb-4"> | |
| <div class="bg-cyan-400 h-3 rounded-full transition-all duration-1000" style="width: 96.4%"></div> | |
| </div> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Carbon offset program active | |
| </li> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Renewable energy powered | |
| </li> | |
| <li class="flex items-center gap-2 text-slate-300"> | |
| <i data-feather="check" class="w-4 h-4 text-ai-green"></i> Efficient model pruning | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Recent Alerts --> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6"> | |
| <h3 class="text-lg font-bold text-white mb-4">Recent Ethical Alerts</h3> | |
| <div class="space-y-3"> | |
| <div class="p-4 bg-yellow-900/20 border border-yellow-700/50 rounded-lg flex items-start gap-3"> | |
| <i data-feather="alert-triangle" class="w-5 h-5 text-yellow-500 mt-0.5"></i> | |
| <div class="flex-1"> | |
| <p class="font-medium text-white">Minor Bias Detected in Sentiment Analysis</p> | |
| <p class="text-sm text-slate-400 mt-1">Auto-correction applied. Model re-scheduled for fine-tuning.</p> | |
| <p class="text-xs text-slate-500 mt-2">2 hours ago</p> | |
| </div> | |
| <span class="px-2 py-1 bg-yellow-900/50 text-yellow-400 text-xs rounded">Resolved</span> | |
| </div> | |
| <div class="p-4 bg-green-900/20 border border-green-700/50 rounded-lg flex items-start gap-3"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-ai-green mt-0.5"></i> | |
| <div class="flex-1"> | |
| <p class="font-medium text-white">Monthly Ethics Audit Completed</p> | |
| <p class="text-sm text-slate-400 mt-1">All 156 checkpoints passed. Report archived.</p> | |
| <p class="text-xs text-slate-500 mt-2">1 day ago</p> | |
| </div> | |
| <span class="px-2 py-1 bg-green-900/50 text-ai-green text-xs rounded">Passed</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="components/sidebar.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |