helloadel commited on
Commit
5fa21a3
·
verified ·
1 Parent(s): ba03142

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +90 -98
index.html CHANGED
@@ -3,32 +3,31 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Arabic AI Observatory | Leaderboard & Assurance</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Cairo:wght@600;700&display=swap" rel="stylesheet">
9
  <style>
10
  body { font-family: 'Inter', sans-serif; }
11
  .ar-font { font-family: 'Cairo', sans-serif; }
12
- html { scroll-behavior: smooth; }
13
  </style>
14
  </head>
15
  <body class="bg-slate-50 text-slate-900 antialiased min-h-screen">
16
 
17
- <!-- Top Navigation Bar -->
18
- <header class="border-b border-slate-200 bg-white sticky top-0 z-50 shadow-sm">
19
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
20
  <div class="flex items-center gap-3">
21
  <span class="text-2xl">⚖️</span>
22
  <div>
23
  <div class="flex items-center gap-2">
24
  <span class="font-extrabold text-slate-900 tracking-tight text-lg">ARABIC AI OBSERVATORY</span>
25
- <span class="text-xs bg-sky-100 text-sky-800 font-bold px-2 py-0.5 rounded uppercase tracking-wider">v1.0 Empirical</span>
26
  </div>
27
- <p class="text-xs text-slate-500 hidden sm:block">Independent Benchmark & Governance Assurance Engine</p>
28
  </div>
29
  </div>
30
  <div class="flex items-center gap-3">
31
- <a href="#commercial-intake" class="text-sm font-semibold bg-slate-900 text-white px-4 py-2 rounded-lg hover:bg-slate-800 transition shadow-sm">
32
  Request System Audit
33
  </a>
34
  </div>
@@ -37,7 +36,7 @@
37
 
38
  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
39
 
40
- <!-- Hero Title -->
41
  <div>
42
  <h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">
43
  Sovereign Model Performance & Compliance Index
@@ -47,7 +46,7 @@
47
  </p>
48
  </div>
49
 
50
- <!-- 4 High-Impact KPI Cards -->
51
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
52
  <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
53
  <div class="text-xs font-semibold uppercase tracking-wider text-slate-500">Models Audited</div>
@@ -67,18 +66,18 @@
67
  </div>
68
  </div>
69
 
70
- <!-- Live Search & Filter Bar -->
71
  <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">
72
  <div class="w-full sm:w-80">
73
- <input type="text" id="searchInput" onkeyup="filterTable()" placeholder="Search model name 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 transition">
74
  </div>
75
- <div class="flex items-center gap-4 text-xs font-medium text-slate-600">
76
- <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-emerald-500 inline-block"></span> Certified</span>
77
- <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-rose-500 inline-block"></span> Remediation Required</span>
78
  </div>
79
  </div>
80
 
81
- <!-- Empirical Benchmark Table -->
82
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
83
  <div class="overflow-x-auto">
84
  <table class="w-full text-left text-sm" id="modelsTable">
@@ -96,123 +95,118 @@
96
  </thead>
97
  <tbody class="divide-y divide-slate-200 font-medium">
98
  <tr class="hover:bg-slate-50 transition">
99
- <td class="py-3 px-4 text-center font-bold text-slate-400">1</td>
100
- <td class="py-3 px-4 font-bold text-slate-900">Qwen 2.5 7B Instruct</td>
101
- <td class="py-3 px-4 text-slate-600">Open-Weights</td>
102
- <td class="py-3 px-4"><div class="flex items-center gap-2"><span class="font-bold text-slate-900 w-8">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>
103
- <td class="py-3 px-4 text-center">86.0%</td>
104
- <td class="py-3 px-4 text-center">92.5%</td>
105
- <td class="py-3 px-4 text-center text-slate-700 font-semibold">1.31</td>
106
- <td class="py-3 px-4 text-center"><span class="px-2.5 py-0.5 bg-emerald-100 text-emerald-800 text-xs font-bold rounded-full">CERTIFIED</span></td>
107
  </tr>
108
  <tr class="hover:bg-slate-50 transition">
