Yusuf Khalidd

Posted on Apr 17 • Originally published at apidog.com

كيفية تعديل الفيديو بالذكاء الاصطناعي باستخدام هايبر فريمز

ملخص سريع

يمكن لوكلاء الذكاء الاصطناعي كتابة التعليمات البرمجية، واستدعاء واجهات برمجة التطبيقات (APIs)، وتشغيل مهام سير عمل متعددة الخطوات. حتى الآن، كانت هناك قدرة واحدة لا تزال تفلت منهم: تعديل الفيديو. تستخدم الأدوات الاحترافية مثل After Effects و DaVinci Resolve جداول زمنية متعددة الطبقات ورسوم بيانية للمشاهد بتنسيق JSON لم يتم تدريب نماذج اللغات الكبيرة (LLMs) عليها. مشروع HeyGen الجديد مفتوح المصدر، HyperFrames، يقلب هذا النهج. يسمح لوكلاء الذكاء الاصطناعي بإنشاء الفيديو باستخدام HTML و CSS و JavaScript، ثم يعرض النتيجة إلى MP4 أو MOV أو WebM. يمكنك تثبيته كمهارة لـ Claude Code بأمر واحد، ويصبح وكيلك محرر فيديو.

جرّب Apidog اليوم

مقدمة

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

يمكنك توجيه نموذج لإنشاء مقطع كامل باستخدام Sora أو Veo أو Runway، ولكن لهذا النهج قيود. تحصل على فيديو متجانس واحد من موجه. لا يمكنك تركيبه. لا يمكنك التكرار على الرسوم المتحركة أو تراكب رسوم متحركة معينة للعلامة التجارية. لا يمكنك أن تخبر الوكيل "أعد المشهد 3 بتلاشي أبطأ".

أطلقت HeyGen مشروع HyperFrames في 17 أبريل 2026 لسد هذه الفجوة. بدلاً من تعليم الوكلاء برامج الفيديو التقليدية، أعطت الوكلاء تنسيقًا يعرفونه بالفعل: HTML. يشرح هذا الدليل كيفية عمله، ولماذا يكون هذا النهج منطقيًا، وكيفية إعداده حتى يتمكن وكيلك الخاص من تعديل الفيديو.

إذا كنت تقوم بإنشاء مهام سير عمل وكيل تعتمد على واجهة برمجة التطبيقات (API) وتنتج فيديو، فسترغب أيضًا في اختبار طبقة التنسيق. سنغطي كيف يتناسب Apidog في النهاية.

لماذا لم يتمكن وكلاء الذكاء الاصطناعي من تعديل الفيديو من قبل

لم يتم بناء أدوات تحرير الفيديو التقليدية للوكلاء. لقد بنيت للبشر الذين ينقرون على الجداول الزمنية.

ثلاثة حواجز أساسية:

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

عمليًا: يمكن للوكلاء ربط مقاطع بالفلاتر الأساسية عبر ffmpeg. أي شيء معقد يتطلب إنسانًا.

رؤية HTML للفيديو

لاحظ فريق HeyGen أن نماذج اللغة تدربت على كميات ضخمة من HTML, CSS, وJavaScript. تعرف النماذج جيدًا كيفية بناء الرسوم المتحركة والتراكيب باستخدام تقنيات الويب.

عند طلب رسوم متحركة، تنتج النماذج HTML متقدم بسهولة وتستخدم:

CSS لوضع وتحريك العناصر
GSAP للأنيميشن
SVG للرسومات
z-index و opacity للطبقات
الانتقال بين الحالات

كل ما يلزم موجود في المتصفح. القطعة الناقصة: تحويل جدول زمني HTML إلى فيديو فعلي.

وهنا يأتي HyperFrames: HTML يتحول إلى إطارات فيديو.

كيف يعمل HyperFrames

يضيف HyperFrames بعض سمات البيانات (data-) إلى HTML العادي لتحديد الجدول الزمني للفيديو. كل شيء آخر هو كود ويب طبيعي.

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

السمة	الغرض
`data-composition-id`	معرف فريد لتكوين الفيديو
`data-width` / `data-height`	دقة الإخراج بالبكسل
`data-start`	وقت بدء المشهد بالثواني
`data-duration`	مدة المشهد بالثواني
`data-track-index`	ترتيب الطبقات للمشاهد المتداخلة

يكتب الوكيل HTML عادي. يقوم HyperFrames بقراءة السمات، وتشغيل الصفحة في متصفح بلا واجهة، والتقاط الإطارات بمعدل محدد، ثم ترميز الإخراج عبر FFmpeg.

