HyperFrames-Gradle : преобразование AsciiDoc в видео MP4

Содержание

Дыра в видео пайплайне
HyperFrames : Двигатель
Архитектура плагина
Два видеоплагина, два использования
6 EPICs дорожной карты
Почему это работает?
Вывод: Пропущенное звено
Ссылки

время чтения : 8 minutes

Две недели назад, я запустил`capsule-gradle`— плагин, который преобразует колоду reveal.js в видеоконтейнере WebM с TTS. Сегодня я добавляю новый плагин: hyperframes-gradle. Он делает что-то, чего не делает capsule-gradle : преобразовывать AsciiDoc прямо в видео MP4, без использования reveal.js.

Вот почему существует этот плагин, как он вписывается в существующее, и что движок HyperFrames от HeyGen приносит в конвейер производства контента.

Дыра в видео пайплайне

Мой документальный пайплайн производит два типа видео:

Капсула повторения (capsule-gradle) — колода reveal.js, захваченная в WebM, с

narration TTS. Идеально для повторного просмотра модуля.

Слайды анимации (slider-gradle) — интерактивный набор слайдов reveal.js HTML для

очный тренер.

Но отсутствует третий формат: standalone видео

Вариант использования	Текущее решение	Недостаток
Слайды тренера	slider-gradle → reveal.js	✅
Капсула повторения	capsule-gradle → WebM	✅
Видео-тизер	ни одной	❌
Анимированное техническое демо	Ни одна	❌
Doc-to-video	никакая	</think> ❌

Вариант использования

Текущее решение

Недостаток

Слайды тренера

slider-gradle → reveal.js

✅

Капсула повторения

capsule-gradle → WebM

✅

Видео-тизер

ни одной

❌

Анимированное техническое демо

Ни одна

❌

Doc-to-video

никакая

</think> ❌

Первый use case критичен : как автоматически генерировать видео длительностью 60 секунд, представляющее проект или модуль, с анимациями GSAP, озвучка TTS, и фоновая музыка — всё это из одного и того же файла AsciiDoc А слайды?

Capsule-gradle не может ответить: ему уже нужен deck reveal.js. slider-gradle хорошо производит эту колоду, но он не предназначен для рендеринга видео. Требовался прямой конвейер: AsciiDoc → видео.

HyperFrames : Двигатель

Я открылhttps://github.com/heygen-com/hyperframes[HyperFrames] il y a несколько дней. Это открытый фреймворк (Apache 2.0) созданный HeyGen, единорог видео ИИ. 22 700 звёзд на GitHub. Помещается в фраза :

Напишите HTML. Отрендерите видео. Создано для агентов.

Принцип: вы пишете HTML с`data-*`атрибуты, вы ссылаетесь анимация GSAP (или CSS, Lottie, Three.js…), а движок рендерит всё в MP4 via Puppeteer (headless Chrome) + FFmpeg. Детерминистический результат: тот же вход, те же кадры, то же видео.

<div id="stage" data-composition-id="intro" data-start="0" data-width="1920" data-height="1080">
  <video class="clip" data-start="0" data-duration="6" data-track-index="0"
         src="background.mp4" muted playsinline></video>

  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">
    Formation Docker & Kubernetes
  </h1>

  <audio data-start="0" data-duration="6" data-track-index="2"
         data-volume="0.3" src="music.wav"></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.intro = tl;
  </script>
</div>

Что делает HyperFrames отличным от Remotion? Без React, без bundler, без JSX. Чистый HTML, который ИИ-агенты могут писать нативно. Он подогнан точно под мой конвейер: planner-gradle с deepseek может генерировать этот HTML из плана SPG/SPD, и плагин Gradle может преобразовать его в MP4.

Архитектура плагина

hyperframes-gradle следует той же схеме, что и все мои плагины : шаблон « Независимый плагин + Потребительский корень »

hyperframes-gradle/
├── settings.gradle.kts          ← racine consommateur (dogfood)
├── build.gradle.kts              ← 3 lignes : apply plugin hyperframes
├── hyperframes-plugin/           ← BUILD INDÉPENDANT
│   ├── gradlew                    ← son propre wrapper
│   ├── build.gradle.kts           ← java-gradle-plugin
│   ├── src/main/kotlin/education/cccp/hyperframes/
│   │   ├── HyperframesPlugin.kt
│   │   ├── GenerateHyperframesHtmlTask.kt
│   │   ├── RenderHyperframesTask.kt
│   │   └── HyperframesExtension.kt
│   ├── .agents/                   ← gouvernance agent
│   └── doc/
│       └── HYPERFRAMES_ARCHITECTURE.adoc
└── video.yml                      ← configuration dogfood

