Spaces:

contacthamza91
/

veurone-render

Sleeping

File size: 15,442 Bytes

import express from 'express';
import cors from 'cors';
import puppeteer from 'puppeteer-core';
import { exec } from 'child_process';
import { writeFileSync, readFileSync, mkdirSync, rmSync, existsSync } from 'fs';
import { randomUUID } from 'crypto';
import { promisify } from 'util';

const execAsync = promisify(exec);

const app = express();
app.use(express.json({ limit: '25mb' }));
app.use(cors());

// ── Health Check ──
app.get('/', (_req, res) => {
  res.json({ status: 'ok', service: 'Veurone Render Space', timestamp: new Date().toISOString() });
});
app.get('/health', (_req, res) => {
  res.json({ status: 'ok', timestamp: new Date().toISOString() });
});

// ── AI Chat Endpoint ──
const SYSTEM_PROMPT = `You are a world-class HTML animation designer following the HyperFrames standard for video composition. You create beautiful, self-contained HTML files using pure HTML/CSS and GSAP.

HYPERFRAMES ANIMATION RULES & BEST PRACTICES:
1. Output ONLY the complete HTML code — no explanations, no markdown fences.
2. The HTML must be fully self-contained (inline CSS and JS). Include GSAP via CDN: <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>.
3. Layout Before Animation: Position every element in CSS where it should be at its MOST VISIBLE moment (its end-state). Do not use CSS to hide them.
4. Entrance Animations: Once layout is perfect, add motion using ONLY entrance animations (e.g., \`gsap.from(..., { opacity: 0, y: 50 })\`). Elements must animate into their CSS-defined end-states.
5. NO Exit Animations: NEVER animate elements exiting (offscreen or opacity 0) unless it is the very final fade-to-black scene.
6. Design for 1920×1080 viewport. Use "height: 100vh".
7. Keep animations under 6 seconds total duration. Do NOT use \`repeat: -1\` (infinite loops break the capture engine). Calculate explicit finite repeats if needed.
8. Vary eases across entrance tweens — use at least 3 different eases (e.g., 'power3.out', 'expo.out', 'back.out'). Offset the first animation by ~0.2s.
9. Use premium typography (Google Fonts) and vibrant colors (gradients, glass effects, solid + glow for backgrounds to avoid banding).
10. Auto-play the GSAP timeline so the headless browser capture engine can record it immediately.
11. Start your output with <!DOCTYPE html> and end with </html>.`;

