Upload 10 files

Dockerfile

@@ -0,0 +1,56 @@
+FROM huggingface/transformers-pytorch-gpu:latest
+
+# Install Node.js 20
+RUN apt-get update && apt-get install -y ca-certificates curl gnupg && \
+    mkdir -p /etc/apt/keyrings && \
+    curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && \
+    echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list && \
+    apt-get update && \
+    apt-get install -y nodejs
+
+# Install Remotion dependencies + GPU-accelerated FFmpeg
+RUN apt-get update && \
+    apt-get install -y \
+    ffmpeg \
+    chromium \
+    chromium-sandbox \
+    libnss3 \
+    libnspr4 \
+    libatk1.0-0 \
+    libatk-bridge2.0-0 \
+    libcups2 \
+    libdrm2 \
+    libdbus-1-3 \
+    libxkbcommon0 \
+    libxcomposite1 \
+    libxdamage1 \
+    libxfixes3 \
+    libxrandr2 \
+    libgbm1 \
+    libasound2 \
+    libpango-1.0-0 \
+    libcairo2 \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set Chrome path for Remotion
+ENV CHROME_BIN=/usr/bin/chromium
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy application files
+COPY . .
+
+# Expose port
+EXPOSE 7860
+
+# Start server
+CMD ["npm", "start"]

package.json

@@ -0,0 +1,23 @@
+{
+    "name": "facelessflow-renderer",
+    "version": "1.0.0",
+    "description": "Video rendering service for FacelessFlowAI using Remotion",
+    "main": "server.js",
+    "type": "module",
+    "scripts": {
+        "start": "node server.js",
+        "dev": "node --watch server.js"
+    },
+    "dependencies": {
+        "@remotion/bundler": "^4.0.0",
+        "@remotion/media-utils": "^4.0.406",
+        "@remotion/renderer": "^4.0.0",
+        "@supabase/supabase-js": "^2.90.1",
+        "cors": "^2.8.5",
+        "express": "^4.18.2",
+        "remotion": "^4.0.0"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    }
+}

remotion/AudioWave.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { useAudioData, visualizeAudio } from '@remotion/media-utils';
+import { useCurrentFrame, useVideoConfig } from 'remotion';
+
+type Props = {
+    audioUrl: string;
+    style?: string; // Kept for prop compatibility
+    position: 'bottom' | 'center' | 'top' | 'mid-bottom';
+    color: string;
+};
+
+export const AudioWave: React.FC<Props> = ({ audioUrl, position, color }) => {
+    const frame = useCurrentFrame();
+    const { fps, height } = useVideoConfig();
+    const audioData = useAudioData(audioUrl);
+
+    if (!audioData) {
+        return null;
+    }
+
+    // High resolution sampling
+    const visualizationValues = visualizeAudio({
+        fps,
+        frame,
+        audioData,
+        numberOfSamples: 512,
+        smoothing: true,
+    });
+
+    // 1. Spatial Smoothing (Moving Average)
+    const smoothPoly = (data: number[]) => {
+        return data.map((val, i, arr) => {
+            const prev = arr[i - 1] ?? val;
+            const next = arr[i + 1] ?? val;
+            const prev2 = arr[i - 2] ?? prev;
+            const next2 = arr[i + 2] ?? next;
+            return (prev2 + prev + val + next + next2) / 5;
+        });
+    };
+
+    const smoothedData = smoothPoly(visualizationValues);
+
+    // 2. Logarithmic Scale with Noise Gate
+    const getVisualValue = (val: number) => {
+        if (val < 0.015) return 0;
+        return Math.min(1, Math.log10(1 + val * 80) / 2.2);
+    };
+
+    const frequencyData = smoothedData;
+
+    // Position Logic
+    const bottomOffset = position === 'bottom' ? 80 :
+        position === 'mid-bottom' ? height * 0.25 :
+            position === 'center' ? height * 0.5 :
+                height - 100; // top
+
+    const containerStyle: React.CSSProperties = {
+        position: 'absolute',
+        bottom: position === 'top' ? undefined : bottomOffset,
+        top: position === 'top' ? 100 : undefined,
+        left: '5%',
+        width: '90%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 10,
+    };
+
+    // WAVE STYLE ONLY
+    // Mirrored wave with high detail
+    const relevantFreqs = frequencyData.slice(0, 100);
+
+    return (
+        <div style={containerStyle}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '3px', width: '100%', justifyContent: 'center' }}>
+                {relevantFreqs.map((v: number, i: number) => {
+                    const amplified = getVisualValue(v);
+                    const h = Math.max(3, 50 + (amplified * 200));
+
+                    return (
+                        <div
+                            key={i}
+                            style={{
+                                flex: 1,
+                                maxWidth: '6px',
+                                height: `${h}px`,
+                                backgroundColor: color,
+                                borderRadius: '3px',
+                                opacity: 0.85,
+                                transform: `scaleY(${i % 2 === 0 ? 1 : -0.7})`,
+                                transition: 'height 0.1s ease-out',
+                            }}
+                        />
+                    );
+                })}
+            </div>
+        </div>
+    );
+};

