html-video: مشروع مفتوح المصدر يحول أي مقال أو رابط إلى فيديو احترافي بالذكاء الاصطناعي

من “نص مقروء” إلى “فيديو يُشاهد”

تخيل أن تكتب مقالاً طويلاً، أو تجد رابطاً مثيراً للاهتمام، أو تكتشف مشروعاً واعداً على GitHub، وتريد تحويله إلى فيديو جذاب لنشره على وسائل التواصل الاجتماعي. العملية التقليدية معقدة: كتابة سيناريو، تصميم مشاهد، تسجيل صوت، مونتاج، إضافة موسيقى، تصدير. تستغرق ساعات إن لم تكن أياماً.

ماذا لو كان بإمكانك إعطاء هذه المهمة لوكيل ذكاء اصطناعي، والحصول على فيديو كامل خلال دقائق؟ هذا هو بالضبط ما يقدمه مشروع html-video مفتوح المصدر.

🔗 المستودع الرسمي: github.com/nexu-io/html-video

ما هو html-video؟

html-video هو مشروع مفتوح المصدر من فريق Open Design، يرخص تحت Apache-2.0، وهو نظام متكامل لتحويل المحتوى النصي إلى فيديو. يعمل عبر وكلاء الذكاء الاصطناعي الذين تفاعل معهم (مثل Claude Code وCursor وCodex وGemini CLI وغيرهم).

الفكرة بسيطة لكن تأثيرها كبير: بدلاً من أن تتعلم أدوات المونتاج المعقدة، تتحدث مع وكيل ذكاء اصطناعي بلغتك الطبيعية. الوكيل يقرأ المحتوى (سواء كان رابط مقال، أو مستودع GitHub، أو مجرد فكرة)، يحلله، يقسمه إلى مشاهد متسلسلة، يحول كل مشهد إلى HTML متحرك، ثم يصدر فيديو نهائي بصيغة MP4. كل هذا يعمل محلياً على جهازك، بدون اشتراكات، بدون قيود، وبدون إرسال بيانات إلى خوادم خارجية.

كيف يعمل: من رابط إلى فيديو

العملية منظمة في ست خطوات، يمكن للوكيل تنفيذها تلقائياً بناءً على وصفك:

الخطوة 1: جلب المصدر

عندما تعطي الوكيل رابطاً (مثلاً مقال من ويب أو مشروع من GitHub)، يقوم html-video بجلب المحتوى من الخادم (يدعم صفحات الويب العادية وحتى مقالات WeChat). يحولها إلى نص Markdown نظيف.

الخطوة 2: حلقة الوكيل الذكية (Agent Loop)

الوكيل يقرأ المادة المصدر، ويختار النمط المناسب من مكتبة القوالب، ويقرر عدد المشاهد المطلوبة بناءً على طول المحتوى.

الخطوة 3: بناء الرسم البياني للمحتوى (Content Graph)

هذه هي المرحلة الذكية. يحول الوكيل المحتوى إلى رسم بياني معرفي: عقد تمثل الأفكار الرئيسية، وعلاقات (تسلسل، تباين، اعتماد) تحدد ترتيب وتوقيت المشاهد.

الخطوة 4: توليد HTML لكل مشهد

لكل عقدة في الرسم البياني، يقوم الوكيل بإنشاء ملف HTML مستقل يحتوي على التصميم والرسوم المتحركة الخاصة بتلك المشهد (باستخدام GSAP، CSS Animations، أو غيرهما).

الخطوة 5: التصدير عبر HyperFrames

هذا هو محرك التصدير الفعلي. يستخدم متصفح Chromium بدون واجهة (headless) لتسجيل كل مشهد HTML كفيديو مؤقت، ثم يجمعها جميعاً عبر FFmpeg.

الخطوة 6: المزج النهائي

يتم دمج المقاطع، إضافة الموسيقى الخلفية والتعليق الصوتي (اختياري عبر MiniMax)، وإخراج ملف MP4 واحد جاهز للنشر.

لماذا هذا المشروع مهم؟

أولاً: يفتح المجال أمام صانعي المحتوى لتحويل كتاباتهم إلى فيديوهات بكميات كبيرة. مدون يمكنه تحويل مقالاته العشرين الماضية إلى عشرين فيديو خلال يوم واحد.