109
- <td class="py-3 px-4 text-center font-bold text-slate-400">2</td>
110
- <td class="py-3 px-4 font-bold text-slate-900">Falcon Arabic 7B</td>
111
- <td class="py-3 px-4 text-slate-600">Regional Foundation</td>
112
- <td class="py-3 px-4"><div class="flex items-center gap-2"><span class="font-bold text-slate-900 w-8">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>
113
- <td class="py-3 px-4 text-center">81.5%</td>
114
- <td class="py-3 px-4 text-center">88.0%</td>
115
- <td class="py-3 px-4 text-center text-emerald-600 font-bold">1.18</td>
116
- <td class="py-3 px-4 text-center"><span class="px-2.5 py-0.5 bg-emerald-100 text-emerald-800 text-xs font-bold rounded-full">CERTIFIED</span></td>
117
  </tr>
118
  <tr class="hover:bg-slate-50 transition">
119
- <td class="py-3 px-4 text-center font-bold text-slate-400">3</td>
120
- <td class="py-3 px-4 font-bold text-slate-900">ALLaM 7B</td>
121
- <td class="py-3 px-4 text-slate-600">Sovereign GCC</td>
122
- <td class="py-3 px-4"><div class="flex items-center gap-2"><span class="font-bold text-slate-900 w-8">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>
123
- <td class="py-3 px-4 text-center">87.0%</td>
124
- <td class="py-3 px-4 text-center">85.0%</td>
125
- <td class="py-3 px-4 text-center text-slate-700 font-semibold">1.35</td>
126
- <td class="py-3 px-4 text-center"><span class="px-2.5 py-0.5 bg-emerald-100 text-emerald-800 text-xs font-bold rounded-full">CERTIFIED</span></td>
127
  </tr>
128
  <tr class="hover:bg-slate-50 transition">
129
- <td class="py-3 px-4 text-center font-bold text-slate-400">4</td>
130
- <td class="py-3 px-4 font-bold text-slate-900">Fanar 2.0 (Verified Report)</td>
131
- <td class="py-3 px-4 text-slate-600">QCRI Foundation</td>
132
- <td class="py-3 px-4"><div class="flex items-center gap-2"><span class="font-bold text-slate-900 w-8">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>
133
- <td class="py-3 px-4 text-center">84.2%</td>
134
- <td class="py-3 px-4 text-center">86.1%</td>
135
- <td class="py-3 px-4 text-center text-slate-700 font-semibold">1.25</td>
136
- <td class="py-3 px-4 text-center"><span class="px-2.5 py-0.5 bg-emerald-100 text-emerald-800 text-xs font-bold rounded-full">CERTIFIED</span></td>
137
  </tr>
138
  <tr class="hover:bg-slate-50 transition">
139
- <td class="py-3 px-4 text-center font-bold text-slate-400">5</td>
140
- <td class="py-3 px-4 font-bold text-slate-900">GPT-4o-mini</td>
141
- <td class="py-3 px-4 text-slate-600">Commercial API</td>
142
- <td class="py-3 px-4"><div class="flex items-center gap-2"><span class="font-bold text-slate-900 w-8">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>
143
- <td class="py-3 px-4 text-center">78.5%</td>
144
- <td class="py-3 px-4 text-center">89.0%</td>
145
- <td class="py-3 px-4 text-center text-slate-700 font-semibold">1.62</td>
146
- <td class="py-3 px-4 text-center"><span class="px-2.5 py-0.5 bg-rose-100 text-rose-800 text-xs font-bold rounded-full">REMEDIATION</span></td>
147
  </tr>
148
  <tr class="hover:bg-slate-50 transition">
149
- <td class="py-3 px-4 text-center font-bold text-slate-400">6</td>
150
- <td class="py-3 px-4 font-bold text-slate-900">Gemma 2 9B Instruct</td>
151
- <td class="py-3 px-4 text-slate-600">Open-Weights</td>
152
- <td class="py-3 px-4"><div class="flex items-center gap-2"><span class="font-bold text-slate-900 w-8">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>
153
- <td class="py-3 px-4 text-center">74.0%</td>
154
- <td class="py-3 px-4 text-center">81.5%</td>
155
- <td class="py-3 px-4 text-center text-slate-700 font-semibold">1.54</td>
156
- <td class="py-3 px-4 text-center"><span class="px-2.5 py-0.5 bg-rose-100 text-rose-800 text-xs font-bold rounded-full">REMEDIATION</span></td>
157
  </tr>
158
  <tr class="hover:bg-slate-50 transition">
