tooltipit eri toimille

network-poc/static/index.html

@@ -251,6 +251,18 @@
         }
         .task-ready { background: #23392050; color: var(--success-color); border: 1px solid #23392080; }
         .task-soon { background: #d2992215; color: #d29922; border: 1px solid #d2992240; }
+        .task-info {
+            display: none;
+            margin-top: 10px;
+            padding-top: 10px;
+            border-top: 1px solid var(--border-color);
+            font-size: 12px;
+            line-height: 1.6;
+            color: #8b949e;
+        }
+        .task-info strong { color: var(--text-color); }
+        .task-info em { color: var(--accent-color); font-style: normal; }
+        .task-option.selected .task-info { display: block; }
 
         .download-bar {
             background: #0d1117;
@@ -328,6 +340,14 @@
                         <div class="task-desc">EN/FI-kieliparien tokenisointitehokkuuden vertailu Qwen2.5-tokenizeria käyttäen</div>
                         <div class="task-size">Lataus: ~7 MB (tokenizer)</div>
                         <span class="task-badge task-ready">Valmis</span>
+                        <div class="task-info">
+                            <strong>Miten tokenisaatio toimii?</strong>
+                            Kielimallit eivät lue tekstiä kirjain kerrallaan. Sen sijaan teksti pilkotaan <em>tokeneiksi</em> — sanoja, tavuja tai sananosia, joista jokaisella on oma numerotunnisteensa mallin sanastossa.
+                            <br><br>
+                            Tokenizer on <em>BPE</em> (Byte Pair Encoding) -algoritmi: se yhdistää yleisimpiä merkkipareja isommiksi yksiköiksi. Englannissa "the" on yksi token, mutta suomessa "kirjoittamisen" voi olla 3-4 tokenia, koska tokenizer on koulutettu pääosin englanninkielisellä datalla.
+                            <br><br>
+                            <strong>Miksi tällä on väliä?</strong> Enemmän tokeneita = kalliimpaa ja hitaampaa. Sama lause suomeksi voi maksaa 50-100% enemmän tokeneita kuin englanniksi.
+                        </div>
                     </label>
                     <label class="task-option" data-task="smollm-135m">
                         <input type="radio" name="task" value="smollm-135m" style="display:none">
@@ -335,6 +355,14 @@
                         <div class="task-desc">Kevyt kielimalli tekstigeneraatioon — sopii kaikille laitteille (CPU)</div>
                         <div class="task-size">Lataus: ~269 MB (safetensors) + 2 MB (tokenizer)</div>
                         <span class="task-badge task-ready">Valmis</span>
+                        <div class="task-info">
+                            <strong>SmolLM 135M</strong> (HuggingFace)
+                            <br>Llama-arkkitehtuuri: 30 kerrosta, 576-dim embeddings, 9 attention-headiä.
+                            <br><br>
+                            135 miljoonaa parametria — noin 1000x pienempi kuin GPT-4. Silti kykenee yksinkertaiseen tekstigeneraatioon. Tämä malli mahtuu mihin tahansa laitteeseen ja pyörii kokonaan selaimessasi WebAssemblylla.
+                            <br><br>
+                            <strong>Miten inferenssi toimii?</strong> Malli ennustaa aina seuraavan tokenin edellisten perusteella (<em>autoregressive generation</em>). Jokainen token vaatii yhden "forward pass" -laskennan kaikkien kerrosten läpi. 135M-mallilla tämä kestää ~0.8s selaimessa ja ~90ms natiivisti.
+                        </div>
                     </label>
                     <label class="task-option" data-task="qwen-05b">
                         <input type="radio" name="task" value="qwen-05b" style="display:none">
@@ -342,6 +370,14 @@
                         <div class="task-desc">Tehokkaampi kielimalli — vaatii vähintään 2 GB muistia (CPU)</div>
                         <div class="task-size">Lataus: ~990 MB (safetensors) + 7 MB (tokenizer)</div>
                         <span class="task-badge task-ready">Valmis</span>
+                        <div class="task-info">
+                            <strong>Qwen2.5 0.5B</strong> (Alibaba Cloud)
+                            <br>24 kerrosta, 896-dim, 14 attention-headiä, 2 KV-headiä (GQA).
+                            <br><br>
+                            490 miljoonaa parametria ja 151 936 tokenin sanasto — 3x suurempi kuin SmolLM ja huomattavasti koherentimpi. <em>Grouped Query Attention</em> (GQA) vähentää muistinkäyttöä jakamalla key/value-headit 14:n query-headin kesken.
+                            <br><br>
+                            <strong>Miksi tämä on hitaampi?</strong> Jokaisessa kerroksessa lasketaan attention-matriisi (Q*K^T), joka skaalautuu O(n^2) sekvenssipituuden mukaan. 24 kerrosta x 14 headiä = 336 attention-laskentaa per token. Selaimessa CPU/Wasm: ~2.5s/token, natiivisti: ~90ms/token.
+                        </div>
                     </label>
                     <label class="task-option" data-task="phi3-mini">
                         <input type="radio" name="task" value="phi3-mini" style="display:none">
@@ -349,6 +385,14 @@
                         <div class="task-desc">Iso kielimalli — vaatii native-noden (Docker + GPU)</div>
                         <div class="task-size">~7.6 GB — liian suuri selaimelle</div>
                         <span class="task-badge task-soon">Vain native</span>
+                        <div class="task-info">
+                            <strong>Phi-3 Mini 3.8B</strong> (Microsoft)
+                            <br>32 kerrosta, 3072-dim, 32 attention-headiä.
+                            <br><br>
+                            3.8 miljardia parametria — luokassaan yksi tehokkaimmista. Microsoftin "small language model" -tutkimuksen tulos: laadukas koulutusdata kompensoi pientä mallikokoa. Pärjää monissa tehtävissä 7B-13B mallien tasolla.
+                            <br><br>
+                            <strong>Miksi ei pyöri selaimessa?</strong> F32-painot vaativat ~15 GB muistia. Selainten Wasm-muistiraja on tyypillisesti 4 GB. GPU-kiihdytyksellä (CUDA/ROCm) malli mahtuu 24 GB VRAM-näytönohjaimeen ja generoi ~50-100 tok/s.
+                        </div>
                     </label>
                 </div>
             </div>