Конвейер из четырёх этапов

@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontSize 11

title Конвейер hyperframes-gradle
rectangle "AsciiDoc\nsource" as adoc #LightYellow
rectangle "AsciidoctorJ" as asciidoctorj #LightBlue
rectangle "HTML HyperFrames\n(data-* attrs)" as html #LightGreen
rectangle "HyperFrames CLI\n(Node.js 22+)" as cli #Lavender
rectangle "video.mp4" as mp4 #Gold

adoc -right-> asciidoctorj : разбор блоков таможни
asciidoctorj -right-> html : генерирует HTML
html -right-> cli : ProcessBuilder\nnpx hyperframes render
cli -right-> mp4 : Puppeteer + FFmpeg
@enduml

AsciidoctorJ парсит источник AsciiDoc и извлекает пользовательские блоки

[hyperframes-composition], [hyperframes-track], [hyperframes-animation].

GenerateHyperframesHtmlTask генерирует HTML HyperFrames с

`data-*`соответствующие атрибуты.

RenderHyperframesTask вызывает CLI HyperFrames через`ProcessBuilder`( empty output )

npx hyperframes render --input index.html --output video.mp4.

MP4 развёрнут в`output/с одним`metadata.json pour l’orchestration.

DSL AsciiDoc

Настоящая добавленная стоимость плагина — это DSL AsciiDoc. Пользователь Он никогда не пишет HTML. Он аннотирует свой существующий документ AsciiDoc :

= Formation Docker & Kubernetes
:hyperframes-width: 1920
:hyperframes-height: 1080
:hyperframes-fps: 30

[hyperframes-composition, id="intro"]
== Introduction

Le titre apparaît avec un fondu GSAP sur fond vidéo.

[hyperframes-track, index=0, start=0, duration=6]
video::assets/background.mp4[muted, playsinline]

[hyperframes-track, index=1, start=1, duration=4]
Formation Docker & Kubernetes

[hyperframes-animation, type=gsap]

const tl = gsap.timeline({ paused: true }); tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1); window.timelines = window.timelines || {}; window.__timelines.intro = tl;

Атрибуты docinfo (:hyperframes-width:) настраивают размеры. Пользовательские блоки определяют композиции и дорожки. Блок `[hyperframes-animation]`содержит необработанный код GSAP — что агент ИИ может генерировать из описания на естественном языке.

Мост Node.js

Единственная техническая проблема: HyperFrames написан на Node.js/TypeScript, и мои плагины на Kotlin/JVM. Решение — это`ProcessBuilder` :

class RenderHyperframesTask : DefaultTask() {

    @TaskAction
    fun render() {
        val process = ProcessBuilder(
            "npx", "hyperframes", "render",
            "--input", inputHtml.absolutePath,
            "--output", outputMp4.absolutePath
        )
            .inheritIO()
            .start()

        val exitCode = process.waitFor()
        require(exitCode == 0) {
            "HyperFrames render failed with exit code $exitCode"
        }
    }
}

Нулевое связывание кода JVM ↔ Node.js. Контракт задаётся через командную строку. и файлы на диске. Это тот же шаблон, что`plantuml-gradle` (который вызывает CLI PlantUML) или`slider-gradle`(который вызывает AsciidoctorJ). Ничего нового под солнцем — просто применено к более новому инструменту.

Два видеоплагина, два использования

	capsule-gradle	hyperframes-gradle
источник	Колода reveal.js (существующий HTML)	AsciiDoc → HTML HyperFrames
Вариант использования	Капсула повторения	Самостоятельное объясняющее видео
Природа	Slides → видео	Документ → видео
отдан	Playwright Java → WebM	HyperFrames CLI → MP4
Анимация	Transitions reveal.js natives	GSAP/CSS атрибуты данных
Стек	100% JVM (Kotlin)	JVM + внешний CLI Node.js

capsule-gradle

hyperframes-gradle

источник

Колода reveal.js (существующий HTML)

AsciiDoc → HTML HyperFrames

