HyperFrames-Gradle : تحويل AsciiDoc إلى فيديو MP4

منتشر شده در 31 May 2026

زمان خوانش : 8 minutes

دو هفته پیش، من راه‌اندازی کردم.capsule-gradle— یک پلاگین که یک دک را تبدیل می‌کند reveal.js در کپسول ویدیو WebM با TTS. امروز، من یک افزونه جدید اضافه می‌کنم : hyperframes-gradle. او کاری می‌کند که capsule-gradle انجام نمی‌دهد : تبدیل AsciiDoc به صورت مستقیم به ویدیو MP4، بدون گذراندن از reveal.js.

اینجاست دلیل وجود این پلاگین، چگونه با موجود (موجود) مرتبط است, و این که موتور HyperFrames HeyGen چه چیزی به خط لوله تولید محتوا می‌افزاید.

سوراخ در لوله ویدئو

پایپ لاین اسناد من دو نوع ویدیو تولید می‌کند :

  1. کپسول بازنگری (capsule-gradle) — یک دک revel.js ضبط شده در WebM با

narration TTS. عالی برای مرور یک ماژول.

  1. اسلایدهای انیمیشن (slider-gradle) — یک دک reveal.js HTML تعاملی برای

آموزشگر حضوری

اما یک فرمت سوم مفقود است : ویدیو مستقل

مورد استفاده

راه‌حل فعلی

نقص

اسلایدهای مربی

slider-gradle → reveal.js

✅

کپسول بازنگری

capsule-gradle → WebM

✅

ویدئو تيزر

هیچ

❌

نمایش فنی متحرک

هیچ

❌

اسناد به ویدیو

هیچ

❌

اولین مورد استفاده بحرانی است : چگونه به‌طور خودکار تولید شود ویدیوی ۶۰ ثانیه‌ای که یک پروژه یا ماژول را معرفی می‌کند، با انیمیشن‌های GSAP، دبیج TTS و موسیقی پس‌زمینه — تمام از همان فایل AsciiDoc اسلایدها چطور؟

Capsule-gradle نمی‌تواند پاسخ دهد: او déjà نیاز به یک deck reveal.js دارد. slider-gradle این دک را به خوبی می‌سازد، اما برای رندر ویدیویی طراحی نشده است. نیاز به یک پایپ لاین direct بود: AsciiDoc → ویدیو

HyperFrames : موتور

من کشف کردمhttps://github.com/heygen-com/hyperframes[HyperFrames] il y a چند روز. این یک چارچوب اوپن‌سورس (آپاچی 2.0) است که توسط HeyGen ساخته شده، tek-dane-ye videoyi-e AI. 22 700 ستاره در GitHub. پیتچ در یک جمله :

HTML بنویسید. ویدیو را رندر کنید. برای عوامل ساخته شده.

اصول: شما HTML با`data-*`صفات، شما ارجاع می‌دهید یک انیمیشن GSAP (یا CSS، Lottie، Three.js…) و موتور آن را به‌صورت MP4 رندر می‌کند. از طریق Puppeteer (Chrome headless) + FFmpeg. نتیجه-deterministic: همان ورودی، فریم‌های یکسان، ویدیوی یکسان.

<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 همان الگویی را که تمام افزونه‌های من دارند، دنبال می‌کند : الگ « Plugin Indépendant + Racine Consommateur »

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
منبع" as adoc #LightYellow
rectangle "AsciidoctorJ" as asciidoctorj #LightBlue
rectangle "HTML چرب‌های هیپر
(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

  1. AsciidoctorJ سورس AsciiDoc را تجزیه می‌کند و بلوک‌های سفارشی را استخراج می‌کند

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

  1. GenerateHyperframesHtmlTask HTML HyperFrames را با

`data-*`ویژگی‌های متناظر.

  1. RenderHyperframesTask CLI HyperFrames را فراخوانی می‌کند از طریق`ProcessBuilder` :

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

  1. MP4 استقرار یافته در`output/`با یک`metadata.json`برای آراسترایی.

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 را فراخوانی می‌کند). هیچ چیز جدیدی تحت خورشید نیست — فقط به یک ابزار جدیدتر اعمال شده.

دو افزونه ویدیویی، دو کاربرد

کپسول-گریدل

hyperframes-gradle

Source

