HyperFrames-Gradle : Претвори AsciiDoc у MP4 видео

Објављено 31 May 2026

vreme čitanja : 8 minutes

Pre dve nedelje, sam pokrenuo`capsule-gradle`— плагин који трансформише дек reveal.js u kapsuli WebM videa sa TTS. Danas, dodajem novi plugin : hyperframes-gradle. On radi nešto što capsule-gradle ne radi: претворити AsciiDoc directno у MP4 видео, без пролаза кроз reveal.js.

Ово је зато постоји овај додатак, како се уклapa са постојећим, i šta motor HyperFrames od HeyGen donosi u pipeline proizvodnje sadržaja.

Тешњ у видеопроводу

Moj dokumentarni pipeline proizvodi dva tipa videa:

  1. Kapsula za reviziju (capsule-gradle) — jedan dekar reveal.js snjljen u WebM sa

naracija TTS. Savršeno za pregled modula.

  1. Animirani slidovi (slider-gradle) — interaktivni HTML deck reveal.js za

trener na mestu.

Ali nedostaje treći format: samostalni video.

Случај употребе

Садашње решение

nedostatak

Slajdovi trenera

slider-gradle → reveal.js

✅

Kapsula revizije

capsule-gradle → WebM

✅

teaser video

Ниједна

❌

Animirana tehnička demо

Ниједна

❌

Dokument-to-video

Ниједна

❌

Prvi use case je kritičan: kako generisati automatski 60-sekundni video koji predstavlja projekat ili modul, sa GSAP animacijama, narration TTS, i pozadinska muzika — sve iz istog AsciiDoc fajla а слайдовите?

Capsule-gradle ne može da odgovozi: mu je već potreban deck reveal.js. slider-gradle dobro pravi ovaj deck, ali nije namenjen za renderovanje videa. Trebalo je direktan pipeline: AsciiDoc → video.

HyperFrames : Motor

otkrio samhttps://github.com/heygen-com/hyperframes[HyperFrames] il y a nekoliko dana. To je open-source framework (Apache 2.0) kreiran od strane HeyGen, јединорош у видеу ИИ. 22 700 zvezdica na GitHub-u. Питч се слаже у jedna rečenica :

Napiši HTML. Prikaži video. Izgrađeno za agente.

Princip: pišete HTML sa`data-*`atributi, referencirate GSAP animacija (ili CSS, Lottie, Three.js…), a motor renderuje sve u MP4 putem Puppeteer (bezglavog Chrome) + FFmpeg. Deterministički rezultat: isti unos, isti okviri, isto video.

<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>

Što čini HyperFrames različit od Remotion? Bez Reacta, bez Bundler, nema JSX. Sirow HTML koji agenti AI znaju da pišu prirodno. То је точно прилагољено мојем пайп-лајну: planner-gradle са deepseek Može da generiše ovaj HTML iz plana SPG/SPD, i Gradle plugin. Може да га конвертује у MP4.

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

hyperframes-gradle prati isti pattern kao i svi moji plugini : облик « Самостални додатак + Корен потрошач ».

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

Cevod u četiri koraka

@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontSize 11

title Ceovod hyperframes-gradle
rectangle "AsciiDoc
izvor" as adoc #LightYellow
rectangle "AsciidoctorJ" as asciidoctorj #LightBlue
rectangle "HTML HyperFrames\n(data-* attrs)" as html #LightGreen
rectangle "HyperFrames CLI
(Node.js 22+)" as cli #Lavender
rectangle "video.mp4" as mp4 #Gold

adoc -right-> asciidoctorj : parse blocs customs
asciidoctorj -right-> html : génère HTML
html -right-> cli : ProcessBuilder\nnpx hyperframes render
cli -right-> mp4 : Puppeteer + FFmpeg
@enduml

  1. AsciidoctorJ parsira izvorni AsciiDoc i izvlači prilagođene blokove

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

  1. GenerateHyperframesHtmlTask генерише HTML HyperFrames са

`data-*`одговарајући атрибути.

  1. RenderHyperframesTask poziva CLI HyperFrames putem`ProcessBuilder`:

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

  1. MP4 je raspoređen u`output/`са једным`metadata.json`za orkestraciju.

DSL AsciiDoc

Pravi dodatna vrednost plugina je DSL AsciiDoc. Korisnik Nikada ne piše HTML. On beleži svoj postojeći AsciiDoc dokument:

= 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;

Atributi docinfo (:hyperframes-width:) podešavaju dimenzije. Prilagođeni blokovi definišu kompozicije i piste. Blok `[hyperframes-animation]`sadrži sirovi kod GSAP — da je agenat AI може да генерише из опис у природном језику.

Bridge Node.js

