Yakha Imidwebo Egqwayizayo Yokwakheka Kwezinhlelo nge-live-panel

Okwenziwa yi-live-panel

live-panel iguqula incazelo eyodwa yesistimu ye-JSON ibe umdwebo ogqwayizayo wokwakheka kwesistimu. Isakhiwo sihlala simile ngenkathi amaphakethe ehamba ezintanjeni, amalogi eskrola, izibali zishintsha, amabha eshintsha isimo, nezibangeli eziseceleni zikhanya ngokulandelana.

Ungathumela umphumela njenge-H.264 MP4 ezinkundleni ezifana ne-X ne-Xiaohongshu, noma uwugcine njengekhasi lewebhu elizimele ngokuphelele. Le repository iphinde isebenze njengekhono lesitayela se-Claude Code ngefayela layo elithi SKILL.md.

Isibonelo sama-Codex agents esifakiwe siphinda sakhe ukubukeka nokunyakaza kwesitayela sesikhumulo kwesiqeshana sokwakheka kwesistimu sika-@thedelost. Le repository iphinde ibe nesibonelo sokwakheka kwesistimu ye-AI esinemibala ekhanyayo ethambile kanye nombono we-Airbnb.

Izici ezibalulekile

• Imidwebo eqhutshwa ukucushwa echazwa nge-JSON.
• Amatimu okubukeka amnyama esikhumulo nakhanyayo anemibala ethambile.
• Izilungiselelo zekhanvasi zokukhishwa kwe-4:5, 3:4, kanye ne-1:1.
• Amaphakethe, izindlela, amalogi, izibali, amageji, izibangeli, nezinguquko zesimo ezigqwayizayo.
• Ukudwetshwa okunqunywe kusengaphambili okusekelwe ngokuphelele esikhathini, ngaphandle kokusebenzisa isikhathi sewashi, Math.random, noma ukugqwayiza kwe-CSS.
• Ukuthunyelwa ku-MP4 noma ukugcinwa kwekhasi le-HTML elibukhoma elikhiqiziwe.
• Ukuhlolwa kwamafreyimu okuzenzakalelayo kokuchichima kombhalo, ukugqagqana, nokuvumelana kokusesha isikhathi.

Faka izidingo

i-live-panel isebenzisa umtapo ojwayelekile wePython, ngakho awekho amaphakheji e-pip adingekayo. Faka amathuluzi alandelayo ngaphambi kokudweba:

• IPython 3.8 noma entsha.
• I-Chrome noma i-Chromium.
• ffmpeg.

Ngemva kokulanda le repository, qinisekisa ukuthi python3, i-Chrome noma i-Chromium, kanye ne-ffmpeg kuyatholakala endleleni yesistimu yakho. Iskripthi sokudweba sisesha indlela ye-Chrome ne-ffmpeg ngokuzenzakalela.

Dweba isibonelo esifakiwe

Qala ngokucushwa kwama-Codex agents. Umyalo olandelayo udweba ukucushwa kwe-JSON kube ifayela le-MP4:

python3 scripts/render.py --config examples/codex-agents/config.json --out out.mp4

Ukucushwa okuyizibonelo kuphinde kubonise ukuthi iphrojekthi ihlanganisa kanjani izindawo ezimisiwe neziguquguqukayo zomshini ezigqwayizayo. Ezinye izibonelo ezilungiselelwe sezitholakala ku-examples/agent-architecture/ naku-examples/airbnb/.

Ukuze ugcine ikhasi lewebhu elikhiqiziwe esikhundleni sokukhiqiza ividiyo kuphela, engeza i---html-out:

python3 scripts/render.py \
  --config examples/codex-agents/config.json \
  --out out.mp4 \
  --html-out page.html

Vula ifayela le-HTML eliphumayo esipheqululini esihambisanayo ukuze ubuke ukugqwayiza okubukhoma. Ungakwazi futhi ukulawula izilungiselelo zokukhishwa ngezinketho ezifana ne---width, --height, --duration, --fps, --chrome, --ffmpeg, --keep-frames, --audio, kanye ne---crf.

Qinisekisa amafreyimu adwetshiwe

Ngaphambi kokushicilela umdwebo, sebenzisa isihloli samafreyimu:

