ఒక CI వీడియో పైప్లైన్ కోసం డయాగ్రామ్ స్లైడ్లను రూపొందించడంలో నేను నేర్చుకున్న విషయాలు
నేను ఇటీవల నా ఆటోమేటెడ్ YouTube వీడియో పైప్లైన్కు డయాగ్రామ్లు మరియు చార్ట్లను జోడించాను.
దీని నుండి నేను గ్రహించిన ముఖ్యమైన విషయం చాలా సరళమైనది: ముందుగా ప్రతిదీ ఒక PNG ఫైల్గా ప్రీ-రెండర్ చేయండి.
మీ వీడియో ఇంజిన్ లోపల లేదా ffmpeg ద్వారా విజువల్స్ను రూపొందించడానికి ప్రయత్నించకండి. దానికి బదులుగా ఒక షేర్డ్ PNG హ్యాండ్ఆఫ్ (shared PNG handoff) పద్ధతిని ఉపయోగించండి. ఇది మీ పైప్లైన్లోని ప్రతి భాగాన్ని పరీక్షించడానికి మరియు సులభంగా మార్చడానికి వీలు కల్పిస్తుంది.
నేను దీనిని ఎలా నిర్మించాను మరియు నేను ఏమి నేర్చుకున్నానో ఇక్కడ ఉంది.
ఆర్కిటెక్చర్
నా పైప్లైన్ రెండు-హోస్ట్ (two-host) వ్యవస్థను ఉపయోగిస్తుంది. ఒక హోస్ట్ విజువల్స్ మరియు ఆడియోను నిర్వహిస్తుంది. మరొక హోస్ట్ ffmpeg ఉపయోగించి అన్నింటినీ కలిపి ఒక వీడియోగా మారుస్తుంది.
ffmpeg ద్వారా JavaScript రన్ చేయలేము లేదా బ్రౌజర్ను పిలవలేము కాబట్టి, వివిధ సాధనాల మధ్య ఉన్న అంతరాన్ని నేను పరిష్కరించాల్సి వచ్చింది:
• Mermaid (ఫ్లోచార్ట్ల కోసం) Puppeteer మరియు Chromium ద్వారా రన్ అవుతుంది. • Matplotlib (చార్ట్ల కోసం) Python ద్వారా రన్ అవుతుంది. • Pillow (స్లైడ్ల కోసం) నేరుగా చిత్రాలపై గీస్తుంది.
ఈ సాధనాలు నేరుగా ఒకదానితో ఒకటి సంభాషించలేవు కాబట్టి, నేను ఒకే పద్ధతిని ఉపయోగిస్తాను: ముందుగా PNG కి రెండర్ చేసి, ఆ తర్వాత ఆ PNGని Pillow కాన్వాస్పై పేస్ట్ చేయడం. రెండు కోడ్ పాత్ల కంటే ఒకే కోడ్ పాత్ ఉత్తమం.
ముఖ్యమైన సాంకేతిక పాఠాలు
1. Chromium కాన్ఫిగరేషన్
GitHub Actionsలో రన్ చేస్తున్నప్పుడు, మీరు నిర్దిష్ట ఫ్లాగ్లను ఉపయోగించకపోతే Chromium విఫలమవుతుంది. మీరు తప్పనిసరిగా --no-sandbox మరియు --disable-setuid-sandboxలను చేర్చాలి. ఇవి లేకపోతే, కంటైనర్ ఆ ప్రాసెస్ను బ్లాక్ చేస్తుంది.
2. Mermaid థీమింగ్
మీకు కస్టమ్ రంగులు కావాలంటే, బిల్ట్-ఇన్ డార్క్ లేదా ఫారెస్ట్ థీమ్లను ఉపయోగించకండి. ఆ థీమ్లు మీ సెట్టింగ్లను ఓవర్రైడ్ చేస్తాయి. "base" థీమ్ను ఉపయోగించండి. మీ కస్టమ్ ప్యాలెట్ నమ్మదగినదిగా పనిచేస్తుందని నిర్ధారించుకోవడానికి ఇదే ఏకైక మార్గం.
3. Matplotlib బ్యాక్గ్రౌండ్లు
చార్ట్లు మీ స్లైడ్ బ్యాక్గ్రౌండ్తో సరిపోలేలా చేయడం కష్టమైన పని. మీరు మూడు పనులు చేయాలి:
pyplotని ఇంపోర్ట్ చేయడానికి ముందేmatplotlib.use("Agg")ని కాల్ చేయండి.- ఫీగర్ (figure) మరియు యాక్సిస్ (axes) రెండింటికీ
facecolorని సెట్ చేయండి. - తెల్లటి బోర్డర్లను తొలగించడానికి ఫైల్ను సేవ్ చేసేటప్పుడు
bbox_inches="tight"ని ఉపయోగించండి.
4. విశ్వసనీయత మరియు ఫెయిల్-సేఫ్స్
ఒక డయాగ్రామ్ లేకపోయినా మీ మొత్తం వీడియో బిల్డ్ విఫలం కాకూడదు. లోపాలను గుర్తించేలా నేను ఒక స్క్యాఫోల్డ్ (scaffold)ను నిర్మించాను. ఒకవేళ రెండరింగ్ విఫలమైతే, పైప్లైన్ కేవలం "visual unavailable" ప్లేస్హోల్డర్ను చూపుతుంది. వీడియో మాత్రం పూర్తవుతుంది. దీనివల్ల ఒక భాగం విఫలమైనప్పటికీ మీరు కంటెంట్ను సమీక్షించుకోవచ్చు.
లాభనష్టాల సమతుల్యత
ప్రీ-రెండరింగ్ వల్ల సమయం పెరుగుతుంది. ప్రతి Mermaid డయాగ్రామ్ రెండర్ కావడానికి సుమారు 2 నుండి 4 సెకన్ల సమయం పడుతుంది. 20 సెగ్మెంట్లు ఉన్న వీడియో కోసం, ఇది మొత్తం బిల్డ్ సమయానికి సుమారు 20 సెకన్లను జోడిస్తుంది. నా అవసరాల దృష్ట్యా, ఒక స్థిరమైన వ్యవస్థ కోసం ఇది సరైన లాభనష్టాల సమతుల్యత.