Fecha de publicación: 14 de enero de 2025
En Google I/O 2024 del año pasado, lanzamos las estadísticas de consola, la primera función de IA en las Herramientas para desarrolladores de Chrome. Las estadísticas de la consola ayudan a comprender los errores y las advertencias registrados en la consola, ya que envían datos de red, código fuente y seguimientos de pila relacionados con el mensaje de registro a Gemini, el modelo de lenguaje extenso (LLM) de Google. Las estadísticas de Play Console envían una sola instrucción a Gemini que muestra una sola respuesta sin que los desarrolladores puedan hacer preguntas adicionales. Si bien este flujo de interacción único funciona relativamente bien para explicar los mensajes de error, no se escala a casos de uso de depuración más complejos dentro de DevTools, donde no está claro qué datos de la página inspeccionada necesitaría una IA para ayudar.
Un caso de uso de este tipo es depurar problemas de diseño. Una sola página web puede contener miles de elementos y reglas de CSS, y solo un subconjunto de ellos es relevante para depurar una situación específica. Identificar el código correcto para depurar puede ser un desafío, incluso para las personas. Sin embargo, con un prototipo creado durante un hackathon de IA en Google, descubrimos que los LLM son bastante decentes en eso. Por lo tanto, con toda naturalidad, queríamos llevar esa potencia a los usuarios de DevTools y crear una herramienta que pueda investigar los problemas de diseño mediante consultas interactivas a la página para obtener datos de contexto adicionales. Lo que creamos se lanzó como asistencia de IA para aplicar diseño unos meses más tarde.
En esta publicación, queremos arrojar luz sobre los desafíos que enfrentamos cuando integramos la IA a un producto querido, como las herramientas para desarrolladores de Chrome, que en esencia es una app web, y lo que puedes adaptar para tus propias funciones de IA.
Recopila los datos correctos
Las estadísticas de la consola siempre usan los mismos datos para responder a una instrucción predefinida. Para que la asistencia de IA sea útil con cualquier instrucción definida por el usuario, debemos determinar de forma dinámica qué datos de contexto son importantes para la consulta en cuestión.
Por lo tanto, implementamos ReAct (Yao et al., 2022). Esta estrategia de indicaciones permite que los LLMs razonen de forma autónoma y determinen la acción posterior en función de su razonamiento.
De esta manera, la asistencia de IA opera en un ciclo de pensamiento, acción y observación hasta que determina una respuesta adecuada a la consulta del usuario, momento en el que concluye el ciclo y proporciona una respuesta. Este proceso iterativo permite que el LLM recopile la información precisa necesaria para depurar problemas de diseño de manera eficaz.
Para recopilar información, le dimos solo una herramienta a Gemini: ejecutar JavaScript en la página inspeccionada. Esto permite que Gemini, a través de la asistencia de IA, haga lo siguiente:
- Accede al DOM y analízalo: recorre el árbol del DOM, inspecciona los atributos de los elementos y comprende las relaciones entre ellos.
- Recuperar estilos calculados: Accede a los estilos calculados de cualquier elemento.
- Realizar cálculos y mediciones: Ejecuta código JavaScript para calcular las distancias, los tamaños y las posiciones de los elementos.
Esto hace que la asistencia de IA actúe de forma interactiva solo en el código relevante, lo que mejora la calidad de la respuesta, el tiempo de respuesta y el uso de recursos de procesamiento, en comparación con el envío del código fuente HTML y CSS completo a Gemini.
Cómo ejecutar código generado por IA en el espacio de usuario
Puede parecer inesperado que, para depurar problemas de diseño, hayamos usado JavaScript. Existen dos motivos para ello:
- Las APIs web son muy potentes y, de forma inherente, abarcan muchos casos de uso de depuración. Si bien puede ser tedioso para un desarrollador usar llamadas a la API de forma manual para recorrer el DOM o acceder a los estilos calculados para depurar, no es un problema para un LLM generar código que los llame.
- Si bien es posible inventar APIs nuevas para que las use un agente, a menudo, la mejor opción es la reutilización de APIs públicas existentes, ya que los LLM ya las conocen. Instruir a un LLM sobre una API nueva requiere muchos recursos para ajustar y obtener datos de entrenamiento específicos.
Sin embargo, ejecutar código generado por IA en el espacio de usuario tiene riesgos. Para la asistencia de IA, fue necesario minimizar el riesgo de cambios destructivos que el agente podría realizar en la página. Para ello, empleamos las verificaciones de efectos secundarios que V8, el motor de JavaScript de Chrome, expone a través del protocolo de Herramientas para desarrolladores de Chrome. Se usan las mismas verificaciones para la funcionalidad de autocompletado en la consola de DevTools: solo ejecuta código JavaScript, siempre que no modifique ningún estado de la página. Las verificaciones se realizan mientras V8 ejecuta el código y se basan en una lista de entidades permitidas de funciones integradas de JavaScript que se sabe que no tienen efectos secundarios.
Si las verificaciones detectan que el código generado está modificando la página inspeccionada, se pausa la ejecución y se le solicita al usuario que revise el código y confirme que es correcto ejecutarlo.
Además, el código JavaScript generado se ejecuta en un llamado “mundo” aislado. Esto es similar a la forma en que las extensiones ejecutan secuencias de comandos de zona de pruebas: el código generado puede acceder al DOM y a las APIs web, pero no puede acceder al código o estado de JavaScript definido por la página inspeccionada.
Seguimiento de los cambios realizados por el agente
Además de investigar los problemas y responder preguntas de depuración sobre la página, también queríamos darle al agente de asistencia de IA la capacidad de corregir los estilos en la página de una manera que los desarrolladores puedan rastrear.
Para lograrlo, implementamos una vinculación llamada setElementStyles que exponemos al contexto de ejecución del agente, además de las APIs web predeterminadas.
Para que Gemini conozca ese nuevo método, le indicamos que lo use en el preámbulo de asistencia de IA:
If you need to set styles on an HTML element, always call the \`async setElementStyles(el: Element, styles: object)\` function.
A pesar de ser una API diseñada específicamente para el agente, que presenta los desafíos mencionados anteriormente, incluso sin ajustarla, Gemini la usa de forma bastante confiable cuando necesita cambiar los estilos de un elemento determinado.
En el lado de DevTools, cuando se llama a setElementStyles desde el agente, la asistencia de IA usa hojas de estilo del inspector para registrar el cambio del selector de elementos. El anidamiento de CSS se usa para nombrar el cambio y aumentar la especificidad del selector del elemento. Por lo tanto, una regla de CSS ejemplar creada por el agente se ve así:
.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;
}
}
Si bien esto no resuelve todos los posibles conflictos de estilo que pueden ocurrir en la página, funciona en la mayoría de los casos.
El beneficio de usar hojas de estilo del inspector en comparación con los estilos intercalados es que, de esta manera, los cambios que realiza el agente también aparecen en el panel de cambios, lo que facilita el seguimiento de los cambios en los estilos de los elementos y lo que un desarrollador debe transferir al código fuente subyacente. La integración con el panel de cambios también permite revertir los cambios si ya no se necesitan.
Cómo hacer que los usuarios puedan observar las acciones del agente
Cuando se agregan funciones de agente a un producto, es importante que las acciones del agente sean transparentes para los usuarios, de modo que tengan la oportunidad de rastrearlas, comprenderlas y, posiblemente, intervenir.
Por lo tanto, para la asistencia de IA, le indicamos a Gemini que estructure las respuestas en un formato específico con una adición al 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.
Luego, esta estructura se usa para presentar los procesos de pensamiento y las acciones de Gemini como pasos inicialmente colapsados, lo que evita la sobrecarga de información y, al mismo tiempo, permite que los usuarios examinen los detalles subyacentes o detengan la ejecución en caso de efectos secundarios no deseados.
Este enfoque no solo se trata de observar la IA, sino de aprender de ella de forma activa. Cuando se expanden estas secciones, los usuarios pueden analizar los datos que Gemini consideró relevantes para depurar un problema específico y comprender el proceso que siguió. Esta transparencia permite a los usuarios aprender de las estrategias de depuración de la IA, de modo que puedan aplicar técnicas similares a desafíos futuros, incluso cuando trabajen sin IA.
Para mejorar aún más la experiencia del usuario, la asistencia de IA también proporciona sugerencias contextualmente relevantes después de la respuesta de la IA. Estas sugerencias optimizan la conversación, ofrecen ideas para el siguiente paso de depuración o incluso permiten que los usuarios ejecuten directamente las correcciones recomendadas con un solo clic.
En un principio, para generar títulos de pasos y sugerencias en la asistencia de IA, consideramos usar un modelo más pequeño y separado específicamente para el resumen. Sin embargo, nos dimos cuenta de que el patrón ReAct, que estructura el razonamiento de Gemini en un bucle de "Pensamientos" y "Acciones", se puede extender de manera eficaz. Por lo tanto, en lugar de presentar un segundo modelo, que también tendría una latencia adicional, modificamos nuestra instrucción para indicarle a Gemini que genere no solo sus "Pensamientos" y "Acciones" principales, sino también títulos concisos y sugerencias útiles dentro del mismo bucle de ReAct.
Desarrollo basado en evaluaciones
El desarrollo de la asistencia de IA para aplicar diseño se basó en un proceso de evaluación riguroso. Para medir su rendimiento y identificar áreas de mejora, seleccionamos una colección completa de ejemplos de depuración web del mundo real, que abarcan problemas de desbordamiento comunes, componentes web, animaciones y mucho más. Esto nos permitió asignar la amplitud del espacio de problemas de depuración web y comprender en detalle los desafíos asociados. Sin embargo, ese trabajo nunca termina: a medida que se agregan nuevas funciones a la plataforma web con regularidad, debemos mantener esos ejemplos actualizados en el futuro.
Esos ejemplos se ingresan en una canalización de evaluación automatizada, que registra las respuestas de Gemini. Los datos de esas ejecuciones de pruebas automatizadas están disponibles en una herramienta personalizada en la que evaluamos manualmente el rendimiento de Gemini para la asistencia de IA en función de rúbricas predefinidas, que informan nuestros esfuerzos de desarrollo posteriores.
Este enfoque basado en la evaluación garantiza que todos los cambios, ya sea que se definan mejor los comportamientos existentes o se introduzcan nuevas funciones, se verifiquen cuidadosamente para lograr las mejoras previstas y evitar regresiones en la funcionalidad existente.
Para mejorar aún más nuestro proceso de evaluación, estamos explorando métodos de verificación automática, incluidos los siguientes:
- Aserciones para confirmar la aplicación correcta de las correcciones
- Verificaciones basadas en código para evitar resultados no deseados de Gemini
- Usar LLM como jueces, guiados por rúbricas específicas, para semiautomatizar y acelerar nuestras evaluaciones manuales
Si bien la verificación automatizada ayuda a escalar, los comentarios humanos son importantes. Estamos recopilando comentarios humanos con controles de votación debajo de cada respuesta en la asistencia de IA para saber qué tan satisfechos están los usuarios. Un botón de denuncia adicional permite que los usuarios proporcionen comentarios más exactos para las respuestas en disputa.
Inyecciones de instrucciones
Una limitación conocida y documentada de los LLM es que son propensos a las inyecciones de instrucciones. La inserción de instrucciones es la técnica de encontrar una forma de reemplazar las instrucciones del sistema originales de un LLM, lo que hace que genere contenido que no es el previsto por los desarrolladores.
La mayoría de los modelos ya tienen mitigaciones integradas para la inserción de instrucciones, al igual que Gemini. Además, para la asistencia de IA, también intentamos mitigar esto en nuestro preámbulo, ya que incluimos la siguiente instrucción:
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.
Si bien esto funciona para algunas preguntas explícitas fuera del tema, no es perfecto. Una desventaja que notamos es que las consultas cortas y ambiguas podrían clasificarse como fuera del tema.
Cómo crear una base sólida
Cuando incorpores la IA a tu producto por primera vez, vale la pena ir paso a paso, en lugar de dar un gran salto de una sola vez. También es así como nos acercamos a la asistencia de IA. Con todo lo que aprendimos cuando compilamos el agente de diseño, creamos una base sólida para extender la asistencia de IA a otras áreas de DevTools más adelante.
Después de resolver la mayoría de los desafíos más grandes cuando trabajamos en el agente de diseño, solo unos meses después, pudimos presentar la asistencia de IA para la red, el rendimiento y las fuentes, y pudimos enfocarnos en sus desafíos individuales.
Implicaciones de seguridad cuando se trabaja con solicitudes de red
La asistencia de IA para la red permite a los usuarios analizar solicitudes de red específicas con Gemini, usando los datos de la solicitud como contexto para la conversación. Específicamente, se envían los siguientes datos a Gemini:
- Encabezados de solicitud: Es un subconjunto de encabezados que el navegador envía al servidor.
- Encabezados de respuesta: Es un subconjunto de encabezados que muestra el servidor.
- Estado de la respuesta: Es el código de estado HTTP que indica la respuesta del servidor (por ejemplo, 200, 404).
- Tiempo: Información detallada del tiempo que abarca varias fases de la solicitud, como la configuración de la conexión y la transferencia de datos.
- Cadena de iniciadores de solicitudes: Es la secuencia de acciones y secuencias de comandos que iniciaron la solicitud.
Si bien los encabezados son importantes para comprender por completo cómo se forma una solicitud,
representan un riesgo de seguridad: pueden contener credenciales, como claves de API, tokens de
sesión o incluso contraseñas simples. Para proteger esa información sensible, no transmitimos todos los encabezados a Gemini. En su lugar, mantenemos una lista de entidades permitidas de encabezados permitidos. Los valores de los encabezados que no están en la lista de entidades permitidas se reemplazan por <redacted>. Este enfoque garantiza que Gemini reciba el contexto necesario y, al mismo tiempo, proteja los datos del usuario.
Adaptación a varios formatos de datos
La asistencia de IA para las fuentes permite a los desarrolladores hacer preguntas sobre un archivo de origen en el panel Fuentes, por ejemplo, "¿Para qué sirve este archivo?".
Los datos sobre el archivo, incluido el nombre del archivo, el contenido del archivo y si está asignado a la fuente, se envían en una sola instrucción. Esto funciona bien porque es texto sin formato. Sin embargo, los archivos de texto o binarios grandes representan un desafío para los LLM. En el caso de los archivos binarios, decidimos indicar que el contenido es binario en la instrucción y no enviar ningún contenido real. En el caso de los archivos de texto grandes, solo enviamos una parte más pequeña del contenido tomado desde el principio del archivo.
En el caso de la asistencia de IA para el rendimiento, que permite a los desarrolladores hacer preguntas sobre una tarea en particular a partir de un perfil de rendimiento registrado, existe un desafío similar para crear una representación que se ajuste a la ventana de contexto de Gemini y que también se pueda interpretar para proporcionar estadísticas adicionales.
Para crear una presentación de este tipo a partir de un perfil de rendimiento, creamos un serializador dedicado llamado AiCallTree que da formato al árbol de llamadas de una tarea de una manera que un LLM pueda procesar. En el futuro, también exploraremos la estrategia de ReAct aquí para minimizar la cantidad de datos que se deben enviar a Gemini de antemano.
Asistencia de IA en el futuro
El resultado de todo este trabajo ahora está disponible a partir de Chrome 132, que incluye asistencia de IA para aplicar diseño, red, fuentes y rendimiento. Esperamos que disfrutes de su uso tanto como nosotros disfrutamos de su creación.
Para tener una idea de dónde comenzar, consulta la guía de inicio rápido de la asistencia de IA completa con muchas indicaciones de demostración para probar en tus propias páginas y asegúrate de informarnos lo que piensas en nuestro error de discusión abierto.