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

تسليم أي تطبيق أو منصة برمجية للمستخدم النهائي لا يتوقف عند كتابة الكود واجتياز اختبارات التكامل والنشر على الخوادم. التحدي الحقيقي الذي يواجه أغلب المطورين هو: كيف تجعل المستخدم أو العميل يفهم طريقة العمل بسرعة وبدون جلسات تدريب متكررة تستهلك وقت الجميع؟

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

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

لهذا السبب، قمت ببناء مهارة مفتوحة المصدر لمعايير وكلاء الذكاء الاصطناعي باسم interactive-tutorial-video، لتحويل أي وكيل برمجي (مثل Claude Code أو Codex أو Cursor أو Windsurf) إلى مخرج شروحات رقمي متكامل ينتج فيديوهات سينمائية تفاعلية بدقة Full HD 1080p مع عناصر جذب بصري، تعليق صوتي عصبي بلهجات محلية، ورفعها مباشرة إلى قوائم تشغيل يوتيوب جاهزة للإرسال للعميل.

المهارة متاحة ومفتوحة المصدر بالكامل على GitHub بترخيص MIT ومتوافقة مع معايير Agent Skills المفتوحة.

الفكرة من واقع الميدان: متجر طيبة ستور في سلوق

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

1. دورة البيع السريع على الكاشير، واختيار الأصناف، وطباعة الإيصالات، وحساب الباقي.
2. إضافة صنف جديد وكتابة الاسم وتحديد سعر التكلفة من بنغازي وسعر البيع وتوليد الباركود.
3. متابعة مبيعات اليوم وصافي الأرباح وجرد المخزن الفعلي وتنبيهات النواقص.
4. تسجيل المصروفات اليومية والإيرادات من الدرج وإغلاق الكاشير ومطابقة النقدية.
5. إدارة المرتجعات واستبدال البضائع للزبائن وإرجاعها للمخزن تلقائياً.

بدلاً من قضاء ساعات في التسجيل التقليدي، تركت الوكيل البرمجي الذكي يتولى المهمة كاملة من خلال المهارة المطورة. النتيجة كانت إنتاج باقة من 5 فيديوهات فائقة الجودة بتعليق صوتي نسائي باللهجة الليبية الطبيعية، ورفعها مباشرة في قائمة تشغيل غير مدرجة (Unlisted Playlist) على يوتيوب:

• رابط قائمة التشغيل المنتجة آلياً على يوتيوب:
  شاهد باقة الفيديوهات على YouTube Playlist

الركائز التقنية الثلاث للمهارة

تعمل مهارة interactive-tutorial-video وفق خط إنتاج برمجي ثلاثي المراحل:

[1. محرك التوجيه البصري في المتصفح]
Playwright + DOM Overlay Injection
(حلقات تركيز متوهجة + مؤشر افتراضي ناعم + موجات نقر + لافتة زجاجية سفلية)
                     |
                     v
[2. توليد ودمج الصوت المتزامن بالمللي ثانية]
Neural TTS + FFmpeg Filter Complex
(أصوات عصبية محلية + مرشحات adelay و amix بدون تقطيع)
                     |
                     v
[3. النشر الذاتي على يوتيوب وقوائم التشغيل]
macOS Chrome Keychain Session Decryption + Headless Studio Upload
(رفع Full HD وتعبئة الحقول وتنظيم الفيديوهات في Playlist خاصة)

1. محرك التوجيه البصري الفائق (In-Browser HUD Engine)

بدلاً من تسجيل شاشة المتصفح كمتفرج سلبي، يقوم سكربت tutorial_engine.js بحقن طبقة تفاعلية ذكية أعلى الواجهة أثناء تشغيل Playwright:

• المؤشر الافتراضي الذكي (Smart Virtual Cursor): سهم متجهي (SVG) مصمم بعناية يتحرك بانحناءات طبيعية فائقة النعومة (عبر cubic-bezier transitions) باتجاه العنصر المستهدف ليحاكي يد مدرب خبير.
• حلقات التركيز المتوهجة (Pulsating Spotlight Rings): إطار ضوئي نابض بلون العلامة التجارية يحيط بالزر أو الحقل لشد انتباه المشاهد فوراً قبل أي تفاعل.
• موجات النقر الضوئية (Click Ripple Waves): دائرة ضوئية متوسعة ومتحركة تنطلق لحظة الضغط لتوضح وقت الإجراء بدقة.
• بطاقات التوجيه العائمة (Target Tooltip Pills): شارة أنيقة داكنة بسهم يشير رأسياً إلى العنصر مع نص عربي توجيهي (مثل: “اضغط هنا لاختيار المنتج” أو “أدخل المبلغ المستلم كاش”).
• اللافتة السفلية الزجاجية (Glassmorphism HUD Banner): شريط سفلي مصقول بتأثير الزجاج الداكن يعرض رقم الخطوة الحالية، عنوانها الرئيسي، وشرحاً موجزاً لما يجري في الشاشة.

