Vibe coding the chart for prompt and steering comparison

app/.astro/astro/content.d.ts

@@ -236,38 +236,11 @@ declare module 'astro:content' {
 	};
 
 	type DataEntryMap = {
-		"assets": {
-"data/data": {
-	id: "data/data";
+		"assets": Record<string, {
+  id: string;
   collection: "assets";
-  data: any
-};
-"data/font-sprite-mapping": {
-	id: "data/font-sprite-mapping";
-  collection: "assets";
-  data: any
-};
-"data/font_manifest": {
-	id: "data/font_manifest";
-  collection: "assets";
-  data: any
-};
-"data/llm_benchmarks": {
-	id: "data/llm_benchmarks";
-  collection: "assets";
-  data: any
-};
-"data/mnist-variant-model": {
-	id: "data/mnist-variant-model";
-  collection: "assets";
-  data: any
-};
-"data/typography_data": {
-	id: "data/typography_data";
-  collection: "assets";
-  data: any
-};
-};
+  data: any;
+}>;
 
 	};
 

app/.astro/settings.json

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:43c01d5340b1eb3be37a5c27848e51cc4675966370507e32a49edff18f1278ea
+oid sha256:e42b78dadef4d029bfbbf8c6baf8980f3a8afad7e35fedc4b7a9681bb39f1fba
 size 58

app/src/content/article.mdx

@@ -129,22 +129,17 @@ There seems to be only a narrow sweet spot where the model behaves as expected.
 
 For instance, we can see below that on the "*Who are you?*" prompt, steering with coefficient 8.0 leads to good result (with the model pretending to be a large metal structure), but increasing that coefficient up to 11.0 leads to repetitive gibberish on the exact same prompt.
 
-import neuronpedia_who from './assets/image/neuronpedia_who.png'
-
-<Image src={neuronpedia_who} alt="Sample image with optimization"
-       caption="Screenshots from conversations on Neuronpedia when steering layer 15 feature 21576 of Llama 3.1 8B Instruct" />
-
 However, things are not as clear with a different input. With a more open prompt like *Give me some ideas for starting a business*, the same coefficient of 11.0 leads to a clear mention of the Eiffel Tower while a coefficient of 8.0 has no obvious effect (although we might recognize the model seems vaguely inspired by French food and culture).
 
-import neuronpedia_business from './assets/image/neuronpedia_business.png'
+<HtmlEmbed src="d3-first-experiments.html" data="first_experiments.csv" />
 
-<Image src={neuronpedia_business} alt="Sample image with optimization"
-       caption="Screenshots from conversations on Neuronpedia when steering layer 15 feature 21576 of Llama 3.1 8B Instruct" />
 
 In their own paper, Anthropic mentioned using values ranging from **5 to 10 times the maximum observed activation**. In our case, the maximum observed activation is 4.77, so that would mean using values between about 25 and 50. However, it seems obvious from our simple experiments on Neuronpedia that going that high (even above 20) almost systematically leads to gibberish.
 
 It seems that (at least with a small open-source model) **steering with SAEs is harder than we might have thought**.
 
