Spaces:

interactiveReasoning
/

interactive_explanation_experiment

Sleeping

File size: 12,960 Bytes

17892ce

<!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>