Update index.html

index.html

@@ -1,19 +1,207 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Arabic AI Observatory | Leaderboard</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Cairo:wght@600;700&display=swap" rel="stylesheet">
+  <style>
+    body { font-family: 'Inter', sans-serif; }
+    .ar-font { font-family: 'Cairo', sans-serif; }
+  </style>
+</head>
+<body class="bg-slate-50 text-slate-900 antialiased min-h-screen">
+
+  <!-- Top Navigation -->
+  <header class="border-b border-slate-200 bg-white sticky top-0 z-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <span class="text-2xl">⚖️</span>
+        <div>
+          <span class="font-extrabold text-slate-900 tracking-tight text-lg">ARABIC AI OBSERVATORY</span>
+          <span class="ml-2 text-xs bg-sky-100 text-sky-800 font-semibold px-2 py-0.5 rounded">v1.0 Empirical</span>
+        </div>
+      </div>
+      <div class="flex items-center gap-3">
+        <a href="#audit-services" class="text-sm font-semibold bg-slate-900 text-white px-4 py-2 rounded-lg hover:bg-slate-800 transition">
+          Request System Audit
+        </a>
+      </div>
+    </div>
+  </header>
+
+  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
+    
+    <!-- Hero Section -->
+    <div>
+      <h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">
+        Sovereign Model Performance & Compliance Index
+      </h1>
+      <p class="mt-2 text-slate-600 max-w-3xl text-sm sm:text-base leading-relaxed">
+        Empirical evaluation of Arabic-capable LLMs across dialect drift, RAG retrieval grounding, token fertility economics, and regional data protection (PDPL & ISO 42001).
+      </p>
+    </div>
+
+    <!-- 4 KPI Cards -->
+    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
+        <div class="text-xs font-semibold uppercase tracking-wider text-slate-500">Models Audited</div>
+        <div class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">7 Systems</div>
+      </div>
+      <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
+        <div class="text-xs font-semibold uppercase tracking-wider text-slate-500">Benchmark Testbeds</div>
+        <div class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">500+ Cases</div>
+      </div>
+      <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
+        <div class="text-xs font-semibold uppercase tracking-wider text-slate-500">Best Token Fertility</div>
+        <div class="text-2xl sm:text-3xl font-extrabold text-emerald-600 mt-1">1.18 <span class="text-xs text-slate-500 font-normal">tok/word</span></div>
+      </div>
+      <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
+        <div class="text-xs font-semibold uppercase tracking-wider text-slate-500">Compliance Standard</div>
+        <div class="text-2xl sm:text-3xl font-extrabold text-sky-600 mt-1">PDPL & Art. 4</div>
+      </div>
+    </div>
+
+    <!-- Filter Bar -->
+    <div class="bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex flex-col sm:flex-row gap-4 justify-between items-center">
+      <div class="w-full sm:w-72">
+        <input type="text" id="searchInput" onkeyup="filterTable()" placeholder="Search model or architecture..." class="w-full px-3.5 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
+      </div>
+      <div class="flex items-center gap-2 text-xs text-slate-500">
+        <span class="inline-block w-2.5 h-2.5 rounded-full bg-emerald-500"></span> Certified
+        <span class="inline-block w-2.5 h-2.5 rounded-full bg-rose-500 ml-2"></span> Remediation Required
+      </div>
+    </div>
+
+    <!-- Benchmark Leaderboard Table -->
+    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+      <div class="overflow-x-auto">
+        <table class="w-full text-left text-sm" id="modelsTable">
+          <thead class="bg-slate-100 text-slate-700 text-xs font-bold uppercase tracking-wider border-b border-slate-200">
+            <tr>
+              <th class="py-3.5 px-4 text-center">Rank</th>
+              <th class="py-3.5 px-4">Model Name</th>
+              <th class="py-3.5 px-4">Architecture</th>
+              <th class="py-3.5 px-4">Readiness Index</th>
+              <th class="py-3.5 px-4 text-center">Dialect (%)</th>
+              <th class="py-3.5 px-4 text-center">RAG (%)</th>
+              <th class="py-3.5 px-4 text-center">Fertility</th>
+              <th class="py-3.5 px-4 text-center">Verdict</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-slate-200 font-medium">
+            <tr class="hover:bg-slate-50 transition">
+              <td class="py-3 px-4 text-center font-bold text-slate-500">1</td>
+              <td class="py-3 px-4 font-bold text-slate-900">Qwen 2.5 7B Instruct</td>
+              <td class="py-3 px-4 text-slate-600">Open-Weights</td>
+              <td class="py-3 px-4"><div class="flex items-center gap-2"><span class="font-bold text-slate-900">88.4</span><div class="w-24 bg-slate-200 h-2 rounded-full overflow-hidden"><div class="bg-emerald-500 h-2 rounded-full" style="width: 88.4%"></div></div></div></td>
+              <td class="py-3 px-4 text-center">86.0%</td>
+              <td class="py-3 px-4 text-center">92.5%</td>
+              <td class="py-3 px-4 text-center text-slate-700 font-semibold">1.31</td>
+              <td class="py-3 px-4 text-center"><span class="px-2.5 py-1 bg-emerald-100 text-emerald-800 text-xs font-bold rounded-full">CERTIFIED</span></td>
+            </tr>
+            <tr class="hover:bg-slate-50 transition">
+              <td class="py-3 px-4 text-center font-bold text-slate-500">2</td>
+              <td class="py-3 px-4 font-bold text-slate-900">Falcon Arabic 7B</td>
+              <td class="py-3 px-4 text-slate-600">Regional Foundation</td>
+              <td class="py-3 px-4"><div class="flex items-center gap-2"><span class="font-bold text-slate-900">85.2</span><div class="w-24 bg-slate-200 h-2 rounded-full overflow-hidden"><div class="bg-emerald-500 h-2 rounded-full" style="width: 85.2%"></div></div></div></td>
+              <td class="py-3 px-4 text-center">81.5%</td>
+              <td class="py-3 px-4 text-center">88.0%</td>
+              <td class="py-3 px-4 text-center text-emerald-600 font-bold">1.18</td>
+              <td class="py-3 px-4 text-center"><span class="px-2.5 py-1 bg-emerald-100 text-emerald-800 text-xs font-bold rounded-full">CERTIFIED</span></td>
+            </tr>
+            <tr class="hover:bg-slate-50 transition">
+              <td class="py-3 px-4 text-center font-bold text-slate-500">3</td>
+              <td class="py-3 px-4 font-bold text-slate-900">ALLaM 7B</td>
+              <td class="py-3 px-4 text-slate-600">Sovereign GCC</td>
+              <td class="py-3 px-4"><div class="flex items-center gap-2"><span class="font-bold text-slate-900">84.1</span><div class="w-24 bg-slate-200 h-2 rounded-full overflow-hidden"><div class="bg-emerald-500 h-2 rounded-full" style="width: 84.1%"></div></div></div></td>
+              <td class="py-3 px-4 text-center">87.0%</td>
+              <td class="py-3 px-4 text-center">85.0%</td>
+              <td class="py-3 px-4 text-center text-slate-700 font-semibold">1.35</td>
+              <td class="py-3 px-4 text-center"><span class="px-2.5 py-1 bg-emerald-100 text-emerald-800 text-xs font-bold rounded-full">CERTIFIED</span></td>
+            </tr>
+            <tr class="hover:bg-slate-50 transition">
+              <td class="py-3 px-4 text-center font-bold text-slate-500">4</td>
+              <td class="py-3 px-4 font-bold text-slate-900">Fanar 2.0 (Verified Report)</td>
+              <td class="py-3 px-4 text-slate-600">QCRI Foundation</td>
+              <td class="py-3 px-4"><div class="flex items-center gap-2"><span class="font-bold text-slate-900">83.7</span><div class="w-24 bg-slate-200 h-2 rounded-full overflow-hidden"><div class="bg-emerald-500 h-2 rounded-full" style="width: 83.7%"></div></div></div></td>
+              <td class="py-3 px-4 text-center">84.2%</td>
+              <td class="py-3 px-4 text-center">86.1%</td>
+              <td class="py-3 px-4 text-center text-slate-700 font-semibold">1.25</td>
+              <td class="py-3 px-4 text-center"><span class="px-2.5 py-1 bg-emerald-100 text-emerald-800 text-xs font-bold rounded-full">CERTIFIED</span></td>
+            </tr>
+            <tr class="hover:bg-slate-50 transition">
+              <td class="py-3 px-4 text-center font-bold text-slate-500">5</td>
+              <td class="py-3 px-4 font-bold text-slate-900">GPT-4o-mini</td>
+              <td class="py-3 px-4 text-slate-600">Commercial API</td>
+              <td class="py-3 px-4"><div class="flex items-center gap-2"><span class="font-bold text-slate-900">81.0</span><div class="w-24 bg-slate-200 h-2 rounded-full overflow-hidden"><div class="bg-sky-500 h-2 rounded-full" style="width: 81.0%"></div></div></div></td>
+              <td class="py-3 px-4 text-center">78.5%</td>
+              <td class="py-3 px-4 text-center">89.0%</td>
+              <td class="py-3 px-4 text-center text-slate-700 font-semibold">1.62</td>
+              <td class="py-3 px-4 text-center"><span class="px-2.5 py-1 bg-rose-100 text-rose-800 text-xs font-bold rounded-full">REMEDIATION</span></td>
+            </tr>
+            <tr class="hover:bg-slate-50 transition">
+              <td class="py-3 px-4 text-center font-bold text-slate-500">6</td>
+              <td class="py-3 px-4 font-bold text-slate-900">Gemma 2 9B Instruct</td>
+              <td class="py-3 px-4 text-slate-600">Open-Weights</td>
+              <td class="py-3 px-4"><div class="flex items-center gap-2"><span class="font-bold text-slate-900">77.3</span><div class="w-24 bg-slate-200 h-2 rounded-full overflow-hidden"><div class="bg-amber-500 h-2 rounded-full" style="width: 77.3%"></div></div></div></td>
+              <td class="py-3 px-4 text-center">74.0%</td>
+              <td class="py-3 px-4 text-center">81.5%</td>
+              <td class="py-3 px-4 text-center text-slate-700 font-semibold">1.54</td>
+              <td class="py-3 px-4 text-center"><span class="px-2.5 py-1 bg-rose-100 text-rose-800 text-xs font-bold rounded-full">REMEDIATION</span></td>
+            </tr>
+            <tr class="hover:bg-slate-50 transition">
+              <td class="py-3 px-4 text-center font-bold text-slate-500">7</td>
+              <td class="py-3 px-4 font-bold text-slate-900">Llama 3.1 8B Instruct</td>
+              <td class="py-3 px-4 text-slate-600">Open-Weights</td>
+              <td class="py-3 px-4"><div class="flex items-center gap-2"><span class="font-bold text-slate-900">69.8</span><div class="w-24 bg-slate-200 h-2 rounded-full overflow-hidden"><div class="bg-rose-500 h-2 rounded-full" style="width: 69.8%"></div></div></div></td>
+              <td class="py-3 px-4 text-center">63.0%</td>
+              <td class="py-3 px-4 text-center">76.0%</td>
+              <td class="py-3 px-4 text-center text-rose-600 font-bold">2.85</td>
+              <td class="py-3 px-4 text-center"><span class="px-2.5 py-1 bg-rose-100 text-rose-800 text-xs font-bold rounded-full">REMEDIATION</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Commercial CTA Box -->
+    <div id="audit-services" class="bg-slate-900 rounded-2xl p-6 sm:p-8 text-white shadow-xl">
+      <div class="max-w-3xl">
+        <h2 class="text-2xl font-bold">Independent System Audits & Red-Teaming Suites</h2>
+        <p class="mt-2 text-slate-300 text-sm leading-relaxed">
+          Ensure your Arabic conversational agents and RAG applications don't hallucinate or leak personal identifiers prior to deployment.
+        </p>
+        <div class="grid sm:grid-cols-2 gap-4 mt-6">
+          <div class="bg-slate-800/80 border border-slate-700 p-4 rounded-xl">
+            <div class="text-sky-400 font-bold text-lg">$199 / run</div>
+            <div class="font-bold text-white mt-1">Automated System Audit & PDF Certificate</div>
+            <p class="text-xs text-slate-300 mt-2">Send 200 interaction logs. Receive a branded 2-page diagnostic report with specific prompt and RAG code remediations.</p>
+          </div>
+          <div class="bg-slate-800/80 border border-slate-700 p-4 rounded-xl">
+            <div class="text-sky-400 font-bold text-lg">$149 one-time</div>
+            <div class="font-bold text-white mt-1">Arabic Enterprise Red-Teaming Matrix</div>
+            <p class="text-xs text-slate-300 mt-2">Download 500+ curated adversarial test cases covering Darija, Egyptian, Gulf, PDPL privacy bounds, and RAG hallucination traps.</p>
+          </div>
+        </div>
+        <div class="mt-6 flex flex-wrap gap-4 items-center">
+          <span class="text-xs text-slate-400">Institutional inquiries: <code class="text-sky-300">audit@safeai.report</code></span>
+        </div>
+      </div>
+    </div>
+
+  </main>
+
+  <script>
+    function filterTable() {
+      const input = document.getElementById("searchInput").value.toLowerCase();
+      const rows = document.querySelectorAll("#modelsTable tbody tr");
+      rows.forEach(row => {
+        const text = row.textContent.toLowerCase();
+        row.style.display = text.includes(input) ? "" : "none";
+      });
+    }
+  </script>
+</body>
+</html>