Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
| import { spawn } from 'node:child_process'; | |
| import { setTimeout as delay } from 'node:timers/promises'; | |
| import { chromium } from 'playwright'; | |
| import { resolve } from 'node:path'; | |
| import { promises as fs } from 'node:fs'; | |
| import process from 'node:process'; | |
| async function run(command, args = [], options = {}) { | |
| return new Promise((resolvePromise, reject) => { | |
| const child = spawn(command, args, { stdio: 'inherit', shell: false, ...options }); | |
| child.on('error', reject); | |
| child.on('exit', (code) => { | |
| if (code === 0) resolvePromise(undefined); | |
| else reject(new Error(`${command} ${args.join(' ')} exited with code ${code}`)); | |
| }); | |
| }); | |
| } | |
| async function waitForServer(url, timeoutMs = 60000) { | |
| const start = Date.now(); | |
| while (Date.now() - start < timeoutMs) { | |
| try { | |
| const res = await fetch(url); | |
| if (res.ok) return; | |
| } catch { } | |
| await delay(500); | |
| } | |
| throw new Error(`Server did not start in time: ${url}`); | |
| } | |
| function parseArgs(argv) { | |
| const out = {}; | |
| for (const arg of argv.slice(2)) { | |
| if (!arg.startsWith('--')) continue; | |
| const [k, v] = arg.replace(/^--/, '').split('='); | |
| out[k] = v === undefined ? true : v; | |
| } | |
| return out; | |
| } | |
| function slugify(text) { | |
| return String(text || '') | |
| .normalize('NFKD') | |
| .replace(/\p{Diacritic}+/gu, '') | |
| .toLowerCase() | |
| .replace(/[^a-z0-9]+/g, '-') | |
| .replace(/^-+|-+$/g, '') | |
| .slice(0, 120) || 'article'; | |
| } | |
| function parseMargin(margin) { | |
| if (!margin) return { top: '12mm', right: '12mm', bottom: '16mm', left: '12mm' }; | |
| const parts = String(margin).split(',').map(s => s.trim()).filter(Boolean); | |
| if (parts.length === 1) { | |
| return { top: parts[0], right: parts[0], bottom: parts[0], left: parts[0] }; | |
| } | |
| if (parts.length === 2) { | |
| return { top: parts[0], right: parts[1], bottom: parts[0], left: parts[1] }; | |
| } | |
| if (parts.length === 3) { | |
| return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[1] }; | |
| } | |
| return { top: parts[0] || '12mm', right: parts[1] || '12mm', bottom: parts[2] || '16mm', left: parts[3] || '12mm' }; | |
| } | |
| function cssLengthToMm(val) { | |
| if (!val) return 0; | |
| const s = String(val).trim(); | |
| if (/mm$/i.test(s)) return parseFloat(s); | |
| if (/cm$/i.test(s)) return parseFloat(s) * 10; | |
| if (/in$/i.test(s)) return parseFloat(s) * 25.4; | |
| if (/px$/i.test(s)) return (parseFloat(s) / 96) * 25.4; // 96 CSS px per inch | |
| const num = parseFloat(s); | |
| return Number.isFinite(num) ? num : 0; // assume mm if unitless | |
| } | |
| function getFormatSizeMm(format) { | |
| const f = String(format || 'A4').toLowerCase(); | |
| switch (f) { | |
| case 'letter': return { w: 215.9, h: 279.4 }; | |
| case 'legal': return { w: 215.9, h: 355.6 }; | |
| case 'a3': return { w: 297, h: 420 }; | |
| case 'tabloid': return { w: 279.4, h: 431.8 }; | |
| case 'a4': | |
| default: return { w: 210, h: 297 }; | |
| } | |
| } | |
| async function waitForImages(page, timeoutMs = 15000) { | |
| await page.evaluate(async (timeout) => { | |
| const deadline = Date.now() + timeout; | |
| const imgs = Array.from(document.images || []); | |
| const unloaded = imgs.filter(img => !img.complete || (img.naturalWidth === 0)); | |
| await Promise.race([ | |
| Promise.all(unloaded.map(img => new Promise(res => { | |
| if (img.complete && img.naturalWidth !== 0) return res(undefined); | |
| img.addEventListener('load', () => res(undefined), { once: true }); | |
| img.addEventListener('error', () => res(undefined), { once: true }); | |
| }))), | |
| new Promise(res => setTimeout(res, Math.max(0, deadline - Date.now()))) | |
| ]); | |
| }, timeoutMs); | |
| } | |
| async function waitForPlotly(page, timeoutMs = 20000) { | |
| try { | |
| await page.evaluate(async (timeout) => { | |
| const start = Date.now(); | |
| const hasPlots = () => Array.from(document.querySelectorAll('.js-plotly-plot')).length > 0; | |
| // Wait until plots exist or timeout | |
| while (!hasPlots() && (Date.now() - start) < timeout) { | |
| await new Promise(r => setTimeout(r, 200)); | |
| } | |
| const deadline = start + timeout; | |
| // Then wait until each plot contains the main svg | |
| const allReady = () => Array.from(document.querySelectorAll('.js-plotly-plot')).every(el => el.querySelector('svg.main-svg')); | |
| while (!allReady() && Date.now() < deadline) { | |
| await new Promise(r => setTimeout(r, 200)); | |
| } | |
| console.log('Plotly ready or timeout'); | |
| }, timeoutMs); | |
| } catch (e) { | |
| console.warn('waitForPlotly timeout or error:', e.message); | |
| } | |
| } | |
| async function waitForD3(page, timeoutMs = 20000) { | |
| try { | |
| await page.evaluate(async (timeout) => { | |
| const start = Date.now(); | |
| const isReady = () => { | |
| // Prioritize hero banner if present (generic container) | |
| const hero = document.querySelector('.hero-banner'); | |
| if (hero) { | |
| return !!hero.querySelector('svg circle, svg path, svg rect, svg g'); | |
| } | |
| // Else require all D3 containers on page to have shapes | |
| const containers = [ | |
| ...Array.from(document.querySelectorAll('.d3-line')), | |
| ...Array.from(document.querySelectorAll('.d3-bar')) | |
| ]; | |
| if (!containers.length) return true; | |
| return containers.every(c => c.querySelector('svg circle, svg path, svg rect, svg g')); | |
| }; | |
| while (!isReady() && (Date.now() - start) < timeout) { | |
| await new Promise(r => setTimeout(r, 200)); | |
| } | |
| console.log('D3 ready or timeout'); | |
| }, timeoutMs); | |
| } catch (e) { | |
| console.warn('waitForD3 timeout or error:', e.message); | |
| } | |
| } | |
| async function waitForStableLayout(page, timeoutMs = 5000) { | |
| const start = Date.now(); | |
| let last = await page.evaluate(() => document.scrollingElement ? document.scrollingElement.scrollHeight : document.body.scrollHeight); | |
| let stableCount = 0; | |
| while ((Date.now() - start) < timeoutMs && stableCount < 3) { | |
| await page.waitForTimeout(250); | |
| const now = await page.evaluate(() => document.scrollingElement ? document.scrollingElement.scrollHeight : document.body.scrollHeight); | |
| if (now === last) stableCount += 1; else { stableCount = 0; last = now; } | |
| } | |
| } | |
| /** | |
| * Apply responsive SVG fixes in page context. | |
| * Factored out to avoid duplication. | |
| */ | |
| async function applyResponsiveSvgFixes(page) { | |
| await page.evaluate(() => { | |
| function isSmallSvg(svg) { | |
| try { | |
| const vb = svg?.viewBox?.baseVal; | |
| if (vb && vb.width <= 50 && vb.height <= 50) return true; | |
| const r = svg.getBoundingClientRect?.(); | |
| if (r && r.width <= 50 && r.height <= 50) return true; | |
| } catch { } | |
| return false; | |
| } | |
| function lockSmallSvgSize(svg) { | |
| try { | |
| const r = svg.getBoundingClientRect?.(); | |
| if (r?.width) svg.style.setProperty('width', Math.round(r.width) + 'px', 'important'); | |
| if (r?.height) svg.style.setProperty('height', Math.round(r.height) + 'px', 'important'); | |
| svg.style.setProperty('max-width', 'none', 'important'); | |
| } catch { } | |
| } | |
| function fixSvg(svg) { | |
| if (!svg) return; | |
| try { if (svg.closest?.('.hero-banner')) return; } catch { } | |
| if (isSmallSvg(svg)) { lockSmallSvgSize(svg); return; } | |
| try { svg.removeAttribute('width'); } catch { } | |
| try { svg.removeAttribute('height'); } catch { } | |
| svg.style.maxWidth = '100%'; | |
| svg.style.width = '100%'; | |
| svg.style.height = 'auto'; | |
| if (!svg.getAttribute('preserveAspectRatio')) { | |
| svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); | |
| } | |
| } | |
| document.querySelectorAll('svg').forEach(svg => { | |
| isSmallSvg(svg) ? lockSmallSvgSize(svg) : fixSvg(svg); | |
| }); | |
| document.querySelectorAll('.mermaid, .mermaid svg').forEach(el => { | |
| if (el.tagName?.toLowerCase() === 'svg') fixSvg(el); | |
| else { el.style.display = 'block'; el.style.width = '100%'; el.style.maxWidth = '100%'; } | |
| }); | |
| document.querySelectorAll('iframe, embed, object').forEach(el => { | |
| el.style.width = '100%'; | |
| el.style.maxWidth = '100%'; | |
| try { el.removeAttribute('width'); } catch { } | |
| try { | |
| const doc = el.contentDocument; | |
| if (doc?.head) { | |
| const s = doc.createElement('style'); | |
| s.textContent = 'html,body{overflow-x:hidden;} svg,canvas,img,video{max-width:100%!important;height:auto!important;} svg[width]{width:100%!important}'; | |
| doc.head.appendChild(s); | |
| doc.querySelectorAll('svg').forEach(svg => { | |
| isSmallSvg(svg) ? lockSmallSvgSize(svg) : fixSvg(svg); | |
| }); | |
| } | |
| } catch { /* cross-origin */ } | |
| }); | |
| }); | |
| } | |
| /** PDF print styles */ | |
| const PDF_PRINT_CSS = ` | |
| /* General container safety */ | |
| html, body { overflow-x: hidden !important; } | |
| /* Make all vector/bitmap media responsive for print */ | |
| svg, canvas, img, video { max-width: 100% !important; height: auto !important; } | |
| .mermaid, .mermaid svg { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; } | |
| svg[width] { width: 100% !important; } | |
| iframe, embed, object { width: 100% !important; max-width: 100% !important; height: auto; } | |
| /* HtmlEmbed wrappers */ | |
| .html-embed, .html-embed__card { max-width: 100% !important; width: 100% !important; } | |
| .html-embed__card > div[id^="frag-"] { width: 100% !important; max-width: 100% !important; } | |
| /* Wide mode: remove blur/mask effects for print */ | |
| .wide, .html-embed--wide { | |
| -webkit-mask: none !important; | |
| mask: none !important; | |
| background: transparent !important; | |
| padding: 0 !important; | |
| width: 100% !important; | |
| margin-left: 0 !important; | |
| transform: none !important; | |
| border-radius: 0 !important; | |
| } | |
| /* Banner centering */ | |
| .hero .points { mix-blend-mode: normal !important; } | |
| .hero-banner, .hero .hero-banner, [class*="hero-banner"] { | |
| display: block !important; width: 100% !important; max-width: 100% !important; text-align: center !important; | |
| } | |
| .hero .html-embed--screenshot, .hero-banner .html-embed--screenshot, | |
| .hero .html-embed--screenshot img, .hero-banner .html-embed--screenshot img { | |
| display: block !important; margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; | |
| } | |
| .hero-banner svg, .hero-banner canvas, [class*="hero-banner"] svg, [class*="hero-banner"] canvas { | |
| display: block !important; margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; height: auto !important; | |
| } | |
| .hero figure, .hero-banner figure { text-align: center !important; } | |
| .hero figure img, .hero-banner figure img { margin-left: auto !important; margin-right: auto !important; } | |
| /* Complex flexbox layouts */ | |
| .d3-neural .panel { flex-direction: column !important; gap: 16px !important; } | |
| .d3-neural .left, .d3-neural .right { flex: 0 0 100% !important; max-width: 100% !important; min-width: 0 !important; width: 100% !important; } | |
| .d3-neural .arrow-sep { display: none !important; } | |
| .d3-neural .canvas-wrap { max-width: 280px !important; margin: 0 auto !important; } | |
| .d3-neural canvas { max-width: 100% !important; height: auto !important; } | |
| .d3-neural .right svg { width: 100% !important; height: auto !important; min-height: 300px !important; } | |
| .html-embed__card .panel { flex-direction: column !important; } | |
| .html-embed__card .panel > * { flex: 0 0 auto !important; max-width: 100% !important; width: 100% !important; } | |
| .html-embed__card .controls { flex-wrap: wrap !important; justify-content: flex-start !important; } | |
| .html-embed__card .chart-card { width: 100% !important; max-width: 100% !important; } | |
| .d3-six-line-charts .chart-grid { grid-template-columns: 1fr !important; } | |
| /* Screenshot replacements */ | |
| .html-embed--screenshot, .iframe--screenshot { | |
| width: 100% !important; max-width: 100% !important; page-break-inside: avoid !important; break-inside: avoid !important; | |
| } | |
| .html-embed--screenshot img, .iframe--screenshot img { | |
| width: auto !important; | |
| height: auto !important; | |
| max-width: 100% !important; | |
| /* Limit height to fit on a single page (~269mm printable = ~1015px, with margin) */ | |
| max-height: 950px !important; | |
| display: block !important; | |
| object-fit: contain !important; | |
| margin-left: auto !important; | |
| margin-right: auto !important; | |
| } | |
| .iframe--screenshot { margin: 1em 0 !important; } | |
| .iframe--screenshot img { border-radius: 8px !important; border: 1px solid #e5e5e5 !important; } | |
| /* Interactive links under screenshots */ | |
| .screenshot-link { | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| gap: 4px !important; | |
| margin-top: 8px !important; | |
| padding: 4px 10px !important; | |
| font-size: 0.75rem !important; | |
| color: var(--primary-color, #6366f1) !important; | |
| background: var(--primary-color-alpha, rgba(99, 102, 241, 0.08)) !important; | |
| border-radius: 4px !important; | |
| text-decoration: none !important; | |
| font-weight: 500 !important; | |
| letter-spacing: 0.01em !important; | |
| } | |
| .screenshot-link::before { | |
| content: "↗" !important; | |
| font-size: 0.85em !important; | |
| } | |
| /* Iframe sizing */ | |
| iframe { | |
| width: 100% !important; max-width: 100% !important; min-height: 400px !important; | |
| border: 1px solid var(--border-color, #e5e5e5) !important; border-radius: 8px !important; | |
| page-break-inside: avoid !important; break-inside: avoid !important; | |
| } | |
| iframe[src*="hf.space"], iframe[src*="huggingface.co"], iframe[src*="gradio"] { min-height: 500px !important; height: auto !important; } | |
| iframe.card { min-height: 450px !important; } | |
| `; | |
| /** | |
| * Screenshot-first approach: Captures HTML embeds as high-resolution images | |
| * and replaces them in the DOM. This ensures perfect visual fidelity in PDFs. | |
| * | |
| * @param {import('playwright').Page} page - Playwright page | |
| * @param {string} liveUrl - Base URL for interactive links | |
| * @param {number} deviceScaleFactor - Scale factor for retina quality (default: 2) | |
| * @returns {Promise<{replaced: number, skipped: number, errors: number}>} | |
| */ | |
| async function replaceEmbedsWithScreenshots(page, liveUrl, deviceScaleFactor = 2) { | |
| const stats = { replaced: 0, skipped: 0, errors: 0 }; | |
| // Get all HTML embeds | |
| const embeds = await page.$$('.html-embed'); | |
| console.log(` Found ${embeds.length} HTML embeds to process`); | |
| for (let i = 0; i < embeds.length; i++) { | |
| const embed = embeds[i]; | |
| try { | |
| // Check visibility | |
| const isVisible = await embed.isVisible(); | |
| if (!isVisible) { | |
| stats.skipped++; | |
| continue; | |
| } | |
| // Get embed ID (now automatically generated from filename in HtmlEmbed.astro) | |
| const embedAnchor = await embed.evaluate((el) => { | |
| const id = el.id || el.getAttribute('id'); | |
| // Skip internal IDs like frag-xxx | |
| return (id && !id.startsWith('frag-')) ? id : null; | |
| }); | |
| // Scroll into view | |
| await embed.scrollIntoViewIfNeeded(); | |
| await page.waitForTimeout(100); | |
| // Clean up styles for cleaner screenshot (remove shadows, borders, etc.) | |
| await embed.evaluate((el) => { | |
| const stash = (node) => { | |
| if (!node || !(node instanceof HTMLElement)) return; | |
| node.dataset.__prevStyle = node.getAttribute('style') ?? ''; | |
| node.style.background = 'transparent'; | |
| node.style.border = 'none'; | |
| node.style.borderRadius = '0'; | |
| node.style.boxShadow = 'none'; | |
| }; | |
| stash(el); | |
| const card = el.querySelector('.html-embed__card'); | |
| if (card) stash(card); | |
| const figure = el.closest('figure'); | |
| if (figure) stash(figure); | |
| // For banners, clean up more aggressively | |
| const banners = el.querySelectorAll('[class*="banner"]'); | |
| if (banners.length > 0) { | |
| banners.forEach((banner) => stash(banner)); | |
| const all = el.querySelectorAll('*'); | |
| all.forEach((node) => stash(node)); | |
| const svgRects = el.querySelectorAll('svg rect'); | |
| svgRects.forEach((rect) => { | |
| rect.setAttribute('rx', '0'); | |
| rect.setAttribute('ry', '0'); | |
| rect.setAttribute('stroke', 'none'); | |
| }); | |
| } | |
| }); | |
| // Take screenshot as base64 | |
| const screenshotBuffer = await embed.screenshot({ | |
| type: 'png', | |
| scale: 'device' // Uses deviceScaleFactor from context | |
| }); | |
| const base64 = screenshotBuffer.toString('base64'); | |
| const dataUri = `data:image/png;base64,${base64}`; | |
| // Get dimensions for the replacement image | |
| const box = await embed.boundingBox(); | |
| const width = box ? Math.round(box.width) : 'auto'; | |
| const height = box ? Math.round(box.height) : 'auto'; | |
| // Get caption if present | |
| const caption = await embed.evaluate((el) => { | |
| const figcaption = el.closest('figure')?.querySelector('figcaption'); | |
| return figcaption ? figcaption.outerHTML : ''; | |
| }); | |
| // Build interactive link with anchor to nearest heading | |
| const interactiveUrl = liveUrl ? (embedAnchor ? `${liveUrl}#${embedAnchor}` : liveUrl) : null; | |
| // Replace embed with image | |
| await embed.evaluate((el, { dataUri, width, height, caption, index, interactiveUrl }) => { | |
| // Create replacement container | |
| const replacement = document.createElement('div'); | |
| replacement.className = 'html-embed--screenshot'; | |
| replacement.dataset.originalIndex = String(index); | |
| replacement.style.width = '100%'; | |
| replacement.style.maxWidth = '100%'; | |
| replacement.style.pageBreakInside = 'avoid'; | |
| // Create image element | |
| const img = document.createElement('img'); | |
| img.src = dataUri; | |
| img.style.width = '100%'; | |
| img.style.height = 'auto'; | |
| img.style.maxWidth = '100%'; | |
| img.style.display = 'block'; | |
| img.alt = 'Embedded visualization'; | |
| replacement.appendChild(img); | |
| // Add interactive link if available | |
| if (interactiveUrl) { | |
| const link = document.createElement('a'); | |
| link.href = interactiveUrl; | |
| link.className = 'screenshot-link'; | |
| link.textContent = 'View interactive version'; | |
| link.target = '_blank'; | |
| link.rel = 'noopener'; | |
| replacement.appendChild(link); | |
| } | |
| // Handle figure wrapper if present | |
| const figure = el.closest('figure'); | |
| if (figure) { | |
| // Keep the figure structure but replace content | |
| const newFigure = document.createElement('figure'); | |
| newFigure.className = figure.className; | |
| newFigure.style.cssText = figure.style.cssText; | |
| newFigure.appendChild(replacement); | |
| // Re-add caption if present | |
| if (caption) { | |
| newFigure.insertAdjacentHTML('beforeend', caption); | |
| } | |
| figure.replaceWith(newFigure); | |
| } else { | |
| el.replaceWith(replacement); | |
| } | |
| }, { dataUri, width, height, caption, index: i, interactiveUrl }); | |
| stats.replaced++; | |
| if ((i + 1) % 10 === 0 || i === embeds.length - 1) { | |
| console.log(` Progress: ${i + 1}/${embeds.length} embeds processed`); | |
| } | |
| } catch (err) { | |
| console.warn(` ⚠️ Failed to capture embed ${i + 1}: ${err.message}`); | |
| stats.errors++; | |
| // Restore original styles on error | |
| try { | |
| await embed.evaluate((el) => { | |
| const restore = (node) => { | |
| if (!node || !(node instanceof HTMLElement)) return; | |
| const prev = node.dataset.__prevStyle ?? ''; | |
| node.setAttribute('style', prev); | |
| delete node.dataset.__prevStyle; | |
| }; | |
| restore(el); | |
| const card = el.querySelector('.html-embed__card'); | |
| if (card) restore(card); | |
| const figure = el.closest('figure'); | |
| if (figure) restore(figure); | |
| }); | |
| } catch { } | |
| } | |
| } | |
| return stats; | |
| } | |
| /** | |
| * Screenshot-first approach for iframes: Captures iframes as high-resolution images | |
| * and replaces them in the DOM. This handles cross-origin iframes like HuggingFace Spaces. | |
| * | |
| * @param {import('playwright').Page} page - Playwright page | |
| * @param {number} deviceScaleFactor - Scale factor for retina quality (default: 2) | |
| * @returns {Promise<{replaced: number, skipped: number, errors: number}>} | |
| */ | |
| async function replaceIframesWithScreenshots(page, deviceScaleFactor = 2) { | |
| const stats = { replaced: 0, skipped: 0, errors: 0 }; | |
| // Get all iframes | |
| const iframes = await page.$$('iframe'); | |
| console.log(` Found ${iframes.length} iframes to process`); | |
| if (iframes.length === 0) { | |
| return stats; | |
| } | |
| // Wait for iframes to load | |
| console.log(' ⏳ Waiting for iframes to load...'); | |
| await page.evaluate(async () => { | |
| const iframes = Array.from(document.querySelectorAll('iframe')); | |
| await Promise.all(iframes.map(iframe => { | |
| return new Promise((resolve) => { | |
| if (iframe.contentDocument && iframe.contentDocument.readyState === 'complete') { | |
| resolve(undefined); | |
| } else { | |
| iframe.addEventListener('load', () => resolve(undefined), { once: true }); | |
| // Timeout after 10 seconds | |
| setTimeout(() => resolve(undefined), 10000); | |
| } | |
| }); | |
| })); | |
| }); | |
| // Extra wait for Gradio/HuggingFace Spaces to render | |
| await page.waitForTimeout(3000); | |
| for (let i = 0; i < iframes.length; i++) { | |
| const iframe = iframes[i]; | |
| try { | |
| // Check visibility | |
| const isVisible = await iframe.isVisible(); | |
| if (!isVisible) { | |
| stats.skipped++; | |
| continue; | |
| } | |
| // Get iframe src for logging and interactive link | |
| const src = await iframe.getAttribute('src') || ''; | |
| const shortSrc = src.length > 50 ? src.substring(0, 50) + '...' : src; | |
| // Scroll into view | |
| await iframe.scrollIntoViewIfNeeded(); | |
| await page.waitForTimeout(500); // Extra time for iframe content to render after scroll | |
| // Take screenshot | |
| const screenshotBuffer = await iframe.screenshot({ | |
| type: 'png', | |
| scale: 'device' | |
| }); | |
| const base64 = screenshotBuffer.toString('base64'); | |
| const dataUri = `data:image/png;base64,${base64}`; | |
| // Get dimensions | |
| const box = await iframe.boundingBox(); | |
| const width = box ? Math.round(box.width) : 'auto'; | |
| const height = box ? Math.round(box.height) : 'auto'; | |
| // Replace iframe with image | |
| await iframe.evaluate((el, { dataUri, width, height, index, iframeSrc }) => { | |
| // Create replacement container | |
| const replacement = document.createElement('div'); | |
| replacement.className = 'iframe--screenshot'; | |
| replacement.dataset.originalIndex = String(index); | |
| replacement.style.width = '100%'; | |
| replacement.style.maxWidth = '100%'; | |
| replacement.style.pageBreakInside = 'avoid'; | |
| // Create image element | |
| const img = document.createElement('img'); | |
| img.src = dataUri; | |
| img.style.width = '100%'; | |
| img.style.height = 'auto'; | |
| img.style.maxWidth = '100%'; | |
| img.style.display = 'block'; | |
| img.style.borderRadius = '8px'; | |
| img.style.border = '1px solid #e5e5e5'; | |
| img.alt = 'Embedded widget screenshot'; | |
| replacement.appendChild(img); | |
| // Add interactive link if iframe has a valid src | |
| if (iframeSrc && iframeSrc.startsWith('http')) { | |
| const link = document.createElement('a'); | |
| link.href = iframeSrc; | |
| link.className = 'screenshot-link'; | |
| link.textContent = 'View interactive version'; | |
| link.target = '_blank'; | |
| link.rel = 'noopener'; | |
| replacement.appendChild(link); | |
| } | |
| el.replaceWith(replacement); | |
| }, { dataUri, width, height, index: i, iframeSrc: src }); | |
| stats.replaced++; | |
| console.log(` ✅ [${i + 1}/${iframes.length}] ${shortSrc}`); | |
| } catch (err) { | |
| console.warn(` ⚠️ Failed to capture iframe ${i + 1}: ${err.message}`); | |
| stats.errors++; | |
| } | |
| } | |
| return stats; | |
| } | |
| /** | |
| * Injects viewBox attributes on SVGs that don't have one, making them responsive. | |
| * This captures the current rendered dimensions before switching to print mode. | |
| */ | |
| async function injectSvgViewBoxes(page) { | |
| const stats = await page.evaluate(() => { | |
| let fixed = 0; | |
| let skipped = 0; | |
| let errors = 0; | |
| // Target all D3 embeds and general HTML embed SVGs | |
| const selectors = [ | |
| '.html-embed__card svg', | |
| '.d3-bar svg', | |
| '.d3-scatter svg', | |
| '.d3-line svg', | |
| '.d3-galaxy svg', | |
| '.d3-neural svg', | |
| '.d3-pie svg', | |
| '.d3-confusion-matrix svg', | |
| '.d3-benchmark svg', | |
| '.d3-six-line-charts svg', | |
| '[class^="d3-"] svg', | |
| '[class*=" d3-"] svg' | |
| ].join(', '); | |
| document.querySelectorAll(selectors).forEach(svg => { | |
| try { | |
| // Skip if already has a viewBox | |
| if (svg.getAttribute('viewBox')) { | |
| skipped++; | |
| return; | |
| } | |
| // Get current rendered dimensions | |
| const rect = svg.getBoundingClientRect(); | |
| const width = rect.width || svg.clientWidth || parseFloat(svg.getAttribute('width')) || 0; | |
| const height = rect.height || svg.clientHeight || parseFloat(svg.getAttribute('height')) || 0; | |
| if (width > 0 && height > 0) { | |
| // Add viewBox based on current dimensions | |
| svg.setAttribute('viewBox', `0 0 ${Math.round(width)} ${Math.round(height)}`); | |
| svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); | |
| // Remove fixed dimensions to allow scaling | |
| svg.removeAttribute('width'); | |
| svg.removeAttribute('height'); | |
| // Make responsive via CSS | |
| svg.style.width = '100%'; | |
| svg.style.height = 'auto'; | |
| svg.style.maxWidth = '100%'; | |
| fixed++; | |
| } else { | |
| skipped++; | |
| } | |
| } catch (e) { | |
| errors++; | |
| } | |
| }); | |
| return { fixed, skipped, errors }; | |
| }); | |
| return stats; | |
| } | |
| async function main() { | |
| const cwd = process.cwd(); | |
| const port = Number(process.env.PREVIEW_PORT || 8080); | |
| const baseUrl = `http://localhost:${port}/`; | |
| const args = parseArgs(process.argv); | |
| // Default: light (do not rely on env vars implicitly) | |
| const theme = (args.theme === 'dark' || args.theme === 'light') ? args.theme : 'light'; | |
| const format = args.format || 'A4'; | |
| const margin = parseMargin(args.margin); | |
| const wait = (args.wait || 'full'); // 'networkidle' | 'images' | 'plotly' | 'full' | |
| const bookMode = !!args.book; // Activer le mode livre avec --book | |
| const useScreenshots = !args['no-screenshots']; // Screenshot-first approach (default: enabled) | |
| const liveUrl = args['live-url'] || ''; // URL de l'article en ligne (pour les liens interactifs) | |
| // filename can be provided, else computed from DOM (button) or page title later | |
| let outFileBase = (args.filename && String(args.filename).replace(/\.pdf$/i, '')) || 'article'; | |
| // Build only if dist/ does not exist | |
| const distDir = resolve(cwd, 'dist'); | |
| let hasDist = false; | |
| try { | |
| const st = await fs.stat(distDir); | |
| hasDist = st && st.isDirectory(); | |
| } catch { } | |
| if (!hasDist) { | |
| console.log('> Building Astro site…'); | |
| await run('npm', ['run', 'build']); | |
| } else { | |
| console.log('> Skipping build (dist/ exists)…'); | |
| } | |
| console.log('> Starting Astro preview…'); | |
| // Start preview in its own process group so we can terminate all children reliably | |
| const preview = spawn('npm', ['run', 'preview'], { cwd, stdio: 'inherit', detached: true }); | |
| const previewExit = new Promise((resolvePreview) => { | |
| preview.on('close', (code, signal) => resolvePreview({ code, signal })); | |
| }); | |
| try { | |
| await waitForServer(baseUrl, 60000); | |
| console.log('> Server ready, generating PDF…'); | |
| const browser = await chromium.launch({ headless: true }); | |
| try { | |
| // Use 4x scale factor for high-DPI screenshots | |
| const deviceScaleFactor = 4; | |
| const context = await browser.newContext({ | |
| deviceScaleFactor | |
| }); | |
| await context.addInitScript((desired) => { | |
| try { | |
| localStorage.setItem('theme', desired); | |
| // Apply theme immediately to avoid flashes | |
| if (document && document.documentElement) { | |
| document.documentElement.dataset.theme = desired; | |
| } | |
| } catch { } | |
| }, theme); | |
| const page = await context.newPage(); | |
| // Start with a wider viewport so D3/Plotly embeds render at their intended "web" size | |
| // We'll capture viewBox dimensions before switching to print viewport | |
| const webViewportWidth = 1200; | |
| await page.setViewportSize({ width: webViewportWidth, height: 1400 }); | |
| await page.goto(baseUrl, { waitUntil: 'load', timeout: 60000 }); | |
| // Give time for CDN scripts (Plotly/D3) to attach and for our fragment hooks to run | |
| try { await page.waitForFunction(() => !!window.Plotly, { timeout: 8000 }); } catch { } | |
| try { await page.waitForFunction(() => !!window.d3, { timeout: 8000 }); } catch { } | |
| // Prefer explicit filename from the download button if present | |
| if (!args.filename) { | |
| const fromBtn = await page.evaluate(() => { | |
| const btn = document.getElementById('download-pdf-btn'); | |
| const f = btn ? btn.getAttribute('data-pdf-filename') : null; | |
| return f || ''; | |
| }); | |
| if (fromBtn) { | |
| outFileBase = String(fromBtn).replace(/\.pdf$/i, ''); | |
| } else { | |
| // Fallback: compute slug from hero title or document.title | |
| const title = await page.evaluate(() => { | |
| const h1 = document.querySelector('h1.hero-title'); | |
| const t = h1 ? h1.textContent : document.title; | |
| return (t || '').replace(/\s+/g, ' ').trim(); | |
| }); | |
| outFileBase = slugify(title); | |
| } | |
| // Ajouter suffixe -book si en mode livre | |
| if (bookMode) { | |
| outFileBase += '-book'; | |
| } | |
| } | |
| // Wait for render readiness | |
| if (wait === 'images' || wait === 'full') { | |
| console.log('⏳ Waiting for images…'); | |
| await waitForImages(page); | |
| } | |
| if (wait === 'd3' || wait === 'full') { | |
| console.log('⏳ Waiting for D3…'); | |
| await waitForD3(page); | |
| } | |
| if (wait === 'plotly' || wait === 'full') { | |
| console.log('⏳ Waiting for Plotly…'); | |
| await waitForPlotly(page); | |
| } | |
| if (wait === 'full') { | |
| console.log('⏳ Waiting for stable layout…'); | |
| await waitForStableLayout(page); | |
| } | |
| // Mode livre : ouvrir tous les accordéons | |
| if (bookMode) { | |
| console.log('📂 Opening all accordions for book mode…'); | |
| await page.evaluate(() => { | |
| const accordions = document.querySelectorAll('details.accordion, details'); | |
| accordions.forEach((accordion) => { | |
| if (!accordion.hasAttribute('open')) { | |
| accordion.setAttribute('open', ''); | |
| const wrapper = accordion.querySelector('.accordion__content-wrapper'); | |
| if (wrapper) { | |
| wrapper.style.height = 'auto'; | |
| wrapper.style.overflow = 'visible'; | |
| } | |
| } | |
| }); | |
| }); | |
| await waitForStableLayout(page, 2000); | |
| } | |
| // Screenshot-first approach: capture HTML embeds as images before PDF generation | |
| // This ensures perfect visual fidelity regardless of CSS/flexbox issues | |
| if (useScreenshots) { | |
| console.log('📸 Capturing HTML embeds as screenshots (screenshot-first approach)…'); | |
| if (liveUrl) console.log(` 🔗 Interactive links will point to: ${liveUrl}`); | |
| const screenshotStats = await replaceEmbedsWithScreenshots(page, liveUrl, deviceScaleFactor); | |
| console.log(` ✅ Replaced: ${screenshotStats.replaced}, Skipped: ${screenshotStats.skipped}, Errors: ${screenshotStats.errors}`); | |
| // Also capture iframes (HuggingFace Spaces, etc.) | |
| console.log('📸 Capturing iframes as screenshots…'); | |
| const iframeStats = await replaceIframesWithScreenshots(page, deviceScaleFactor); | |
| console.log(` ✅ Replaced: ${iframeStats.replaced}, Skipped: ${iframeStats.skipped}, Errors: ${iframeStats.errors}`); | |
| // Wait for layout to stabilize after replacements | |
| await waitForStableLayout(page, 2000); | |
| } else { | |
| // Fallback: Inject viewBox on SVGs that don't have one | |
| console.log('🔧 Fixing SVG viewBox attributes…'); | |
| const svgStats = await injectSvgViewBoxes(page); | |
| console.log(` Fixed: ${svgStats.fixed}, Skipped: ${svgStats.skipped}, Errors: ${svgStats.errors}`); | |
| } | |
| await page.emulateMedia({ media: 'print' }); | |
| // Enforce responsive sizing for SVG/iframes | |
| try { await applyResponsiveSvgFixes(page); } catch { } | |
| // Generate OG thumbnail (1200x630) | |
| try { | |
| const ogW = 1200, ogH = 630; | |
| await page.setViewportSize({ width: ogW, height: ogH }); | |
| // Give layout a tick to adjust | |
| await page.waitForTimeout(200); | |
| // Ensure layout & D3 re-rendered after viewport change | |
| await page.evaluate(() => { window.scrollTo(0, 0); window.dispatchEvent(new Event('resize')); }); | |
| try { await waitForD3(page, 8000); } catch { } | |
| // Temporarily improve visibility for light theme thumbnails | |
| // - Force normal blend for points | |
| // - Ensure an SVG background (CSS background on svg element) | |
| const cssHandle = await page.addStyleTag({ | |
| content: ` | |
| .hero .points { mix-blend-mode: normal !important; } | |
| ` }); | |
| const thumbPath = resolve(cwd, 'dist', 'thumb.auto.jpg'); | |
| await page.screenshot({ path: thumbPath, type: 'jpeg', quality: 85, fullPage: false }); | |
| // Also emit PNG for compatibility if needed | |
| const thumbPngPath = resolve(cwd, 'dist', 'thumb.auto.png'); | |
| await page.screenshot({ path: thumbPngPath, type: 'png', fullPage: false }); | |
| const publicThumb = resolve(cwd, 'public', 'thumb.auto.jpg'); | |
| const publicThumbPng = resolve(cwd, 'public', 'thumb.auto.png'); | |
| try { await fs.copyFile(thumbPath, publicThumb); } catch { } | |
| try { await fs.copyFile(thumbPngPath, publicThumbPng); } catch { } | |
| // Remove temporary style so PDF is unaffected | |
| try { await cssHandle.evaluate((el) => el.remove()); } catch { } | |
| console.log(`✅ OG thumbnail generated: ${thumbPath}`); | |
| } catch (e) { | |
| console.warn('Unable to generate OG thumbnail:', e?.message || e); | |
| } | |
| const outPath = resolve(cwd, 'dist', `${outFileBase}.pdf`); | |
| // Restore viewport to printable width before PDF (thumbnail changed it) | |
| // SVGs now have viewBox so they should scale automatically | |
| try { | |
| const fmt2 = getFormatSizeMm(format); | |
| const mw2 = fmt2.w - cssLengthToMm(margin.left) - cssLengthToMm(margin.right); | |
| const printableWidthPx2 = Math.max(320, Math.round((mw2 / 25.4) * 96)); | |
| console.log(`📐 Setting viewport to printable width: ${printableWidthPx2}px`); | |
| await page.setViewportSize({ width: printableWidthPx2, height: 1400 }); | |
| await page.evaluate(() => { window.scrollTo(0, 0); window.dispatchEvent(new Event('resize')); }); | |
| await page.waitForTimeout(500); | |
| await waitForStableLayout(page, 2000); | |
| // Re-apply responsive fixes after viewport change | |
| try { await applyResponsiveSvgFixes(page); } catch { } | |
| } catch { } | |
| // Inject styles for PDF | |
| let pdfCssHandle = null; | |
| try { | |
| if (bookMode) { | |
| // Mode livre : injecter le CSS livre complet | |
| console.log('📚 Applying book styles…'); | |
| const bookCssPath = resolve(cwd, 'src', 'styles', '_print-book.css'); | |
| const bookCss = await fs.readFile(bookCssPath, 'utf-8'); | |
| pdfCssHandle = await page.addStyleTag({ content: bookCss }); | |
| await page.waitForTimeout(500); | |
| } else { | |
| // Mode normal : styles responsive de base | |
| pdfCssHandle = await page.addStyleTag({ content: PDF_PRINT_CSS }); | |
| } | |
| } catch { } | |
| await page.pdf({ | |
| path: outPath, | |
| format, | |
| printBackground: true, | |
| displayHeaderFooter: false, | |
| preferCSSPageSize: false, | |
| margin: bookMode ? { | |
| top: '20mm', | |
| right: '20mm', | |
| bottom: '25mm', | |
| left: '25mm' | |
| } : margin | |
| }); | |
| try { if (pdfCssHandle) await pdfCssHandle.evaluate((el) => el.remove()); } catch { } | |
| console.log(`✅ PDF generated: ${outPath}`); | |
| // Copy into public only under the slugified name | |
| const publicSlugPath = resolve(cwd, 'public', `${outFileBase}.pdf`); | |
| try { | |
| await fs.mkdir(resolve(cwd, 'public'), { recursive: true }); | |
| await fs.copyFile(outPath, publicSlugPath); | |
| console.log(`✅ PDF copied to: ${publicSlugPath}`); | |
| } catch (e) { | |
| console.warn('Unable to copy PDF to public/:', e?.message || e); | |
| } | |
| } finally { | |
| await browser.close(); | |
| } | |
| } finally { | |
| // Try a clean shutdown of preview (entire process group first) | |
| try { | |
| if (process.platform !== 'win32') { | |
| try { process.kill(-preview.pid, 'SIGINT'); } catch { } | |
| } | |
| try { preview.kill('SIGINT'); } catch { } | |
| await Promise.race([previewExit, delay(3000)]); | |
| // Force kill if still alive | |
| // eslint-disable-next-line no-unsafe-optional-chaining | |
| if (!preview.killed) { | |
| try { | |
| if (process.platform !== 'win32') { | |
| try { process.kill(-preview.pid, 'SIGKILL'); } catch { } | |
| } | |
| try { preview.kill('SIGKILL'); } catch { } | |
| } catch { } | |
| await Promise.race([previewExit, delay(1000)]); | |
| } | |
| } catch { } | |
| } | |
| } | |
| main().catch((err) => { | |
| console.error(err); | |
| process.exit(1); | |
| }); | |