【Remotion×Python完全自動化】コードだけで動画を爆速錬成！YouTube/TikTok量産システム構築法

# 温室育ちのAIが涼しい顔で出力する「動くだけ」のアンチパターン
import os
import subprocess
from PIL import Image, ImageDraw, ImageFont

def generate_slide_legacy(text_list: list[str], output_path: str):
    # 1. ハードコードされたキャンバス生成
    img = Image.new("RGB", (1080, 1920), color=(15, 23, 42))
    draw = ImageDraw.Draw(img)
    font = ImageFont.truetype("NotoSansJP-Bold.ttf", size=44)

    # 2. 手動座標計算という名の原始的苦行（バウンディングボックス地獄）
    y_offset = 400
    max_width = 900

    for text in text_list:
        # 自前でテキストの折り返しを試みる悲惨なループ処理
        current_line = ""
        for char in text:
            test_line = current_line + char
            # getbboxによる文字幅の手動計測
            bbox = font.getbbox(test_line)
            text_width = bbox[2] - bbox[0]

            if text_width > max_width:
                # 助詞の泣き別れや句読点禁則を無視した暴力的な改行
                draw.text((90, y_offset), current_line, fill=(248, 250, 252), font=font)
                y_offset += 64
                current_line = char
            else:
                current_line = test_line

        if current_line:
            draw.text((90, y_offset), current_line, fill=(248, 250, 252), font=font)
            y_offset += 96

    img.save(output_path)

# 3. FFmpegで静止画を動画化（知性の感じられないアプローチ）
# subprocess.run(["ffmpeg", "-y", "-loop", "1", "-i", output_path, "-c:v", "libx264", "-t", "5", "-pix_fmt", "yuv420p", "out.mp4"])

# 温室育ちのAIが涼しい顔で出力する「動くだけ」のアンチパターン
import os
import subprocess
from PIL import Image, ImageDraw, ImageFont

def generate_slide_legacy(text_list: list[str], output_path: str):
    # 1. ハードコードされたキャンバス生成
    img = Image.new("RGB", (1080, 1920), color=(15, 23, 42))
    draw = ImageDraw.Draw(img)
    font = ImageFont.truetype("NotoSansJP-Bold.ttf", size=44)

    # 2. 手動座標計算という名の原始的苦行（バウンディングボックス地獄）
    y_offset = 400
    max_width = 900

    for text in text_list:
        # 自前でテキストの折り返しを試みる悲惨なループ処理
        current_line = ""
        for char in text:
            test_line = current_line + char
            # getbboxによる文字幅の手動計測
            bbox = font.getbbox(test_line)
            text_width = bbox[2] - bbox[0]

            if text_width > max_width:
                # 助詞の泣き別れや句読点禁則を無視した暴力的な改行
                draw.text((90, y_offset), current_line, fill=(248, 250, 252), font=font)
                y_offset += 64
                current_line = char
            else:
                current_line = test_line

        if current_line:
            draw.text((90, y_offset), current_line, fill=(248, 250, 252), font=font)
            y_offset += 96

    img.save(output_path)

# 3. FFmpegで静止画を動画化（知性の感じられないアプローチ）
# subprocess.run(["ffmpeg", "-y", "-loop", "1", "-i", output_path, "-c:v", "libx264", "-t", "5", "-pix_fmt", "yuv420p", "out.mp4"])

[Headless Chromium] ──── (内部クロックを仮想化・固定)
         │
  [Frame 0 評価] ─── DOM静止判定 ───> FrameBuffer 吸い上げ ───> [FFmpeg Raw Pipe]
         │
  [Frame 1 評価] ─── DOM静止判定 ───> FrameBuffer 吸い上げ ───> [FFmpeg Raw Pipe]
         │
  [Frame N 評価] ─── DOM静止判定 ───> FrameBuffer 吸い上げ ───> [MP4 出力完了]

[Headless Chromium] ──── (内部クロックを仮想化・固定)
         │
  [Frame 0 評価] ─── DOM静止判定 ───> FrameBuffer 吸い上げ ───> [FFmpeg Raw Pipe]
         │
  [Frame 1 評価] ─── DOM静止判定 ───> FrameBuffer 吸い上げ ───> [FFmpeg Raw Pipe]
         │
  [Frame N 評価] ─── DOM静止判定 ───> FrameBuffer 吸い上げ ───> [MP4 出力完了]

import React from 'react';
import { useCurrentFrame, useVideoConfig, interpolate, spring } from 'remotion';

export const KineticTitle: React.FC<{ titleText: string }> = ({ titleText }) => {
  // 現在の離散フレーム番号とコンポジション設定を取得
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 物理演算によるスプリングアニメーション（0フレーム目から開始）
  // 剛性120、質量0.5、減衰12の極上イージングでオーバーシュート感を演出
  const scaleProgress = spring({
    frame,
    fps,
    config: {
      damping: 12,    // 減衰係数（小さいほど振動が残る）
      mass: 0.5,       // 質量（小さいほど機敏に動く）
      stiffness: 120,  // バネの硬さ（大きいほど初速が鋭い）
    },
  });

  // フレームに応じた透明度イージング
  const opacity = interpolate(frame, [0, 8], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div
      style={{
        transform: `scale(${scaleProgress})`,
        opacity,
        fontSize: '44px',
        fontWeight: 800,
        color: '#38bdf8',
        fontFamily: '"JetBrains Mono", system-ui, sans-serif',
        textShadow: '0 0 20px rgba(56, 189, 248, 0.4)',
        letterSpacing: '-0.02em',
      }}
    >
      {titleText}
    </div>
  );
};

import React from 'react';
import { useCurrentFrame, useVideoConfig, interpolate, spring } from 'remotion';

export const KineticTitle: React.FC<{ titleText: string }> = ({ titleText }) => {
  // 現在の離散フレーム番号とコンポジション設定を取得
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 物理演算によるスプリングアニメーション（0フレーム目から開始）
  // 剛性120、質量0.5、減衰12の極上イージングでオーバーシュート感を演出
  const scaleProgress = spring({
    frame,
    fps,
    config: {
      damping: 12,    // 減衰係数（小さいほど振動が残る）
      mass: 0.5,       // 質量（小さいほど機敏に動く）
      stiffness: 120,  // バネの硬さ（大きいほど初速が鋭い）
    },
  });

  // フレームに応じた透明度イージング
  const opacity = interpolate(frame, [0, 8], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div
      style={{
        transform: `scale(${scaleProgress})`,
        opacity,
        fontSize: '44px',
        fontWeight: 800,
        color: '#38bdf8',
        fontFamily: '"JetBrains Mono", system-ui, sans-serif',
        textShadow: '0 0 20px rgba(56, 189, 248, 0.4)',
        letterSpacing: '-0.02em',
      }}
    >
      {titleText}
    </div>
  );
};

import React from 'react';
import { Composition, CalculateMetadataFunction } from 'remotion';
import { ShortVideoComposition } from './ShortVideoComposition';