python3 scripts/check_frames.py \
  --config examples/codex-agents/config.json \
  --out-dir frames \
  --repeat

Isihloli sithatha cishe amaphuzu esikhathi angu-120, silinganise ukuchichima kombhalo nokugqagqana kwezinto ku-DOM, bese sibhala amafayela e-PNG amelela lokho. Nge---repeat, sifuna isikhathi esikude nefreyimu ngayinye ethunyelwe bese siyidweba futhi ukuze siqinisekise ukuthi umphumela uyafana. Umyalo uphuma ngesimo esingu-1 uma uthola inkinga.

Dala owakho umdwebo

1. Kopisha elinye lamafayela okucushwa ayizibonelo.
2. Hlela umbhalo, izinombolo, imibala, izindawo, nezilungiselelo zokugqwayiza.
3. Dweba ukucushwa okukopishiwe kube yi-MP4 noma i-HTML.
4. Qalisa i-check_frames.py bese uhlola ama-PNG akhiqiziwe.
5. Lungisa isakhiwo bese uphinda kuze kube isihloli sibika ukuthi azikho izinkinga.

Ukwenza ngokwezifiso okuningi kwenziwa kufayela lokucushwa. I-repository iphawula ukuthi awudingi ukushintsha i-assets/template.html ukuze udale umdwebo ojwayelekile.

Hlela ikhanvasi netimu

Ukucushwa kungakhetha isilungiselelo sekhanvasi, ubude bokugqwayiza, izinga lamafreyimu, kanye ne-preroll ongayikhetha:

{
  "canvas": {
    "preset": "3:4",
    "duration": 28,
    "fps": 30,
    "preroll": 0
  },
  "theme": {
    "preset": "light-pastel",
    "colors": {
      "pk": "#f0575f"
    }
  }
}

Izilungiselelo zekhanvasi ezitholakalayo yi-4:5 enamaphikseli angu-1200×1500, i-3:4 enamaphikseli angu-1080×1440, kanye ne-1:1 enamaphikseli angu-1080×1080. Isilungiselelo esimnyama sesikhumulo sisebenzisa iwindi elimnyama, umbhalo we-monospace, namabhokisi ombhalo ahlukanisiwe. Isilungiselelo esikhanyayo esinemibala ethambile sisebenzisa ingemuva elimhlophe, amabhokisi ayindilinga anemibala ethambile, imicibisholo ye-SVG eyindilinga, nokukhanya okuthambile ezintweni ezisebenzayo.

Izindawo zekhanvasi zisebenzisa amaphikseli aphelele. Ngakho ukucushwa kwakhelwa isilinganiso sobude nobubanzi esisodwa. Nakuba i-render.py --width ne---height kungashintsha usayizi wokukhishwa ngokusebenzisa ama-letterbox, isilinganiso esihlukile ngokuvamile sidinga ukukopisha ukucushwa nokubeka kabusha amabhokisi aso.

Chaza izinto nokunyakaza

Uhlelo lokucushwa lusekela izinhlobo eziningana zezinto ezibonakalayo:

• text isetshenziselwa amalebula nombhalo ozimele.
• box isetshenziselwa iziqukathi, okuhlanganisa ukugcwaliswa, imingcele, ama-radius, izitayela ezinamachashazi, izinto zomugqa ngamunye, amabha, kanye nezingxenye zombhalo.
• line kanye path kusetshenziselwa izintambo nokuxhumana.
• glyph kanye rule kusetshenziselwa izimpawu nezihlukanisi.
• flow isetshenziselwa amaphakethe ahamba eduze kwe-polyline.
• tarrow isetshenziselwa imicibisholo yokuqalisa.
• log isetshenziselwa okuqukethwe kwelogi okuskrola noma okushintshayo.

Amanani ashintshayo achazwa ngaphansi kwe-machines. Izinhlobo zemishini ezitholakalayo zihlanganisa i-counter, cycle, gauge, any_low, lane, kanye ne-triggers. Sebenzisa lezi ziguquguquko ukulawula izimo ezibonakalayo esikhundleni sokwengeza umqondo wesikhathi ngokuqondile ezintweni ngazinye.

