accuracy and loss plot

app.js

@@ -17,9 +17,11 @@ const BUILTIN_DATASETS = {
   ],
 };
 
-const state = { points: structuredClone(BUILTIN_DATASETS['easy-linear']), datasetMode: "easy-linear", redoPoints: [], hoveredPoint: -1, label: "A", model: null, pendingUpdate: null, step: 0, permutation: [], cursor: 0, nextBatch: [], rngState: 42, history: [], viewIndex: -1, previewVersion: 0, previewPromise: null, busy: false, animating: false, ready: false };
+const state = { points: structuredClone(BUILTIN_DATASETS['easy-linear']), datasetMode: "easy-linear", redoPoints: [], hoveredPoint: -1, label: "A", model: null, pendingUpdate: null, metrics: null, step: 0, permutation: [], cursor: 0, nextBatch: [], rngState: 42, history: [], viewIndex: -1, previewVersion: 0, previewPromise: null, busy: false, animating: false, ready: false };
 const canvas = document.querySelector("#plot");
 const ctx = canvas.getContext("2d");
+const metricsCanvas = document.querySelector("#metrics-chart");
+const metricsCtx = metricsCanvas.getContext("2d");
 const ui = Object.fromEntries([...document.querySelectorAll("[id]")].map(el => [el.id, el]));
 
 function modelOptions() {
@@ -35,7 +37,7 @@ function modelOptions() {
 function randomSeed() { return (Number.parseInt(ui["random-seed"].value, 10) || 0) >>> 0; }
 
 function resetModel(message = "Model reset. Take a step to begin training.") {
-  state.model = null; state.pendingUpdate = null; state.step = 0; state.permutation = []; state.cursor = 0; state.nextBatch = []; state.history = []; state.viewIndex = -1;
+  state.model = null; state.pendingUpdate = null; state.metrics = null; state.step = 0; state.permutation = []; state.cursor = 0; state.nextBatch = []; state.history = []; state.viewIndex = -1;
   state.rngState = randomSeed();
   queueNextBatch();
   ui["step-count"].textContent = "Step 0";
@@ -96,7 +98,7 @@ function formatNumber(value) {
 function formatVector(vector) { return `[${vector.map(formatNumber).join(", ")}]`; }
 
 function visibleSnapshot() {
-  return state.history[state.viewIndex] || { model: state.model, pendingUpdate: state.pendingUpdate, nextBatch: state.nextBatch, step: state.step };
+  return state.history[state.viewIndex] || { model: state.model, pendingUpdate: state.pendingUpdate, metrics: state.metrics, nextBatch: state.nextBatch, step: state.step };
 }
 
 function renderParameters(snapshot = visibleSnapshot()) {
@@ -109,7 +111,7 @@ function renderParameters(snapshot = visibleSnapshot()) {
 }
 
 function captureSnapshot() {
-  const snapshot = structuredClone({ model: state.model, pendingUpdate: state.pendingUpdate, nextBatch: state.nextBatch, step: state.step });
+  const snapshot = structuredClone({ model: state.model, pendingUpdate: state.pendingUpdate, metrics: state.metrics, nextBatch: state.nextBatch, step: state.step });
   if (state.history.at(-1)?.step === state.step) state.history[state.history.length - 1] = snapshot;
   else state.history.push(snapshot);
   state.viewIndex = state.history.length - 1;
@@ -123,7 +125,7 @@ function renderView() {
   ui["history-position"].textContent = `Step ${snapshot.step} of ${Math.max(0, state.history.length - 1)}`;
   const count = snapshot.nextBatch.length;
   ui["batch-summary"].textContent = count ? `Next batch: ${count} point${count === 1 ? "" : "s"}` : "No batch selected";
-  updateControls(); draw();
+  updateControls(); draw(); drawMetrics();
 }
 
 async function refreshPreview(reportError = true) {
@@ -139,20 +141,30 @@ async function refreshPreview(reportError = true) {
       }
       const X = state.nextBatch.map(i => [state.points[i].x, state.points[i].y]);
       const y = state.nextBatch.map(i => state.points[i].label);
+      const allX = state.points.map(point => [point.x, point.y]);
+      const allY = state.points.map(point => point.label);
       const pyX = state.pyodide.toPy(X), pyY = state.pyodide.toPy(y);
+      const pyAllX = state.pyodide.toPy(allX), pyAllY = state.pyodide.toPy(allY);
       state.pyodide.globals.set("preview_X", pyX); state.pyodide.globals.set("preview_y", pyY);
+      state.pyodide.globals.set("all_X", pyAllX); state.pyodide.globals.set("all_y", pyAllY);
       try {
         const result = state.pyodide.runPython(`
 preview_coef, preview_intercept = model.get_update(preview_X, preview_y, classes=["A", "B"])
+metrics = model.evaluate(all_X, all_y)
 {"coef": model.coef_.tolist(), "intercept": model.intercept_.tolist(),
- "update_coef": preview_coef.tolist(), "update_intercept": preview_intercept.tolist()}
+ "update_coef": preview_coef.tolist(), "update_intercept": preview_intercept.tolist(),
+ "loss": metrics["loss"], "accuracy": metrics["accuracy"]}
         `);
         const values = result.toJs({ dict_converter: Object.fromEntries }); result.destroy();
         if (version !== state.previewVersion) return;
         state.model = { coef: values.coef, intercept: values.intercept };
         state.pendingUpdate = { coef: values.update_coef, intercept: values.update_intercept };
+        state.metrics = { loss: values.loss, accuracy: values.accuracy };
         captureSnapshot();
-      } finally { pyX.destroy(); pyY.destroy(); state.pyodide.globals.delete("preview_X"); state.pyodide.globals.delete("preview_y"); }
+      } finally {
+        pyX.destroy(); pyY.destroy(); pyAllX.destroy(); pyAllY.destroy();
+        for (const name of ["preview_X", "preview_y", "all_X", "all_y"]) state.pyodide.globals.delete(name);
+      }
     } catch (error) {
       if (version === state.previewVersion) { state.pendingUpdate = null; renderView(); if (reportError) setMessage(error instanceof Error ? error.message : String(error), "error"); }
     }
@@ -221,6 +233,37 @@ async function startAnimation() {
 
 function pauseAnimation() { state.animating = false; updateControls(); }
 
+function drawMetrics() {
+  const rect = metricsCanvas.getBoundingClientRect();
+  if (!rect.width || !rect.height) return;
+  const ratio = window.devicePixelRatio || 1;
+  metricsCanvas.width = Math.round(rect.width * ratio); metricsCanvas.height = Math.round(rect.height * ratio);
+  metricsCtx.setTransform(ratio, 0, 0, ratio, 0, 0); metricsCtx.clearRect(0, 0, rect.width, rect.height);
+  const data = state.history.filter(snapshot => snapshot.metrics);
+  const pad = { left: 34, right: 34, top: 10, bottom: 22 };
+  const width = rect.width - pad.left - pad.right, height = rect.height - pad.top - pad.bottom;
+  const bottom = pad.top + height;
+  metricsCtx.font = "9px system-ui"; metricsCtx.fillStyle = "#77847d"; metricsCtx.strokeStyle = "#e4e9e5"; metricsCtx.lineWidth = 1;
+  for (let fraction = 0; fraction <= 1; fraction += 0.5) {
+    const y = pad.top + height * fraction; metricsCtx.beginPath(); metricsCtx.moveTo(pad.left,y); metricsCtx.lineTo(pad.left+width,y); metricsCtx.stroke();
+  }
+  if (!data.length) { metricsCtx.textAlign="center"; metricsCtx.fillText("Metrics appear after initialization",rect.width/2,rect.height/2); return; }
+  const maxLoss = Math.max(...data.map(snapshot => snapshot.metrics.loss), 1e-9) * 1.08;
+  const pointX = index => data.length === 1 ? pad.left + width / 2 : pad.left + index / (data.length - 1) * width;
+  const lossY = value => bottom - value / maxLoss * height;
+  const accuracyY = value => bottom - value * height;
+  metricsCtx.textAlign="right"; metricsCtx.fillStyle="#8b5cf6"; metricsCtx.fillText(maxLoss.toFixed(2),pad.left-5,pad.top+3); metricsCtx.fillText("0",pad.left-5,bottom+3);
+  metricsCtx.textAlign="left"; metricsCtx.fillStyle="#159267"; metricsCtx.fillText("100%",pad.left+width+5,pad.top+3); metricsCtx.fillText("0%",pad.left+width+5,bottom+3);
+  metricsCtx.textAlign="center"; metricsCtx.fillStyle="#77847d"; metricsCtx.fillText("step",pad.left+width/2,rect.height-3);
+  const drawSeries = (color, getY) => {
+    metricsCtx.strokeStyle=color; metricsCtx.lineWidth=2; metricsCtx.beginPath();
+    data.forEach((snapshot,index)=>{const x=pointX(index),y=getY(snapshot.metrics);if(index)metricsCtx.lineTo(x,y);else metricsCtx.moveTo(x,y);}); metricsCtx.stroke();
+    data.forEach((snapshot,index)=>{const x=pointX(index),y=getY(snapshot.metrics),active=index===state.viewIndex;metricsCtx.beginPath();metricsCtx.arc(x,y,active?5:2.5,0,Math.PI*2);metricsCtx.fillStyle=active?"white":color;metricsCtx.fill();metricsCtx.strokeStyle=color;metricsCtx.lineWidth=active?2.5:1;metricsCtx.stroke();});
+  };
+  drawSeries("#8b5cf6", metrics => lossY(metrics.loss));
+  drawSeries("#159267", metrics => accuracyY(metrics.accuracy));
+}
+
 function dimensions() {
   const rect = canvas.getBoundingClientRect(), ratio = window.devicePixelRatio || 1;
   if (canvas.width !== Math.round(rect.width * ratio) || canvas.height !== Math.round(rect.height * ratio)) { canvas.width = Math.round(rect.width * ratio); canvas.height = Math.round(rect.height * ratio); }
@@ -303,6 +346,7 @@ function selectTab(name) {
   const configure = name === "configure";
   ui["configure-tab"].classList.toggle("active", configure); ui["train-tab"].classList.toggle("active", !configure);
   ui["configure-panel"].classList.toggle("active", configure); ui["train-panel"].classList.toggle("active", !configure);
+  if (!configure) requestAnimationFrame(drawMetrics);
 }
 ui["configure-tab"].addEventListener("click", () => selectTab("configure"));
 ui["train-tab"].addEventListener("click", () => selectTab("train"));
@@ -312,4 +356,4 @@ ui["history-reset"].addEventListener("click", () => { if (state.history.length)
 ui.animate.addEventListener("click", startAnimation); ui.pause.addEventListener("click", pauseAnimation);
 for (const id of ["loss","learning-rate","batch-size","random-seed","batch-selection"]) ui[id].addEventListener("change",()=>{if(id==="batch-selection")ui["sampling-help"].textContent=ui[id].value==="random"?"Each step independently samples a subset without replacement.":"Each point is used once before the dataset is shuffled again.";resetModel("Configuration changed. The model was reset.");});
 window.addEventListener("keydown",event=>{if(event.code==="Space"&&!event.repeat&&!/INPUT|SELECT|TEXTAREA/.test(document.activeElement.tagName)){event.preventDefault();trainOneStep();}});
-new ResizeObserver(draw).observe(canvas.parentElement); queueNextBatch(); updateControls(); draw(); initializeRuntime();
+new ResizeObserver(draw).observe(canvas.parentElement); new ResizeObserver(drawMetrics).observe(metricsCanvas); queueNextBatch(); updateControls(); draw(); initializeRuntime();

index.html

@@ -76,8 +76,8 @@
             <label for="loss">Loss</label>
             <select id="loss">
 							<option>perceptron</option>
-              <option>hinge (SVM)</option><option>squared_hinge</option>
-							<option>log_loss (Logistic Regression)</option><option>squared_error (Adaline)</option>
+							<option>squared_error</option><option>log_loss</option>
+              <option>hinge</option><option>squared_hinge</option>
               <option>huber</option><option>modified_huber</option>
 							<option>epsilon_insensitive</option><option>squared_epsilon_insensitive</option>
             </select>
@@ -102,7 +102,11 @@
           </div>
           <div id="train-panel" class="tab-panel">
           <section class="control-section train-section">
-            <div class="train-heading"><h2>Training history</h2><span id="history-position">Step 0 of 0</span></div>
+            <div class="metrics-panel">
+              <div class="metrics-heading"><h2>Metrics</h2><div><span class="metric-key loss-key"></span>Loss <span class="metric-key accuracy-key"></span>Accuracy</div></div>
+              <canvas id="metrics-chart" aria-label="Loss and accuracy over training steps"></canvas>
+            </div>
+            <div class="train-heading"><h2>Parameters</h2><span id="history-position">Step 0 of 0</span></div>
             <div class="parameter-panel" aria-live="polite">
               <div class="parameter-block">
                 <span>Class A parameters</span><small>Weight vector and bias for the positive class</small>

sgd_classifier.py

@@ -137,6 +137,51 @@ class SGDClassifier:
             outside, 2 * np.sign(residual) * (np.abs(residual) - self.epsilon), 0.0
         )
 
+    def _loss_values(self, scores, targets):
+        """Element-wise loss corresponding to :meth:`_loss_gradient`."""
+        margin = targets * scores
+        if self.loss == "hinge":
+            return np.maximum(0.0, 1 - margin)
+        if self.loss == "log_loss":
+            return np.logaddexp(0.0, -margin)
+        if self.loss == "modified_huber":
+            return np.where(
+                margin >= 1,
+                0.0,
+                np.where(margin >= -1, (1 - margin) ** 2, -4 * margin),
+            )
+        if self.loss == "squared_hinge":
+            return np.maximum(0.0, 1 - margin) ** 2
+        if self.loss == "perceptron":
+            return np.maximum(0.0, -margin)
+
+        residual = scores - targets
+        absolute = np.abs(residual)
+        if self.loss == "squared_error":
+            return 0.5 * residual**2
+        if self.loss == "huber":
+            return np.where(
+                absolute <= self.epsilon,
+                0.5 * residual**2,
+                self.epsilon * (absolute - 0.5 * self.epsilon),
+            )
+        if self.loss == "epsilon_insensitive":
+            return np.maximum(0.0, absolute - self.epsilon)
+        return np.maximum(0.0, absolute - self.epsilon) ** 2
+
+    def evaluate(self, X, y):
+        """Return mean loss and accuracy over an entire labelled dataset."""
+        X, y = self._check_X_y(X, y)
+        if not hasattr(self, "coef_"):
+            raise RuntimeError("The classifier has not been initialized.")
+        if X.shape[1] != self.n_features_in_:
+            raise ValueError(f"X must have {self.n_features_in_} features.")
+        scores = X @ self.coef_.T + self.intercept_
+        targets = np.where(y[:, None] == self.classes_[None, :], 1.0, -1.0)
+        loss = float(np.mean(self._loss_values(scores, targets)))
+        predictions = self.classes_[np.argmax(scores, axis=1)]
+        return {"loss": loss, "accuracy": float(np.mean(predictions == y))}
+
     def _regularization_gradient(self):
         if self.penalty is None or self.alpha == 0:
             return np.zeros_like(self.coef_)

styles.css

@@ -31,6 +31,7 @@ h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }.plot-toolbar p { marg
 .control-card { overflow: hidden; align-self: stretch; min-height: 0; }.control-section { padding: 16px 20px 18px; border-bottom: 1px solid var(--line); }.control-section:last-child { border-bottom: 0; }
 .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 7px; border-bottom: 1px solid var(--line); background: #f7f9f6; }.tab { border: 0; color: var(--ink-soft); background: transparent; }.tab.active { color: var(--green); background: white; box-shadow: 0 1px 4px rgba(20,50,35,.12); }.tab-panel { display: none; }.tab-panel.active { display: block; height: calc(100% - 51px); overflow-y: auto; }
 .train-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }.train-heading span { color: var(--ink-soft); font-size: 10px; }
+.metrics-panel { margin-bottom: 15px; border: 1px solid var(--line); border-radius: 9px; padding: 10px; background: white; }.metrics-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }.metrics-heading > div { color: var(--ink-soft); font-size: 9px; display: flex; align-items: center; gap: 5px; }.metric-key { width: 13px; height: 3px; display: inline-block; border-radius: 2px; margin-left: 6px; }.loss-key { background: #8b5cf6; }.accuracy-key { background: #159267; }#metrics-chart { display: block; width: 100%; height: 135px; }
 .parameter-panel { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #f8faf7; }
 .parameter-block { padding: 12px; }.parameter-block + .parameter-block { border-top: 1px solid var(--line); }.parameter-block > span { display: block; color: #435149; font-size: 11px; font-weight: 800; }.parameter-block small { display: block; color: var(--ink-soft); font-size: 9px; margin: 3px 0 9px; }
 .parameter-block code { display: block; color: #35433b; font: 10px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }.parameter-block.update-values { background: rgba(255,202,58,.08); }.update-values code { color: #775b12; }

test_sgd_classifier.py

@@ -44,6 +44,14 @@ def test_get_update_previews_without_applying_it():
     np.testing.assert_allclose(model.intercept_, intercept_update)
 
 
+def test_evaluate_returns_dataset_loss_and_accuracy():
+    X, y = dataset(samples=30)
+    model = SGDClassifier(loss="log_loss").fit(X, y)
+    metrics = model.evaluate(X, y)
+    assert metrics["loss"] >= 0
+    assert 0 <= metrics["accuracy"] <= 1
+
+
 def test_train_step_can_declare_classes_missing_from_batch():
     model = SGDClassifier()
     model.train_step([[1.0, 2.0]], ["a"], classes=["a", "b"])