Unda Michoro ya Usanifu Iliyohuishwa kutoka JSON kwa live-panel

live-panel hufanya nini

live-panel hubadilisha maelezo moja ya mfumo katika JSON kuwa mchoro wa usanifu unaohuishwa. Mpangilio hubaki thabiti huku pakiti zikisafiri kwenye nyaya, kumbukumbu zikisogea, vihesabu vikibadilika, pau zikibadilisha hali, na vichochezi vya pembeni vikiwaka kwa mfuatano.

Unaweza kuhamisha matokeo kama MP4 ya H.264 kwa majukwaa kama X na Xiaohongshu, au kuyaacha kama ukurasa wa wavuti unaojitegemea kikamilifu. Hifadhi hii pia hufanya kazi kama ustadi wa mtindo wa Claude Code kupitia faili yake ya SKILL.md.

Mfano wa mawakala wa Codex uliyojumuishwa huunda upya mwonekano na mwendo wa mtindo wa terminal kutoka kwenye klipu ya usanifu ya @thedelost. Hifadhi hii pia ina mfano wa usanifu wa AI wenye mandhari angavu ya pastel na mwonekano wa Airbnb.

Vipengele muhimu

• Michoro inayoendeshwa na usanidi unaofafanuliwa katika JSON.
• Mandhari za mwonekano wa terminal nyeusi na pastel angavu.
• Miundo ya turubai kwa matokeo ya 4:5, 3:4, na 1:1.
• Pakiti, njia, kumbukumbu, vihesabu, vipimo, vichochezi na mabadiliko ya hali yanayohuishwa.
• Uchoraji unaoweza kurudiwa, unaotegemea muda pekee, bila muda wa saa ya mfumo, Math.random, au uhuishaji wa CSS.
• Hamisha hadi MP4 au hifadhi ukurasa wa HTML unaozalishwa na unaohuishwa.
• Ukaguzi wa kiotomatiki wa fremu kwa maandishi yanayozidi eneo, mwingiliano na uthabiti wa kutafuta fremu.

Sakinisha mahitaji

live-panel hutumia maktaba ya kawaida ya Python, kwa hiyo hakuna vifurushi vya pip vinavyohitajika. Sakinisha zana zifuatazo kabla ya kuanza uchoraji:

• Python 3.8 au mpya zaidi.
• Chrome au Chromium.
• ffmpeg.

Baada ya kupakua hifadhi, thibitisha kuwa python3, Chrome au Chromium, na ffmpeg zinapatikana kwenye njia ya mfumo wako. Hati ya uchoraji hutafuta Chrome na ffmpeg kwenye njia hiyo kwa chaguo-msingi.

Uchoraji wa mfano uliojumuishwa

Anza na usanidi wa mawakala wa Codex. Amri ifuatayo huchora usanidi wa JSON kuwa faili la MP4:

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

Usanidi wa mifano pia unaonyesha jinsi mradi unavyochanganya nafasi thabiti na vigeu vya mashine vinavyohuishwa. Mifano mingine iliyo tayari inapatikana katika examples/agent-architecture/ na examples/airbnb/.

Ili kuhifadhi ukurasa wa wavuti unaozalishwa badala ya kutengeneza video pekee, ongeza --html-out:

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

Fungua faili la HTML linalotokana katika kivinjari kinachooana ili kutazama uhuishaji unaoendelea. Unaweza pia kudhibiti mipangilio ya matokeo kwa chaguo kama --width, --height, --duration, --fps, --chrome, --ffmpeg, --keep-frames, --audio, na --crf.

Thibitisha fremu zilizochorwa

Kabla ya kuchapisha mchoro, endesha kikagua fremu:

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

Kikagua huchukua sampuli za takriban pointi 120 za muda, hupima maandishi yanayozidi eneo na mwingiliano wa vipengele katika DOM, kisha huandika faili za PNG zinazowakilisha matokeo. Ukiweka --repeat, huruka kutoka kila fremu iliyohamishwa na kuichora tena ili kuthibitisha kuwa matokeo yanafanana. Amri huisha kwa hali ya 1 ikitambua tatizo.

Unda mchoro wako mwenyewe

1. Nakili mojawapo ya faili za usanidi wa mfano.
2. Hariri maandishi, nambari, rangi, nafasi na mipangilio ya uhuishaji.
3. Chora usanidi uliyonakili kuwa MP4 au HTML.
4. Endesha check_frames.py na kagua PNG zilizozalishwa.
5. Rekebisha mpangilio na urudie hadi kikagua kitoe hakuna matatizo.

Ugeuzaji mwingi hufanywa katika faili la usanidi. Hifadhi inaeleza kuwa huhitaji kurekebisha assets/template.html kwa uundaji wa kawaida wa michoro.

Sanidi turubai na mandhari

Usanidi unaweza kuchagua muundo wa turubai, muda wa uhuishaji, kasi ya fremu na preroll ya hiari:

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

Miundo ya turubai inayopatikana ni 4:5 yenye pikseli 1200×1500, 3:4 yenye pikseli 1080×1440, na 1:1 yenye pikseli 1080×1080. Muundo wa terminal nyeusi hutumia dirisha jeusi, taipografia ya nafasi moja na visanduku vya maandishi vilivyogawanywa. Muundo wa pastel angavu hutumia mandharinyuma meupe, visanduku vya pastel vyenye pembe za mviringo, mishale ya SVG yenye pembe za mviringo na mng'ao hafifu kwenye vipengele vinavyotumika.

