สิ่งที่ผมได้เรียนรู้จากการสร้างสไลด์ไดอะแกรมสำหรับ CI Video Pipeline
เมื่อเร็วๆ นี้ ผมได้เพิ่มไดอะแกรมและแผนภูมิเข้าไปในระบบ YouTube video pipeline แบบอัตโนมัติของผม
บทเรียนสำคัญนั้นเรียบง่ายมาก: ให้ทำการ pre-render ทุกอย่างเป็นไฟล์ PNG ก่อนเสมอ
อย่าพยายามสร้างภาพกราฟิกภายใน video engine หรือผ่าน ffmpeg แต่ให้ใช้การส่งต่อไฟล์ PNG ร่วมกันแทน วิธีนี้จะทำให้ทุกส่วนของ pipeline สามารถทดสอบได้และเปลี่ยนทดแทนได้ง่าย
นี่คือวิธีการที่ผมสร้างมันขึ้นมาและสิ่งที่ผมได้เรียนรู้
สถาปัตยกรรม (The Architecture)
Pipeline ของผมใช้ระบบแบบสองโฮสต์ (two-host system) โดยโฮสต์หนึ่งจะจัดการเรื่องภาพและเสียง ส่วนอีกโฮสต์จะใช้ ffmpeg ในการรวมทุกอย่างเข้าด้วยกันเป็นวิดีโอ
เนื่องจาก ffmpeg ไม่สามารถรัน JavaScript หรือเรียกใช้งานเบราว์เซอร์ได้ ผมจึงต้องแก้ปัญหาช่องว่างระหว่างเครื่องมือต่างๆ ดังนี้:
• Mermaid (สำหรับ flowchart) ทำงานผ่าน Puppeteer และ Chromium • Matplotlib (สำหรับแผนภูมิ) ทำงานผ่าน Python • Pillow (สำหรับสไลด์) วาดลงบนรูปภาพโดยตรง
เนื่องจากเครื่องมือเหล่านี้ไม่สามารถสื่อสารกันได้โดยตรง ผมจึงใช้รูปแบบเดียวคือ: render เป็นไฟล์ PNG แล้วนำ PNG นั้นไปวางบน canvas ของ Pillow การมีเส้นทางการเขียนโค้ด (code path) เพียงเส้นทางเดียวดีกว่าการมีสองเส้นทาง
บทเรียนทางเทคนิคที่สำคัญ
1. การกำหนดค่า Chromium
เมื่อรันใน GitHub Actions ตัว Chromium จะทำงานล้มเหลวหากคุณไม่ใช้ flag เฉพาะเจาะจง คุณต้องใส่ --no-sandbox และ --disable-setuid-sandbox มิฉะนั้น container จะบล็อกกระบวนการทำงาน
2. การทำธีม Mermaid
หากคุณต้องการใช้สีที่กำหนดเอง อย่าใช้ธีม dark หรือ forest ที่มีมาให้ เพราะธีมเหล่านั้นจะไปทับค่าที่คุณตั้งไว้ ให้ใช้ธีม "base" แทน นี่เป็นวิธีเดียวที่จะทำให้มั่นใจได้ว่าพาเลตสี (palette) ที่คุณกำหนดเองจะทำงานได้อย่างเสถียร
3. พื้นหลังของ Matplotlib
การทำให้แผนภูมิมีพื้นหลังตรงกับสไลด์นั้นค่อนข้างยุ่งยาก คุณต้องทำสามสิ่งนี้:
- เรียกใช้
matplotlib.use("Agg")ก่อนที่จะimport pyplot - ตั้งค่า
facecolorสำหรับทั้งfigureและaxes - ใช้
bbox_inches="tight"เมื่อบันทึกไฟล์เพื่อลบขอบสีขาวออก
4. ความน่าเชื่อถือและระบบสำรอง (Failsafes)
ไดอะแกรมที่หายไปไม่ควรทำให้การสร้างวิดีโอทั้งหมดล้มเหลว ผมจึงสร้างโครงสร้าง (scaffold) ที่คอยดักจับข้อผิดพลาด หากการ render ล้มเหลว Pipeline จะแสดงภาพ placeholder ว่า "visual unavailable" แทน วิดีโอก็ยังคงสร้างจนเสร็จสิ้น วิธีนี้ช่วยให้คุณสามารถตรวจสอบเนื้อหาได้แม้ว่าจะมีบางส่วนทำงานผิดพลาดก็ตาม
ข้อแลกเปลี่ยน (The Trade-off)
การ pre-render ทำให้เสียเวลาเพิ่มขึ้น ไดอะแกรม Mermaid แต่ละอันใช้เวลา render ประมาณ 2 ถึง 4 วินาที สำหรับวิดีโอที่มี 20 ส่วน สิ่งนี้จะเพิ่มเวลาในการ build ทั้งหมดประมาณ 20 วินาที สำหรับความต้องการของผม นี่ถือเป็นการแลกเปลี่ยนที่คุ้มค่าเพื่อให้ได้ระบบที่มีความเสถียร