Czego nauczyłem się, budując slajdy z diagramami dla pipeline'u wideo CI

Niedawno dodałem diagramy i wykresy do mojego zautomatyzowanego pipeline'u wideo na YouTube.

Główny wniosek jest prosty: najpierw wyrenderuj wszystko do pliku PNG.

Nie próbuj generować wizualizacji wewnątrz silnika wideo ani za pomocą ffmpeg. Zamiast tego użyj wspólnego przekazywania plików PNG. Dzięki temu każda część Twojego pipeline'u będzie możliwa do przetestowania i łatwa do wymiany.

Oto jak to zbudowałem i czego się nauczyłem.

Architektura

Mój pipeline korzysta z systemu dwu-hostowego. Jeden host obsługuje warstwę wizualną i dźwięk. Drugi host używa ffmpeg, aby połączyć wszystko w wideo.

Ponieważ ffmpeg nie potrafi uruchamiać JavaScriptu ani wywoływać przeglądarki, musiałem rozwiązać problem luki między różnymi narzędziami:

• Mermaid (do schematów blokowych) działa przez Puppeteer i Chromium. • Matplotlib (do wykresów) działa przez Python. • Pillow (do slajdów) rysuje bezpośrednio na obrazach.

Ponieważ te narzędzia nie mogą komunikować się ze sobą bezpośrednio, stosuję jeden wzorzec: renderowanie do PNG, a następnie naklejanie tego PNG na płótno Pillow. Jedna ścieżka kodu jest lepsza niż dwie.

Kluczowe lekcje techniczne

  1. Konfiguracja Chromium Podczas uruchamiania w GitHub Actions, Chromium zakończy się błędem, jeśli nie użyjesz specyficznych flag. Musisz uwzględnić --no-sandbox oraz --disable-setuid-sandbox. Bez nich kontener zablokuje proces.

  2. Motywy Mermaid Jeśli chcesz użyć własnych kolorów, nie korzystaj z wbudowanych motywów dark lub forest. Te motywy nadpisują Twoje ustawienia. Użyj motywu „base”. To jedyny sposób, aby upewnić się, że Twoja własna paleta kolorów będzie działać niezawodnie.

  3. Tła w Matplotlib Dopasowanie wykresów do tła slajdu jest trudne. Musisz zrobić trzy rzeczy:

  • Wywołaj matplotlib.use("Agg") przed zaimportowaniem pyplot.
  • Ustaw facecolor zarówno dla figury, jak i osi.
  • Użyj bbox_inches="tight" podczas zapisywania pliku, aby usunąć białe obramowania.
  1. Niezawodność i zabezpieczenia Brakujący diagram nie powinien przerywać całego procesu budowania wideo. Zbudowałem szkielet, który wyłapuje błędy. Jeśli renderowanie się nie powiedzie, pipeline po prostu wyświetla placeholder „visual unavailable”. Wideo i tak zostaje ukończone. Pozwala to na sprawdzenie treści, nawet jeśli jedna część zawiedzie.

Kompromis

Wstępne renderowanie wydłuża czas pracy. Wyrenderowanie każdego diagramu Mermaid zajmuje około 2 do 4 sekund. W przypadku wideo składającego się z 20 segmentów, dodaje to około 20 sekund do całkowitego czasu budowania. W moich potrzebach jest to uczciwy kompromis w zamian za stabilny system.

Źródło: https://dev.to/morinaga/what-i-learned-adding-diagram-and-chart-slides-to-a-ci-rendered-youtube-pipeline-3bnl