+
+
 ### 1.3 The AxBench paper
 
 Indeed, in January 2025, the [AxBench](https://arxiv.org/abs/2501.17148) paper benchmarked several steering procedures, and indeed found using SAEs to be one of the least effective methods.

app/src/content/assets/data/against_baselines.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a5e6173a1541b9798278da1729f1e357c0711d2e270f68aa4af8eae962f146dd
-size 53573

app/src/content/assets/data/against_baselines_deduplicated.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:56d18f581eff719023eb87c695e0e11770738d7872c8b9dac9bc23d9b0ef560b
-size 32738

app/src/content/assets/data/all_ratings_luis.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:104433529e7d9c8a3bd297be1138e9e87677a666953d1362c517ec389c6c9172
-size 64966

app/src/content/assets/data/banner_visualisation_data.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:b155d8c319b1788befe716017fecca580768157feee6221f3af44b7bb9f9c7e5
-size 81995

app/src/content/assets/data/banner_visualisation_data_enriched.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:98eba5e5db19f482da8a3b26498c2fa633afa458f5b75e23d2dca24e24cc7596
-size 844651

app/src/content/assets/data/data.json

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6bbaf02f1b470da41754e3828e81e76ef386d9b3cfb8b57dcc7cbfd4225956cc
-size 14121778

app/src/content/assets/data/{against_baselines copy.csv → first_experiments.csv}

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a5e6173a1541b9798278da1729f1e357c0711d2e270f68aa4af8eae962f146dd
-size 53573
+oid sha256:232bf24d9a3235938cda9d67a5efb687ad8e01853eec4e5f4af185c4ea00555f
+size 60601

app/src/content/assets/data/font-sprite-mapping.json

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:ea1b487ebafe8d495737674a7eb6492b06551aeb97de79728afeb4aba7c39f29
-size 9766

app/src/content/assets/data/font_manifest.json

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7a587c5fd3fb85fdd26d485f57ef3e4feb8370593d46f57289b55f873beac4b4
-size 153794

app/src/content/assets/data/formatting_filters.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:e5218781e5f018891311410d684785a3c661ca3cd25d2ac62bf45e6bb7d69e78
-size 63268

app/src/content/assets/data/image_correspondence_filters.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:64a8af61666421e33d02bf0e52d9df576a6a831677910b3631e8b02069e380a6
-size 60206

app/src/content/assets/data/internal_deduplication.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d6b6bf0d84fe1bc67436c70f9a8d5919627e9c2bc9c3f931f4af80c01be22649
-size 47060

app/src/content/assets/data/llm_benchmarks.json

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:67f10bd2fdcce7231c40db14b013a587e0dcecf02e427b10bb159669576e9ad8
-size 834

app/src/content/assets/data/mnist-variant-model.json

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7dca86e85be46c1fca6a4e2503786e88e3f8d4609fb7284c8a1479620a5827da
-size 4315

app/src/content/assets/data/relevance_filters.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:69acb8bc0b80b2c664d821b1c06d67af315e67d8a706cf9e5d351e4468392cc6
-size 63236

app/src/content/assets/data/remove_ch.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:869fc4724af7e9c868b6024f472f9ae0f6468b74ef61db101438f80610828abb
-size 28837

app/src/content/assets/data/s25_ratings.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:ca22654a0302da0ca335420b0a89cd770cea560b11f2a9f9f25927877d7ed231
-size 61626

app/src/content/assets/data/ss_vs_s1.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3f076631fcad76129ed8cab03c72a61965b465e1f3e7fa8dc68b7c7a9275616b
-size 28041

app/src/content/assets/data/typography_data.json

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:403e0095f2bcaa963cdfbb8d00a3695565623764d6f87b890bf58d7a2304acfc
-size 68739

app/src/content/assets/data/vision.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d28bd13dc3a9ff100c82e8c9dc59270563b865383d09cf28c5aba5812bfa75ee
-size 10913

app/src/content/assets/data/visual_dependency_filters.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a967b10ba4a1034f4d6da250d267a6af51722c3f6dbae0ef0221a62d53502d69
-size 60114

app/src/content/embeds/d3-first-experiments.html

@@ -0,0 +1,373 @@
+<div class="d3-first-experiments"></div>
+<style>
+  .d3-first-experiments {
+    padding: 8px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  }
+
+  .d3-first-experiments .slider-container {
+    margin-bottom: 12px;
+  }
+
+  .d3-first-experiments .slider-label {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 6px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .d3-first-experiments .slider-value {
+    font-size: 18px;
+    color: var(--primary-color);
+    font-weight: 600;
+  }
+
+  .d3-first-experiments input[type="range"] {
+    width: 100%;
+    height: 8px;
+    border-radius: 4px;
+    background: linear-gradient(to right,
+      var(--surface-bg) 0%,
+      var(--primary-color) 100%);
+    outline: none;
+    -webkit-appearance: none;
+  }
+
+  .d3-first-experiments input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  }
+
+  .d3-first-experiments input[type="range"]::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  }
+
+  .d3-first-experiments .columns-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+
+  @media (max-width: 768px) {
+    .d3-first-experiments .columns-container {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .d3-first-experiments .column {
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    overflow: hidden;
+    background: var(--surface-bg);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .d3-first-experiments .column-header {
+    padding: 8px 10px;
+    font-weight: 700;
+    font-size: 13px;
+    color: var(--text-color);
+    background: rgba(0,0,0,0.03);
+    border-bottom: 1px solid var(--border-color);
+    min-height: 38px;
+    display: flex;
+    align-items: center;
+  }
+
+  [data-theme="dark"] .d3-first-experiments .column-header {
+    background: rgba(255,255,255,0.05);
+  }
+
+  .d3-first-experiments .column-content {
+    padding: 10px;
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--text-color);
+    min-height: 300px;
+    max-height: 500px;
+    overflow-y: auto;
+    word-wrap: break-word;
+    flex: 1;
+  }
+
+  .d3-first-experiments .no-data {
+    color: var(--muted-color);
+    font-style: italic;
+  }
+
+  .d3-first-experiments .highlight {
+    font-weight: 700;
+    color: #ec4899;
+  }
+
+  .d3-first-experiments .note {
+    margin-top: 8px;
+    font-size: 11px;
+    color: var(--muted-color);
+    font-style: italic;
+    text-align: center;
+  }
+
+  .d3-first-experiments .error {
+    color: #ef4444;
+    padding: 12px;
+    background: #fee;
+    border-radius: 8px;
+    font-family: monospace;
+    font-size: 12px;
+    white-space: pre-wrap;
+  }
+</style>
+<script>
+  (() => {
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-first-experiments'))) {
+        const candidates = Array.from(document.querySelectorAll('.d3-first-experiments'))
+          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+        container = candidates[candidates.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Find data attribute from closest ancestor
+      let mountEl = container;
+      while (mountEl && !mountEl.getAttribute?.('data-datafiles')) {
+        mountEl = mountEl.parentElement;
+      }
+      let providedData = null;
+      try {
+        const attr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-datafiles') : null;
+        if (attr && attr.trim()) {
+          providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim();
+        }
+      } catch(_) {}
+
+      const DEFAULT_CSV = '/data/first_experiments.csv';
+      const ensureDataPrefix = (p) => (typeof p === 'string' && p && !p.includes('/')) ? `/data/${p}` : p;
+
+      const CSV_PATHS = typeof providedData === 'string'
+        ? [ensureDataPrefix(providedData)]
+        : [
+            DEFAULT_CSV,
+            './assets/data/first_experiments.csv',
+            '../assets/data/first_experiments.csv',
+            '../../assets/data/first_experiments.csv'
+          ];
+
+      const fetchFirstAvailable = async (paths) => {
+        for (const p of paths) {
+          try {
+            const r = await fetch(p, { cache: 'no-cache' });
+            if (r.ok) return await r.text();
+          } catch(_){}
+        }
+        throw new Error('CSV not found at any of the paths: ' + paths.join(', '));
+      };
+
+      const parseCSV = (text) => {
+        const rows = [];
+        let currentRow = [];
+        let currentField = '';
+        let inQuotes = false;
+        let i = 0;
+
+        while (i < text.length) {
+          const char = text[i];
+          const nextChar = text[i + 1];
+
+          if (char === '"' && inQuotes && nextChar === '"') {
+            // Escaped quote
+            currentField += '"';
+            i += 2;
+            continue;
+          }
+
+          if (char === '"') {
+            inQuotes = !inQuotes;
+            i++;
+            continue;
+          }
+
+          if (char === ',' && !inQuotes) {
+            currentRow.push(currentField);
+            currentField = '';
+            i++;
+            continue;
+          }
+
+          if ((char === '\n' || char === '\r') && !inQuotes) {
+            if (currentField || currentRow.length > 0) {
+              currentRow.push(currentField);
+              if (currentRow.some(f => f.trim())) {
+                rows.push(currentRow);
+              }
+              currentRow = [];
+              currentField = '';
+            }
+            i++;
+            if (char === '\r' && nextChar === '\n') i++;
+            continue;
+          }
+
+          currentField += char;
+          i++;
+        }
+
+        // Push last field and row
+        if (currentField || currentRow.length > 0) {
+          currentRow.push(currentField);
+          if (currentRow.some(f => f.trim())) {
+            rows.push(currentRow);
+          }
+        }
+
+        if (rows.length === 0) return [];
+
+        const headers = rows[0].map(h => h.trim());
+        return rows.slice(1).map(row => {
+          const obj = {};
+          headers.forEach((header, idx) => {
+            obj[header] = row[idx] ? row[idx].trim() : '';
+          });
+          return obj;
+        });
+      };
+
+      const processText = (text) => {
+        // Remove markdown formatting (** for bold, * for italic, etc.)
+        let processed = text.replace(/\*\*(.+?)\*\*/g, '$1'); // Remove **bold**
+        processed = processed.replace(/\*(.+?)\*/g, '$1'); // Remove *italic*
+
+        // Keywords to highlight (case insensitive)
+        const keywords = ['Eiffel', 'Eiffage', 'Eiff', 'Eifford', 'Tower', 'Paris', 'France', 'French'];
+
+        // Escape special regex characters in keywords and create pattern
+        const escapedKeywords = keywords.map(k => k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+        const pattern = new RegExp(`\\b(${escapedKeywords.join('|')})\\b`, 'gi');
+
+        // Highlight keywords
+        processed = processed.replace(pattern, '<span class="highlight">$1</span>');
+
+        // Convert newlines to <br> for HTML display
+        processed = processed.replace(/\n/g, '<br>');
+
+        return processed;
+      };
+
+      const render = (data) => {
+        const prompts = ["Who are you?", "Give me some ideas for starting a business"];
+
+        // Filter data for the two prompts
+        const filteredData = data.filter(d => prompts.includes(d.prompt));
+
+        // Get unique steering intensities and sort them
+        const intensities = [...new Set(filteredData.map(d => parseFloat(d.steering_intensity)))]
+          .sort((a, b) => a - b);
+
+        if (intensities.length === 0) {
+          container.innerHTML = '<div class="error">No data found for the specified prompts.</div>';
+          return;
+        }
+
+        const minIntensity = intensities[0];
+        const maxIntensity = intensities[intensities.length - 1];
+
+        // Create UI
+        container.innerHTML = `
+          <div class="slider-container">
+            <div class="slider-label">
+              <span>Steering Coefficient (α)</span>
+              <span class="slider-value">${minIntensity.toFixed(1)}</span>
+            </div>
+            <input type="range"
+                   min="${minIntensity}"
+                   max="${maxIntensity}"
+                   step="0.5"
+                   value="${minIntensity}"
+                   class="steering-slider">
+          </div>
+          <div class="columns-container">
+            <div class="column">
+              <div class="column-header">${prompts[0]}</div>
+              <div class="column-content" data-prompt="0"></div>
+            </div>
+            <div class="column">
+              <div class="column-header">${prompts[1]}</div>
+              <div class="column-content" data-prompt="1"></div>
+            </div>
+          </div>
+          <div class="note">Eiffel Tower related concepts are highlighted</div>
+        `;
+
+        const slider = container.querySelector('.steering-slider');
+        const valueDisplay = container.querySelector('.slider-value');
+        const contents = container.querySelectorAll('.column-content');
+
+        const updateDisplay = (intensity) => {
+          valueDisplay.textContent = parseFloat(intensity).toFixed(1);
+
+          prompts.forEach((prompt, idx) => {
+            const row = filteredData.find(d =>
+              d.prompt === prompt &&
+              Math.abs(parseFloat(d.steering_intensity) - parseFloat(intensity)) < 0.01
+            );
+
+            const content = contents[idx];
+            if (row && row.answer) {
+              content.innerHTML = processText(row.answer);
+              content.classList.remove('no-data');
+            } else {
+              content.innerHTML = 'No data available for this steering coefficient.';
+              content.classList.add('no-data');
+            }
+          });
+        };
+
+        slider.addEventListener('input', (e) => {
+          updateDisplay(e.target.value);
+        });
+
+        // Initial display
+        updateDisplay(minIntensity);
+      };
+
+      // Load and parse data
+      fetchFirstAvailable(CSV_PATHS)
+        .then(text => {
+          const data = parseCSV(text);
+          render(data);
+        })
+        .catch(err => {
+          container.innerHTML = `<div class="error">Error loading data: ${err.message}</div>`;
+        });
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+    } else {
+      bootstrap();
+    }
+  })();
+</script>