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

ملخص سريع

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

مقدمة

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

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

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

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

زر

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

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

ثلاثة حواجز محددة:

واجهات المستخدم القائمة على الجدول الزمني لا تتوافق مع التعليمات البرمجية. يقوم After Effects و Premiere و DaVinci Resolve بتخزين المشاريع كأنماط ثنائية خاصة أو رسوم بيانية للمشاهد بتنسيق JSON متداخلة بشكل عميق. حتى لو تمكن الوكيل من قراءة هذه الملفات، فإن المساحة الدلالية ضيقة. لا توجد تقريبًا بيانات تدريب لأوزان النموذج على هذه التنسيقات.

تتطلب الرسوم المتحركة تفكيرًا بصريًا. يتم عادةً تنفيذ رسوم الأطر الرئيسية (Keyframing animations)، ومنحنيات التسهيل (easing curves)، وتركيب الطبقات (layer compositing) بالعين. لا يرى الوكلاء نافذة معاينة. إنهم بحاجة إلى تجريد يعتمد على النص أولاً للتفكير في الحركة.

تفترض الأدوات وجود مشغل بشري. تعيش مسارات العرض (Render pipelines)، وأنظمة بيئة المكونات الإضافية (plugin ecosystems)، واختيارات برامج الترميز (codec choices) كلها خلف قوائم واجهة المستخدم. تعمل أتمتة هذه العمليات من خلال البرامج النصية لحالات محدودة (ExtendScript في After Effects، على سبيل المثال)، لكن واجهات برمجة التطبيقات (APIs) ضيقة وهشة.

النتيجة: يمكن للوكلاء كتابة برنامج نصي لاستدعاء ffmpeg، وربط المقاطع معًا، وتراكب النص بمرشحات أساسية. أي شيء يتجاوز ذلك يتطلب إنسانًا.

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

لاحظ فريق HeyGen شيئًا مختلفًا. تم تدريب نماذج اللغات الكبيرة على مليارات الصفحات من HTML و CSS و JavaScript. لقد رأوا مئات الآلاف من رسوم GSAP المتحركة، وتراكيب SVG، وتجارب Canvas، وملفات Lottie. الويب هو أكبر وسيط إبداعي منفرد في بيانات تدريبهم.

عندما تطلب من نموذج رائد إنتاج رسوم متحركة غنية بصريًا، فإنه يكتب HTML بطلاقة. إنه يعرف كيفية:

وضع العناصر باستخدام CSS
تحريكها باستخدام GSAP أو إطارات CSS الرئيسية
عرض مسارات SVG
إنشاء مشاهد طبقية باستخدام z-index و opacity
الانتقال بين الحالات

جميع البدائيات المرئية التي يحتاجها المحرر موجودة بالفعل في المتصفح. القطعة المفقودة كانت تحويل جدول زمني لمشاهد HTML إلى ملف فيديو معروض.

هذا ما يفعله HyperFrames. الاسم يقول ذلك: HTML يصبح إطارات فيديو. HyperFrames.

كيف يعمل HyperFrames

يضيف HyperFrames مجموعة صغيرة من السمات data- إلى HTML القياسي. تحدد هذه السمات الجدول الزمني للفيديو. كل شيء آخر هو رمز ويب عادي.

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

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

يكتب الوكيل ملف HTML عاديًا. يقرأ HyperFrames سمات البيانات، ويشغل الصفحة في متصفح بلا واجهة (headless browser)، ويلتقط الإطارات بمعدل الإطارات المستهدف، ويقوم بترميز الإخراج باستخدام FFmpeg.

هذا كل شيء. لا يوجد DSL جديد. لا يوجد رسم بياني للمشهد. لا يوجد محرر إطارات رئيسية. تعيش الرسوم المتحركة في جداول زمنية GSAP أو رسوم متحركة CSS، وهو بالضبط الكود الذي ينتجه النموذج بالفعل.

مثال بسيط

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

<!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 بحت. أي نموذج رأى دروس GSAP يمكنه كتابة جداول زمنية كهذه.
النفقات العامة لـ HyperFrames ضئيلة. عدد قليل من سمات data- على العنصر الجذر. لا شيء آخر.

اعرض هذا الملف وستحصل على MP4 بدقة 1920x1080 للرسوم المتحركة. غير النص، غير الألوان، بدل الخطوط، أضف شعارًا: الملف بأكمله هو HTML عادي.

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

نظرًا لأن مسار العرض هو متصفح حقيقي، فإن أي تقنية ويب تعمل:

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

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

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

يتم شحن HyperFrames كمهارة لـ Claude Code. إذا كنت تستخدم Claude Code، فإن التثبيت هو أمر npm واحد.

npx skills add heygen-com/hyperframes

هذا يجلب المهارة من مستودع HeyGen على GitHub، ويثبت سلسلة الأدوات، ويسجل قدرة تحرير الفيديو مع Claude Code.

بعد التثبيت، وجه وكيلك بشكل طبيعي:

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

اعرض ملف تكوين:

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

معاينة محلية:

npx hyperframes preview my-video.html

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

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

تفتح بعض حالات الاستخدام على الفور.