remotion/MainComposition.tsx

@@ -0,0 +1,41 @@
+import { AbsoluteFill, Sequence, Series } from 'remotion';
+import { z } from 'zod';
+import { Scene } from './Scene';
+import { ProjectSettings, SceneApi } from '../types';
+
+export const MainCompositionSchema = z.object({
+    scenes: z.array(z.any()), // refined type below
+    settings: z.any()
+});
+
+type Props = {
+    scenes: SceneApi[];
+    settings: ProjectSettings;
+}
+
+export const MainComposition: React.FC<Props> = ({ scenes, settings }) => {
+    if (!scenes || scenes.length === 0) {
+        return (
+            <AbsoluteFill className="bg-black flex items-center justify-center">
+                <h1 className="text-white text-4xl">Waiting for scenes...</h1>
+            </AbsoluteFill>
+        )
+    }
+
+    return (
+        <AbsoluteFill className="bg-black">
+            <Series>
+                {scenes.map((scene) => {
+                    const durationInSeconds = scene.duration || 5;
+                    const durationInFrames = Math.ceil(durationInSeconds * 30);
+
+                    return (
+                        <Series.Sequence key={scene.id} durationInFrames={durationInFrames}>
+                            <Scene scene={scene} settings={settings} />
+                        </Series.Sequence>
+                    )
+                })}
+            </Series>
+        </AbsoluteFill>
+    );
+};

remotion/Root.tsx

@@ -0,0 +1,56 @@
+import { Composition } from 'remotion';
+import { MainComposition } from './MainComposition';
+
+export const RemotionRoot: React.FC = () => {
+    return (
+        <>
+            <Composition
+                id="Main"
+                component={MainComposition}
+                durationInFrames={150}
+                fps={30}
+                width={1920}
+                height={1080}
+                defaultProps={{
+                    scenes: [],
+                    settings: {
+                        aspectRatio: '16:9' as const,
+                        visualStyle: 'zen',
+                        imageModel: 'fal',
+                        audioVoice: 'English_ManWithDeepVoice',
+                        disclaimerEnabled: false,
+                        captions: {
+                            enabled: true,
+                            position: 'bottom' as const,
+                            font: 'helvetica',
+                            fontSize: 'medium' as const,
+                            animation: 'typewriter' as const,
+                            strokeWidth: 'medium' as const,
+                        },
+                        transitions: {
+                            mode: 'random',
+                            type: 'fadein',
+                        },
+                    },
+                }}
+                calculateMetadata={({ props }) => {
+                    // Calculate total duration based on individual scene frames to prevent rounding errors
+                    const totalFrames = props.scenes.reduce((acc, scene) => {
+                        return acc + Math.ceil((scene.duration || 5) * 30);
+                    }, 0);
+
+                    // Calculate dimensions based on aspect ratio
+                    const isPortrait = props.settings.aspectRatio === '9:16';
+                    const width = isPortrait ? 1080 : 1920;
+                    const height = isPortrait ? 1920 : 1080;
+
+                    return {
+                        durationInFrames: totalFrames || 150,
+                        width,
+                        height,
+                    };
+                }}
+            />
+        </>
+    );
+};