// Pythonバックエンドから注入される動的Propsのインターフェース
export interface VideoScriptProps {
  hookTitle: string;
  bulletPoints: string[];
  themeColor: string;
  audioDurationInSec?: number;
}

// 音声尺や台本内容に応じて動画全体の長さを動的に算出するメタデータ関数
const calculateVideoMetadata: CalculateMetadataFunction<VideoScriptProps> = async ({ props }) => {
  const fps = 30;
  // Pythonから渡された音声秒数に基づく動的フレーム計算（未指定時はデフォルト15秒）
  const durationInSeconds = props.audioDurationInSec ?? 15;

  return {
    durationInFrames: Math.ceil(durationInSeconds * fps),
    props: {
      ...props,
    },
  };
};

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="AutonomousShortVideo"
      component={ShortVideoComposition}
      durationInFrames={30 * 15} // calculateMetadataにより動的に上書きされる初期値
      fps={30}
      width={1080}
      height={1920}
      calculateMetadata={calculateVideoMetadata}
      defaultProps={{
        hookTitle: "AI動画の紙芝居感を完全撲滅する技術",
        bulletPoints: [
          "Pillowによる手動座標計算の限界",
          "Remotionによる物理演算の導入",
          "FFmpeg多重合成による音ズレ根絶"
        ],
        themeColor: "#38bdf8",
        audioDurationInSec: 15,
      }}
    />
  );
};

import React from 'react';
import { Composition, CalculateMetadataFunction } from 'remotion';
import { ShortVideoComposition } from './ShortVideoComposition';

// Pythonバックエンドから注入される動的Propsのインターフェース
export interface VideoScriptProps {
  hookTitle: string;
  bulletPoints: string[];
  themeColor: string;
  audioDurationInSec?: number;
}

// 音声尺や台本内容に応じて動画全体の長さを動的に算出するメタデータ関数
const calculateVideoMetadata: CalculateMetadataFunction<VideoScriptProps> = async ({ props }) => {
  const fps = 30;
  // Pythonから渡された音声秒数に基づく動的フレーム計算（未指定時はデフォルト15秒）
  const durationInSeconds = props.audioDurationInSec ?? 15;

  return {
    durationInFrames: Math.ceil(durationInSeconds * fps),
    props: {
      ...props,
    },
  };
};

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="AutonomousShortVideo"
      component={ShortVideoComposition}
      durationInFrames={30 * 15} // calculateMetadataにより動的に上書きされる初期値
      fps={30}
      width={1080}
      height={1920}
      calculateMetadata={calculateVideoMetadata}
      defaultProps={{
        hookTitle: "AI動画の紙芝居感を完全撲滅する技術",
        bulletPoints: [
          "Pillowによる手動座標計算の限界",
          "Remotionによる物理演算の導入",
          "FFmpeg多重合成による音ズレ根絶"
        ],
        themeColor: "#38bdf8",
        audioDurationInSec: 15,
      }}
    />
  );
};

autonomous-video-pipeline/
├── backend/
│   ├── orchestrator.py         # Pythonメイン実行・LLM台本生成
│   ├── render_bridge.py        # Remotion CLI サブプロセス呼び出し
│   ├── ffmpeg_composer.py      # FFmpeg 多重合成・フォールバック
│   └── requirements.txt        # 依存ライブラリ (Pillow, requests等)
├── remotion-engine/
│   ├── src/
│   │   ├── Root.tsx            # Composition / Zodスキーマ / calculateMetadata
│   │   ├── MainVideoComposition.tsx
│   │   ├── KineticHeader.tsx   # 物理バネ吸着コンポーネント
│   │   ├── StaggerBulletList.tsx
│   │   └── AmbientBackground.tsx
│   ├── public/                 # 静的アセット (フォント, アイコン等)
│   ├── package.json
│   ├── tsconfig.json
│   └── remotion.config.ts      # ANGLE / GPU設定
└── storage/
    ├── temp/                   # 一時JSON / 一時無音MP4
    └── output/                  # 完パケMP4の出力先

autonomous-video-pipeline/
├── backend/
│   ├── orchestrator.py         # Pythonメイン実行・LLM台本生成
│   ├── render_bridge.py        # Remotion CLI サブプロセス呼び出し
│   ├── ffmpeg_composer.py      # FFmpeg 多重合成・フォールバック
│   └── requirements.txt        # 依存ライブラリ (Pillow, requests等)
├── remotion-engine/
│   ├── src/
│   │   ├── Root.tsx            # Composition / Zodスキーマ / calculateMetadata
│   │   ├── MainVideoComposition.tsx
│   │   ├── KineticHeader.tsx   # 物理バネ吸着コンポーネント
│   │   ├── StaggerBulletList.tsx
│   │   └── AmbientBackground.tsx
│   ├── public/                 # 静的アセット (フォント, アイコン等)
│   ├── package.json
│   ├── tsconfig.json
│   └── remotion.config.ts      # ANGLE / GPU設定
└── storage/
    ├── temp/                   # 一時JSON / 一時無音MP4
    └── output/                  # 完パケMP4の出力先

import json
import os
import subprocess
import sys
import tempfile
import time
from pathlib import Path
from typing import Any, Dict

def render_remotion_video(
    composition_id: str,
    props_data: Dict[str, Any],
    output_mp4_path: Path,
    remotion_root_dir: Path,
    timeout_sec: int = 90
) -> bool:
    """
    Pythonから一時JSON経由でRemotion CLIを安全かつ高速にキックする高信頼実行関数
    """
    output_mp4_path = output_mp4_path.resolve()
    output_mp4_path.parent.mkdir(parents=True, exist_ok=True)

    # 1. 構造化Propsデータを一時JSONファイルとして完全にシリアライズ
    # Windows環境下での文字化け・エスケープ消失を防ぐため ensure_ascii=False を徹底
    temp_props_file = tempfile.NamedTemporaryFile(
        mode='w',
        suffix='.json',
        delete=False,
        encoding='utf-8'
    )

    try:
        json.dump(props_data, temp_props_file, ensure_ascii=False, indent=2)
        temp_props_file.flush()
        # Windowsのバックスラッシュ事故を防ぐため as_posix() でスラッシュパスに正規化
        temp_props_path = Path(temp_props_file.name).resolve()
        posix_props_path = temp_props_path.as_posix()
    finally:
        temp_props_file.close()

    # 2. OS環境差異を吸収した npx コマンドの解決 (Windowsは npx.cmd が必須)
    npx_cmd = "npx.cmd" if sys.platform == "win32" else "npx"

    # 3. 高度最適化CLIフラグの構築
    # Linux GPU環境（AWS EC2等）では angle-egl、Windows/Macでは angle を動的に選定
    gl_backend = "angle-egl" if sys.platform.startswith("linux") else "angle"

    cmd = [
        npx_cmd,
        "remotion",
        "render",
        composition_id,
        output_mp4_path.as_posix(),
        f"--props={posix_props_path}",
        f"--gl={gl_backend}",          # GPUハードウェアラスタライゼーションの強制 (ANGLE)
        "--concurrency=50%",           # CPU/メモリの飽和とプロセス競合を防ぐ黄金比率
        "--log=warn",                  # 不要な標準出力バッファのオーバーヘッドを抑制
        "--color-space=default",       # 色空間の無駄なトランスコードをバイパス
        "--pixel-format=yuv420p"       # 再生互換性を担保するピクセルフォーマット
    ]

    start_time = time.time()
    try:
        # 4. サブプロセスの同期実行と厳密なタイムアウト監視
        result = subprocess.run(
            cmd,
            cwd=str(remotion_root_dir.resolve()),
            capture_output=True,
            text=True,
            timeout=timeout_sec,
            check=True
        )
        elapsed = time.time() - start_time
        print(f"[Remotion Pipeline Success] Rendered: {output_mp4_path.name} in {elapsed:.2f}s")
        return True

    except subprocess.TimeoutExpired:
        print(f"[Remotion CRITICAL] Render process timed out (> {timeout_sec}s). Process killed.", file=sys.stderr)
        return False
    except subprocess.CalledProcessError as e:
        print(f"[Remotion ERROR] Exit Code {e.returncode}\nSTDERR:\n{e.stderr}", file=sys.stderr)
        return False
    except FileNotFoundError:
        print(f"[Remotion FATAL] Node.js/npx not found in system PATH. Check environment variables.", file=sys.stderr)
        return False
    finally:
        # 5. 生成した一時JSONの確実な抹消（ストレージリークの完全防止）
        if os.path.exists(temp_props_path):
            try:
                os.remove(temp_props_path)
            except OSError:
                pass

