live-panel کے ذریعے JSON سے متحرک آرکیٹیکچر ڈایاگرام بنائیں

live-panel کیا کرتا ہے

live-panel ایک واحد JSON نظامی وضاحت کو متحرک آرکیٹیکچر ڈایاگرام میں تبدیل کرتا ہے۔ لے آؤٹ اپنی جگہ برقرار رہتا ہے، جبکہ پیکٹس تاروں پر سفر کرتے ہیں، لاگز اسکرول ہوتے ہیں، کاؤنٹرز تبدیل ہوتے ہیں، بارز کی حالت بدلتی ہے، اور سائیڈ ٹرگرز سلسلہ وار روشن ہوتے ہیں۔

آپ نتیجے کو X اور Xiaohongshu جیسے پلیٹ فارمز کے لیے H.264 MP4 کے طور پر ایکسپورٹ کر سکتے ہیں، یا اسے خود کفیل لائیو ویب صفحے کے طور پر برقرار رکھ سکتے ہیں۔ ریپوزٹری اپنی SKILL.md فائل کے ذریعے Claude Code طرز کی اسکل کے طور پر بھی کام کرتی ہے۔

شامل کردہ Codex agents کی مثال @thedelost کی ایک آرکیٹیکچر کلپ کے ٹرمینل طرز کے انداز اور حرکت کو دوبارہ تخلیق کرتی ہے۔ ریپوزٹری میں ہلکے پیسٹل AI آرکیٹیکچر کی مثال اور Airbnb ویژولائزیشن بھی شامل ہے۔

اہم خصوصیات

• JSON میں بیان کردہ کنفیگریشن پر مبنی ڈایاگرامز۔
• ٹرمینل-ڈارک اور ہلکے پیسٹل کے بصری تھیمز۔
• 4:5، 3:4، اور 1:1 آؤٹ پٹ کے لیے کینوس پری سیٹس۔
• متحرک پیکٹس، راستے، لاگز، کاؤنٹرز، گیجز، ٹرگرز، اور حالت کی تبدیلیاں۔
• مکمل طور پر وقت پر مبنی متعین رینڈرنگ، جس میں وال کلاک ٹائمنگ، Math.random، یا CSS اینیمیشن استعمال نہیں ہوتی۔
• 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 میں ترمیم کرنے کی ضرورت نہیں۔

کینوس اور تھیم کنفیگر کریں

کنفیگریشن کینوس پری سیٹ، اینیمیشن کا دورانیہ، فریم ریٹ، اور اختیاری پری رول منتخب کر سکتی ہے:

{
  "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 پکسلز ہیں۔ ٹرمینل-ڈارک پری سیٹ میں ایک تاریک ونڈو، مونو اسپیس ٹائپوگرافی، اور حصوں میں تقسیم شدہ ٹیکسٹ موڈ باکسز استعمال ہوتے ہیں۔ ہلکے پیسٹل پری سیٹ میں سفید پس منظر، گول پیسٹل باکسز، گول 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 کا خالص فنکشن ہوتا ہے، اور شبه بے ترتیب انتخاب ایک مقررہ seed والے integer hash کا استعمال کرتے ہیں۔ عام براؤزر موڈ میں requestAnimationFrame اینیمیشن چلاتا ہے۔ رینڈرنگ کے دوران ایکسپورٹر seek(i/fps) استعمال کرتے ہوئے ہر فریم کے وقت پر جاتا ہے اور نتیجہ محفوظ کرتا ہے۔

یہ ڈیزائن ایکسپورٹ کیے گئے فریمز کو دوبارہ قابلِ تکرار بناتا ہے۔ اسی لیے فونٹس، پوزیشنز یا اینیمیشن شرائط تبدیل کرنے کے بعد فریم چیکر استعمال کرنا چاہیے۔

ٹائپوگرافی اور لے آؤٹ بہتر بنائیں

فونٹ فائلیں بنڈل نہیں کی جاتیں۔ ٹرمینل تھیمز JetBrains Mono، IBM Plex Mono، DejaVu Sans Mono، Noto Sans Mono CJK SC اور عمومی monospace فونٹ کے ذریعے fallback کرتے ہیں۔ ہلکے pastel تھیمز Noto Sans CJK SC، PingFang SC، Microsoft YaHei، Helvetica یا Arial استعمال کرتے ہیں، جبکہ بڑے عنوانات کے لیے Noto Serif CJK SC استعمال ہوتا ہے۔

مثالوں سے زیادہ قریب مماثلت کے لیے JetBrains Mono اور Noto CJK فونٹس انسٹال کریں۔ ایموجی آئیکنز کے لیے Noto Color Emoji جیسے رنگین ایموجی فونٹ کی بھی ضرورت ہوتی ہے۔ چونکہ مختلف فونٹس میں glyph کی چوڑائیاں مختلف ہوتی ہیں، اس لیے انسٹال شدہ فونٹس تبدیل کرنے کے بعد check_frames.py دوبارہ چلائیں۔

رینڈرنگ کے مفید نکات

• اپنے مطلوبہ بصری انداز سے سب سے قریب مثال کو ابتدائی نقطۂ آغاز کے طور پر استعمال کریں۔
• منتخب canvas ratio کے مطابق coordinates کو یکساں رکھیں۔
• جب ویڈیو بنانے کے لیے استعمال ہونے والی عین تصاویر کا معائنہ کرنا ہو تو --keep-frames استعمال کریں۔
• جب آڈیو ٹریک نہ چاہیے ہو تو --audio none استعمال کریں۔
• انکوڈ شدہ ویڈیو کے معیار کو قابو میں رکھنے کے لیے --crf کو ایڈجسٹ کریں۔
• لے آؤٹ، فونٹ یا configuration میں ہر اہم تبدیلی کے بعد checker چلائیں۔
• Claude Code کے لیے repository کو ~/.claude/skills/live-panel/ میں یا agent کے skill loader کے زیرِ استعمال directory میں رکھیں۔

کریڈٹس اور لائسنسنگ

یہ کوڈ MIT license کے تحت جاری کیا گیا ہے۔ Codex agents کی جانب سے دوبارہ تخلیق کیا گیا بصری ڈیزائن @thedelost کی ملکیت ہے، جبکہ light AI architecture infographic اپنے اصل مصنف، Xiaohongshu creator 林纾، کی ملکیت ہے۔ Airbnb کے اعداد و شمار Airbnb کے رہنماؤں کے Latent.Space interview میں دیے گئے بیانات سے لیے گئے ہیں، اور متحرک counters وضاحتی نوعیت کے ہیں۔

نتیجہ

live-panel ساختہ system descriptions کو نفیس، دوبارہ قابلِ تکرار motion graphics میں تبدیل کرنے کے لیے ایک عملی workflow فراہم کرتا ہے۔ کوئی مثال copy کریں، JSON میں ترمیم کریں، canvas اور theme منتخب کریں، MP4 یا live page رینڈر کریں، اور publishing سے پہلے layout کے مسائل پکڑنے کے لیے deterministic frame checker استعمال کریں۔