index

index.html

@@ -1,19 +1,108 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<head>
+    <meta charset="UTF-8">
+    <title>SweetSpot v2 — energy-per-token demo</title>
+
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+
+    <style>
+        body {
+            font-family: sans-serif;
+            max-width: 1000px;
+            margin: auto;
+            padding: 20px;
+        }
+
+        .row {
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+
+        label {
+            display: block;
+            margin-top: 10px;
+        }
+
+        input {
+            width: 120px;
+        }
+
+        #plot {
+            margin-top: 30px;
+        }
+
+        button {
+            margin-top: 10px;
+            padding: 8px 15px;
+        }
+    </style>
+</head>
+
+<body>
+
+<h2>
+SweetSpot v2 — energy-per-token demo
+</h2>
+
+<p>
+Interactive visualization of the analytical energy model.
+</p>
+
+
+<h3>Architecture parameters</h3>
+
+<div class="row">
+
+<div>
+<label>d (hidden size)</label>
+<input id="d" type="number" value="4544">
+</div>
+
+<div>
+<label>L (layers)</label>
+<input id="L" type="number" value="32">
+</div>
+
+<div>
+<label>nq (query heads)</label>
+<input id="nq" type="number" value="71">
+</div>
+
+<div>
+<label>nkv (KV heads)</label>
+<input id="nkv" type="number" value="1">
+</div>
+
+<div>
+<label>Input tokens</label>
+<input id="nin" type="number" value="512">
+</div>
+
+</div>
+
+
+<h3>
+Load Hugging Face model config
+</h3>
+
+<input 
+id="repo"
+style="width:400px"
+placeholder="facebook/opt-1.3b">
+
+<button onclick="loadModel()">
+Load model
+</button>
+
+<p id="status"></p>
+
+
+<div id="plot"></div>
+
+
+<script src="app.js"></script>
+
+</body>
+</html>