Apa yang Saya Pelajari Semasa Membina Slaid Rajah untuk Saluran Paip Video CI

Baru-baru ini, saya telah menambah rajah dan carta ke dalam saluran paip video YouTube automatik saya.

Pengajaran utamanya mudah: render semuanya ke fail PNG terlebih dahulu.

Jangan cuba menjana visual di dalam enjin video anda atau melalui ffmpeg. Sebaliknya, gunakan penyerahan (handoff) PNG yang dikongsi. Ini menjadikan setiap bahagian saluran paip anda boleh diuji dan mudah diganti.

Berikut adalah cara saya membinanya dan apa yang saya pelajari.

Seni Bina

Saluran paip saya menggunakan sistem dua hos. Satu hos mengendalikan visual dan audio. Hos yang lain menggunakan ffmpeg untuk menggabungkan semuanya menjadi video.

Memandangkan ffmpeg tidak boleh menjalankan JavaScript atau memanggil pelayar, saya perlu menyelesaikan jurang antara alatan yang berbeza:

• Mermaid (untuk carta alir) berjalan melalui Puppeteer dan Chromium. • Matplotlib (for charts) berjalan melalui Python. • Pillow (untuk slaid) melukis terus pada imej.

Oleh kerana alatan ini tidak boleh berkomunikasi antara satu sama lain secara langsung, saya menggunakan satu corak tunggal: render ke PNG, kemudian tampal PNG tersebut pada kanvas Pillow. Satu laluan kod adalah lebih baik daripada dua.

Pengajaran Teknikal Utama

  1. Mengkonfigurasi Chromium Apabila dijalankan dalam GitHub Actions, Chromium akan gagal jika anda tidak menggunakan flag tertentu. Anda mesti menyertakan --no-sandbox dan --disable-setuid-sandbox. Tanpa ini, kontena akan menyekat proses tersebut.

  2. Pemilihan Tema Mermaid Jika anda mahukan warna tersuai, jangan gunakan tema dark atau forest sedia ada. Tema tersebut akan mengatasi tetapan anda. Gunakan tema "base". Ini adalah satu-satunya cara untuk memastikan palet tersuai anda berfungsi dengan stabil.

  3. Latar Belakang Matplotlib Menyesuaikan carta dengan latar belakang slaid anda adalah agak sukar. Anda perlu melakukan tiga perkara:

  • Panggil matplotlib.use("Agg") sebelum anda mengimport pyplot.
  • Tetapkan facecolor untuk kedua-dua figure dan axes.
  • Gunakan bbox_inches="tight" semasa menyimpan fail untuk membuang sempadan putih.
  1. Kebolehpercayaan dan Mekanisme Failsafe Rajah yang hilang tidak sepatutnya merosakkan keseluruhan binaan video anda. Saya membina satu scaffold yang menangkap ralat. Jika render gagal, saluran paip hanya akan memaparkan placeholder "visual unavailable". Video tetap akan selesai. Ini membolehkan anda menyemak kandungan walaupun satu bahagian gagal.

Pertukaran (Trade-off)

Pra-render menambah masa. Setiap rajah Mermaid mengambil masa kira-kira 2 hingga 4 saat untuk dirender. Untuk video 20 segmen, ini menambah kira-kira 20 saat kepada jumlah masa binaan. Bagi keperluan saya, ini adalah pertukaran yang berbaloi untuk sistem yang stabil.

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