صايب مخططات معمارية متحركة من JSON باستعمال live-panel

شنو كيدير live-panel

live-panel كيحوّل وصف واحد ديال النظام بصيغة JSON لمخطط معماري متحرّك. التخطيط كيبقى ثابت، وفنفس الوقت الباكيطات كدوز فالسلاك، واللوغات كتهبط، والعدادات كتبدّل، والبارات كتبدّل الحالة، والتريݣيرات الجانبية كيشعلو بالتتابع.

تقدر تصدّر النتيجة كفيديو H.264 بصيغة MP4 لمنصات بحال X وXiaohongshu، ولا تخليها صفحة ويب حيّة ومستقلة. الريپوزيتوري كيخدم حتى كسكيل على طريقة Claude Code باستعمال الملف ديالو SKILL.md.

المثال ديال Codex agents المرفق كيعيد إنشاء الشكل والحركة ديال التيرمينال فواحد الكليب معماري من إعداد @thedelost. والريپوزيتوري فيه حتى مثال معماري للذكاء الاصطناعي بألوان فاتحة وهادئة، ومثال ديال تصور بصري لـ Airbnb.

الخصائص الرئيسية

• مخططات كتتعرّف بالإعدادات وكتتحدّد بصيغة JSON.
• ثيمات بصرية: تيرمينال داكن وألوان فاتحة وهادئة.
• إعدادات الكانفاس للإخراج بنسبة 4:5 و3:4 و1:1.
• باكيطات، ومسارات، ولوغات، وعدّادات، ومقاييس، وتريݣيرات، وتغييرات فالحالة بشكل متحرّك.
• رندرة محدّدة بالكامل بالوقت، بلا توقيت ساعة النظام، ولا Math.random، ولا CSS animation.
• التصدير لـ MP4 أو الاحتفاظ بصفحة HTML الحيّة المولّدة.
• فحوصات آلية للفريمات باش تكشف تجاوز النص، والتداخل، وثبات البحث فالفيديو.

ثبّت المتطلبات

live-panel كيستعمل المكتبة القياسية ديال Python، وهادي علاش ما كايناش حاجة لباكيطات pip. ثبّت الأدوات التالية قبل الرندرة:

• Python 3.8 أو أحدث.
• Chrome أو Chromium.
• ffmpeg.

من بعد ما تنزّل الريپوزيتوري، تأكّد بلي python3 وChrome أو Chromium وffmpeg متوفرين فمسار النظام ديالك. سكريبت الرندرة كيقلب افتراضياً فالمسار على Chrome وffmpeg.

رندر مثال مرفق

بدا بإعداد Codex agents. الأمر التالي كيرندر إعداد JSON لملف MP4:

python3 scripts/render.py --config examples/codex-agents/config.json --out out.mp4

الإعدادات النموذجية كتبرهن حتى كيفاش المشروع كيجمع بين المواقع الثابتة ومتغيّرات الآلة المتحرّكة. وكاينين أمثلة أخرى واجدين فـ examples/agent-architecture/ وexamples/airbnb/.

باش تخلي صفحة الويب المولّدة عوض ما تنتج الفيديو بوحدو، زِد --html-out:

python3 scripts/render.py \
  --config examples/codex-agents/config.json \
  --out out.mp4 \
  --html-out page.html

حلّ ملف HTML الناتج فمتصفّح متوافق باش تشوف الحركة الحيّة. وتقدر حتى تتحكّم فإعدادات الإخراج بخيارات بحال --width و--height و--duration و--fps و--chrome و--ffmpeg و--keep-frames و--audio و--crf.

تحقّق من الفريمات المرندرة

قبل ما تنشر شي مخطط، شغّل أداة فحص الفريمات:

python3 scripts/check_frames.py \
  --config examples/codex-agents/config.json \
  --out-dir frames \
  --repeat

الأداة كتختار تقريباً 120 نقطة زمنية، وكتقيس تجاوز النص وتداخل العناصر فـ DOM، وكتكتب ملفات PNG نموذجية. مع --repeat، كتدير بحث بعيد على كل فريم مصدّر وكتعاود ترندرو باش تتأكّد بلي النتيجة مطابقة. الأمر كيسالي بالحالة 1 إلا لقا شي مشكل.

صايب المخطط ديالك

1. نسخ واحد من ملفات الإعدادات النموذجية.
2. بدّل النص، والأرقام، والألوان، والمواقع، وإعدادات الحركة.
3. رندر الإعداد المنسوخ لـ MP4 أو HTML.
4. شغّل check_frames.py وعاين ملفات PNG المولّدة.
5. عدّل التخطيط وعاود العملية حتى تقول أداة الفحص بلي ما كاين حتى مشكل.

معظم التخصيص كيتدار فملف الإعدادات. والريپوزيتوري كيوضّح بلي ما كايناش حاجة تبدّل assets/template.html فإنشاء المخططات العادي.

إعداد الكانفاس والثيم

الإعداد يقدر يختار إعداد الكانفاس، ومدة الحركة، ومعدّل الفريمات، وpreroll اختياري:

{
  "canvas": {
    "preset": "3:4",
    "duration": 28,
    "fps": 30,
    "preroll": 0
  },
  "theme": {
    "preset": "light-pastel",
    "colors": {
      "pk": "#f0575f"
    }
  }
}

