Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <meta name="author" content="Dr. Mohamed Sana"> | |
| <title>KETI LLM Benchmarks</title> | |
| <!-- Tailwind + Chart.js --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| :root{ | |
| color-scheme: light dark; | |
| --text: #0f172a; | |
| --bg: #f8fafc; | |
| --card-bg: rgba(255,255,255,.75); | |
| --border: #e2e8f0; | |
| --header-bg: rgba(241,245,249,.85); | |
| --sticky-bg: rgba(248,250,252,.92); | |
| --chip-bg:#f1f5f9; | |
| } | |
| .dark{ | |
| --text: #e2e8f0; | |
| --bg: #020617; | |
| --card-bg: rgba(2,6,23,.6); | |
| --border:#334155; | |
| --header-bg: rgba(30,41,59,.75); | |
| --sticky-bg: rgba(2,6,23,.92); | |
| --chip-bg: rgba(15,23,42,.6); | |
| } | |
| html { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans"; } | |
| body { color: var(--text); background: var(--bg); } | |
| .card{ border-radius:1rem; box-shadow:0 10px 25px rgba(2,6,23,.08); background:var(--card-bg); backdrop-filter: blur(8px); border:1px solid var(--border); } | |
| .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.8rem; padding:.625rem 1rem; font-weight:700; transition: transform .05s ease; } | |
| .btn:disabled{ opacity:.5; cursor:wait; } | |
| #dataStatus[data-state="error"]{ border-color:#f59e0b; } | |
| .btn:active{ transform: scale(.98); } | |
| .btn-primary{ background:#4f46e5; color:#fff; } .btn-primary:hover{ background:#6366f1; } | |
| .btn-ghost{ background:transparent; border:1px solid var(--border); } .btn-ghost:hover{ background:var(--chip-bg); } | |
| .btn-outline{ border:1px solid #4f46e5; color:#4338ca; } .dark .btn-outline{ color:#a5b4fc; } | |
| .btn-outline:hover{ background:#eef2ff; } .dark .btn-outline:hover{ background: rgba(30,27,75,.5); } | |
| .input{ width:100%; border:1px solid var(--border); border-radius:.8rem; padding:.6rem .8rem; background:#fff; color:#0f172a; } | |
| .dark .input{ background:#0b1220; color:#e2e8f0; } | |
| .input:focus{ outline:none; box-shadow:0 0 0 2px rgba(99,102,241,.6); } | |
| .label{ font-size:.875rem; font-weight:600; color:#334155; } .dark .label{ color:#cbd5e1; } | |
| .tab{ padding:.6rem 1rem; border-radius:.8rem; cursor:pointer; font-weight:700; } | |
| .tab-active{ background:#fff; border:1px solid var(--border); box-shadow:0 1px 2px rgba(0,0,0,.04); } .dark .tab-active{ background:#0b1220; } | |
| .pill{ display:inline-flex; align-items:center; padding:.1rem .5rem; border-radius:999px; font-size:.53rem; font-weight:700; } | |
| .metric-badge{ background:#ecfdf5; color:#065f46; } .dark .metric-badge{ background:rgba(16,185,129,.18); color:#d1fae5; } | |
| .metric-badge-judge{ background:#e0f2fe; color:#075985; } .dark .metric-badge-judge{ background:rgba(56,189,248,.18); color:#bae6fd; } | |
| .kpi{ color:#475569; font-size:.875rem; } .dark .kpi{ color:#94a3b8; } | |
| /* Column widths */ | |
| /* .rank-col{ width:1.5rem; } | |
| .provider-col{ width:4rem; } | |
| .model-col{ width:10rem; white-space:nowrap; } | |
| .mean-col{ width:3rem; white-space:nowrap; } | |
| .ds-col{ min-width:9.5rem; white-space:nowrap; } */ | |
| .rank-col{ } | |
| .provider-col{ } | |
| .model-col{ white-space:nowrap; } | |
| .mean-col{ white-space:nowrap; } | |
| .ds-col{ white-space:nowrap; } | |
| /* Sticky columns: use calc so offsets update easily */ | |
| .sticky-rank{ position: sticky; left: 0; z-index: 3; background: var(--sticky-bg); } | |
| .sticky-provider{ position: sticky; left: 2.3rem; z-index: 3; background: var(--sticky-bg); } | |
| .sticky-model{ position: sticky; left: calc(1.85rem + 6rem); z-index: 3; background: var(--sticky-bg); } | |
| .sticky-mean{ position: sticky; left: calc(2.3rem + 4rem + 10rem + 0.5rem); z-index: 3; background: var(--sticky-bg); } | |
| /* Keep provider, model and mean visible together on narrow screens. */ | |
| @media (max-width: 768px){ | |
| .rank-col, .ds-col, .ds-head { display:none ; } | |
| table{ min-width:0 ; table-layout:fixed; } | |
| .provider-col{ width:28%; } | |
| .model-col{ width:50%; white-space:normal; overflow-wrap:anywhere; } | |
| .mean-col{ width:22%; } | |
| .sticky-provider, .sticky-model, .sticky-mean{ position:static; } | |
| td.provider-col{ overflow-wrap:anywhere; } | |
| th, td{ padding:.5rem ; } | |
| } | |
| /* Header background */ | |
| thead th{ background: var(--header-bg); } | |
| /* Global gradient */ | |
| .gradient-bg{ | |
| background: | |
| radial-gradient(1200px 600px at 20% -10%, rgba(99,102,241,.25), rgba(99,102,241,0) 60%), | |
| radial-gradient(1200px 600px at 80% -10%, rgba(20,184,166,.2), rgba(20,184,166,0) 60%); | |
| } | |
| /* Scrollbar for horizontal overflow */ | |
| .scrollbar-thin::-webkit-scrollbar{ height:10px; } | |
| .scrollbar-thin::-webkit-scrollbar-thumb{ background:#c7d2fe; border-radius:999px; } | |
| .scrollbar-thin::-webkit-scrollbar-track{ background:transparent; } | |
| /* Chart container: responsive height */ | |
| #chartWrap{ height: clamp(260px, 42vh, 460px); } | |
| </style> | |
| </head> | |
| <body class="min-h-screen dark:bg-gray-800"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-40 backdrop-blur dark:bg-white-800 border-b" style="border-color: var(--border)"> | |
| <div class="mx-auto max-w-7xl px-4 md:px-6 py-3 md:py-4 flex items-center justify-between"> | |
| <div class="flex items-center gap-3 md:gap-4"> | |
| <div class="h-10 w-10 rounded-xl bg-indigo-600 text-white grid place-items-center shadow-lg">📡</div> | |
| <div> | |
| <h1 class="text-lg md:text-xl font-extrabold tracking-tight" style="color: var(--text)">KETI LLM Benchmarks</h1> | |
| <p class="text-xs md:text-sm">Benchmarking models across KETI datasets</p> | |
| </div> | |
| </div> | |
| <div class="md:flex items-center gap-2 hidden"> | |
| <button id="refreshBtn" data-action="refresh" class="btn btn-ghost" title="Refresh results">⟲ Refresh</button> | |
| <button id="themeToggle" data-action="theme" class="btn btn-ghost" title="Toggle dark mode">🌙</button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main --> | |
| <main class="mx-auto max-w-7xl px-4 md:px-6 py-6 md:py-8 space-y-6 md:space-y-8"> | |
| <!-- Tabs --> | |
| <div class="flex flex-wrap gap-2 md:gap-3"> | |
| <button class="tab tab-active" data-tab="leaderboard">🏆 Leaderboard</button> | |
| <button class="tab" data-tab="about">ℹ️ About</button> | |
| <a class="btn btn-ghost" href="https://github.com/alsgur0720/K-Prism" target="_blank" rel="noopener noreferrer">↗ K-Prism Code</a> | |
| <a class="btn btn-ghost" href="https://huggingface.co/datasets/KETI-NLP/K-prism" target="_blank" rel="noopener noreferrer">↗ K-Prism Dataset</a> | |
| </div> | |
| <div id="dataStatus" class="card p-4 text-sm" role="status" aria-live="polite" data-state="loading">Loading published results…</div> | |
| <noscript><p class="card p-4">Enable JavaScript to view and filter the leaderboard.</p></noscript> | |
| <!-- Leaderboard Tab --> | |
| <section id="tab-leaderboard" class="space-y-6 md:space-y-8"> | |
| <!-- Controls --> | |
| <div class="grid lg:grid-cols-4 gap-4 md:gap-6"> | |
| <div class="card p-4 md:p-6 lg:col-span-2"> | |
| <div class="flex items-center justify-between"> | |
| <h2 class="font-semibold text-base md:text-lg" style="color: var(--text)">Select Datasets</h2> | |
| <div class="flex gap-2"> | |
| <button id="selectAllBtn" class="btn btn-ghost text-xs md:text-sm px-3">Select all</button> | |
| <button id="clearAllBtn" class="btn btn-ghost text-xs md:text-sm px-3">Clear</button> | |
| </div> | |
| </div> | |
| <div id="datasetFilters" class="mt-3 md:mt-4 flex flex-wrap gap-2.5"></div> <!--grid-cols-1 sm:grid-cols-2 lg:grid-cols-3--> | |
| </div> | |
| <div class="card p-4 md:p-6"> | |
| <h2 class="font-semibold text-base md:text-lg" style="color: var(--text)">Search & Filter</h2> | |
| <div class="mt-2 md:mt-3 space-y-2.5"> | |
| <input id="searchInput" class="input" placeholder="Search provider/model…"/> | |
| <select id="providerSelect" class="input"> | |
| <option value="">All providers</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="card p-4 md:p-6"> | |
| <h2 class="font-semibold text-base md:text-lg" style="color: var(--text)">KPI</h2> | |
| <div class="mt-2 grid grid-cols-2 gap-3"> | |
| <div> | |
| <div class="text-2xl md:text-3xl font-extrabold" id="kpiModels">—</div> | |
| <div class="kpi">Models</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl md:text-3xl font-extrabold" id="kpiDatasets">—</div> | |
| <div class="kpi">Datasets</div> | |
| </div> | |
| <div class="col-span-2 text-xs text-slate-500 dark:text-slate-400" id="lastUpdated">Last updated —</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Visualization --> | |
| <div class="card p-5 md:p-6 lg:p-8"> | |
| <div class="flex items-center justify-between gap-3"> | |
| <h2 class="font-semibold text-base md:text-lg" style="color: var(--text)">Model Comparison</h2> | |
| <div class="text-xs md:text-sm text-slate-500">Click ☆ on rows to compare models</div> | |
| </div> | |
| <div id="chartWrap" class="mt-3 md:mt-4"> | |
| <p id="chartUnavailable" class="hidden text-sm text-slate-500">The comparison chart could not be loaded. Scores are available in the table below.</p> | |
| <canvas id="scoresChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Table (always horizontally scrollable) --> | |
| <div class="card overflow-hidden"> | |
| <div class="px-4 md:px-6 py-3 md:py-4 flex items-center justify-between"> | |
| <div class="font-semibold" style="color: var(--text)">Leaderboard</div> | |
| <div class="text-xs md:text-sm text-slate-500">Sorted by mean score across selected datasets</div> | |
| </div> | |
| <div class="overflow-x-auto overscroll-x-contain scrollbar-thin pb-2"> | |
| <table class="min-w-[64rem] w-full text-sm"> | |
| <thead class="border-t border-b" style="border-color: var(--border)"> | |
| <tr id="tableHeaderRow"> | |
| <th class="p-3 text-left rank-col sticky-rank">#</th> | |
| <th class="p-3 text-left provider-col sticky-provider border-l">Provider</th> | |
| <th class="p-3 text-left model-col sticky-model border-l">Model</th> | |
| <th class="p-3 text-left mean-col sticky-mean border-l"> | |
| Mean | |
| <div class="text-[11px] text-slate-500">on selected</div> | |
| </th> | |
| <!-- Dataset columns injected here --> | |
| </tr> | |
| </thead> | |
| <tbody id="tableBody"></tbody> | |
| </table> | |
| </div> | |
| <div class="flex items-center gap-2 justify-end p-3"> | |
| <button id="refreshMobileBtn" data-action="refresh" class="btn btn-ghost md:hidden" title="Refresh results">⟲ Refresh</button> | |
| <button id="exportCsvBtn" disabled class="btn btn-outline" title="Export current view to CSV">⭳ Export CSV</button> | |
| <button id="themeToggleMobile" data-action="theme" class="btn btn-ghost md:hidden" title="Toggle dark mode">🌙</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Tab --> | |
| <section id="tab-about" class="hidden"> | |
| <div class="card p-5 md:p-6 lg:p-8 space-y-3"> | |
| <h2 class="text-lg md:text-xl font-bold" style="color: var(--text)">About this Leaderboard</h2> | |
| <p class="text-sm text-slate-600 dark:text-slate-300"> | |
| This leaderboard presents published model evaluations on KETI's ethicality and veracity benchmark datasets. | |
| </p> | |
| <p class="text-sm text-slate-600 dark:text-slate-300"> | |
| Detailed K-Prism evaluation code and documentation: | |
| <a class="underline" href="https://github.com/alsgur0720/K-Prism" target="_blank" rel="noopener noreferrer">alsgur0720/K-Prism on GitHub</a>. | |
| </p> | |
| <div class="space-y-2"> | |
| <h3 class="font-semibold">K-Prism Dataset</h3> | |
| <p class="text-sm text-slate-600 dark:text-slate-300"> | |
| Browse the questions, answers, and explanations, or download the annotations and source images from Hugging Face. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <a class="btn btn-ghost text-sm" href="https://huggingface.co/datasets/KETI-NLP/K-prism" target="_blank" rel="noopener noreferrer">↗ Dataset Repository</a> | |
| <a class="btn btn-ghost text-sm" href="https://huggingface.co/datasets/KETI-NLP/K-prism/viewer/text/test" target="_blank" rel="noopener noreferrer">↗ Text Track Viewer</a> | |
| <a class="btn btn-ghost text-sm" href="https://huggingface.co/datasets/KETI-NLP/K-prism/viewer/image/test" target="_blank" rel="noopener noreferrer">↗ Image Track Viewer</a> | |
| </div> | |
| </div> | |
| <p class="text-sm text-slate-600 dark:text-slate-300"> | |
| Model submissions and automatic evaluations are not available on this page. Results are updated when the maintainers publish a new evaluation. | |
| </p> | |
| </div> | |
| </section> | |
| </main> | |
| <div id="toast" class="fixed bottom-4 left-1/2 -translate-x-1/2 hidden"> | |
| <div class="rounded-xl bg-slate-900 text-white px-4 py-2 shadow-lg">✅ <span id="toastMsg">Done</span></div> | |
| </div> | |
| <script type="module" src="./front/leaderboard.mjs"></script> | |
| </body> | |
| </html> | |