Jedini tehnički problem : HyperFrames je u Node.js/TypeScript, i moji plugini su u Kotlin/JVM. Rešenje je`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"
        }
    }
}

Nula povezivanja koda JVM ↔ Node.js. Ugovor je putem komandne linije. i fajlovi na disku. Ovo je isti pattern kao`plantuml-gradle` (koji poziva CLI PlantUML) ili`slider-gradle`(koji poziva AsciidoctorJ). Ништа ново под сuncем — само применено на алат који је новији.

Два видео плагина, два употребе

kapšula-gradle

hyperframes-gradle

Source

Deck reveal.js (postojeći HTML)

AsciiDoc → HTML hiperokvirni

Случай употребе

Kapsula za reviziju

објасниво standalone видео

природа

Slides → video

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

isporučen

Playwright Java → WebM

HyperFrames CLI → MP4

Анимација

Prelazi reveal.js prirodni

GSAP/CSS data-attributes

Stek

100% JVM (Kotlin)

JVM + vanjski Node.js CLI

Ne se zamenjuju. Se kompletiraju. Potpun lanac vrednosti:

AsciiDoc ──→ slider-gradle ──→ deck reveal.js ──→ capsule-gradle ──→ WebM капсула ревизије

AsciiDoc ──→ hyperframes-gradle ──→ MP4 (samostalno video)

Korisnik piše jedan AsciiDoc fajl. slider-gradle proizvodi slajdove. capsule-gradle производи капсулу ревизије. hyperframes-gradle производи video teaser i tehničke demo.

6 EPICs iz Roadmape

plugin je strukturiran u 6 EPICs:

EPIC

Опис

Prioritet

HF-0

Bootstrap upravljanje + okvirna arhitektura

✅ ZAVRŠENO

HF-1

Plugin Gradle stub + AsciidoctorJ integracija

P0

HF-2

Bridge CLI HyperFrames (ProcessBuilder → npx → MP4)

P1

HF-3

DSL AsciiDoc običaji (blokovi, docinfo, šabloni)

P1

HF-4

Integracija runner-gradle (metadata.json)

P2

HF-5

Templates gotovi za upotrebu (title-card, code-diff, captions)

P3

HF-6

CI + objava Maven Central / Gradle Portal

P3

Сесија 000 (bootstrap) већ је завршена. Сесија 001 ће нападнути на HF-1 : stub Gradle plugina i integracija AsciidoctorJ.

Zašto radi

Три причине :

  1. HyperFrames je "built for agents". Moj pipeline se temelji na AI agentima.

(planner-gradle + deepseek) koji generišu sadržaj. HyperFrames prima HTML neobradjen — format koji LLMs najbolje opanuju. Bez React, bez Bez JSX, nema krivulje učenja za agenta.

  1. DSL AsciiDoc je prirodan. Sav moj ekosistem govori AsciiDoc.

slider-gradle, codex-gradle, training-gradle — svi potrošavaju`.adoc`. Dodaj custom blokovi`[hyperframes-composition]`је додатак logično, nije ruptura.

  1. Node.js bridge je isprobano obrazac. ProcessBuilder izvan JVM,

Ovo je to što već radim za PlantUML, Graphviz, Piper. Dodaj HyperFrames Ne menja ništa u arhitekturi — još jedan spoljni alat, Upravljan od Gradle.

Stvarna snaga uzorka je da nema nijedne zavisnosti npm u Gradle build. Plugin ne uvozi nikav Node.js kod. Izvršava Команда шела. Ако HyperFrames мења или се лома, плагин није повезан. — dovoljno je ažurirati naredbu.

Conclusion: Nedostajući veza

Sa hyperframes-gradle, moj video pipeline je kompletan. Imam :

  • interaktivni slidovi (slider-gradle)

  • капсуле ревизије (capsule-gradle)

  • самоставни видео (hyperframes-gradle)

Tri formata. Jedan izvorni fajl: AsciiDoc.

Sledeći cilj je HF-1 : kompajlirati plugin i generisati prvi HTML HyperFrames iz annotovanog AsciiDoc dokumenta. Sesija 001 je već okvirena.

hyperframes-gradle postoji. Upravljanje je na mestu. Pozadina napisano je. Arhitektura je dokumentovana. Plugin je rođen.

Reference

Повезани чланци

Audit moje potrošnje LLM : SQLite, OpenCode, Ollama Cloud, i Zašto Moj Pro Abonament razbijava svetski tržište
18 May 2026
Архитектура « Plugin nezavisni + koren potrošač » : Зашто моје builds Gradle се дублирају
14 May 2026
Knowledge Graph kao motor preporuke: kako sam ubio « povezani članci » hronološki
12 May 2026