Add screenshot PDF export button to frontend/streamlit_app.py stats view

frontend/streamlit_app.py

@@ -2041,6 +2041,77 @@ elif len(st.session_state.streams) > 1:
     st.divider()
     st.info("Add video IDs to your extra stream slots and click ▶ Start to enable multi-stream comparison.")
 
+# ── SCREENSHOT / PDF EXPORT ───────────────────────────────────
+st.divider()
+st.markdown(
+    '<div class="sec-hdr"><span class="sec-ttl">Export</span><span class="sec-pill">Stats Page</span></div>',
+    unsafe_allow_html=True
+)
+
+import streamlit.components.v1 as _components
+_components.html("""
+<div style="text-align:center; padding: 8px 0;">
+  <button id="screenshotBtn" style="
+    background: linear-gradient(135deg, #7c3aed, #4f46e5);
+    color: #fff; border: none; border-radius: 10px;
+    padding: 10px 28px; font-size: 14px; font-weight: 600;
+    font-family: 'Space Grotesk', sans-serif; cursor: pointer;
+    box-shadow: 0 4px 16px rgba(124,58,237,0.4); transition: transform 0.2s;"
+  onmouseover="this.style.transform='translateY(-2px)'"
+  onmouseout="this.style.transform='translateY(0)'"
+  onclick="captureAndDownload()">
+    &#128247; Download Stats as PDF
+  </button>
+  <div id="statusMsg" style="margin-top:8px; font-size:12px; color:#94a3b8;"></div>
+</div>
+<script>
+async function captureAndDownload() {
+  const btn = document.getElementById('screenshotBtn');
+  const msg = document.getElementById('statusMsg');
+  btn.disabled = true; btn.textContent = 'Capturing...';
+  msg.textContent = 'Please wait...';
+  try {
+    const target = window.parent.document.querySelector('[data-testid="stMain"]')
+                || window.parent.document.querySelector('.main')
+                || window.parent.document.body;
+    const canvas = await window.parent.html2canvas(target, {
+      scale: 1.5, useCORS: true, allowTaint: true,
+      backgroundColor: '#07070f', logging: false,
+      windowWidth: target.scrollWidth, windowHeight: target.scrollHeight,
+      scrollX: 0, scrollY: 0,
+    });
+    const imgData = canvas.toDataURL('image/png', 0.95);
+    const { jsPDF } = window.parent.jspdf;
+    const pdf = new jsPDF({
+      orientation: canvas.width > canvas.height ? 'l' : 'p',
+      unit: 'px', format: [canvas.width, canvas.height], compress: true,
+    });
+    pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
+    const ts = new Date().toISOString().slice(0,16).replace('T','_').replace(':','-');
+    pdf.save('livepulse_stats_' + ts + '.pdf');
+    btn.textContent = 'Download Stats as PDF'; btn.disabled = false;
+    msg.textContent = 'Done! Check your downloads.';
+    setTimeout(() => { msg.textContent = ''; }, 4000);
+  } catch(e) {
+    btn.textContent = 'Download Stats as PDF'; btn.disabled = false;
+    msg.textContent = 'Error: ' + e.message;
+  }
+}
+function loadScript(src, globalName) {
+  return new Promise((resolve) => {
+    if (window.parent[globalName]) { resolve(); return; }
+    const s = window.parent.document.createElement('script');
+    s.src = src; s.onload = resolve;
+    window.parent.document.head.appendChild(s);
+  });
+}
+(async () => {
+  await loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js', 'html2canvas');
+  await loadScript('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js', 'jspdf');
+})();
+</script>
+""", height=90)
+
 # ── AUTO REFRESH ──────────────────────────────────────────────
 if auto_refresh:
     time.sleep(refresh_rate)