Replace neutral color classes with gray color classes in results HTML generation
Browse files- Update Tailwind CSS color classes from 'neutral-*' to 'gray-*' for consistent styling
- Maintain existing layout and functionality of results display
- Ensure color scheme remains visually consistent across model result tiles
app.py
CHANGED
@@ -220,10 +220,10 @@ def generate_results_html(results):
|
|
220 |
<div class="grid xl:grid-cols-5 md:grid-cols-5 grid-cols-1 gap-1">
|
221 |
<!-- Tile 1: SwinV2/detect -->
|
222 |
<div
|
223 |
-
class="group flex flex-col bg-
|
224 |
<div
|
225 |
class="-m-4 h-24 {get_header_color(results[0][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[0][-1])[4]}">
|
226 |
-
<span class="text-
|
227 |
<span
|
228 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[0][-1])[2]} px-2.5 py-0.5 {get_header_color(results[0][-1])[3]}"
|
229 |
>
|
@@ -234,8 +234,8 @@ def generate_results_html(results):
|
|
234 |
</span>
|
235 |
</div>
|
236 |
<div>
|
237 |
-
<div class="mt-4 relative -mx-4 bg-
|
238 |
-
<div class="w-full bg-
|
239 |
<div class="bg-green-400 h-full rounded-none" style="width: {results[0][2] * 100:.2f}%;">
|
240 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
241 |
<span class="ml-1 font-medium font-mono">{results[0][2]:.4f}</span>
|
@@ -243,8 +243,8 @@ def generate_results_html(results):
|
|
243 |
</div>
|
244 |
</div>
|
245 |
</div>
|
246 |
-
<div class="mt-4 relative -mx-4 bg-
|
247 |
-
<div class="w-full bg-
|
248 |
<div class="bg-red-400 h-full rounded-none" style="width: {results[0][3] * 100:.2f}%;">
|
249 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
250 |
<span class="ml-1 font-medium font-mono">{results[0][3]:.4f}</span>
|
@@ -255,18 +255,18 @@ def generate_results_html(results):
|
|
255 |
</div>
|
256 |
<div class="flex flex-col items-start">
|
257 |
<h4 class="mt-4 text-sm font-semibold tracking-wide">SwinV2 Based</h4>
|
258 |
-
<hr class="py-px my-2 w-full bg-
|
259 |
<div class="text-xs font-mono">Real: {results[0][2]:.4f}, AI: {results[0][3]:.4f}</div>
|
260 |
-
<hr class="py-px mt-6 w-full bg-
|
261 |
<a class="mt-2 text-[0.66rem] tracking-wide">@haywoodsloan / more info</a>
|
262 |
</div>
|
263 |
</div>
|
264 |
<!-- Tile 2: ViT/AI-vs-Real -->
|
265 |
<div
|
266 |
-
class="group flex flex-col bg-
|
267 |
<div
|
268 |
class="-m-4 h-24 {get_header_color(results[1][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[1][-1])[4]}">
|
269 |
-
<span class="text-
|
270 |
<span
|
271 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[1][-1])[2]} px-2.5 py-0.5 {get_header_color(results[1][-1])[3]}"
|
272 |
>
|
@@ -277,8 +277,8 @@ def generate_results_html(results):
|
|
277 |
</span>
|
278 |
</div>
|
279 |
<div>
|
280 |
-
<div class="mt-4 relative -mx-4 bg-
|
281 |
-
<div class="w-full bg-
|
282 |
<div class="bg-green-400 h-full rounded-none" style="width: {results[1][2] * 100:.2f}%;">
|
283 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
284 |
<span class="ml-1 font-medium font-mono">{results[1][2]:.4f}</span>
|
@@ -286,8 +286,8 @@ def generate_results_html(results):
|
|
286 |
</div>
|
287 |
</div>
|
288 |
</div>
|
289 |
-
<div class="mt-4 relative -mx-4 bg-
|
290 |
-
<div class="w-full bg-
|
291 |
<div class="bg-red-400 h-full rounded-none" style="width: {results[1][3] * 100:.2f}%;">
|
292 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
293 |
<span class="ml-1 font-medium font-mono">{results[1][3]:.4f}</span>
|
@@ -298,18 +298,18 @@ def generate_results_html(results):
|
|
298 |
</div>
|
299 |
<div class="flex flex-col items-start">
|
300 |
<h4 class="mt-4 text-sm font-semibold tracking-wide">ViT Based</h4>
|
301 |
-
<hr class="py-px my-2 w-full bg-
|
302 |
<div class="text-xs font-mono">Real: {results[1][2]:.4f}, AI: {results[1][3]:.4f}</div>
|
303 |
-
<hr class="py-px mt-6 w-full bg-
|
304 |
<a class="mt-2 text-[0.66rem] tracking-wide">@Heem2 / more info</a>
|
305 |
</div>
|
306 |
</div>
|
307 |
<!-- Tile 3: Swin/SDXL -->
|
308 |
<div
|
309 |
-
class="group flex flex-col bg-
|
310 |
<div
|
311 |
class="-m-4 h-24 {get_header_color(results[2][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[2][-1])[4]}">
|
312 |
-
<span class="text-
|
313 |
<span
|
314 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[2][-1])[2]} px-2.5 py-0.5 {get_header_color(results[2][-1])[3]}"
|
315 |
>
|
@@ -320,8 +320,8 @@ def generate_results_html(results):
|
|
320 |
</span>
|
321 |
</div>
|
322 |
<div>
|
323 |
-
<div class="mt-4 relative -mx-4 bg-
|
324 |
-
<div class="w-full bg-
|
325 |
<div class="bg-green-400 h-full rounded-none" style="width: {results[2][2] * 100:.2f}%;">
|
326 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
327 |
<span class="ml-1 font-medium font-mono">{results[2][2]:.4f}</span>
|
@@ -329,8 +329,8 @@ def generate_results_html(results):
|
|
329 |
</div>
|
330 |
</div>
|
331 |
</div>
|
332 |
-
<div class="mt-4 relative -mx-4 bg-
|
333 |
-
<div class="w-full bg-
|
334 |
<div class="bg-red-400 h-full rounded-none" style="width: {results[2][3] * 100:.2f}%;">
|
335 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
336 |
<span class="ml-1 font-medium font-mono">{results[2][3]:.4f}</span>
|
@@ -341,18 +341,18 @@ def generate_results_html(results):
|
|
341 |
</div>
|
342 |
<div class="flex flex-col items-start">
|
343 |
<h4 class="mt-4 text-sm font-semibold tracking-wide">Swin Based</h4>
|
344 |
-
<hr class="py-px my-2 w-full bg-
|
345 |
<div class="text-xs font-mono">Real: {results[2][2]:.4f}, AI: {results[2][3]:.4f}</div>
|
346 |
-
<hr class="py-px mt-6 w-full bg-
|
347 |
<a class="mt-2 text-[0.66rem] tracking-wide">@Organika / more info</a>
|
348 |
</div>
|
349 |
</div>
|
350 |
<!-- Tile 4: Swin/SDXL-FLUX -->
|
351 |
<div
|
352 |
-
class="group flex flex-col bg-
|
353 |
<div
|
354 |
class="-m-4 h-24 {get_header_color(results[3][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[3][-1])[4]}">
|
355 |
-
<span class="text-
|
356 |
<span
|
357 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[3][-1])[2]} px-2.5 py-0.5 {get_header_color(results[3][-1])[3]}"
|
358 |
>
|
@@ -363,8 +363,8 @@ def generate_results_html(results):
|
|
363 |
</span>
|
364 |
</div>
|
365 |
<div>
|
366 |
-
<div class="mt-4 relative -mx-4 bg-
|
367 |
-
<div class="w-full bg-
|
368 |
<div class="bg-green-400 h-full rounded-none" style="width: {results[3][2] * 100:.2f}%;">
|
369 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
370 |
<span class="ml-1 font-medium font-mono">{results[3][2]:.4f}</span>
|
@@ -372,8 +372,8 @@ def generate_results_html(results):
|
|
372 |
</div>
|
373 |
</div>
|
374 |
</div>
|
375 |
-
<div class="mt-4 relative -mx-4 bg-
|
376 |
-
<div class="w-full bg-
|
377 |
<div class="bg-red-400 h-full rounded-none" style="width: {results[3][3] * 100:.2f}%;">
|
378 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
379 |
<span class="ml-1 font-medium font-mono">{results[3][3]:.4f}</span>
|
@@ -384,18 +384,18 @@ def generate_results_html(results):
|
|
384 |
</div>
|
385 |
<div class="flex flex-col items-start">
|
386 |
<h4 class="mt-4 text-sm font-semibold tracking-wide">Swin Based</h4>
|
387 |
-
<hr class="py-px my-2 w-full bg-
|
388 |
<div class="text-xs font-mono">Real: {results[3][2]:.4f}, AI: {results[3][3]:.4f}</div>
|
389 |
-
<hr class="py-px mt-6 w-full bg-
|
390 |
<a class="mt-2 text-[0.66rem] tracking-wide">@cmckinle / more info</a>
|
391 |
</div>
|
392 |
</div>
|
393 |
<!-- Tile 5: GOAT -->
|
394 |
<div
|
395 |
-
class="group flex flex-col bg-
|
396 |
<div
|
397 |
class="-m-4 h-24 {get_header_color(results[4][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[4][-1])[4]}">
|
398 |
-
<span class="text-
|
399 |
<span
|
400 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[4][-1])[2]} px-2.5 py-0.5 {get_header_color(results[4][-1])[3]}"
|
401 |
>
|
@@ -406,8 +406,8 @@ def generate_results_html(results):
|
|
406 |
</span>
|
407 |
</div>
|
408 |
<div>
|
409 |
-
<div class="mt-4 relative -mx-4 bg-
|
410 |
-
<div class="w-full bg-
|
411 |
<div class="bg-green-400 h-full rounded-none" style="width: {results[4][2] * 100:.2f}%;">
|
412 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
413 |
<span class="ml-1 font-medium font-mono">{results[4][2]:.4f}</span>
|
@@ -415,8 +415,8 @@ def generate_results_html(results):
|
|
415 |
</div>
|
416 |
</div>
|
417 |
</div>
|
418 |
-
<div class="mt-4 relative -mx-4 bg-
|
419 |
-
<div class="w-full bg-
|
420 |
<div class="bg-red-400 h-full rounded-none" style="width: {results[4][3] * 100:.2f}%;">
|
421 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
422 |
<span class="ml-1 font-medium font-mono">{results[4][3]:.4f}</span>
|
@@ -427,9 +427,9 @@ def generate_results_html(results):
|
|
427 |
</div>
|
428 |
<div class="flex flex-col items-start">
|
429 |
<h4 class="mt-4 text-sm font-semibold tracking-wide">GOAT Model</h4>
|
430 |
-
<hr class="py-px my-2 w-full bg-
|
431 |
<div class="text-xs font-mono">Real: {results[4][2]:.4f}, AI: {results[4][3]:.4f}</div>
|
432 |
-
<hr class="py-px mt-6 w-full bg-
|
433 |
<a class="mt-2 text-[0.66rem] tracking-wide">@GOAT / more info</a>
|
434 |
</div>
|
435 |
</div>
|
|
|
220 |
<div class="grid xl:grid-cols-5 md:grid-cols-5 grid-cols-1 gap-1">
|
221 |
<!-- Tile 1: SwinV2/detect -->
|
222 |
<div
|
223 |
+
class="group flex flex-col bg-gray-300 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
|
224 |
<div
|
225 |
class="-m-4 h-24 {get_header_color(results[0][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[0][-1])[4]}">
|
226 |
+
<span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 1: {results[0][1]}</span>
|
227 |
<span
|
228 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[0][-1])[2]} px-2.5 py-0.5 {get_header_color(results[0][-1])[3]}"
|
229 |
>
|
|
|
234 |
</span>
|
235 |
</div>
|
236 |
<div>
|
237 |
+
<div class="mt-4 relative -mx-4 bg-gray-800">
|
238 |
+
<div class="w-full bg-gray-400 rounded-none h-8">
|
239 |
<div class="bg-green-400 h-full rounded-none" style="width: {results[0][2] * 100:.2f}%;">
|
240 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
241 |
<span class="ml-1 font-medium font-mono">{results[0][2]:.4f}</span>
|
|
|
243 |
</div>
|
244 |
</div>
|
245 |
</div>
|
246 |
+
<div class="mt-4 relative -mx-4 bg-gray-800">
|
247 |
+
<div class="w-full bg-gray-400 rounded-none h-8">
|
248 |
<div class="bg-red-400 h-full rounded-none" style="width: {results[0][3] * 100:.2f}%;">
|
249 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
250 |
<span class="ml-1 font-medium font-mono">{results[0][3]:.4f}</span>
|
|
|
255 |
</div>
|
256 |
<div class="flex flex-col items-start">
|
257 |
<h4 class="mt-4 text-sm font-semibold tracking-wide">SwinV2 Based</h4>
|
258 |
+
<hr class="py-px my-2 w-full bg-gray-700" />
|
259 |
<div class="text-xs font-mono">Real: {results[0][2]:.4f}, AI: {results[0][3]:.4f}</div>
|
260 |
+
<hr class="py-px mt-6 w-full bg-gray-700" />
|
261 |
<a class="mt-2 text-[0.66rem] tracking-wide">@haywoodsloan / more info</a>
|
262 |
</div>
|
263 |
</div>
|
264 |
<!-- Tile 2: ViT/AI-vs-Real -->
|
265 |
<div
|
266 |
+
class="group flex flex-col bg-gray-300 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
|
267 |
<div
|
268 |
class="-m-4 h-24 {get_header_color(results[1][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[1][-1])[4]}">
|
269 |
+
<span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 2: {results[1][1]}</span>
|
270 |
<span
|
271 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[1][-1])[2]} px-2.5 py-0.5 {get_header_color(results[1][-1])[3]}"
|
272 |
>
|
|
|
277 |
</span>
|
278 |
</div>
|
279 |
<div>
|
280 |
+
<div class="mt-4 relative -mx-4 bg-gray-800">
|
281 |
+
<div class="w-full bg-gray-400 rounded-none h-8">
|
282 |
<div class="bg-green-400 h-full rounded-none" style="width: {results[1][2] * 100:.2f}%;">
|
283 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
284 |
<span class="ml-1 font-medium font-mono">{results[1][2]:.4f}</span>
|
|
|
286 |
</div>
|
287 |
</div>
|
288 |
</div>
|
289 |
+
<div class="mt-4 relative -mx-4 bg-gray-800">
|
290 |
+
<div class="w-full bg-gray-400 rounded-none h-8">
|
291 |
<div class="bg-red-400 h-full rounded-none" style="width: {results[1][3] * 100:.2f}%;">
|
292 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
293 |
<span class="ml-1 font-medium font-mono">{results[1][3]:.4f}</span>
|
|
|
298 |
</div>
|
299 |
<div class="flex flex-col items-start">
|
300 |
<h4 class="mt-4 text-sm font-semibold tracking-wide">ViT Based</h4>
|
301 |
+
<hr class="py-px my-2 w-full bg-gray-700" />
|
302 |
<div class="text-xs font-mono">Real: {results[1][2]:.4f}, AI: {results[1][3]:.4f}</div>
|
303 |
+
<hr class="py-px mt-6 w-full bg-gray-700" />
|
304 |
<a class="mt-2 text-[0.66rem] tracking-wide">@Heem2 / more info</a>
|
305 |
</div>
|
306 |
</div>
|
307 |
<!-- Tile 3: Swin/SDXL -->
|
308 |
<div
|
309 |
+
class="group flex flex-col bg-gray-300 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
|
310 |
<div
|
311 |
class="-m-4 h-24 {get_header_color(results[2][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[2][-1])[4]}">
|
312 |
+
<span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 3: {results[2][1]}</span>
|
313 |
<span
|
314 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[2][-1])[2]} px-2.5 py-0.5 {get_header_color(results[2][-1])[3]}"
|
315 |
>
|
|
|
320 |
</span>
|
321 |
</div>
|
322 |
<div>
|
323 |
+
<div class="mt-4 relative -mx-4 bg-gray-800">
|
324 |
+
<div class="w-full bg-gray-400 rounded-none h-8">
|
325 |
<div class="bg-green-400 h-full rounded-none" style="width: {results[2][2] * 100:.2f}%;">
|
326 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
327 |
<span class="ml-1 font-medium font-mono">{results[2][2]:.4f}</span>
|
|
|
329 |
</div>
|
330 |
</div>
|
331 |
</div>
|
332 |
+
<div class="mt-4 relative -mx-4 bg-gray-800">
|
333 |
+
<div class="w-full bg-gray-400 rounded-none h-8">
|
334 |
<div class="bg-red-400 h-full rounded-none" style="width: {results[2][3] * 100:.2f}%;">
|
335 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
336 |
<span class="ml-1 font-medium font-mono">{results[2][3]:.4f}</span>
|
|
|
341 |
</div>
|
342 |
<div class="flex flex-col items-start">
|
343 |
<h4 class="mt-4 text-sm font-semibold tracking-wide">Swin Based</h4>
|
344 |
+
<hr class="py-px my-2 w-full bg-gray-700" />
|
345 |
<div class="text-xs font-mono">Real: {results[2][2]:.4f}, AI: {results[2][3]:.4f}</div>
|
346 |
+
<hr class="py-px mt-6 w-full bg-gray-700" />
|
347 |
<a class="mt-2 text-[0.66rem] tracking-wide">@Organika / more info</a>
|
348 |
</div>
|
349 |
</div>
|
350 |
<!-- Tile 4: Swin/SDXL-FLUX -->
|
351 |
<div
|
352 |
+
class="group flex flex-col bg-gray-300 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
|
353 |
<div
|
354 |
class="-m-4 h-24 {get_header_color(results[3][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[3][-1])[4]}">
|
355 |
+
<span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 4: {results[3][1]}</span>
|
356 |
<span
|
357 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[3][-1])[2]} px-2.5 py-0.5 {get_header_color(results[3][-1])[3]}"
|
358 |
>
|
|
|
363 |
</span>
|
364 |
</div>
|
365 |
<div>
|
366 |
+
<div class="mt-4 relative -mx-4 bg-gray-800">
|
367 |
+
<div class="w-full bg-gray-400 rounded-none h-8">
|
368 |
<div class="bg-green-400 h-full rounded-none" style="width: {results[3][2] * 100:.2f}%;">
|
369 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
370 |
<span class="ml-1 font-medium font-mono">{results[3][2]:.4f}</span>
|
|
|
372 |
</div>
|
373 |
</div>
|
374 |
</div>
|
375 |
+
<div class="mt-4 relative -mx-4 bg-gray-800">
|
376 |
+
<div class="w-full bg-gray-400 rounded-none h-8">
|
377 |
<div class="bg-red-400 h-full rounded-none" style="width: {results[3][3] * 100:.2f}%;">
|
378 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
379 |
<span class="ml-1 font-medium font-mono">{results[3][3]:.4f}</span>
|
|
|
384 |
</div>
|
385 |
<div class="flex flex-col items-start">
|
386 |
<h4 class="mt-4 text-sm font-semibold tracking-wide">Swin Based</h4>
|
387 |
+
<hr class="py-px my-2 w-full bg-gray-700" />
|
388 |
<div class="text-xs font-mono">Real: {results[3][2]:.4f}, AI: {results[3][3]:.4f}</div>
|
389 |
+
<hr class="py-px mt-6 w-full bg-gray-700" />
|
390 |
<a class="mt-2 text-[0.66rem] tracking-wide">@cmckinle / more info</a>
|
391 |
</div>
|
392 |
</div>
|
393 |
<!-- Tile 5: GOAT -->
|
394 |
<div
|
395 |
+
class="group flex flex-col bg-gray-300 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
|
396 |
<div
|
397 |
class="-m-4 h-24 {get_header_color(results[4][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[4][-1])[4]}">
|
398 |
+
<span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 5: {results[4][1]}</span>
|
399 |
<span
|
400 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[4][-1])[2]} px-2.5 py-0.5 {get_header_color(results[4][-1])[3]}"
|
401 |
>
|
|
|
406 |
</span>
|
407 |
</div>
|
408 |
<div>
|
409 |
+
<div class="mt-4 relative -mx-4 bg-gray-800">
|
410 |
+
<div class="w-full bg-gray-400 rounded-none h-8">
|
411 |
<div class="bg-green-400 h-full rounded-none" style="width: {results[4][2] * 100:.2f}%;">
|
412 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
413 |
<span class="ml-1 font-medium font-mono">{results[4][2]:.4f}</span>
|
|
|
415 |
</div>
|
416 |
</div>
|
417 |
</div>
|
418 |
+
<div class="mt-4 relative -mx-4 bg-gray-800">
|
419 |
+
<div class="w-full bg-gray-400 rounded-none h-8">
|
420 |
<div class="bg-red-400 h-full rounded-none" style="width: {results[4][3] * 100:.2f}%;">
|
421 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
422 |
<span class="ml-1 font-medium font-mono">{results[4][3]:.4f}</span>
|
|
|
427 |
</div>
|
428 |
<div class="flex flex-col items-start">
|
429 |
<h4 class="mt-4 text-sm font-semibold tracking-wide">GOAT Model</h4>
|
430 |
+
<hr class="py-px my-2 w-full bg-gray-700" />
|
431 |
<div class="text-xs font-mono">Real: {results[4][2]:.4f}, AI: {results[4][3]:.4f}</div>
|
432 |
+
<hr class="py-px mt-6 w-full bg-gray-700" />
|
433 |
<a class="mt-2 text-[0.66rem] tracking-wide">@GOAT / more info</a>
|
434 |
</div>
|
435 |
</div>
|