import json
import os
import subprocess
import sys
import tempfile
import time
from pathlib import Path
from typing import Any, Dict

def render_remotion_video(
    composition_id: str,
    props_data: Dict[str, Any],
    output_mp4_path: Path,
    remotion_root_dir: Path,
    timeout_sec: int = 90
) -> bool:
    """
    Pythonから一時JSON経由でRemotion CLIを安全かつ高速にキックする高信頼実行関数
    """
    output_mp4_path = output_mp4_path.resolve()
    output_mp4_path.parent.mkdir(parents=True, exist_ok=True)

    # 1. 構造化Propsデータを一時JSONファイルとして完全にシリアライズ
    # Windows環境下での文字化け・エスケープ消失を防ぐため ensure_ascii=False を徹底
    temp_props_file = tempfile.NamedTemporaryFile(
        mode='w',
        suffix='.json',
        delete=False,
        encoding='utf-8'
    )

    try:
        json.dump(props_data, temp_props_file, ensure_ascii=False, indent=2)
        temp_props_file.flush()
        # Windowsのバックスラッシュ事故を防ぐため as_posix() でスラッシュパスに正規化
        temp_props_path = Path(temp_props_file.name).resolve()
        posix_props_path = temp_props_path.as_posix()
    finally:
        temp_props_file.close()

    # 2. OS環境差異を吸収した npx コマンドの解決 (Windowsは npx.cmd が必須)
    npx_cmd = "npx.cmd" if sys.platform == "win32" else "npx"

    # 3. 高度最適化CLIフラグの構築
    # Linux GPU環境（AWS EC2等）では angle-egl、Windows/Macでは angle を動的に選定
    gl_backend = "angle-egl" if sys.platform.startswith("linux") else "angle"

    cmd = [
        npx_cmd,
        "remotion",
        "render",
        composition_id,
        output_mp4_path.as_posix(),
        f"--props={posix_props_path}",
        f"--gl={gl_backend}",          # GPUハードウェアラスタライゼーションの強制 (ANGLE)
        "--concurrency=50%",           # CPU/メモリの飽和とプロセス競合を防ぐ黄金比率
        "--log=warn",                  # 不要な標準出力バッファのオーバーヘッドを抑制
        "--color-space=default",       # 色空間の無駄なトランスコードをバイパス
        "--pixel-format=yuv420p"       # 再生互換性を担保するピクセルフォーマット
    ]

    start_time = time.time()
    try:
        # 4. サブプロセスの同期実行と厳密なタイムアウト監視
        result = subprocess.run(
            cmd,
            cwd=str(remotion_root_dir.resolve()),
            capture_output=True,
            text=True,
            timeout=timeout_sec,
            check=True
        )
        elapsed = time.time() - start_time
        print(f"[Remotion Pipeline Success] Rendered: {output_mp4_path.name} in {elapsed:.2f}s")
        return True

    except subprocess.TimeoutExpired:
        print(f"[Remotion CRITICAL] Render process timed out (> {timeout_sec}s). Process killed.", file=sys.stderr)
        return False
    except subprocess.CalledProcessError as e:
        print(f"[Remotion ERROR] Exit Code {e.returncode}\nSTDERR:\n{e.stderr}", file=sys.stderr)
        return False
    except FileNotFoundError:
        print(f"[Remotion FATAL] Node.js/npx not found in system PATH. Check environment variables.", file=sys.stderr)
        return False
    finally:
        # 5. 生成した一時JSONの確実な抹消（ストレージリークの完全防止）
        if os.path.exists(temp_props_path):
            try:
                os.remove(temp_props_path)
            except OSError:
                pass

// src/Root.tsx
import React from 'react';
import { Composition, CalculateMetadataFunction } from 'remotion';
import { z } from 'zod';
import { MainVideoComposition } from './MainVideoComposition';

// 1. Pythonから渡されるJSON構造をZodスキーマで厳密に定義
export const VideoPropsSchema = z.object({
  title: z.string(),
  subtitle: z.string().optional(),
  bulletPoints: z.array(z.string()),
  themeColor: z.string().default('#38bdf8'),
  audioDurationInSec: z.number().default(15),
});

export type VideoProps = z.infer<typeof VideoPropsSchema>;

// 2. 音声尺に応じた動的フレーム計算メタデータ関数
const calculateVideoMetadata: CalculateMetadataFunction<VideoProps> = async ({ props }) => {
  const fps = 30;
  const durationInSeconds = props.audioDurationInSec ?? 15;
  return {
    durationInFrames: Math.ceil(durationInSeconds * fps),
    props: {
      ...props,
    },
  };
};

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="AutoMotionVideo"
        component={MainVideoComposition}
        durationInFrames={450} // calculateMetadataにより動的に上書きされる初期値
        fps={30}
        width={1080}
        height={1920}
        schema={VideoPropsSchema}
        calculateMetadata={calculateVideoMetadata}
        defaultProps={{
          title: "AI動画自律生成の深層",
          subtitle: "Python × Remotion Architecture",
          bulletPoints: [
            "Pillow静止画の限界突破",
            "物理演算イージングの導入",
            "15秒高速レンダリングパイプライン"
          ],
          themeColor: "#38bdf8",
          audioDurationInSec: 15,
        }}
      />
    </>
  );
};

// src/Root.tsx
import React from 'react';
import { Composition, CalculateMetadataFunction } from 'remotion';
import { z } from 'zod';
import { MainVideoComposition } from './MainVideoComposition';

