Skip to content

Commit 0610db2

Browse files
jiange91jiange91
committed
fix source bench html
1 parent 6cbbd7c commit 0610db2

File tree

8 files changed

+509
-346
lines changed

8 files changed

+509
-346
lines changed

‎content/posts/sourcebench.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,6 @@ The next leap of AI-based search should go for architectures that explicitly wei
4242

4343
{{< sourcebench/heatmap >}}
4444

45-
Figure 1: Full Correlation Matrix. Colors represent correlation strength in 0.1 intervals.
46-
4745
### Insight 2: The Inverse Law of AI Search and SERP
4846
There is a striking inverse relationship between a model's SourceBench score and its reliance on traditional Google Search results.
4947
Top-performing systems like **GPT-5** overlap with Google only 16% of the time, functioning as "**Discovery Engines**" that find high-quality, buried evidence.

‎layouts/shortcodes/sourcebench/deepseek.html‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
1-
<div class="chart-wrapper">
1+
<div class="sb">
2+
<div class="chart-wrapper" style="height: 250px;">
23
<canvas id="deepseekChart"></canvas>
34
</div>
45
<div class="caption">Figure 3: DeepSeek experiment results.</div>
56
</div>
67

78
<script>
8-
Chart.defaults.font.family = "'Inter', sans-serif";
9-
Chart.defaults.color = '#475569';
10-
11-
const inverseData = {
12-
labels: ['GPT-5', 'Grok-4.1', 'GPT-4o', 'Perplexity', 'Tavily'],
13-
score: [89.1, 83.4, 81.5, 78.5, 78.3],
14-
overlap: [16.0, 29.7, 27.5, 40.0, 55.5]
15-
};
16-
9+
window.addEventListener('DOMContentLoaded', function() {
1710
const deepSeekData = [
1811
{ name: 'Chat + Low Search', score: 70.1, color: '#cbd5e1' },
1912
{ name: 'Reason + Low Search', score: 75.8, color: '#94a3b8' },
@@ -37,8 +30,11 @@
3730
responsive: true,
3831
maintainAspectRatio: false,
3932
plugins: { legend: { display: false } },
40-
scales: { x: { min: 65, max: 80, grid: { color: '#f1f5f9' } }, y: { grid: { display: false } } }
33+
scales: {
34+
x: { min: 65, max: 80, grid: { color: '#f1f5f9' } },
35+
y: { grid: { display: false } }
36+
}
4137
}
4238
});
43-
39+
});
4440
</script>

‎layouts/shortcodes/sourcebench/heatmap.html‎

