Upload index.html with huggingface_hub

index.html

@@ -604,14 +604,17 @@
       return ticks;
     }
 
-    function movingAverage(values, w) {
-      if (w <= 1) return values;
-      return values.map((_, i) => {
-        const n = Math.min(i + 1, w);
-        let sum = 0;
-        for (let j = i - n + 1; j <= i; j++) sum += values[j];
-        return sum / n;
-      });
+    function exponentialMovingAverage(values, alpha) {
+      if (alpha <= 0) return values;
+      const result = [];
+      let ema = 0;
+      let debiasWeight = 0;
+      for (let i = 0; i < values.length; i++) {
+        ema = alpha * ema + (1 - alpha) * values[i];
+        debiasWeight = alpha * debiasWeight + (1 - alpha);
+        result.push(ema / debiasWeight);
+      }
+      return result;
     }
 
     // ── Task quality metrics ─────────────────────────────────────
@@ -973,14 +976,8 @@
                 <select id="pmetric-${this.id}"></select>
               </div>
               <div class="control-group">
-                <label>Smoothing</label>
-                <select id="psmooth-${this.id}">
-                  <option value="1" selected>None</option>
-                  <option value="2">2</option>
-                  <option value="3">3</option>
-                  <option value="4">4</option>
-                  <option value="5">5</option>
-                </select>
+                <label>Smoothing: <span id="psmooth-val-${this.id}">0</span></label>
+                <input type="range" id="psmooth-${this.id}" min="0" max="0.99" step="0.01" value="0" style="width:120px;vertical-align:middle">
               </div>
               <div class="control-group">
                 <label>Chart Type</label>
@@ -1050,7 +1047,10 @@
         this.el.suite.addEventListener('change', () => this.onSuiteChange());
         this.el.task.addEventListener('change', () => this.onTaskChange());
         this.el.metric.addEventListener('change', () => this.renderChart());
-        this.el.smooth.addEventListener('change', () => this.renderChart());
+        this.el.smooth.addEventListener('input', () => {
+          panel.querySelector(`#psmooth-val-${this.id}`).textContent = this.el.smooth.value;
+          this.renderChart();
+        });
         this.el.chartType.addEventListener('change', () => this.renderChart());
         this.el.xTicks.addEventListener('change', () => this.renderChart());
 
@@ -1183,7 +1183,7 @@
       }
 
       getSmoothing() {
-        return parseInt(this.el.smooth.value, 10) || 1;
+        return parseFloat(this.el.smooth.value) || 0;
       }
 
       getChartType() {
@@ -1659,7 +1659,7 @@
           if (d.isCheckpoint && validPoints.length > 1) {
             traces.push({
               x: validPoints.map(p => p.x),
-              y: movingAverage(validPoints.map(p => p.y), w),
+              y: exponentialMovingAverage(validPoints.map(p => p.y), w),
               name, mode: 'lines+markers',
               line: { color, width: 2 }, marker: { size: 5 },
             });