CI ವಿಡಿಯೋ ಪೈಪ್‌ಲೈನ್‌ಗಾಗಿ ಡೈಗ್ರಾಮ್ ಸ್ಲೈಡ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವಾಗ ನಾನು ಕಲಿತದ್ದು

ನಾನು ಇತ್ತೀಚೆಗೆ ನನ್ನ ಸ್ವಯಂಚಾಲಿತ (automated) YouTube ವಿಡಿಯೋ ಪೈಪ್‌ಲೈನ್‌ಗೆ ಡೈಗ್ರಾಮ್‌ಗಳು ಮತ್ತು ಚಾರ್ಟ್‌ಗಳನ್ನು ಸೇರಿಸಿದ್ದೇನೆ.

ಇದರ ಮುಖ್ಯ ಅಂಶ ಸರಳವಾಗಿದೆ: ಎಲ್ಲವನ್ನೂ ಮೊದಲು PNG ಫೈಲ್‌ಗೆ ಪ್ರಿ-ರೆಂಡರ್ (pre-render) ಮಾಡಿ.

ನಿಮ್ಮ ವಿಡಿಯೋ ಎಂಜಿನ್ ಒಳಗೆ ಅಥವಾ ffmpeg ಮೂಲಕ ದೃಶ್ಯಗಳನ್ನು (visuals) ರಚಿಸಲು ಪ್ರಯತ್ನಿಸಬೇಡಿ. ಬದಲಾಗಿ, ಹಂಚಿಕೆಯ PNG ಹ್ಯಾಂಡ್‌ಆಫ್ (shared PNG handoff) ಬಳಸಿ. ಇದು ನಿಮ್ಮ ಪೈಪ್‌ಲೈನ್‌ನ ಪ್ರತಿಯೊಂದು ಭಾಗವನ್ನು ಪರೀಕ್ಷಿಸಲು ಮತ್ತು ಸುಲಭವಾಗಿ ಬದಲಾಯಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ನಾನು ಇದನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸಿದೆ ಮತ್ತು ನಾನು ಏನು ಕಲಿತೆ ಎಂಬುದು ಇಲ್ಲಿದೆ.

ಆರ್ಕಿಟೆಕ್ಚರ್ (The Architecture)

ನನ್ನ ಪೈಪ್‌ಲೈನ್ ಎರಡು-ಹೋಸ್ಟ್ (two-host) ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸುತ್ತದೆ. ಒಂದು ಹೋಸ್ಟ್ ದೃಶ್ಯಗಳು ಮತ್ತು ಆಡಿಯೋವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಇನ್ನೊಂದು ಹೋಸ್ಟ್ ಎಲ್ಲವನ್ನೂ ವಿಡಿಯೋ ಆಗಿ ಸಂಯೋಜಿಸಲು ffmpeg ಅನ್ನು ಬಳಸುತ್ತದೆ.

ffmpeg ಗೆ JavaScript ಅನ್ನು ರನ್ ಮಾಡಲು ಅಥವಾ ಬ್ರೌಸರ್ ಅನ್ನು ಕರೆಯಲು ಸಾಧ್ಯವಿಲ್ಲದ ಕಾರಣ, ವಿವಿಧ ಪರಿಕರಗಳ (tools) ನಡುವಿನ ಅಂತರವನ್ನು ನಾನು ಪರಿಹರಿಸಬೇಕಾಯಿತು:

• Mermaid (ಫ್ಲೋಚಾರ್ಟ್‌ಗಳಿಗಾಗಿ) Puppeteer ಮತ್ತು Chromium ಮೂಲಕ ರನ್ ಆಗುತ್ತದೆ. • Matplotlib (ಚಾರ್ಟ್‌ಗಳಿಗಾಗಿ) Python ಮೂಲಕ ರನ್ ಆಗುತ್ತದೆ. • Pillow (ಸ್ಲೈಡ್‌ಗಳಿಗಾಗಿ) ನೇರವಾಗಿ ಚಿತ್ರಗಳ ಮೇಲೆ ಚಿತ್ರಿಸುತ್ತದೆ.

ಈ ಪರಿಕರಗಳು ಒಂದಕ್ಕೊಂದು ನೇರವಾಗಿ ಸಂವಹನ ನಡೆಸಲು ಸಾಧ್ಯವಿಲ್ಲದ ಕಾರಣ, ನಾನು ಒಂದು ಏಕೈಕ ಮಾದರಿಯನ್ನು (pattern) ಬಳಸುತ್ತೇನೆ: ಮೊದಲು PNG ಗೆ ರೆಂಡರ್ ಮಾಡಿ, ನಂತರ ಆ PNG ಅನ್ನು Pillow ಕ್ಯಾನ್ವಾಸ್ ಮೇಲೆ ಪೇಸ್ಟ್ ಮಾಡಿ. ಎರಡು ಕೋಡ್ ಪಥಗಳಿಗಿಂತ ಒಂದು ಕೋಡ್ ಪಥವೇ ಉತ್ತಮ.