// 1. Pythonから渡されるJSON構造をZodスキーマで厳密に定義
export const VideoPropsSchema = z.object({
  title: z.string(),
  subtitle: z.string().optional(),
  bulletPoints: z.array(z.string()),
  themeColor: z.string().default('#38bdf8'),
  audioDurationInSec: z.number().default(15),
});

export type VideoProps = z.infer<typeof VideoPropsSchema>;

// 2. 音声尺に応じた動的フレーム計算メタデータ関数
const calculateVideoMetadata: CalculateMetadataFunction<VideoProps> = async ({ props }) => {
  const fps = 30;
  const durationInSeconds = props.audioDurationInSec ?? 15;
  return {
    durationInFrames: Math.ceil(durationInSeconds * fps),
    props: {
      ...props,
    },
  };
};

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="AutoMotionVideo"
        component={MainVideoComposition}
        durationInFrames={450} // calculateMetadataにより動的に上書きされる初期値
        fps={30}
        width={1080}
        height={1920}
        schema={VideoPropsSchema}
        calculateMetadata={calculateVideoMetadata}
        defaultProps={{
          title: "AI動画自律生成の深層",
          subtitle: "Python × Remotion Architecture",
          bulletPoints: [
            "Pillow静止画の限界突破",
            "物理演算イージングの導入",
            "15秒高速レンダリングパイプライン"
          ],
          themeColor: "#38bdf8",
          audioDurationInSec: 15,
        }}
      />
    </>
  );
};

import React from 'react';
import { interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';

interface KineticHeaderProps {
  title: string;
  category: string;
}

export const KineticHeader: React.FC<KineticHeaderProps> = ({ title, category }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 1. カテゴリバッジの鋭いポップイン（高剛性・低質量）
  const badgeSpring = spring({
    frame,
    fps,
    config: {
      damping: 12,   // 減衰: 小さいほど反発が残る
      mass: 0.4,      // 質量: 軽快な初速
      stiffness: 150, // 剛性: 鋭い飛び出し
    },
  });

  // 2. メインタイトルの知的なオーバーシュート吸着（黄金比率）
  const titleSpring = spring({
    frame: frame - 4, // 4フレーム遅延させて追従
    fps,
    config: {
      damping: 14,
      mass: 0.6,
      stiffness: 110,
    },
  });

  const badgeScale = interpolate(badgeSpring, [0, 1], [0.6, 1]);
  const badgeOpacity = interpolate(badgeSpring, [0, 1], [0, 1]);

  const titleTranslateY = interpolate(titleSpring, [0, 1], [40, 0]);
  const titleOpacity = interpolate(titleSpring, [0, 1], [0, 1]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', padding: '40px' }}>
      <div
        style={{
          transform: `scale(${badgeScale})`,
          opacity: badgeOpacity,
          alignSelf: 'flex-start',
          background: 'rgba(56, 189, 248, 0.15)',
          border: '1px solid rgba(56, 189, 248, 0.4)',
          color: '#38bdf8',
          padding: '4px 12px',
          borderRadius: '4px',
          fontSize: '14px',
          fontWeight: 600,
          fontFamily: 'JetBrains Mono, monospace',
          letterSpacing: '0.05em',
        }}
      >
        {category.toUpperCase()}
      </div>
      <h1
        style={{
          transform: `translateY(${titleTranslateY}px)`,
          opacity: titleOpacity,
          color: '#f8fafc',
          fontSize: '38px',
          fontWeight: 800,
          lineHeight: 1.2,
          fontFamily: 'sans-serif',
          margin: 0,
        }}
      >
        {title}
      </h1>
    </div>
  );
};

import React from 'react';
import { interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';

interface KineticHeaderProps {
  title: string;
  category: string;
}

export const KineticHeader: React.FC<KineticHeaderProps> = ({ title, category }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 1. カテゴリバッジの鋭いポップイン（高剛性・低質量）
  const badgeSpring = spring({
    frame,
    fps,
    config: {
      damping: 12,   // 減衰: 小さいほど反発が残る
      mass: 0.4,      // 質量: 軽快な初速
      stiffness: 150, // 剛性: 鋭い飛び出し
    },
  });

  // 2. メインタイトルの知的なオーバーシュート吸着（黄金比率）
  const titleSpring = spring({
    frame: frame - 4, // 4フレーム遅延させて追従
    fps,
    config: {
      damping: 14,
      mass: 0.6,
      stiffness: 110,
    },
  });

  const badgeScale = interpolate(badgeSpring, [0, 1], [0.6, 1]);
  const badgeOpacity = interpolate(badgeSpring, [0, 1], [0, 1]);

  const titleTranslateY = interpolate(titleSpring, [0, 1], [40, 0]);
  const titleOpacity = interpolate(titleSpring, [0, 1], [0, 1]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', padding: '40px' }}>
      <div
        style={{
          transform: `scale(${badgeScale})`,
          opacity: badgeOpacity,
          alignSelf: 'flex-start',
          background: 'rgba(56, 189, 248, 0.15)',
          border: '1px solid rgba(56, 189, 248, 0.4)',
          color: '#38bdf8',
          padding: '4px 12px',
          borderRadius: '4px',
          fontSize: '14px',
          fontWeight: 600,
          fontFamily: 'JetBrains Mono, monospace',
          letterSpacing: '0.05em',
        }}
      >
        {category.toUpperCase()}
      </div>
      <h1
        style={{
          transform: `translateY(${titleTranslateY}px)`,
          opacity: titleOpacity,
          color: '#f8fafc',
          fontSize: '38px',
          fontWeight: 800,
          lineHeight: 1.2,
          fontFamily: 'sans-serif',
          margin: 0,
        }}
      >
        {title}
      </h1>
    </div>
  );
};

import React from 'react';
import { interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';

interface StaggerBulletListProps {
  items: string[];
  baseStartFrame: number;
  staggerIntervalFrames?: number;
}

export const StaggerBulletList: React.FC<StaggerBulletListProps> = ({
  items,
  baseStartFrame,
  staggerIntervalFrames = 9, // 約0.3秒（30fps時）ごとに1行ずつ展開
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '14px', width: '100%', padding: '0 40px' }}>
      {items.map((text, index) => {
        const itemDelay = baseStartFrame + index * staggerIntervalFrames;

        // 【最重要】開始フレーム未到達の要素はDOMを完全に破棄（ゴースト根絶）
        if (frame < itemDelay) {
          return null;
        }

        // バネ物理演算による個別カードのスライドイン
        const progress = spring({
          frame: frame - itemDelay,
          fps,
          config: { damping: 14, mass: 0.6, stiffness: 110 },
        });

        const translateY = interpolate(progress, [0, 1], [24, 0]);
        const opacity = interpolate(progress, [0, 1], [0, 1]);

        return (
          <div
            key={index}
            style={{
              transform: `translateY(${translateY}px)`,
              opacity,
              display: 'flex',
              alignItems: 'center',
              gap: '12px',
              padding: '16px 20px',
              background: 'rgba(15, 23, 42, 0.75)',
              border: '1px solid rgba(56, 189, 248, 0.25)',
              borderRadius: '8px',
              boxShadow: '0 4px 20px rgba(0, 0, 0, 0.4)',
              backdropFilter: 'blur(8px)',
            }}
          >
            <div
              style={{
                width: '8px',
                height: '8px',
                borderRadius: '50%',
                backgroundColor: '#38bdf8',
                boxShadow: '0 0 10px #38bdf8',
              }}
            />
            <span
              style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: '20px',
                color: '#f8fafc',
                fontWeight: 500,
                letterSpacing: '-0.01em',
              }}
            >
              {text}
            </span>
          </div>
        );
      })}
    </div>
  );
};

