Spaces:
Running
Running
File size: 14,951 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 | <!DOCTYPE html>
<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> |