لا توجد DSL جديدة ولا رسوم بيانية معقدة. الرسوم المتحركة تكتب بـ GSAP أو CSS، أي كود تجيده النماذج فعليًا.

مثال بسيط

تركيبة فيديو مدتها 5 ثوانٍ بمشهدين: بطاقة عنوان تتلاشى، ثم شاشة ختامية.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
  <style>
    body { margin:0; width:1920px; height:1080px; overflow:hidden; background:#0D1B2A; }
    .scene { position:absolute; inset:0; width:1920px; height:1080px; overflow:hidden; background:#0D1B2A; }
    #scene2 { z-index:2; opacity:0; }
    .s1 { display:flex; flex-direction:column; justify-content:center; padding:120px 160px; gap:20px; }
    .s2 { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:100px 160px; gap:32px; }
  </style>
</head>
<body>
  <div id="root" data-composition-id="hyperframes-intro"
       data-width="1920" data-height="1080" data-start="0" data-duration="5">
    <div id="scene1" class="scene">
      <div class="s1">
        <div class="s1-title">HTML is Video</div>
        <div class="s1-sub">Compose. Animate. Render.</div>
      </div>
    </div>
    <div id="scene2" class="scene">
      <div class="s2-title">Start composing.</div>
    </div>
  </div>
  <script>
    window.__timelines = window.__timelines || {};
    const tl = gsap.timeline({ paused: true });

    // Scene 1: title entrance
    tl.from(".s1-title", { x:-40, opacity:0, duration:0.5, ease:"power3.out" }, 0.25);
    tl.from(".s1-sub", { y:15, opacity:0, duration:0.4, ease:"power2.out" }, 0.5);

    // Blur crossfade transition
    const T = 2.2;
    tl.to("#scene1", { filter:"blur(8px)", scale:1.03, opacity:0, duration:0.35, ease:"power2.inOut" }, T);
    tl.fromTo("#scene2",
      { filter:"blur(8px)", scale:0.97, opacity:0 },
      { filter:"blur(0px)", scale:1, opacity:1, duration:0.35, ease:"power2.inOut" }, T + 0.08);

    window.__timelines["hyperframes-intro"] = tl;
  </script>
</body>
</html>

لاحظ:

الرسوم المتحركة بـ GSAP فقط، يعرفها أي نموذج.
متطلبات HyperFrames: فقط بعض سمات data- على العنصر الجذر.

يمكنك تعديل النصوص، الألوان، الخطوط، أو إضافة شعار مباشرة من HTML.

ما يمكن للوكيل استخدامه بالفعل

كل تقنيات الويب المتوافقة مع المتصفح تعمل فورًا:

رسوم CSS والانتقالات للحركات البسيطة
جداول GSAP الزمنية للأنيميشن المعقد
SVG للشعارات والأشكال
Canvas للجسيمات أو الخلفيات التوليدية
Three.js لمشاهد ثلاثية الأبعاد
D3.js للتصوير البياني
Lottie لرسوم After Effects
Web Fonts من Google Fonts أو خطوط مخصصة
فيديو وصور عبر <video> و <img>

لا تحتاج لأي أغلفة أو أطر إضافية. استخدم أدواتك المعتادة.

كيفية منح وكيلك إمكانية تحرير الفيديو بأمر واحد

HyperFrames متوفر كمهارة لـ Claude Code. التثبيت عبر npm:

npx skills add heygen-com/hyperframes

سيتم تثبيت المهارة وتسجيل قدرة تحرير الفيديو تلقائيًا.

بعد التثبيت، يمكنك كتابة مطالبة مثل:

Build me a 10-second product explainer video for a new API.
Start with a dark gradient background, animate the product name
sliding up from the bottom with a fade, then cut to three
bullet points with icons, end on a call-to-action card.

سيقوم الوكيل بإنشاء HTML، عرض معاينة محلية، وإنتاج ملف MP4. كل شيء يتم محليًا دون مفاتيح API أو خدمات خارجية.

الإعداد بدون Claude Code

يمكنك استخدام HyperFrames مع أي وكيل يمكنه تشغيل أوامر shell وقراءة الملفات.

git clone https://github.com/heygen-com/hyperframes
cd hyperframes
npm install

لعرض فيديو من ملف HTML:

npx hyperframes render my-video.html --output my-video.mp4

لمعاينة النتيجة محليًا في المتصفح:

npx hyperframes preview my-video.html

ستظهر نافذة متصفح تمكنك من تصفح الجدول الزمني وفحص الإطارات قبل العرض الكامل.

ما يتيحه هذا للمطورين

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

التسويق الآلي للمنتجات: سحب ملاحظات الإصدار، إنشاء مشاهد HTML تلقائيًا، نشر الفيديو إلى CDN.
استجابات فيديو مخصصة: Webhooks تفعّل وكيلًا ينشئ فيديو لكل حدث مستخدم (ترحيب، إيصال، احتفال...).
سرد القصص بالبيانات: إرسال مقاييس لـ LLM، إنتاج تصورات D3 في مشاهد HyperFrames مع تعليق صوتي.
لقطات B-roll ديناميكية: قراءة نص وتوليد رسوم متحركة توضيحية لكل نقطة، تراكبها على الصوت.
مقاطع فيديو وثائق API: تحليل وثيقة OpenAPI، بناء شرح تفاعلي متحرك بنقاط النهاية.

اختبار تنسيق الوكيل باستخدام Apidog

يتولى HyperFrames العرض فقط. التنسيق (تنقل الوكيل، استدعاء الأدوات، طلبات LLM، المنطق) قد يتعطل بسبب أخطاء في البنية أو الاتصالات أو استهلاك الرموز.

Apidog يوفر بيئة اختبار فعالة:

محاكاة نقاط نهاية LLM: أنشئ نقاط نهاية Claude أو OpenAI وهمية بنفس المخطط المطلوب.
التحقق من صحة استدعاءات الأدوات: اختبر بنية الحمولات مع نقاط نهاية وهمية لضمان التوافق.
تتبع استهلاك الرموز: راقب حجم مطالباتك وتكاليفك الفعلية.
تصحيح تدفقات الوكيل متعددة الأدوار: أعد تشغيل المحادثة لتحديد أين حدث الانحراف.

الحجة الفلسفية

يرى فريق HeyGen أن HTML ليس مجرد تنسيق مناسب للفيديو المبني بالوكيل، بل هو التنسيق الصحيح لمستقبل الفيديو.

لماذا؟

الفيديو التقليدي محتكر بتنسيقات مغلقة من Adobe وBlackmagic.
HTML مفتوح، موحد، قابل للإصدار والبحث والتعديل.
فيديوهات HTML:
- قابلة للمقارنة في Git
- قابلة للتقسيم لمكونات
- سريعة الاستجابة لأي نسبة أبعاد
- قابلة للوصول لقارئات الشاشة
- قابلة للبحث بالنص الحقيقي

كل ذلك فعلي بالفعل في المتصفح. HyperFrames هو الجسر لجعل محتوى الويب مصدر فيديو فوري.

قيود يجب معرفتها

سرعة العرض تعتمد على التعقيد: مشاهد Three.js أو Canvas معقدة تستغرق ترميزًا أكثر من نصوص GSAP بسيطة.
إدخال الفيديو المباشر محدود: تضمين <video> ممكن، لكن البث الحي يتطلب كود إضافي.
دعم الصوت أساسي: مزج متقدم يحتاج معالجة FFmpeg لاحقًا.
إبداع الوكيل مرتبط بالنموذج: Opus 4.7 هو الأفضل حاليًا لسير العمل هذا.

ضع هذه النقاط في الحسبان أثناء بناء مسارك الإنتاجي.

قائمة التحقق للبدء

للبدء مع HyperFrames:

[ ] ثبّت Claude Code أو أي وكيل آخر
[ ] شغّل npx skills add heygen-com/hyperframes
[ ] اطلب من وكيلك فيديو تجريبي قصير
[ ] اعرض النتيجة وتحقق من ملف MP4
[ ] عدّل النمط أو التوقيت أو المشاهد
[ ] لسير عمل يعتمد على API، أضف نقاط نهاية LLM والأدوات في Apidog
[ ] أنشئ فيديو حقيقي (إعلان منتج، قصة بيانات، ملخص إصدار...)
[ ] أضف نجمة لمستودع GitHub

الخلاصة

أصبح بإمكان وكلاء الذكاء الاصطناعي الآن تعديل الفيديو كما يكتبون الكود، بفضل HyperFrames الذي يربطهم مباشرة بـ HTML و CSS و JavaScript.

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

ولاختبار وتنظيم طبقة API والتنسيق، استخدم Apidog لضمان أن جميع تدفقات وكيلك تعمل بشكل موثوق قبل وصولها إلى مرحلة العرض النهائية.

DEV Community