ஒரு CI வீடியோ பைப்லைனுக்கான (pipeline) வரைபட ஸ்லைடுகளை உருவாக்கும்போது நான் கற்றுக்கொண்டவை
சமீபத்தில் எனது தானியங்கி YouTube வீடியோ பைப்லைனில் வரைபடங்களையும் (diagrams) விளக்கப்படங்களையும் (charts) சேர்த்துள்ளேன்.
இதிலிருந்து நான் கற்றுக்கொண்ட முக்கிய விஷயம் எளிமையானது: அனைத்தையும் முதலில் ஒரு PNG கோப்பாக முன்கூட்டியே ரெண்டர் (pre-render) செய்துவிட வேண்டும்.
உங்கள் வீடியோ என்ஜின் அல்லது ffmpeg மூலம் காட்சிகளை (visuals) உருவாக்க முயற்சிக்காதீர்கள். அதற்குப் பதிலாக, பகிரப்பட்ட PNG கைமாற்றைப் (shared PNG handoff) பயன்படுத்துங்கள். இது உங்கள் பைப்லைனின் ஒவ்வொரு பகுதியையும் சோதனை செய்யவும் (testable) மற்றும் எளிதாக மாற்றவும் உதவும்.
நான் இதை எவ்வாறு உருவாக்கினேன் மற்றும் என்ன கற்றுக்கொண்டேன் என்பது இதோ.
கட்டமைப்பு (The Architecture)
எனது பைப்லைன் இரண்டு ஹோஸ்ட் (host) அமைப்பைப் பயன்படுத்துகிறது. ஒரு ஹோஸ்ட் காட்சிகள் மற்றும் ஆடியோவை கையாள்கிறது. மற்றொரு ஹோஸ்ட் அனைத்தையும் ஒரு வீடியோவாக இணைக்க ffmpeg ஐப் பயன்படுத்துகிறது.
ffmpeg ஆல் JavaScript ஐ இயக்கவோ அல்லது உலாவியை (browser) அழைக்கவோ முடியாது என்பதால், பல்வேறு கருவிகளுக்கு இடையிலான இடைவெளியை நான் சரிசெய்ய வேண்டியிருந்தது:
• Mermaid (flowcharts க்காக) Puppeteer மற்றும் Chromium மூலம் இயங்குகிறது. • Matplotlib (charts க்காக) Python மூலம் இயங்குகிறது. • Pillow (ஸ்லைடுகளுக்காக) நேரடியாகப் படங்களின் மீது வரைகிறது.
இந்த கருவிகள் நேரடியாக ஒன்றோடொன்று தொடர்பு கொள்ள முடியாது என்பதால், நான் ஒரு முறையைப் பயன்படுத்துகிறேன்: ஒரு PNG ஆக ரெண்டர் செய்து, பின்னர் அந்த PNG ஐ Pillow கேன்வாஸில் (canvas) ஒட்ட வேண்டும். இரண்டு பாதைகளை விட ஒரு குறியீட்டுப் பாதை (code path) சிறந்தது.
முக்கிய தொழில்நுட்பப் பாடங்கள் (Key Technical Lessons)
1. Chromium ஐத் தயார் செய்தல் (Configuring Chromium)
GitHub Actions இல் இயக்கும்போது, நீங்கள் குறிப்பிட்ட ஃபிளாக்குகளை (flags) பயன்படுத்தவில்லை என்றால் Chromium தோல்வியடையும். நீங்கள் கண்டிப்பாக --no-sandbox மற்றும் --disable-setuid-sandbox ஆகியவற்றைச் சேர்க்க வேண்டும். இவை இல்லையென்றால், கண்டெய்னர் (container) அந்தச் செயல்பாட்டைத் தடுக்கும்.
2. Mermaid தீமிங் (Mermaid Theming)
உங்களுக்குத் தனிப்பயன் வண்ணங்கள் (custom colors) வேண்டுமென்றால், உள்ளமைக்கப்பட்ட (built-in) dark அல்லது forest தீம்களைப் பயன்படுத்த வேண்டாம். அந்தத் தீம்கள் உங்கள் அமைப்புகளை மாற்றியமைத்துவிடும் (override). "base" தீமைப் பயன்படுத்துங்கள். உங்கள் தனிப்பயன் வண்ணத் தொகுப்பு (custom palette) நம்பகத்தன்மையுடன் செயல்படுவதை உறுதி செய்ய இதுவே ஒரே வழி.
3. Matplotlib பின்னணிகள் (Matplotlib Backgrounds)
விளக்கப்படங்களை உங்கள் ஸ்லைடு பின்னணிக்கு ஏற்ப அமைப்பது கடினமானது. நீங்கள் மூன்று விஷயங்களைச் செய்ய வேண்டும்:
pyplotஐ இறக்குமதி செய்வதற்கு (import) முன்matplotlib.use("Agg")ஐ அழைக்க வேண்டும்.figureமற்றும்axesஆகிய இரண்டிற்கும்facecolorஐ அமைக்க வேண்டும்.- வெள்ளை எல்லைகளை (white borders) நீக்க கோப்பைச் சேமிக்கும்போது
bbox_inches="tight"ஐப் பயன்படுத்தவும்.
4. நம்பகத்தன்மை மற்றும் பாதுகாப்பு வழிமுறைகள் (Reliability and Failsafes)
ஒரு வரைபடம் விடுபட்டாலும் அது உங்கள் முழு வீடியோ உருவாக்கத்தையும் (video build) பாதிக்கக்கூடாது. பிழைகளைக் கண்டறியும் ஒரு கட்டமைப்பை (scaffold) நான் உருவாக்கியுள்ளேன். ஒரு ரெண்டர் தோல்வியடைந்தால், பைப்லைன் வெறுமனே "visual unavailable" என்ற பிளேஸ்ஹோல்டரை (placeholder) காட்டும். வீடியோ தொடர்ந்து முடியும். இதன் மூலம் ஒரு பகுதி தோல்வியடைந்தாலும் உங்களால் உள்ளடக்கத்தைப் பார்க்க முடியும்.
சலுகை மற்றும் இழப்பு (The Trade-off)
முன்கூட்டியே ரெண்டர் செய்வது நேரத்தைச் சேர்க்கிறது. ஒவ்வொரு Mermaid வரைபடமும் ரெண்டர் செய்ய சுமார் 2 முதல் 4 வினாடிகள் ஆகும். 20 பகுதிகளைக் கொண்ட ஒரு வீடியோவிற்கு, இது மொத்த உருவாக்க நேரத்திற்கு சுமார் 20 வினாடிகளைச் சேர்க்கும். எனது தேவைகளுக்கு, ஒரு நிலையான அமைப்பிற்காக (stable system) இது ஒரு நியாயமான விலையாகும்.