إعدادات الكانفاس المتوفرة هي 4:5 بحجم 1200×1500 بكسل، و3:4 بحجم 1080×1440 بكسل، و1:1 بحجم 1080×1080 بكسل. إعداد terminal-dark كيستعمل نافذة داكنة، وخطاً أحادي المسافة، ومربعات نصّية مقسّمة. وإعداد light-pastel كيستعمل خلفية بيضاء، ومربعات مستديرة بألوان هادئة، وأسهم SVG مستديرة، وتوهّجاً خفيفاً فالعناصر النشيطة.

مواقع الكانفاس كتستعمل البكسلات المطلقة. يعني الإعداد كيتصايب لنسبة أبعاد وحدة. ورغم أن render.py --width و--height يقدرو يعاودو يقيّسو الإخراج مع إضافة أشرطة جانبية، فنسبة مختلفة كتحتاج غالباً لنسخ الإعداد وإعادة توزيع المربعات ديالو.

وصف العناصر والحركة

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

• text للنصوص ديال العناوين والنصوص اللي بوحدها.
• box للحاويات، بما فيها التعميرات، الحدود، الزوايا المدورة، الأنماط المتقطعة، العناصر فكل سطر، الأعمدة، ومقاطع النص.
• line وpath للأسلاك والربط.
• glyph وrule للرموز والفواصل.
• flow للحزم اللي كتحرك على طول خط متعدد المقاطع.
• tarrow لسهام التفعيل.
• log لمحتوى السجل اللي كيتبدل أو كيتحرك بالتمرير.

القيم اللي كتبدل كتتعرف تحت machines. أنواع الآلات المتوفرة كتشمل counter وcycle وgauge وany_low وlane وtriggers. استعمل هاد المتغيرات باش تحرك الحالات البصرية، عوض ما تزيد منطق الوقت مباشرة فالعناصر الفردية.

الصناديق، المسارات، التدفقات، الخطوط، والمقاطع يقدرو يستعملو شروط when وthen. مثلا، شرط بحال {"var":"seq.i","in":[0,1,2]} يقدر يبرز عنصرا ملي متغير الآلة كيوافق شي قيمة من القيم المذكورة. الشروط المتعددة كتتعامل كتعبير AND.

فهم التشغيل المحدد بشكل حتمي

الصفحة المولدة كتوفر window.seek(t). كل عنصر بصري هو دالة صافية لقيمة الوقت t، والاختيارات شبه العشوائية كتستعمل تجزئة صحيحة ببذرة ثابتة. فالوضع العادي ديال المتصفح، requestAnimationFrame كيسوق الحركة. أثناء التصيير، المصدّر كيمشي لكل وقت ديال إطار باستعمال seek(i/fps) وكيصوّر النتيجة.

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

حسّن الطباعة والتخطيط

ملفات الخطوط ما كتكونش مدمجة. الثيمات الطرفية كترجع بالتتابع لـ JetBrains Mono وIBM Plex Mono وDejaVu Sans Mono وNoto Sans Mono CJK SC وخط أحادي المسافة عام. الثيمات الفاتحة والباستيلية كتستعمل Noto Sans CJK SC وPingFang SC وMicrosoft YaHei وHelvetica أو Arial، ومع العناوين الكبيرة كتستعمل Noto Serif CJK SC.

باش تقرب أكثر للأمثلة، نصّب JetBrains Mono وخطوط Noto CJK. أيقونات الإيموجي حتى هي كتحتاج لخط إيموجي ملون بحال Noto Color Emoji. وحيت الخطوط المختلفة عندها عروض مختلفة للحروف، عاود شغّل check_frames.py كل مرة كتبدل فيها الخطوط المثبتة.

نصائح مفيدة للتصيير

• استعمل المثال اللي أقرب للأسلوب البصري اللي باغي كنقطة بداية.
• خلي الإحداثيات منسجمة مع نسبة اللوحة المختارة.
• استعمل --keep-frames ملي تحتاج تفحص الصور بالضبط اللي تستعملات فبناء الفيديو.
• استعمل --audio none ملي ما بغيتيش مسار صوتي.
• عدّل --crf ملي تحتاج تتحكم فجودة الفيديو المشفّر.
• شغّل الفاحص من بعد كل تغيير مهم فالتخطيط أو الخطوط أو الإعدادات.
• بالنسبة لـ Claude Code، حط المستودع فـ ~/.claude/skills/live-panel/ أو فالمجلد اللي كيستعملو محمّل المهارات ديال الوكيل.

الاعتمادات والترخيص

الكود منشور بموجب ترخيص MIT. التصميم البصري اللي عاودات صنعو أمثلة وكلاء Codex كيرجع لـ @thedelost، بينما الإنفوغرافيك الخفيف ديال هندسة الذكاء الاصطناعي كيرجع للمؤلف الأصلي ديالو، منشئ Xiaohongshu 林纾. أرقام Airbnb جاية من تصريحات قادة Airbnb فـ مقابلة Latent.Space، والعدادات المتحركة توضيحية.

الخلاصة

live-panel كيوفر طريقة عملية باش تحوّل أوصاف منظمة ديال الأنظمة لرسومات حركية مصقولة وقابلة للتكرار. نسخ مثالا، بدّل JSON، اختار لوحة وثيما، صايب MP4 أو صفحة حية، واستعمل فاحص الإطارات المحدد بشكل حتمي باش تلقى مشاكل التخطيط قبل النشر.