live-panel yordamida JSON’dan animatsiyali arxitektura diagrammalarini yarating

live-panel nima qiladi

live-panel bitta JSON tizim tavsifini animatsiyali arxitektura diagrammasiga aylantiradi. Maket o‘zgarmas qoladi, paketlar simlar bo‘ylab harakatlanadi, jurnallar siljiydi, hisoblagichlar o‘zgaradi, panellar holatini almashtiradi va yon triggerlar ketma-ket yonadi.

Natijani X va Xiaohongshu kabi platformalar uchun H.264 MP4 sifatida eksport qilishingiz yoki o‘zini o‘zi ta’minlaydigan jonli veb-sahifa ko‘rinishida saqlashingiz mumkin. Repozitoriy SKILL.md fayli orqali Claude Code uslubidagi skill sifatida ham ishlaydi.

Ichidagi Codex agentlari misoli @thedelost tomonidan yaratilgan arxitektura klipining terminal uslubidagi ko‘rinishi va harakatini qayta yaratadi. Repozitoriyda och pastel ranglardagi AI arxitekturasi misoli va Airbnb vizualizatsiyasi ham mavjud.

Asosiy imkoniyatlar

• JSON formatida aniqlanadigan konfiguratsiyaga asoslangan diagrammalar.
• Terminal-qorong‘i va och-pastel vizual mavzular.
• 4:5, 3:4 va 1:1 chiqish formatlari uchun canvas presetlari.
• Animatsiyali paketlar, yo‘llar, jurnallar, hisoblagichlar, o‘lchagichlar, triggerlar va holat o‘zgarishlari.
• To‘liq vaqtga asoslangan deterministik renderlash: real vaqt hisoblagichi, Math.random yoki CSS animatsiyasidan foydalanilmaydi.
• MP4 formatiga eksport qilish yoki yaratilgan jonli HTML sahifani saqlab qolish.
• Matn sig‘masligi, ustma-ust tushish va qidirish izchilligini tekshiruvchi avtomatlashtirilgan kadr sinovlari.

Talablarni o‘rnating

live-panel Python standart kutubxonasidan foydalanadi, shuning uchun pip paketlari talab qilinmaydi. Renderlashdan oldin quyidagi vositalarni o‘rnating:

• Python 3.8 yoki undan yangi versiyasi.
• Chrome yoki Chromium.
• ffmpeg.

Repozitoriyni yuklab olgach, python3, Chrome yoki Chromium hamda ffmpeg tizim yo‘lida mavjudligini tekshiring. Renderlash skripti sukut bo‘yicha Chrome va ffmpeg'ni tizim yo‘lidan qidiradi.

Ichki misolni renderlang

Codex agentlari konfiguratsiyasidan boshlang. Quyidagi buyruq JSON konfiguratsiyasini MP4 fayliga renderlaydi:

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

Misol konfiguratsiyalari loyihaning o‘zgarmas pozitsiyalarni animatsiyali mashina o‘zgaruvchilari bilan qanday birlashtirishini ham ko‘rsatadi. Boshqa tayyor misollar examples/agent-architecture/ va examples/airbnb/ papkalarida mavjud.

Faqat video yaratish o‘rniga hosil qilingan veb-sahifani ham saqlash uchun --html-out parametrini qo‘shing:

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

Jonli animatsiyani ko‘rish uchun hosil bo‘lgan HTML faylni mos brauzerda oching. Chiqish sozlamalarini --width, --height, --duration, --fps, --chrome, --ffmpeg, --keep-frames, --audio va --crf kabi parametrlar orqali ham boshqarishingiz mumkin.

Renderlangan kadrlarni tekshiring

Diagrammani e’lon qilishdan oldin kadr tekshiruvchisini ishga tushiring:

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

Tekshiruvchi taxminan 120 ta vaqt nuqtasidan namuna oladi, DOM ichidagi matn sig‘masligi va elementlarning ustma-ust tushishini o‘lchaydi hamda namunaviy PNG fayllarini yozadi. --repeat bilan u har bir eksport qilingan kadrdan boshqa vaqtga o‘tib, natija aynan bir xil ekanini tekshirish uchun kadrni qayta renderlaydi. Muammo aniqlansa, buyruq 1 holat kodi bilan yakunlanadi.

O‘z diagrammangizni yarating

1. Misol konfiguratsiya fayllaridan birini nusxalang.
2. Undagi matn, raqamlar, ranglar, pozitsiyalar va animatsiya sozlamalarini tahrirlang.
3. Nusxalangan konfiguratsiyani MP4 yoki HTML formatiga renderlang.
4. check_frames.py dasturini ishga tushiring va hosil qilingan PNG fayllarini tekshiring.
5. Tekshiruvchi hech qanday muammo topmaguncha maketni sozlang va jarayonni takrorlang.

Ko‘pgina moslashtirishlar konfiguratsiya faylida amalga oshiriladi. Repozitoriyda odatiy diagramma yaratish uchun assets/template.html faylini o‘zgartirish shart emasligi qayd etilgan.

Canvas va mavzuni sozlang

Konfiguratsiyada canvas preseti, animatsiya davomiyligi, kadrlar tezligi va ixtiyoriy oldindan ishga tushirish vaqtini tanlash mumkin:

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

Mavjud canvas presetlari quyidagilar: 1200×1500 piksel o‘lchamdagi 4:5, 1080×1440 piksel o‘lchamdagi 3:4 va 1080×1080 piksel o‘lchamdagi 1:1. Terminal-qorong‘i presetida qorong‘i oyna, monospace shrift va segmentlangan matn rejimidagi bloklar ishlatiladi. Och-pastel presetida oq fon, yumaloq pastel bloklar, yumaloq SVG strelkalar va faol elementlarda yumshoq yorug‘lik effekti mavjud.