Nafasi za turubai hutumia pikseli kamili. Kwa hiyo, usanidi huandaliwa kwa uwiano mmoja wa vipimo. Ingawa render.py --width na --height zinaweza kubadilisha ukubwa wa matokeo kwa kuweka mipaka pembeni, uwiano tofauti kwa kawaida huhitaji kunakili usanidi na kupanga upya visanduku vyake.

Eleza vipengele na mwendo

Mfumo wa usanidi unaunga mkono aina kadhaa za vipengele vya mwonekano:

• text kwa lebo na maandishi yanayojitegemea.
• box kwa kontena, ikijumuisha ujazo, mipaka, pembe, mitindo ya mistari iliyokatika, vipengee vya kila mstari, pau na mfululizo wa maandishi.
• line na path kwa nyaya na miunganisho.
• glyph na rule kwa alama na vitenganishi.
• flow kwa pakiti zinazosogea kwenye polyline.
• tarrow kwa mishale ya vichochezi.
• log kwa maudhui ya kumbukumbu yanayobiringika au kubadilika.

Thamani zinazobadilika hufafanuliwa chini ya machines. Aina za mashine zinazopatikana ni pamoja na counter, cycle, gauge, any_low, lane na triggers. Tumia vigezo hivi kuendesha hali za mwonekano badala ya kuongeza mantiki ya muda moja kwa moja kwenye vipengee binafsi.

Sanduku, njia, mtiririko, mistari na mfululizo vinaweza kutumia masharti ya when na then. Kwa mfano, sharti kama {"var":"seq.i","in":[0,1,2]} linaweza kuangazia kipengee wakati kigezo cha mashine kinalingana na mojawapo ya thamani zilizoorodheshwa. Masharti mengi huchukuliwa kama usemi wa AND.

Elewa uchezaji wa kubainika

Ukurasa uliotengenezwa hufichua window.seek(t). Kila mwonekano ni chaguo la moja kwa moja la thamani ya muda t, na chaguo za nasibu za kuiga hutumia heshi ya nambari kamili yenye mbegu isiyobadilika. Katika hali ya kawaida ya kivinjari, requestAnimationFrame huendesha uhuishaji. Wakati wa uwasilishaji, kisafirishi hurukia kila muda wa fremu kwa kutumia seek(i/fps) na kunasa matokeo.

Muundo huu hufanya fremu zilizohamishwa ziweze kurudiwa. Pia unaeleza kwa nini unapaswa kutumia kikagua fremu baada ya kubadilisha fonti, nafasi au masharti ya uhuishaji.

Boresha uchapaji na mpangilio

Faili za fonti hazijawekwa pamoja. Mandhari za terminali hutumia fonti mbadala kwa mpangilio huu: JetBrains Mono, IBM Plex Mono, DejaVu Sans Mono, Noto Sans Mono CJK SC na fonti ya jumla ya monospace. Mandhari nyepesi za pastel hutumia Noto Sans CJK SC, PingFang SC, Microsoft YaHei, Helvetica au Arial, huku Noto Serif CJK SC ikitumika kwa vichwa vikubwa.

Kwa ulinganifu wa karibu zaidi na mifano, sakinisha JetBrains Mono na fonti za Noto CJK. Aikoni za emoji pia zinahitaji fonti ya emoji ya rangi kama Noto Color Emoji. Kwa sababu fonti tofauti zina upana tofauti wa glyph, endesha tena check_frames.py kila unapobadilisha fonti zilizosakinishwa.

Vidokezo muhimu vya uwasilishaji

• Tumia mfano ulio karibu zaidi na mtindo wa mwonekano unaolenga kama mwanzo.
• Dumisha uratibu unaolingana na uwiano wa turubai uliochaguliwa.
• Tumia --keep-frames unapohitaji kukagua picha halisi zilizotumika kuunda video.
• Tumia --audio none usipotaka njia ya sauti.
• Rekebisha --crf unapohitaji kudhibiti ubora wa video iliyosimbwa.
• Endesha kikagua baada ya kila mabadiliko makubwa ya mpangilio, fonti au usanidi.
• Kwa Claude Code, weka hazina katika ~/.claude/skills/live-panel/ au kwenye saraka inayotumiwa na kipakiaji cha ujuzi cha wakala wako.

Sifa na leseni

Msimbo umetolewa chini ya leseni ya MIT. Muundo wa mwonekano ulioundwa upya na mfano wa mawakala wa Codex ni wa @thedelost, huku infografiki nyepesi ya usanifu wa AI ikiwa ya mwandishi wake halisi, mtayarishaji wa Xiaohongshu 林纾. Michoro ya Airbnb imetokana na taarifa zilizotolewa na viongozi wa Airbnb katika mahojiano ya Latent.Space, na vihesabio vilivyohuishwa ni vya kuonyesha tu.

Hitimisho

live-panel hutoa mtiririko wa kazi wa vitendo wa kubadilisha maelezo ya mifumo yaliyopangwa kuwa michoro ya mwendo iliyokamilishwa na inayoweza kurudiwa. Nakili mfano, hariri JSON, chagua turubai na mandhari, toa MP4 au ukurasa hai, kisha utumie kikagua fremu kinachobainika ili kugundua matatizo ya mpangilio kabla ya kuchapisha.