Polish RL

app/src/content/embeds/d3-grpo-aime25.html

@@ -27,7 +27,7 @@
 
   .d3-grpo-aime25 .grid line {
     stroke: var(--grid-color);
-    stroke-dasharray: 2, 2;
+    stroke-dasharray: 2,2;
   }
 
   .d3-grpo-aime25 .line {
@@ -190,9 +190,9 @@
         if (attr && attr.trim()) {
           providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim();
         }
-      } catch (_) { }
+      } catch (_) {}
 
-      const DEFAULT_CSV = '/data/aime25_perf.csv';
+      const DEFAULT_CSV = '/data/grpo/aime25_perf.csv';
       const ensureDataPrefix = (p) => {
         if (typeof p !== 'string' || !p) return p;
         if (p.startsWith('/')) return p;
@@ -205,11 +205,11 @@
       const CSV_PATHS = Array.isArray(providedData)
         ? normalizeInput(providedData)
         : (typeof providedData === 'string' ? normalizeInput(providedData) || [DEFAULT_CSV] : [
-          DEFAULT_CSV,
-          './assets/data/aime25_perf.csv',
-          '../assets/data/aime25_perf.csv',
-          '../../assets/data/aime25_perf.csv'
-        ]);
+            DEFAULT_CSV,
+            './assets/data/grpo/aime25_perf.csv',
+            '../assets/data/grpo/aime25_perf.csv',
+            '../../assets/data/grpo/aime25_perf.csv'
+          ]);
 
       const fetchFirstAvailable = async (paths) => {
         const errors = [];
@@ -398,7 +398,7 @@
         // Tooltip interactions
         const bisect = d3.bisector(d => d.step).left;
 
-        svg.on('mousemove', function (event) {
+        svg.on('mousemove', function(event) {
           const [mx] = d3.pointer(event, gRoot.node());
           const step = xScale.invert(mx);
 
@@ -456,10 +456,10 @@
         if (!title) {
           title = document.createElement('div');
           title.className = 'legend-title';
-          title.textContent = 'Overlong Penalty';
+          title.innerHTML = 'Overlong penalty (L<sub>cache</sub> - L<sub>max</sub>)';
           legend.appendChild(title);
         } else {
-          title.textContent = 'Overlong Penalty';
+          title.innerHTML = 'Overlong penalty (L<sub>cache</sub> - L<sub>max</sub>)';
         }
 
         let items = legend.querySelector('.items');
@@ -533,4 +533,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>

app/src/content/embeds/d3-grpo-reward-curves.html

@@ -27,7 +27,7 @@
 
   .d3-grpo-reward-curves .grid line {
     stroke: var(--grid-color);
-    stroke-dasharray: 2, 2;
+    stroke-dasharray: 2,2;
   }
 
   .d3-grpo-reward-curves .confidence-band {
@@ -194,9 +194,9 @@
         if (attr && attr.trim()) {
           providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim();
         }
-      } catch (_) { }
+      } catch (_) {}
 
-      const DEFAULT_CSV = '/data/rl_reward_curves.csv';
+      const DEFAULT_CSV = '/data/grpo/rl_reward_curves.csv';
       const ensureDataPrefix = (p) => {
         if (typeof p !== 'string' || !p) return p;
         // If it starts with /, it's already absolute
@@ -211,11 +211,11 @@
       const CSV_PATHS = Array.isArray(providedData)
         ? normalizeInput(providedData)
         : (typeof providedData === 'string' ? normalizeInput(providedData) || [DEFAULT_CSV] : [
-          DEFAULT_CSV,
-          './assets/data/rl_reward_curves.csv',
-          '../assets/data/rl_reward_curves.csv',
-          '../../assets/data/rl_reward_curves.csv'
-        ]);
+            DEFAULT_CSV,
+            './assets/data/grpo/rl_reward_curves.csv',
+            '../assets/data/grpo/rl_reward_curves.csv',
+            '../../assets/data/grpo/rl_reward_curves.csv'
+          ]);
 
       const fetchFirstAvailable = async (paths) => {
         const errors = [];
@@ -517,7 +517,7 @@
         // Tooltip interactions
         const bisect = d3.bisector(d => d.step).left;
 
-        svg.on('mousemove', function (event) {
+        svg.on('mousemove', function(event) {
           const [mx] = d3.pointer(event, gRoot.node());
           const step = xScale.invert(mx);
 
@@ -583,10 +583,10 @@
         if (!title) {
           title = document.createElement('div');
           title.className = 'legend-title';
-          title.textContent = 'Overlong Penalty';
+          title.innerHTML = 'Overlong penalty (L<sub>cache</sub> - L<sub>max</sub>)';
           legend.appendChild(title);
         } else {
-          title.textContent = 'Overlong Penalty';
+          title.innerHTML = 'Overlong penalty (L<sub>cache</sub> - L<sub>max</sub>)';
         }
 
         let items = legend.querySelector('.items');
@@ -687,45 +687,21 @@
         metricToggleGroup.appendChild(lengthBtn);
         metricGroup.appendChild(metricToggleGroup);
         controls.appendChild(metricGroup);
-
-        // Display options group
-        const displayGroup = document.createElement('div');
-        displayGroup.className = 'control-group';
-
-        const displayLabel = document.createElement('label');
-        displayLabel.textContent = 'Display';
-        displayGroup.appendChild(displayLabel);
-
-        const displayToggleGroup = document.createElement('div');
-        displayToggleGroup.className = 'toggle-group';
-
-        const runningAvgBtn = document.createElement('button');
-        runningAvgBtn.className = 'toggle-btn' + (showRunningAverage ? ' active' : '');
-        runningAvgBtn.textContent = `Running Avg (${RUNNING_AVG_WINDOW} steps)`;
-        runningAvgBtn.addEventListener('click', () => {
-          showRunningAverage = !showRunningAverage;
-          makeControls();
-          render();
-        });
-
-        displayToggleGroup.appendChild(runningAvgBtn);
-        displayGroup.appendChild(displayToggleGroup);
-        controls.appendChild(displayGroup);
       }
 
       // Load both datasets
       const REWARD_PATHS = [
-        '/data/rl_reward_curves.csv',
-        './assets/data/rl_reward_curves.csv',
-        '../assets/data/rl_reward_curves.csv',
-        '../../assets/data/rl_reward_curves.csv'
+        '/data/grpo/rl_reward_curves.csv',
+        './assets/data/grpo/rl_reward_curves.csv',
+        '../assets/data/grpo/rl_reward_curves.csv',
+        '../../assets/data/grpo/rl_reward_curves.csv'
       ];
 
       const LENGTH_PATHS = [
-        '/data/rl_mean_teminated_lengths.csv',
-        './assets/data/rl_mean_teminated_lengths.csv',
-        '../assets/data/rl_mean_teminated_lengths.csv',
-        '../../assets/data/rl_mean_teminated_lengths.csv'
+        '/data/grpo/rl_mean_teminated_lengths.csv',
+        './assets/data/grpo/rl_mean_teminated_lengths.csv',
+        '../assets/data/grpo/rl_mean_teminated_lengths.csv',
+        '../../assets/data/grpo/rl_mean_teminated_lengths.csv'
       ];
 
       Promise.all([
@@ -767,4 +743,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>

app/src/content/embeds/d3-grpo-token-comparison.html

@@ -5,36 +5,29 @@
     position: relative;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   }
-
   .d3-grpo-token-comparison svg {
     display: block;
     width: 100%;
   }
-
   .d3-grpo-token-comparison .bar {
     stroke: none;
   }
-
   .d3-grpo-token-comparison .axes path,
   .d3-grpo-token-comparison .axes line {
     stroke: var(--axis-color, var(--text-color));
   }
-
   .d3-grpo-token-comparison .axes text {
     fill: var(--tick-color, var(--muted-color));
     font-size: 11px;
   }
-
   .d3-grpo-token-comparison .grid line {
-    stroke: var(--grid-color, rgba(0, 0, 0, .08));
+    stroke: var(--grid-color, rgba(0,0,0,.08));
   }
-
   .d3-grpo-token-comparison .chart-title {
     font-size: 13px;
     font-weight: 600;
     fill: var(--text-color);
   }
-
   .d3-grpo-token-comparison .d3-tooltip {
     position: absolute;
     top: 0;
@@ -48,15 +41,13 @@
     border: 1px solid var(--border-color);
     background: var(--surface-bg);
     color: var(--text-color);
-    box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
+    box-shadow: 0 4px 24px rgba(0,0,0,.18);
     opacity: 0;
     transition: opacity .12s ease;
   }
-
   .d3-grpo-token-comparison .d3-tooltip__inner {
     text-align: left;
   }
-
   .d3-grpo-token-comparison .legend {
     display: flex;
     flex-direction: column;
@@ -64,19 +55,16 @@
     gap: 6px;
     margin-top: 16px;
   }
-
   .d3-grpo-token-comparison .legend-title {
     font-size: 12px;
     font-weight: 700;
     color: var(--text-color);
   }
-
   .d3-grpo-token-comparison .legend .items {
     display: flex;
     flex-wrap: wrap;
     gap: 8px 14px;
   }
-
   .d3-grpo-token-comparison .legend .item {
     display: inline-flex;
     align-items: center;
@@ -85,14 +73,12 @@
     font-size: 12px;
     color: var(--text-color);
   }
-
   .d3-grpo-token-comparison .legend .swatch {
     width: 14px;
     height: 14px;
     border-radius: 3px;
     border: 1px solid var(--border-color);
   }
-
   .d3-grpo-token-comparison .controls {
     display: flex;
     gap: 16px;
@@ -101,20 +87,17 @@
     flex-wrap: wrap;
     margin-top: 8px;
   }
-
   .d3-grpo-token-comparison .control-group {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 6px;
   }
-
   .d3-grpo-token-comparison .controls label {
     font-size: 12px;
     font-weight: 700;
     color: var(--text-color);
   }
-
   .d3-grpo-token-comparison .controls select {
     font-size: 12px;
     padding: 8px 28px 8px 10px;
@@ -124,20 +107,17 @@
     color: var(--text-color);
     cursor: pointer;
   }
-
   .d3-grpo-token-comparison .slider-container {
     display: flex;
     flex-direction: column;
     gap: 8px;
     min-width: 300px;
   }
-
   .d3-grpo-token-comparison .slider-row {
     display: flex;
     align-items: center;
     gap: 12px;
   }
-
   .d3-grpo-token-comparison input[type="range"] {
     flex: 1;
     height: 6px;
@@ -147,7 +127,6 @@
     -webkit-appearance: none;
     cursor: pointer;
   }
-
   .d3-grpo-token-comparison input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
@@ -157,7 +136,6 @@
     background: var(--primary-color);
     cursor: pointer;
   }
-
   .d3-grpo-token-comparison input[type="range"]::-moz-range-thumb {
     width: 16px;
     height: 16px;
@@ -166,7 +144,6 @@
     cursor: pointer;
     border: none;
   }
-
   .d3-grpo-token-comparison .slider-value {
     font-size: 12px;
     font-weight: 600;
@@ -279,17 +256,17 @@
 
       const fetchFirstAvailable = async (filename) => {
         const paths = [
-          `/data/${filename}`,
-          `./assets/data/${filename}`,
-          `../assets/data/${filename}`,
-          `../../assets/data/${filename}`
+          `/data/grpo/histograms/${filename}`,
+          `./assets/data/grpo/histograms/${filename}`,
+          `../assets/data/grpo/histograms/${filename}`,
+          `../../assets/data/grpo/histograms/${filename}`
         ];
 
         for (const p of paths) {
           try {
             const r = await fetch(p, { cache: 'no-cache' });
             if (r.ok) return await r.json();
-          } catch (e) { }
+          } catch (e) {}
         }
         throw new Error(`JSON not found: ${filename}`);
       };
@@ -367,7 +344,7 @@
           const legendItems = document.createElement('div');
           legendItems.className = 'items';
 
-          ['APO No-Think (Baseline)', 'GRPO on Math with Overlong Penalty'].forEach((name, idx) => {
+          ['APO No-Think (Baseline)', 'GRPO with overlong penalty'].forEach((name, idx) => {
             const item = document.createElement('span');
             item.className = 'item';
 
@@ -524,4 +501,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>