159
- <td class="py-3 px-4 text-center font-bold text-slate-400">7</td>
160
- <td class="py-3 px-4 font-bold text-slate-900">Llama 3.1 8B Instruct</td>
161
- <td class="py-3 px-4 text-slate-600">Open-Weights</td>
162
- <td class="py-3 px-4"><div class="flex items-center gap-2"><span class="font-bold text-slate-900 w-8">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>
163
- <td class="py-3 px-4 text-center">63.0%</td>
164
- <td class="py-3 px-4 text-center">76.0%</td>
165
- <td class="py-3 px-4 text-center text-rose-600 font-bold">2.85</td>
166
- <td class="py-3 px-4 text-center"><span class="px-2.5 py-0.5 bg-rose-100 text-rose-800 text-xs font-bold rounded-full">REMEDIATION</span></td>
167
  </tr>
168
  </tbody>
169
  </table>
170
  </div>
171
  </div>
172
 
173
- <!-- Commercial Intake & Licensing (Dark Section Matching Screenshot) -->
174
- <div id="commercial-intake" class="bg-[#0b1329] rounded-2xl p-6 sm:p-10 text-white shadow-2xl border border-slate-800">
175
  <div class="max-w-4xl">
176
- <span class="inline-block text-xs font-extrabold uppercase tracking-wider text-sky-400 bg-sky-950/80 border border-sky-800/60 px-3 py-1 rounded-md mb-3">
177
  COMMERCIAL INTAKE & LICENSING
178
  </span>
179
  <h2 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
180
  Independent System Audits & Red-Teaming Suites
181
  </h2>
182
- <p class="mt-2 text-slate-300 text-sm sm:text-base leading-relaxed">
183
  Ensure your Arabic conversational agents and RAG applications don't hallucinate or leak personal identifiers prior to enterprise deployment.
184
  </p>
185
 
186
- <!-- Product Cards Grid -->
187
- <div class="grid sm:grid-cols-2 gap-5 mt-8">
188
 
189
- <!-- Card 1: $199 Single Run Audit -->
190
- <a href="mailto:support@safeai.report?subject=Request%20Automated%20System%20Audit%20($199)&body=Hello%20Observatory%20Team,%0D%0A%0D%0AWe%20would%20like%20to%20commission%20an%20independent%20audit%20and%20PDF%20scorecard%20for%20our%20Arabic%20system.%0D%0A%0D%0AOrganization%20Name:%20%0D%0ATarget%20System%20/%20Model:%20%0D%0AInteraction%20Volume%20(Logs/Prompts):%20200%20cases%0D%0AStaging%20Endpoint%20or%20Batch%20File:%20[Attached%20/%20Link]%0D%0A%0D%0APlease%20confirm%20intake%20and%20invoice."
191
- class="block bg-[#111c38] border border-slate-700/80 hover:border-sky-500/80 rounded-xl p-6 transition duration-200 group">
192
  <div class="flex items-center justify-between">
193
- <span class="text-sky-400 font-extrabold text-xl tracking-tight">$199 <span class="text-xs text-slate-400 font-normal">/ run</span></span>
194
- <span class="text-xs text-slate-400 group-hover:text-sky-300 font-medium transition flex items-center gap-1">
195
- Deploy Audit <span class="text-sm">→</span>
196
- </span>
197
  </div>
198
- <h3 class="font-bold text-white text-base mt-2">Automated System Audit & PDF Certificate</h3>
199
  <p class="text-xs text-slate-300 mt-2 leading-relaxed">
200
  Send 200 interaction logs. Receive a branded 2-page diagnostic report with specific prompt and RAG code remediations within 24 hours.
201
  </p>
202
  </a>
203
 
204
- <!-- Card 2: $149 One-Time Matrix Suite -->
205
- <a href="https://gumroad.com"
206
- id="gumroad-link"
207
- target="_blank"
208
- class="block bg-[#111c38] border border-slate-700/80 hover:border-sky-500/80 rounded-xl p-6 transition duration-200 group">
209
  <div class="flex items-center justify-between">
210
- <span class="text-sky-400 font-extrabold text-xl tracking-tight">$149 <span class="text-xs text-slate-400 font-normal">one-time</span></span>
211
- <span class="text-xs text-slate-400 group-hover:text-sky-300 font-medium transition flex items-center gap-1">
212
- Acquire Suite <span class="text-sm">→</span>
213
- </span>
214
  </div>