ثانياً: يزيل الحاجز التقني لصناعة الفيديو. لا تحتاج إلى تعلم After Effects أو Premiere أو حتى DaVinci Resolve. فقط تكتب ما تريد، والوكيل ينفذ.

ثالثاً: يمنح المطورين القدرة على أتمتة إنتاج الفيديو بالكامل. يمكن دمج html-video في خطوط أنابيب CI/CD، أو في تطبيقات الويب التي تحتاج إلى توليد فيديوهات ديناميكية بناءً على بيانات المستخدم.

القوالب: 21 نمط فيديو جاهز

المشروع يأتي مع مكتبة تضم 21 قالباً (template) جاهزاً للاستخدام. النماذج مصممة لتناسب أغراض مختلفة:

• frame-data-chart-nyt: مخطط خطي متحرك بتصميم شبيه بـ New York Times، مثالي لعرض الإحصائيات والبيانات مع عنوان وعلامات بيانات ونقاط رئيسية.
• frame-glitch-title: بطاقة عنوان ذات تأثير خلل بصري (glitch) مع خطوط المسح، مناسبة للمقدمات السينمائية.
• frame-liquid-bg-hero: خلفية سائلة متدرجة (aurora liquid gradient) مع عنوان مركزي، مثالي للعروض الترويجية للمنتجات.
• frame-light-leak-cinema: تأثير فيلم سينمائي مع حبوب الفيلم (film grain) وتسرب ضوئي، مناسب للقصص العاطفية.
• vfx-text-cursor: نص آلة كاتبة مع مؤشر طرفية وامض، مثالي للشروحات التقنية.
• frame-logo-outro: بطاقة ختام نظيفة لشعار العلامة التجارية.

و15 نمطاً إضافياً تغطي الرسوم البيانية، والحركة الحرفية (kinetic typography)، وشرح القرارات، وغيرها. يمكنك معاينتها جميعاً مباشرة في “الاستوديو” المحلي قبل اختيار المناسب.

وكلاء الذكاء الاصطناعي المدعومون (13)

يدعم html-video مجموعة واسعة من وكلاء الذكاء الاصطناعي، ويتم اكتشافهم تلقائياً من PATH الخاص بك:

يمكنك التبديل بين الوكيل النشط من الشريط العلوي في الاستوديو.

HyperFrames: محرك العرض الأساسي

قبل html-video، كان هناك HyperFrames من HeyGen. HyperFrames هو إطار عمل مفتوح المصدر (Apache-2.0) يسمح لك بتعريف الفيديو كملف HTML مع سمات بيانات مخصصة، ثم تحويله إلى فيديو عبر متصفح Chromium و FFmpeg. html-video يبني فوق HyperFrames ويضيف طبقة “الوكيل الذكي” التي تقوم بكتابة HTML نيابة عنك.

الصورة أدناه توضح الفرق بين html-video وHyperFrames:

نقاط قوة HyperFrames (ومنهج html-video):

• أصلي لـ HTML: لا تحتاج إلى تعلم React (مثل Remotion) أو لغات مخصصة. الفيديو هو ملف HTML عادي يمكنك فتحه في أي متصفح.
• حتمي (Deterministic): نفس الإدخال يعطي نفس الإخراج تماماً. هذا مهم لخطوط الأنابيب الآلية.
• مكتبة تأثيرات غنية: يدعم GSAP و Lottie و Three.js و CSS Animations، عبر نمط “Frame Adapter”.
• مقارنة مع Remotion: HyperFrames و Remotion متشابهان في الهدف، لكن Remotion مصدره متاح بترخيص مخصص يتطلب ترخيصاً مدفوعاً للشركات (حتى 4 مطورين)، بينما HyperFrames مرخص بـ Apache-2.0 بالكامل.

التثبيت والبدء السريع

المتطلبات الأساسية:

• Node.js >= 22
• FFmpeg (مثبت على النظام)

التثبيت:

# استنساخ المستودع
git clone https://github.com/nexu-io/html-video.git
cd html-video

# تثبيت التبعيات وبناء المشروع
pnpm install
pnpm -r build

تشغيل الاستوديو المحلي:

node packages/cli/dist/bin.js studio

هذا يفتح واجهة ويب على http://127.0.0.1:3071 حيث يمكنك:

• اختيار قالب
• كتابة وصف للفيديو (أو لصق رابط مقال / مشروع GitHub)
• الدردشة مع الوكيل لتحسين النتيجة
• تعديل النص لكل مشهد على حدة
• إضافة موسيقى خلفية أو تعليق صوتي (عبر MiniMax)
• تصدير الفيديو النهائي بصيغة MP4

أدوات سطر الأوامر المساعدة:

# فحص البيئة: اكتشاف الوكلاء المثبتين والمتطلبات
node packages/cli/dist/bin.js doctor

# البحث عن قالب مناسب لغرض معين
node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3

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

إنشاء فيديو تعريفي لمشروع GitHub

أعط الوكيل رابط مستودع. سيقرأ README، ويفهم بنية المشروع، وينتج فيديو يشرح ما يفعله المشروع وكيفية استخدامه، مع مشاهد لكل ميزة رئيسية.

تحويل مقال طويل إلى فيديو تعليمي

قم بلصق رابط مقال (حتى مقالات WeChat المدعومة). سيقسم الوكيل المقال إلى مقدمته وأقسامه وخاتمته، وينتج فيديو بمشاهد متعددة ونصاً مقروءاً.

توليد فيديو من فكرة بسيطة

اكتب “فيديو ترويجي لمنتج ألبوم غنائي لفرقة موسيقية مستقلة، 30 ثانية”. الوكيل يكتب السيناريو من الصفر، يصمم المشاهد، ويضيف الموسيقى المناسبة.

أتمتة إنتاج فيديوهات وسائل التواصل الاجتماعي

يمكن دمج html-video مع أدوات الأتمتة مثل n8n (يوجد عقدة مخصصة لـ Video Api Hub) لإنشاء فيديوهات تلقائياً من جداول بيانات أو خلاصات RSS.

دعم الشفافية والخلفية (Alpha Channel)

يدعم محرك HyperFrames التصدير بقناة شفافية (alpha channel) للفيديوهات التي تحتاج إلى تركيب فوق خلفيات أخرى:

• WebM: مع VP9 و yuva420p (دعم حقيقي للشفافية، مناسب للمتصفحات)
• MOV ProRes 4444: مع yuva444p10le (10 بت، مناسب لبرامج المونتاج مثل Premiere و Final Cut Pro)
• PNG متسلسل (PNG sequence): إطارات PNG منفصلة مع شفافية كاملة، مناسب لـ After Effects

هذه ليست خلفية خضراء (chroma key). عندما يكون الخلفية شفافة في المتصفح، تكون شفافة في الفيديو النهائي.

كيف تقارن html-video بـ Ralphy؟

Ralphy هو مشروع مفتوح المصدر آخر (Apache-2.0) يقوم بمهمة مشابهة: إنشاء فيديوهات عبر وكلاء الذكاء الاصطناعي. لكن Ralphy يعتمد على OpenRouter (للتوليد) و ElevenLabs (للصوت)، وهو موجه للإنتاج السريع (~8-12$ لكل 30 ثانية، ~8 دقيقة للإنتاج).

html-video يعتمد على HTML + GSAP + HyperFrames للتوليد، وهو موجه لصناع المحتوى الذين يريدون التحكم الكامل في كل إطار. كما يقدم 21 قالباً جاهزاً وأدوات توليد موسيقى اختيارية. Ralphy يركز أكثر على الأتمتة والسعر المنخفض، بينما html-video يركز على الجودة البصرية والمرونة.

الخلاصة

html-video ليس مجرد أداة لتوليد الفيديو. هو تحول في فلسفة صناعة المحتوى: من “تعديل فيديو” إلى “وصف فيديو”. إذا كنت مدوناً، أو معلماً، أو مسوقاً، أو مطوراً تريد أتمتة محتوى وسائل التواصل الاجتماعي، أو أي شخص ينشر محتوى ويبحث عن طريقة أسرع لإنتاج فيديوهات، فإن html-video يستحق التجربة.

المشروع لا يزال في مراحله الأولى، لكنه يعد بإعادة تشكيل طريقة تفكيرنا في إنتاج الفيديو. وهناك أخبار واعدة جداً على الأفق: Remotion و Motion Canvas على الخريطة (قيد التخطيط)، مما يعني أن المحتوى المنتج عبر html-video سيصبح قابلاً للتحرير يدوياً في المستقبل في أدوات احترافية.

روابط سريعة

https://github.com/nexu-io/html-video

https://github.com/heygen-com/hyperframes

https://hyperframes.heygen.com