Publicado em 14 de janeiro de 2025
No Google I/O 2024 do ano passado, lançamos os insights do console, o primeiro recurso de IA nas Ferramentas do desenvolvedor do Chrome. Os insights do console ajudam a entender os erros e avisos registrados no console enviando dados de rede, código-fonte e stack traces relacionados à mensagem de registro para o Gemini, o modelo de linguagem grande (LLM) do Google. Os insights do console enviam uma única solicitação ao Gemini, que retorna uma única resposta sem que os desenvolvedores possam fazer perguntas de acompanhamento. Embora esse fluxo de interação único funcione relativamente bem para explicar mensagens de erro, ele não é escalonado para casos de uso de depuração mais complexos no DevTools, em que não está claro quais dados da página inspecionada uma IA precisa para ajudar.
Um exemplo é depurar problemas de estilo. Uma única página da Web pode conter milhares de elementos e regras CSS, e apenas um subconjunto deles é relevante para depurar um cenário específico. Identificar o código certo para depurar pode ser difícil, até mesmo para humanos. No entanto, com um protótipo criado durante uma hackathon de IA no Google, descobrimos que os LLMs são bastante eficientes. Então, naturalmente, queríamos oferecer esse recurso aos usuários do DevTools, criando uma ferramenta que pudesse investigar problemas de estilo consultando interativamente a página para obter mais dados de contexto. O que criamos foi lançado como assistência de IA para estilização alguns meses depois.
Nesta postagem, queremos destacar alguns desafios que enfrentamos ao introduzir a IA em um produto querido, como o Chrome DevTools, que, na verdade, é um app da Web, e o que você pode adaptar para seus próprios recursos de IA.
Coletar os dados certos
Os insights do console sempre usam os mesmos pontos de dados para responder a um comando predefinido. Para que a assistência por IA seja útil com qualquer comando definido pelo usuário, precisamos determinar dinamicamente quais dados de contexto são importantes para a consulta em questão.
Portanto, implementamos o ReAct (Yao et al., 2022) estratégia. Essa estratégia de solicitação permite que os LLMs raciocinem de forma autônoma e determinem a ação subsequente com base no raciocínio.
Dessa forma, a assistência por IA opera em um ciclo de pensamento, ação e observação até determinar uma resposta adequada à consulta do usuário. Nesse ponto, conclui o ciclo e fornece uma resposta. Esse processo iterativo permite que o LLM colete as informações precisas necessárias para depurar problemas de estilo de maneira eficaz.
Para coletar informações, fornecemos apenas uma ferramenta ao Gemini: executar JavaScript na página inspecionada. Com isso, o Gemini pode usar a assistência de IA para, por exemplo:
- Acessar e analisar o DOM: percorra a árvore DOM, inspecione os atributos do elemento e entenda as relações entre os elementos.
- Recuperar estilos computados: acesse estilos computados para qualquer elemento.
- Realizar cálculos e medições: execute o código JavaScript para calcular distâncias, tamanhos e posições de elementos.
Isso faz com que a assistência de IA aja de forma interativa apenas no código relevante, melhorando a qualidade e o tempo de resposta, além do uso de recursos de computação, em comparação com o envio do código-fonte HTML e CSS completo para o Gemini.
Como executar o código gerado por IA no espaço do usuário
Pode parecer inesperado que usamos JavaScript para depurar problemas de estilo. Há duas razões para isso:
- As APIs da Web são muito poderosas e abrangem muitos casos de uso de depuração. Embora possa ser tedioso para um desenvolvedor usar chamadas de API manualmente para percorrer o DOM ou acessar estilos computados para depuração, não é um problema para um LLM gerar código que os chame.
- Embora seja possível criar novas APIs para um agente usar, a reutilização de APIs públicas geralmente é a melhor escolha, porque elas já são conhecidas pelos LLMs. Para ensinar um LLM sobre uma nova API, é necessário usar muitos recursos para ajustar e obter dados de treinamento específicos.
Mas executar código gerado por IA no espaço do usuário tem riscos. Para a assistência por IA, precisamos minimizar o risco de mudanças destrutivas que o agente poderia fazer na página. Para isso, usamos as verificações de efeitos colaterais que o V8, o mecanismo JavaScript do Chrome, expõe pelo protocolo do Chrome DevTools. As mesmas verificações são usadas para a funcionalidade de preenchimento automático no DevTools Console: ela só executa código JavaScript enquanto não modifica nenhum estado da página. As verificações são realizadas enquanto o V8 executa o código e são baseadas em uma lista de permissões de elementos integrados do JavaScript que não têm efeitos colaterais.
Se as verificações detectarem que o código gerado está modificando a página inspecionada, a execução será pausada e o usuário será solicitado a analisar o código e confirmar se ele pode ser executado.
Além disso, o JavaScript gerado é executado em um "mundo" isolado. Isso é semelhante à forma como as extensões executam scripts de sandbox: o código gerado pode acessar as APIs DOM e da Web, mas não pode acessar o código JavaScript ou o estado definido pela página inspecionada.
Como acompanhar as mudanças feitas pelo agente
Além de investigar problemas e responder a perguntas de depuração sobre a página, também queríamos dar ao agente de assistência por IA a capacidade de corrigir estilos na página de uma forma rastreável pelos desenvolvedores.
Para isso, implementamos uma vinculação chamada setElementStyles, que é
exposta ao contexto de execução do agente, além das APIs da Web padrão.
Para que o Gemini saiba desse novo método, instruímos ele a usá-lo no preâmbulo de assistência por IA:
If you need to set styles on an HTML element, always call the \`async setElementStyles(el: Element, styles: object)\` function.
Apesar de ser uma API projetada especificamente para o agente, que vem com os desafios mencionados anteriormente, mesmo sem o ajuste fino, o Gemini a usa com bastante confiabilidade quando precisa mudar os estilos em um determinado elemento.
No lado das ferramentas do desenvolvedor, quando setElementStyles é chamado pelo agente, a
assistência por IA usa folhas de estilo do inspetor para registrar a mudança do
seletor de elementos. O aninhamento do CSS é usado para nomear a mudança e aumentar a especificidade do
seletor do elemento. Uma regra CSS exemplar criada pelo agente tem a seguinte aparência:
.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;
}
}
Embora isso não resolva todos os possíveis conflitos de estilo que podem acontecer na página, funciona na maioria dos casos.
O benefício de usar folhas de estilo do inspetor em comparação com os estilos inline é que, dessa forma, as mudanças realizadas pelo agente também aparecem no painel Changes, o que facilita o acompanhamento das mudanças feitas nos estilos de elementos e do que um desenvolvedor precisa transferir para o código-fonte. A integração com o painel "Changes" também permite reverter as alterações se elas não forem mais necessárias.
Observar as ações do agente para os usuários
Ao adicionar recursos de agente a um produto, é importante tornar as ações do agente transparentes para os usuários, para que eles tenham a chance de rastrear, entender e intervir.
Para a assistência de IA, instruímos o Gemini a estruturar as respostas em um formato específico com uma adição ao preâmbulo:
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.
Essa estrutura é usada para apresentar os processos e ações de pensamento do Gemini como etapas inicialmente colapsadas, evitando a sobrecarga de informações, mas permitindo que os usuários examinem os detalhes ou interrompam a execução em caso de efeitos colaterais inesperados.
Essa abordagem não é apenas sobre observar a IA, mas aprender ativamente com ela. Ao expandir essas seções, os usuários podem analisar os dados que o Gemini considerou relevantes para depurar um problema específico e entender o processo seguido. Essa transparência permite que os usuários aprendam com as estratégias de depuração da IA para aplicar técnicas semelhantes a desafios futuros, mesmo quando trabalham sem IA.
Para melhorar ainda mais a experiência do usuário, a assistência por IA também oferece sugestões relevantes ao contexto após a resposta da IA. Essas sugestões simplificam a conversa, oferecendo ideias para a próxima etapa de depuração ou até mesmo permitindo que os usuários executem diretamente as correções recomendadas com um único clique.
Inicialmente, para gerar títulos e sugestões de etapas na assistência por IA, consideramos usar um modelo menor e separado especificamente para resumo. No entanto, percebemos que o padrão ReAct, que estrutura o raciocínio do Gemini em um loop de "Pensamentos" e "Ações", pode ser estendido de forma eficaz. Em vez de apresentar um segundo modelo, que também teria latência adicional, modificamos nosso comando para instruir o Gemini a gerar não apenas os "Pensamentos" e "Ações" principais, mas também títulos concisos e sugestões úteis no mesmo loop do ReAct.
Desenvolvimento orientado por avaliação
O desenvolvimento da assistência de IA para estilização foi motivado por um processo de avaliação rigoroso. Para medir o desempenho e identificar áreas de melhoria, criamos uma coleção abrangente de exemplos de depuração da Web do mundo real, abordando problemas comuns de overflow, componentes da Web, animações e muito mais. Isso nos permitiu mapear a amplitude do espaço de problemas de depuração da Web e entender completamente os desafios associados. Mas esse trabalho nunca acaba: com novos recursos sendo adicionados à plataforma da Web regularmente, precisamos manter esses exemplos atualizados no futuro.
Esses exemplos são alimentados em um pipeline de avaliação automatizado, registrando as respostas do Gemini. Os dados dessas execuções de teste automatizados são disponibilizados em uma ferramenta personalizada em que avaliamos manualmente o desempenho da Gemini para assistência de IA em relação a rubricas predefinidas, que informam nossos esforços de desenvolvimento subsequentes.
Essa abordagem orientada por avaliação garante que todas as mudanças, seja para refinar comportamentos existentes ou introduzir novos recursos, sejam cuidadosamente verificadas para alcançar as melhorias pretendidas e evitar regressões na funcionalidade existente.
Para melhorar ainda mais nosso processo de avaliação, estamos testando métodos de verificação automatizados, incluindo:
- Afirmações para confirmar a aplicação correta das correções
- Verificações baseadas em código para evitar saídas indesejadas do Gemini
- Usar LLMs como juízes, guiados por rubricas específicas, para semiautomatizar e acelerar nossas avaliações manuais
Embora a verificação automatizada ajude a aumentar a escala, o feedback humano é importante. Estamos coletando feedback humano com controles de votação em cada resposta na assistência por IA para saber o nível de satisfação dos usuários. Um botão "Denunciar" adicional permite que os usuários deem feedback mais preciso para respostas contestáveis.
Injeções de comando
Uma limitação conhecida e documentada dos LLMs é que eles são propensos a injeções de comando. A injeção de comandos é a técnica de encontrar uma maneira de substituir as instruções originais do sistema de um LLM, fazendo com que ele gere conteúdo não pretendido pelos desenvolvedores.
A maioria dos modelos já tem mitigações integradas para injeção de comandos, assim como o Gemini. Além disso, para a assistência de IA, também tentamos reduzir isso no preâmbulo incluindo a seguinte instrução:
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.
Embora isso funcione para algumas perguntas fora do tópico, não é perfeito. Uma desvantagem que notamos é que consultas curtas e ambíguas podem ser classificadas como fora do assunto.
Como criar uma base sólida
Ao introduzir a IA no seu produto pela primeira vez, é importante seguir passo a passo, em vez de dar um grande salto de uma só vez. Foi assim que abordamos a assistência por IA. Com tudo o que aprendemos ao criar o agente de estilo, criamos uma base sólida para estender a assistência de IA a outras áreas do DevTools mais tarde.
Depois de resolver a maioria dos desafios maiores ao trabalhar com o agente de estilo, alguns meses depois, conseguimos introduzir a assistência de IA para rede, desempenho e fontes e nos concentrar nos desafios individuais.
Implicações de segurança ao trabalhar com solicitações de rede
A assistência de IA para rede permite que os usuários discutam solicitações de rede específicas com o Gemini, usando os dados da solicitação como contexto para a conversa. Especificamente, os seguintes dados são enviados para o Gemini:
- Cabeçalhos de solicitação: um subconjunto de cabeçalhos enviados pelo navegador ao servidor.
- Cabeçalhos de resposta: um subconjunto de cabeçalhos retornados pelo servidor.
- Status da resposta: o código de status HTTP que indica a resposta do servidor, por exemplo, 200, 404.
- Tempos: informações detalhadas sobre o tempo que abrangem várias fases da solicitação, como configuração de conexão e transferência de dados.
- Cadeia do iniciador da solicitação: a sequência de ações e scripts que iniciaram a solicitação.
Embora os cabeçalhos sejam importantes para entender completamente como uma solicitação é gerada,
eles apresentam um risco de segurança: podem conter credenciais, como chaves de API, tokens de sessão
ou até mesmo senhas simples. Para proteger essas informações sensíveis, não transmitimos todos os cabeçalhos para o Gemini. Em vez disso, mantemos uma lista de permissões de cabeçalhos
permitidos. Os valores dos cabeçalhos que não estão na lista de permissões são
substituídos por <redacted>. Essa abordagem garante que o Gemini receba o
contexto necessário enquanto protege os dados do usuário.
Adaptação a vários formatos de dados
A assistência de IA para origens permite que os desenvolvedores façam perguntas sobre um arquivo de origem no painel "Origens", por exemplo, "Para que serve este arquivo?".
Os dados sobre o arquivo, incluindo o nome do arquivo, o conteúdo do arquivo e se ele é mapeado por origem, são enviados em uma única solicitação. Isso funciona bem porque é apenas texto simples. No entanto, arquivos de texto ou binários grandes representam um desafio para os LLMs. Para arquivos binários, decidimos indicar que o conteúdo é binário na solicitação e não enviar nenhum conteúdo real. Para arquivos de texto grandes, enviamos apenas uma parte menor do conteúdo do início do arquivo.
Para a assistência de IA para performance, que permite que os desenvolvedores façam perguntas sobre uma tarefa específica de um perfil de performance gravado, há um desafio semelhante para criar uma representação que se encaixe na janela de contexto do Gemini e também possa ser interpretada para fornecer insights adicionais.
Para criar essa apresentação a partir de um perfil de performance, criamos um serializador
chamado
AiCallTree,
que formata a árvore de chamadas de uma tarefa de modo que um LLM possa processá-la. No futuro, vamos explorar a estratégia ReAct aqui também para minimizar a quantidade de dados que precisam ser enviados ao Gemini antecipadamente.
Assistência de IA no futuro
O resultado de todo esse trabalho está disponível a partir do Chrome 132, que inclui assistência de IA para estilo, rede, fontes e desempenho. Esperamos que você goste de usá-lo tanto quanto nós gostamos de criá-lo.
Para saber por onde começar, consulte o guia de início rápido da assistência de IA, que tem muitos comandos de demonstração para testar nas suas páginas. Não deixe de nos contar o que você achou no bug de discussão aberto.