remotion/Scene.tsx

@@ -0,0 +1,207 @@
+import { AbsoluteFill, Img, Video, useCurrentFrame, useVideoConfig, interpolate, Easing, Audio } from 'remotion';
+import { SceneApi, ProjectSettings } from './types';
+import { AudioWave } from './AudioWave';
+
+type Props = {
+    scene: SceneApi;
+    settings: ProjectSettings;
+};
+
+export const Scene: React.FC<Props> = ({ scene, settings }) => {
+    const frame = useCurrentFrame();
+    const { fps, width, height } = useVideoConfig();
+    const durationFrames = Math.ceil((scene.duration || 5) * fps);
+
+    // Transition duration (in frames) - 0.3 seconds
+    const transitionDuration = fps * 0.3;
+
+    // Calculate transition opacity/effects
+    const getTransitionStyle = () => {
+        if (frame >= transitionDuration) return {};
+
+        const progress = frame / transitionDuration;
+
+        switch (settings.transitions.type) {
+            case 'fadein':
+                return { opacity: interpolate(frame, [0, transitionDuration], [0, 1]) };
+
+            case 'crossfade':
+                return { opacity: interpolate(frame, [0, transitionDuration], [0, 1]) };
+
+            case 'white_flash':
+                const whiteFlash = interpolate(frame, [0, transitionDuration * 0.5, transitionDuration], [1, 0, 0], { extrapolateRight: 'clamp' });
+                return {
+                    opacity: 1,
+                    filter: `brightness(${1 + whiteFlash * 3})`
+                };
+
+            case 'camera_flash':
+                const cameraBright = interpolate(frame, [0, transitionDuration * 0.3, transitionDuration], [2, 1, 1], { extrapolateRight: 'clamp' });
+                return {
+                    filter: `brightness(${cameraBright}) contrast(${interpolate(frame, [0, transitionDuration], [1.5, 1])})`
+                };
+
+            case 'none':
+            default:
+                return {};
+        }
+    };
+
+    // Ken Burns Effect (Slow Zoom)
+    const scale = interpolate(
+        frame,
+        [0, durationFrames],
+        [1, 1.15], // Zoom from 100% to 115%
+        { easing: Easing.bezier(0.25, 1, 0.5, 1) }
+    );
+
+    // Slight Pan (Random direction simulation using order_index as seed logic)
+    // Simple pan right for now
+    const translateX = interpolate(
+        frame,
+        [0, durationFrames],
+        [0, -20]
+    );
+
+    return (
+        <AbsoluteFill style={{ overflow: 'hidden', ...getTransitionStyle() }}>
+            {/* Background Image with Ken Burns */}
+            {scene.image_url ? (
+                <AbsoluteFill style={{ transform: `scale(${scale}) translateX(${translateX}px)` }}>
+                    {(scene.media_type === 'video' || scene.image_url.includes('.mp4')) ? (
+                        <Video
+                            src={scene.image_url}
+                            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                            muted={true}
+                            // Loop video if shorter than scene duration
+                            loop
+                        />
+                    ) : (
+                        <Img
+                            src={scene.image_url}
+                            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                        />
+                    )}
+                </AbsoluteFill>
+            ) : (
+                <AbsoluteFill style={{
+                    backgroundColor: '#111827', // gray-900
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }}>
+                    <span style={{ color: 'white' }}>Generating Image...</span>
+                </AbsoluteFill>
+            )}
+
+            {/* Audio */}
+            {scene.audio_url && (
+                <Audio
+                    src={scene.audio_url}
+                    volume={1}
+                    startFrom={0}
+                />
+            )}
+
+            {/* Audio Wave Visualization */}
+            {settings.audioWave?.enabled && scene.audio_url && (
+                <AudioWave
+                    audioUrl={scene.audio_url}
+                    style={settings.audioWave.style}
+                    position={settings.audioWave.position}
+                    color={settings.audioWave.color}
+                />
+            )}
+
+            {/* Captions */}
+            {settings.captions.enabled && (
+                <AbsoluteFill
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        pointerEvents: 'none',
+                        paddingLeft: 32,
+                        paddingRight: 32,
+                        // Dynamic alignment
+                        justifyContent: settings.captions.position === 'top' ? 'flex-start' :
+                            settings.captions.position === 'center' ? 'center' :
+                                'flex-end',
+                        paddingTop: settings.captions.position === 'top' ? 64 : 0,
+                        paddingBottom: settings.captions.position === 'mid-bottom' ? 128 :
+                            settings.captions.position === 'bottom' ? 64 : 0,
+                        width: '100%',
+                        height: '100%'
+                    }}
+                >
+                    <div
+                        style={{
+                            color: 'white',
+                            textAlign: 'center',
+                            maxWidth: '85%',
+                            lineHeight: 1.25,
+                            fontFamily: settings.captions.font === 'serif' ? 'serif' :
+                                settings.captions.font === 'brush' ? 'Brush Script MT, cursive' : 'sans-serif',
+
+                            // Dynamic font size
+                            fontSize: (() => {
+                                const sizeMap = {
+                                    small: height > width ? (width < 500 ? 24 : 36) : (width < 1000 ? 32 : 48),
+                                    medium: height > width ? (width < 500 ? 32 : 48) : (width < 1000 ? 42 : 64),
+                                    large: height > width ? (width < 500 ? 40 : 60) : (width < 1000 ? 52 : 80),
+                                    xlarge: height > width ? (width < 500 ? 48 : 72) : (width < 1000 ? 64 : 96)
+                                };
+                                return sizeMap[settings.captions.fontSize || 'medium'];
+                            })(),
+
+                            fontWeight: settings.captions.strokeWidth === 'bold' ? 'bold' : 'normal',
+
+                            textShadow: (() => {
+                                const strokeMap = {
+                                    thin: '2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000',
+                                    medium: '3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
+                                    thick: '4px 4px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000',
+                                    bold: '5px 5px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 10px #000'
+                                };
+                                return strokeMap[settings.captions.strokeWidth || 'medium'];
+                            })(),
+
+                            // Animation-specific styles
+                            ...(settings.captions.animation === 'fade-in' ? {
+                                opacity: interpolate(frame, [0, durationFrames * 0.3], [0, 1], { extrapolateRight: 'clamp' })
+                            } : {}),
+                            ...(settings.captions.animation === 'slide-up' ? {
+                                transform: `translateY(${interpolate(frame, [0, durationFrames * 0.3], [50, 0], { extrapolateRight: 'clamp' })}px)`,
+                                opacity: interpolate(frame, [0, durationFrames * 0.3], [0, 1], { extrapolateRight: 'clamp' })
+                            } : {}),
+                            ...(settings.captions.animation === 'bounce' ? {
+                                transform: `scale(${interpolate(
+                                    frame,
+                                    [0, durationFrames * 0.15, durationFrames * 0.3],
+                                    [0.5, 1.1, 1],
+                                    { extrapolateRight: 'clamp', easing: Easing.bounce }
+                                )})`,
+                                opacity: frame < durationFrames * 0.3 ? interpolate(frame, [0, durationFrames * 0.15], [0, 1], { extrapolateRight: 'clamp' }) : 1
+                            } : {})
+                        }}
+                    >
+                        {(() => {
+                            const animation = settings.captions.animation || 'typewriter';
+
+                            // Typewriter Effect
+                            if (animation === 'typewriter') {
+                                const chars = scene.text.length;
+                                const progress = interpolate(frame, [0, durationFrames * 0.8], [0, chars]);
+                                const visibleChars = Math.floor(progress);
+                                return scene.text.slice(0, visibleChars);
+                            }
+
+                            // All other animations show full text
+                            return scene.text;
+                        })()}
+                    </div>
+                </AbsoluteFill>
+            )}
+        </AbsoluteFill>
+    );
+};

