Opas: tokenisointiesimerkki korvattu oikealla kuvakaappauksella

- Staattinen tekstitokenisointiesimerkki korvattu kuvalla joka
  näyttää värikoodatut tokenit EN/FI-vertailussa
- Markdown-renderöijään lisätty ![alt](src) kuvatuki
- Kuva: static/images/tokenization-example.png

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

network-poc/static/GUIDE.md

@@ -36,29 +36,13 @@ sanan osa, kokonainen sana tai välilyönti. Tokenisaatio tehdään
 BPE-algoritmilla (Byte Pair Encoding) joka oppii yleisimmät
 merkkijonot harjoitusdatasta.
 
-### Esimerkki: koodi
-
-```
-"print('Hello')" → [print] [(' ] [Hello] [')]  = 4 tokenia
-"tulosta('Hei')" → [tul] [osta] [(' ] [He] [i] [')]  = 6 tokenia
-```
-
-Koodi tokenisoidaan tehokkaasti koska `print`, `def`, `return` yms.
-ovat kokonaisia tokeneita. Suomenkielinen `tulosta` joudutaan pilkkomaan
-osiin koska se ei esiinny harjoitusdatassa kokonaisena.
-
 ### Esimerkki: suomi vs. englanti
 
-Sama lause kahdella kielellä Qwen2.5-Coder -tokenisaattorilla:
+Alla oikea tokenisointitulos Qwen2.5-Coder-tokenisaattorilla. Jokainen
+värikoodattu lohko on yksi tokeni — huomaa miten suomi vaatii enemmän
+tokeneita saman merkityksen välittämiseen:
 
-| | Teksti | Tokenit | Määrä | Merkkejä/token |
+![Tokenisointivertailu EN/FI](/images/tokenization-example.png)
-|---|---|---|---|---|
-| EN | The cat sat on the mat | [The] [ cat] [ sat] [ on] [ the] [ mat] | **6** | 3.7 |
-| FI | Kissa istui matolla | [K] [issa] [ ist] [ui] [ mat] [olla] | **6** | 3.2 |
-| EN | Distributed computing in the browser | [Dist] [ributed] [ computing] [ in] [ the] [ browser] | **6** | 6.0 |
-| FI | Hajautettu laskenta selaimessa | [H] [aj] [au] [tettu] [ las] [kenta] [ sel] [aim] [essa] | **9** | 3.3 |
-| EN | Write a function that sorts a list | [Write] [ a] [ function] [ that] [ sorts] [ a] [ list] | **7** | 5.0 |
-| FI | Kirjoita funktio joka lajittelee listan | [K] [irj] [oita] [ funkt] [io] [ joka] [ laj] [ittel] [ee] [ listan] | **10** | 4.0 |
 
 **Huomaa miten:**
 - Englannin yleiset sanat (`the`, `in`, `a`, `function`) ovat kokonaisia tokeneita

network-poc/static/index.html

@@ -4564,6 +4564,7 @@ ${filesHtml}
 
             function inlineFormat(text) {
                 return text
+                    .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" style="max-width:100%;border-radius:8px;border:1px solid #30363d;margin:12px 0;display:block">')
                     .replace(/`([^`]+)`/g, '<code style="background:#161b22;padding:2px 6px;border-radius:3px;font-size:13px;color:#e6edf3">$1</code>')
                     .replace(/\*\*([^*]+)\*\*/g, '<strong style="color:#e6edf3">$1</strong>')
                     .replace(/\*([^*]+)\*/g, '<em>$1</em>');