215
- <h3 class="font-bold text-white text-base mt-2">Arabic Enterprise Red-Teaming Matrix</h3>
216
  <p class="text-xs text-slate-300 mt-2 leading-relaxed">
217
  Download 500+ curated adversarial test cases covering Darija, Egyptian, Gulf, PDPL privacy bounds, and RAG hallucination traps in JSONL/CSV.
218
  </p>
@@ -220,12 +214,10 @@
220
 
221
  </div>
222
 
223
- <!-- Footer Meta Info -->
224
- <div class="mt-8 pt-6 border-t border-slate-800/80 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 text-xs text-slate-400">
225
  <div>Direct Inquiries: <a href="mailto:support@safeai.report" class="text-sky-400 hover:underline font-mono">support@safeai.report</a></div>
226
  <div>Powered by the <span class="text-slate-200 font-semibold">Arabic AI Observatory Engine</span></div>
227
  </div>
228
-
229
  </div>
230
  </div>
231
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Arabic AI Observatory | Leaderboard & Auditing</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Cairo:wght@600;700&display=swap" rel="stylesheet">
9
  <style>
10
  body { font-family: 'Inter', sans-serif; }
11
  .ar-font { font-family: 'Cairo', sans-serif; }
 
12
  </style>
13
  </head>
14
  <body class="bg-slate-50 text-slate-900 antialiased min-h-screen">
15
 
16
+ <!-- Top Navigation -->
17
+ <header class="border-b border-slate-200 bg-white sticky top-0 z-50">
18
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
19
  <div class="flex items-center gap-3">
20
  <span class="text-2xl">⚖️</span>
21
  <div>
22
  <div class="flex items-center gap-2">
23
  <span class="font-extrabold text-slate-900 tracking-tight text-lg">ARABIC AI OBSERVATORY</span>
24
+ <span class="text-[11px] bg-sky-100 text-sky-800 font-bold px-2 py-0.5 rounded uppercase tracking-wider">v1.0 Empirical</span>
25
  </div>
26
+ <p class="text-xs text-slate-500 font-medium">Independent Benchmark & Governance Assurance Engine</p>
27
  </div>
28
  </div>
29
  <div class="flex items-center gap-3">
30
+ <a href="#audit-services" class="text-xs sm:text-sm font-semibold bg-slate-900 text-white px-4 py-2 rounded-lg hover:bg-slate-800 transition">
31
  Request System Audit
32
  </a>
33
  </div>
 
36
 
37
  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
38
 
39
+ <!-- Hero Section -->
40
  <div>
41
  <h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">
42
  Sovereign Model Performance & Compliance Index
 
46
  </p>
47
  </div>
48
 
49
+ <!-- 4 KPI Cards -->
50
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
51
  <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
52
  <div class="text-xs font-semibold uppercase tracking-wider text-slate-500">Models Audited</div>
 
66
  </div>
67
  </div>
68
 
69
+ <!-- Filter Bar -->
70
  <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">
71
  <div class="w-full sm:w-80">
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">
73
  </div>
74
+ <div class="flex items-center gap-2 text-xs text-slate-500 font-medium">
75
+ <span class="inline-block w-2.5 h-2.5 rounded-full bg-emerald-500"></span> Certified
76
+ <span class="inline-block w-2.5 h-2.5 rounded-full bg-rose-500 ml-3"></span> Remediation Required
77
  </div>
78
  </div>
79
 
80
+ <!-- Benchmark Leaderboard Table -->
81
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
82
  <div class="overflow-x-auto">
83
  <table class="w-full text-left text-sm" id="modelsTable">
 
95
  </thead>
96
  <tbody class="divide-y divide-slate-200 font-medium">
97
  <tr class="hover:bg-slate-50 transition">
98
+ <td class="py-3.5 px-4 text-center font-bold text-slate-400">1</td>
99
+ <td class="py-3.5 px-4 font-bold text-slate-900">Qwen 2.5 7B Instruct</td>
100
+ <td class="py-3.5 px-4 text-slate-600">Open-Weights</td>
101
+ <td class="py-3.5 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>
102
+ <td class="py-3.5 px-4 text-center">86.0%</td>
103
+ <td class="py-3.5 px-4 text-center">92.5%</td>
104
+ <td class="py-3.5 px-4 text-center text-slate-700 font-semibold">1.31</td>
105
+ <td class="py-3.5 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>
106
  </tr>