import React from 'react';
import { interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';

interface StaggerBulletListProps {
  items: string[];
  baseStartFrame: number;
  staggerIntervalFrames?: number;
}

export const StaggerBulletList: React.FC<StaggerBulletListProps> = ({
  items,
  baseStartFrame,
  staggerIntervalFrames = 9, // 約0.3秒（30fps時）ごとに1行ずつ展開
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '14px', width: '100%', padding: '0 40px' }}>
      {items.map((text, index) => {
        const itemDelay = baseStartFrame + index * staggerIntervalFrames;

        // 【最重要】開始フレーム未到達の要素はDOMを完全に破棄（ゴースト根絶）
        if (frame < itemDelay) {
          return null;
        }

        // バネ物理演算による個別カードのスライドイン
        const progress = spring({
          frame: frame - itemDelay,
          fps,
          config: { damping: 14, mass: 0.6, stiffness: 110 },
        });

        const translateY = interpolate(progress, [0, 1], [24, 0]);
        const opacity = interpolate(progress, [0, 1], [0, 1]);

        return (
          <div
            key={index}
            style={{
              transform: `translateY(${translateY}px)`,
              opacity,
              display: 'flex',
              alignItems: 'center',
              gap: '12px',
              padding: '16px 20px',
              background: 'rgba(15, 23, 42, 0.75)',
              border: '1px solid rgba(56, 189, 248, 0.25)',
              borderRadius: '8px',
              boxShadow: '0 4px 20px rgba(0, 0, 0, 0.4)',
              backdropFilter: 'blur(8px)',
            }}
          >
            <div
              style={{
                width: '8px',
                height: '8px',
                borderRadius: '50%',
                backgroundColor: '#38bdf8',
                boxShadow: '0 0 10px #38bdf8',
              }}
            />
            <span
              style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: '20px',
                color: '#f8fafc',
                fontWeight: 500,
                letterSpacing: '-0.01em',
              }}
            >
              {text}
            </span>
          </div>
        );
      })}
    </div>
  );
};

import React from 'react';
import { useCurrentFrame } from 'remotion';

export const AmbientBackground: React.FC = () => {
  const frame = useCurrentFrame();

  // 1. 周期的な呼吸スケール運動 (周期: 約3秒で 1.00 〜 1.025倍 に微小拡大縮小)
  const breathScale = 1.0 + Math.sin(frame / 18) * 0.015;

  // 2. ドットグリッドパターンの無限微小スクロール
  const gridOffsetY = (frame * 0.4) % 32;
  const gridOffsetX = (frame * 0.2) % 32;

  // 3. サイバーブルーのグロー（光彩）強度の明滅
  const glowOpacity = 0.2 + Math.sin(frame / 24) * 0.08;

  // 4. 装飾アイコン・浮遊バッジのリサージュ軌道微細動 (Lissajous Micro-floating)
  const floatY = Math.sin(frame / 15) * 6;
  const floatX = Math.cos(frame / 22) * 4;
  const floatRotate = Math.sin(frame / 30) * 2; // ±2度の自然な揺らぎ

  return (
    <div
      style={{
        position: 'absolute',
        inset: 0,
        backgroundColor: '#050811',
        overflow: 'hidden',
      }}
    >
      {/* 呼吸する背景グリッドレイヤー */}
      <div
        style={{
          position: 'absolute',
          inset: -40,
          backgroundImage: 'radial-gradient(rgba(56, 189, 248, 0.2) 1.5px, transparent 1.5px)',
          backgroundSize: '32px 32px',
          backgroundPosition: `${gridOffsetX}px ${gridOffsetY}px`,
          transform: `scale(${breathScale})`,
          transformOrigin: 'center center',
        }}
      />

      {/* 動的な背景グローエフェクト */}
      <div
        style={{
          position: 'absolute',
          top: '20%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          width: '600px',
          height: '600px',
          background: 'radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, rgba(5, 8, 17, 0) 70%)',
          opacity: glowOpacity,
          pointerEvents: 'none',
        }}
      />

      {/* 画面右上：リサージュ微動する装飾サイバーバッジ */}
      <div
        style={{
          position: 'absolute',
          top: '40px',
          right: '40px',
          transform: `translate(${floatX}px, ${floatY}px) rotate(${floatRotate}deg)`,
          padding: '8px 16px',
          background: 'rgba(15, 23, 42, 0.6)',
          border: '1px solid rgba(56, 189, 248, 0.3)',
          borderRadius: '20px',
          color: '#38bdf8',
          fontSize: '12px',
          fontFamily: 'JetBrains Mono, monospace',
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
        }}
      >
        <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: '#38bdf8' }} />
        LIVE RENDERING ENGINE
      </div>
    </div>
  );
};

import React from 'react';
import { useCurrentFrame } from 'remotion';

export const AmbientBackground: React.FC = () => {
  const frame = useCurrentFrame();

  // 1. 周期的な呼吸スケール運動 (周期: 約3秒で 1.00 〜 1.025倍 に微小拡大縮小)
  const breathScale = 1.0 + Math.sin(frame / 18) * 0.015;

  // 2. ドットグリッドパターンの無限微小スクロール
  const gridOffsetY = (frame * 0.4) % 32;
  const gridOffsetX = (frame * 0.2) % 32;

  // 3. サイバーブルーのグロー（光彩）強度の明滅
  const glowOpacity = 0.2 + Math.sin(frame / 24) * 0.08;

  // 4. 装飾アイコン・浮遊バッジのリサージュ軌道微細動 (Lissajous Micro-floating)
  const floatY = Math.sin(frame / 15) * 6;
  const floatX = Math.cos(frame / 22) * 4;
  const floatRotate = Math.sin(frame / 30) * 2; // ±2度の自然な揺らぎ

  return (
    <div
      style={{
        position: 'absolute',
        inset: 0,
        backgroundColor: '#050811',
        overflow: 'hidden',
      }}
    >
      {/* 呼吸する背景グリッドレイヤー */}
      <div
        style={{
          position: 'absolute',
          inset: -40,
          backgroundImage: 'radial-gradient(rgba(56, 189, 248, 0.2) 1.5px, transparent 1.5px)',
          backgroundSize: '32px 32px',
          backgroundPosition: `${gridOffsetX}px ${gridOffsetY}px`,
          transform: `scale(${breathScale})`,
          transformOrigin: 'center center',
        }}
      />

      {/* 動的な背景グローエフェクト */}
      <div
        style={{
          position: 'absolute',
          top: '20%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          width: '600px',
          height: '600px',
          background: 'radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, rgba(5, 8, 17, 0) 70%)',
          opacity: glowOpacity,
          pointerEvents: 'none',
        }}
      />

      {/* 画面右上：リサージュ微動する装飾サイバーバッジ */}
      <div
        style={{
          position: 'absolute',
          top: '40px',
          right: '40px',
          transform: `translate(${floatX}px, ${floatY}px) rotate(${floatRotate}deg)`,
          padding: '8px 16px',
          background: 'rgba(15, 23, 42, 0.6)',
          border: '1px solid rgba(56, 189, 248, 0.3)',
          borderRadius: '20px',
          color: '#38bdf8',
          fontSize: '12px',
          fontFamily: 'JetBrains Mono, monospace',
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
        }}
      >
        <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: '#38bdf8' }} />
        LIVE RENDERING ENGINE
      </div>
    </div>
  );
};

