عن المشروع

# html-video **HTML يصبح فيديو — على حاسوبك.** html-video هي أداة فيديو برمجية تتيح لوكلاء البرمجة (Open Design، Windsurf CLI، Trae CLI، Claude Code، Cursor، Codex، Gemini، Grok، Qwen، OpenCode، Copilot، Aider، Hermes، أو Anthropic API) تحويل HTML وCSS والبيانات إلى ملفات MP4 حقيقية. صف فيديو، أو الصق رابط مقال، أو مستودع GitHub، وسيُنشئ الوكيل فيديو متحركًا متعدد الإطارات، يُعرض محليًا بمحركات قابلة للاستبدال. مرخص بموجب Apache-2.0، بدون رسوم لكل عملية عرض، وبدون ارتباط بمزود معين. ## الميزات الرئيسية - **14 واجهة خلفية للوكلاء**: يكتشف تلقائيًا ويدعم Open Design (Vela)، Windsurf CLI، Trae CLI، Claude Code، Cursor Agent، Codex CLI، Gemini CLI، Grok Build، Qwen Code، OpenCode، GitHub Copilot CLI، Aider، Hermes، وAnthropic Messages API. - **21 قالبًا منسّقًا**: قوالب HTML متحركة ومرخصة بوضوح تغطي تصور البيانات (مخططات بأسلوب NYT، شبكات Swiss/Vignelli)، العناوين والمؤثرات البصرية (glitch، النص الحركي، مؤشر الآلة الكاتبة)، المشاهد الافتتاحية والسينمائية (تدرجات سائلة، تسرب الضوء، حبيبات دافئة)، إعلانات المنتجات (15/30 ثانية متعددة المشاهد)، وهياكل الشرح (أشجار القرار). - **عرض MP4 حقيقي**: يسجل Chromium بلا واجهة HTML المتحرك، ويقوم ffmpeg (libx264) بترميز MP4 محليًا — بدون عرض سحابي، وبدون رسوم لكل مقطع. - **من رابط إلى فيديو**: يجلب مقالات الويب (بما في ذلك حسابات WeChat 公众号) أو مستودعات GitHub من جانب الخادم، ويحولها إلى Markdown، ويغذي المحتوى الحقيقي في موجّه الإنشاء. - **مسار صوتي بالذكاء الاصطناعي**: موسيقى خلفية اختيارية وتعليق صوتي عبر MiniMax، تُمزج في MP4 عند التصدير (تُخفض الموسيقى تحت الصوت، مع تلاشي تدريجي في البداية والنهاية). - **استوديو + واجهة سطر الأوامر**: استوديو محلي في المتصفح (دردشة، معرض قوالب، إطارات، مسار صوتي، تصدير) وواجهة سطر أوامر قابلة للبرمجة `html-video`. - **بنية محرك قابلة للاستبدال**: واجهة محوّل واحدة `render(input, ctx)`؛ استبدال المحركات (مثل Remotion، Motion Canvas) يستبدل خطوة العرض فقط، تاركًا لوحة القصة وحلقة الوكيل دون تغيير. - **مرخص بوضوح بالتصميم**: تحمل القوالب تراخيصها الأصلية، مع ملف `NOTICE.md` يسجل المصادر وSPDX؛ لا تُشحن تراخيص متساهلة غير واضحة. ## كيف يعمل 1. **جلب المصدر**: يسحب الاستوديو الرابط أو المستودع من جانب الخادم، ويحوله إلى Markdown. 2. **حلقة الوكيل**: يقرأ الوكيل المواد + نمط القالب، ويصدر مخطط محتوى (لوحة قصة) + كتلة HTML واحدة لكل إطار. 3. **مخطط المحتوى**: تمثيل وسيط متعدد الإطارات مع عقد (كيانات/بيانات/نصوص) وحواف (تسلسل/انتقالات). 4. **HTML لكل إطار**: يصبح كل عقدة إطار HTML متحركًا مستقلًا على القرص. 5. **العرض**: كل إطار ← webm (عبر Chromium بلا واجهة)، ثم يقوم ffmpeg بترميز MP4 (libx264) والدمج. 6. **المسار الصوتي**: موسيقى MiniMax اختيارية + تعليق صوتي يُمزجان عبر ffmpeg. تأخذ الفيديوهات أحادية الإطار مسارًا سريعًا يتخطى مخطط المحتوى. ## البدء يتطلب Node.js 20+ وffmpeg. ثبّت Chromium الخاص بـ Playwright إذا لم يكن موجودًا. ابنِ باستخدام `pnpm -r build`. أدوات سطر الأوامر: - `node packages/cli/dist/bin.js doctor` — اكتشاف الوكلاء والمحركات المثبتة - `node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3` في الاستوديو: اختر قالبًا (أو صف فيديو / الصق رابطًا)، دردش مع وكيلك، حرر نص كل إطار، أضف مسارًا صوتيًا، وصدّر MP4. ## هيكل المشروع - `runtime/` — وقت تشغيل الوكيل (اكتشاف/تشغيل/بث) لجميع الواجهات الخلفية الـ14 - `cli/` — أمر `html-video`، خادم HTTP للاستوديو، جلب المصادر - `project-studio/` — واجهة الاستوديو في المتصفح (دردشة، معرض قوالب، إطارات، مسار صوتي، تصدير) - `templates/` — 21 قالب فيديو منسّقًا ومرخصًا بوضوح ## مشاريع ذات صلة - Open Design — مشروع شقيق، طبقة وسيطة لوكيل التصميم - HTML Anything — مشروع شقيق لمخرجات HTML الثابتة ## الترخيص Apache-2.0 — بدون رسوم لكل عملية عرض، وبدون حدود على المقاعد، وبدون اتفاقيات مساهمين. مشروع رسمي من فريق Open Design (nexu-io).