What I Learned Building Diagram Slides for a CI Video Pipeline

मी अलीकडेच माझ्या ऑटोमेटेड YouTube व्हिडिओ पाइपलाइनमध्ये डायग्राम्स आणि चार्ट्स जोडले आहेत.

मुख्य निष्कर्ष साधा आहे: सर्व काही आधी एका PNG फाईलमध्ये प्री-रेंडर करा.

तुमच्या व्हिडिओ इंजिनमध्ये किंवा ffmpeg द्वारे व्हिज्युअल्स तयार करण्याचा प्रयत्न करू नका. त्याऐवजी 'shared PNG handoff' वापरा. यामुळे तुमच्या पाइपलाइनचा प्रत्येक भाग टेस्ट करण्यायोग्य आणि बदलण्यास सोपा होतो.

मी ते कसे तयार केले आणि मी काय शिकलो, ते खाली दिले आहे.

The Architecture

माझी पाइपलाइन दोन-होस्ट (two-host) सिस्टम वापरते. एक होस्ट व्हिज्युअल्स आणि ऑडिओ हाताळतो. दुसरा होस्ट सर्व गोष्टी एकत्र करून व्हिडिओ तयार करण्यासाठी ffmpeg वापरतो.

ffmpeg JavaScript चालवू शकत नाही किंवा ब्राउझर कॉल करू शकत नाही, त्यामुळे मला वेगवेगळ्या टूल्समधील तफावत दूर करावी लागली:

• Mermaid (फ्लोचार्टसाठी) Puppeteer आणि Chromium द्वारे चालते. • Matplotlib (चार्ट्ससाठी) Python द्वारे चालते. • Pillow (स्लाईड्ससाठी) थेट इमेजवर रेखाटते.

ही टूल्स एकमेकांशी थेट संवाद साधू शकत नसल्यामुळे, मी एकच पॅटर्न वापरतो: PNG मध्ये रेंडर करा आणि नंतर ती PNG एका Pillow कॅनव्हासवर पेस्ट करा. दोन कोड पाथपेक्षा एक कोड पाथ अधिक चांगला असतो.

Key Technical Lessons

  1. Configuring Chromium GitHub Actions मध्ये चालवताना, जर तुम्ही विशिष्ट फ्लॅग्स वापरले नाहीत तर Chromium फेल होईल. तुम्हाला --no-sandbox आणि --disable-setuid-sandbox समाविष्ट करणे आवश्यक आहे. याशिवाय, कंटेनर प्रोसेस ब्लॉक करेल.

  2. Mermaid Theming जर तुम्हाला कस्टम कलर्स हवे असतील, तर इन-बिल्ट डार्क किंवा फॉरेस्ट थीम्स वापरू नका. त्या थीम्स तुमच्या सेटिंग्स ओव्हरराइड करतात. "base" थीम वापरा. तुमची कस्टम पॅलेट विश्वसनीयपणे काम करेल याची खात्री करण्याचा हा एकमेव मार्ग आहे.

  3. Matplotlib Backgrounds चार्ट्स तुमच्या स्लाईड बॅकग्राउंडशी मॅच करणे कठीण असते. तुम्हाला तीन गोष्टी कराव्या लागतील:

  • pyplot इम्पोर्ट करण्यापूर्वी matplotlib.use("Agg") कॉल करा.
  • फिगर (figure) आणि अ‍ॅक्सेस (axes) या दोन्हीसाठी facecolor सेट करा.
  • पांढऱ्या बॉर्डर्स काढण्यासाठी फाईल सेव्ह करताना bbox_inches="tight" वापरा.
  1. Reliability and Failsafes एखादा डायग्राम गहाळ झाला तरी संपूर्ण व्हिडिओ बिल्ड थांबायला नको. मी एरर्स पकडण्यासाठी एक स्कॅफोल्ड (scaffold) तयार केले आहे. जर रेंडरिंग फेल झाले, तर पाइपलाइन फक्त "visual unavailable" प्लेसहोल्डर दाखवते. व्हिडिओ तरीही पूर्ण होतो. यामुळे एखादा भाग फेल झाला तरी तुम्ही कंटेंट रिव्ह्यू करू शकता.

The Trade-off

प्री-रेंडरिंगमुळे वेळ वाढतो. प्रत्येक Mermaid डायग्राम रेंडर होण्यासाठी साधारण २ ते ४ सेकंद लागतात. २०-सेगमेंटच्या व्हिडिओसाठी, यामुळे एकूण बिल्ड टाइममध्ये सुमारे २० सेकंद वाढतात. माझ्या गरजांसाठी, स्थिर सिस्टम मिळवण्यासाठी हा एक योग्य व्यवहार आहे.

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