remotion/index.tsx

@@ -0,0 +1,4 @@
+import { registerRoot } from 'remotion';
+import { RemotionRoot } from './Root';
+
+registerRoot(RemotionRoot);

remotion/types.ts

@@ -0,0 +1,36 @@
+export interface SceneApi {
+    id: string;
+    text: string;
+    duration: number;
+    image_url: string | null;
+    audio_url: string | null;
+    status: 'pending' | 'ready' | 'error';
+    order_index: number;
+    media_type?: 'image' | 'video';
+}
+
+export interface ProjectSettings {
+    aspectRatio: '16:9' | '9:16';
+    visualStyle: string;
+    imageModel: string;
+    audioVoice: string;
+    disclaimerEnabled: boolean;
+    captions: {
+        enabled: boolean;
+        position: 'top' | 'center' | 'bottom' | 'mid-bottom';
+        font: string;
+        fontSize: 'small' | 'medium' | 'large' | 'xlarge';
+        animation: 'typewriter' | 'fade-in' | 'slide-up' | 'bounce';
+        strokeWidth: 'thin' | 'medium' | 'thick' | 'bold';
+    };
+    audioWave: {
+        enabled: boolean;
+        position: 'bottom' | 'center' | 'top' | 'mid-bottom';
+        style: 'bars' | 'wave' | 'round';
+        color: string;
+    };
+    transitions: {
+        mode: string;
+        type: string;
+    };
+}

