CI ویڈیو پائپ لائن کے لیے ڈائیگرام سلائیڈز بنانے سے میں نے کیا سیکھا

میں نے حال ہی میں اپنی خودکار (automated) یوٹیوب ویڈیو پائپ لائن میں ڈائیگرامز اور چارٹس شامل کیے ہیں۔

اس کا بنیادی سبق سادہ ہے: پہلے ہر چیز کو ایک PNG فائل میں پری رینڈر (pre-render) کر لیں۔

اپنے ویڈیو انجن کے اندر یا ffmpeg کے ذریعے ویژولز (visuals) تیار کرنے کی کوشش نہ کریں۔ اس کے بجائے ایک مشترکہ PNG ہینڈ آف (handoff) کا استعمال کریں۔ اس سے آپ کی پائپ لائن کا ہر حصہ ٹیسٹ کرنے کے قابل اور تبدیل کرنے میں آسان ہو جاتا ہے۔

میں نے اسے کیسے بنایا اور میں نے کیا سیکھا، وہ یہاں درج ہے۔

آرکیٹیکچر (The Architecture)

میری پائپ لائن دو ہوسٹ (two-host) پر مشتمل سسٹم استعمال کرتی ہے۔ ایک ہوسٹ ویژولز اور آڈیو کو سنبھالتا ہے۔ دوسرا ہوسٹ ffmpeg کے ذریعے سب کچھ ملا کر ایک ویڈیو بناتا ہے۔

چونکہ ffmpeg جاوا اسکرپٹ (JavaScript) چلا نہیں سکتا اور نہ ہی براؤزر کو کال کر سکتا ہے، اس لیے مجھے مختلف ٹولز کے درمیان موجود فرق کو ختم کرنا پڑا:

• Mermaid (فلو چارٹس کے لیے) Puppeteer اور Chromium کے ذریعے چلتا ہے۔ • Matplotlib (چارٹس کے لیے) Python کے ذریعے چلتا ہے۔ • Pillow (سلائیڈز کے لیے) براہ راست امیجز پر ڈرائنگ کرتا ہے۔

چونکہ یہ ٹولز براہ راست ایک دوسرے سے رابطہ نہیں کر سکتے، اس لیے میں ایک ہی پیٹرن استعمال کرتا ہوں: پہلے PNG میں رینڈر کریں، پھر اس PNG کو Pillow کینوس پر پیسٹ کر دیں۔ دو کے بجائے ایک کوڈ پاتھ (code path) بہتر ہے۔

اہم تکنیکی اسباق

1. Chromium کی کنفیگریشن

جب GitHub Actions میں چلایا جائے، تو اگر آپ مخصوص فلیگز (flags) استعمال نہیں کریں گے تو Chromium فیل ہو جائے گا۔ آپ کو --no-sandbox اور --disable-setuid-sandbox شامل کرنا ہوگا۔ ان کے بغیر، کنٹینر اس عمل کو روک دے گا۔

2. Mermaid تھیمنگ

اگر آپ اپنی مرضی کے رنگ (custom colors) چاہتے ہیں، تو بلٹ ان ڈارک (dark) یا فارسٹ (forest) تھیمز استعمال نہ کریں۔ وہ تھیمز آپ کی سیٹنگز کو اوور رائڈ (override) کر دیتے ہیں۔ "base" تھیم استعمال کریں۔ اپنی کسٹم پیلیٹ (palette) کو قابل اعتماد طریقے سے کام کرنے کے لیے یہی واحد طریقہ ہے۔

3. Matplotlib بیک گراؤنڈز

چارٹس کو اپنی سلائیڈ کے بیک گراؤنڈ سے ملانا مشکل کام ہے۔ آپ کو تین کام کرنے ہوں گے:

  • pyplot کو امپورٹ کرنے سے پہلے matplotlib.use("Agg") کال کریں۔
  • figure اور axes دونوں کے لیے facecolor سیٹ کریں۔
  • وائٹ بارڈرز (white borders) ختم کرنے کے لیے فائل سیو کرتے وقت bbox_inches="tight" استعمال کریں۔

4. قابل اعتمادیت اور فیل سیف (Failsafes)

ایک ڈائیگرام کے نہ ہونے سے آپ کی پوری ویڈیو بلڈ (build) خراب نہیں ہونی چاہیے۔ میں نے ایک ایسا ڈھانچہ (scaffold) بنایا ہے جو غلطیوں کو پکڑ لیتا ہے۔ اگر رینڈرنگ فیل ہو جائے، تو پائپ لائن صرف ایک "visual unavailable" پلیس ہولڈر دکھاتی ہے۔ ویڈیو پھر بھی مکمل ہو جاتی ہے۔ اس سے آپ کو مواد کا جائزہ لینے کی سہولت ملتی ہے، چاہے کوئی ایک حصہ فیل ہی کیوں نہ ہو جائے۔

توازن (The Trade-off)

پری رینڈرنگ سے وقت بڑھ جاتا ہے۔ ہر Mermaid ڈائیگرام کو رینڈر ہونے میں تقریباً 2 سے 4 سیکنڈ لگتے ہیں۔ 20 سیگمنٹس والی ویڈیو کے لیے، یہ کل بلڈ ٹائم میں تقریباً 20 سیکنڈ کا اضافہ کرتا ہے۔ میری ضروریات کے مطابق، ایک مستحکم سسٹم کے لیے یہ ایک مناسب سودا ہے۔

ماخذ: https://dev.to/morinaga/what-i-learned-adding-diagram-and-chart-slides-to-a-ci-rendered-youtube-pipeline-3bnl