Hugging Face's logo

Spaces:
interactiveReasoning
/
interactive_explanation_experiment
Sleeping

App Files Community
interactive_explanation_experiment / evaluation /eval_interfaces /reg_cot_eval_interface.html
interactiveReasoning's picture
interactiveReasoning
Upload 2025 files
17892ce verified
raw
history blame contribute delete
13 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Explanation Evaluation</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
<style>
/* ──────────── layout & theme ──────────── */
html, body{ margin: 0;
padding: 0;
background: #fff; /* Make background white */
height: 100vh;
overflow: hidden;
}
.container{
height: 100vh; /* Full viewport height */
background: #fff; /* Container background white */
padding: 1rem; /* Keep internal padding */
box-sizing: border-box;
width: 100%; /* compensate width after scaling */
margin: 0; /* Remove margin */
border-radius: 0; /* Remove rounded corners */
box-shadow: none; /* Remove shadow */
display: flex;
flex-direction: column;}
header{text-align:center;border-bottom:1px solid #dee2e6}
header h2{margin:0;font-size:1.5rem;color:#343a40; margin-bottom:1rem}
/* progress bar */
#progress-container{margin:.5rem 0;text-align:center;margin-top:5rem}
progress{width:100%;height:20px;border-radius:10px;appearance:none}
progress::-webkit-progress-bar{background:#f1f1f1}
progress::-webkit-progress-value{background:#28a745;border-radius:10px}
#progress-text{margin-top:.5rem;font-size:1.1rem;color:#495057}
/* explanation frame */
/* explanation frame */
.explain-row{
display:flex;
gap:16px; /* space between iframe and button column */
align-items:flex-start;
}
iframe{
width: 85%;
height: 89vh; /* Take most of the height */
border: 2px solid #ced4da;
border-radius: 4px;
background: #fff;
transform: scale(1, 1);
transform-origin:top right;
}
/* controls */
.controls{
flex:1 1 0;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
.controls p{font-size:1.2rem;margin: 0.5rem 2rem 0.5rem 0;color:#343a40}
button{padding:.8rem 1.5rem;margin:.5rem;font-size:1rem;border:none;border-radius:4px;
cursor:pointer;transition:opacity .3s;background:#6c757d;color:#fff}
button:hover{opacity:.9}
/* follow-up (wrong-step) */
#wrong-box{display:none;margin:1rem auto;text-align:center;flex-direction:column;align-items:center}
#wrong-step{width:90px;padding:.45rem;text-align:center;font-size:1rem;margin-top:.4rem}
#confirm-wrong{margin-top:.8rem}
/* footer buttons */
#download-btn{display:block;margin:1rem auto;visibility:hidden}
#download-btn{background:#007bff;display:none}
#restart-btn{display:block;margin:1rem auto} /* optional offline CSV */
#restart-btn{background:#dc3545;display:none}
/* results + feedback */
#accuracy{margin-top:2rem;padding:1rem;border:1px solid #ced4da;border-radius:4px;
background:#f8f9fa;color:#495057;font-size:1.1rem;line-height:1.6;text-align:center}
#accuracy h2{margin:0 0 1rem}
</style>
</head>
<body>
<div class="container">
<header><h2>Traditional Chain-of-Thought Explanation Experiment</h2></header>
<!-- <div id="progress-container">
<progress id="progress-bar" value="0" max="10"></progress>
<p id="progress-text">Question 0 of 10 (Remaining: 10)</p>
</div> -->
<div class="explain-row">
<iframe id="explanation-frame" src=""></iframe>
<!-- MAIN CONTROLS (now vertical on the right) -->
<div class="controls" style="display:none">
<p id= "instruction"> you <strong>MUST</strong> do the experiment in full screen mode by clicking the button below 👇 </p>
<button id="full_screen" >Enter Full Screen</button>
<p>Is the final answer correct or incorrect?</p>
<button id="btn-correct">Correct</button>
<button id="btn-wrong">Incorrect</button>
<!-- ══════ FOLLOW-UP WHEN INCORRECT ══════ -->
<div id="wrong-box">
<span>You think the final answer is incorrect! In which step do you think the model was wrong? Step (1 – <span id="max-step">1</span>)</span>
<input id="wrong-step" type="number" min="1" step="1">
<button id="confirm-wrong">Confirm</button>
</div>
<div id="progress-container">
<progress id="progress-bar" value="0" max="10"></progress>
<p id="progress-text">Question 0 of 10 (Remaining: 10)</p>
</div>
</div>
</div>
<button id="download-btn">Download Results</button>
<button id="restart-btn">Submit</button>
<div id="accuracy"></div>
</div>
<!-- ──────────── SCRIPT ──────────── -->
<script>
document.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById('full_screen');
const span = document.getElementById('instruction');
function isFullscreen() {
return document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement;
}
// Show button only if NOT in fullscreen at start
if (!isFullscreen()) {
btn.style.visibility = 'visible';
span.style.visibility = "visible";
}
btn.addEventListener('click', () => {
if (!isFullscreen()) {
document.documentElement.requestFullscreen?.() ||
document.documentElement.webkitRequestFullscreen?.() ||
document.documentElement.mozRequestFullScreen?.() ||
document.documentElement.msRequestFullscreen?.();
}
});
function toggleButton() {
if (isFullscreen()) {
btn.style.visibility = 'hidden'; // Hide in fullscreen
span.style.visibility = "hidden";
} else {
btn.style.visibility = 'visible'; // Show when not fullscreen
span.style.visibility = "visible";
}
}
document.addEventListener('fullscreenchange', toggleButton);
document.addEventListener('webkitfullscreenchange', toggleButton);
document.addEventListener('mozfullscreenchange', toggleButton);
document.addEventListener('MSFullscreenChange', toggleButton);
});
/* utilities */
const shuffle=a=>{for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];}return a;}
const nowISO=()=>new Date().toISOString();
/* session vars */
let userName="anonymous"; function setUserName(n){userName=n;}
const sessionId=crypto.randomUUID();
const base ="interactive-llm-xai/evaluation/eval_interfaces/traditional_cot_explanations/";
const files = [
// 1 “right” explanation
`${base}traditional_cot_right_NA_41.html`,
`${base}traditional_cot_wrong_CA_46.html`,
`${base}traditional_cot_wrong_CO_34.html`,
`${base}traditional_cot_wrong_CS_32.html`,
`${base}traditional_cot_wrong_CV_36.html`,
`${base}traditional_cot_wrong_FC_26.html`,
`${base}traditional_cot_wrong_HA_26.html`,
`${base}traditional_cot_wrong_MS_43.html`,
`${base}traditional_cot_wrong_OP_31.html`,
`${base}traditional_cot_wrong_UC_34.html`
];
const total=files.length;
/* state */
let idx=0,startTime="",firstClick="";
let clickCounts={play:0,stop:0,next:0,prev:0};
const samples=[];
let currentMaxStep=1;
/* DOM */
const frame=document.getElementById('explanation-frame');
const controls=document.querySelector('.controls');
const downloadBtn=document.getElementById('download-btn');
const restartBtn=document.getElementById('restart-btn');
const wrongBox=document.getElementById('wrong-box');
const wrongInput=document.getElementById('wrong-step');
const maxStepSpan=document.getElementById('max-step');
const accDiv=document.getElementById('accuracy');
/* progress */
function updateProgress(){
document.getElementById('progress-bar').value=idx;
document.getElementById('progress-text').textContent=
idx<total?`Question ${idx+1} of ${total} (Remaining: ${total-idx})`
:'All questions reviewed.';
}
/* telemetry from explanation page */
window.addEventListener('message',ev=>{
if(!ev.data||ev.data.type!=='xai-click')return;
clickCounts[ev.data.key]=(clickCounts[ev.data.key]||0)+1;
if(!firstClick)firstClick=nowISO();
});
/* navigation */
function loadNext(){
if(idx>=total){renderResults();return;}
updateProgress();
frame.src=files[idx];
controls.style.display='block';downloadBtn.style.display='block';
wrongBox.style.display='none';wrongInput.value='';
startTime=Date.now();firstClick=null;clickCounts={play:0,stop:0,next:0,prev:0};
}
frame.addEventListener('load',()=>{
const hide=frame.src.includes('instructions.html');
controls.style.display=hide?'none':'block';
downloadBtn.style.display=hide?'none':'black';
restartBtn.style.display='none';
if(!hide){
currentMaxStep=10;
wrongInput.min=1;wrongInput.max=currentMaxStep;maxStepSpan.textContent=currentMaxStep;
}
});
/* answer flow */
document.getElementById('btn-correct').onclick=()=>saveAnswer('correct',0);
document.getElementById('btn-wrong').onclick=()=>{
wrongBox.style.display='flex';wrongInput.value='';wrongInput.focus();
};
document.getElementById('confirm-wrong').onclick=()=>{
const n=parseInt(wrongInput.value,10);
if(Number.isNaN(n)||n<1||n>currentMaxStep){
alert(`Enter a valid step number (1 – ${currentMaxStep})`);wrongInput.focus();return;
}
saveAnswer('incorrect',n);wrongBox.style.display='none';
};
function saveAnswer(ans,userInputWrongStep){
const elapsed=(Date.now()-startTime)/1000;
const ActualWrongStep = parseInt(frame.contentDocument.querySelector('.wrong-step')?.textContent.trim() ?? '', 10);
samples.push({
file:files[idx],
id:files[idx].match(/([^/_]+_[^/_]+_\d+)\.html$/)[1],
label:files[idx].includes('right')?'correct':'wrong',
humanAnswer:ans,
actualWrongstep: ActualWrongStep,
userInputWrongStep,
elapsedSeconds:+elapsed.toFixed(3),
clickCounts,
// firstActionAt:firstClick,
// answeredAt:nowISO()
});
idx++;loadNext();
}
/* results + feedback */
function renderResults(){
/* metrics */
const correctItems=samples.filter(s=>s.label==='correct');
const incorrectItems=samples.filter(s=>s.label==='wrong');
const correctHits=samples.filter(s=>s.label==='correct'&&s.humanAnswer==='correct').length;
const incorrectHits=samples.filter(s=>s.label==='wrong'&&s.humanAnswer==='incorrect').length;
const overallCorrect=correctHits+incorrectHits;
const overallAcc=((overallCorrect/total)*100).toFixed(2);
const correctAcc =correctItems.length?((correctHits /correctItems.length )*100).toFixed(2):'0.00';
const incorrectAcc=incorrectItems.length?((incorrectHits/incorrectItems.length)*100).toFixed(2):'0.00';
const avgTC=(correctItems .reduce((a,s)=>a+s.elapsedSeconds,0)/(correctItems.length ||1)).toFixed(2);
const avgTI=(incorrectItems.reduce((a,s)=>a+s.elapsedSeconds,0)/(incorrectItems.length||1)).toFixed(2);
/* hide UI parts */
controls.style.display='none';downloadBtn.style.display='none';
document.getElementById('progress-container').style.display='none';
frame.style.display='none';
/* results + feedback UI */
accDiv.innerHTML=`
<h2>Results</h2>
<p><strong>Overall Accuracy:</strong> ${overallCorrect}/${total} (${overallAcc}%)</p>
<p><strong>Correct-Item Accuracy:</strong> ${correctAcc}%</p>
<p><strong>Incorrect-Item Accuracy:</strong> ${incorrectAcc}%</p>
<p><strong>Avg Time (Correct):</strong> ${avgTC} s</p>
<p><strong>Avg Time (Incorrect):</strong> ${avgTI} s</p>
<textarea id="feedback-box" placeholder="Any comments or suggestions?"></textarea>
`;
restartBtn.style.display='block';
/* send + restart */
restartBtn.onclick=()=>{
const subjective_feedback=document.getElementById('feedback-box').value.trim();
fetch('/save-stats', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
sessionId,
userName,
overallAccuracy: +overallAcc,
correctItemAccuracy: correctAcc,
incorrectItemAccuracy: incorrectAcc,
avgTimeCorrect: avgTC,
avgTimeIncorrect: avgTI,
samples,
subjective_feedback
})
}).then(response => {
if (response.ok) {
window.location.href = 'interactive-llm-xai/evaluation/eval_interfaces/thank_you_cot.html';
} else {
alert('Failed to save stats. Please try again.');
}
});
};
}
/* offline CSV (optional) */
downloadBtn.onclick=()=>{
const hdr=['file','label','humanAnswer','wrongStep','time','play','stop','next','prev'];
const rows=[hdr,...samples.map(s=>[
s.file,s.label,s.humanAnswer,s.wrongStep??'',s.elapsedSeconds,
s.clickCounts.play,s.clickCounts.stop,s.clickCounts.next,s.clickCounts.prev
])];
const csv=new Blob([rows.map(r=>r.join(',')).join('\n')],{type:'text/csv'});
const url=URL.createObjectURL(csv);
const a=document.createElement('a');a.href=url;a.download='results.csv';a.click();
URL.revokeObjectURL(url);
};
/* kick-off */
updateProgress();
frame.src="interactive-llm-xai/evaluation/eval_interfaces/instructions.html";
</script>
</body>
</html>