Puhuvat päät agenteille: ! ja puhekupla vuorovaikutuksen lisäämiseksi
This commit is contained in:
34
network-poc/static/avatars/README.md
Normal file
34
network-poc/static/avatars/README.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# 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ä.
|
||||
@@ -1,44 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<defs>
|
||||
<radialGradient id="bgGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#2a3f5a"/>
|
||||
<stop offset="100%" stop-color="#0a121d"/>
|
||||
</radialGradient>
|
||||
<filter id="neonGold" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#ffca28" flood-opacity="0.8"/>
|
||||
</filter>
|
||||
<filter id="neonBlue" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feDropShadow dx="0" dy="0" stdDeviation="5" flood-color="#4fc3f7" flood-opacity="0.9"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background Base -->
|
||||
<rect width="200" height="200" rx="30" fill="url(#bgGlow)"/>
|
||||
|
||||
<!-- Swarm Connectivity Lines -->
|
||||
<g stroke="#4fc3f7" stroke-width="1.5" opacity="0.4" filter="url(#neonBlue)">
|
||||
<line x1="100" y1="100" x2="30" y2="40" />
|
||||
<line x1="100" y1="100" x2="170" y2="40" />
|
||||
<line x1="100" y1="100" x2="40" y2="160" />
|
||||
<line x1="100" y1="100" x2="160" y2="160" />
|
||||
<line x1="100" y1="100" x2="190" y2="100" />
|
||||
<line x1="100" y1="100" x2="10" y2="100" />
|
||||
</g>
|
||||
|
||||
<!-- Gentle Crystal Core -->
|
||||
<path d="M 100 40 L 130 100 L 100 160 L 70 100 Z" fill="#1b2a4a" stroke="#ffca28" stroke-width="3" filter="url(#neonGold)"/>
|
||||
<path d="M 100 40 L 130 100 L 100 120 Z" fill="#2a3f5a" opacity="0.8"/>
|
||||
<path d="M 100 40 L 70 100 L 100 120 Z" fill="#0a121d" opacity="0.6"/>
|
||||
|
||||
<!-- Floating Swarm Nodes -->
|
||||
<circle cx="30" cy="40" r="5" fill="#4fc3f7" filter="url(#neonBlue)"/>
|
||||
<circle cx="170" cy="40" r="5" fill="#4fc3f7" filter="url(#neonBlue)"/>
|
||||
<circle cx="40" cy="160" r="5" fill="#4fc3f7" filter="url(#neonBlue)"/>
|
||||
<circle cx="160" cy="160" r="5" fill="#4fc3f7" filter="url(#neonBlue)"/>
|
||||
<circle cx="190" cy="100" r="4" fill="#ffca28" filter="url(#neonGold)"/>
|
||||
<circle cx="10" cy="100" r="4" fill="#ffca28" filter="url(#neonGold)"/>
|
||||
|
||||
<circle cx="100" cy="100" r="10" fill="#ffca28" filter="url(#neonGold)"/>
|
||||
<circle cx="100" cy="100" r="4" fill="#ffffff"/>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
@@ -1,54 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<defs>
|
||||
<radialGradient id="bgGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#0a2e23"/>
|
||||
<stop offset="100%" stop-color="#090e10"/>
|
||||
</radialGradient>
|
||||
<filter id="neonMint" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#0fffa3" flood-opacity="0.8"/>
|
||||
</filter>
|
||||
<filter id="neonSun" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feDropShadow dx="0" dy="0" stdDeviation="5" flood-color="#ffb142" flood-opacity="0.9"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background Base -->
|
||||
<rect width="200" height="200" rx="30" fill="url(#bgGlow)"/>
|
||||
|
||||
<!-- Cyberpunk soft coding runic rings in background -->
|
||||
<circle cx="100" cy="100" r="80" fill="none" stroke="#0fffa3" stroke-width="1" opacity="0.1" filter="url(#neonMint)"/>
|
||||
<circle cx="100" cy="100" r="85" fill="none" stroke="#0fffa3" stroke-width="0.5" stroke-dasharray="4 8" opacity="0.2"/>
|
||||
|
||||
<!-- Lizard Gentle Head Shape -->
|
||||
<path d="M 100 30 C 160 30, 180 80, 150 140 C 120 180, 80 180, 50 140 C 20 80, 40 30, 100 30 Z" fill="#1b2a26" />
|
||||
<path d="M 100 40 C 150 40, 160 80, 140 130 C 120 160, 80 160, 60 130 C 40 80, 50 40, 100 40 Z" fill="#243831" />
|
||||
|
||||
<!-- Code-scale back-ridges (Cyber implants but cute) -->
|
||||
<path d="M 60 15 L 75 35 M 100 10 L 100 30 M 140 15 L 125 35" stroke="#0fffa3" stroke-width="4" stroke-linecap="round" filter="url(#neonMint)"/>
|
||||
|
||||
<!-- Big Lovely Lizard Eyes mapped to sides -->
|
||||
<ellipse cx="45" cy="85" rx="20" ry="30" fill="#090e10" transform="rotate(-15 45 85)"/>
|
||||
<ellipse cx="155" cy="85" rx="20" ry="30" fill="#090e10" transform="rotate(15 155 85)"/>
|
||||
|
||||
<!-- Neon Glowing Pupils -->
|
||||
<circle cx="45" cy="85" r="10" fill="#0fffa3" filter="url(#neonMint)"/>
|
||||
<circle cx="155" cy="85" r="10" fill="#0fffa3" filter="url(#neonMint)"/>
|
||||
<circle cx="42" cy="78" r="4" fill="#ffffff" opacity="0.9"/>
|
||||
<circle cx="152" cy="78" r="4" fill="#ffffff" opacity="0.9"/>
|
||||
|
||||
<!-- Adorable Snout & Neural Nose-bridge -->
|
||||
<path d="M 100 45 L 100 100" stroke="#ffb142" stroke-width="2" opacity="0.5" filter="url(#neonSun)"/>
|
||||
<circle cx="100" cy="100" r="4" fill="#ffb142" filter="url(#neonSun)"/>
|
||||
|
||||
<path d="M 80 145 C 90 155, 110 155, 120 145" fill="none" stroke="#0fffa3" stroke-width="3" stroke-linecap="round" filter="url(#neonMint)"/>
|
||||
|
||||
<!-- Cute little cheek blushes in neon -->
|
||||
<ellipse cx="65" cy="115" rx="8" ry="4" fill="#ffb142" opacity="0.6" filter="url(#neonSun)"/>
|
||||
<ellipse cx="135" cy="115" rx="8" ry="4" fill="#ffb142" opacity="0.6" filter="url(#neonSun)"/>
|
||||
|
||||
<!-- Floating Brackets (Coder vibe) -->
|
||||
<text x="15" y="150" fill="#0fffa3" font-size="24" font-family="monospace" opacity="0.5" filter="url(#neonMint)">{</text>
|
||||
<text x="170" y="60" fill="#0fffa3" font-size="24" font-family="monospace" opacity="0.5" filter="url(#neonMint)">}</text>
|
||||
<text x="160" y="160" fill="#ffb142" font-size="18" font-family="monospace" opacity="0.5" filter="url(#neonSun)"></></text>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.0 KiB |
@@ -1,66 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<defs>
|
||||
<radialGradient id="bgGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#3d155f"/>
|
||||
<stop offset="100%" stop-color="#090a0f"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="eyeReflection" cx="40%" cy="40%" r="40%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.9"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<filter id="neonPink" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#ff71ce" flood-opacity="0.8"/>
|
||||
</filter>
|
||||
<filter id="neonCyan" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feDropShadow dx="0" dy="0" stdDeviation="5" flood-color="#05d9e8" flood-opacity="0.9"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background Base -->
|
||||
<rect width="200" height="200" rx="30" fill="url(#bgGlow)"/>
|
||||
|
||||
<!-- Cyberpunk background grid elements -->
|
||||
<g stroke="#05d9e8" stroke-width="0.5" opacity="0.3">
|
||||
<path d="M 20 40 L 180 40 M 20 80 L 180 80 M 20 120 L 180 120 M 20 160 L 180 160"/>
|
||||
<path d="M 40 20 L 40 180 M 80 20 L 80 180 M 120 20 L 120 180 M 160 20 L 160 180"/>
|
||||
</g>
|
||||
|
||||
<!-- Fluffy Gentle Raccoon Base -->
|
||||
<path d="M 100 40 C 150 40, 170 80, 160 120 C 145 160, 55 160, 40 120 C 30 80, 50 40, 100 40 Z" fill="#2d3340" />
|
||||
|
||||
<!-- Ears -->
|
||||
<path d="M 45 60 C 25 35, 30 15, 60 30 Z" fill="#1b212b" stroke="#ff71ce" stroke-width="2" filter="url(#neonPink)"/>
|
||||
<path d="M 155 60 C 175 35, 170 15, 140 30 Z" fill="#1b212b" stroke="#05d9e8" stroke-width="2" filter="url(#neonCyan)"/>
|
||||
|
||||
<path d="M 50 55 C 35 40, 40 25, 55 35 Z" fill="#ff71ce" opacity="0.6" filter="url(#neonPink)"/>
|
||||
<path d="M 150 55 C 165 40, 160 25, 145 35 Z" fill="#05d9e8" opacity="0.6" filter="url(#neonCyan)"/>
|
||||
|
||||
<!-- Bandit Mask (Cyber-goggles vibe but soft) -->
|
||||
<path d="M 30 95 C 60 70, 140 70, 170 95 C 180 105, 140 140, 100 130 C 60 140, 20 105, 30 95 Z" fill="#0b0e14" opacity="0.8"/>
|
||||
<path d="M 35 95 C 65 75, 135 75, 165 95" fill="none" stroke="#ff71ce" stroke-width="2" filter="url(#neonPink)" opacity="0.3"/>
|
||||
|
||||
<!-- Big Gentle Anime-style Eyes -->
|
||||
<ellipse cx="65" cy="100" rx="16" ry="22" fill="#05d9e8" filter="url(#neonCyan)"/>
|
||||
<ellipse cx="135" cy="100" rx="16" ry="22" fill="#ff71ce" filter="url(#neonPink)"/>
|
||||
<ellipse cx="65" cy="100" rx="12" ry="18" fill="#111"/>
|
||||
<ellipse cx="135" cy="100" rx="12" ry="18" fill="#111"/>
|
||||
<!-- Glints -->
|
||||
<circle cx="58" cy="92" r="6" fill="url(#eyeReflection)"/>
|
||||
<circle cx="128" cy="92" r="6" fill="url(#eyeReflection)"/>
|
||||
<circle cx="72" cy="108" r="3" fill="#fff" opacity="0.6"/>
|
||||
<circle cx="142" cy="108" r="3" fill="#fff" opacity="0.6"/>
|
||||
|
||||
<!-- Cute Muzzle & Nose -->
|
||||
<path d="M 80 120 C 100 150, 120 120, 100 140 Z" fill="#e5e5e5"/>
|
||||
<path d="M 90 140 C 90 135, 110 135, 110 140 C 110 148, 90 148, 90 140 Z" fill="#ff71ce" filter="url(#neonPink)"/>
|
||||
<path d="M 95 145 C 100 152, 105 145, 105 145" fill="none" stroke="#2d3340" stroke-width="2" stroke-linecap="round"/>
|
||||
|
||||
<!-- Cyberpunk Gentle Neck Ring/Scarf -->
|
||||
<path d="M 50 150 C 80 170, 120 170, 150 150" fill="none" stroke="#05d9e8" stroke-width="6" stroke-linecap="round" filter="url(#neonCyan)"/>
|
||||
|
||||
<!-- Little Floating Data Motes -->
|
||||
<circle cx="30" cy="50" r="3" fill="#ff71ce" filter="url(#neonPink)"/>
|
||||
<circle cx="170" cy="130" r="2" fill="#05d9e8" filter="url(#neonCyan)"/>
|
||||
<circle cx="150" cy="40" r="4" fill="#ff71ce" filter="url(#neonPink)"/>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.5 KiB |
@@ -1,49 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<defs>
|
||||
<radialGradient id="bgGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#140722"/>
|
||||
<stop offset="100%" stop-color="#0a0512"/>
|
||||
</radialGradient>
|
||||
<filter id="neonViolet" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#b829ea" flood-opacity="0.8"/>
|
||||
</filter>
|
||||
<filter id="neonTeal" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feDropShadow dx="0" dy="0" stdDeviation="5" flood-color="#1cf0eb" flood-opacity="0.9"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background Base -->
|
||||
<rect width="200" height="200" rx="30" fill="url(#bgGlow)"/>
|
||||
|
||||
<!-- Dreamy Cyber-waves -->
|
||||
<path d="M 0 160 Q 50 180, 100 150 T 200 160 M 0 180 Q 50 160, 100 190 T 200 170" fill="none" stroke="#b829ea" stroke-width="2" opacity="0.2" filter="url(#neonViolet)"/>
|
||||
|
||||
<!-- Sloth Head Fluffy Contour -->
|
||||
<path d="M 50 60 C 20 90, 40 160, 100 160 C 160 160, 180 90, 150 60 C 130 30, 70 30, 50 60 Z" fill="#231a31" />
|
||||
|
||||
<!-- Face Mask (Gentle Heart-like shape) -->
|
||||
<path d="M 70 80 C 60 120, 90 140, 100 140 C 110 140, 140 120, 130 80 C 120 50, 80 50, 70 80 Z" fill="#3c304d" />
|
||||
|
||||
<!-- Cozy VR Sleep-Mask / Cyber-visor -->
|
||||
<path d="M 50 80 Q 100 100, 150 80 Q 140 110, 100 115 Q 60 110, 50 80 Z" fill="#0d0914" stroke="#b829ea" stroke-width="2" filter="url(#neonViolet)"/>
|
||||
|
||||
<!-- Sweet Dreamy Digital Lines inside Visor -->
|
||||
<path d="M 70 88 C 80 95, 90 95, 95 88 M 130 88 C 120 95, 110 95, 105 88" fill="none" stroke="#1cf0eb" stroke-width="3" stroke-linecap="round" filter="url(#neonTeal)"/>
|
||||
|
||||
<!-- Cute Sleepy Snout -->
|
||||
<circle cx="100" cy="130" r="6" fill="#140722"/>
|
||||
<path d="M 90 140 C 95 145, 105 145, 110 140" fill="none" stroke="#1cf0eb" stroke-width="2.5" stroke-linecap="round" filter="url(#neonTeal)"/>
|
||||
|
||||
<!-- Sleepy Zzzs and Star nodes -->
|
||||
<text x="140" y="40" fill="#b829ea" font-size="20" font-family="sans-serif" font-weight="bold" filter="url(#neonViolet)">Z</text>
|
||||
<text x="160" y="25" fill="#1cf0eb" font-size="14" font-family="sans-serif" font-weight="bold" filter="url(#neonTeal)">z</text>
|
||||
<text x="175" y="15" fill="#b829ea" font-size="10" font-family="sans-serif" font-weight="bold" filter="url(#neonViolet)">z</text>
|
||||
|
||||
<circle cx="40" cy="50" r="2" fill="#1cf0eb" filter="url(#neonTeal)"/>
|
||||
<circle cx="50" cy="30" r="1.5" fill="#b829ea" filter="url(#neonViolet)"/>
|
||||
|
||||
<!-- Cybernetic headset nodes -->
|
||||
<circle cx="45" cy="85" r="8" fill="#140722" stroke="#1cf0eb" stroke-width="2" filter="url(#neonTeal)"/>
|
||||
<circle cx="155" cy="85" r="8" fill="#140722" stroke="#1cf0eb" stroke-width="2" filter="url(#neonTeal)"/>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
Reference in New Issue
Block a user