107
  <tr class="hover:bg-slate-50 transition">
108
+ <td class="py-3.5 px-4 text-center font-bold text-slate-400">2</td>
109
+ <td class="py-3.5 px-4 font-bold text-slate-900">Falcon Arabic 7B</td>
110
+ <td class="py-3.5 px-4 text-slate-600">Regional Foundation</td>
111
+ <td class="py-3.5 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>
112
+ <td class="py-3.5 px-4 text-center">81.5%</td>
113
+ <td class="py-3.5 px-4 text-center">88.0%</td>
114
+ <td class="py-3.5 px-4 text-center text-emerald-600 font-bold">1.18</td>
115
+ <td class="py-3.5 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>
116
  </tr>
117
  <tr class="hover:bg-slate-50 transition">
118
+ <td class="py-3.5 px-4 text-center font-bold text-slate-400">3</td>
119
+ <td class="py-3.5 px-4 font-bold text-slate-900">ALLaM 7B</td>
120
+ <td class="py-3.5 px-4 text-slate-600">Sovereign GCC</td>
121
+ <td class="py-3.5 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>
122
+ <td class="py-3.5 px-4 text-center">87.0%</td>
123
+ <td class="py-3.5 px-4 text-center">85.0%</td>
124
+ <td class="py-3.5 px-4 text-center text-slate-700 font-semibold">1.35</td>
125
+ <td class="py-3.5 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>
126
  </tr>
127
  <tr class="hover:bg-slate-50 transition">
128
+ <td class="py-3.5 px-4 text-center font-bold text-slate-400">4</td>
129
+ <td class="py-3.5 px-4 font-bold text-slate-900">Fanar 2.0 (Verified Report)</td>
130
+ <td class="py-3.5 px-4 text-slate-600">QCRI Foundation</td>
131
+ <td class="py-3.5 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>
132
+ <td class="py-3.5 px-4 text-center">84.2%</td>
133
+ <td class="py-3.5 px-4 text-center">86.1%</td>
134
+ <td class="py-3.5 px-4 text-center text-slate-700 font-semibold">1.25</td>
135
+ <td class="py-3.5 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>
136
  </tr>
137
  <tr class="hover:bg-slate-50 transition">
138
+ <td class="py-3.5 px-4 text-center font-bold text-slate-400">5</td>
139
+ <td class="py-3.5 px-4 font-bold text-slate-900">GPT-4o-mini</td>
140
+ <td class="py-3.5 px-4 text-slate-600">Commercial API</td>
141
+ <td class="py-3.5 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>
142
+ <td class="py-3.5 px-4 text-center">78.5%</td>
143
+ <td class="py-3.5 px-4 text-center">89.0%</td>
144
+ <td class="py-3.5 px-4 text-center text-slate-700 font-semibold">1.62</td>
145
+ <td class="py-3.5 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>
146
  </tr>
147
  <tr class="hover:bg-slate-50 transition">
148
+ <td class="py-3.5 px-4 text-center font-bold text-slate-400">6</td>
149
+ <td class="py-3.5 px-4 font-bold text-slate-900">Gemma 2 9B Instruct</td>
150
+ <td class="py-3.5 px-4 text-slate-600">Open-Weights</td>
151
+ <td class="py-3.5 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>
152
+ <td class="py-3.5 px-4 text-center">74.0%</td>
153
+ <td class="py-3.5 px-4 text-center">81.5%</td>
154
+ <td class="py-3.5 px-4 text-center text-slate-700 font-semibold">1.54</td>
155
+ <td class="py-3.5 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>
156
  </tr>
157
  <tr class="hover:bg-slate-50 transition">
158
+ <td class="py-3.5 px-4 text-center font-bold text-slate-400">7</td>
159
+ <td class="py-3.5 px-4 font-bold text-slate-900">Llama 3.1 8B Instruct</td>
160
+ <td class="py-3.5 px-4 text-slate-600">Open-Weights</td>
161
+ <td class="py-3.5 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>
162
+ <td class="py-3.5 px-4 text-center">63.0%</td>
163
+ <td class="py-3.5 px-4 text-center">76.0%</td>
164
+ <td class="py-3.5 px-4 text-center text-rose-600 font-bold">2.85</td>
165
+ <td class="py-3.5 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>
166
  </tr>
167
  </tbody>
168
  </table>