التسويق الآلي للمنتجات. يمكن لوكيلك سحب ملاحظات الإصدار، وإنشاء HTML مشهدًا تلو الآخر، وشحن العرض إلى شبكة توصيل المحتوى (CDN) الخاصة بك. يحصل كل إصدار على فيديو دون أن يلمس إنسان جدولًا زمنيًا.

استجابات فيديو مخصصة. تقوم Webhooks الخاصة بواجهة برمجة التطبيقات بتشغيل وكيل يعرض مقطعًا مخصصًا لكل حدث مستخدم. مقاطع فيديو ترحيبية، إيصالات، احتفالات بالمعالم، يتم إنشاؤها جميعًا عند الطلب.

سرد القصص بالبيانات. أرسل المقاييس إلى وكيل. يقوم بإنشاء تصورات D3 مغلفة بمشاهد HyperFrames. الناتج هو عرض إرشادي مصحوب بتعليق صوتي للوحة معلوماتك، يتم تحديثه تلقائيًا كل ربع سنة.

لقطات B-roll ديناميكية للبودكاست أو المحتوى الطويل. يقرأ وكيل نصًا، وينشئ رسومًا متحركة توضيحية لكل نقطة رئيسية، ويقوم بتراكبها فوق الصوت.

مقاطع فيديو وثائق API. قم بتحليل مواصفات OpenAPI الخاصة بك، وإنشاء إرشادات نقطة نهاية مع رسوم بيانية متحركة للطلب/الاستجابة، وتصديرها كمقاطع قابلة للمشاركة.

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

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

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

Apidog يوفر لك بيئة اختبار للأجزاء التي لا يغطيها HyperFrames:

محاكاة نقاط نهاية LLM. أنشئ نقطة نهاية Claude أو OpenAI وهمية في Apidog بنفس المخطط الذي يتوقعه وكيلك تمامًا. اختبر كيف يتفاعل مسار عملك مع الاستجابات المشوهة أو المتأخرة قبل أن تبدأ تكاليف API الحقيقية.

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

تتبع استهلاك الرمز المميز. يستخدم Claude Opus 4.7 أداة تقسيم الرموز الجديدة التي تنتج ما يصل إلى 35% رموزًا أكثر من Opus 4.6. تركيبة الفيديو الغنية بـ CSS و 200 سطر من JavaScript ليست صغيرة. يساعدك تتبع الاستخدام في Apidog على تحديد حجم مطالباتك قبل أن تفاجئك التكاليف.

تصحيح أخطاء تدفقات الوكيل متعددة الأدوار. يتطلب العرض الكامل للفيديو غالبًا 5-10 دورات LLM (تخطيط الفيديو، صياغة المشاهد، مراجعة التوقيت، إصلاح الرسوم المتحركة، الانتهاء). يسمح لك Apidog بإعادة تشغيل المحادثة بالضبط للعثور على النقطة التي انحرف فيها الوكيل عن المسار.

زر

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

يقدم فريق HeyGen ادعاء أقوى من "HTML هو تنسيق مناسب للفيديو الذي تم إنشاؤه بواسطة الوكيل". إنهم يعتقدون أن HTML هو التنسيق الصحيح لمستقبل الفيديو، انتهى.

المنطق صامد. الفيديو التقليدي محجوز داخل تنسيقات خاصة تتحكم فيها Adobe و Blackmagic وعدد قليل من بائعي برامج الترميز. HTML مفتوح، موحد، قابل للإصدار، قابل للبحث، وقابل للتحرير باستخدام كل أداة نصية على وجه الأرض.

إذا أصبح الفيديو القائم على HTML هو تنسيق التبادل، تصبح مقاطع الفيديو:

قابلة للمقارنة في Git. يمكنك رؤية ما تغير بالضبط بين المراجعات.
قابلة للتقسيم إلى مكونات. بطاقة العنوان هي مكون React. الرسوم المتحركة هي وحدة قابلة للاستيراد.
سريعة الاستجابة. يتم عرض نفس التركيبة بدقة 1080p أو 4K أو 9:16 عموديًا دون إعادة بناء.
يمكن الوصول إليها. تقرأ قارئات الشاشة المصدر. النص البديل للعناصر المرئية مدمج.
قابلة للبحث. النص داخل مقاطع الفيديو هو حرفيًا نص، وليس بكسلات تم التعرف عليها بصريًا (OCR).

لا شيء من هذا نظري. كل واحدة من هذه الخصائص تعمل بالفعل في المتصفح. HyperFrames هو الجسر الذي يأخذ المحتوى الأصلي للمتصفح ويجعله مصدر فيديو صالحًا.

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

HyperFrames هو الإصدار 1. بعض القيود الحقيقية:

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

لا شيء من هذه يعتبر معطلًا للصفقة، لكن خطط لها إذا كنت تبني مسار إنتاج.

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

إذا كنت ترغب في تجربة HyperFrames الآن:

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

الخلاصة

تمكن وكلاء الذكاء الاصطناعي من كتابة التعليمات البرمجية لسنوات. حتى الآن، كان تحرير الفيديو هو المجال الإبداعي الرئيسي الأخير الذي كانوا يحتاجون فيه إلى تدخل بشري. يزيل HyperFrames هذا الاعتماد من خلال مقابلة الوكلاء حيث يعملون بالفعل: HTML و CSS و JavaScript.

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

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