app.post('/chat', async (req, res) => {
  const { prompt, imageBase64 } = req.body;

  if (!prompt || prompt.trim().length < 5) {
    return res.status(400).json({ error: 'Prompt is too short.' });
  }

  const HF_TOKEN = process.env.HF_TOKEN;
  if (!HF_TOKEN) {
    return res.status(500).json({ error: 'HF_TOKEN not configured on the Space.' });
  }

  console.log(`[Chat] Prompt: "${prompt.substring(0, 80)}..." | Image: ${imageBase64 ? 'yes' : 'no'}`);

  try {
    // Build message content
    const userContent = [];

    if (imageBase64) {
      // Ensure proper data URL format
      const dataUrl = imageBase64.startsWith('data:')
        ? imageBase64
        : `data:image/jpeg;base64,${imageBase64}`;
      userContent.push({ type: 'image_url', image_url: { url: dataUrl } });
    }

    userContent.push({ type: 'text', text: prompt });

    const body = {
      model: 'Qwen/Qwen2.5-VL-72B-Instruct',
      messages: [
        { role: 'system', content: SYSTEM_PROMPT },
        { role: 'user', content: userContent },
      ],
      max_tokens: 4096,
      temperature: 0.7,
    };

    // HF auto-routing: automatically picks the best available provider
    const API_URL = 'https://router.huggingface.co/v1/chat/completions';

    console.log(`[Chat] Calling HF auto-router with Qwen2.5-VL-72B...`);
    const apiRes = await fetch(API_URL, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${HF_TOKEN}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(body),
    });

    if (!apiRes.ok) {
      const errText = await apiRes.text();
      console.error(`[Chat] VL model failed (${apiRes.status}):`, errText.substring(0, 200));

      // Fallback: text-only prompt with Qwen2.5-Coder-32B
      if (!imageBase64) {
        console.log('[Chat] Trying Qwen2.5-Coder-32B fallback...');
        const fbBody = {
          model: 'Qwen/Qwen2.5-Coder-32B-Instruct',
          messages: [
            { role: 'system', content: SYSTEM_PROMPT },
            { role: 'user', content: prompt },
          ],
          max_tokens: 4096,
          temperature: 0.7,
        };

        const fbRes = await fetch(API_URL, {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${HF_TOKEN}`,
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(fbBody),
        });

        if (fbRes.ok) {
          const fbData = await fbRes.json();
          const rawFb = fbData.choices?.[0]?.message?.content || '';
          const htmlFb = extractHtml(rawFb);
          if (htmlFb && htmlFb.length >= 50) {
            console.log(`[Chat] ✅ Success via Coder fallback: ${htmlFb.length} bytes`);
            return res.json({ html: htmlFb, model: 'qwen2.5-coder-32b' });
          }
        }
      }

      throw new Error(`AI API failed (${apiRes.status}): ${errText.substring(0, 200)}`);
    }

    const data = await apiRes.json();
    const rawContent = data.choices?.[0]?.message?.content || '';
    const html = extractHtml(rawContent);

    if (!html || html.length < 50) {
      return res.status(422).json({
        error: 'AI did not generate valid HTML. Try a more specific prompt.',
        raw: rawContent.substring(0, 500),
      });
    }

    console.log(`[Chat] ✅ Generated ${html.length} bytes of HTML`);
    res.json({ html, model: 'qwen2.5-vl-72b' });
  } catch (err) {
    console.error('[Chat] ❌ Error:', err.message);
    res.status(500).json({ error: `AI generation failed: ${err.message.substring(0, 300)}` });
  }
});

/**
 * Extract HTML from AI response (handles markdown fences and raw HTML).
 */
function extractHtml(text) {
  // Try to extract from markdown code block
  const fenceMatch = text.match(/```(?:html)?\s*\n?([\s\S]*?)```/);
  if (fenceMatch) return fenceMatch[1].trim();

  // Try to find raw HTML (starts with <!DOCTYPE or <html)
  const htmlMatch = text.match(/(<!DOCTYPE[\s\S]*<\/html>)/i);
  if (htmlMatch) return htmlMatch[1].trim();

  // If it looks like HTML already, return as-is
  if (text.trim().startsWith('<') && text.includes('</')) {
    return text.trim();
  }

  return text.trim();
}

// ── Render Endpoint ──
app.post('/render', async (req, res) => {
  const {
    html,
    fps = 30,
    duration = 6,
    width = 1920,
    height = 1080,
  } = req.body;

  if (!html || html.length < 30) {
    return res.status(400).json({ error: 'HTML code is too short or empty.' });
  }

  const jobId = randomUUID();
  const workDir = `/tmp/${jobId}`;
  const framesDir = `${workDir}/frames`;
  const htmlPath = `${workDir}/index.html`;
  const outPath = `${workDir}/output.mp4`;

  console.log(`[Job ${jobId}] Starting render: ${width}x${height} @ ${fps}fps, ${duration}s`);

  let browser;
  try {
    mkdirSync(framesDir, { recursive: true });
    writeFileSync(htmlPath, html);

    // Launch headless Chrome
    browser = await puppeteer.launch({
      executablePath: process.env.CHROME_PATH || '/usr/bin/chromium',
      headless: 'new',
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-gpu',
        '--disable-web-security',
        '--font-render-hinting=none',
      ],
    });

    const page = await browser.newPage();
    await page.setViewport({ width, height, deviceScaleFactor: 1 });

    // Load the HTML
    await page.goto(`file://${htmlPath}`, { waitUntil: 'networkidle0', timeout: 15000 });

    // Wait for fonts + animations to start
    await page.evaluate(() => document.fonts?.ready);
    await new Promise(r => setTimeout(r, 1500));

    console.log(`[Job ${jobId}] Page loaded, capturing ${fps * duration} frames...`);

    // Capture frames
    const totalFrames = fps * duration;
    const frameDelay = 1000 / fps;

    for (let i = 0; i < totalFrames; i++) {
      const paddedIndex = String(i).padStart(5, '0');
      await page.screenshot({
        path: `${framesDir}/frame_${paddedIndex}.png`,
        type: 'png',
        clip: { x: 0, y: 0, width, height },
      });

      if (i < totalFrames - 1) {
        await new Promise(r => setTimeout(r, frameDelay));
      }

      // Log progress every 30 frames
      if ((i + 1) % 30 === 0) {
        console.log(`[Job ${jobId}] Captured frame ${i + 1}/${totalFrames}`);
      }
    }

    await browser.close();
    browser = null;

    console.log(`[Job ${jobId}] All frames captured. Encoding with FFmpeg...`);

    // FFmpeg: compile frames → MP4 (H.264)
    const ffmpegCmd = [
      'ffmpeg -y',
      `-framerate ${fps}`,
      `-i ${framesDir}/frame_%05d.png`,
      '-c:v libx264',
      '-preset fast',
      '-crf 20',
      '-pix_fmt yuv420p',
      `-s ${width}x${height}`,
      '-movflags +faststart',
      outPath,
    ].join(' ');

    await execAsync(ffmpegCmd, { timeout: 60000 });

    if (!existsSync(outPath)) {
      throw new Error('FFmpeg did not produce an output file.');
    }

    const mp4Buffer = readFileSync(outPath);
    const videoBase64 = mp4Buffer.toString('base64');
    const sizeMB = (mp4Buffer.length / (1024 * 1024)).toFixed(1);

    console.log(`[Job ${jobId}] ✅ Done! MP4: ${sizeMB} MB`);

    // Cleanup
    try { rmSync(workDir, { recursive: true, force: true }); } catch { }

    res.json({ videoBase64, format: 'mp4', sizeMB: parseFloat(sizeMB) });
  } catch (err) {
    console.error(`[Job ${jobId}] ❌ Render failed:`, err.message);

    if (browser) {
      try { await browser.close(); } catch { }
    }
    try { rmSync(workDir, { recursive: true, force: true }); } catch { }

    res.status(500).json({ error: `Render failed: ${err.message.substring(0, 300)}` });
  }
});

// ── Mood Board Generator ──
app.post('/moodboard', async (req, res) => {
  const { brandName, colors, aesthetic, fonts } = req.body;

  if (!brandName || !colors || colors.length === 0) {
    return res.status(400).json({ error: 'brandName and colors are required.' });
  }

  console.log(`[MoodBoard] Generating for: ${brandName}`);

  // Generate a self-contained HTML mood board
  const colorBlocks = (colors || []).slice(0, 6).map((c, i) => {
    const size = c.role === 'primary' ? '180px' : c.role === 'secondary' ? '140px' : '100px';
    return `<div style="width:${size}; height:${size}; background:${c.hex}; border-radius:16px; display:flex; align-items:flex-end; padding:12px; box-shadow: 0 8px 32px ${c.hex}44;">
      <div style="color:${contrastColor(c.hex)}; font-size:11px; font-weight:600; opacity:0.9;">
        <div>${c.name || 'Color'}</div>
        <div style="font-family:monospace; font-size:10px; opacity:0.7;">${c.hex}</div>
      </div>
    </div>`;
  }).join('\n');

  const primaryFont = fonts?.primary || 'Inter';
  const secondaryFont = fonts?.secondary || 'Space Grotesk';
  const primaryColor = colors[0]?.hex || '#6366f1';
  const secondaryColor = colors[1]?.hex || '#ec4899';

  const moodBoardHtml = `<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(primaryFont)}:wght@400;600;700&family=${encodeURIComponent(secondaryFont)}:wght@400;500&display=swap" rel="stylesheet">
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { width:1920px; height:1080px; background:#0a0a14; font-family:'${primaryFont}',sans-serif; overflow:hidden; display:flex; }
    .left { flex:1; padding:80px; display:flex; flex-direction:column; justify-content:center; }
    .right { width:55%; padding:60px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:center; align-content:center; }
    .label { font-size:13px; text-transform:uppercase; letter-spacing:4px; color:rgba(255,255,255,0.3); margin-bottom:16px; font-family:'${secondaryFont}',sans-serif; }
    .brand { font-size:64px; font-weight:700; color:white; line-height:1.1; margin-bottom:24px; }
    .accent { background: linear-gradient(135deg, ${primaryColor}, ${secondaryColor}); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    .desc { font-size:18px; color:rgba(255,255,255,0.5); line-height:1.6; max-width:480px; font-family:'${secondaryFont}',sans-serif; }
    .divider { width:60px; height:3px; background:linear-gradient(90deg,${primaryColor},${secondaryColor}); border-radius:2px; margin:32px 0; }
    .fonts { margin-top:40px; }
    .font-label { font-size:11px; color:rgba(255,255,255,0.25); text-transform:uppercase; letter-spacing:2px; margin-bottom:8px; }
    .font-name { font-size:20px; color:rgba(255,255,255,0.7); margin-bottom:20px; }
    .glow { position:absolute; width:400px; height:400px; border-radius:50%; filter:blur(120px); opacity:0.15; }
    .glow1 { top:-100px; right:200px; background:${primaryColor}; }
    .glow2 { bottom:-50px; left:300px; background:${secondaryColor}; }
  </style>
</head>
<body>
  <div class="glow glow1"></div>
  <div class="glow glow2"></div>
  <div class="left">
    <div class="label">Visual Language Guide</div>
    <div class="brand"><span class="accent">${brandName}</span></div>
    <div class="divider"></div>
    <div class="desc">${aesthetic || ''}</div>
    <div class="fonts">
      <div class="font-label">Primary Typeface</div>
      <div class="font-name" style="font-family:'${primaryFont}',sans-serif; font-weight:700;">${primaryFont}</div>
      <div class="font-label">Secondary Typeface</div>
      <div class="font-name" style="font-family:'${secondaryFont}',sans-serif;">${secondaryFont}</div>
    </div>
  </div>
  <div class="right">
    ${colorBlocks}
  </div>
</body>
</html>`;

  let browser;
  try {
    browser = await puppeteer.launch({
      executablePath: process.env.CHROME_PATH || '/usr/bin/chromium',
      headless: 'new',
      args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],
    });

    const page = await browser.newPage();
    await page.setViewport({ width: 1920, height: 1080 });
    await page.setContent(moodBoardHtml, { waitUntil: 'networkidle0', timeout: 15000 });
    await new Promise(r => setTimeout(r, 1000)); // Let fonts load

    const screenshotBuffer = await page.screenshot({ type: 'png', fullPage: false });
    await browser.close();

    const base64 = screenshotBuffer.toString('base64');
    console.log(`[MoodBoard] ✅ Generated ${Math.round(base64.length / 1024)}KB image`);

    res.json({ imageBase64: base64 });

  } catch (err) {
    if (browser) try { await browser.close(); } catch { }
    console.error('[MoodBoard] ❌ Error:', err.message);
    res.status(500).json({ error: `Mood board generation failed: ${err.message}` });
  }
});

function contrastColor(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5 ? '#000000' : '#ffffff';
}

const PORT = process.env.PORT || 7860;
app.listen(PORT, '0.0.0.0', () => {
  console.log(`🎬 Veurone Render Space running on port ${PORT}`);
  console.log(`   Chrome: ${process.env.CHROME_PATH || '/usr/bin/chromium'}`);
});