import React from 'react';
import { Series } from 'remotion';
import { AmbientBackground } from './AmbientBackground';
import { KineticHeader } from './KineticHeader';
import { StaggerBulletList } from './StaggerBulletList';

export const MainVideoComposition: React.FC<{
  title: string;
  category: string;
  bulletPoints: string[];
}> = ({ title, category, bulletPoints }) => {
  return (
    <div style={{ position: 'relative', width: '100%', height: '100%', backgroundColor: '#050811' }}>
      {/* 1. 常時稼働する固定レイヤー（フレームリセットを受けない） */}
      <AmbientBackground />
      <KineticHeader title={title} category={category} />

      {/* 2. 時間軸に沿って直列展開されるメインコンテンツレイヤー */}
      <Series>
        {/* シーン1: タイトル吸着をじっくり見せる導入 (45フレーム = 1.5秒) */}
        <Series.Sequence durationInFrames={45}>
          {/* コンテンツは空。ヘッダーのバネ吸着演出に視線を集中させる */}
          <></>
        </Series.Sequence>

        {/* シーン2: 箇条書きカードのStagger展開 (180フレーム = 6秒) */}
        <Series.Sequence durationInFrames={180}>
          <div style={{ position: 'absolute', top: '180px', left: 0, right: 0 }}>
            <StaggerBulletList items={bulletPoints} baseStartFrame={0} />
          </div>
        </Series.Sequence>

        {/* シーン3: まとめとCTA (90フレーム = 3秒) */}
        <Series.Sequence durationInFrames={90}>
          <div
            style={{
              position: 'absolute',
              top: '180px',
              left: 0,
              right: 0,
              bottom: 0,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              gap: '16px',
            }}
          >
            <h2 style={{ color: '#38bdf8', fontSize: '32px', fontFamily: 'JetBrains Mono, monospace', margin: 0 }}>
              PIPELINE SYNTHESIZED
            </h2>
            <p style={{ color: '#94a3b8', fontSize: '18px', margin: 0 }}>詳細はリポジトリのドキュメントを参照</p>
          </div>
        </Series.Sequence>
      </Series>
    </div>
  );
};

import React from 'react';
import { Series } from 'remotion';
import { AmbientBackground } from './AmbientBackground';
import { KineticHeader } from './KineticHeader';
import { StaggerBulletList } from './StaggerBulletList';

export const MainVideoComposition: React.FC<{
  title: string;
  category: string;
  bulletPoints: string[];
}> = ({ title, category, bulletPoints }) => {
  return (
    <div style={{ position: 'relative', width: '100%', height: '100%', backgroundColor: '#050811' }}>
      {/* 1. 常時稼働する固定レイヤー（フレームリセットを受けない） */}
      <AmbientBackground />
      <KineticHeader title={title} category={category} />

      {/* 2. 時間軸に沿って直列展開されるメインコンテンツレイヤー */}
      <Series>
        {/* シーン1: タイトル吸着をじっくり見せる導入 (45フレーム = 1.5秒) */}
        <Series.Sequence durationInFrames={45}>
          {/* コンテンツは空。ヘッダーのバネ吸着演出に視線を集中させる */}
          <></>
        </Series.Sequence>

        {/* シーン2: 箇条書きカードのStagger展開 (180フレーム = 6秒) */}
        <Series.Sequence durationInFrames={180}>
          <div style={{ position: 'absolute', top: '180px', left: 0, right: 0 }}>
            <StaggerBulletList items={bulletPoints} baseStartFrame={0} />
          </div>
        </Series.Sequence>

        {/* シーン3: まとめとCTA (90フレーム = 3秒) */}
        <Series.Sequence durationInFrames={90}>
          <div
            style={{
              position: 'absolute',
              top: '180px',
              left: 0,
              right: 0,
              bottom: 0,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              gap: '16px',
            }}
          >
            <h2 style={{ color: '#38bdf8', fontSize: '32px', fontFamily: 'JetBrains Mono, monospace', margin: 0 }}>
              PIPELINE SYNTHESIZED
            </h2>
            <p style={{ color: '#94a3b8', fontSize: '18px', margin: 0 }}>詳細はリポジトリのドキュメントを参照</p>
          </div>
        </Series.Sequence>
      </Series>
    </div>
  );
};

ffmpeg -y \
  -i remotion_base.mp4 \
  -i voice.wav \
  -stream_loop -1 -i bgm.mp3 \
  -filter_complex "\
    [1:a]volume=1.0[voice]; \
    [2:a]volume=0.12[bgm]; \
    [voice][bgm]amix=inputs=2:duration=first:dropout_transition=2[aout]; \
    [1:a]showwaves=s=1080x180:mode=line:colors=0x38bdf8@0.85:scale=cbrt[wave]; \
    [0:v][wave]overlay=x=0:y=H-320[v_wave]; \
    [v_wave]drawbox=x=0:y=ih-10:w='iw*(t/15.0)':h=10:color=0x38bdf8@1.0:t=fill[v_prog]; \
    [v_prog]ass=subtitles.ass[vout]" \
  -map "[vout]" \
  -map "[aout]" \
  -c:v libx264 -preset fast -crf 19 -pix_fmt yuv420p \
  -c:a aac -b:a 192k \
  -shortest \
  final_published_video.mp4

