Cosa ho imparato costruendo slide con diagrammi per una pipeline video CI

Recentemente ho aggiunto diagrammi e grafici alla mia pipeline automatizzata per video YouTube.

La lezione principale è semplice: pre-renderizza tutto in un file PNG prima di iniziare.

Non cercare di generare elementi visivi all'interno del tuo motore video o tramite ffmpeg. Usa invece un passaggio tramite PNG condiviso. Questo rende ogni parte della tua pipeline testabile e facile da sostituire.

Ecco come l'ho costruita e cosa ho imparato.

L'architettura

La mia pipeline utilizza un sistema a due host. Un host gestisce la parte visiva e l'audio. L'altro host utilizza ffmpeg per combinare tutto in un video.

Poiché ffmpeg non può eseguire JavaScript o chiamare un browser, ho dovuto colmare il divario tra i diversi strumenti:

• Mermaid (per i diagrammi di flusso) viene eseguito tramite Puppeteer e Chromium. • Matplotlib (per i grafici) viene eseguito tramite Python. • Pillow (per le slide) disegna direttamente sulle immagini.

Poiché questi strumenti non possono comunicare direttamente tra loro, utilizzo un unico pattern: renderizza in un PNG, poi incolla quel PNG su una tela Pillow. Un unico percorso di codice è meglio di due.

Lezioni tecniche chiave

  1. Configurazione di Chromium Quando viene eseguito in GitHub Actions, Chromium fallirà se non utilizzi dei flag specifici. Devi includere --no-sandbox e --disable-setuid-sandbox. Senza questi, il container bloccherà il processo.

  2. Tematizzazione di Mermaid Se desideri colori personalizzati, non utilizzare i temi predefiniti "dark" o "forest". Quei temi sovrascrivono le tue impostazioni. Usa il tema "base". È l'unico modo per garantire che la tua palette personalizzata funzioni in modo affidabile.

  3. Sfondi di Matplotlib Far coincidere i grafici con lo sfondo della slide è complicato. Devi fare tre cose:

  • Chiama matplotlib.use("Agg") prima di importare pyplot.
  • Imposta il facecolor sia per la figura che per gli assi.
  • Usa bbox_inches="tight" quando salvi il file per rimuovere i bordi bianchi.
  1. Affidabilità e misure di sicurezza Un diagramma mancante non deve interrompere l'intera generazione del video. Ho costruito uno scaffold che intercetta gli errori. Se un rendering fallisce, la pipeline mostra semplicemente un segnaposto "visual unavailable". Il video viene comunque completato. Questo ti permette di revisionare il contenuto anche se una parte fallisce.

Il compromesso

Il pre-rendering aggiunge tempo. Ogni diagramma Mermaid richiede circa 2-4 secondi per il rendering. Per un video di 20 segmenti, questo aggiunge circa 20 secondi al tempo totale di build. Per le mie esigenze, è un compromesso accettabile per avere un sistema stabile.

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