HyperFrames-Gradle : AsciiDoc을 MP4 비디오로 변환

Table des matières

비디오 파이프라인의 구멍
HyperFrames : 엔진
플러그인 아키텍처
두 개의 비디오 플러그인, 두 가지 용도
로드맵의 6개 에픽
왜 동작하나요?
결론: 잃어버린 고리
참고문헌

읽는 시간 : 8 minutes

두 주 전에, 내가 시작했다`capsule-gradle`덱을 변환하는 플러그인 reveal.js의 WebM 비디오 캡슐에 TTS가 적용된 것입니다. 오늘, 새로운 플러그인을 추가합니다 : `hyperframes-gradle`それが capsule-gradle가 하지 않는 무언가를 수행합니다 : AsciiDoc을 직접 MP4 영상으로 변환하기, reveal.js를 거치지 않고.

이 플러그인이 존재하는 이유와 기존 시스템과의 연동 방식은 다음과 같습니다, 그리고 HeyGen의 HyperFrames 엔진이 콘텐츠 제작 파이프라인에 제공하는 것.

비디오 파이프라인의 구멍

내 다큐멘터리 파이프라인은 두 가지 유형의 비디오를 생산합니다 :

복습 캡슐 (capsule-gradle) — WebM으로 캡처된 reveal.js 덱과

narration TTS. 모듈을 복습하기에 완벽합니다.

애니메이션 슬라이드 (slider-gradle) — 인터랙티브 reveal.js HTML 데크를 위한

대면 강사

하지만 세 번째 형식이 없습니다 : 독립형 비디오

사용 사례

현재 솔루션

부족

강사용 슬라이드

slider-gradle → reveal.js

✅

수정 캡슐

capsule-gradle → WebM

✅

티저 영상

A무것도

❌

애니메이션된 기술 데모

아무것도

❌

문서-비디오

없음

❌

첫 번째 use case는 중요합니다 : 어떻게 자동으로 생성할 수 있나요 GSAP 애니메이션이 포함된, 프로젝트 또는 모듈을 소개하는 60초 비디오, TTS 내레이션, 배경 음악 — 모두 동일한 AsciiDoc 파일에서 슬라이드는?

Capsule-gradle은 응답할 수 없습니다: 이미 reveal.js 덱이 필요합니다. slider-gradle는 이 데크를 잘 생성하지만, 비디오 렌더링용으로 설계되지 않았습니다. 직접적인 파이프라인이 필요했습니다: AsciiDoc → 비디오

HyperFrames : 엔진

발견했다https://github.com/heygen-com/hyperframes[하이퍼프레임] il y a 며칠. HeyGen이 만든 Apache 2.0 라이선스의 오픈소스 프레임워크, AI 비디오의 유니콘. GitHub에서 별 22,700개. 피치는 문장 :

HTML 작성. 비디오 렌더링. 에이전트를 위한 설계.

원칙 : HTML을 작성합니다.`data-*`속성, 참조합니다 GSAP 애니메이션 (또는 CSS, Lottie, Three.js… 등)이며, 엔진이 이를 모두 MP4로 렌더링 Puppeteer (헤드리스 크롬) + 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 없이, 없이 번들러, JSX 없이. AI 에이전트가 네이티브로 작성할 수 있는 순수한 HTML. 이건 정확히 내 파이프라인에 맞춰져 있습니다: planner-gradle와 deepseek와 함께 SPG/SPD 플랜에서 이 HTML을 생성할 수 있으며, Gradle 플러그인이 있습니다. MP4로 변환할 수 있다.

플러그인 아키텍처

hyperframes-gradle는 모든 플러그인과 동일한 패턴을 따릅니다: 패턴 « 플러그인 indépendant + 소비자 루트 »

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
소스" as adoc #LightYellow
rectangle "AsciidoctorJ" as asciidoctorj #LightBlue
rectangle "HTML HyperFrames
(data-* 속성)" 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

*AsciidoctorJ*는 AsciiDoc 소스를 파싱하고 사용자 지정 블록을 추출합니다.

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

GenerateHyperframesHtmlTask HTML HyperFrames과 함께 생성한다

`data-*`해당하는 속성

*RenderHyperframesTask*는 HyperFrames CLI를 통해 호출합니다`ProcessBuilder`(empty)

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

MP4는 …에 배포됩니다`output/`와 함께`metadata.json`오케스트레이션을 위해.

AsciiDoc DSL

플러그인의 진정한 추가 가치는 AsciiDoc DSL입니다. 사용자 그는 절대 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 코드가 포함되어 있습니다 — 에이전트 IA 자연어 설명에서 생성할 수 있다.

