refine vdcore text&plot, fix font color source bench

Author: jiange91

content/posts/vdcores.md

@@ -61,7 +61,7 @@ VDCores do not get this edge by hand-tunning better kernels, but instead through
 
 ### Example 1: **Free** "Prefetch" Non-Dependent Memory Buffers
 
-Consider an attention kernel followed by a linear projection with residual addition. In VDCores, we connect them by dependencies rather than manually fusing/staging: (Also note that in VDCores we do not have the notion of kernel boundary; we mark the original kernel boundary in the example for easy to understand.)
+Consider an attention kernel followed by a linear projection with residual addition. In VDCores, we connect them by dependencies rather than manually fusing/staging: (Also note that in VDCores we do not have the notion of kernel boundary; we mark the original kernel boundary in the example for ease of understanding.)
 
 {{< vdcores/example1 >}}
 
@@ -71,7 +71,7 @@ This is the key shift: {{< highlight-text >}} Overlap **emerges automatically**{
 
 Another secret sause of VDCores is the **composbility** of it's components. Same set of computation instructions could be composed with different memory instructions, different memory dependencies, thus allowing programmer to quick experimenting with different plans without manual kernel rewrite and fusion.
 
-Consider a MLP block: GEMV (Up + Gate) followed by SiLU activation and GEMV (Down). Input is shape [1, 4096], Up and Gate outputs are [1, 12288], and Down output is [1, 4096]. We can tile Gate and Up along the N dimension and Down along the K dimension.
+Consider an MLP block: GEMV (Up + Gate) followed by SiLU activation and GEMV (Down). Input is shape [1, 4096], Up and Gate outputs are [1, 12288], and Down output is [1, 4096]. We can tile Gate and Up along the N dimension and Down along the K dimension.
 
 <img src="../../images/vdcores/example2.jpg" alt="flexible core composition: two schedules" style="width: 100%;" />
 

layouts/shortcodes/sourcebench/deepseek.html

@@ -7,13 +7,22 @@
 
 <script>
 window.addEventListener('DOMContentLoaded', function() {
-const deepSeekData = [
+
+function sbGetThemeColors2() {
+    var ls = localStorage.getItem('theme');
+    var hugo = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
+    var dark = (ls || hugo) === 'dark';
+    return { font: dark ? '#cbd5e1' : '#475569', grid: dark ? '#334155' : '#f1f5f9' };
+}
+
+var tc = sbGetThemeColors2();
+var deepSeekData = [
     { name: 'Chat + Low Search', score: 70.1, color: '#cbd5e1' },
     { name: 'Reason + Low Search', score: 75.8, color: '#94a3b8' },
     { name: 'Chat + High Search', score: 75.9, color: '#8b5cf6' },
 ];
 
-new Chart(document.getElementById('deepseekChart'), {
+var deepseekChart = new Chart(document.getElementById('deepseekChart'), {
     type: 'bar',
     data: {
         labels: deepSeekData.map(d => d.name),
@@ -29,12 +38,26 @@
         indexAxis: 'y',
         responsive: true,
         maintainAspectRatio: false,
+        color: tc.font,
         plugins: { legend: { display: false } },
         scales: {
-            x: { min: 65, max: 80, grid: { color: '#f1f5f9' } },
-            y: { grid: { display: false } }
+            x: { min: 65, max: 80, grid: { color: tc.grid }, ticks: { color: tc.font } },
+            y: { grid: { display: false }, ticks: { color: tc.font } }
         }
     }
 });
+
+function sbUpdateDeepseekColors() {
+    var c = sbGetThemeColors2();
+    deepseekChart.options.color = c.font;
+    deepseekChart.options.scales.x.ticks.color = c.font;
+    deepseekChart.options.scales.x.grid.color = c.grid;
+    deepseekChart.options.scales.y.ticks.color = c.font;
+    deepseekChart.update();
+}
+
+var toggleBtn = document.querySelector('.btn-light-dark');
+if (toggleBtn) toggleBtn.addEventListener('click', function() { setTimeout(sbUpdateDeepseekColors, 50); });
+
 });
 </script>

layouts/shortcodes/sourcebench/inverse.html

@@ -7,46 +7,59 @@
 
 <script>
 window.addEventListener('DOMContentLoaded', function() {
-const inverseData = {
+
+function sbGetThemeColors() {
+    var ls = localStorage.getItem('theme');
+    var hugo = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
+    var dark = (ls || hugo) === 'dark';
+    return { font: dark ? '#cbd5e1' : '#475569', grid: dark ? '#334155' : '#f1f5f9' };
+}
+
+var tc = sbGetThemeColors();
+var inverseData = {
     labels: ['GPT-5', 'Grok-4.1', 'GPT-4o', 'Perplexity', 'Tavily'],
     score: [89.1, 83.4, 81.5, 78.5, 78.3],
     overlap: [16.0, 29.7, 27.5, 40.0, 55.5]
 };
 
-new Chart(document.getElementById('inverseChart'), {
+var inverseChart = new Chart(document.getElementById('inverseChart'), {
     type: 'bar',
     data: {
         labels: inverseData.labels,
         datasets: [
-            {
-                label: 'SourceBench Score',
-                data: inverseData.score,
-                backgroundColor: '#10b981',
-                yAxisID: 'y',
-                borderRadius: 4,
-                barPercentage: 0.6
-            },
-            {
-                label: 'Google Overlap %',
-                data: inverseData.overlap,
-                backgroundColor: '#94a3b8',
-                yAxisID: 'y1',
-                borderRadius: 4,
-                barPercentage: 0.6
-            }
+            { label: 'SourceBench Score', data: inverseData.score, backgroundColor: '#10b981', yAxisID: 'y', borderRadius: 4, barPercentage: 0.6 },
+            { label: 'Google Overlap %', data: inverseData.overlap, backgroundColor: '#94a3b8', yAxisID: 'y1', borderRadius: 4, barPercentage: 0.6 }
         ]
     },
     options: {
         responsive: true,
         maintainAspectRatio: false,
         interaction: { mode: 'index', intersect: false },
-        plugins: { legend: { position: 'top', labels: { usePointStyle: true } } },
+        color: tc.font,
+        plugins: { legend: { position: 'top', labels: { usePointStyle: true, color: tc.font } } },
         scales: {
-            x: { grid: { display: false } },
-            y: { type: 'linear', display: true, position: 'left', min: 70, max: 95, title: { display: true, text: 'Weighted Score' } },
-            y1: { type: 'linear', display: true, position: 'right', min: 0, max: 60, grid: { drawOnChartArea: false }, title: { display: true, text: 'Overlap %' } }
+            x: { grid: { display: false }, ticks: { color: tc.font } },
+            y: { type: 'linear', display: true, position: 'left', min: 70, max: 95, grid: { color: tc.grid }, ticks: { color: tc.font }, title: { display: true, text: 'Weighted Score', color: tc.font } },
+            y1: { type: 'linear', display: true, position: 'right', min: 0, max: 60, grid: { drawOnChartArea: false }, ticks: { color: tc.font }, title: { display: true, text: 'Overlap %', color: tc.font } }
         }
     }
 });
+
+function sbUpdateInverseColors() {
+    var c = sbGetThemeColors();
+    inverseChart.options.color = c.font;
+    inverseChart.options.plugins.legend.labels.color = c.font;
+    inverseChart.options.scales.x.ticks.color = c.font;
+    inverseChart.options.scales.y.ticks.color = c.font;
+    inverseChart.options.scales.y.grid.color = c.grid;
+    inverseChart.options.scales.y.title.color = c.font;
+    inverseChart.options.scales.y1.ticks.color = c.font;
+    inverseChart.options.scales.y1.title.color = c.font;
+    inverseChart.update();
+}
+
+var toggleBtn = document.querySelector('.btn-light-dark');
+if (toggleBtn) toggleBtn.addEventListener('click', function() { setTimeout(sbUpdateInverseColors, 50); });
+
 });
 </script>

layouts/shortcodes/sourcebench/metric.html

@@ -159,6 +159,7 @@
     .dark-theme .sb .chart-wrapper {
         background: #1e293b;
         border-color: #334155;
+        color: #e2e8f0;
     }
     .dark-theme .sb table {
         border-color: #334155;