2. التوليف والدمج الصوتي المتزامن بالمللي ثانية (Neural Voiceover Muxer)

الصوت الجيد هو نصف نجاح الفيديو التعليمي. تستخدم المهارة سكربت mux_voiceover.py المبني على نموذج الصوت العصبي الفائق من edge-tts:

• يدعم التوليد بمختلف اللهجات العربية الطبيعية: اللهجة الليبية (ar-LY-ImanNeural)، السعودية (ar-SA-ZariyahNeural)، المصرية (ar-EG-SalmaNeural)، الإماراتية، والإنجليزية.
• تقطيع سيناريو الشرح إلى مقاطع زمنية محددة ترتبط بكل خطوة بصرية في الفيديو.
• بناء مرشحات filter_complex متقدمة في أداة ffmpeg تدمج المقاطع باستخدام adelay و amix مع تفعيل خيارات التوازن والتطبيع الصوتي، مما يضمن تدفق الصوت بنقاء استوديو وبدون أي تقطيع أو تداخل.
• دمج مسار الصوت مع مسار الفيديو الأصلي بدون إعادة ترميز الفيديو (-c:v copy) للحفاظ على جودة 1080p وسرعة التوليد الفائقة.

3. حل معضلة الرفع إلى يوتيوب برمجياً (macOS Chrome Keychain Decryption)

رفع الفيديوهات برمجياً إلى يوتيوب لطالما كان كابوساً للمطورين: واجهات Google Cloud API تتطلب إعداد مشاريع وشهادات OAuth معقدة، وتفرض حصص رفع محدودة جداً تقيدك بستة فيديوهات فقط يومياً، بالإضافة إلى حظر يوتيوب لمحاولات تسجيل الدخول من متصفحات الأتمتة المجهولة.

حلت المهارة هذه العقدة عبر سكربت youtube_session_uploader.js:

1. يستفيد السكربت من جلسة تسجيل الدخول الحقيقية الموجودة بالفعل في متصفح Google Chrome على نظام macOS.
2. يستخرج السكربت كلمة المرور الآمنة من سلسلة المفاتيح (Keychain) للنظام باسم Chrome Safe Storage.
3. يولد مفتاح التشفير AES-128 عبر خوارزمية PBKDF2 المعتمدة.
4. يفك تشفير الكوكيز المحمية الخاصة بنطاقات google.com و youtube.com مع التعامل مع بادئة HMAC وتنسيق PKCS7.
5. يحقن الجلسة النشطة مباشرة في متصفح Playwright، مما يتيح له الدخول فوراً إلى استوديو يوتيوب (YouTube Studio) كجلسة موثقة بالكامل بدون طلب رموز تحقق أو واجهات تسجيل دخول.
6. يقوم الوكيل برفع الفيديو، وتعيين العنوان والوصف، واختيار حالة “غير مدرج” (Unlisted)، وتحديد خيار “ليس مخصصاً للأطفال”، واستخراج الرابط الفوري youtu.be.
7. ينشئ الوكيل قائمة التشغيل المطلوبة ويضيف الفيديوهات إليها بالتسلسل الدقيق، ثم يزودك بالروابط الجاهزة للإرسال فوراً للعميل.

كيف تثبت المهارة وتستخدمها مع وكيلك الذكي؟

المهارة متوافقة تماماً مع معيار Agent Skills ويمكن تثبيتها بضغطة زر واحدة لكافة الوكلاء البرمجيين المدعومين:

# تثبيت عام لكافة الوكلاء على جهازك
npx skills add yasircs4/interactive-tutorial-video -g -a '*' -y

# أو تثبيت خاص لـ Codex
npx skills add yasircs4/interactive-tutorial-video -g -a codex -y

# أو لـ Claude Code
npx skills add yasircs4/interactive-tutorial-video -g -a claude-code -y

بعد التثبيت، يكفي أن تطلب من الوكيل في بيئة التطوير الخاصة بك:

استخدم interactive-tutorial-video لتسجيل فيديو تعليمي تفاعلي بدقة 1080p لشاشة المدفوعات الجديدة.
أضف عناصر التوجيه البصري الخضراء مع تعليق صوتي باللغة العربية (ar-SA-ZariyahNeural)،
وارفع الفيديو بحالة غير مدرج على حسابي في يوتيوب وأضفه إلى قائمة تشغيل خاصة باسم "دليل المدفوعات".

الخلاصة ومستقبل الأتمتة التفاعلية

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

المشروع مفتوح للجميع للمساهمة والتطوير:

• مستودع المشروع: https://github.com/yasircs4/interactive-tutorial-video
• للاقتراحات والتواصل المهني: info@yasirnajeep.com