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

Publié le 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 تم التقاطه بـ WebM مع

narration TTS. مثالي لإعادة مراجعة وحدة

  1. شرائح الرسوم المتحركة (slider-gradle) — عرض شرائح reveal.js HTML تفاعلي لـ

المدرب الحضوري.

لكنّه يفتقر إلى تنسيق ثالث: الفيديو المستقل

حالة استخدام

الحل الحالي

نقص

شرائح المدرب

slider-gradle → reveal.js

✅

كبسولة المراجعة

capsule-gradle → WebM

✅

فيديو تشويقي

لا شيء

❌

عرض تقني متحرك

لا شيء

�❌

وثيقة إلى فيديو

لا شيء

�❌

الحالة الأولى للاستخدام حرجة: كيف يتم توليدها تلقائيًا فيديو مدته 60 ثانية يُظهر مشروعًا أو وحدةً، مع رسوم متحركة GSAP, السرد TTS، وموسيقى خلفية — كل ذلك من نفس ملف AsciiDoc ماذا عن الشرائح؟

لا يمكن لـ Capsule-gradle الرد: فهو بحاجة مسبقًا إلى عرض reveal.js. يُنتج slider-gradle هذا الدِّك جيدًا، لكنه ليس مُصممًا لعرض الفيديو. كان من الضروري أن يكون هناك خط أنابيب مباشر : AsciiDoc → فيديو

HyperFrames : المحرك

اكتشفْتhttps://github.com/heygen-com/hyperframes[HyperFrames] il y a بضع أيام. إنه إطار عمل مفتوح المصدر (Apache 2.0) تم إنشاؤه بواسطة HeyGen, وحيد القرن لفيديو الذكاء الاصطناعي. 22 700 نجمة على GitHub. العرض التقديمي يندرج في جملة :

اكتب HTML. عرض الفيديو. مصمم للوكلاء.

المبدأ: أنت تكتب HTML مع`data-*`السمات، أنت تشير رسوم متحركة GSAP (أو CSS، Lottie، Three.js …)، والمحرك يحول الكل إلى MP4 من خلال Puppeteer (Chrome بدون واجهة) + 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، لا bundler، بدون JSX. HTML خام يستطيع الوكلاء الذكاء الاصطناعي كتابته بشكل أصلي إنه مصمم بشكل دقيق لخطتي : planner-gradle مع deepseek يمكنه إنشاء هذا HTML من خطة SPG/SPD، وإضافة Gradle يمكنه تحويله إلى MP4.

بنية المكوّن الإضافي

hyperframes-gradle يتبع نفس النمط كجميع مكوّناتي : ال نمط « الإضافة المستقلة + الجذر المستهلك ».

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

الخط الأنبوبي في أربع مراحل

Failed to generate image: PlantUML preprocessing failed: [From <input> (line 7) ]

@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontSize 11

title خط أنابيب hyperframes-gradle
rectangle "AsciiDoc
مصدر" as adoc #LightYellow
^^^^^
 Syntax Error? (Assumed diagram type: activity)

@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontSize 11

title خط أنابيب hyperframes-gradle
rectangle "AsciiDoc
مصدر" as adoc #LightYellow
rectangle "AsciidoctorJ" as asciidoctorj #LightBlue
rectangle "HTML إطارات فرعية\n(سمات data-*)" as html #LightGreen
rectangle "واجهة سطر أوامر HyperFrames
(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 يستدعي واجهة سطر أوامر HyperFrames عبر`ProcessBuilder`:

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

  1. تم نشر MP4 في`output/`مع أحد`metadata.json`للتنسيق.

لغة المجال المحدد 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 الخام — الذي الوكيل IA يمكن أن يولد من وصف بلغة طبيعية

الجسر 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). لا شيء جديد تحت الشمس — مجرد تطبيق على أداة أحدث.

إضافتان فيديو، استخدامان

كبسولة-gradle

hyperframes-gradle

مصدر

Deck reveal.js (HTML موجود)

AsciiDoc → إطارات فائقة HTML

حالة الاستخدام

كبسولة المراجعة

فيديو مستقل تفسيري

