Update index.html

index.html

@@ -6,6 +6,7 @@
 <title>FINAL Bench — Functional Metacognition Leaderboard</title>
 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
 <style>
 :root{--bg-primary:#0a0e1a;--bg-secondary:#111827;--bg-card:#1a2035;--bg-card-hover:#1f2847;--accent-blue:#3b82f6;--accent-cyan:#06b6d4;--accent-amber:#f59e0b;--accent-red:#ef4444;--accent-green:#10b981;--accent-purple:#8b5cf6;--accent-pink:#ec4899;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--border:#1e293b}
 *{margin:0;padding:0;box-sizing:border-box}
@@ -174,6 +175,7 @@ footer{padding:40px 0;border-top:1px solid var(--border);text-align:center}
 #page-paper section>div[style*="display:flex"]{flex-direction:column}
 #page-paper div[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr}
 #page-paper iframe{height:450px!important}
+#pdf-canvas-wrapper{max-height:500px!important}
 }
 </style>
 </head>
@@ -353,7 +355,7 @@ footer{padding:40px 0;border-top:1px solid var(--border);text-align:center}
       <div style="display:flex;gap:12px;flex-wrap:wrap">
         <a href="FINAL_Bench_Paper_v5_OFFICIAL.pdf" download class="nav-badge article" style="text-decoration:none;cursor:pointer"><span class="nav-badge-icon">⬇️</span> Download PDF</a>
         <a href="FINAL_Bench_Paper_v5_OFFICIAL.pdf" target="_blank" class="nav-badge leaderboard" style="text-decoration:none;cursor:pointer"><span class="nav-badge-icon">👁️</span> Preview PDF</a>
-        <a href="FINAL_Bench_Paper_v5_OFFICIAL.md" target="_blank" class="nav-badge dataset" style="text-decoration:none;cursor:pointer"><span class="nav-badge-icon">📝</span> Markdown</a>
+
       </div>
     </div>
     <div style="flex:0 0 auto;text-align:center">
@@ -368,10 +370,22 @@ footer{padding:40px 0;border-top:1px solid var(--border);text-align:center}
 <!-- PDF Inline Preview -->
 <section style="padding:0 0 48px">
   <div class="section-title">Paper Preview</div>
-  <p class="section-subtitle" style="margin-bottom:20px">Full 12-page paper embedded below. Use controls to navigate pages.</p>
+  <p class="section-subtitle" style="margin-bottom:20px">Full 12-page paper rendered below. Use controls to navigate pages.</p>
   <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden">
-    <iframe src="FINAL_Bench_Paper_v5_OFFICIAL.pdf" style="width:100%;height:700px;border:none;border-radius:16px" loading="lazy"></iframe>
-    <div style="padding:12px 20px;border-top:1px solid var(--border);text-align:center;font-size:.82rem;color:var(--text-muted)">If the preview doesn't load, <a href="FINAL_Bench_Paper_v5_OFFICIAL.pdf" target="_blank" style="color:var(--accent-cyan)">click here to open in a new tab</a>.</div>
+    <!-- PDF Viewer Controls -->
+    <div id="pdf-controls" style="display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--bg-secondary);flex-wrap:wrap">
+      <button onclick="pdfPrevPage()" id="pdf-prev" style="padding:8px 18px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:600;font-size:.85rem;transition:all .2s" onmouseover="this.style.borderColor='rgba(6,182,212,0.5)'" onmouseout="this.style.borderColor='var(--border)'">← Prev</button>
+      <span id="pdf-page-info" style="font-family:'JetBrains Mono',monospace;font-size:.88rem;color:var(--text-secondary);min-width:100px;text-align:center">Loading...</span>
+      <button onclick="pdfNextPage()" id="pdf-next" style="padding:8px 18px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:600;font-size:.85rem;transition:all .2s" onmouseover="this.style.borderColor='rgba(6,182,212,0.5)'" onmouseout="this.style.borderColor='var(--border)'">Next →</button>
+      <button onclick="pdfZoomOut()" style="padding:8px 14px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);border-radius:8px;cursor:pointer;font-size:1rem;transition:all .2s" onmouseover="this.style.borderColor='rgba(6,182,212,0.5)'" onmouseout="this.style.borderColor='var(--border)'">−</button>
+      <span id="pdf-zoom-info" style="font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--text-muted);min-width:50px;text-align:center">100%</span>
+      <button onclick="pdfZoomIn()" style="padding:8px 14px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);border-radius:8px;cursor:pointer;font-size:1rem;transition:all .2s" onmouseover="this.style.borderColor='rgba(6,182,212,0.5)'" onmouseout="this.style.borderColor='var(--border)'">+</button>
+    </div>
+    <!-- PDF Canvas -->
+    <div id="pdf-canvas-wrapper" style="display:flex;justify-content:center;padding:20px;overflow:auto;background:#2a2a2a;max-height:800px">
+      <canvas id="pdf-canvas" style="box-shadow:0 4px 24px rgba(0,0,0,0.5);border-radius:4px"></canvas>
+    </div>
+    <div style="padding:12px 20px;border-top:1px solid var(--border);text-align:center;font-size:.82rem;color:var(--text-muted)">If the viewer doesn't load, <a href="FINAL_Bench_Paper_v5_OFFICIAL.pdf" download style="color:var(--accent-cyan)">download the PDF directly</a> or <a href="FINAL_Bench_Paper_v5_OFFICIAL.pdf" target="_blank" style="color:var(--accent-cyan)">open in new tab</a>.</div>
   </div>
 </section>
 
