Чему я научился, создавая слайды с диаграммами для CI-видео-пайплайна

Недавно я добавил диаграммы и графики в свой автоматизированный пайплайн для создания YouTube-видео.

Главный вывод прост: сначала предварительно рендерите всё в PNG-файл.

Не пытайтесь генерировать визуал внутри вашего видеодвижка или через ffmpeg. Вместо этого используйте передачу через общий PNG-файл. Это делает каждую часть вашего пайплайна тестируемой и легко заменяемой.

Вот как я это реализовал и чему научился.

Архитектура

Мой пайплайн использует систему из двух хостов. Один хост отвечает за визуал и аудио. Другой хост использует ffmpeg, чтобы собрать всё воедино в видео.

Поскольку ffmpeg не может запускать JavaScript или вызывать браузер, мне пришлось устранить разрыв между различными инструментами:

• Mermaid (для блок-схем) работает через Puppeteer и Chromium. • Matplotlib (для графиков) работает через Python. • Pillow (для слайдов) рисует непосредственно на изображениях.

Так как эти инструменты не могут взаимодействовать друг с другом напрямую, я использую единый паттерн: рендеринг в PNG, а затем наложение этого PNG на холст Pillow. Один путь выполнения кода лучше, чем два.

Ключевые технические уроки

  1. Настройка Chromium При запуске в GitHub Actions Chromium выдаст ошибку, если не использовать специфические флаги. Вы должны добавить --no-sandbox и --disable-setuid-sandbox. Без них контейнер заблокирует процесс.

  2. Темы Mermaid Если вы хотите использовать собственные цвета, не используйте встроенные темы dark или forest. Эти темы переопределяют ваши настройки. Используйте тему "base". Это единственный способ гарантировать надежную работу вашей кастомной палитры.

  3. Фон в Matplotlib Сделать так, чтобы графики соответствовали фону вашего слайда, довольно сложно. Вам нужно сделать три вещи:

  • Вызвать matplotlib.use("Agg") перед тем, как импортировать pyplot.
  • Установить facecolor как для figure, так и для axes.
  • Использовать bbox_inches="tight" при сохранении файла, чтобы убрать белые поля.
  1. Надежность и отказоустойчивость Отсутствие диаграммы не должно приводить к сбою всей сборки видео. Я построил каркас, который перехватывает ошибки. Если рендеринг не удался, пайплайн просто отображает плейсхолдер "visual unavailable". Видео всё равно достраивается до конца. Это позволяет вам просматривать контент, даже если одна из частей дала сбой.

Компромисс

Предварительный рендеринг увеличивает время выполнения. Рендеринг каждой диаграммы Mermaid занимает от 2 до 4 секунд. Для 20-сегментного видео это добавляет около 20 секунд к общему времени сборки. Для моих задач это оправданный компромисс ради стабильности системы.

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