cm-video-factory

CM Video Factory v2.0 — Mass Video Production Engine (Private)

A self-hosted, batch-capable video factory built on Remotion React (code-to-video). Scripts → TTS → Subtitles → Render → Policy Check → Publish.

Dual format: 9:16 vertical (TikTok/Shorts/Reels) + 16:9 horizontal (YouTube). Dual language: Vietnamese (VieNeu-TTS) + English (ElevenLabs/OpenAI).

Spiritual twin of cm-content-factory, focused on Short-Form + Long-Form video at scale.

Core Philosophy

• Video is Math, Not Art. React components define every frame. JSON scripts define every word.
• VibeCoding Aesthetic. Dark SaaS visuals, cyan #00F0FF glow, Fira Code, engineering UI motifs.
• Content Mastery DNA. Every script uses SB7, Cialdini, Hook Formulas. No boring "Hello guys" intros.
• Batch-First. One command renders 10+ videos overnight. Queue, progress, retry, resume.
• Policy-Safe. Built-in guardrails prevent shadowbans, demonetization, and content strikes.

Architecture

┌─────────────────────────────────────────────────────────────┐
│                  📹 CM VIDEO FACTORY v2.0                    │
│            Batch Code-to-Video Production Engine             │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌──────────┐   ┌──────────┐   ┌──────────┐   ┌────────┐  │
│  │  SCRIPT  │──▶│   TTS    │──▶│ SUBTITLE │──▶│ RENDER │  │
│  │ Generator│   │  Engine  │   │ @remotion/│   │ Engine │  │
│  │ (JSON)   │   │ VieNeu + │   │ captions  │   │ Batch  │  │
│  │ CM hooks │   │ ElevenL  │   │ SRT+JSON  │   │ Queue  │  │
│  └──────────┘   └──────────┘   └──────────┘   └────────┘  │
│       │              │              │              │        │
│  ┌────┴──────────────┴──────────────┴──────────────┴────┐  │
│  │              🎛️ FORMAT ROUTER                         │  │
│  │   ┌─────────────┐          ┌──────────────┐          │  │
│  │   │  VERTICAL   │          │  HORIZONTAL  │          │  │
│  │   │  9:16       │          │  16:9        │          │  │
│  │   │  1080×1920  │          │  1920×1080   │          │  │
│  │   │  TikTok     │          │  YouTube     │          │  │
│  │   │  Reels      │          │  Facebook    │          │  │
│  │   │  Shorts     │          │              │          │  │
│  │   └─────────────┘          └──────────────┘          │  │
│  └──────────────────────────────────────────────────────┘  │
│                                                             │
│  ┌──────────────────────────────────────────────────────┐  │
│  │              🛡️ POLICY COMPLIANCE ENGINE              │  │
│  │  Content scan | AI labeling | Upload throttle | Hash │  │
│  └──────────────────────────────────────────────────────┘  │
│                                                             │
│  ┌──────────────────────────────────────────────────────┐  │
│  │              📊 BATCH QUEUE MANAGER                   │  │
│  │  queue.json | progress.json | retry logic | cron     │  │
│  └──────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

Quick Start

# 1. Setup Remotion project (one-time)
cd video-factory && npm install

# 2. Generate single video (interactive)
node scripts/pipeline.js --script scripts-input/video_01.json --format tiktok

# 3. Batch render (queue-based)
node scripts/batch-runner.js --queue queue.json --batch-size 5

# 4. Resume interrupted batch
node scripts/batch-runner.js --queue queue.json --resume

# 5. Preview in browser (hot reload)
npx remotion studio

7-Phase Execution Pipeline

Phase 1: 🔬 RESEARCH

Scrape documentation, GitHub repos, URLs. Build knowledge base per topic. Uses cm-cro-methodology to identify pain points for maximum hook impact.

Phase 2: ✍️ SCRIPT (JSON)

AI generates strictly-keyed JSON scripts. One JSON = one video.