Canvas pozitsiyalari absolyut piksellarda beriladi. Shu sababli konfiguratsiya bitta tomonlar nisbatiga mo‘ljallab yoziladi. render.py --width va --height chiqishni yon bo‘shliqlar bilan qayta o‘lchashi mumkin bo‘lsa-da, boshqa nisbat uchun odatda konfiguratsiyani nusxalash va bloklarni qayta joylashtirish kerak bo‘ladi.

Elementlar va harakatni tavsiflang

Konfiguratsiya sxemasi bir nechta vizual element turlarini qo‘llab-quvvatlaydi:

• Yorliqlar va mustaqil matnlar uchun text.
• To‘ldirishlar, chegaralar, radiuslar, punktir uslublar, har qator elementlari, panellar va matn qismlarini o‘z ichiga olgan konteynerlar uchun box.
• Simlar va ulanishlar uchun line va path.
• Belgilar va ajratgichlar uchun glyph va rule.
• Poliliniya bo‘ylab harakatlanuvchi paketlar uchun flow.
• Trigger strelkalari uchun tarrow.
• O‘zgarib yoki siljib turuvchi jurnal kontenti uchun log.

O‘zgaruvchan qiymatlar machines ichida belgilanadi. Mavjud mashina turlariga counter, cycle, gauge, any_low, lane va triggers kiradi. Vaqt mantiqini alohida elementlarga bevosita qo‘shish o‘rniga, vizual holatlarni boshqarish uchun ushbu o‘zgaruvchilardan foydalaning.

Qutilar, yo‘llar, oqimlar, chiziqlar va qismlar when hamda then shartlaridan foydalanishi mumkin. Masalan, {"var":"seq.i","in":[0,1,2]} kabi shart mashina o‘zgaruvchisi ko‘rsatilgan qiymatlardan biriga mos kelganda elementni ajratib ko‘rsatishi mumkin. Bir nechta shart AND ifodasi sifatida talqin qilinadi.

Deterministik ijroni tushunish

Yaratilgan sahifa window.seek(t) funksiyasini taqdim etadi. Har bir vizual t vaqt qiymatining sof funksiyasi hisoblanadi, psevdo-tasodifiy tanlovlarda esa oldindan belgilangan urug‘li butun son xeshi ishlatiladi. Oddiy brauzer rejimida animatsiyani requestAnimationFrame boshqaradi. Renderlash vaqtida eksport qiluvchi har bir kadr vaqti uchun seek(i/fps) orqali kerakli vaqtga o‘tadi va natijani saqlaydi.

Bu dizayn eksport qilingan kadrlarning takrorlanishini ta’minlaydi. Shuningdek, shriftlar, joylashuvlar yoki animatsiya shartlarini o‘zgartirgandan keyin nima sababdan kadr tekshiruvchisidan foydalanish kerakligini tushuntiradi.

Tipografika va maketni yaxshilang

Shrift fayllari paketga kiritilmagan. Terminal mavzularida JetBrains Mono, IBM Plex Mono, DejaVu Sans Mono, Noto Sans Mono CJK SC va umumiy monospace shriftidan foydalanish ketma-ketligida zaxira variantlar qo‘llanadi. Och rangli pastel mavzularida Noto Sans CJK SC, PingFang SC, Microsoft YaHei, Helvetica yoki Arial, katta sarlavhalar uchun esa Noto Serif CJK SC ishlatiladi.

Misollarga yanada yaqin natija uchun JetBrains Mono va Noto CJK shriftlarini o‘rnating. Emoji ikonkalari uchun Noto Color Emoji kabi rangli emoji shrifti ham kerak. Turli shriftlarda glif kengliklari har xil bo‘lgani sababli, o‘rnatilgan shriftlarni o‘zgartirganingizda check_frames.py buyrug‘ini yana ishga tushiring.

Foydali renderlash maslahatlari

• Mo‘ljallangan vizual uslubingizga eng yaqin misolni boshlang‘ich nuqta sifatida tanlang.
• Koordinatalarni tanlangan canvas nisbatiga mos holda izchil saqlang.
• Video yaratishda ishlatilgan aniq rasmlarni tekshirish kerak bo‘lsa, --keep-frames dan foydalaning.
• Audio trek kerak bo‘lmasa, --audio none dan foydalaning.
• Kodlangan video sifatini boshqarish kerak bo‘lsa, --crf ni sozlang.
• Har bir muhim maket, shrift yoki konfiguratsiya o‘zgarishidan keyin tekshiruvchini ishga tushiring.
• Claude Code uchun repozitoriyni ~/.claude/skills/live-panel/ manziliga yoki agentingiz skill yuklagichi foydalanadigan katalogga joylashtiring.

Mualliflar va litsenziyalash

Kod MIT litsenziyasi asosida chiqarilgan. Codex agentlari misolida qayta yaratilgan vizual dizayn @thedelost ga tegishli, yengil AI arxitekturasi infografikasi esa uning asl muallifi, Xiaohongshu yaratuvchisi 林纾 ga tegishli. Airbnb raqamlari Airbnb rahbarlarining Latent.Space intervyusida bildirgan fikrlaridan olingan, animatsiyali hisoblagichlar esa tasviriy xarakterga ega.

Xulosa

live-panel tuzilgan tizim tavsiflarini sayqallangan va takrorlanuvchi harakatli grafikaga aylantirish uchun amaliy ish jarayonini taqdim etadi. Misolni nusxalang, JSON faylini tahrirlang, canvas va mavzuni tanlang, MP4 yoki jonli sahifani renderlang hamda nashr etishdan oldin maket muammolarini aniqlash uchun deterministik kadr tekshiruvchisidan foydalaning.