بسته reveal.js (HTML موجود)

AsciiDoc → HTML HyperFrames

مورد استفاده

کپسول مرور

ویدیو standalone توضیحی

طبیعت

اسلایدها → ویدیو

سند → ویدئو

منتج

Playwright Java به WebM

HyperFrames CLI به MP4

انیمیشن

تغییرات reveal.js بومی‌ها

ویژگی‌های داده GSAP/CSS

ستاک

100٪ JVM (Kotlin)

JVM + رابط خط فرمان Node.js خارجی

آنها جایگزین یکدیگر نیستند. آنها یکدیگر را تکمیل می‌کنند. زنجیره کامل ارزش:

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

AsciiDoc ──→ hyperframes-gradle ──→ MP4 (ویدئو مستقل)

کاربر یک فایل AsciiDoc تک می‌نویسد. slider-gradle اسلایدها را می‌سازد. capsule-gradle یک capsule بازنگری را تولید می‌کند. hyperframes-gradle تولید می‌کند ویدیو تیزر و دیموهای فنی

6 EPIC از نقشه راه

افزونه در 6 EPIC ساختار یافته است :

EPIC

توضیح

اولویت

HF-0

Bootstrap حاکمیت + تعریف چارچوب معماری

✅ تموم

HF-1

افزونه Gradle stub + ادغام 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

P3

جلسه 000 (bootstrap) به اتمام رسیده است. جلسه 001 به HF-1 : حمله خواهد کرد ستاب پلاگین Gradle و یکپارچه‌سازی AsciidoctorJ

چرا این کار می‌کند

سه دلیل :

  1. HyperFrames "ساخته‌شده برای عوامل". خط لوله من به عوامل هوش مصنوعی وابسته است

(planner-gradle + deepseek) که محتوا تولید می‌کنند. HyperFrames می‌پذیرد HTML brut — فرمتی که LLMs به بهترین شکل掌握 می‌کنند. بدون React، بدون در مورد JSX، منحنی یادگیری برای العامل نیست.

  1. DSL AsciiDoc طبیعی است. تمام اکوسیستم من AsciiDoc صحبت می‌کند.

slider-gradle, codex-gradle, training-gradle — همه مصرف می‌کنند از`.adoc`. افزودن بلوک‌های سفارشی`[hyperframes-composition]`یک افزونه است منطق، نه یک قطع.

  1. پال Node.js یک الگو آزمون‌ شده است. ProcessBuilder خارج از JVM,

این همان کاری است که من برای PlantUML، Graphviz، Piper انجام می‌دهم. افزودن HyperFrames هیچ تغییری در معماری ایجاد نمی‌کند — صرفاً یک ابزار خارجی اضافی است، کنترل‌شده از Gradle.

ال verdadero قوه-pattern این است که هیچ وابستگی npm در ساخت Gradle. پلاگین هیچ کد Node.js را وارد نمی‌کند. او یک دستور شل. اگر HyperFrames پیشرفت کند یا خراب شود، پلاگین جفت نشده است. — کافی است دستور را به‌روزرسانی کنید.

نتیجه: پیوند گم‌شده

با hyperframes-gradle، پایپلین ویدیو من کامل است. دارم :

  • اسلایدهای تعاملی (slider-gradle)

  • کپسول‌های بازبینی (capsule-gradle)

  • ویدیوهای standalone (hyperframes-gradle)

سه فرمت. تنها یک فایل منبع: AsciiDoc.

هدف بعدی HF-1 است: افزونه را کامپایل کنید و یک اولین HyperFrames HTML از یک سند AsciiDoc علامت‌گذاری شده. جلسه 001已经放入框架中

hyperframes-gradle موجود است. حکم‌گری قرار دارد. بک‌لاگ نوشته شده است. معماری مستند شده است. پلاگین تولید شده است.

منابع

مقالات مرتبط

بررسی مصرف من LLM : SQLite, OpenCode, Ollama Cloud، و چرا اشتراک حرفه‌ای من بازار جهانی را شکسته است
18 May 2026
Architecture « افزونه مستقل + ریه مصرف‌کننده »: چرا ساخت‌های Gradle من تکرار می‌شوند؟
14 May 2026
گراف دانش به عنوان موتور توصیه: چگونه من «مقالات مرتبط» زمانی را حذف کردم
12 May 2026