HyperFrames-Gradle : ASCIIDoc কে MP4 ভিডিওতে রূপান্তর করুন
Publié le 31 May 2026
দুই সপ্তাহ আগে, আমি চালু করেছি`capsule-gradle`— একটি প্লাগইন যা রূপান্তর করে একটি ডেক reveal.js WebM ভিডিও ক্যাপসুলে TTS-সহ। আজ, আমি একটি নতুন প্লাগইন unite করছি : hyperframes-gradle. সে করে কিছু যা capsule-gradle না करे: AsciiDoc-কে সরাসরি MP4 ভিডিও-এ রূপান্তর করা, reveal.js- এর ব্যবহার না করা।
এখানে কারণ এই প্লাগইন, এটি বর্তমানের সাথে কীভাবে সামঞ্জস্যপূর্ণ, এবং HeyGen-এর HyperFrames ইঞ্জিন কী কী উপায়ে কন্টেন্ট উৎপাদন পাইপলাইনে যোগ দেয়।
ভিডিও পাইপলাইনের ছিদ্র
আমার ডকুমেন্টারি পাইপলাইন দুটি ধরণের ভিডিও তৈরি করে :
-
পর্যালোচনার ক্যাপসুল (capsule-gradle) — একটি reveal.js ডেক যা WebM‑এ ক্যাপচার করা আছে এবং
narration TTS. একটি মডিউল পুনরায় পর্যালোচনার জন্য দারুণ।
-
অ্যানিমেশন স্লাইড (slider-gradle) — একটি আকর্ষণীয় reveal.js HTML ডেক যের জন্য
উপস্থিত প্রশিক্ষক।
কিন্তু একটি তৃতীয় ফর্ম্যাট অনুপস্থিত: স্ট্যান্ডঅ্যালোন ভিডিও।
ব্যবহারের ক্ষেত্র |
বর্তমান সমাধান |
অভাব |
স্লাইড ফরমেটর |
slider-gradle → reveal.js |
✅ |
সংশোধন ক্যাপসূল |
capsule-gradle → WebM |
আপনি একজন পেশাদার অনুবাদক। fr থেকে bn এ অনুবাদ করুন। সব |
ভিডিও টিজিং |
না |
❌ |
অনিমেটেড টেকনিক ডেমো |
কোনো না |
�❌ |
Doc-to-video |
কোনো না |
❌ |
প্রথম ব্যবহারের ক্ষেত্র গুরুত্বপূর্ণ: কীভাবে স্বয়ংক্রিয়ভাবে তৈরি করা যায়? একটি ৬০ সেকেন্ডের ভিডিও যা একটি প্রকল্প বা মডিউলকে উপস্থাপন করে, GSAP অ্যানিমেশনসহ, TTS নারেশন, এবং ব্যাকগ্রাউন্ড মিউজিক — সব একই AsciiDoc ফাইল থেকে স্লাইডগুলো কি ?
Capsule-gradle জবাব দিতে পারে না: এর এখনও একটি ডেক reveal.js দরকার। slider-gradle এই ডেককে ভালোভাবে তৈরি করে, কিন্তু এটি ভিডিও রেন্ডারিংয়ের জন্য ডিজাইন করা হয়নি। একটি সরাসরি পাইপলাইন প্রয়োজন ছিল : AsciiDoc → ভিডিও।
HyperFrames : ইঞ্জিন
আমি আবিষ্কার করেছিhttps://github.com/heygen-com/hyperframes[HyperFrames] il y a কিছু দিন। এইটা হেকজেন দ্বারা তৈরি ওপেন-সোর্স ফ্রেমওয়ার্ক (Apache 2.0), AI ভিডিওयालা ইউনিকর্ন। GitHub-এ ২২,৭০০ স্টার। পิจটি থাকায় একটি বাক্য :
HTML লিখো। ভিডিও রেন্ডার করো। এজেন্টদের জন্য নির্মিত।
প্রিন্সিপ: আপনি HTML লিখেন কিছু`data-*`গুণগুলো, আপনি উল্লেখ করেন একটি GSAP অ্যানিমেশন (CSS, Lottie, Three.js… অথবা), এবং ইঞ্জিন সকলেরকে MP4-এ রেন্ডার করে Puppeteer (headless 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 নেই, কোনো বান্ডলার, JSX নেই। এজেন্ট IAদের যে ন্যাবটিভে HTML লিখতে পারে, তা নকচে HTML। এটি ঠিকভাবে আমার পাইপলাইনের জন্য: planner-gradle সঙ্গে deepseek এই HTMLকে একটি SPG/SPD পরিকল্পনা থেকে তৈরি করতে পারে, এবং একটি গ্রেডল প্লাগিন এটি MP4-এ রূপান্তর করতে পারে।
প্লাগিনের আর্কিটেকচার
hyperframes-gradle আমার সব প্লাগইনের মতো একই প্যাটার্ন অনুসরণ করে: এই pattern « স্বাধীন প্লাগইন + ভোক্তা মূল »
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 পাইপলাইন হাইপারফ্রেমস-গ্র্যাডল rectangle "AsciiDoc উৎস" as adoc #LightYellow ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 11 title পাইপলাইন হাইপারফ্রেমস-গ্র্যাডল rectangle "AsciiDoc উৎস" as adoc #LightYellow rectangle "AsciidoctorJ" as asciidoctorj #LightBlue rectangle "HTML হাইপারফ্রেমস (data-* attrs)" 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 হাইপারফ্রেমস CLI-মাধ্যমে আহ্বান করে`ProcessBuilder`(Empty output)
npx hyperframes render --input index.html --output video.mp4.
-
MP4 এ স্থাপন করা হয়েছে`output/`সাথে একটি`metadata.json`অর্কেস্ট্রেশনের জন্য।
অ্যাসসিআইডক ডিএসএল
প্লাগইনের আসল মূল্যবদ্ধি 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;
ডকইনফো অ্যাট্রিবিউটগুলো (: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"
}
}
}জেভিএম ↔ নোডজএস কোডের কোনো জোড়া নেই। চুক্তি কমান্ড লাইনের মাধ্যমে। এবং ডিস্কে ফাইলগুলো। এটি একই প্যাটার্ন যা`plantuml-gradle` (যে PlantUML CLI-কে ডাকে) অথবা`slider-gradle`(যে AsciidoctorJ-কে ডেকে নেয় ). সূর্যের অধীনে কোনো নতুন কিছু নেই — শুধুমাত্র একটি আপডেট করা সরঞ্জামে প্রয়োগ করা।
দুই ভিডিও প্লাগইন, দুটি ব্যবহার
capsule-gradle |
hyperframes-gradle |
Source |
ডেক reveal.js (উপরিচিত HTML) |
AsciiDoc → HTML HyperFrames |
ব্যবহারের ক্ষেত্র |
সংশোধন ক্যپسুল |
স্বতন্ত্র ব্যাখ্যামূলক ভিডিও |
প্রকৃতি |
Slides → ভিডিও |
ডকুমেন্ট → ভিডিও |
প্রস্তুত |
Playwright Java → WebM |
HyperFrames CLI → MP4 |
অ্যানিমেশন |
ট্রানজিশন reveal.js নেটিভ |
GSAP/CSS ডেটা-অট্রিবিউট |
স্ট্যাক |
১০০% 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 উৎপাদন করে টিজার ভিডিও এবং টেকনিক্যাল ডেমো।
রোডম্যাপের ৬টি EPIC
প্লাগইনটি 6টি EPIC-এ গঠিত:
EPIC |
বিবরণ |
প্রাধান্য |
HF-0 |
Bootstrap গভর্নেন্স + আর্কিটেকচার ফ্রেমিং |
�✅ সমাপ্ত |
HF-1 |
গ্রেডল স্টাব প্লাগইন + AsciidoctorJ ইন্টিগ্রেশন |
P0 |
HF-2 |
পুল CLI হাইপারফ্রেমস (ProcessBuilder → npx → MP4) |
P1 |
HF-3 |
DSL AsciiDoc প্রথা (ব্লক, docinfo, টেমপ্লেট) |
P1 |
HF-4 |
রানার-গ্রেডল একীকরণ (metadata.json) |
P2 |
HF-5 |
প্রয়োগযোগ্য টেমপ্লেট (title-card, code-diff, captions) |
P3 |
HF-6 |
CI + প্রকাশন Maven Central / Gradle Portal |
P3 |
সেশন 000 (bootstrap) ইতিমধ্যে শেষ হয়েছে। সেশন 001 HF-1‑এ আক্রমণ করবে : গ্রেডল প্লাগইন স্টাব ও AsciidoctorJ ইন্টিগ্রেশন।
কেন এটি কাজ করে
তিনটি কারণ :
-
HyperFrames আছে "built for agents". আমার পাইপলাইন নির্ভর করে এজেন্ট কৃত্রিম বুদ্ধিমত্তা
(planner-gradle + deepseek) যা কন্টেন্ট তৈরি করে। HyperFrames গ্রহণ করে কাঁচা HTML — যে ফরম্যাটটি LLM-গুলো সবচেয়ে ভালো করে বুঝে। কোনো React নাও, কোনো JSX-এর, এজেন্টের জন্য কোনো শেখার-avকশ নেই।
-
আসciiডক DSL স্বাভাবিক. আমার সম্পূর্ণ ইকোসিস্টেম AsciiDoc কথা বলে।
slider-gradle, codex-gradle, training-gradle — তারা উপভোগ করে`.adoc`. কাস্টম ব্লক যোগ করুন`[hyperframes-composition]`একটি এক্সটেনশন তর্কগত, ভাঙা না।
-
Node.js bridge একটি পরীক্ষিত প্যাটার্ন. ProcessBuilder JVM-এর বাইরে,
এটাই আমি ইতিমধ্যে PlantUML, Graphviz, Piper জন্য করছি। HyperFrames যোগ করুন এটি অ্যার্কিটেকচার পরিবর্তন না — এটি একটি অতিরিক্ত বাহ্যিক টুল, Gradle থেকে পরিচালিত।
|
প্যাটার্নের সত্যী Shakti, এর mdhye কোনো npm নির্ভরতা নেই Gradle বিল্ড। প্লাগইনটি কোনো Node.js কোড আমদানি করে না। এটি একটি শেল কমান্ড. যদি HyperFrames পরিবর্তিত হয় বা ভাঙে, প্লাগইনটি জোড়িত নয় — কমান্ড আপডেট করা যথেষ্ট। |
উপসংহার: অনুপস্থিত শৃঙ্খল
হাইপারফ্রেমস-গ্রেডলের সঙ্গে, আমার ভিডিও পাইপলাইন সম্পূর্ণ। আমার আছে :
-
এগুলো ইন্টারেক্টিভ স্লাইড (slider-gradle)
-
সংশোধন ক্যাপসুলগুলো (capsule-gradle)
-
স্বাধীন ভিডিওস (hyperframes-gradle)
তিনটি ফরম্যাট। একক উৎস ফাইল: l’AsciiDoc.
পরবর্তী লক্ষ্য হল HF-1: প্লাগইন কম্পাইল করা এবং একটি তৈরি করা প্রথম HTML HyperFrames একটি টীকা যোগ করা AsciiDoc ডকুমেন্ট থেকে। সেশন 001 ইতিমধ্যে ফ্রেম করা আছে।
hyperframes-gradle রয়েছে। শাসন ব্যবস্থা স্থাপিত আছে। ব্যাকলগ এটি লিখা হয়েছে। আর্কিটেক্টা নথিভুক্ত করা হয়েছে। প্লাগইন জন্মগ্রহণ করেছে।
তথ্যসূত্র
-
অনুচ্ছেদ ০১২৪ — স্বতন্ত্র প্লাগইন আর্কিটেকচার + ভোক্তা মূল
-
foundry/public/hyperframes-gradle/hyperframes-plugin/doc/HYPERFRAMES_ARCHITECTURE.adoc— বিস্তারিত কাঠামো