a8c4af0975
Vanha frontend siirretty temp/. Uusi rakenne: - StatusBar.astro, Terminal.astro, Editor.astro, Guide.astro - global.css erillinen - Wasm pääsäikeessä (ei Worker — yksinkertainen, debugattava) - Tab-completion, dropdown, projektikortti, Monaco, GUIDE.md - Ei tokenisointia eikä koodilaboratoriota Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
35 lines
1.9 KiB
Markdown
35 lines
1.9 KiB
Markdown
# Kipinä Agentic Playground - Animaatioiden käyttöönotto
|
||
|
||
Koska Kipinä-verkon agenttien avatarit tällä erää ovat staattisia PNG-kuvatiedostoja, käyttöliittymä hyödyntää CSS-pohjaista pomppimisilmiötä (sekä pulppuavaa 💬 puhekuplaa) "puhumisen" merkkinä. Olemme kuitenkin koodanneet taustalle piilotetun tuen aivioiduille videoloopeille myöhempää käyttöä varten!
|
||
|
||
Näin saat UI:n tukemaan oikeasti animoituja kasvoja/videoita.
|
||
|
||
## 1. Luo Animoidut GIF-tiedostot
|
||
Valitse mikä tahansa ulkoinen AI-työkalu (kuten HeyGen, Pika v1.0, tai Midjourney+Runway yhdistelmä) ja muunna avatar-kuvat (esim. `kettu_notext.png`) 3-5 sekunnin kestäviksi GIF-loopeiksi. Hahmon leuka tulisi pyöriä tai naama vääntyillä puhuessaan.
|
||
|
||
## 2. Nimeä Tiedostot Oikein ja Lisää Ne Kansioon
|
||
Siirrä uudet GIF-animaatiot samaan kansioon alkuperäisten kuvien kanssa. Muuta niiden nimi siten, että se päättyy tunnisteeseen `_puhuva.gif`.
|
||
|
||
Esimerkkejä:
|
||
- Koodari `kipina_notext.png` → `kipina_notext_puhuva.gif`
|
||
- Manageri `karhunpentu.png` → `karhunpentu_puhuva.gif`
|
||
- Asiakas `kettu_notext.png` → `kettu_notext_puhuva.gif`
|
||
|
||
## 3. Aktivoi Koodi
|
||
Käännä Kipinä Playground -ohjaimen JavaScript-koodista piilotettu ominaisuus päälle.
|
||
|
||
Etsi tiedostosta `../index.html` (noin riviltä 1084, `updatePromptEditor`-funktiosta):
|
||
```javascript
|
||
// Piilotettu ominaisuus: Puhuvien videoiden / gif-animaatioiden kytkentä
|
||
window.USE_ANIMATED_GIFS = false;
|
||
```
|
||
Muuta tuo `false` arvoon `true`:
|
||
```javascript
|
||
window.USE_ANIMATED_GIFS = true;
|
||
```
|
||
|
||
**Mitä logiikka tekee?**
|
||
Aina kun valitset agentin kaaviosta, koodi korvaa aktiivisen kuvakkeen lopussa olevan `.png` -päätteen sanalla `_puhuva.gif` – lennosta! Jos poistut agentin valinnasta tai valitset jonkun toisen, koodi vaihtaa kuvan välittömästi takaisin staattiseen `.png`-versioon ja sulkee ilmentymän suun.
|
||
|
||
Näin saat kaikkien asiantuntijoiden face-track looppeja hallittua yhdellä kädenkäänteellä.
|