TC$mC$hC$n on klassinen ongelma modernissa "flat" ja "minimalistisessa"
UI-suunnittelussa sekC$ erityisesti Dark Modeissa! Graafikolle *tyylikC$s*
hC$viC$vC$n pieni kontrasti (esim. tummanharmaa alue mustalla taustalla) on
konenC$C6lle ja LLM:lle usein painajainen. Mallit yrittC$vC$t ennustaa, missC$
yksi "kortti" tai "paneeli" pC$C$ttyy ja toinen alkaa, ja ne helposti
sekoittavat elementtejC$ toisiinsa.

Kun kC$ytC$t Playwrightia ja CDP:tC$, meillC$ on kaksi pC$C$asiallista ja
erittC$in tehokasta tapaa ratkaista tC$mC$. Toinen muuttaa *alkuperC$istC$
sivun renderC6intiC$* ja toinen muuttaa *otettua kuvaa jC$lkikC$teen*.

### 1. Pre-screenshot (Sivun renderC6innin muutos CSS-injektiolla)  Tehokkain
tapa!

TC$mC$ on usein "smart" tapa. Koska me hallitsemme DOM:ia, voimme kertoa
selaimeen, ettC$ *juuri ennen kaappausta* se piirtC$C$ massiiviset, kirkkaat,
paksuuntuneet C$C$riviivat KAIKKIIN tC$rkeisiin elementteihin. TC$mC$ on kuin
antaisi LLM:lle piirustusoppaan.

Emme edes yritC$ korjata alkuperC$istC$ designia, vaan injektoimme
vC$liaikaisen style-tC$gin, joka korostaa rajat.

**Miten tC$mC$ toteutetaan:**

Ennen `valittu_sivu.screenshot(...)` -riviC$, lisC$C$ tC$mC$ komento:

```python
        # Injektoidaan vC$liaikainen CSS, joka lisC$C$ 2px magenta (pinkki)
reunan
        # KAIKKIIN div, button, input ja textarea elementteihin.
        # Magenta on erinomainen, koska se on harvinainen vC$ri normaaleissa
UIissa
        # ja se erottuu sekC$ vaaleista ettC$ tummista teemoista.
        valittu_sivu.add_style_tag(content="""
            div, button, input, textarea, a[role="button"], section, article {
                border: 2px solid magenta !important;
                outline: 2px solid magenta !important;
                box-sizing: border-box !important;
                /* Tarvittaessa: poistetaan pyC6ristykset */
                border-radius: 0px !important;
            }
        """)

        # TCRKECC: Joskus vaaditaan lyhyt odotus, ettC$ sivu pC$ivittC$C$
tyylit.
        # 200ms on usein riittC$vC$.
        valittu_sivu.wait_for_timeout(200)

        # Otetaan kuva (joka sisC$ltC$C$ nyt nC$mC$ apuviivat)
        valittu_sivu.screenshot(path=f"screenshot_{haku_termi}_debug_grid.webp"
, ...)

```

TC$mC$ menetelmC$ takaa sen, ettC$ malli tietC$C$ *tismalleen*, missC$
elementtien rajat ovat, riippumatta siitC$, kuinka pieni kontrasti graafikon
designissa oli.

### 2. Post-screenshot (Kuvan jC$lkikC$sittely Pillow/OpenCV:llC$)

Jos et halua muuttaa sivun renderC6intiC$, tai et voi hallita DOMia (esim.
sivu estC$C$ injektiot), voimme manipuloida kaapattua kuvaa Pythonilla.

#### A. Paikallinen Kontrastin Parannus (CLAHE - Contrast Limited Adaptive
Histogram Equalization)

TC$mC$ on standardi CV-tekniikka, jolla haetaan yksityiskohtia tummista tai
ylivalottuneista alueista. CLAHE ei paranna kontrastia globaalisti (kuten
Pillowin yksinkertainen enhancer), vaan se jakaa kuvan pieneen ruudukkoon ja
parantaa kontrastia paikallisesti kussakin ruudussa. TC$mC$ on erinomainen
tummille UIille, kuten [cite: Valvomo Proxy][cite: 1] -kuvassa.

TC$mC$ vaatii OpenCV:n (`pip install opencv-python`).

```python
import cv2
import numpy as np
from PIL import Image
import io

# ... Playwright ottaa kuvan png_bytesiin ...
png_bytes = valittu_sivu.screenshot(...)

# 1. Muutetaan tavut Numpy-taulukoksi OpenCV:lle
nparr = np.frombuffer(png_bytes, np.uint8)
img = cv2.imdecode(nparr, cv2.IMREAD_UNCHANGED)

# 2. Muutetaan harmaasC$vyksi (kuten edellisessC$ viestissC$ suositeltiin koon
optimoimiseksi)
gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)

# 3. Luodaan CLAHE-objekti
# clipLimit sC$C$tC$C$ kontrastia (2.0-3.0 on hyvC$), tileGridSize ruudukon
kokoa
clahe = cv2.createCLAHE(clipLimit=2.0, tileGridSize=(8,8))
parannettu_harmaasavy = clahe.apply(gray)

# 4. (Valinnainen mutta hyC6dyllinen): Reunantunnistus (Canny)  saadaan
pelkC$t C$C$riviivat
# Voit joko lC$hettC$C$ tC$mC$n mallille, tai yhdistC$C$ sen parannettuun
kuvaan.
aaniviivat = cv2.Canny(parannettu_harmaasavy, threshold1=30, threshold2=100)

# 5. KC$C$nnetC$C$n takaisin Pillow-kuvaksi tallennusta tai Base64-muunnosta
varten
pilaaja = Image.fromarray(parannettu_harmaasavy) # tai Image.fromarray(aaniviiv
at)

# Tallennus hC$viC6ttC6mC$nC$ WebPnC$
pilaaja.save(webp_polku, format="WEBP", lossless=True)

```

**Yhteenveto:**

Suosittelen lC$mpimC$sti aloittamaan **MenetelmC$stC$ 1 (CSS Injection)**. Se
on tarkin, helpoin toteuttaa Playwrightin kanssa, se ei vaadi lisC$kirjastoja
(kuten OpenCV), ja se poistaa arvaamisen kokonaan konenC$C6ltC$, koska
selaimesi piirtC$C$ ne C$C$riviivat sille valmiiksi.