|
51 | 51 |
|
52 | 52 | /* ββββββββββββββββββββββββββββββββββββββββββββββββ reveal on first view β */ |
53 | 53 | var revealTargets = $$([ |
54 | | - '.section .eyebrow', '.section .h2', '.section .lede', '.subsection__title', |
55 | | - '.card', '.lib', '.zig', '.flow', '.split', '.bench', |
56 | | - '.bench__honest', '.loop', '.join', '.filters', '.libs__note', '.closer__inner' |
| 54 | + '.section .eyebrow', '.section .h2', '.section .lede', |
| 55 | + '.card', '.lib', '.sys', '.zig', '.flow', '.split', |
| 56 | + '.join', '.filters', '.libs__note', '.closer__inner' |
57 | 57 | ].join(',')); |
58 | 58 |
|
59 | 59 | if (!reduced && 'IntersectionObserver' in window) { |
|
149 | 149 | }); |
150 | 150 | }); |
151 | 151 |
|
152 | | - /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββ benchmark β */ |
153 | | - /* Recorded runs: 38 tasks x 3 repeats = 114 cells per arm. |
154 | | - `max` is the scale each bar is drawn against; `better` says which |
155 | | - direction is good, so the delta can be coloured honestly. */ |
156 | | - var BENCH = { |
157 | | - noexec: { |
158 | | - bars: [ |
159 | | - { name: 'pass rate', base: 2, bb: 51, max: 100, fmt: function (v) { return v + '%'; } }, |
160 | | - { name: 'rubric score', base: 0.028, bb: 0.662, max: 1, fmt: function (v) { return v.toFixed(3); } } |
161 | | - ], |
162 | | - rows: [ |
163 | | - ['Pass rate', '2%', '51%', '+49 pp', 'good'], |
164 | | - ['Rubric score', '0.028', '0.662', '+0.634', 'good'], |
165 | | - ['Rounds', '2.8', '5.6', '+2.8', 'cost'], |
166 | | - ['biobabel tool calls', '0', '9.2', 'β', 'flat'], |
167 | | - ['Input tokens', '3,404', '222,471', '+219k', 'cost'], |
168 | | - ['Output tokens', '1,089', '1,773', '+684', 'cost'] |
169 | | - ] |
170 | | - }, |
171 | | - exec: { |
172 | | - bars: [ |
173 | | - { name: 'pass rate', base: 64, bb: 84, max: 100, fmt: function (v) { return v + '%'; } }, |
174 | | - { name: 'rubric score', base: 0.840, bb: 0.918, max: 1, fmt: function (v) { return v.toFixed(3); } } |
175 | | - ], |
176 | | - rows: [ |
177 | | - ['Pass rate', '64%', '84%', '+20 pp', 'good'], |
178 | | - ['Rubric score', '0.840', '0.918', '+0.078', 'good'], |
179 | | - ['Rounds to solve', '16.3', '6.7', 'β9.6', 'good'], |
180 | | - ['Blind run_python calls', '14.1', '2.4', 'β11.7', 'good'], |
181 | | - ['biobabel tool calls', '0', '8.2', 'β', 'flat'], |
182 | | - ['Input tokens', '81,885', '304,319', '+272%', 'cost'], |
183 | | - ['Output tokens', '3,225', '1,602', 'β50%', 'good'] |
184 | | - ] |
185 | | - } |
186 | | - }; |
187 | | - |
188 | | - var barsBox = $('#benchBars'); |
189 | | - var tableBody = $('#benchTable tbody'); |
190 | | - |
191 | | - var renderBench = function (mode) { |
192 | | - var data = BENCH[mode]; |
193 | | - if (!data || !barsBox) return; |
194 | | - |
195 | | - barsBox.innerHTML = data.bars.map(function (b) { |
196 | | - return '' + |
197 | | - '<div class="bar__group">' + |
198 | | - '<div class="bar bar--base">' + |
199 | | - '<div class="bar__head">' + |
200 | | - '<span class="bar__arm">baseline Β· ' + b.name + '</span>' + |
201 | | - '<span class="bar__val">' + b.fmt(b.base) + '</span></div>' + |
202 | | - '<div class="bar__track"><div class="bar__fill" data-w="' + |
203 | | - (b.base / b.max * 100) + '"></div></div>' + |
204 | | - '</div>' + |
205 | | - '<div class="bar bar--bb" style="margin-top:1rem">' + |
206 | | - '<div class="bar__head">' + |
207 | | - '<span class="bar__arm">bio-babel Β· ' + b.name + '</span>' + |
208 | | - '<span class="bar__val">' + b.fmt(b.bb) + '</span></div>' + |
209 | | - '<div class="bar__track"><div class="bar__fill" data-w="' + |
210 | | - (b.bb / b.max * 100) + '"></div></div>' + |
211 | | - '</div>' + |
212 | | - '</div>'; |
213 | | - }).join(''); |
214 | | - |
215 | | - requestAnimationFrame(function () { |
216 | | - $$('.bar__fill', barsBox).forEach(function (f) { f.style.width = f.dataset.w + '%'; }); |
217 | | - }); |
218 | | - |
219 | | - tableBody.innerHTML = data.rows.map(function (r) { |
220 | | - var cls = r[4] === 'good' ? 'delta' : r[4] === 'cost' ? 'delta delta--cost' : ''; |
221 | | - return '<tr><td>' + r[0] + '</td><td>' + r[1] + '</td>' + |
222 | | - '<td class="win">' + r[2] + '</td>' + |
223 | | - '<td class="' + cls + '">' + r[3] + '</td></tr>'; |
224 | | - }).join(''); |
225 | | - }; |
226 | | - |
227 | | - $$('.bench__tab').forEach(function (tab) { |
228 | | - tab.addEventListener('click', function () { |
229 | | - var mode = tab.dataset.mode; |
230 | | - $$('.bench__tab').forEach(function (t) { |
231 | | - var on = t === tab; |
232 | | - t.classList.toggle('is-active', on); |
233 | | - t.setAttribute('aria-selected', String(on)); |
234 | | - }); |
235 | | - $$('.bench__note').forEach(function (n) { |
236 | | - n.classList.toggle('is-hidden', n.dataset.note !== mode); |
237 | | - }); |
238 | | - renderBench(mode); |
239 | | - }); |
240 | | - }); |
241 | | - |
242 | | - if (barsBox) { |
243 | | - renderBench('noexec'); |
244 | | - // replay the bar animation the first time the section scrolls into view |
245 | | - if (!reduced && 'IntersectionObserver' in window) { |
246 | | - var benchObs = new IntersectionObserver(function (entries, obs) { |
247 | | - entries.forEach(function (en) { |
248 | | - if (!en.isIntersecting) return; |
249 | | - obs.unobserve(en.target); |
250 | | - $$('.bar__fill', barsBox).forEach(function (f) { |
251 | | - f.style.width = '0'; |
252 | | - requestAnimationFrame(function () { |
253 | | - requestAnimationFrame(function () { f.style.width = f.dataset.w + '%'; }); |
254 | | - }); |
255 | | - }); |
256 | | - }); |
257 | | - }, { threshold: 0.25 }); |
258 | | - benchObs.observe(barsBox); |
259 | | - } |
260 | | - } |
261 | 152 | })(); |
0 commit comments