@@ -545,7 +559,7 @@ const models=[
 ];
 const mean={bl:{score:61.12,pq:.745,ma:.694,er:.302,id:.729,fc:.695},mc:{score:75.17,pq:.753,ma:.730,er:.835,id:.719,fc:.701}};
 
-function switchPage(id,btn){document.querySelectorAll('.main-page').forEach(p=>p.classList.remove('active'));document.querySelectorAll('.main-nav-btn').forEach(b=>b.classList.remove('active'));document.getElementById(id).classList.add('active');btn.classList.add('active');window.scrollTo({top:0,behavior:'smooth'});if(id==='page-about'&&!window._ac){renderAboutCharts();window._ac=true;}if(id==='page-analysis'&&!window._anc){renderAnalysisCharts();window._anc=true;}if(id==='page-safety'&&!window._sc){renderSafetyCharts();window._sc=true;}}
+function switchPage(id,btn){document.querySelectorAll('.main-page').forEach(p=>p.classList.remove('active'));document.querySelectorAll('.main-nav-btn').forEach(b=>b.classList.remove('active'));document.getElementById(id).classList.add('active');btn.classList.add('active');window.scrollTo({top:0,behavior:'smooth'});if(id==='page-about'&&!window._ac){renderAboutCharts();window._ac=true;}if(id==='page-analysis'&&!window._anc){renderAnalysisCharts();window._anc=true;}if(id==='page-safety'&&!window._sc){renderSafetyCharts();window._sc=true;}if(id==='page-paper'&&!window._pc){initPdfViewer();window._pc=true;}}
 function switchTab(t,btn){btn.parentElement.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));btn.classList.add('active');document.querySelectorAll('.tab-content').forEach(c=>c.classList.remove('active'));document.getElementById('tab-'+t).classList.add('active');}
 function sortTable(tid,ci,type){const t=document.getElementById(tid);const tb=t.querySelector('tbody');const rows=Array.from(tb.querySelectorAll('tr:not(.mean-row)'));const mr=tb.querySelector('.mean-row');const th=t.querySelectorAll('thead th')[ci];const ath=t.querySelectorAll('thead th');const wa=th.classList.contains('sort-active');const ws=th.classList.contains('sort-asc');ath.forEach(x=>{x.classList.remove('sort-active','sort-asc');});th.classList.add('sort-active');const asc=wa&&!ws;if(asc)th.classList.add('sort-asc');rows.sort((a,b)=>{let va=a.cells[ci].textContent.trim();let vb=b.cells[ci].textContent.trim();if(type==='num'){va=parseFloat(va.replace('+',''))||0;vb=parseFloat(vb.replace('+',''))||0;return asc?va-vb:vb-va;}return asc?va.localeCompare(vb):vb.localeCompare(va);});rows.forEach(r=>tb.appendChild(r));if(mr)tb.appendChild(mr);}
 
