Feat: Create debug page to show runtime outputs

This commit is contained in:
2025-11-13 16:45:13 -08:00
parent f0a5c91d2b
commit f8928bd9a9

View File

@@ -36,7 +36,7 @@
</span>
</div>
<p class="text-base text-gray-600 max-w-lg mx-auto">
Review exactly what each model produced for every benchmark test.
Review the runtime output of what each model produced for every benchmark test.
</p>
</header>
<div id="results-container" class="flex flex-col gap-6 flex-grow"></div>
@@ -56,8 +56,7 @@
const now=new Date();
stamp.textContent=now.toLocaleDateString('en-US',{month:'short',year:'numeric'});
stamp.dateTime=now.toISOString().split('T')[0];
const esc=s=>s.replace(/[&<>]/g,c=>({ '&':'&amp;','<':'&lt;','>':'&gt;' }[c]));
const load=path=>fetch(path).then(r=>r.ok?r.text():null).catch(()=>null);
const esc=s=>s.replace(/[&<>]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;'})[c]);
const run=async()=>{
const [readme,genTimes]=await Promise.all([
fetch('./README').then(r=>r.text()),
@@ -65,36 +64,33 @@
]);
const models=readme.match(/<!-- MODELS_START -->\n([\s\S]+?)\n<!-- MODELS_END -->/)[1].trim().split('\n');
const tests=[...new Set(Object.values(genTimes).flatMap(o=>Object.keys(o||{})))].sort();
if(!tests.length){
container.innerHTML='<p class="text-center text-sm text-gray-500">No tests available.</p>';
return;
}
for(const model of models){
const sModel=model.replace(/[\/:]/g,'_');
const card=document.createElement('section');
card.className='rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden';
card.innerHTML=`
<div class="bg-gray-50 px-5 py-3 border-b border-gray-200">
<p class="mono text-sm text-gray-700 font-medium">${model}</p>
</div>
<ul class="p-4 space-y-3" id="list-${sModel}"></ul>`;
card.innerHTML=`<div class="bg-gray-50 px-5 py-3 border-b border-gray-200"><p class="mono text-sm text-gray-700 font-medium">${model}</p></div><ul class="p-4 space-y-3" id="list-${sModel}"></ul>`;
container.appendChild(card);
const list=get(`list-${sModel}`);
for(const test of tests){
const li=document.createElement('li');
li.className='list-none';
list.appendChild(li);
const code=await load(`./tests/${test}/outputs/${sModel}.js`);
const body=code?`<pre class="bg-gray-900 text-green-100 text-xs rounded-lg p-4 overflow-x-auto"><code>${esc(code)}</code></pre>`:`<p class="text-sm text-red-500">No generated output found.</p>`;
li.innerHTML=`
<details class="rounded-xl border border-gray-200 bg-white p-4">
<summary class="flex items-center gap-3 text-sm cursor-pointer select-none">
${code?'✅':'⚠️'}
<span class="font-medium text-gray-800">${test}</span>
<span class="mono text-gray-500 ml-auto">${code?'View code':'Missing output'}</span>
</summary>
<div class="mt-3">${body}</div>
</details>`;
let body,status='✅',label='View output';
try{
const [tMod,lMod]=await Promise.all([
import(`./tests/${test}/test.js`),
import(`./tests/${test}/outputs/${sModel}.js`)
]);
if(!lMod?.default) throw new Error('Generated module invalid.');
if(!tMod?.default?.getTestCases) throw new Error('Test case getter missing.');
const result=await lMod.default(...tMod.default.getTestCases());
const str=JSON.stringify(result,null,2);
body=`<pre class="bg-gray-900 text-green-100 text-xs rounded-lg p-4 overflow-x-auto"><code>${esc(str)}</code></pre>`;
}catch(e){
status='❌';
label='View error';
body=`<p class="text-sm text-red-500">${esc(e.message)}</p>`;
}
li.innerHTML=`<details class="rounded-xl border border-gray-200 bg-white p-4"><summary class="flex items-center gap-3 text-sm cursor-pointer select-none">${status} <span class="font-medium text-gray-800">${test}</span><span class="mono text-gray-500 ml-auto">${label}</span></summary><div class="mt-3">${body}</div></details>`;
}
}
};