Apa yang Saya Pelajari Saat Membangun Slide Diagram untuk Pipeline Video CI
Baru-baru ini, saya menambahkan diagram dan grafik ke dalam pipeline video YouTube otomatis saya.
Poin utamanya sederhana: render semuanya ke file PNG terlebih dahulu.
Jangan mencoba menghasilkan visual di dalam mesin video Anda atau melalui ffmpeg. Gunakan serah terima (handoff) PNG bersama sebagai gantinya. Hal ini membuat setiap bagian dari pipeline Anda dapat diuji dan mudah diganti.
Berikut adalah cara saya membangunnya dan apa yang saya pelajari.
Arsitekturnya
Pipeline saya menggunakan sistem dua-host. Satu host menangani visual dan audio. Host lainnya menggunakan ffmpeg untuk menggabungkan semuanya menjadi video.
Karena ffmpeg tidak dapat menjalankan JavaScript atau memanggil browser, saya harus mengatasi celah di antara berbagai alat yang berbeda:
• Mermaid (untuk flowchart) berjalan melalui Puppeteer dan Chromium. • Matplotlib (untuk grafik) berjalan melalui Python. • Pillow (untuk slide) menggambar langsung pada gambar.
Karena alat-alat ini tidak dapat berkomunikasi satu sama lain secara langsung, saya menggunakan satu pola: render ke PNG, lalu tempelkan PNG tersebut ke kanvas Pillow. Satu jalur kode lebih baik daripada dua.
Pelajaran Teknis Utama
Mengonfigurasi Chromium Saat dijalankan di GitHub Actions, Chromium akan gagal jika Anda tidak menggunakan flag tertentu. Anda harus menyertakan
--no-sandboxdan--disable-setuid-sandbox. Tanpa ini, container akan memblokir proses tersebut.Theming Mermaid Jika Anda menginginkan warna kustom, jangan gunakan tema dark atau forest bawaan. Tema-tema tersebut akan menimpa pengaturan Anda. Gunakan tema "base". Ini adalah satu-satunya cara untuk memastikan palet kustom Anda berfungsi dengan andal.
Background Matplotlib Membuat grafik agar sesuai dengan latar belakang slide Anda cukup sulit. Anda harus melakukan tiga hal:
- Panggil
matplotlib.use("Agg")sebelum Anda mengimporpyplot. - Atur
facecoloruntukfiguremaupunaxes. - Gunakan
bbox_inches="tight"saat menyimpan file untuk menghapus border putih.
- Keandalan dan Failsafe Diagram yang hilang tidak boleh merusak seluruh proses build video Anda. Saya membangun sebuah scaffold yang menangkap error. Jika render gagal, pipeline hanya akan menampilkan placeholder "visual unavailable". Video tetap selesai diproses. Hal ini memungkinkan Anda untuk meninjau konten meskipun ada satu bagian yang gagal.
Trade-off
Pre-rendering menambah waktu. Setiap diagram Mermaid membutuhkan waktu sekitar 2 hingga 4 detik untuk di-render. Untuk video dengan 20 segmen, ini menambah sekitar 20 detik ke total waktu build. Untuk kebutuhan saya, ini adalah pertukaran yang sepadan demi sistem yang stabil.