Những gì tôi học được khi xây dựng các slide sơ đồ cho một pipeline video CI
Gần đây, tôi đã thêm các sơ đồ và biểu đồ vào pipeline video YouTube tự động của mình.
Điểm mấu chốt rất đơn giản: hãy render trước mọi thứ ra một tệp PNG.
Đừng cố gắng tạo hình ảnh trực tiếp bên trong engine video hoặc thông qua ffmpeg. Thay vào đó, hãy sử dụng phương thức bàn giao (handoff) bằng tệp PNG dùng chung. Điều này giúp mọi phần trong pipeline của bạn đều có thể kiểm thử và dễ dàng thay thế.
Dưới đây là cách tôi đã xây dựng nó và những gì tôi đã học được.
The Architecture
Pipeline của tôi sử dụng một hệ thống hai host. Một host xử lý hình ảnh và âm thanh. Host còn lại sử dụng ffmpeg để kết hợp mọi thứ thành một video.
Vì ffmpeg không thể chạy JavaScript hay gọi trình duyệt, tôi đã phải giải quyết khoảng cách giữa các công cụ khác nhau:
• Mermaid (dành cho lưu đồ) chạy thông qua Puppeteer và Chromium. • Matplotlib (dành cho biểu đồ) chạy thông qua Python. • Pillow (dành cho các slide) vẽ trực tiếp lên hình ảnh.
Vì các công cụ này không thể giao tiếp trực tiếp với nhau, tôi sử dụng một mô hình duy nhất: render ra tệp PNG, sau đó dán tệp PNG đó lên một canvas của Pillow. Một luồng mã (code path) duy nhất luôn tốt hơn là hai.
Key Technical Lessons
Configuring Chromium Khi chạy trong GitHub Actions, Chromium sẽ bị lỗi nếu bạn không sử dụng các flag cụ thể. Bạn phải bao gồm
--no-sandboxvà--disable-setuid-sandbox. Nếu không có chúng, container sẽ chặn tiến trình này.Mermaid Theming Nếu bạn muốn sử dụng màu sắc tùy chỉnh, đừng dùng các chủ đề "dark" hoặc "forest" có sẵn. Những chủ đề đó sẽ ghi đè lên các thiết lập của bạn. Hãy sử dụng chủ đề "base". Đây là cách duy nhất để đảm bảo bảng màu tùy chỉnh của bạn hoạt động một cách đáng tin cậy.
Matplotlib Backgrounds Việc làm cho biểu đồ khớp với nền slide khá phức tạp. Bạn phải thực hiện ba việc:
- Gọi
matplotlib.use("Agg")trước khi bạn importpyplot. - Thiết lập
facecolorcho cảfigurevàaxes. - Sử dụng
bbox_inches="tight"khi lưu tệp để loại bỏ các viền trắng.
- Reliability and Failsafes Một sơ đồ bị thiếu không nên làm hỏng toàn bộ quá trình build video của bạn. Tôi đã xây dựng một khung mã (scaffold) để bắt các lỗi. Nếu việc render thất bại, pipeline sẽ chỉ hiển thị một placeholder "visual unavailable". Video vẫn sẽ hoàn tất. Điều này cho phép bạn xem lại nội dung ngay cả khi một phần bị lỗi.
The Trade-off
Việc render trước sẽ làm tăng thời gian. Mỗi sơ đồ Mermaid mất khoảng 2 đến 4 giây để render. Đối với một video có 20 phân đoạn, việc này sẽ cộng thêm khoảng 20 giây vào tổng thời gian build. Với nhu cầu của tôi, đây là một sự đánh đổi hợp lý để có được một hệ thống ổn định.