ഒരു CI വീഡിയോ പൈപ്പ്‌ലൈനായി ഡയഗ്രം സ്ലൈഡുകൾ നിർമ്മിച്ചപ്പോൾ ഞാൻ പഠിച്ച കാര്യങ്ങൾ

എന്റെ ഓട്ടോമേറ്റഡ് യൂട്യൂബ് വീഡിയോ പൈപ്പ്‌ലൈനിൽ ഞാൻ അടുത്തിടെ ഡയഗ്രങ്ങളും ചാർട്ടുകളും ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.

ഇതിൽ നിന്നുള്ള പ്രധാന പാഠം ലളിതമാണ്: എല്ലാം ആദ്യം ഒരു PNG ഫയലായി പ്രീ-റെൻഡർ ചെയ്യുക.

നിങ്ങളുടെ വീഡിയോ എഞ്ചിനുള്ളിലോ ffmpeg വഴിയോ വിഷ്വലുകൾ നിർമ്മിക്കാൻ ശ്രമിക്കരുത്. പകരം ഒരു ഷെയർഡ് PNG ഹാൻഡ്‌ഓഫ് (shared PNG handoff) ഉപയോഗിക്കുക. ഇത് നിങ്ങളുടെ പൈപ്പ്‌ലൈനിലെ ഓരോ ഭാഗവും പരിശോധിക്കാനും എളുപ്പത്തിൽ മാറ്റം വരുത്താനും സഹായിക്കുന്നു.

ഞാൻ ഇത് എങ്ങനെയാണ് നിർമ്മിച്ചതെന്നും അതിൽ നിന്ന് എന്തൊക്കെ പഠിച്ചുവെന്നും താഴെ നൽകുന്നു.

The Architecture

എന്റെ പൈപ്പ്‌ലൈൻ ഒരു ടു-ഹോസ്റ്റ് (two-host) സിസ്റ്റമാണ് ഉപയോഗിക്കുന്നത്. ഒരു ഹോസ്റ്റ് വിഷ്വലുകളും ഓഡിയോയും കൈകാര്യം ചെയ്യുന്നു. മറ്റേ ഹോസ്റ്റ് ffmpeg ഉപയോഗിച്ച് ഇവയെല്ലാം ചേർത്ത് ഒരു വീഡിയോയാക്കി മാറ്റുന്നു.

ffmpeg-ന് JavaScript പ്രവർത്തിപ്പിക്കാനോ ഒരു ബ്രൗസർ വിളിക്കാനോ കഴിയില്ല എന്നതുകൊണ്ട്, വിവിധ ടൂളുകൾ തമ്മിലുള്ള വിടവ് നികത്തേണ്ടി വന്നു:

• Mermaid (ഫ്ലോചാർട്ടുകൾക്കായി) Puppeteer, Chromium എന്നിവ വഴി പ്രവർത്തിക്കുന്നു. • Matplotlib (ചാർട്ടുകൾക്കായി) Python വഴി പ്രവർത്തിക്കുന്നു. • Pillow (സ്ലൈഡുകൾക്കായി) നേരിട്ട് ചിത്രങ്ങളിൽ വരയ്ക്കുന്നു.

ഈ ടൂളുകൾക്ക് നേരിട്ട് പരസ്പരം ആശയവിനിമയം നടത്താൻ കഴിയില്ല എന്നതിനാൽ, ഞാൻ ഒരു രീതിയാണ് പിന്തുടരുന്നത്: ആദ്യം ഒരു PNG ആയി റെൻഡർ ചെയ്യുക, തുടർന്ന് ആ PNG ഒരു Pillow കാൻവാസിൽ പേസ്റ്റ് ചെയ്യുക. രണ്ട് കോഡ് പാത്തുകളേക്കാൾ നല്ലത് ഒരൊറ്റ പാത്ത് ഉപയോഗിക്കുന്നതാണ്.

Key Technical Lessons

  1. Configuring Chromium GitHub Actions-ൽ പ്രവർത്തിപ്പിക്കുമ്പോൾ, പ്രത്യേക ഫ്ലാഗുകൾ (flags) ഉപയോഗിച്ചില്ലെങ്കിൽ Chromium പരാജയപ്പെടും. നിങ്ങൾ നിർബന്ധമായും --no-sandbox, --disable-setuid-sandbox എന്നിവ ഉൾപ്പെടുത്തണം. ഇവ ഇല്ലെങ്കിൽ കൺടെയ്‌നർ പ്രോസസ്സ് തടയും.

  2. Mermaid Theming നിങ്ങൾക്ക് ഇഷ്ടാനുസൃത നിറങ്ങൾ (custom colors) വേണമെന്നുണ്ടെങ്കിൽ, ബിൽറ്റ്-ഇൻ ആയ dark അല്ലെങ്കിൽ forest തീമുകൾ ഉപയോഗിക്കരുത്. ആ തീമുകൾ നിങ്ങളുടെ സെറ്റിംഗുകളെ മറികടക്കും (override). പകരം "base" തീം ഉപയോഗിക്കുക. നിങ്ങളുടെ കസ്റ്റം പാലറ്റ് വിശ്വസനീയമായി പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കാനുള്ള ഏക മാർഗ്ഗമാണിത്.

  3. Matplotlib Backgrounds ചാർട്ടുകൾ നിങ്ങളുടെ സ്ലൈഡ് ബാക്ക്ഗ്രൗണ്ടുമായി പൊരുത്തപ്പെടാൻ പ്രയാസമാണ്. നിങ്ങൾ മൂന്ന് കാര്യങ്ങൾ ചെയ്യണം:

  • pyplot ഇമ്പോർട്ട് ചെയ്യുന്നതിന് മുമ്പ് matplotlib.use("Agg") വിളിക്കുക.
  • ഫിഗറിനും (figure) ആക്സിസിനും (axes) facecolor സെറ്റ് ചെയ്യുക.
  • വെള്ള ബോർഡറുകൾ ഒഴിവാക്കാൻ ഫയൽ സേവ് ചെയ്യുമ്പോൾ bbox_inches="tight" ഉപയോഗിക്കുക.
  1. Reliability and Failsafes ഒരു ഡയഗ്രം ലഭ്യമല്ലാതിരിക്കുന്നത് നിങ്ങളുടെ മുഴുവൻ വീഡിയോ നിർമ്മാണത്തെയും തടസ്സപ്പെടുത്തരുത്. പിശകുകൾ കണ്ടെത്താൻ പാകത്തിൽ ഞാൻ ഒരു സ്കാഫോൾഡ് (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