الطبيعة

شرائح → فيديو

وثيقة → فيديو

معطى

Playwright جافا → WebM

HyperFrames CLI → MP4

الرسوم المتحركة

الانتقالات reveal.js الأصليين

GSAP/CSS سمات البيانات

مكدس

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 ينتج فيديو التشويق والعروض التقنية.

الستة EPICs الخريطة الطريق

الملحق منظم في 6 EPICs :

أسطوري

الوصف

الأولوية

HF-0

Bootstrap حوكمة + تحديد معمارية

�✅ مكتمل

HF-1

إضافة Gradle الوهمية + تكامل AsciidoctorJ

P0

HF-2

Bridge CLI HyperFrames (ProcessBuilder → npx → MP4)

P1

HF-3

DSL AsciiDoc customs (كتل, docinfo, templates)

P1

HF-4

تكامل runner-gradle (metadata.json)

P2

HF-5

قوالب جاهزة للاستخدام (بطاقة العنوان, فرق الكود, التعليقات)

P3

HF-6

CI + النشر Maven Central / Gradle Portal

P3

الجلسة 000 (bootstrap) قد اكتملت بالفعل. ستقوم الجلسة 001 بهجوم على HF-1 : العُقدة الخاصة بإضافة Gradle والتكامل مع AsciidoctorJ

لماذا يعمل

ثلاثة أسباب :

  1. HyperFrames هو "مبني للوكلاء". خط أنابيبي يعتمد على وكلاء الذكاء الاصطناعي

(planner-gradle + deepseek) التي تولد محتوى. HyperFrames تقبل HTML الخام — التنسيق الذي تتقنه نماذج LLM بأفضل طريقة. بدون React، بدون بدون JSX، لا توجد منحنى تعلم للوكيل.

  1. لغة مجال AsciiDoc طبيعية. كل نظامي البيئي يتحدث AsciiDoc.

slider-gradle, codex-gradle, training-gradle — جميعهم يستهلكون`.adoc`. إضافة كتل مخصصة`[hyperframes-composition]`هي امتداد منطقي، وليس انقطاعًا.

  1. جسر Node.js هو نمط المثبت. ProcessBuilder خارج JVM

هذا ما أفعله بالفعل لـ PlantUML، Graphviz، Piper. إضافة HyperFrames لا يغير أي شيء في المعمارية — إنه مجرد أداة خارجية إضافية، يتم التحكم به من Gradle.

القوة الحقيقية لل pattern هو أنه لا توجد أي اعتماد npm في إنشاء Gradle. الإضافة لا تستورد أي كود Node.js. إنه ينفذ أمر شِل. إذا تطورت HyperFrames أو تعطلت، فإن الملحق غير مرتبط. — ما عليك سوى تحديث الأمر.

الاستنتاج: الحلقة المفقودة

مع hyperframes-gradle، خط أنابيب الفيديو الخاص بي مكتمل. لدي :

  • ال*شرائح تفاعلية* (slider-gradle)

  • ال كبسولات المراجعة (capsule-gradle)

  • ال مقاطع الفيديو المستقلة (hyperframes-gradle)

ثلاثة تنسيقات. ملف مصدر واحد فقط: AsciiDoc.

الهدف التالي هو HF-1: تجميع البرنامج المساعد وتوليد أول HTML HyperFrames من مستند AsciiDoc المعلق. الجلسة 001 تم إطاره بالفعل.

hyperframes-gradle موجود. الحوكمة جاهزة. قائمة المهام تمت كتابته. تم توثيق المعمارية. تم إنشاء المكوّن الإضافي.

المراجع

Articles connexes

تدقيق استهلاكي ل LLM: SQLite, OpenCode, Ollama Cloud, ولماذا اشتراطي الاحترافي يُكسِر السوق العالمي
18 May 2026
هندسة « المكوّن المستقل + جذر المستهلك » : لماذا تتكرر بناءات Gradle الخاصة بي؟
14 May 2026
الرسم البياني للمعرفة كمحرك للتوصية: كيف قتلت المقالات « ذات الصلة » الزمنية
12 May 2026