Bridge 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` (PlantUML CLI를 호출하는) 또는`slider-gradle`(AsciidoctorJ를 호출하는). 해 아래에는 새로울 것이 없다 — 최신 도구에 적용된 것뿐이다.

두 개의 비디오 플러그인, 두 가지 용도

캡슐-gradle

hyperframes-gradle

Source

Deck reveal.js (기존 HTML)

AsciiDoc → HTML 하이퍼프레임

사용 사례

복습 캡슐

독립형 설명 영상

자연

Slides → 영상

문서 → 비디오

렌더링된

Playwright 자바 → WebM

HyperFrames CLI → MP4

애니메이션

전환 reveal.js 네이티브

GSAP/CSS 데이터 속성

스택

100% JVM (Kotlin)

JVM + 외부 Node.js CLI

그들은 서로를 대체하지 않습니다. 서로를 보완합니다. 완전한 가치 사슬 :

AsciiDoc ──→ slider-gradle ──→ 덱 reveal.js ──→ capsule-gradle ──→ WebM (복습 캡슐)

AsciiDoc ──→ hyperframes-gradle ──→ MP4 (독립형 비디오)

사용자는 하나의 AsciiDoc 파일을 작성합니다. slider-gradle가 슬라이드를 생성합니다. capsule-gradle은 리뷰 캡슐을 만듭니다. hyperframes-gradle은 만듭니다 티저 영상과 기술 데모들

로드맵의 6개 에픽

플러그인은 6개의 EPIC로 구성되어 있습니다 :

서사시적인

설명

우선순위

HF-0

부트스트랩 거버넌스 + 프레이밍 아키텍처

✅ 끝났다

HF-1

Gradle 스텁 플러그인 + AsciidoctorJ 통합

HF-2

브리지 CLI HyperFrames (ProcessBuilder → npx → MP4)

HF-3

DSL AsciiDoc 관례 (블록, docinfo, 템플릿)

HF-4

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는 '에이전트를 위해 제작되었습니다'. 내 파이프라인은 AI 에이전트에 의존합니다.

(planner-gradle + deepseek)가 콘텐츠를 생성합니다. HyperFrames는 받아들입니다. 원시 HTML — LLMs이 가장 잘 다루는 형식입니다. React이 없으며, 없음 JSX가 없으며, 에이전트에게 학습 곡선이 없습니다.

AsciiDoc DSL은 자연스럽다. 내 생태계 전체가 AsciiDoc을 사용한다.

slider-gradle, codex-gradle, training-gradle — 모두 소비하는`.adoc`. 사용자 정의 블록 추가`[hyperframes-composition]`확장입니다 논리적이다, 단절이 아니다

Node.js 브릿지는 검증된 패턴입니다. JVM 외부의 ProcessBuilder,

저는 이미 PlantUML, Graphviz, Piper에 대해 이것을 하고 있습니다. HyperFrames 추가 아키텍처에 아무것도 바꾸지 않는다 — 그것은 단지 외부 도구 하나 더일 뿐이다, Gradle에서 제어됨.

패턴의 진짜 힘은 npm 의존성이 없다는 점입니다 Gradle 빌드. 플러그인은 Node.js 코드를 가져오지 않습니다. 이를 실행 쉘 명령. HyperFrames가 진화하거나 깨지면, 플러그인은 결합되지 않습니다. — 명령어를 업데이트하기만 하면 됩니다.

결론: 잃어버린 고리

hyperframes-gradle와 함께, 내 비디오 파이프라인이 완성되었습니다. 저는 :

인터랙티브 슬라이드 (slider-gradle)
수정 캡슐 (캡슐-그레이들)
그 standalone 비디오 (hyperframes-gradle)

세 가지 형식. 하나의 소스 파일: AsciiDoc.

다음 목표는 HF-1 : 플러그인을 컴파일하고 생성하는 것입니다. 주석이 달린 AsciiDoc 문서에서 첫 번째 HTML HyperFrames를 생성합니다. 세션 001은 이미 프레임이 잡혔습니다.

hyperframes-gradle가 존재해. 거버넌스가 마련되어 있어. 백로그 작성됨. 아키텍처가 문서화되었습니다. 플러그인이 탄생했습니다.

참고문헌

Article 0124 — 독립 플러그인 아키텍처 + 소비자 루트
HyperFrames — 깃허브
HyperFrames — 문서
foundry/public/hyperframes-gradle/hyperframes-plugin/doc/HYPERFRAMES_ARCHITECTURE.adoc— 상세한 아키텍처