235 lines
7.5 KiB
JavaScript
235 lines
7.5 KiB
JavaScript
#!/usr/bin/env node
|
|
import puppeteer from 'puppeteer';
|
|
import { execSync } from 'child_process';
|
|
import path from 'path';
|
|
import { fileURLToPath } from 'url';
|
|
import fs from 'fs';
|
|
import { mcpConfigs } from './mcp-configs.js';
|
|
|
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
|
|
// Only generate for IDs that don't have MP4s yet
|
|
const existingMp4s = fs.readdirSync(path.join(__dirname, 'output'))
|
|
.filter(f => f.endsWith('.mp4'))
|
|
.map(f => f.replace('.mp4', ''));
|
|
|
|
const newConfigs = mcpConfigs.filter(c => !existingMp4s.includes(c.id));
|
|
console.log(`Found ${newConfigs.length} new configs to generate (skipping ${existingMp4s.length} existing)`);
|
|
console.log('New:', newConfigs.map(c => c.id).join(', '));
|
|
|
|
function generateHTML(config) {
|
|
const { name, color, question, statLabel, statValue, statLabel2, statValue2, rows, insight } = config;
|
|
|
|
return `<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1920, height=1080">
|
|
<title>${name} MCP Demo</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg: #0a0a12;
|
|
--card: #12121c;
|
|
--border: rgba(255,255,255,0.08);
|
|
--text: #ffffff;
|
|
--text-dim: #888;
|
|
--accent: ${color};
|
|
--gradient: linear-gradient(135deg, #667eea, #764ba2);
|
|
--green: #22c55e;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Inter', -apple-system, sans-serif;
|
|
background: var(--bg);
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.scene {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: radial-gradient(ellipse at 50% 0%, ${color}15 0%, transparent 60%);
|
|
}
|
|
.chat-window {
|
|
width: 900px;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
box-shadow: 0 50px 100px rgba(0,0,0,0.5);
|
|
}
|
|
.chat-header {
|
|
padding: 20px 28px;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.chat-header .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
|
|
.chat-header span { font-size: 15px; font-weight: 600; color: var(--text-dim); }
|
|
.messages { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
|
|
.msg {
|
|
padding: 16px 20px;
|
|
border-radius: 16px;
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
max-width: 85%;
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
.user-msg {
|
|
background: var(--accent);
|
|
color: white;
|
|
align-self: flex-end;
|
|
border-bottom-right-radius: 4px;
|
|
animation: fadeUp 0.5s ease forwards 0.3s;
|
|
}
|
|
.ai-msg {
|
|
background: rgba(255,255,255,0.05);
|
|
color: var(--text);
|
|
align-self: flex-start;
|
|
border-bottom-left-radius: 4px;
|
|
animation: fadeUp 0.5s ease forwards 1s;
|
|
}
|
|
.stat-card {
|
|
display: flex;
|
|
gap: 24px;
|
|
margin: 12px 0;
|
|
opacity: 0;
|
|
animation: fadeUp 0.5s ease forwards 1.5s;
|
|
}
|
|
.stat {
|
|
background: rgba(255,255,255,0.05);
|
|
padding: 14px 20px;
|
|
border-radius: 12px;
|
|
flex: 1;
|
|
border: 1px solid var(--border);
|
|
}
|
|
.stat-label { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
|
|
.stat-value { font-size: 28px; font-weight: 700; color: var(--accent); }
|
|
.data-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 14px;
|
|
opacity: 0;
|
|
}
|
|
.data-row:nth-child(1) { animation: fadeUp 0.4s ease forwards 2s; }
|
|
.data-row:nth-child(2) { animation: fadeUp 0.4s ease forwards 2.3s; }
|
|
.data-row:nth-child(3) { animation: fadeUp 0.4s ease forwards 2.6s; }
|
|
.data-row .label { color: var(--text); }
|
|
.data-row .value { color: var(--text-dim); }
|
|
.insight {
|
|
margin-top: 16px;
|
|
padding: 14px 18px;
|
|
background: linear-gradient(135deg, ${color}15, ${color}05);
|
|
border-left: 3px solid var(--accent);
|
|
border-radius: 0 12px 12px 0;
|
|
font-size: 13px;
|
|
color: var(--text-dim);
|
|
line-height: 1.5;
|
|
opacity: 0;
|
|
animation: fadeUp 0.5s ease forwards 3s;
|
|
}
|
|
.insight strong { color: var(--green); }
|
|
@keyframes fadeUp {
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="scene">
|
|
<div class="chat-window">
|
|
<div class="chat-header">
|
|
<div class="dot"></div>
|
|
<span>${name} MCP</span>
|
|
</div>
|
|
<div class="messages">
|
|
<div class="msg user-msg">${question}</div>
|
|
<div class="msg ai-msg">
|
|
<div class="stat-card">
|
|
<div class="stat">
|
|
<div class="stat-label">${statLabel}</div>
|
|
<div class="stat-value">${statValue}</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-label">${statLabel2}</div>
|
|
<div class="stat-value">${statValue2}</div>
|
|
</div>
|
|
</div>
|
|
${rows.map(r => `<div class="data-row"><span class="label">${r.label}</span><span class="value">${r.value}</span></div>`).join('\n ')}
|
|
<div class="insight">${insight}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>`;
|
|
}
|
|
|
|
async function main() {
|
|
const browser = await puppeteer.launch({
|
|
headless: 'shell',
|
|
args: ['--no-sandbox', '--disable-setuid-sandbox']
|
|
});
|
|
|
|
for (let i = 0; i < newConfigs.length; i++) {
|
|
const config = newConfigs[i];
|
|
const start = Date.now();
|
|
process.stdout.write(`[${i+1}/${newConfigs.length}] ${config.name}... `);
|
|
|
|
try {
|
|
const page = await browser.newPage();
|
|
await page.setViewport({ width: 1920, height: 1080 });
|
|
|
|
const html = generateHTML(config);
|
|
const tmpHtml = path.join(__dirname, `tmp-${config.id}.html`);
|
|
fs.writeFileSync(tmpHtml, html);
|
|
await page.goto('file://' + tmpHtml, { waitUntil: 'networkidle0', timeout: 15000 });
|
|
|
|
// Wait for animations
|
|
await new Promise(r => setTimeout(r, 4000));
|
|
|
|
// Capture frames
|
|
const framesDir = path.join(__dirname, `frames-${config.id}`);
|
|
fs.mkdirSync(framesDir, { recursive: true });
|
|
|
|
for (let f = 0; f < 150; f++) {
|
|
await page.screenshot({ path: path.join(framesDir, `frame-${String(f).padStart(4, '0')}.png`) });
|
|
await new Promise(r => setTimeout(r, 33));
|
|
}
|
|
|
|
// Encode to MP4
|
|
const outPath = path.join(__dirname, 'output', `${config.id}.mp4`);
|
|
execSync(`ffmpeg -y -framerate 30 -i "${framesDir}/frame-%04d.png" -c:v libx264 -pix_fmt yuv420p -crf 23 "${outPath}" 2>/dev/null`);
|
|
|
|
// Cleanup
|
|
fs.rmSync(framesDir, { recursive: true });
|
|
fs.unlinkSync(tmpHtml);
|
|
|
|
// Also copy to landing-pages output
|
|
const landingOutput = path.join(__dirname, '../../mcpengine-repo/landing-pages/output');
|
|
fs.mkdirSync(landingOutput, { recursive: true });
|
|
fs.copyFileSync(outPath, path.join(landingOutput, `${config.id}.mp4`));
|
|
|
|
await page.close();
|
|
console.log(`✓ ${((Date.now() - start) / 1000).toFixed(1)}s`);
|
|
} catch (err) {
|
|
console.log(`✗ ${err.message}`);
|
|
}
|
|
}
|
|
|
|
await browser.close();
|
|
console.log('\n🎉 Done!');
|
|
}
|
|
|
|
main().catch(console.error);
|