server.js

@@ -0,0 +1,152 @@
+import express from 'express';
+import cors from 'cors';
+import { bundle } from '@remotion/bundler';
+import { renderMedia, selectComposition } from '@remotion/renderer';
+import { readFile, mkdir, rm } from 'fs/promises';
+import { tmpdir } from 'os';
+import { join, dirname } from 'path';
+import { randomUUID } from 'crypto';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const app = express();
+const PORT = process.env.PORT || 7860;
+
+app.use(cors());
+app.use(express.json({ limit: '50mb' }));
+
+// Health check
+app.get('/', (req, res) => {
+    res.json({ status: 'ok', service: 'FacelessFlowAI Video Renderer' });
+});
+
+// Render endpoint
+app.post('/render', async (req, res) => {
+    const { projectId, scenes, settings } = req.body;
+
+    if (!projectId || !scenes || !settings) {
+        return res.status(400).json({ error: 'Missing projectId, scenes, or settings' });
+    }
+
+    // Initialize Supabase Admin Client
+    const SUPABASE_URL = process.env.SUPABASE_URL;
+    const SUPABASE_SERVICE_ROLE_KEY = process.env.SUPABASE_SERVICE_ROLE_KEY;
+
+    if (!SUPABASE_URL || !SUPABASE_SERVICE_ROLE_KEY) {
+        console.error('[Config] Missing Supabase credentials');
+        return res.status(500).json({ error: 'Renderer configuration error' });
+    }
+
+    const { createClient } = await import('@supabase/supabase-js');
+    const supabase = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY);
+
+    // 1. Respond immediately
+    res.json({ success: true, message: 'Rendering started in background' });
+
+    // 2. Start Background Process
+    (async () => {
+        try {
+            console.log(`[Render] Starting background render for project ${projectId}`);
+
+            const bundleLocation = await bundle({
+                entryPoint: join(__dirname, 'remotion', 'index.tsx'),
+                webpackOverride: (config) => config,
+            });
+
+            const composition = await selectComposition({
+                serveUrl: bundleLocation,
+                id: 'Main',
+                inputProps: { scenes, settings },
+                chromiumOptions: { executablePath: process.env.CHROME_BIN || '/usr/bin/chromium' },
+            });
+
+            const tempDir = join(tmpdir(), `remotion-${randomUUID()}`);
+            await mkdir(tempDir, { recursive: true });
+            const outputPath = join(tempDir, 'output.mp4');
+
+            const os = await import('os');
+            const cpuCount = os.cpus().length;
+            console.log(`[Render] Detected ${cpuCount} CPUs. Using all cores for rendering.`);
+
+            // HuggingFace Spaces (Free Tier) often reports host CPUs (e.g. 16) but enforces a 2-core limit.
+            // Remotion crashes if we request more threads than the system allows.
+            const safeConcurrency = Math.min(cpuCount, 2);
+            console.log(`[Render] Requesting concurrency: ${safeConcurrency} (Host has ${cpuCount})`);
+
+            await renderMedia({
+                composition,
+                serveUrl: bundleLocation,
+                codec: 'h264',
+                pixelFormat: 'yuv420p',
+                outputLocation: outputPath,
+                inputProps: { scenes, settings },
+                chromiumOptions: {
+                    executablePath: process.env.CHROME_BIN || '/usr/bin/chromium',
+                    enableMultiProcessRendering: true,
+                },
+                concurrency: safeConcurrency,
+                disallowParallelEncoding: false,
+                ffmpegOverride: {
+                    customCommands: '-hwaccel cuda -hwaccel_output_format cuda'
+                }
+            });
+
+            console.log(`[Render] Render complete. Uploading to Supabase...`);
+
+            const videoBuffer = await readFile(outputPath);
+
+            // Upload to Supabase Storage
+            const fileName = `${projectId}/video-${Date.now()}.mp4`;
+            const { data: uploadData, error: uploadError } = await supabase
+                .storage
+                .from('projects') // Assuming 'projects' bucket exists
+                .upload(fileName, videoBuffer, {
+                    contentType: 'video/mp4',
+                    upsert: true
+                });
+
+            if (uploadError) throw new Error(`Upload failed: ${uploadError.message}`);
+
+            // Get Public URL
+            const { data: { publicUrl } } = supabase
+                .storage
+                .from('projects')
+                .getPublicUrl(fileName);
+
+            console.log(`[Render] Uploaded to ${publicUrl}`);
+
+            // Update Project in DB
+            const { error: dbError } = await supabase
+                .from('projects')
+                .update({
+                    status: 'done',
+                    video_url: publicUrl
+                })
+                .eq('id', projectId);
+
+            if (dbError) throw new Error(`DB Update failed: ${dbError.message}`);
+
+            console.log(`[Render] Project ${projectId} updated successfully`);
+
+            // Cleanup
+            await rm(tempDir, { recursive: true, force: true });
+
+        } catch (error) {
+            console.error(`[Render] Background Error for ${projectId}:`, error);
+            // Optionally update project status to 'error' if you had that status
+        }
+    })();
+});
+
+app.listen(PORT, () => {
+    console.log(`🎬 FacelessFlowAI Renderer running on port ${PORT}`);
+
+    // Debug: Check for Secrets on Startup
+    console.log('--- Environment Check ---');
+    console.log('SUPABASE_URL exists:', !!process.env.SUPABASE_URL);
+    console.log('SUPABASE_SERVICE_ROLE_KEY exists:', !!process.env.SUPABASE_SERVICE_ROLE_KEY);
+    console.log('Available Keys (starts with SUPA):', Object.keys(process.env).filter(k => k.startsWith('SUPA')));
+    console.log('-------------------------');
+});