|
|
<!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> |
|
|
<link rel="stylesheet" href="styles.css"> |
|
|
|
|
|
|
|
|
</head> |
|
|
<body> |
|
|
<main class="container"> |
|
|
<h1>Browser LLM Evaluation</h1> |
|
|
|
|
|
|
|
|
<section class="grid"> |
|
|
<div class="card"> |
|
|
<h2>Cloud (OpenRouter)</h2> |
|
|
<label>API Key <input id="apiKey" type="password" placeholder="sk-..." /></label> |
|
|
<label>Model <input id="cloudModel" value="gpt-4o-mini" /></label> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
<h2>On-Device</h2> |
|
|
<label>Model (transformers.js) <input id="deviceModel" value="Xenova/distilgpt2" /></label> |
|
|
<div id="deviceStatus">Not loaded</div> |
|
|
<button id="loadDeviceModelBtn">Load Model</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
<h2>Request Pattern</h2> |
|
|
<select id="patternSelect"> |
|
|
<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>Route strategy |
|
|
<select id="routeStrategy"> |
|
|
<option value="roundrobin">Round Robin</option> |
|
|
<option value="probabilistic">Probabilistic (p to cloud)</option> |
|
|
<option value="always_cloud">Always cloud</option> |
|
|
<option value="always_device">Always device</option> |
|
|
</select> |
|
|
</label> |
|
|
<label>Cloud probability (for probabilistic) <input id="cloudProb" type="number" min="0" max="1" step="0.1" value="0.5"/></label> |
|
|
<div class="buttons"> |
|
|
<button id="startBtn">Start</button> |
|
|
<button id="stopBtn" disabled>Stop</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card wide"> |
|
|
<h2>Live Log & Results</h2> |
|
|
<div id="log" class="log"></div> |
|
|
<div id="stats"></div> |
|
|
<button id="downloadStats">Download Statistics</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
</main> |
|
|
|
|
|
|
|
|
<script type="module" src="./src/main.js"></script> |
|
|
</body> |
|
|
</html> |
