File size: 4,826 Bytes
bfaf968 bdb093b bfaf968 9674cf0 bdb093b 9674cf0 bdb093b 9674cf0 bdb093b bfaf968 bdb093b 9674cf0 bdb093b 9674cf0 b1ed689 9674cf0 bfaf968 bdb093b 9674cf0 bdb093b 9674cf0 bfaf968 5c8fb6b bfaf968 9674cf0 bfaf968 9674cf0 bdb093b 9674cf0 bdb093b bfaf968 bdb093b bfaf968 bdb093b 9674cf0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Browser LLM Evaluation</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-900 min-h-screen">
<main class="max-w-6xl mx-auto p-6">
<h1 class="text-3xl font-bold mb-6 text-center">Browser LLM Evaluation</h1>
<section class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Cloud Card -->
<div class="bg-white p-6 rounded-2xl shadow-xl border border-gray-200">
<h2 class="text-xl font-semibold mb-4">Cloud (OpenRouter)</h2>
<label class="block mb-4 text-sm font-medium">API Key
<input id="cloudApiKey" type="text" placeholder="Key..." class="mt-1 w-full px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none" />
</label>
<select id="cloudModel" class="w-full mb-4 px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none">
<option value="openai/gpt-4o-mini">openai/gpt-4o-mini</option>
</select>
</div>
<!-- On-Device Card -->
<div class="bg-white p-6 rounded-2xl shadow-xl border border-gray-200">
<h2 class="text-xl font-semibold mb-4">On-Device</h2>
<label class="block mb-4 text-sm font-medium">Model (transformers.js)
<input id="deviceModel" value="Xenova/distilgpt2" class="mt-1 w-full px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none" />
</label>
<div id="deviceStatus" class="text-gray-700 text-sm mb-2">Not loaded</div>
<button id="loadDeviceModelBtn" class="mt-4 w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">Load Model</button>
<div id="deviceLoadingContainer" class="w-full max-w-xs my-2">
<div id="deviceLoadingBar" class="h-2 bg-green-500 transition-all duration-200 w-0"></div>
<span id="deviceLoadingText" class="text-xs text-gray-600"></span>
</div>
</div>
<!-- Request Pattern Card -->
<div class="bg-white p-6 rounded-2xl shadow-xl border border-gray-200">
<h2 class="text-xl font-semibold mb-4">Request Pattern</h2>
<select id="patternSelect" class="w-full mb-4 px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none">
<option value="once-per-sec">1 request / sec</option>
<option value="every-ten-sec">Every 10 sec 1 request</option>
<option disabled value="batch-10-every-5s">(not implemented) Batch: 10 every 5s</option>
<option disabled value="burst">(not implemented) Burst: 50 then idle</option>
</select>
<label class="block mb-4 text-sm font-medium">Route strategy
<select id="routeStrategy" class="mt-1 w-full px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none">
<option value="always_cloud">Always cloud</option>
<option value="roundrobin">Round Robin</option>
<option value="probabilistic">Probabilistic (p to cloud)</option>
<option value="always_device">Always device</option>
</select>
</label>
<label class="block mb-4 text-sm font-medium">Cloud probability (for probabilistic)
<input id="cloudProb" type="number" min="0" max="1" step="0.1" value="0.5" class="mt-1 w-full px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none" />
</label>
<div class="flex gap-3 mt-4">
<button id="startBtn" class="flex-1 bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 transition">Start</button>
<button id="stopBtn" disabled class="flex-1 bg-gray-400 text-white py-2 rounded-lg">Stop</button>
</div>
</div>
<!-- Log Card -->
<div class="bg-white p-6 rounded-2xl shadow-xl border border-gray-200 md:col-span-3">
<h2 class="text-xl font-semibold mb-4">Live Log & Results</h2>
<div id="log" class="h-64 overflow-auto bg-gray-50 p-3 rounded-lg border border-gray-200 text-sm"></div>
<div id="stats" class="mt-4 text-sm text-gray-800"></div>
<button id="downloadStats" class="mt-4 w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition">Download Statistics</button>
</div>
</section>
</main>
<script type="module" src="./src/main.js"></script>
</body>
</html>
|