ffmpeg -y \
  -i remotion_base.mp4 \
  -i voice.wav \
  -stream_loop -1 -i bgm.mp3 \
  -filter_complex "\
    [1:a]volume=1.0[voice]; \
    [2:a]volume=0.12[bgm]; \
    [voice][bgm]amix=inputs=2:duration=first:dropout_transition=2[aout]; \
    [1:a]showwaves=s=1080x180:mode=line:colors=0x38bdf8@0.85:scale=cbrt[wave]; \
    [0:v][wave]overlay=x=0:y=H-320[v_wave]; \
    [v_wave]drawbox=x=0:y=ih-10:w='iw*(t/15.0)':h=10:color=0x38bdf8@1.0:t=fill[v_prog]; \
    [v_prog]ass=subtitles.ass[vout]" \
  -map "[vout]" \
  -map "[aout]" \
  -c:v libx264 -preset fast -crf 19 -pix_fmt yuv420p \
  -c:a aac -b:a 192k \
  -shortest \
  final_published_video.mp4

import os
import subprocess
import sys
import time
import urllib.request
import json
from pathlib import Path
from typing import Any, Dict

def notify_sre_alert(message: str) -> None:
    """障害発生時にWebhookへ静かにログを飛ばす実戦的アラートフック"""
    webhook_url = os.getenv("SRE_ALERT_WEBHOOK_URL")
    if not webhook_url:
        return
    try:
        payload = json.dumps({"content": f"[Lumina Pipeline Alert] {message}"}).encode("utf-8")
        req = urllib.request.Request(webhook_url, data=payload, headers={"Content-Type": "application/json"})
        urllib.request.urlopen(req, timeout=5)
    except Exception:
        pass  # アラート通知自体の失敗で本線パイプラインを止める愚行は避ける


def synthesize_autonomous_video_with_resilience(
    script_data: Dict[str, Any],
    audio_path: Path,
    ass_subtitle_path: Path,
    bgm_path: Path,
    output_mp4_path: Path,
    remotion_dir: Path,
    duration_sec: float = 15.0
) -> bool:
    """
    Remotionによる最高品質レンダリングを第一撃とし、
    環境破壊やタイムアウト時は即座にPillow+FFmpegの軽量縮退運転へ
    自動退避するSRE完全防護型オーケストレーター
    """
    temp_video_path = output_mp4_path.with_name(f"temp_remotion_{output_mp4_path.name}")

    try:
        # 1. プライマリ：Remotion物理演算パイプラインの実行
        print("[Pipeline] Attempting Primary Engine: Remotion 4.x...")
        from render_bridge import render_remotion_video

        success = render_remotion_video(
            composition_id="AutoMotionVideo",
            props_data=script_data,
            output_mp4_path=temp_video_path,
            remotion_root_dir=remotion_dir,
            timeout_sec=75
        )

        if not success or not temp_video_path.exists() or temp_video_path.stat().st_size == 0:
            raise RuntimeError("Primary Remotion rendering pipeline returned unhealthy exit code.")

        # 2. FFmpegによる完全版マルチプレキシング（波形・プログレスバー・ASS字幕・BGM）
        apply_ffmpeg_multiplexing(
            base_video=temp_video_path,
            voice_audio=audio_path,
            bgm_audio=bgm_path,
            ass_sub=ass_subtitle_path,
            output_path=output_mp4_path,
            duration_sec=duration_sec
        )
        print(f"[Pipeline] Primary Synthesis Completed: {output_mp4_path}")
        return True

    except Exception as primary_error:
        # 3. セカンダリ：Pillow静止画エンジンへの緊急フォールバック（縮退運転）
        notify_sre_alert(f"Primary Remotion failed: {primary_error}. Degrading to Pillow fallback.")
        print(f"[CRITICAL WARNING] Primary pipeline degraded: {primary_error}", file=sys.stderr)
        print("[Pipeline] Initiating Secondary Engine: Pillow Emergency Card Generator...", file=sys.stderr)

        emergency_image_path = output_mp4_path.with_suffix(".emergency.png")
        try:
            generate_pillow_emergency_card(script_data, emergency_image_path)

            # 静止画1枚と音声を最速で安全結合（クラッシュ要因となる高度フィルタを全バイパス）
            fallback_cmd = [
                "ffmpeg", "-y",
                "-loop", "1", "-i", str(emergency_image_path.resolve()),
                "-i", str(audio_path.resolve()),
                "-c:v", "libx264", "-tune", "stillimage", "-preset", "ultrafast",
                "-c:a", "aac", "-b:a", "128k", "-pix_fmt", "yuv420p",
                "-shortest", str(output_mp4_path.resolve())
            ]
            subprocess.run(fallback_cmd, check=True, capture_output=True, timeout=30)
            print(f"[Pipeline Fallback Success] Safe-mode video published: {output_mp4_path}")
            return True
        except Exception as fallback_error:
            print(f"[FATAL FAILURE] Both engines terminated: {fallback_error}", file=sys.stderr)
            return False
        finally:
            if emergency_image_path.exists():
                emergency_image_path.unlink()
    finally:
        if temp_video_path.exists():
            temp_video_path.unlink()


def generate_pillow_emergency_card(script_data: Dict[str, Any], output_png: Path) -> None:
    """フォールバック用：メモリ上で最小限のセーフカード画像を生成（文字サイズ担保）"""
    from PIL import Image, ImageDraw, ImageFont
    img = Image.new("RGB", (1080, 1920), color=(5, 8, 17))
    draw = ImageDraw.Draw(img)
    try:
        # Pillow 10.1.0+ では load_default に size 引数が指定可能
        font = ImageFont.load_default(size=48)
    except TypeError:
        font = ImageFont.load_default()

    title = script_data.get("title", "SYSTEM RECOVERY NOTICE")
    draw.text((100, 800), title, fill=(56, 189, 248), font=font)
    img.save(output_png, "PNG")


def apply_ffmpeg_multiplexing(
    base_video: Path,
    voice_audio: Path,
    bgm_audio: Path,
    ass_sub: Path,
    output_path: Path,
    duration_sec: float
) -> None:
    """
    FFmpegの高度多重合成を実行するヘルパー。
    Windows特有のコロン（:）エスケープおよび動的尺プログレスバーを完全網羅。
    """
    # Windowsパスのドライブレター誤認を防ぐための厳格なエスケープ処理
    ass_escaped_path = ass_sub.resolve().as_posix().replace(":", r"\:")

    filter_graph = (
        "[1:a]volume=1.0[voice];"
        "[2:a]volume=0.12[bgm];"
        "[voice][bgm]amix=inputs=2:duration=first:dropout_transition=2[aout];"
        "[1:a]showwaves=s=1080x180:mode=line:colors=0x38bdf8@0.85:scale=cbrt[wave];"
        "[0:v][wave]overlay=x=0:y=H-320[v_wave];"
        f"[v_wave]drawbox=x=0:y=ih-10:w='iw*(t/{duration_sec:.2f})':h=10:color=0x38bdf8@1.0:t=fill[v_prog];"
        f"[v_prog]ass='{ass_escaped_path}'[vout]"
    )

    cmd = [
        "ffmpeg", "-y",
        "-i", str(base_video.resolve()),
        "-i", str(voice_audio.resolve()),
        "-stream_loop", "-1", "-i", str(bgm_audio.resolve()),
        "-filter_complex", filter_graph,
        "-map", "[vout]", "-map", "[aout]",
        "-c:v", "libx264", "-preset", "fast", "-crf", "19", "-pix_fmt", "yuv420p",
        "-c:a", "aac", "-b:a", "192k",
        "-shortest", str(output_path.resolve())
    ]
    subprocess.run(cmd, check=True, capture_output=True, timeout=60)

