מה למדתי בבניית שקופיות דיאגרמות עבור pipeline וידאו ב-CI
לאחרונה הוספתי דיאגרמות ותרשימים ל-pipeline האוטומטי שלי של סרטוני YouTube.
המסקנה העיקרית היא פשוטה: לרנדר (pre-render) הכל לקובץ PNG מראש.
אל תנסו לייצר ויזואליים בתוך מנוע הווידאו שלכם או באמצעות ffmpeg. במקום זאת, השתמשו בהעברת קובץ PNG משותף. זה הופך כל חלק ב-pipeline שלכם ליכולת בדיקה (testable) וקל להחלפה.
הנה איך בניתי את זה ומה למדתי.
הארכיטקטורה
ה-pipeline שלי משתמש במערכת של שני hosts. host אחד מטפל בוויזואליים ובאודיו. ה-host השני משתמש ב-ffmpeg כדי לאחד הכל לסרטון.
מכיוון ש-ffmpeg לא יכול להריץ JavaScript או לקרוא לדפדפן, הייתי צריך לגשר על הפער בין הכלים השונים:
• Mermaid (עבור תרשימי זרימה) רץ באמצעות Puppeteer ו-Chromium. • Matplotlib (עבור תרשימים) רץ באמצעות Python. • Pillow (עבור השקופיות) מצייר ישירות על תמונות.
מכיוון שהכלים הללו אינם יכולים לתקשר זה עם זה ישירות, אני משתמש בתבנית אחת: רינדור ל-PNG, ואז הדבקת ה-PNG הזה על קנבס (canvas) של Pillow. נתיב קוד אחד עדיף על שניים.
לקחים טכניים מרכזיים
הגדרת Chromium בעת הרצה ב-GitHub Actions, Chromium ייכשל אם לא תשתמשו בדגלים (flags) ספציפיים. עליכם לכלול את
--no-sandboxו---disable-setuid-sandbox. ללא אלו, ה-container יחסום את התהליך.עיצוב (Theming) של Mermaid אם אתם רוצים צבעים מותאמים אישית, אל תשתמשו בערכות הנושא המובנות "dark" או "forest". ערכות הנושא הללו דורסות את ההגדרות שלכם. השתמשו בערכת הנושא "base". זו הדרך היחידה להבטיח שפלטת הצבעים המותאמת שלכם תעבוד בצורה אמינה.
רקעים ב-Matplotlib לגרום לתרשימים להתאים לרקע של השקופית הוא עניין מורכב. עליכם לבצע שלושה דברים:
- קריאה ל-
matplotlib.use("Agg")לפני שאתם מייבאים אתpyplot. - הגדרת ה-
facecolorגם עבור ה-figure וגם עבור ה-axes. - שימוש ב-
bbox_inches="tight"בעת שמירת הקובץ כדי להסיר גבולות לבנים.
- אמינות ומנגנוני הגנה (Failsafes) דיאגרמה חסרה לא אמורה לשבור את כל תהליך בניית הווידאו. בניתי תשתית (scaffold) שתופסת שגיאות. אם רינדור נכשל, ה-pipeline פשוט מציג placeholder של "visual unavailable". הסרטון עדיין מסתיים. זה מאפשר לכם לעבור על התוכן גם אם חלק אחד נכשל.
הפשרה
רינדור מראש מוסיף זמן. כל דיאגרמת Mermaid לוקחת בערך 2 עד 4 שניות לרינדור. עבור סרטון של 20 קטעים, זה מוסיף כ-20 שניות לזמן הבנייה הכולל. עבור הצרכים שלי, זו פשרה הוגנת עבור מערכת יציבה.