{
  "id": "video_042",
  "title": "Debug mệt mỏi?",
  "hook": "99% Dev tốn thanh xuân để debug vì bỏ qua quy tắc này.",
  "hook_formula": "data_shock",
  "language": "vi",
  "duration_target": 45,
  "format": "tiktok",
  "scenes": [
    {
      "time_start": 0,
      "duration": 3.5,
      "text": "99% Dev tốn thanh xuân để debug vì...",
      "visual": "TerminalCrashView",
      "props": { "error": "SIGSEGV", "animation": "glitch" }
    },
    {
      "time_start": 3.5,
      "duration": 5,
      "text": "Với Cody Master, lỗi tự phơi bày trong 2 giây.",
      "visual": "CodeGlowView",
      "props": { "code": "cm-debugging --trace", "highlight": true }
    }
  ],
  "cta": "Click link ở Bio để cài đặt miễn phí.",
  "hashtags": ["#vibecoding", "#devtools", "#codymaster"],
  "metadata": {
    "ai_generated": true,
    "ai_disclosure": "Video created with AI-assisted animation and voice synthesis"
  }
}

Phase 3: 🎙️ TTS (Voice Synthesis)

TTS Engine Router — auto-detect language → best engine:

| Language | Primary Engine | Fallback | Voice Cloning | |----------|---------------|----------|---------------| | Vietnamese | VieNeu-TTS 0.5B | OpenAI TTS | ✅ (3-5s ref) | | English | ElevenLabs multilingual_v2 | OpenAI TTS | ✅ (paid) |

# Vietnamese TTS (VieNeu-TTS SDK)
from vieneu import Vieneu
tts = Vieneu()
audio = tts.infer(text="Xin chào, đây là VibeCoding Academy")
tts.save(audio, "audio_vi.wav")

# English TTS (ElevenLabs via infsh CLI)
infsh app run elevenlabs/tts --input '{
  "text": "Welcome to the VibeCoding revolution.",
  "voice": "george",
  "model": "eleven_multilingual_v2",
  "stability": 0.5,
  "similarity_boost": 0.8
}'

Outputs:

• audio.mp3 — Final audio track
• audio.json — Word-level timestamps (for subtitle sync)
• audio.srt — Standard SRT file (for YouTube upload)

Phase 4: 📝 SUBTITLE ENGINE (@remotion/captions)

Uses official Remotion captions package for frame-perfect sync:

import { parseSrt, createTikTokStyleCaptions } from "@remotion/captions";

// Parse SRT from TTS output
const captions = parseSrt({ input: srtContent });

// Create TikTok-style word-by-word highlights
const { pages } = createTikTokStyleCaptions({
  captions,
  combineTokensWithinMilliseconds: 800,
});

// Render in React component
const SubtitleOverlay: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const currentTime = (frame / fps) * 1000; // ms

  return (
    <AbsoluteFill style={{ justifyContent: "flex-end", padding: 40 }}>
      {pages.map((page) => (
        <CaptionPage key={page.startMs} page={page} currentTime={currentTime} />
      ))}
    </AbsoluteFill>
  );
};

Phase 5: 🎨 RENDER (Remotion)

Dual-format compositions:

// Root.tsx — Two compositions for two formats
export const RemotionRoot: React.FC = () => (
  <>
    <Composition
      id="TikTokVideo"
      component={TikTokComposition}
      width={1080}
      height={1920}
      fps={30}
      durationInFrames={durationFromAudio}
    />
    <Composition
      id="YouTubeVideo"
      component={YouTubeComposition}
      width={1920}
      height={1080}
      fps={30}
      durationInFrames={durationFromAudio}
    />
  </>
);

Render commands:

# TikTok vertical (9:16)
npx remotion render src/index.ts TikTokVideo out/tiktok_video_042.mp4

# YouTube horizontal (16:9)
npx remotion render src/index.ts YouTubeVideo out/youtube_video_042.mp4

# Benchmark optimal concurrency first
npx remotion benchmark --composition TikTokVideo

Remotion Performance Rules (from remotion-dev/skills):

• ✅ All animations driven by useCurrentFrame() — never useEffect/setInterval
• ✅ Memoize expensive computations with useMemo/useCallback
• ✅ Avoid GPU-heavy CSS (filter: blur(), drop-shadow()) in components
• ✅ Use npx remotion benchmark to find optimal --concurrency
• ✅ Video duration = getAudioDurationInSeconds() + 2s bumper
• ✅ Use --log=verbose to iden