169
  </div>
170
  </div>
171
 
172
+ <!-- Commercial CTA Box (Matched to Screenshot) -->
173
+ <div id="audit-services" class="bg-[#0b1320] rounded-2xl p-6 sm:p-8 text-white shadow-2xl border border-slate-800">
174
  <div class="max-w-4xl">
175
+ <span class="inline-block text-[11px] font-extrabold uppercase tracking-widest text-sky-400 bg-sky-950/80 border border-sky-800/60 px-3 py-1 rounded-md mb-3">
176
  COMMERCIAL INTAKE & LICENSING
177
  </span>
178
  <h2 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
179
  Independent System Audits & Red-Teaming Suites
180
  </h2>
181
+ <p class="mt-2 text-slate-300 text-sm leading-relaxed max-w-2xl">
182
  Ensure your Arabic conversational agents and RAG applications don't hallucinate or leak personal identifiers prior to enterprise deployment.
183
  </p>
184
 
185
+ <div class="grid sm:grid-cols-2 gap-5 mt-6">
 
186
 
187
+ <!-- $199 / run (Audit as a Service) -->
188
+ <a href="mailto:support@safeai.report?subject=Request%20Automated%20System%20Audit%20($199)&body=Hello%20Observatory%20Team,%0D%0A%0D%0AWe%20request%20an%20independent%20audit%20and%202-page%20scorecard%20for%20our%20Arabic%20system.%0D%0A%0D%0A•%20Organization:%20%0D%0A•%20Target%20Model%20/%20Architecture:%20%0D%0A•%20Primary%20Dialect%20(Darija,%20Gulf,%20Egypt,%20MSA):%20%0D%0A•%20Batch%20Size%20(e.g.%2050%20to%20200%20logs):%20%0D%0A•%20Cloud%20Hosting%20Region:%20"
189
+ class="block bg-[#111c2e] border border-slate-700/80 hover:border-sky-500/80 p-5 rounded-xl transition duration-200 group">
190
  <div class="flex items-center justify-between">
191
+ <div class="text-sky-400 font-extrabold text-xl tracking-tight">$199 <span class="text-xs font-normal text-slate-400">/ run</span></div>
192
+ <span class="text-xs font-semibold text-sky-400 group-hover:translate-x-0.5 transition-transform">Deploy Audit →</span>
 
 
193
  </div>
194
+ <div class="font-bold text-white text-base mt-2">Automated System Audit & PDF Certificate</div>
195
  <p class="text-xs text-slate-300 mt-2 leading-relaxed">
196
  Send 200 interaction logs. Receive a branded 2-page diagnostic report with specific prompt and RAG code remediations within 24 hours.
197
  </p>
198
  </a>
199
 
200
+ <!-- $149 one-time (Direct Gumroad Storefront) -->
201
+ <a href="https://safeai.gumroad.com/l/arabic-ai-redteam"
202
+ target="_blank"
203
+ rel="noopener noreferrer"
204
+ class="block bg-[#111c2e] border border-slate-700/80 hover:border-sky-500/80 p-5 rounded-xl transition duration-200 group">
205
  <div class="flex items-center justify-between">
206
+ <div class="text-sky-400 font-extrabold text-xl tracking-tight">$149 <span class="text-xs font-normal text-slate-400">one-time</span></div>
207
+ <span class="text-xs font-semibold text-sky-400 group-hover:translate-x-0.5 transition-transform">Acquire Suite →</span>
 
 
208
  </div>
209
+ <div class="font-bold text-white text-base mt-2">Arabic Enterprise Red-Teaming Matrix</div>
210
  <p class="text-xs text-slate-300 mt-2 leading-relaxed">
211
  Download 500+ curated adversarial test cases covering Darija, Egyptian, Gulf, PDPL privacy bounds, and RAG hallucination traps in JSONL/CSV.
212
  </p>
 
214
 
215
  </div>
216
 
217
+ <div class="mt-8 pt-4 border-t border-slate-800/80 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 text-xs text-slate-400">
 
218
  <div>Direct Inquiries: <a href="mailto:support@safeai.report" class="text-sky-400 hover:underline font-mono">support@safeai.report</a></div>
219
  <div>Powered by the <span class="text-slate-200 font-semibold">Arabic AI Observatory Engine</span></div>
220
  </div>
 
221
  </div>
222
  </div>
223