@@ -568,6 +582,46 @@ function renderAnalysisCharts(){
 
 function renderSafetyCharts(){const s=[...models].sort((a,b)=>(b.bl.ma-b.bl.er)-(a.bl.ma-a.bl.er));new Chart(document.getElementById('chartSafetyGap'),{type:'bar',data:{labels:s.map(m=>m.name),datasets:[{label:'MA (Declarative)',data:s.map(m=>m.bl.ma),backgroundColor:'rgba(245,158,11,0.7)',borderRadius:4},{label:'ER (Procedural)',data:s.map(m=>m.bl.er),backgroundColor:'rgba(239,68,68,0.7)',borderRadius:4}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{labels:{color:'#94a3b8'}},tooltip:{callbacks:{afterBody:function(c){const i=c[0].dataIndex;return 'Gap: '+(s[i].bl.ma-s[i].bl.er).toFixed(3);}}}},scales:{x:{ticks:{color:'#94a3b8',font:{size:11}},grid:{display:false}},y:{min:0,max:1,ticks:{color:'#64748b'},grid:{color:'rgba(255,255,255,0.05)'}}}}});}
 
+// ===== PDF.js Viewer =====
+let pdfDoc=null,pdfPageNum=1,pdfScale=1.5,pdfRendering=false,pdfPendingPage=null;
+function pdfRenderPage(num){
+  pdfRendering=true;
+  pdfDoc.getPage(num).then(function(page){
+    const viewport=page.getViewport({scale:pdfScale});
+    const canvas=document.getElementById('pdf-canvas');
+    const ctx=canvas.getContext('2d');
+    canvas.height=viewport.height;canvas.width=viewport.width;
+    page.render({canvasContext:ctx,viewport:viewport}).promise.then(function(){
+      pdfRendering=false;
+      if(pdfPendingPage!==null){pdfRenderPage(pdfPendingPage);pdfPendingPage=null;}
+    });
+  });
+  document.getElementById('pdf-page-info').textContent='Page '+num+' / '+pdfDoc.numPages;
+  document.getElementById('pdf-prev').disabled=(num<=1);
+  document.getElementById('pdf-next').disabled=(num>=pdfDoc.numPages);
+}
+function pdfQueuePage(num){if(pdfRendering){pdfPendingPage=num;}else{pdfRenderPage(num);}}
+function pdfPrevPage(){if(pdfPageNum<=1)return;pdfPageNum--;pdfQueuePage(pdfPageNum);}
+function pdfNextPage(){if(!pdfDoc||pdfPageNum>=pdfDoc.numPages)return;pdfPageNum++;pdfQueuePage(pdfPageNum);}
+function pdfZoomIn(){pdfScale=Math.min(pdfScale+0.25,3.0);document.getElementById('pdf-zoom-info').textContent=Math.round(pdfScale/1.5*100)+'%';if(pdfDoc)pdfQueuePage(pdfPageNum);}
+function pdfZoomOut(){pdfScale=Math.max(pdfScale-0.25,0.5);document.getElementById('pdf-zoom-info').textContent=Math.round(pdfScale/1.5*100)+'%';if(pdfDoc)pdfQueuePage(pdfPageNum);}
+function initPdfViewer(){
+  if(typeof pdfjsLib==='undefined'){
+    document.getElementById('pdf-page-info').textContent='PDF viewer unavailable';
+    return;
+  }
+  pdfjsLib.GlobalWorkerOptions.workerSrc='https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+  pdfjsLib.getDocument('FINAL_Bench_Paper_v5_OFFICIAL.pdf').promise.then(function(doc){
+    pdfDoc=doc;
+    document.getElementById('pdf-page-info').textContent='Page 1 / '+doc.numPages;
+    pdfRenderPage(1);
+  }).catch(function(err){
+    console.error('PDF load error:',err);
+    document.getElementById('pdf-page-info').textContent='Failed to load PDF';
+    document.getElementById('pdf-canvas-wrapper').innerHTML='<div style="padding:40px;text-align:center;color:var(--text-muted)"><div style="font-size:2rem;margin-bottom:12px">📄</div><div>PDF could not be loaded in this environment.</div><div style="margin-top:12px"><a href="FINAL_Bench_Paper_v5_OFFICIAL.pdf" download style="color:var(--accent-cyan);font-weight:600">Download PDF</a></div></div>';
+  });
+}
+
 // Initialize
 renderBaseline();renderMetacog();renderDelta();renderGapViz();renderLeaderboardChart();
 </script>