import os
import subprocess
import sys
import time
import urllib.request
import json
from pathlib import Path
from typing import Any, Dict

def notify_sre_alert(message: str) -> None:
    """障害発生時にWebhookへ静かにログを飛ばす実戦的アラートフック"""
    webhook_url = os.getenv("SRE_ALERT_WEBHOOK_URL")
    if not webhook_url:
        return
    try:
        payload = json.dumps({"content": f"[Lumina Pipeline Alert] {message}"}).encode("utf-8")
        req = urllib.request.Request(webhook_url, data=payload, headers={"Content-Type": "application/json"})
        urllib.request.urlopen(req, timeout=5)
    except Exception:
        pass  # アラート通知自体の失敗で本線パイプラインを止める愚行は避ける


def synthesize_autonomous_video_with_resilience(
    script_data: Dict[str, Any],
    audio_path: Path,
    ass_subtitle_path: Path,
    bgm_path: Path,
    output_mp4_path: Path,
    remotion_dir: Path,
    duration_sec: float = 15.0
) -> bool:
    """
    Remotionによる最高品質レンダリングを第一撃とし、
    環境破壊やタイムアウト時は即座にPillow+FFmpegの軽量縮退運転へ
    自動退避するSRE完全防護型オーケストレーター
    """
    temp_video_path = output_mp4_path.with_name(f"temp_remotion_{output_mp4_path.name}")

    try:
        # 1. プライマリ：Remotion物理演算パイプラインの実行
        print("[Pipeline] Attempting Primary Engine: Remotion 4.x...")
        from render_bridge import render_remotion_video

        success = render_remotion_video(
            composition_id="AutoMotionVideo",
            props_data=script_data,
            output_mp4_path=temp_video_path,
            remotion_root_dir=remotion_dir,
            timeout_sec=75
        )

        if not success or not temp_video_path.exists() or temp_video_path.stat().st_size == 0:
            raise RuntimeError("Primary Remotion rendering pipeline returned unhealthy exit code.")

        # 2. FFmpegによる完全版マルチプレキシング（波形・プログレスバー・ASS字幕・BGM）
        apply_ffmpeg_multiplexing(
            base_video=temp_video_path,
            voice_audio=audio_path,
            bgm_audio=bgm_path,
            ass_sub=ass_subtitle_path,
            output_path=output_mp4_path,
            duration_sec=duration_sec
        )
        print(f"[Pipeline] Primary Synthesis Completed: {output_mp4_path}")
        return True

    except Exception as primary_error:
        # 3. セカンダリ：Pillow静止画エンジンへの緊急フォールバック（縮退運転）
        notify_sre_alert(f"Primary Remotion failed: {primary_error}. Degrading to Pillow fallback.")
        print(f"[CRITICAL WARNING] Primary pipeline degraded: {primary_error}", file=sys.stderr)
        print("[Pipeline] Initiating Secondary Engine: Pillow Emergency Card Generator...", file=sys.stderr)

        emergency_image_path = output_mp4_path.with_suffix(".emergency.png")
        try:
            generate_pillow_emergency_card(script_data, emergency_image_path)

            # 静止画1枚と音声を最速で安全結合（クラッシュ要因となる高度フィルタを全バイパス）
            fallback_cmd = [
                "ffmpeg", "-y",
                "-loop", "1", "-i", str(emergency_image_path.resolve()),
                "-i", str(audio_path.resolve()),
                "-c:v", "libx264", "-tune", "stillimage", "-preset", "ultrafast",
                "-c:a", "aac", "-b:a", "128k", "-pix_fmt", "yuv420p",
                "-shortest", str(output_mp4_path.resolve())
            ]
            subprocess.run(fallback_cmd, check=True, capture_output=True, timeout=30)
            print(f"[Pipeline Fallback Success] Safe-mode video published: {output_mp4_path}")
            return True
        except Exception as fallback_error:
            print(f"[FATAL FAILURE] Both engines terminated: {fallback_error}", file=sys.stderr)
            return False
        finally:
            if emergency_image_path.exists():
                emergency_image_path.unlink()
    finally:
        if temp_video_path.exists():
            temp_video_path.unlink()


def generate_pillow_emergency_card(script_data: Dict[str, Any], output_png: Path) -> None:
    """フォールバック用：メモリ上で最小限のセーフカード画像を生成（文字サイズ担保）"""
    from PIL import Image, ImageDraw, ImageFont
    img = Image.new("RGB", (1080, 1920), color=(5, 8, 17))
    draw = ImageDraw.Draw(img)
    try:
        # Pillow 10.1.0+ では load_default に size 引数が指定可能
        font = ImageFont.load_default(size=48)
    except TypeError:
        font = ImageFont.load_default()

    title = script_data.get("title", "SYSTEM RECOVERY NOTICE")
    draw.text((100, 800), title, fill=(56, 189, 248), font=font)
    img.save(output_png, "PNG")


def apply_ffmpeg_multiplexing(
    base_video: Path,
    voice_audio: Path,
    bgm_audio: Path,
    ass_sub: Path,
    output_path: Path,
    duration_sec: float
) -> None:
    """
    FFmpegの高度多重合成を実行するヘルパー。
    Windows特有のコロン（:）エスケープおよび動的尺プログレスバーを完全網羅。
    """
    # Windowsパスのドライブレター誤認を防ぐための厳格なエスケープ処理
    ass_escaped_path = ass_sub.resolve().as_posix().replace(":", r"\:")

    filter_graph = (
        "[1:a]volume=1.0[voice];"
        "[2:a]volume=0.12[bgm];"
        "[voice][bgm]amix=inputs=2:duration=first:dropout_transition=2[aout];"
        "[1:a]showwaves=s=1080x180:mode=line:colors=0x38bdf8@0.85:scale=cbrt[wave];"
        "[0:v][wave]overlay=x=0:y=H-320[v_wave];"
        f"[v_wave]drawbox=x=0:y=ih-10:w='iw*(t/{duration_sec:.2f})':h=10:color=0x38bdf8@1.0:t=fill[v_prog];"
        f"[v_prog]ass='{ass_escaped_path}'[vout]"
    )

    cmd = [
        "ffmpeg", "-y",
        "-i", str(base_video.resolve()),
        "-i", str(voice_audio.resolve()),
        "-stream_loop", "-1", "-i", str(bgm_audio.resolve()),
        "-filter_complex", filter_graph,
        "-map", "[vout]", "-map", "[aout]",
        "-c:v", "libx264", "-preset", "fast", "-crf", "19", "-pix_fmt", "yuv420p",
        "-c:a", "aac", "-b:a", "192k",
        "-shortest", str(output_path.resolve())
    ]
    subprocess.run(cmd, check=True, capture_output=True, timeout=60)