ಪ್ರಮುಖ ತಾಂತ್ರಿಕ ಪಾಠಗಳು (Key Technical Lessons)

1. Chromium ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದು

GitHub Actions ನಲ್ಲಿ ರನ್ ಮಾಡುವಾಗ, ನೀವು ನಿರ್ದಿಷ್ಟ ಫ್ಲಾಗ್‌ಗಳನ್ನು (flags) ಬಳಸದಿದ್ದರೆ Chromium ವಿಫಲವಾಗುತ್ತದೆ. ನೀವು --no-sandbox ಮತ್ತು --disable-setuid-sandbox ಅನ್ನು ಒಳಗೊಂಡಿರಲೇಬೇಕು. ಇವುಗಳಿಲ್ಲದೆ, ಕಂಟೇನರ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ತಡೆಯುತ್ತದೆ.

2. Mermaid ಥೀಮಿಂಗ್

ನಿಮಗೆ ಕಸ್ಟಮ್ ಬಣ್ಣಗಳು ಬೇಕಿದ್ದರೆ, ಬಿಲ್ಟ್-ಇನ್ (built-in) ಡಾರ್ಕ್ ಅಥವಾ ಫಾರೆಸ್ಟ್ ಥೀಮ್‌ಗಳನ್ನು ಬಳಸಬೇಡಿ. ಆ ಥೀಮ್‌ಗಳು ನಿಮ್ಮ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತವೆ (override). "base" ಥೀಮ್ ಬಳಸಿ. ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ಯಾಲೆಟ್ (palette) ವಿಶ್ವಾಸಾರ್ಹವಾಗಿ ಕೆಲಸ ಮಾಡುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಇದೇ ಏಕೈಕ ಮಾರ್ಗವಾಗಿದೆ.

3. Matplotlib ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್‌ಗಳು

ಚಾರ್ಟ್‌ಗಳು ನಿಮ್ಮ ಸ್ಲೈಡ್ ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್‌ನೊಂದಿಗೆ ಹೊಂದಿಕೆಯಾಗುವಂತೆ ಮಾಡುವುದು ಕಷ್ಟಕರವಾಗಿದೆ. ನೀವು ಮೂರು ಕೆಲಸಗಳನ್ನು ಮಾಡಲೇಬೇಕು:

  • pyplot ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡುವ ಮೊದಲು matplotlib.use("Agg") ಅನ್ನು ಕರೆಯಿರಿ.
  • ಫಿಗರ್ (figure) ಮತ್ತು ಆಕ್ಸಿಸ್ (axes) ಎರಡಕ್ಕೂ facecolor ಅನ್ನು ಸೆಟ್ ಮಾಡಿ.
  • ಬಿಳಿ ಬಾರ್ಡರ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಫೈಲ್ ಸೇವ್ ಮಾಡುವಾಗ bbox_inches="tight" ಬಳಸಿ.

4. ವಿಶ್ವಾಸಾರ್ಹತೆ ಮತ್ತು ಫೇಲ್‌ಸೇಫ್‌ಗಳು (Reliability and Failsafes)

ಒಂದು ಡೈಗ್ರಾಮ್ ಇಲ್ಲದಿರುವುದು ನಿಮ್ಮ ಇಡೀ ವಿಡಿಯೋ ಬಿಲ್ಡ್ ಅನ್ನು ಹಾಳುಮಾಡಬಾರದು. ದೋಷಗಳನ್ನು (errors) ಹಿಡಿಯಲು ನಾನು ಒಂದು ಸ್ಕ್ಯಾಫೋಲ್ಡ್ (scaffold) ನಿರ್ಮಿಸಿದ್ದೇನೆ. ಒಂದು ವೇಳೆ ರೆಂಡರ್ ವಿಫಲವಾದರೆ, ಪೈಪ್‌ಲೈನ್ ಕೇವಲ "visual unavailable" ಎಂಬ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಅನ್ನು ತೋರಿಸುತ್ತದೆ. ವಿಡಿಯೋ ಆದರೂ ಪೂರ್ಣಗೊಳ್ಳುತ್ತದೆ. ಇದರಿಂದ ಒಂದು ಭಾಗ ವಿಫಲವಾದರೂ ನೀವು ವಿಷಯವನ್ನು ಪರಿಶೀಲಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.

ವಹಿವಾಟು (The Trade-off)

ಪ್ರಿ-ರೆಂಡರಿಂಗ್ ಸಮಯವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ. ಪ್ರತಿ 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