Amabhokisi, ama-path, ama-flow, imigqa, kanye nama-run angasebenzisa izimo ze-when ne-then. Isibonelo, isimo esifana ne-{"var":"seq.i","in":[0,1,2]} singagqamisa into lapho inani lomshini lihambisana nelinye lamanani abalwe. Izimo eziningi ziphathwa njengenkulumo ye-AND.

Qonda ukudlalwa kabusha okunqumayo

Ikhasi elikhiqiziwe liveza i-window.seek(t). Konke okubonakalayo kuwumsebenzi omsulwa wenani lesikhathi t, futhi ukukhetha okubonakala kungahleliwe kusebenzisa i-hash yenombolo ephelele enembewu engaguquki. Kumodi evamile yesiphequluli, i-requestAnimationFrame iqhuba i-animation. Ngesikhathi sokunikezwa, i-exporter iya esikhathini sohlaka ngalunye isebenzisa i-seek(i/fps) bese ithatha umphumela.

Lo mklamo wenza amafreyimu akhishiwe aphindaphindeke ngokufanayo. Uphinde uchaze ukuthi kungani kufanele usebenzise isihloli samafreyimu ngemva kokushintsha amafonti, izikhundla, noma izimo ze-animation.

Thuthukisa i-typography nesakhiwo

Amafayela amafonti awafakwanga ephaketheni. Amatimu e-terminal asebenzisa ngokulandelana i-JetBrains Mono, IBM Plex Mono, DejaVu Sans Mono, Noto Sans Mono CJK SC, kanye nefonti evamile ye-monospace uma kudingeka. Amatimu e-light-pastel asebenzisa i-Noto Sans CJK SC, PingFang SC, Microsoft YaHei, Helvetica, noma i-Arial, kanti izihloko ezinkulu zisebenzisa i-Noto Serif CJK SC.

Ukuze uthole ukufana okusondele nezibonelo, faka i-JetBrains Mono namafonti e-Noto CJK. Izithonjana ze-emoji nazo zidinga ifonti ye-emoji enemibala efana ne-Noto Color Emoji. Njengoba amafonti ahlukene enobubanzi obuhlukene bama-glyph, phinda usebenzise i-check_frames.py njalo lapho ushintsha amafonti afakiwe.

Amathiphu awusizo okunikezela

• Sebenzisa isibonelo esiseduze kakhulu nesitayela sokubukeka osihlosile njengesiqalo.
• Gcina izixhumanisi zihambisana nesilinganiso sekhanvasi ekhethiwe.
• Sebenzisa i---keep-frames lapho udinga ukuhlola izithombe eziqondile ezisetshenziswe ukwakha ividiyo.
• Sebenzisa i---audio none uma ungafuni ithrekhi yomsindo.
• Lungisa i---crf lapho udinga ukulawula ikhwalithi yevidiyo efakwe ikhodi.
• Qalisa isihloli ngemva kwalo lonke ushintsho olubalulekile kusakhiwo, kufonti, noma ekucushweni.
• Ku-Claude Code, beka i-repository ku-~/.claude/skills/live-panel/ noma ku-directory esetshenziswa yi-skill loader ye-agent yakho.

Amakhredithi nelayisensi

Ikhodi ikhishwe ngaphansi kwelayisensi ye-MIT. Umklamo obonakalayo owenziwe kabusha yisibonelo sama-Codex agents ungoka-@thedelost, kanti i-infographic ekhanyayo ye-AI architecture ingeyombhali wayo wokuqala, umdali we-Xiaohongshu u林纾. Izibalo ze-Airbnb zivela ezitatimendeni ezenziwe ngabaholi be-Airbnb engxoxweni ye-Latent.Space, kanti ama-counter animathekayo ayizibonelo ezichazayo.

Isiphetho

i-live-panel inikeza indlela esebenzayo yokuguqula izincazelo ezihlelekile zezinhlelo zibe imifanekiso enyakazayo ephucuziwe nephindaphindeka ngokufanayo. Kopisha isibonelo, hlela i-JSON, khetha ikhanvasi netimu, nikeza i-MP4 noma ikhasi elibukhoma, bese usebenzisa isihloli samafreyimu esinqumayo ukuze uthole izinkinga zesakhiwo ngaphambi kokushicilela.