HyperFrames-Gradle : Transformer l'AsciiDoc en Vidéo MP4

شائع شدہ: 31 May 2026

پڑھنے کا وقت : 8 minutes

ہفتوں دو پہلے، میں نے لانچ کیا`capsule-gradle`— ایک پلاگین جو ڈیک کو تبدیل کرتا ہے reveal.js کے ساتھ WebM ویڈیو کیپسول میں TTS. آج، میں ایک نئی پلاگین شامل کر رہا ہوں: hyperframes-gradle. وہ کچھ کرتا ہے جو capsule-gradle نہیں کرتا : AsciiDoc کو مستقیم MP4 ویدیو میں تبدیل کریں، reveal.js سے गुज़ے بغیر۔

یہاں یہ پلاگ ان کیوں موجود ہے، اور یہ موجودہ نظام کے ساتھ کیسے منسلک ہے، اور HeyGen کے HyperFrames انجن محتوا کی تولید کے پائپ لائن میں کیا لاتا ہے؟

ویڈیو پائیپ لائن میں خلا

میرے دستاویزی پائیپ لائن دو قسم کے ویڈیوز بناتی ہے :

  1. کپسول تجدید نظر (capsule-gradle) — ایک ڈیک reveal.js ویب ام میں کپچر کیا گیا کے ساتھ

ناریشن ٹی ٹی ایس. موڈیول دوبارہ دیکھنے کے لیے مناسب۔

  1. Slides d’animation (slider-gradle) — ایک deck reveal.js HTML متاعمل کے لئے

حضوری تربیت کار.

لیکن اسے ایک تیسرا فارمیٹ گم ہے: الگ ویڈیو۔

(Empty output) موجودہ حل کمی

تربیت کرنے والے سلیڈز

slider-gradle → reveal.js

✅

کیپسول تکریس

capsule-gradle → WebM

✅

تیزر ویڈیو

کسی

❌

متحرک ٹیکنیکی ڈیمو

کسی نہیں

❌

ڈاک-ٹو-ویڈیو

کچھ نہیں

❌

پہلا use case اہم ہے : خودکارانہ طور پر کیسے بنائیں 60 سیکنڈ کی ویڈیو جو ایک پروژے یا ماڈیول کو دکھاتی ہے، GSAP انیمیشنز کے ساتھ narration TTS, اور موسیقی پس منظر — تمام چیزیں اسی فائل AsciiDoc سے اسلائڈز کے بارے میں ?

Capsule-gradle جواب نہیں दे سакتی ہے: اسے déjà ایک reveal.js ڈیک درکار ہے۔ slider-gradle اس ڈیک کو اچھی طرح پیدا کرتا ہے، لیکن اس کا ڈیزائن ویڈیو رینڈرنگ کے لیے نہیں ہے۔ ضروری تھا ایک direct پائلائن : AsciiDoc → ویدیو۔

HyperFrames : انجن

میں نے دریافت کیاhttps://github.com/heygen-com/hyperframes[ہائیپر فریمز] il y a کئی دن۔ یہ ایپاچی 2.0 (آپیشن-سورس) فریم ورک ہے جو ہیجن نے بنایا ہے، AI ویڈیو کی ایکورن۔ GitHub پر 22 700 ستارے۔ پچ میں ہے ایک جملہ :

HTML لکھیں۔ ویدیو رینڈر کریں۔ ایجنٹس کے لیے بنایا گیا.

اصول : آپ HTML لکھتے ہیں ساتھ`data-*`خصوصیات، آپ حوالہ دے رہے ہیں ایک GSAP انیمیشن (یا CSS، Lottie، Three.js…)، اور انجن سب کچھ MP4 میں render کر دیتا ہے via Puppeteer (headless Chrome) + FFmpeg. نتیجہ معیاری : وہی input, ایک جیسے فریم، ایک جیسے ویڈیو

<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 ایجنٹس فطری طور پر لکھ سکتے ہیں۔ یہ میرا پائپ لائن کے لیے بالکل موزوں ہے : planner-gradle ساتھ deepseek یہ HTML SPG/SPD کے منصوبے سے بنایا جا سکتا ہے، اور ایک Gradle پلاگین۔ یہ اسے MP4 میں تبدیل کر سکتا ہے۔

پلاگائن کی معماری

hyperframes-gradle تمم مري پلاگینوں جيسا هي pattern پروى كرتا هي: یہ 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

چار مراحل میں پائپ لائن

@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontSize 11

title Pipeline 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 : 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 AsciiDoc سورس کو parse کرleta ہے اور custom blocks کو extract کرleta ہے

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

  1. GenerateHyperframesHtmlTask HTML HyperFrames کا HTML بناتا ہے کے ساتھ