Lines changed: 141 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,149 @@
1+
<style>
2+
.heatmap-container {
3+
display: grid;
4+
grid-template-columns: 30px repeat(8, 1fr);
5+
gap: 2px;
6+
margin: 2rem 0;
7+
font-family: 'Inter', sans-serif;
8+
font-size: 0.65rem;
9+
}
10+
.heatmap-label {
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
font-weight: 600;
15+
color: #64748b;
16+
}
17+
.heatmap-cell {
18+
aspect-ratio: 1;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
border-radius: 2px;
23+
transition: transform 0.1s;
24+
font-weight: 500;
25+
}
26+
.grad-neg { background-color: #f1f5f9; color: #94a3b8; }
27+
.grad-0 { background-color: #fff1f2; color: #be123c; }
28+
.grad-10 { background-color: #ffe4e6; color: #be123c; }
29+
.grad-20 { background-color: #fecdd3; color: #be123c; }
30+
.grad-30 { background-color: #fda4af; color: #881337; }
31+
.grad-40 { background-color: #fb7185; color: #fff; }
32+
.grad-50 { background-color: #f43f5e; color: #fff; }
33+
.grad-60 { background-color: #e11d48; color: #fff; }
34+
.grad-70 { background-color: #be123c; color: #fff; }
35+
.grad-80 { background-color: #9f1239; color: #fff; }
36+
.grad-90 { background-color: #881337; color: #fff; }
37+
.grad-100 { background-color: #4c0519; color: #fff; }
38+
.heatmap-cell:hover {
39+
transform: scale(1.2);
40+
z-index: 10;
41+
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2);
42+
border-radius: 4px;
43+
}
44+
/* Dark mode overrides */
45+
.dark-theme .heatmap-label {
46+
color: #94a3b8;
47+
}
48+
.dark-theme .grad-neg { background-color: #1e293b; color: #64748b; }
49+
.dark-theme .grad-0 { background-color: #2a1215; color: #fda4af; }
50+
.dark-theme .grad-10 { background-color: #3b1219; color: #fda4af; }
51+
.dark-theme .grad-20 { background-color: #4c1420; color: #fda4af; }
52+
.dark-theme .grad-30 { background-color: #6b1a2a; color: #fecdd3; }
53+
</style>
154

2-
<style>
3-
/* Heatmap Styling for 4.3 */
4-
.heatmap-container {
5-
display: grid;
6-
grid-template-columns: 30px repeat(8, 1fr);
7-
gap: 2px;
8-
margin: 2rem 0;
9-
font-family: 'Inter', sans-serif;
10-
font-size: 0.65rem;
11-
}
12-
.heatmap-label {
13-
display: flex;
14-
align-items: center;
15-
justify-content: center;
16-
font-weight: 600;
17-
color: #64748b;
18-
}
19-
.heatmap-cell {
20-
aspect-ratio: 1;
21-
display: flex;
22-
align-items: center;
23-
justify-content: center;
24-
border-radius: 2px;
25-
transition: transform 0.1s;
26-
font-weight: 500;
27-
}
28-
29-
/* 10-step Gradient (Rose Palette) */
30-
.grad-neg { background-color: #f1f5f9; color: #94a3b8; } /* Slate 100 */
31-
.grad-0 { background-color: #fff1f2; color: #be123c; } /* Rose 50 */
32-
.grad-10 { background-color: #ffe4e6; color: #be123c; } /* Rose 100 */
33-
.grad-20 { background-color: #fecdd3; color: #be123c; } /* Rose 200 */
34-
.grad-30 { background-color: #fda4af; color: #881337; } /* Rose 300 */
35-
.grad-40 { background-color: #fb7185; color: #fff; } /* Rose 400 */
36-
.grad-50 { background-color: #f43f5e; color: #fff; } /* Rose 500 */
37-
.grad-60 { background-color: #e11d48; color: #fff; } /* Rose 600 */
38-
.grad-70 { background-color: #be123c; color: #fff; } /* Rose 700 */
39-
.grad-80 { background-color: #9f1239; color: #fff; } /* Rose 800 */
40-
.grad-90 { background-color: #881337; color: #fff; } /* Rose 900 */
41-
.grad-100 { background-color: #4c0519; color: #fff; } /* Rose 950 */
55+
<div class="sb">
56+
<figure>
57+
<div class="p-6 border border-gray-200 rounded-lg shadow-sm w-full max-w-lg mx-auto" style="background-color: var(--bkg-color, #fff);">
58+
<div class="heatmap-container">
59+
<div class="heatmap-label"></div>
60+
<div class="heatmap-label">CR</div><div class="heatmap-label">FA</div><div class="heatmap-label">NE</div>
61+
<div class="heatmap-label">AA</div><div class="heatmap-label">FR</div><div class="heatmap-label">OA</div>
62+
<div class="heatmap-label">DA</div><div class="heatmap-label">LC</div>
4263

43-
.heatmap-cell:hover {
44-
transform: scale(1.2);
45-
z-index: 10;
46-
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2);
47-
border-radius: 4px;
48-
}
49-
</style>
50-
51-
<figure>
52-
<div class="bg-white p-6 border border-gray-200 rounded-lg shadow-sm w-full max-w-lg mx-auto">
53-
<div class="heatmap-container">
54-
<!-- Header Row -->
55-
<div class="heatmap-label"></div>
56-
<div class="heatmap-label">CR</div><div class="heatmap-label">FA</div><div class="heatmap-label">NE</div>
57-
<div class="heatmap-label">AA</div><div class="heatmap-label">FR</div><div class="heatmap-label">OA</div>
58-
<div class="heatmap-label">DA</div><div class="heatmap-label">LC</div>
64+
<div class="heatmap-label">CR</div>
65+
<div class="heatmap-cell grad-100">1.0</div>
66+
<div class="heatmap-cell grad-60">.61</div>
67+
<div class="heatmap-cell grad-30">.31</div>
68+
<div class="heatmap-cell grad-30">.32</div>
69+
<div class="heatmap-cell grad-0">.02</div>
70+
<div class="heatmap-cell grad-20">.21</div>
71+
<div class="heatmap-cell grad-20">.19</div>
72+
<div class="heatmap-cell grad-10">.12</div>
5973

60-
<!-- Row CR -->
61-
<div class="heatmap-label">CR</div>
62-
<div class="heatmap-cell grad-100">1.0</div>
63-
<div class="heatmap-cell grad-60">.61</div>
64-
<div class="heatmap-cell grad-30">.31</div>
65-
<div class="heatmap-cell grad-30">.32</div>
66-
<div class="heatmap-cell grad-0">.02</div>
67-
<div class="heatmap-cell grad-20">.21</div>
68-
<div class="heatmap-cell grad-20">.19</div>
69-
<div class="heatmap-cell grad-10">.12</div>
74+
<div class="heatmap-label">FA</div>
75+
<div class="heatmap-cell grad-60">.61</div>
76+
<div class="heatmap-cell grad-100">1.0</div>
77+
<div class="heatmap-cell grad-60">.67</div>
78+
<div class="heatmap-cell grad-40">.44</div>
79+
<div class="heatmap-cell grad-10">.07</div>
80+
<div class="heatmap-cell grad-40">.47</div>
81+
<div class="heatmap-cell grad-50">.48</div>
82+
<div class="heatmap-cell grad-30">.35</div>
7083

71-
<!-- Row FA -->
72-
<div class="heatmap-label">FA</div>
73-
<div class="heatmap-cell grad-60">.61</div>
74-
<div class="heatmap-cell grad-100">1.0</div>
75-
<div class="heatmap-cell grad-60">.67</div>
76-
<div class="heatmap-cell grad-40">.44</div>
77-
<div class="heatmap-cell grad-10">.07</div>
78-
<div class="heatmap-cell grad-40">.47</div>
79-
<div class="heatmap-cell grad-50">.48</div>
80-
<div class="heatmap-cell grad-30">.35</div>
81-
82-
<!-- Row NE -->
83-
<div class="heatmap-label">NE</div>
84-
<div class="heatmap-cell grad-30">.31</div>
85-
<div class="heatmap-cell grad-60">.67</div>
86-
<div class="heatmap-cell grad-100">1.0</div>
87-
<div class="heatmap-cell grad-30">.31</div>
88-
<div class="heatmap-cell grad-0">.02</div>
89-
<div class="heatmap-cell grad-40">.39</div>
90-
<div class="heatmap-cell grad-40">.44</div>
91-
<div class="heatmap-cell grad-40">.44</div>
84+
<div class="heatmap-label">NE</div>
85+
<div class="heatmap-cell grad-30">.31</div>
86+
<div class="heatmap-cell grad-60">.67</div>
87+
<div class="heatmap-cell grad-100">1.0</div>
88+
<div class="heatmap-cell grad-30">.31</div>
89+
<div class="heatmap-cell grad-0">.02</div>
90+
<div class="heatmap-cell grad-40">.39</div>
91+
<div class="heatmap-cell grad-40">.44</div>
92+
<div class="heatmap-cell grad-40">.44</div>
9293

93-
<!-- Row AA -->
94-
<div class="heatmap-label">AA</div>
95-
<div class="heatmap-cell grad-30">.32</div>
96-
<div class="heatmap-cell grad-40">.44</div>
97-
<div class="heatmap-cell grad-30">.31</div>
98-
<div class="heatmap-cell grad-100">1.0</div>
99-
<div class="heatmap-cell grad-0">.05</div>
100-
<div class="heatmap-cell grad-50">.53</div>
101-
<div class="heatmap-cell grad-50">.48</div>
102-
<div class="heatmap-cell grad-20">.22</div>
94+
<div class="heatmap-label">AA</div>
95+
<div class="heatmap-cell grad-30">.32</div>
96+
<div class="heatmap-cell grad-40">.44</div>
97+
<div class="heatmap-cell grad-30">.31</div>
98+
<div class="heatmap-cell grad-100">1.0</div>
99+
<div class="heatmap-cell grad-0">.05</div>
100+
<div class="heatmap-cell grad-50">.53</div>
101+
<div class="heatmap-cell grad-50">.48</div>
102+
<div class="heatmap-cell grad-20">.22</div>
103103

104-
<!-- Row FR -->
105-
<div class="heatmap-label">FR</div>
106-
<div class="heatmap-cell grad-0">.02</div>
107-
<div class="heatmap-cell grad-10">.07</div>
108-
<div class="heatmap-cell grad-0">.02</div>
109-
<div class="heatmap-cell grad-0">.05</div>
110-
<div class="heatmap-cell grad-100">1.0</div>
111-
<div class="heatmap-cell grad-10">.10</div>
112-
<div class="heatmap-cell grad-0">.05</div>
113-
<div class="heatmap-cell grad-neg">-.03</div>
114-
115-
<!-- Row OA -->
116-
<div class="heatmap-label">OA</div>
117-
<div class="heatmap-cell grad-20">.21</div>
118-
<div class="heatmap-cell grad-40">.47</div>
119-
<div class="heatmap-cell grad-40">.39</div>
120-
<div class="heatmap-cell grad-50">.53</div>
121-
<div class="heatmap-cell grad-10">.10</div>
122-
<div class="heatmap-cell grad-100">1.0</div>
123-
<div class="heatmap-cell grad-70">.73</div>
124-
<div class="heatmap-cell grad-30">.36</div>
104+
<div class="heatmap-label">FR</div>
105+
<div class="heatmap-cell grad-0">.02</div>
106+
<div class="heatmap-cell grad-10">.07</div>
107+
<div class="heatmap-cell grad-0">.02</div>
108+
<div class="heatmap-cell grad-0">.05</div>
109+
<div class="heatmap-cell grad-100">1.0</div>
110+
<div class="heatmap-cell grad-10">.10</div>
111+
<div class="heatmap-cell grad-0">.05</div>
112+
<div class="heatmap-cell grad-neg">-.03</div>
125113

126-
<!-- Row DA -->
127-
<div class="heatmap-label">DA</div>
128-
<div class="heatmap-cell grad-20">.19</div>
129-
<div class="heatmap-cell grad-50">.48</div>
130-
<div class="heatmap-cell grad-40">.44</div>
131-
<div class="heatmap-cell grad-50">.48</div>
132-
<div class="heatmap-cell grad-0">.05</div>
133-
<div class="heatmap-cell grad-70">.73</div>
134-
<div class="heatmap-cell grad-100">1.0</div>
135-
<div class="heatmap-cell grad-40">.39</div>
136-
137-
<!-- Row LC -->
138-
<div class="heatmap-label">LC</div>
139-
<div class="heatmap-cell grad-10">.12</div>
140-
<div class="heatmap-cell grad-30">.35</div>
141-
<div class="heatmap-cell grad-40">.44</div>
142-
<div class="heatmap-cell grad-20">.22</div>
143-
<div class="heatmap-cell grad-neg">-.03</div>
144-
<div class="heatmap-cell grad-30">.36</div>
145-
<div class="heatmap-cell grad-40">.39</div>
146-
<div class="heatmap-cell grad-100">1.0</div>
147-
</div>
148-
</div>
149-
<figcaption class="caption">
150-
Figure 4: Full Correlation Matrix. Colors represent correlation strength in 0.1 intervals.
151-
</figcaption>
152-
</figure>
114+
<div class="heatmap-label">OA</div>
115+
<div class="heatmap-cell grad-20">.21</div>
116+
<div class="heatmap-cell grad-40">.47</div>
117+
<div class="heatmap-cell grad-40">.39</div>
118+
<div class="heatmap-cell grad-50">.53</div>
119+
<div class="heatmap-cell grad-10">.10</div>
120+
<div class="heatmap-cell grad-100">1.0</div>
121+
<div class="heatmap-cell grad-70">.73</div>
122+
<div class="heatmap-cell grad-30">.36</div>
153123

124+
<div class="heatmap-label">DA</div>
125+
<div class="heatmap-cell grad-20">.19</div>
126+
<div class="heatmap-cell grad-50">.48</div>
127+
<div class="heatmap-cell grad-40">.44</div>
128+
<div class="heatmap-cell grad-50">.48</div>
129+
<div class="heatmap-cell grad-0">.05</div>
130+
<div class="heatmap-cell grad-70">.73</div>
131+
<div class="heatmap-cell grad-100">1.0</div>
132+
<div class="heatmap-cell grad-40">.39</div>
133+
134+
<div class="heatmap-label">LC</div>
135+
<div class="heatmap-cell grad-10">.12</div>
136+
<div class="heatmap-cell grad-30">.35</div>
137+
<div class="heatmap-cell grad-40">.44</div>
138+
<div class="heatmap-cell grad-20">.22</div>
139+
<div class="heatmap-cell grad-neg">-.03</div>
140+
<div class="heatmap-cell grad-30">.36</div>
141+
<div class="heatmap-cell grad-40">.39</div>
142+
<div class="heatmap-cell grad-100">1.0</div>
143+
</div>
144+
</div>
145+
<figcaption class="caption">
146+
Figure 1: Full Correlation Matrix. Colors represent correlation strength in 0.1 intervals.
147+
</figcaption>
148+
</figure>
149+
</div>

‎layouts/shortcodes/sourcebench/inverse.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
<div class="chart-wrapper">
1+
<div class="sb">
2+
<div class="chart-wrapper" style="height: 300px;">
23
<canvas id="inverseChart"></canvas>
34
</div>
45
<div class="caption">Figure 2: SourceBench Score (Green) vs. Google Overlap (Gray).</div>
56
</div>
67

7-
88
<script>
9-
Chart.defaults.font.family = "'Inter', sans-serif";
10-
Chart.defaults.color = '#475569';
11-
9+
window.addEventListener('DOMContentLoaded', function() {
1210
const inverseData = {
1311
labels: ['GPT-5', 'Grok-4.1', 'GPT-4o', 'Perplexity', 'Tavily'],
1412
score: [89.1, 83.4, 81.5, 78.5, 78.3],
@@ -43,12 +41,12 @@
4341
maintainAspectRatio: false,
4442
interaction: { mode: 'index', intersect: false },
4543
plugins: { legend: { position: 'top', labels: { usePointStyle: true } } },
46-
scales: {
44+
scales: {
4745
x: { grid: { display: false } },
4846
y: { type: 'linear', display: true, position: 'left', min: 70, max: 95, title: { display: true, text: 'Weighted Score' } },
4947
y1: { type: 'linear', display: true, position: 'right', min: 0, max: 60, grid: { drawOnChartArea: false }, title: { display: true, text: 'Overlap %' } }
5048
}
5149
}
5250
});
53-
51+
});
5452
</script>

0 commit comments

Comments
 (0)