File size: 7,145 Bytes
bfaf968 bdb093b 7a38188 bfaf968 9674cf0 bdb093b 9674cf0 bdb093b 9674cf0 7a38188 7f224da 7a38188 9674cf0 7a38188 bdb093b bfaf968 bdb093b 9674cf0 7a38188 7f224da 7a38188 9674cf0 7a38188 bdb093b 7a38188 9674cf0 b1ed689 9674cf0 bfaf968 bdb093b 9674cf0 bdb093b 7a38188 bfaf968 5c8fb6b bfaf968 9674cf0 7a38188 d720b4b 9674cf0 bfaf968 9674cf0 7a38188 9674cf0 7a38188 9674cf0 bdb093b 9674cf0 d720b4b 8b3b676 d720b4b 9674cf0 d720b4b 7a38188 d720b4b 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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<!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">Model
<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>
<option value="meta-llama/llama-3.2-1b-instruct">meta-llama/llama-3.2-1b-instruct</option>
<option value="google/gemma-3n-e2b-it:free">google/gemma-3n-e2b-it:free</option>
<option value="meta-llama/llama-3.2-1b-instruct">meta-llama/llama-3.2-1b-instruct</option>
<option value="meta-llama/llama-3.2-3b-instruct">meta-llama/llama-3.2-3b-instruct</option>
</select>
</label>
<label class="block mb-4 text-sm font-medium">API Key OpenRouter
<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>
</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 text-sm font-medium">Model (transformers.js)
<select id="deviceModel"
class="w-full mb-2 px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none">
<option value="onnx-community/gemma-3-270m-it-ONNX">gemma-3-270m-it-ONNX</option>
<option value="onnx-community/gemma-3-1b-it-ONNX">gemma-3-1b-it-ONNX</option>
<option value="onnx-community/Llama-3.2-1B-Instruct-ONNX">Llama-3.2-1B-Instruct-ONNX</option>
<option value="onnx-community/Llama-3.2-3B-Instruct-ONNX">Llama-3.2-3B-Instruct-ONNX</option>
<option disabled value="onnx-community/gemma-3n-E2B-it-ONNX">gemma-3n-E2B-it-ONNX (not working)</option>
</select>
</label>
<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="deviceStatus" class="text-gray-700 text-sm my-4">Not loaded</div>
<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_device">Always device</option>
<option value="always_cloud">Always cloud</option>
<option value="roundrobin">Round Robin</option>
<option value="probabilistic">Probabilistic (p to cloud)</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 class="block w-full h-64 overflow-scroll">
<table id="log" class="w-full h-64 overflow-scroll bg-gray-50 p-3 rounded-lg border border-gray-200 text-sm">
<thead>
<tr>
<th class="text-left">Timestamp</th>
<th class="text-left">Route</th>
<th class="text-left">Latency (ms)</th>
<th class="text-left">Question</th>
<th class="text-left">Answer</th>
<th class="text-left">Correct</th>
</tr>
</thead>
<tbody id="log-table-body"></tbody>
</table>
</div>
<div id="stats" class="mt-4 text-sm text-gray-800"></div>
<div class="flex flex-col md:flex-row gap-4 mt-4">
<button id="downloadStatsJson"
class="mt-4 w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition">
Download Statistics as JSON
</button><button id="downloadStatsCsv"
class="mt-4 w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition">
Download Statistics as CSV
</button>
</div>
</div>
</section>
</main>
<script type="module" src="./src/main.js"></script>
</body>
</html>
|