`data-*`مطابق خصوصیات

  1. RenderHyperframesTask HyperFrames CLI ko via istemal karke bulata hai`ProcessBuilder`:

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

  1. 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 کا خام کود شامل ہے — جسے AI ایجنٹ طبيعتی زبان کی وضاحت سے بن سکتا ہے۔

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` (جس پلانٹ یو امیل سی ایلی بلاتا ہے) یا`slider-gradle`(جو AsciidoctorJ کو بلاتا ہے). شمس کے نیچے کچھ نیا نہیں — صرف ایک نئے اوزار پر لاگو کیا گیا۔

دو ویڈیو پلاگن، دو استعمال

کپسول-گریڈیل hyperframes-gradle

منبع

ڈیک reveal.js (موجودہ HTML)

AsciiDoc سے HTML HyperFrames

استعمال کا مثال

کیپسول تکرِیر

اسٹینڈ 얼ون وضاحتی ویڈیو

طبیعت

اسلائیڈز → وڈیو

دستاویز → ویڈیو

دیا گیا

Playwright Java → WebM

HyperFrames CLI → MP4

انیمیشن

Transitions reveal.js natives

GSAP/CSS data-attributes

ڈھیروں

100% JVM (Kotlin)

JVM + خارجی Node.js CLI

وہ ایک دوسرے کی جگہ نہیں لیتے۔ وہ ایک دوسرے کو مکمل کرتے ہیں۔ پوری قدر کی زنجیر :

AsciiDoc ──→ slider-gradle ──→ deck reveal.js ──→ capsule-gradle ──→ WebM (کیپسال ترمیم)

AsciiDoc ──→ hyperframes-gradle ──→ MP4 (اسٹینڈیلون ویڈیو)

صارف ایک ہی AsciiDoc فائل لکھتا ہے۔ slider-gradle اسلاڈز بناتا ہے۔ capsule-gradle مراجعات کی کپسول بناتا ہے۔ hyperframes-gradle بناتا ہے ٹیزر ویڈیو اور تکنیکی ڈیموز۔

روڈ میپ کے 6 ایپِیک

پلاگ ان 6 ایپکس (EPICs) میں ڈھالا گیا ہے :

ہیمونی تفصیل ترجیح

HF-0

Bootstrap گورننس + معماری کی فریمنگ

✅ مکمل

HF-1

پلاگین گرائل اسٹب + 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

Templates استعمال کے لیے تیار (title-card, code-diff, captions)

P3

HF-6

CI + اشاعت Maven Central / Gradle Portal

P3

سیشن 000 (bootstrap) مکمل ہو چکی ہے۔ سیشن 001 HF-1 پر حملہ کرے گی : Gradle پلاگین کا اسٹب اور AsciidoctorJ کی انٹیگریشن.

یہ کیوں کام کرتا ہے

تین وجوہات :

  1. HyperFrames "agents کے لئے بنایا گیا" ہے میرا پائلپ لائن AI ایجنٹس پر مبنی ہے

(planner-gradle + deepseek) materiaal paida karte hain. HyperFrames qabul kartā hai. خام HTML — وہ فॉرمет جو LLMs سب سے بہتر سمجھتے ہیں۔ React نہیں، نہیں JSX کا نہیں، ایجنٹ کے لیے سیکھنے کا منحنی نہیں.

  1. AsciiDoc DSL فطری ہے. میرا کامل ایکوسسٹم AsciiDoc بولتا ہے۔

slider-gradle, codex-gradle, training-gradle — سب یہ استعمال کرتے ہیں`.adoc`. کاسٹوم بلاکس شامل کریں`[hyperframes-composition]`ایک اِکٹینشن ہے منطق، ایک ٹوٹ نہیں.

  1. Node.js برچ یک ثابت کردہ نمونہ ہے. ProcessBuilder JVM کے باہر،

یہ وہی چیز ہے جو میں پہلے سے PlantUML, Graphviz, Piper کے لیے کرتا ہوں۔ HyperFrames شامل کریں معمارتی میں کوئی تبدیلی نہیں لاتا — یہ صرف ایک بیرونی آلہ ہے Gradle سے چلایا جاتا ہے۔

پٹرن کی سچائی طاقت یہ ہے کہ اس میں کسی بھی NPM کا انحصار نہیں Gradle بناؤ۔ پلاگ ان Node.js کوڈ داخل نہیں کرتا۔ یہ ایک شل کا کمانڈ. اگر HyperFrames تبدیلی کرتا ہے یا ٹوٹ جاتا ہے، پلاگین جوڑا نہیں ہے — کماند کو اپ ڈیٹ کرنا کافی ہے۔

نتیجہ: ناکامل جوڑ

hiperframes-gradle ke saath, mera video pipeline mukammal hai. Mere paas:

  • یہ انٹریکٹیو سلیڈز (slider-gradle)

  • یہ capsules de révision (capsule-gradle)

  • ال ویڈیوز اسٹینڈالون (hyperframes-gradle)

تین فارمیٹ۔ ایک ہی سورس فائل: AsciiDoc.

اگلا هدف HF-1 ہے: پلاگن کو کمپائل کریں اور پیدا کریں پہلا HTML HyperFrames ایک ملاحظے شدہ AsciiDoc دستاویز سے۔ سیشن 001 پہلے سے فریم میں ہے.

hyperframes-gradle موجود ہے۔ گورننس موجود ہے۔ بی‌کلگ یہ لکھا گیا ہے۔ معماری درج شدہ ہے۔ پلاگین پیدا ہوا ہے۔

حوالہ جات

متعلقہ مضامین

میرے LLM استعمال کا آڈٹ: SQLite، OpenCode، Ollama Cloud، اور کیوں میری پرو سبسکرپشن عالمی مارکیٹ کو پیچھے چھوڑ رہی ہے
18 May 2026
Plugin Indépendant + Racine Consommateur » آرکیٹیکچر: میرے Gradle Builds کیوں دوہرا ہو رہے ہیں
14 May 2026
Le Knowledge Graph comme moteur de recommandation : comment j'ai tué les « articles connexes » chronologiques
12 May 2026