Чого я навчився, створюючи слайди з діаграмами для CI-пайплайну відео
Нещодавно я додав діаграми та графіки до свого автоматизованого пайплайну для створення відео на YouTube.
Головний висновок простий: спочатку попередньо рендеритьте все у PNG-файл.
Не намагайтеся генерувати візуальні елементи всередині вашого відеорушія або через ffmpeg. Замість цього використовуйте спільну передачу PNG-файлів. Це робить кожну частину вашого пайплайну тестованою та легко замінюваною.
Ось як я це побудував і чого навчився.
Архітектура
Мій пайплайн використовує систему з двох хостів. Один хост відповідає за візуал та аудіо. Інший хост використовує ffmpeg, щоб об'єднати все у відео.
Оскільки ffmpeg не може запускати JavaScript або викликати браузер, мені довелося вирішувати проблему взаємодії між різними інструментами:
• Mermaid (для блок-схем) працює через Puppeteer та Chromium. • Matplotlib (для графіків) працює через Python. • Pillow (для слайдів) малює безпосередньо на зображеннях.
Оскільки ці інструменти не можуть спілкуватися між собою напряму, я використовую єдиний паттерн: рендеринг у PNG, а потім накладання цього PNG на полотно Pillow. Один шлях коду кращий за два.
Ключові технічні уроки
Налаштування Chromium Під час запуску в GitHub Actions Chromium видасть помилку, якщо не використовувати специфічні прапорці. Ви повинні додати
--no-sandboxта--disable-setuid-sandbox. Без них контейнер заблокує процес.Тематизація Mermaid Якщо ви хочете використовувати власні кольори, не використовуйте вбудовані теми dark або forest. Ці теми перекривають ваші налаштування. Використовуйте тему "base". Це єдиний спосіб гарантувати надійну роботу вашої кастомної палітри.
Фони Matplotlib Зробити так, щоб графіки відповідали фону вашого слайда, непросто. Ви повинні зробити три речі:
- Викликати
matplotlib.use("Agg")перед імпортомpyplot. - Встановити
facecolorяк для фігури (figure), так і для осей (axes). - Використовувати
bbox_inches="tight"під час збереження файлу, щоб видалити білі поля.
- Надійність та запобіжники Відсутність діаграми не повинна переривати весь процес створення відео. Я побудував каркас, який перехоплює помилки. Якщо рендеринг не вдався, пайплайн просто показує заглушку "visual unavailable". Відео все одно завершується. Це дозволяє переглянути контент, навіть якщо одна частина дала збій.
Компроміс
Попередній рендеринг додає часу. Рендеринг кожної діаграми Mermaid займає приблизно від 2 до 4 секунд. Для 20-сегментного відео це додає близько 20 секунд до загального часу збірки. Для моїх потреб це прийнятний компроміс заради стабільної системи.