Генерация видео с помощью ИИ: конвейер преобразования HTML в MP4

Как применить

HyperFrames преобразует HTML-композиции в MP4 с помощью временных шкал GSAP, Chrome в безголовом режиме и FFmpeg через npx hyperframes render.

Элементы видео должны быть отмечены как muted; аудио следует размещать в отдельных элементах <audio>.

Перед рендерингом через npx hyperframes render соблюдайте правила композиции HyperFrames:

Установите HyperFrames и Open Design, используя один из предложенных способов.

# HyperFrames — scaffold a project
npx hyperframes init my-video
cd my-video

# Open Design — available via Hermes skill or direct clone
git clone https://github.com/nexu-io/open-design.git

Добавьте озвучку и музыку в композицию.

# TTS narration via HyperFrames (Kokoro, local, no API key)
npx hyperframes tts --text "Your script here" --voice af_heart --output narration.wav

# Or use Coqui TTS with cloned voice if preferred
# Background music via HeartMuLa skill

Проверьте композицию на ошибки и просмотрите её в браузере.

npx hyperframes lint
npx hyperframes preview   # opens in browser for quick check

Сгенерируйте готовую композицию в формате MP4.

# Standard render (1920×1080, 30fps)
npx hyperframes render

# Or specific output
npx hyperframes render --fps 30 --output final.mp4

Когда конвейер начнёт работать, его можно дополнительно автоматизировать с помощью расписания cron.

Используйте предоставленную команду для ежедневной генерации MP4-файла на основе заданной темы.

# Hermes cron job: daily AI news video
schedule: "0 8 * * *"
prompt: |
  Research top AI news from last 24 hours.
  Write a 60-second script.
  Generate HTML composition with Open Design.
  Render MP4 via HyperFrames.
  Save to ~/videos/today.mp4.

При проверке HyperFrames отклоняются композиции с перекрывающимися клипами на одной дорожке, отсутствием class="clip" или корневым элементом без размеров; придётся повторять процесс генерации, проверки и исправлений.

Элементы видео следует оборачивать в теги div, так как изменение ширины или высоты непосредственно у элемента <video> нарушает процесс рендеринга кадров.

Время рендеринга увеличивается с длительностью: по оценкам, на CPU потребуется три–пять минут для видео длительностью 60 секунд при 30 кадрах в секунду, а режим чернового варианта с 15 кадрами в секунду займёт около минуты.

Голоса Kokoro подходят для демонстраций продуктов, а склонированные голоса Coqui, по описанию источника, более выразительны для повествований.

Ссылки

• Creative Screen Recording → Video
• Autonovel — House of Bells
• ComfyUI Workflow Orchestration