Data publikacji: 14 stycznia 2025 r.
W zeszłym roku na konferencji Google I/O 2024 wprowadziliśmy statystyki konsoli, czyli pierwszą funkcję AI w Chrome DevTools. Statystyki konsoli ułatwiają analizowanie błędów i ostrzeżeń zarejestrowanych w konsoli. Polega to na wysyłaniu danych sieciowych, kodu źródłowego i zrzutów stosu powiązanych z komunikatem logowania do Gemini, czyli do dużego modelu językowego (LLM) Google. Statystyki konsoli wysyłają do Gemini pojedynczy prompt, który zwraca pojedynczą odpowiedź bez możliwości zadawania przez programistów dodatkowych pytań. Chociaż ten pojedynczy przepływ interakcji sprawdza się stosunkowo dobrze w przypadku wyjaśniania komunikatów o błędach, nie można go stosować w bardziej złożonych przypadkach debugowania w Narzędziach deweloperskich, ponieważ nie jest jasne, jakich danych z przeglądanej strony potrzebuje AI, aby pomóc.
Jednym z takich przypadków jest debugowanie problemów ze stylami. Pojedyncza strona internetowa może zawierać tysiące elementów i reguł CSS, z których tylko część jest istotna w przypadku debugowania konkretnego scenariusza. Wybranie odpowiedniego kodu do debugowania może być trudne nawet dla ludzi. Jednak dzięki prototypowi stworzonemu podczas hackathonu AI w Google dowiedzieliśmy się, że modele LLM radzą sobie z tym całkiem nieźle. Dlatego chcieliśmy udostępnić tę funkcję użytkownikom Narzędzi deweloperskich, tworząc narzędzie, które może badać problemy ze stylami, wykonując interaktywne zapytania o dodatkowe dane kontekstowe. Kilka miesięcy później wprowadziliśmy pomoc AI w stylizacji.
W tym artykule chcemy przybliżyć Ci wyzwania, z którymi mieliśmy do czynienia podczas wprowadzania AI do popularnej usługi, takiej jak Narzędzia deweloperskie w Chrome, która jest w istocie aplikacją internetową. Podpowiemy też, jak możesz dostosować to rozwiązanie do własnych funkcji AI.
Zbieranie odpowiednich danych
Statystyki w konsoli zawsze używają tych samych punktów danych do odpowiedzi na wstępnie zdefiniowany prompt. Aby pomoc AI była przydatna w przypadku dowolnego promptu zdefiniowanego przez użytkownika, musimy dynamicznie określić, jakie dane kontekstowe są ważne dla danego zapytania.
Dlatego wdrożyliśmy metodę ReAct (Yao i in., 2022) strategii. Ta strategia promptów umożliwia LLM samodzielne wyciąganie wniosków i określanie dalszych działań na podstawie tych wniosków.
W ten sposób asystent AI działa w cyklu myślenia, działania i obserwacji, aż do momentu, gdy znajdzie odpowiednią odpowiedź na zapytanie użytkownika. Następnie kończy cykl i podaje odpowiedź. Ten iteracyjny proces pozwala LLM zebrać dokładne informacje potrzebne do skutecznego debugowania problemów ze stylami.
Aby zebrać informacje, Gemini ma tylko jedno narzędzie: uruchamianie kodu JavaScript na stronie, którą sprawdza. Dzięki temu Gemini może na przykład:
- Uzyskiwanie dostępu do interfejsu DOM i analizowanie go: przechodzenie po drzewie DOM, sprawdzanie atrybutów elementów i poznawanie relacji między elementami.
- Pobierz style wynikowe: uzyskaj dostęp do stylów wynikowych dowolnego elementu.
- Wykonywanie obliczeń i pomiarów: kod JavaScript służy do obliczania odległości, rozmiarów i pozycji elementów.
Dzięki temu AI może interaktywnie działać tylko na odpowiednim kodzie, co poprawia jakość odpowiedzi, czas odpowiedzi i wykorzystanie zasobów obliczeniowych w porównaniu z wysyłaniem do Gemini pełnego kodu źródłowego HTML i CSS.
Uruchamianie kodu wygenerowanego przez AI w przestrzeni użytkownika
Może się wydawać, że użycie JavaScriptu do debugowania problemów ze stylami jest niespodziewane. Może to wynikać z 2 głównych przyczyn:
- Interfejsy API sieci web są bardzo wydajne i zawierają wiele przypadków użycia związanych z debugowaniem. Chociaż ręczne wywoływanie interfejsów API w celu przeglądania DOM-u lub uzyskiwania dostępu do obliczonych stylów na potrzeby debugowania może być żmudne dla dewelopera, nie stanowi problemu dla LLM wygenerowanie kodu wywołującego te elementy.
- Chociaż można tworzyć nowe interfejsy API do użycia przez agenta, często lepszym rozwiązaniem jest ponowne użycie istniejących, publicznych interfejsów API, ponieważ są one już znane LLM. Nauczenie LLM nowego interfejsu API wymaga wielu zasobów do dostosowania i specyficznych danych treningowych.
Jednak uruchamianie kodu wygenerowanego przez AI w przestrzeni użytkownika wiąże się z pewnymi zagrożeniami. W przypadku pomocy AI musieliśmy zminimalizować ryzyko wprowadzenia przez agenta zmian, które mogłyby zniszczyć stronę. W tym celu użyliśmy mechanizmu sprawdzania efektów ubocznych, który V8, mechanizm JavaScriptu w Chrome udostępnia za pomocą protokołu narzędzi deweloperskich w Chrome. W przypadku funkcji autouzupełniania w konsoli Narzędzi deweloperskich są używane te same mechanizmy kontroli: kod JavaScript jest wykonywany tylko wtedy, gdy nie zmienia stanu strony. Sprawdzanie odbywa się podczas wykonywania kodu przez V8 i oparte jest na liście dozwolonych wbudowanych funkcji JavaScript, o których wiadomo, że nie mają żadnych skutków ubocznych.
Jeśli podczas sprawdzania zostanie wykryte, że wygenerowany kod modyfikuje sprawdzaną stronę, wykonanie zostanie wstrzymane, a użytkownik zostanie poproszony o sprawdzenie kodu i potwierdzenie, że może on zostać uruchomiony.
Generowany kod JavaScript jest też wykonywany w tak zwanym odizolowanym „świecie”. Działa to podobnie jak uruchamianie skryptów w piaskownicy przez rozszerzenia: wygenerowany kod może uzyskać dostęp do interfejsów DOM i Web API, ale nie może uzyskać dostępu do kodu JavaScript ani stanu zdefiniowanego przez skanowaną stronę.
Śledzenie zmian wprowadzonych przez agenta
Oprócz analizowania problemów i odpowiadania na pytania dotyczące debugowania strony chcieliśmy też umożliwić asystentowi AI poprawianie stylów na stronie w sposób możliwy do zweryfikowania przez programistów.
Aby to osiągnąć, wprowadziliśmy ograniczenie o nazwie setElementStyles, które udostępniamy kontekstowi wykonania agenta oprócz domyślnych interfejsów API sieci Web.
Aby Gemini wiedziało o tej nowej metodzie, przekazujemy mu instrukcje dotyczące jej używania w preambule pomocy AI:
If you need to set styles on an HTML element, always call the \`async setElementStyles(el: Element, styles: object)\` function.
Mimo że jest to interfejs API zaprojektowany specjalnie dla agenta, co wiąże się z wymienionymi wcześniej wyzwaniami, nawet bez dokładnego dostosowania Gemini dość niezawodnie używa go, gdy musi zmienić styl danego elementu.
Gdy funkcja setElementStyles jest wywoływana przez agenta, AI assistance używa szablonów stylów w narzędziach DevTools do rejestrowania zmian w selektorze elementów. Zagnieżdżanie CSS służy do nadania nazwy zmianie i zwiększenia specyficzności selektora elementu. Przykładowa reguła CSS utworzona przez agenta wygląda tak:
.ai-style-change-1 { /* the ID is incremented for each change*/
.element-selector { /* Element selector is computed based on the element setElementStyles was called on. */
color: blue;
}
}
Chociaż nie rozwiązuje to wszystkich możliwych konfliktów stylów, które mogą wystąpić na stronie, w większości przypadków działa.
Zaletą korzystania ze stylów w inspektorze w porównaniu ze stylami wstawianymi w tekście jest to, że zmiany wprowadzone przez agenta są też widoczne w panelu Zmiany, co ułatwia śledzenie zmian w stylach elementów i określanie, co deweloper musi przenieść do kodu źródłowego. Integracja z panelem Zmiany umożliwia też wycofanie zmian, jeśli nie są już potrzebne.
Udostępnianie działań agenta użytkownikom
Dodając do usługi funkcje związane z usługami agentów, należy zadbać o to, aby działania agenta były przejrzyste dla użytkowników, aby mogli oni śledzić, rozumieć i potencjalnie interweniować w przypadku problemów.
Dlatego w przypadku pomocy AI instruujemy Gemini, aby sformatowała odpowiedzi w określonym formacie z dodatkiem wstępu:
You are going to answer to the query in these steps:
* THOUGHT
* TITLE
* ACTION
* ANSWER
* SUGGESTIONS
Use THOUGHT to explain why you take the ACTION. Use TITLE to provide a short summary of the thought.
Ta struktura jest następnie wykorzystywana do przedstawiania procesów myślowych i działań Gemini jako początkowo złożonych kroków, co zapobiega przeładowaniu informacjami, a jednocześnie pozwala użytkownikom sprawdzać szczegóły lub zatrzymywać wykonanie w przypadku niezamierzonych skutków ubocznych.
To podejście nie polega tylko na obserwowaniu AI, ale na aktywnym uczeniu się od niej. Po rozwinięciu tych sekcji użytkownicy mogą analizować dane, które Gemini uznała za istotne dla debugowania konkretnego problemu, i rozumieć proces, który został zastosowany. Dzięki tej przejrzystości użytkownicy mogą uczyć się na podstawie strategii debugowania AI, aby stosować podobne techniki w przyszłości, nawet bez korzystania z AI.
Aby jeszcze bardziej ułatwić użytkownikom korzystanie z takiej pomocy, AI podaje również trafne sugestie w kontekście odpowiedzi. Te sugestie upraszczają rozmowę, podając pomysły na kolejny krok debugowania, a nawet pozwalają użytkownikom bezpośrednio stosować zalecane poprawki za pomocą jednego kliknięcia.
Początkowo rozważaliśmy użycie mniejszego, oddzielnego modelu do generowania tytułów kroków i sugestii w ramach pomocy AI. Zdaliśmy sobie jednak sprawę, że wzór ReAct, który strukturyzuje rozumowanie Gemini w pętli „Myśli” i „Działania”, można skutecznie rozszerzyć. Zamiast wprowadzać drugi model, który również wiązałby się z dodatkowym opóźnieniem, zmodyfikowaliśmy prompt, aby polecić Gemini generowanie nie tylko podstawowych „Myśli” i „Działań”, ale też zwięzłych tytułów i przydatnych sugestii w ramach tego samego cyklu ReAct.
Rozwój oparty na ocenie
Prace nad wspomaganiem stylizacji przez AI były prowadzone zgodnie ze ścisłym procesem oceny. Aby zmierzyć wydajność i określić obszary wymagające poprawy, przygotowaliśmy obszerną kolekcję przykładów debugowania stron internetowych, w których omówiliśmy m.in. typowe problemy z przepełnieniem, komponenty internetowe i animację. Dzięki temu mogliśmy zmapować szeroki zakres problemów związanych z debugowaniem stron internetowych i dokładnie poznać związane z nimi wyzwania. To jednak nie koniec pracy: nowe funkcje są regularnie dodawane do platformy internetowej, więc musimy na bieżąco aktualizować te przykłady.
Przykłady te są przekazywane do automatycznego procesu oceny, który rejestruje odpowiedzi Gemini. Dane z tych automatycznych testów są następnie dostępne w specjalnym narzędziu, w którym ręcznie oceniamy skuteczność Gemini w zakresie pomocy AI na podstawie zdefiniowanych wcześniej kryteriów. Wyniki te są wykorzystywane w dalszych pracach rozwojowych.
Dzięki temu podejściu wszystkie zmiany, niezależnie od tego, czy są to udoskonalenia dotychczasowych zachowań czy wprowadzenie nowych funkcji, są dokładnie sprawdzane, aby osiągnąć zamierzone cele i zapobiec regresji dotychczasowej funkcjonalności.
Aby jeszcze bardziej usprawnić proces oceny, testujemy automatyczne metody weryfikacji, takie jak:
- Założenia potwierdzające prawidłowe zastosowanie poprawek
- Sprawdzanie kodu w celu zapobiegania niepożądanym wynikom z Gemini
- Wykorzystanie modeli LLM jako sędziów, kierowanych przez konkretne kryteria, do częściowej automatyzacji i przyspieszenia naszych ręcznych ocen
Chociaż weryfikacja automatyczna pomaga zwiększać skalę, opinie weryfikatorów są ważne. Zbieramy opinie użytkowników za pomocą przycisków głosowania pod każdą odpowiedzią w systemie AI assistance, aby dowiedzieć się, jak zadowoleni są użytkownicy. Dodatkowy przycisk zgłaszania pozwala użytkownikom dokładniej oceniać odpowiedzi, które budzą wątpliwości.
Wstrzykiwanie promptów
Znane i udokumentowane ograniczenie modeli LLM polega na tym, że są one podatne na wstrzykiwanie promptów. Wstrzyknięcie promptu to technika polegająca na znalezieniu sposobu na zastąpienie oryginalnych instrukcji systemowych dużego modelu językowego, aby generował on treści nieprzewidziane przez programistów.
Większość modeli ma obecnie wbudowane środki zaradcze na wypadek wstrzyknięcia promptu, podobnie jak Gemini. W przypadku pomocy AI staramy się też ograniczyć ten problem w wstępie, dodając te instrukcje:
If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about debugging web pages.
Ta metoda sprawdza się w przypadku niektórych pytań wyraźnie niezwiązanych z tematem, ale nie jest idealna. Zauważyliśmy, że krótkie i niejednoznaczne zapytania mogą zostać zaklasyfikowane jako nie na temat.
Budowanie na solidnych podstawach
Gdy po raz pierwszy wprowadzasz AI do swojego produktu, warto postępować krok po kroku, zamiast robić duży skok naraz. Tak też podchodzimy do sztucznej inteligencji. Dzięki temu, czego nauczyliśmy się podczas tworzenia agenta stylizacji, stworzyliśmy solidne podstawy, które pozwolą nam w przyszłości rozszerzyć pomoc AI na inne obszary DevTools.
Po rozwiązaniu większości większych problemów związanych z agentem stylizacji mogliśmy w ciągu kilku miesięcy wprowadzić pomoc AI w zakresie sieci, wydajności i źródeł, a także skupić się na indywidualnych problemach.
konsekwencje bezpieczeństwa związane z pracą z żądaniami sieciowymi;
Asystent AI dla sieci umożliwia użytkownikom omawianie konkretnych próśb dotyczących sieci z Gemini, przy użyciu danych z prośby jako kontekstu rozmowy. Do Gemini wysyłane są te dane:
- Nagłówki żądania: podzbiór nagłówków wysyłanych przez przeglądarkę do serwera.
- Nagłówki odpowiedzi: podzbiór nagłówków zwróconych przez serwer.
- Stan odpowiedzi: kod stanu HTTP wskazujący na odpowiedź serwera (np. 200, 404).
- Czasy: szczegółowe informacje o czasach trwania poszczególnych faz żądania, np. konfiguracji połączenia i przesyłania danych.
- Łańcuch inicjatora żądania: sekwencja działań i skryptów, które zainicjowały żądanie.
Nagłówki są ważne, ponieważ pozwalają w pełni zrozumieć, jak powstaje żądanie, ale stanowią też zagrożenie dla bezpieczeństwa: mogą zawierać dane logowania, takie jak klucze API, tokeny sesji, a nawet hasła w prostej postaci. Aby chronić takie informacje poufne, nie przekazujemy wszystkich nagłówków do Gemini. Zamiast tego utrzymujemy listę dozwolonych nagłówków. Wartości nagłówków, które nie znajdują się na liście dozwolonych, są zastępowane wartością <redacted>. Dzięki temu Gemini otrzymuje niezbędny kontekst, a jednocześnie chroni dane użytkowników.
dostosowywanie się do różnych formatów danych;
Asystent AI dla źródeł umożliwia programistom zadawanie pytań dotyczących pliku źródłowego w panelu źródeł, np. „Do czego służy ten plik?”.
Dane o pliku, w tym nazwa pliku, jego zawartość i to, czy jest on powiązany ze źródłem, są wysyłane w jednym promptzie. To działa, ponieważ jest to zwykły tekst. Duże pliki tekstowe lub pliki binarne stanowią jednak wyzwanie dla dużych modeli językowych. W przypadku plików binarnych postanowiliśmy wskazać w promptach, że są to pliki binarne, i nie przesyłać żadnych rzeczywistych treści. W przypadku dużych plików tekstowych wysyłamy tylko mniejszą część treści z początku pliku.
W przypadku pomocy dotyczącej wydajności, która pozwala deweloperom zadawać pytania dotyczące konkretnego zadania z zapisanego profilu wydajności, pojawia się podobny problem polegający na utworzeniu reprezentacji, która mieści się w oknie kontekstowym Gemini i może też zostać zinterpretowana w celu uzyskania dodatkowych informacji.
Aby utworzyć taką prezentację na podstawie profilu wydajności, opracowaliśmy specjalny serializator o nazwie AiCallTree, który formatuje drzewo wywołań dla zadania w sposób, który może przetworzyć LLM. W przyszłości będziemy też wykorzystywać strategię ReAct, aby zminimalizować ilość danych, które należy przesłać do Gemini z wyprzedzeniem.
Pomoc AI w przyszłości
Efekt tych prac jest dostępny od wersji 132 Chrome, która zawiera pomoc AI w zakresie stylizacji, sieci, źródeł i wydajności. Mamy nadzieję, że będziesz z niego korzystać z tego samego entuzjazmu, z jakiego my go tworzyliśmy.
Aby dowiedzieć się, od czego zacząć, zapoznaj się z kompleksowym przewodnikiem pomocy AI, w którym znajdziesz wiele instrukcji demonstracyjnych do wypróbowania na własnych stronach. Podziel się z nami swoją opinią w dyskusji na forum.