HyperFrames-Gradle : Μετατροπή του AsciiDoc σε Βίντεο MP4
Δημοσιεύτηκε 31 May 2026
Πριν δύο εβδομάδες, έχω εκκινήσει`capsule-gradle`— ένα plugin που μετατρέπει ένα deck reveal.js σε καψέλα βίντεο WebM με TTS. Σήμερα, προσθέτω ένα νέο plugin : hyperframes-gradle. Κάνει κάτι που το capsule-gradle δεν κάνει : να μετατρέψετε το AsciiDoc ευθύς σε βίντεο MP4, χωρίς να περάσετε μέσω του reveal.js.
Εδώ είναι γιατί αυτό το plugin υπάρχει, πώς ενσωματώνεται με το υπάρχον, και το που η μηχανή HyperFrames του HeyGen προσφέρει στη ροή παραγωγής περιεχομένου.
Η τρύπα σε ο αγωγός βίντεο
Το documentary pipeline μου παράγει δύο τύπους βίντεο:
-
κάψουλα επανάληψης (capsule-gradle) — ένας δέκας reveal.js συλλημμένο σε WebM με
αφήγγιση TTS. Ιδέαλ για να επαναλάβετε ένα ενότητα.
-
Ανιματισμένες διαφάνειες (slider-gradle) — ένας διαδραστικός deck reveal.js HTML για
ο εκπαιδευτής πρόσωπο.
Αλλά λείπει ένας τρίτος τύπος : το standalone video
| Use case | Τρέχουσα λύση | έλλειψη |
|---|---|---|
Διαφάνειες εκπαιδευτή |
slider-gradle → reveal.js |
✅ |
κάψουλα αναθεώρισης |
capsule-gradle → WebM |
✅ |
βίντεο τειζέρ |
καμία |
❌ |
Ανιμημένη τεχνική επίδειξη |
κανέμη |
❌ |
Έγγραφο-σε-βίντεο |
καμία |
❌ |
Το πρώτο use case είναι κρίσιμο: πώς να το δημιουργήσουμε αυτόματα ένα βίντεο 60 δευτερόλεπτου που παρουσιάζει ένα πρότζεκτ ή ένα module, με κινούμενα GSAP, διαφώνηση TTS, και μουσική υπόβαθρο — όλο από το ίδιο αρχείο AsciiDoc Τι για τις διαφάνειες;
Το Capsule-gradle δεν μπορεί να απαντήσει: του χρειάζεται ήδη ένα deck reveal.js. ο slider-gradle παράγει καλά αυτό το deck, αλλά δεν έχει σχεδιαστεί για την απόδοση βίντεο. Πρέπει να υπήρχε ένα ευθύγραμμο pipeline : AsciiDoc → βίντεο.
HyperFrames : Ο Μηχανισμός
Εξέφυλαhttps://github.com/heygen-com/hyperframes[HyperFrames] il y a μερές μέρες. Είναι ένα πλαίσιο open-source (Apache 2.0) που δημιουργήθηκε από το HeyGen, το μονοκέρωτο του βίντεο ΤΕ. 22 700 αστέρια στο GitHub. Το pitch κρατάει στο μια πρόταση :
Γράψτε HTML. Αποδίδει βίντεο. Χτισμένο για πράκτορες
Η αρχή: γράφετε HTML με`data-*`ιδιότητες, αναφέρετε Μια κίνηση GSAP (ή CSS, Lottie, Three.js…), και ο μηχανός αποδίδει όλο το σε MP4 μέσω Puppeteer (headless Chrome) + FFmpeg. Αποτέλεσμα determinιστικό: ίσα εισαγωγή, ίδιες frames, ίδιο βίντεο.
<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 που οι παράγοντες AI ξέρουν να γράφουν φυσικά. Το είναι προσαρμοσμένο ακριβώς για το pipeline μου : planner-gradle με deepseek μπορεί να δημιουργήσει αυτό το HTML από ένα σχέδιο SPG/SPD, και ένα plugin Gradle μπορεί να το μετατρέψει σε MP4.
Η αρχιτεκτονική του Plugin
Το hyperframes-gradle ακολουθεί το ίδιο μοντέλο όπως όλα τα plugins μου : το pattern « plugin ανεξάρτητο + ρίζα καταναλωτής »
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Το pipeline σε τέσσερα βήματα
@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 11 title Pipeline hyperframes-gradle rectangle "AsciiDoc\nπηγή" 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 : 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 καλεί την CLI HyperFrames μέσω`ProcessBuilder`:
npx hyperframes render --input index.html --output video.mp4.
-
Το MP4 αναπτύσσεται σε`output/`με ένα`metadata.json`για την ορχέστρωση.
Το DSL AsciiDoc
Η πραγματική αξία που προσθέτει το plugin, είναι το 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:) ρυθμίζουν τις διαστάσεις. Τα προσαρμοσμένα μπλοκ ορίζουν τα συνθέματα και τις pistes. Το μπλοκ `[hyperframes-animation]`περιέχει τον ακατέργαστο κώδικα GSAP — που ο πράκτορας ΤΝ μπορεί να δημιουργήσει από μια περιγραφή σε φυσική γλώσσα.
Η Γέφυρα Node.js
Το único τεχνικό σημείο εμπόδια: Το HyperFrames είναι σε Node.js/TypeScript, και τα plugins μου είναι σε Kotlin/JVM. Η λύση είναι ένα`ProcessBuilder`:
(three spaces after newline)
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). Κανένα νέο στον ήλιο — απλώς εφαρμοσμένο σε ένα πιο νέο εργαλείο.
Δύο πρόσθετα βίντεο, δύο χρήσεις
| καψέλα-gradle | hyperframes-gradle | |
|---|---|---|
</think> |
Deck reveal.js (υπάρχον HTML) |
AsciiDoc → HTML HyperFrames |
Περίπτωση χρήσης |
καψούλα αναθεώρησης |
Βίντεο εξηγιακό αυτόνομο |
Φύση |
Diapositives → βίντεο |
Document → βίντεο |
αποδοθείς |
Playwright Java → WebM |
HyperFrames CLI → MP4 |
ζωτικότητα |
Μεταβάσεις reveal.js εγγενείς |
GSAP/CSS δεδομένα-attributes |
Στοίβα |
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 παραγεύει το βίντεο teaser και τα τεχνικά demos
Τα 6 EPICs της Roadmap
Το πρόσθετο είναι δομημένο σε 6 EPICs :
| επικός | Περιγραφή | προτεραιότητα |
|---|---|---|
HF-0 |
Bootstrap διακυβέρνηση + πλαίσιο αρχιτεκτονικής |
✅ ΟΛΟΚΛΗΡΩΜΕΝΟ |
HF-1 |
Πρόσθετο Gradle stub + ενσωμάτωση AsciidoctorJ |
P0 |
HF-2 |
Γέφυρα CLI HyperFrames (ProcessBuilder → npx → MP4) |
P1 |
HF-3 |
DSL AsciiDoc εθίμητα (blocs, docinfo, templates) |
P1 |
HF-4 |
Ενσωμάτωση runner-gradle (metadata.json) |
P2 |
HF-5 |
Πρότυπα έτοιμα προς χρήση (title-card, code-diff, captions) |
P3 |
HF-6 |
CI + δημοσίευση Maven Central / Gradle Portal |
P3 |
Η συνεδρία 000 (bootstrap) ολοκληρώθηκε ήδη. Η συνεδρία 001 θα επιτεθεί στο HF-1 : το stub του plugin Gradle και η ενσωμάτωση AsciidoctorJ.
Γιατί λειτουργεί;
Τρεις λόγοι :
-
HyperFrames είναι "built for agents". Ο αγωγός μου βασίζεται σε agents AI
(planner-gradle + deepseek) που δημιουργούν περιεχόμενο. HyperFrames δέχεται HTML ακατέργαστο — το format που τα LLMs το διαχειρίζονται καλύτερα. Χωρίς React, χωρίς για το JSX, δεν υπάρχει καμπύλη μάθησης για τον παράγοντα.
-
Το DSL AsciiDoc είναι φυσικό. Το ολόκληρο μου οικοσύστημα μιλά AsciiDoc.
slider-gradle, codex-gradle, training-gradle — όλοι καταναλώνουν το`.adoc`. προσθέστε μπλοκ customs`[hyperframes-composition]`είναι μια επέκταση λογικό, όχι μια διακοπή.
-
Η γέφυρα Node.js είναι ένα αποδεδειγμένο μοτίβο. ProcessBuilder εκτός της JVM,
Αυτό είναι αυτό που κάνω ήδη για το PlantUML, το Graphviz, το Piper. Προσθέστε το HyperFrames Δεν αλλάζει τίποτα στην αρχιτεκτονική — είναι απλώς ένα εξωτερικό εργαλείο περισσότερο, ελεγχόμενο από το Gradle.
|
Η αληθινή δύναμη του pattern, είναι ότι δεν υπάρχει καθόλου εξάρτηση npm στο το Gradle build. Το πρόσθετο δεν εισάγει κώδικα Node.js. Εκτελεί ένα εντολή shell. Αν το HyperFrames εξελιχθεί ή καταστραφεί, το πρόσθετο δεν είναι συνδεδεμένο — Αρκεί να ενημερώσετε την εντολή. |
Conclusion : Το ληστέρον που λείπεται
Με το hyperframes-gradle, το pipeline βίντεό μου είναι ολοκληρωμένο. Έχω :
-
Οι διαλογικές διαφάνειες (slider-gradle)
-
Τα καψούλες επαναλήψεως (capsule-gradle)
-
Οι βίντεο standalone (hyperframes-gradle)
Τρεις μορφές. Ένας μόνο αρχείο πηγής: το AsciiDoc.
Ο επόμενος στόχος είναι HF-1: να μεταγλωτίσουμε το πρόσθετο και να δημιουργήσουμε ένα πρώτο HTML HyperFrames από ένα έγγραφο AsciiDoc σχολιασμένο. Η συνεδρία 001 είναι ήτοι πλαϊσμένο.
hyperframes-gradle υπάρχει. Η διακυβέρνηση είναι εφαρμοσμένη. Το backlog γράφεται. Η αρχιτεκτονική είναι τεκμηριωμένη. Το plugin είναι γεννημένο.