Вариант использования

Капсула повторения

Самостоятельное объясняющее видео

Природа

Slides → видео

Документ → видео

отдан

Playwright Java → WebM

HyperFrames CLI → MP4

Анимация

Transitions reveal.js natives

GSAP/CSS атрибуты данных

Стек

100% JVM (Kotlin)

JVM + внешний CLI Node.js

Они не заменяют друг друга. Они дополняют друг друга. Полная цепочка создания стоимости :

AsciiDoc ──→ slider-gradle ──→ deck reveal.js ──→ capsule-gradle ──→ WebM (капсула повторения)

AsciiDoc ──→ hyperframes-gradle ──→ MP4 (автономное видео)

Пользователь пишет один файл AsciiDoc. slider-gradle генерирует слайды. capsule-gradle создаёт ревизионную капсулу. hyperframes-gradle создаёт тизерное видео и технические демонстрации.

6 EPICs дорожной карты

Плагин структурирован в 6 EPIC:

ЭПИК	Описание	Приоритет
HF-0	Bootstrap управление + формирование архитектуры	✅ Готово
HF-1	Плагин Gradle заглушка + AsciidoctorJ интеграция	P0
HF-2	Bridge CLI HyperFrames (ProcessBuilder → npx → MP4)	P1
HF-3	DSL AsciiDoc обычаи (блоки, docinfo, шаблоны)	P1
HF-4	Интеграция runner-gradle (metadata.json)	P2
HF-5	Готовые шаблоны (title-card, code-diff, captions)	P3
HF-6	CI + публикация Maven Central / Gradle Portal	P3

ЭПИК

Описание

Приоритет

HF-0

Bootstrap управление + формирование архитектуры

✅ Готово

HF-1

Плагин Gradle заглушка + AsciidoctorJ интеграция

HF-2

Bridge CLI HyperFrames (ProcessBuilder → npx → MP4)

HF-3

DSL AsciiDoc обычаи (блоки, docinfo, шаблоны)

HF-4

Интеграция runner-gradle (metadata.json)

HF-5

Готовые шаблоны (title-card, code-diff, captions)

HF-6

CI + публикация Maven Central / Gradle Portal

Сеанс 000 (bootstrap) уже завершён. Сеанс 001 будет атаковать HF-1 : заглушка плагина Gradle и интеграция AsciidoctorJ.

Почему это работает?

Три причины:

HyperFrames — "built for agents". Мой конвейер основан на ИИ-агентах

(planner-gradle + deepseek) которые генерируют контент. HyperFrames принимает Сырой HTML — формат, который LLMs знают лучше всего. Без React, без с JSX, нет кривой обучения для агента

DSL AsciiDoc естественный. Вся моя экосистема говорит на AsciiDoc.

slider-gradle, codex-gradle, training-gradle — все потребляют`.adoc`. Добавить пользовательские блоки`[hyperframes-composition]`это расширение логично, а не разрыв.

Мост Node.js — это проверенный паттерн. ProcessBuilder вне JVM,

Это то, что я уже делаю для PlantUML, Graphviz, Piper. Добавить HyperFrames не меняет ничего в архитектуре — это ещё один внешний инструмент, управляемый из Gradle.

Истинная сила паттерна заключается в том, что здесь нет зависимости npm в Сборка Gradle. Плагин не импортирует код Node.js. Он выполняет команда оболочки. Если HyperFrames развивается или ломается, плагин не связан — достаточно обновить команду.

Вывод: Пропущенное звено

С hyperframes-gradle мой видеопайплайн полностью готов. У меня есть:

Эти интерактивные слайды (slider-gradle)
Капсулы повторения (capsule-gradle)
Эти видео standalone (hyperframes-gradle)

Три формата. Один исходный файл: AsciiDoc.

Следующая цель HF-1: скомпилировать плагин и сгенерировать первый HTML HyperFrames из аннотированного документа AsciiDoc. Сессия 001 уже откадрирована.

hyperframes-gradle существует. Управление организовано. Бэклог написан. Архитектура документирована. Плагин создан.

Ссылки

Статья 0124 — Архитектура независимого плагина + корень потребителя
HyperFrames — GitHub
HyperFrames — Документация
foundry/public/hyperframes-gradle/hyperframes-plugin/doc/HYPERFRAMES_ARCHITECTURE.adoc— Детальная архитектура