| 'use strict'; |
| const CONFIGS=['Original','STEER-ACT','STEER-ASM','STEER-COMPLIANCE','STEER-JSON']; |
| const MODELS={llama2:'Llama-2-7B-Chat',llama3:'Llama-3-8B-Instruct',gemma:'Gemma-7B-it'}; |
| const REGIMES={benchmark:'Benchmark-only',cop:'CoP',pair:'PAIR',tap:'TAP'}; |
| const mainResults={benchmark:{llama2:[0,16,13,18,14],llama3:[4,25,18,36,22],gemma:[4,19,17,21,15]},cop:{llama2:[75,92,84,97,89],llama3:[73,90,88,93,86],gemma:[71,93,91,99,91]},pair:{llama2:[11,25,22,27,19],llama3:[42,66,51,72,47],gemma:[46,72,63,77,55]},tap:{llama2:[16,30,26,33,28],llama3:[50,70,60,80,56],gemma:[53,85,72,84,65]}}; |
| const resampledResults={benchmark:{llama2:[[0,0],[16.8,3.8],[12.8,3.2],[16.4,2.6],[14.4,3.4]],llama3:[[5.4,2.6],[24.4,2.6],[18,2.5],[34.4,2.1],[21.2,2.2]],gemma:[[4,3.2],[19.4,3],[17.8,2.7],[19.8,3.1],[13.4,2.1]]},cop:{llama2:[[75,2.5],[93.4,2.5],[87.4,1.8],[96,.7],[89.2,1.6]],llama3:[[72.8,3.2],[90.2,1.1],[90.8,2.8],[85,3.9],[82.8,3.6]],gemma:[[72.8,2],[95.6,.9],[93,1.7],[95.4,.9],[90.6,2.3]]},pair:{llama2:[[12,1.4],[25.4,3.9],[23.2,2.5],[26.2,2.2],[19.8,3.3]],llama3:[[41.8,3.2],[66.6,3],[50.6,2.9],[71.2,2.8],[49.2,1.5]],gemma:[[46,3.5],[71.6,3.4],[63.4,2.3],[78.2,2.4],[55.8,2.8]]},tap:{llama2:[[17.6,2.1],[28.2,2],[25.6,2.9],[32.4,3.6],[26.4,3.2]],llama3:[[49,2.3],[70.4,2.9],[61.2,2.4],[78.8,2.5],[57,1.7]],gemma:[[54.4,3.2],[85.2,3.8],[70,.7],[84,2.3],[64.2,2.2]]}}; |
| const modelSelect=document.getElementById('model-select'),regimeSelect=document.getElementById('regime-select'),sampleSelect=document.getElementById('sample-select'); |
| function updateResults(){ |
| const model=modelSelect.value,regime=regimeSelect.value,repeated=sampleSelect.value==='resampled'; |
| const vals=repeated?resampledResults[regime][model]:mainResults[regime][model].map(v=>[v,null]); |
| const classes=['baseline','truth','reason','compliance','json']; |
| const format=v=>repeated?v.toFixed(1):String(v); |
| const display=([mean,sd])=>repeated?`${mean.toFixed(1)} ± ${sd.toFixed(1)}%`:`${mean}%`; |
| document.getElementById('bar-chart').innerHTML=vals.map((v,i)=>`<div class="bar-row ${classes[i]}"><span class="bar-label">${CONFIGS[i]}</span><div class="bar-track"><div class="bar-fill" style="width:${v[0]}%"></div></div><span class="bar-value">${display(v)}</span></div>`).join(''); |
| document.getElementById('bar-chart').setAttribute('aria-label',`${MODELS[model]}, ${REGIMES[regime]}, ${repeated?'five-resample means and standard deviations':'main results'}: ${vals.map((v,i)=>CONFIGS[i]+' '+display(v)).join('; ')}.`); |
| document.getElementById('data-caption').textContent=`${MODELS[model]} · ${REGIMES[regime]} · ${repeated?'Mean ± sample SD over five resamples':'100 HarmBench prompts'}`; |
| document.getElementById('data-table').innerHTML=vals.map((v,i)=>`<tr><th scope="row">${CONFIGS[i]}</th><td>${display(v)}</td><td>${i?'+'+format(Number((v[0]-vals[0][0]).toFixed(1)))+' percentage points':'Baseline'}</td></tr>`).join(''); |
| const max=Math.max(...vals.slice(1).map(v=>v[0])),best=vals.findIndex((v,i)=>i>0&&v[0]===max),delta=Number((max-vals[0][0]).toFixed(1)); |
| document.getElementById('result-summary').innerHTML=`${CONFIGS[best]} raises ${repeated?'mean ':''}ASR from <strong>${format(vals[0][0])}% to ${format(max)}%</strong> in this setting—a ${format(delta)} percentage-point increase.`; |
| document.getElementById('protocol-note').textContent=repeated?'Source: Appendix R, Table 18. Five independently sampled sets of 100 harmful HarmBench prompts. Bar lengths show means; labels report mean ± sample SD, not confidence intervals.':'Source: Appendix D, Table 5 (full ASR values for Figure 2). One evaluation sample of 100 harmful HarmBench prompts. Benchmark-only uses direct requests; CoP, PAIR, and TAP use adaptive black-box attacks.'; |
| } |
| [modelSelect,regimeSelect,sampleSelect].forEach(s=>s.addEventListener('change',updateResults));updateResults(); |
| const dialog=document.getElementById('figure-dialog'),dialogImage=document.getElementById('dialog-image'); |
| document.querySelectorAll('[data-zoom]').forEach(button=>button.addEventListener('click',()=>{dialogImage.src=button.dataset.zoom;dialogImage.alt=button.querySelector('img').alt;document.getElementById('dialog-caption').textContent=button.dataset.caption;dialog.showModal();})); |
| document.getElementById('close-dialog').addEventListener('click',()=>dialog.close()); |
| dialog.addEventListener('click',event=>{if(event.target===dialog){const r=dialog.getBoundingClientRect();if(event.clientX<r.left||event.clientX>r.right||event.clientY<r.top||event.clientY>r.bottom)dialog.close();}}); |
| document.getElementById('copy-citation').addEventListener('click',async()=>{const button=document.getElementById('copy-citation'),status=document.getElementById('copy-status');try{const text=document.getElementById('bibtex').textContent;if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(text);}else{const field=document.createElement('textarea');field.value=text;field.style.position='fixed';field.style.opacity='0';document.body.appendChild(field);field.select();const copied=document.execCommand('copy');field.remove();if(!copied)throw new Error('Copy unavailable');}button.textContent='Copied ✓';status.textContent='BibTeX copied to clipboard.';setTimeout(()=>{button.textContent='Copy BibTeX';},2200);}catch{status.textContent='Clipboard access is unavailable. Select the citation above or download the BibTeX file.';}}); |
|
|
