Google vypustil svého AI chatbota Gemini také do nástrojů pro vývojáře v prohlížeči Chrome (DevTools). Internetová jednička tomu říká AI assistance panel a hlavní výhoda spočívá v tom, že má chatbot plnou moc nad právě načtenou stránkou. Dokáže ji tedy nejen číst, ale i měnit podle vašeho přání!
Specialitu ocení weboví kodéři při ladění a testování, hodí se ale i běžným smrtelníkům, kteří si pomocí chatbota v DevTools snadno vyrobí třeba bookmarklet – tedy javascriptový kód ve formě URL záložky, která se na aktuální stránce spustí po klepnutí na odkaz a něco s ní provede.
Video: Gemini roztočí logo Googlu
Koukněte na video výše, kde pomocí Gemini v DevTools roztočíme logo Googlu na jeho titulní stránce. Níže v článku si to rozebereme krok za krokem.
AI Gemini upravuje živou stránku
Nástroje pro vývojáře spustíme buď z hlavní nabídky prohlížeče (Trojtečkové menu – Další nástroje – Nástroje pro vývojáře), anebo klávesovou zkratkou Ctrl+Shift+I. Další klávesovou zkratkou Ctrl+Shift+C se pak přepneme do výběru elementu – konkrétního prvku HTML prvku na právě zobrazené stránce.
Nástroje pro vývojáře v Chromu a spodní pás karet se záložkou AI assistance. Pokud je pás skrytý, zobrazíte jej klepnutím na ESC
Když nyní budeme jezdit myší po webu Googlu, budou se barevně označovat elementy nad kurzorem. Tímto způsobem vybereme hlavní logo nad vyhledávacím políčkem a klepnutím potvrdíme jeho výběr. Jedná se o HTML element <img> (obrázek) s identifikátorem class (třída) lnXdpd.
V DevTools se poté se poté přepneme na spodní kartu AI assistance. Pokud tam není, je tento blok karet vypnutí a zobrazíme jej klepnutím na ESC.
V režimu výběru elementu označíme obrázek s logem Googlu
Na kartě už na nás čeká AI Gemini a také označený identifikátor obrázku, o kterém se nyní budeme s chatbotem povídat. Dám mu jednoduchý úkol v češtině:
Vytvoř s tímto elementem animaci. Element se bude pomalu otáčet okolo své osy ve směru hodinových ručiček.
Chatbot generuje kód. Vše se odehrává na serverech Googlu, takže pozor při testování interních webů s citlivými podnikovými daty
Chrome odešle povel včetně HTML kódu stránky na server Googlu (pozor tedy na citlivá/podniková data při testování interních webů), zpracuje odpověď a vyplivne výsledek – javascriptový kód, který začne pomocí kaskádových stylu CSS pomalu otáčet obrázkem s logem Googlu ve směru hodinových ručiček.
A teď to nejdůležitější: Chrome žádá o svolení ke vložení kódu do stránky a jeho spuštění
Toto stejné bychom mohli o něco složitěji provést v každém AI chatbotovi, jak už jsme si ale řekli výše, AI assistance v nástrojích pro vývojáře prohlížeče Chrome může kód zároveň vložit do stránky a interpretovat – spustit. Pod odpovědí chatbota stačí klepnout na tlačítko Continue.
Hotový kód můžeme rovnou spustit
A protože jsme v prostředí chatu, můžeme si s Gemini dále povídat, animaci vylepšovat a nakonec robota požádat, aby kód vyjádřil takovým způsobem, že jej budeme moci zkopírovat jako URL pro záložku.
Kód funguje, logo se otáčí a my můžeme naši miniaplikaci dále vylepšovat
Vytvoříme si tedy bookmarklet – miniaplikaci ve formě lokálního odkazu –, který po klepnutí roztočí logo Googlu. Anebo pochopitelně provede něco mnohem praktičtějšího. Mohl by třeba:
- předvyplnit nějaký formulář,
- vytáhnout z načtené stránky nějaká zajímavá data a obrázky
- nebo třeba změnit vzhled webu
AI assistance v Chromu proto není pouze skvělý nástroj pro webové vývojáře a testery, ale i pro běžné uživatele, kteří si mohou velmi jednoduše vyrobit na míru šité vylepšováky pro své oblíbené stránky.