Опубликовано: 14 января 2025 г.
На прошлогодней конференции Google I/O 2024 мы представили консольную аналитику — первую функцию искусственного интеллекта в Chrome DevTools. Аналитика консоли помогает понять ошибки и предупреждения, регистрируемые на консоли, путем отправки сетевых данных, исходного кода и трассировок стека, связанных с сообщением журнала, в Gemini, модель большого языка Google (LLM). Console Insights отправляет в Gemini одно приглашение, которое возвращает один ответ, без возможности для разработчиков задавать дополнительные вопросы. Хотя этот единый поток взаимодействия работает относительно хорошо для объяснения сообщений об ошибках, он не масштабируется для более сложных случаев использования отладки внутри DevTools, где неясно, какие данные с проверяемой страницы потребуются ИИ, чтобы помочь.
Одним из таких вариантов использования является отладка проблем со стилем. Одна веб-страница может содержать тысячи элементов и правил CSS, и только часть из них имеет отношение к отладке конкретного сценария. Определить правильный код для отладки может быть непросто даже для людей. Но благодаря прототипу, созданному во время хакатона по искусственному интеллекту в Google, мы узнали, что LLM на самом деле неплохо справляются с этим. Поэтому, естественно, мы хотели предоставить эту возможность пользователям DevTools, создав инструмент, который способен исследовать проблемы со стилем, интерактивно запрашивая страницу для получения дополнительных контекстных данных. То, что мы создали, было запущено в качестве помощи искусственного интеллекта для стилизации несколько месяцев спустя.
В этом посте мы хотим пролить свет на проблемы, с которыми мы столкнулись при внедрении ИИ в любимый продукт, такой как Chrome DevTools, который по своей сути является веб-приложением, и на то, что вы можете адаптировать для своих собственных функций ИИ.
Сбор правильных данных
Консольная аналитика всегда использует одни и те же точки данных для ответа на предопределенный запрос. Чтобы помощь ИИ была полезной при выполнении любого пользовательского запроса, нам необходимо динамически определять, какие контекстные данные важны для рассматриваемого запроса.
Поэтому мы реализовали стратегию ReAct ( Яо и др., 2022 ). Эта стратегия подсказок позволяет магистрам права рассуждать автономно и определять последующие действия на основе своих рассуждений.
Таким образом, помощь ИИ действует в цикле мыслей, действий и наблюдений до тех пор, пока не определит подходящий ответ на запрос пользователя, после чего завершает цикл и предоставляет ответ. Этот итерационный процесс позволяет LLM собирать точную информацию, необходимую для эффективного устранения проблем со стилем.
Для сбора информации мы предоставили Gemini только один инструмент: запуск JavaScript на проверяемой странице. Это позволяет Gemini с помощью ИИ, например:
- Получите доступ к DOM и анализируйте его : перемещайтесь по дереву DOM, проверяйте атрибуты элементов и понимайте взаимосвязи между элементами.
- Получить вычисленные стили : доступ к вычисленным стилям для любого элемента.
- Выполнять вычисления и измерения : выполнять код JavaScript для расчета расстояний, размеров и положений элементов.
Благодаря этому ИИ-помощь интерактивно действует только на соответствующий код, улучшая качество ответа, время отклика и использование вычислительных ресурсов по сравнению с отправкой полного исходного кода HTML и CSS в Gemini.
Запуск кода, сгенерированного ИИ, в пользовательском пространстве
Может показаться неожиданным, что для отладки проблем со стилем мы использовали JavaScript. Для этого есть две причины:
- Веб-API очень мощные и по своей сути охватывают множество вариантов использования отладки. Хотя разработчику может быть утомительно использовать вызовы API вручную для обхода DOM или доступа к вычисленным стилям для отладки, для LLM не является проблемой генерировать код, вызывающий их.
- Хотя можно изобрести новые API для использования агентом, повторное использование существующих общедоступных API часто является лучшим выбором, поскольку они уже известны специалистам LLM. Обучение LLM новому API требует много ресурсов для тонкой настройки и конкретных обучающих данных.
Но запуск кода, сгенерированного ИИ, в пользовательском пространстве сопряжен с риском. Для помощи ИИ нам нужно было минимизировать риск деструктивных изменений, которые агент мог внести на страницу. Для этого мы использовали проверки побочных эффектов, которые V8, движок JavaScript Chrome, предоставляет через протокол Chrome DevTools. Те же проверки используются для функции автозаполнения в консоли DevTools: она запускает код JavaScript только до тех пор, пока не изменяется состояние страницы. Проверки выполняются во время выполнения кода V8 и основаны на списке разрешенных встроенных модулей JavaScript, которые, как известно, не имеют побочных эффектов.
Если проверки обнаруживают, что сгенерированный код изменяет проверяемую страницу, выполнение приостанавливается, и пользователю предлагается просмотреть код и подтвердить, что его можно запускать.
Кроме того, сгенерированный JavaScript запускается в так называемом изолированном «мире» . Это похоже на то, как расширения запускают сценарии песочницы: сгенерированный код может получить доступ к DOM и веб-API, но не может получить доступ к коду JavaScript или состоянию, определенному проверяемой страницей.
Отслеживание изменений, внесенных агентом
Помимо исследования проблем и ответов на вопросы по отладке страницы, мы также хотели предоставить агенту помощи ИИ возможность исправлять стили на странице таким образом, чтобы разработчики могли это отслеживать.
Для этого мы реализовали привязку setElementStyles , которую мы предоставляем контексту выполнения агента в дополнение к веб-API по умолчанию.
Чтобы Gemini узнала об этом новом методе, мы поручаем ему использовать его в преамбуле помощи ИИ:
If you need to set styles on an HTML element, always call the \`async setElementStyles(el: Element, styles: object)\` function.
Несмотря на то, что это API, специально разработанный для агента, который сталкивается с ранее упомянутыми проблемами, даже без тонкой настройки Gemini вполне надежно использует его, когда ему необходимо изменить стили для данного элемента.
Со стороны DevTools, когда агент вызывает setElementStyles , ИИ-помощник использует таблицы стилей инспектора для записи изменений в селекторе элементов. Вложенность CSS используется для обозначения изменения и повышения специфичности селектора элемента. Таким образом, примерное правило CSS, созданное агентом, выглядит следующим образом:
.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;
}
}
Хотя это не решает всех возможных конфликтов стилей, которые могут возникнуть на странице, в большинстве случаев это работает.
Преимущество использования таблиц стилей инспектора по сравнению со встроенными стилями заключается в том, что таким образом изменения, выполненные агентом, также отображаются на панели «Изменения» , что упрощает отслеживание того, какие изменения в стилях элементов были внесены и что разработчику необходимо перенести в основной исходный код. Интеграция с панелью «Изменения» также позволяет откатить изменения, если они больше не нужны.
Делаем действия агента видимыми для пользователей
При добавлении агентских функций в продукт важно сделать действия агента прозрачными для пользователей, чтобы у них была возможность отслеживать, понимать и потенциально вмешаться.
Поэтому для помощи ИИ мы поручаем Близнецам структурировать ответы в определенном формате с дополнением к преамбуле:
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.
Эта структура затем используется для представления мыслительных процессов и действий Близнецов в виде первоначально свернутых шагов, предотвращая информационную перегрузку и в то же время позволяя пользователям изучать основные детали или останавливать выполнение в случае непредвиденных побочных эффектов.
Этот подход заключается не только в наблюдении за ИИ; речь идет об активном извлечении уроков из этого. Расширяя эти разделы, пользователи могут анализировать данные, которые Gemini сочтет важными для устранения конкретной проблемы, и понимать процесс, за которым она последовала. Эта прозрачность позволяет пользователям учиться на стратегиях отладки ИИ, чтобы они могли применять аналогичные методы для решения будущих задач, даже работая без ИИ.
Чтобы еще больше улучшить взаимодействие с пользователем, ИИ-помощь также предоставляет контекстно-релевантные предложения после ответа ИИ. Эти предложения упрощают обсуждение, предлагая идеи для следующего шага отладки или даже позволяя пользователям напрямую выполнять рекомендуемые исправления одним щелчком мыши.
Первоначально, чтобы генерировать названия шагов и предложения по помощи ИИ, мы рассматривали возможность использования отдельной модели меньшего размера специально для обобщения. Однако мы поняли, что шаблон ReAct, который структурирует рассуждения Близнецов в цикл «Мыслей» и «Действий», можно эффективно расширить. Поэтому вместо введения второй модели, которая также будет иметь дополнительную задержку, мы изменили нашу подсказку , чтобы дать указание Gemini генерировать не только основные «Мысли» и «Действия», но также краткие заголовки и полезные предложения в рамках одного и того же цикла ReAct.
Разработка, основанная на оценке
Разработка системы искусственного интеллекта для моделирования была обусловлена строгим процессом оценки. Чтобы измерить его производительность и определить области для улучшения, мы собрали обширную коллекцию реальных примеров веб-отладки, затрагивающих распространенные проблемы переполнения, веб-компоненты, анимацию и многое другое. Это позволило нам составить карту проблем веб-отладки и полностью понять связанные с этим проблемы. Но эта работа никогда не выполнялась: поскольку в веб-платформу регулярно добавляются новые функции, нам необходимо поддерживать эти примеры в актуальном состоянии в будущем.
Эти примеры передаются в автоматизированный конвейер оценки, записывающий ответы Gemini. Данные этих автоматизированных тестовых запусков затем предоставляются в специально созданном инструменте, с помощью которого мы вручную оцениваем производительность Gemini для помощи ИИ по заранее определенным критериям, которые информируют наши последующие усилия по разработке.
Такой подход, основанный на оценке, гарантирует, что все изменения, будь то совершенствование существующего поведения или введение новых возможностей, тщательно проверяются, чтобы как достичь запланированных улучшений, так и предотвратить регресс в существующей функциональности.
Для дальнейшего совершенствования нашего процесса оценки мы изучаем методы автоматической проверки, в том числе:
- Утверждения для подтверждения правильного применения исправлений
- Проверки на основе кода для предотвращения нежелательных выходных данных Gemini
- Использование LLM в качестве судей, руководствуясь конкретными рубриками, для полуавтоматизации и ускорения нашей ручной оценки.
Хотя автоматическая проверка помогает масштабировать, человеческая обратная связь важна. Мы собираем отзывы людей с помощью средств управления голосованием по каждому ответу при помощи ИИ, чтобы узнать, насколько довольны пользователи. Дополнительная кнопка «Сообщить» позволяет пользователям давать более точную обратную связь по спорным ответам.
Быстрые инъекции
Хорошо известным и документально подтвержденным ограничением LLM является то, что они склонны к немедленным инъекциям . Оперативное внедрение — это метод поиска способа перезаписать исходные системные инструкции LLM, заставляя его выводить контент, не предусмотренный разработчиками.
В настоящее время большинство моделей, как и Gemini, имеют встроенные средства смягчения последствий для быстрого внедрения. Кроме того, что касается помощи ИИ, мы также пытаемся смягчить это в нашей преамбуле, включив следующую инструкцию:
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.
Хотя это работает для некоторых вопросов, явно не по теме, это не идеально. Мы заметили один недостаток: короткие и неоднозначные запросы могут быть классифицированы как не по теме.
Создание прочного фундамента
При первом внедрении ИИ в ваш продукт стоит идти шаг за шагом, а не делать один большой скачок сразу. Именно так мы подошли к помощи ИИ. Благодаря всему, что мы узнали при создании агента стилизации, мы создали прочную основу для дальнейшего расширения поддержки ИИ в других областях DevTools.
Уже решив большинство более серьезных проблем при работе над агентом стилизации, всего несколько месяцев спустя мы смогли внедрить поддержку ИИ для сети, производительности и источников и могли сосредоточиться на их индивидуальных проблемах.
Последствия для безопасности при работе с сетевыми запросами
Поддержка ИИ для сети позволяет пользователям обсуждать конкретные сетевые запросы с Gemini, используя данные запроса в качестве контекста для разговора. В частности, в Gemini отправляются следующие данные:
- Заголовки запросов : подмножество заголовков, отправляемых браузером на сервер.
- Заголовки ответов : подмножество заголовков, возвращаемых сервером.
- Статус ответа : код состояния HTTP, указывающий ответ сервера (например, 200, 404).
- Тайминги : подробная информация о времени, охватывающая различные этапы запроса, такие как установка соединения и передача данных.
- Цепочка инициаторов запроса : последовательность действий и сценариев, инициировавших запрос.
Хотя заголовки важны для полного понимания того, как формируется запрос, они несут угрозу безопасности: они могут содержать учетные данные, такие как ключи API, токены сеанса или даже простые пароли. Чтобы защитить такую конфиденциальную информацию, мы не передаем все заголовки в Gemini. Вместо этого мы поддерживаем список разрешенных заголовков. Значения заголовков, не входящих в список разрешенных, заменяются на <redacted> . Такой подход гарантирует, что Gemini получит необходимый контекст, одновременно защищая пользовательские данные.
Адаптация к различным форматам данных
Поддержка ИИ для источников позволяет разработчикам задавать вопросы об исходном файле на панели «Источники», например: «Для чего нужен этот файл?».
Данные о файле, включая имя файла, его содержимое и информацию о том, сопоставлен ли он с источником, отправляются в одном приглашении. Это работает хорошо, потому что это просто текст. Но большие текстовые или двоичные файлы представляют собой проблему для студентов LLM. Для двоичных файлов мы решили указать в командной строке, что содержимое является двоичным, и не отправлять никакого фактического содержимого. Для больших текстовых файлов мы отправляем только меньшую часть содержимого, взятую из начала файла.
Что касается помощи ИИ в повышении производительности, которая позволяет разработчикам задавать вопросы о конкретной задаче на основе записанного профиля производительности, существует аналогичная задача: создать представление, которое вписывается в контекстное окно Gemini и которое также можно интерпретировать для предоставления дополнительной информации.
Чтобы создать такое представление на основе профиля производительности, мы создали специальный сериализатор под названием AiCallTree , который форматирует дерево вызовов для задачи таким образом, чтобы его мог обрабатывать LLM. В дальнейшем мы также собираемся изучить стратегию ReAct, чтобы минимизировать объем данных, которые необходимо заранее отправить в Gemini.
Помощь ИИ в будущем
Результат всей этой работы теперь доступен начиная с Chrome 132, который включает поддержку искусственного интеллекта для стилизации, сети, источников и производительности. Мы надеемся, что вам понравится использовать его так же, как и нам, создавая его.
Чтобы понять, с чего начать, ознакомьтесь с подробным руководством по быстрому началу работы с помощью искусственного интеллекта с множеством демонстрационных подсказок, которые можно попробовать на своих страницах, и обязательно сообщите нам, что вы думаете, в нашем открытом обсуждении ошибки .