183 lines
8.7 KiB
HTML
183 lines
8.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>CPU Benchmark Submissions</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
|
||
|
|
</head>
|
||
|
|
<body class="min-h-screen bg-slate-100 text-slate-900">
|
||
|
|
<div class="bg-slate-950 text-white">
|
||
|
|
<div class="mx-auto max-w-7xl px-6 py-10">
|
||
|
|
<p class="text-sm uppercase tracking-[0.35em] text-cyan-300">CPU Benchmark Platform</p>
|
||
|
|
<div class="mt-4 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
||
|
|
<div class="max-w-3xl">
|
||
|
|
<h1 class="text-4xl font-bold tracking-tight">Submission browser and API for local CPU benchmark runs</h1>
|
||
|
|
<p class="mt-3 text-sm text-slate-300">
|
||
|
|
Browse recent benchmark submissions, filter by submitter or CPU brand, and inspect per-core throughput details.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="rounded-2xl bg-white/10 px-4 py-3 text-sm text-slate-200 backdrop-blur">
|
||
|
|
<div>Total results: <span class="font-semibold text-white">{{ .TotalCount }}</span></div>
|
||
|
|
{{ if gt .ShowingTo 0 }}
|
||
|
|
<div>Showing {{ .ShowingFrom }} to {{ .ShowingTo }}</div>
|
||
|
|
{{ else }}
|
||
|
|
<div>No submissions match the current filters</div>
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<main class="mx-auto max-w-7xl px-6 py-8">
|
||
|
|
<section class="-mt-12 rounded-3xl border border-slate-200 bg-white p-6 shadow-xl shadow-slate-300/30">
|
||
|
|
<form method="get" action="/" class="grid gap-4 lg:grid-cols-[2fr_2fr_auto]">
|
||
|
|
<label class="block">
|
||
|
|
<span class="mb-2 block text-sm font-medium text-slate-700">General search</span>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
name="text"
|
||
|
|
value="{{ .QueryText }}"
|
||
|
|
placeholder="Submitter, score, vendor, features, thread mode"
|
||
|
|
class="w-full rounded-xl border-slate-300 bg-slate-50 text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
|
||
|
|
>
|
||
|
|
</label>
|
||
|
|
<label class="block">
|
||
|
|
<span class="mb-2 block text-sm font-medium text-slate-700">CPU brand</span>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
name="cpu"
|
||
|
|
value="{{ .QueryCPU }}"
|
||
|
|
placeholder="Ryzen 7 5800X, i7-13700K, Xeon"
|
||
|
|
class="w-full rounded-xl border-slate-300 bg-slate-50 text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
|
||
|
|
>
|
||
|
|
</label>
|
||
|
|
<div class="flex gap-3 lg:justify-end">
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
class="inline-flex items-center justify-center rounded-xl bg-cyan-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-cyan-500"
|
||
|
|
>
|
||
|
|
Search
|
||
|
|
</button>
|
||
|
|
<a
|
||
|
|
href="/"
|
||
|
|
class="inline-flex items-center justify-center rounded-xl border border-slate-300 px-5 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
|
||
|
|
>
|
||
|
|
Clear
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="mt-8 space-y-4">
|
||
|
|
{{ if not .Submissions }}
|
||
|
|
<div class="rounded-2xl border border-dashed border-slate-300 bg-white px-6 py-12 text-center text-slate-500">
|
||
|
|
No submissions to display.
|
||
|
|
</div>
|
||
|
|
{{ end }}
|
||
|
|
|
||
|
|
{{ range .Submissions }}
|
||
|
|
<details class="group overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm transition hover:shadow-md">
|
||
|
|
<summary class="list-none cursor-pointer">
|
||
|
|
<div class="grid gap-4 p-6 lg:grid-cols-[1.5fr_2fr_repeat(3,minmax(0,1fr))] lg:items-center">
|
||
|
|
<div>
|
||
|
|
<p class="text-xs uppercase tracking-[0.25em] text-slate-400">Submitter</p>
|
||
|
|
<p class="mt-2 text-lg font-semibold text-slate-900">{{ .Submitter }}</p>
|
||
|
|
<p class="mt-1 text-xs text-slate-500">{{ .SubmissionID }}</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-xs uppercase tracking-[0.25em] text-slate-400">CPU</p>
|
||
|
|
<p class="mt-2 font-semibold text-slate-900">{{ .CPUInfo.BrandString }}</p>
|
||
|
|
<p class="mt-1 text-sm text-slate-500">{{ .CPUInfo.VendorID }} • {{ .CPUInfo.PhysicalCores }}C / {{ .CPUInfo.LogicalCores }}T</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-xs uppercase tracking-[0.25em] text-slate-400">Score</p>
|
||
|
|
<p class="mt-2 text-2xl font-bold text-cyan-700">{{ formatInt64 .Score }}</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-xs uppercase tracking-[0.25em] text-slate-400">MOps/sec</p>
|
||
|
|
<p class="mt-2 text-xl font-semibold text-slate-900">{{ formatFloat .MOpsPerSec }}</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-xs uppercase tracking-[0.25em] text-slate-400">Mode</p>
|
||
|
|
<p class="mt-2 inline-flex rounded-full bg-slate-100 px-3 py-1 text-sm font-medium text-slate-700">{{ modeLabel .Config.MultiCore }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</summary>
|
||
|
|
|
||
|
|
<div class="border-t border-slate-100 bg-slate-50 px-6 py-6">
|
||
|
|
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||
|
|
<div class="rounded-2xl bg-white p-4 shadow-sm">
|
||
|
|
<p class="text-xs uppercase tracking-[0.2em] text-slate-400">Started</p>
|
||
|
|
<p class="mt-2 text-sm font-medium text-slate-800">{{ formatTime .StartedAt }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="rounded-2xl bg-white p-4 shadow-sm">
|
||
|
|
<p class="text-xs uppercase tracking-[0.2em] text-slate-400">Submitted</p>
|
||
|
|
<p class="mt-2 text-sm font-medium text-slate-800">{{ formatTime .SubmittedAt }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="rounded-2xl bg-white p-4 shadow-sm">
|
||
|
|
<p class="text-xs uppercase tracking-[0.2em] text-slate-400">Total ops</p>
|
||
|
|
<p class="mt-2 text-sm font-medium text-slate-800">{{ formatInt64 .TotalOps }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="rounded-2xl bg-white p-4 shadow-sm">
|
||
|
|
<p class="text-xs uppercase tracking-[0.2em] text-slate-400">Benchmark config</p>
|
||
|
|
<p class="mt-2 text-sm font-medium text-slate-800">
|
||
|
|
{{ .Config.DurationSecs }}s • intensity {{ .Config.Intensity }} • coreFilter {{ .Config.CoreFilter }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-6 overflow-x-auto rounded-2xl border border-slate-200 bg-white">
|
||
|
|
<table class="min-w-full divide-y divide-slate-200 text-sm">
|
||
|
|
<thead class="bg-slate-100 text-slate-600">
|
||
|
|
<tr>
|
||
|
|
<th class="px-4 py-3 text-left font-semibold">Logical ID</th>
|
||
|
|
<th class="px-4 py-3 text-left font-semibold">Core Type</th>
|
||
|
|
<th class="px-4 py-3 text-left font-semibold">MOps/sec</th>
|
||
|
|
<th class="px-4 py-3 text-left font-semibold">Total Ops</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody class="divide-y divide-slate-100">
|
||
|
|
{{ range .CoreResults }}
|
||
|
|
<tr>
|
||
|
|
<td class="px-4 py-3 font-medium text-slate-900">{{ .LogicalID }}</td>
|
||
|
|
<td class="px-4 py-3 text-slate-700">{{ .CoreType }}</td>
|
||
|
|
<td class="px-4 py-3 text-slate-700">{{ formatFloat .MOpsPerSec }}</td>
|
||
|
|
<td class="px-4 py-3 text-slate-700">{{ formatInt64 .TotalOps }}</td>
|
||
|
|
</tr>
|
||
|
|
{{ else }}
|
||
|
|
<tr>
|
||
|
|
<td colspan="4" class="px-4 py-6 text-center text-slate-500">No per-core results available.</td>
|
||
|
|
</tr>
|
||
|
|
{{ end }}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
{{ end }}
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{{ if gt .TotalPages 1 }}
|
||
|
|
<nav class="mt-8 flex flex-col gap-3 rounded-2xl bg-white p-5 shadow-sm md:flex-row md:items-center md:justify-between">
|
||
|
|
<div class="text-sm text-slate-500">
|
||
|
|
Page {{ .Page }} of {{ .TotalPages }}
|
||
|
|
</div>
|
||
|
|
<div class="flex gap-3">
|
||
|
|
{{ if gt .Page 1 }}
|
||
|
|
<a href="{{ .PrevURL }}" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50">Previous</a>
|
||
|
|
{{ else }}
|
||
|
|
<span class="cursor-not-allowed rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-400">Previous</span>
|
||
|
|
{{ end }}
|
||
|
|
{{ if lt .Page .TotalPages }}
|
||
|
|
<a href="{{ .NextURL }}" class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-700">Next</a>
|
||
|
|
{{ else }}
|
||
|
|
<span class="cursor-not-allowed rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-400">Next</span>
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
{{ end }}
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
</html>
|