Экспериментальные AI API в Google Chrome и Microsoft Edge: Translator API, Summarizer API, Writer API и Prompt API

Встроенные API в браузерах Chrome и Edge для определения языка, перевода, суммаризации и других задач работают на локально размещённых моделях. Ниже — как их использовать.

С каждым годом локальные AI-модели становятся меньше, эффективнее и всё ближе по возможностям к более дорогим облачным аналогам. На своём оборудовании можно запускать многие из тех же задач инференса, не требуя подключения к интернету и даже без особенно мощного GPU.

Сложность всегда заключалась в развёртывании инфраструктуры. Приложения вроде ComfyUI и LM Studio позволяют запускать модели локально, но это крупные сторонние решения, которым по-прежнему нужны собственная настройка и обслуживание. Было бы здорово запускать локальные AI-модели прямо в браузере?

Google Chrome и Microsoft Edge теперь предлагают именно это — через экспериментальный набор API. В Chrome и Edge можно выполнять целый набор AI-задач: суммаризировать документ, переводить текст между языками или генерировать текст по запросу. Всё это делается с помощью моделей, которые загружаются и работают локально по требованию.

В этой статье я покажу простой пример работы экспериментальных локальных AI API в Chrome и Edge. Хотя оба браузера формально опираются на один и тот же набор экспериментальных API, поддерживаемые функции и используемые модели различаются. В Chrome это Gemini Nano, в Edge — модели Phi-4-mini.

Следующая демонстрация Summarizer API работает в обоих браузерах, хотя производительность может различаться. По моему опыту, Summarizer в Edge работал заметно медленнее.

Доступные AI API в Chrome и Edge

Chrome и Edge используют общую кодовую базу — проект Chromium — и доступные в обоих браузерах AI API зависят от того, что поддерживает именно этот проект. По состоянию на апрель 2026 года в Chrome доступны следующие AI API:

• Translator API: переводит текст с одного языка на другой, если для этой языковой пары доступна модель.
• Language Detector API: определяет язык заданного текста.
• Summarizer API: сводит текст к заголовкам, кратким выжимкам и спискам ключевых пунктов.

Все три API сразу доступны пользователям Chrome. В Edge также доступны все, кроме Language Detector API, хотя его поддержка запланирована на будущее.

Есть и другие API, которые находятся в более экспериментальном состоянии и доступны в обоих браузерах на добровольной основе:

• Writer API: генерирует текст по заданному запросу.
• Rewriter API: переписывает существующий текст по инструкциям из запроса.
• Prompt API: позволяет напрямую отправлять модели запросы на естественном языке, например: «Search the web for up-to-date information about visiting Italy».
• Proofreader API: проверяет текст на орфографические и грамматические ошибки и предлагает исправления.

В долгосрочной перспективе предполагается, что эти API станут общими веб-стандартами, но пока они специфичны для Chrome и Edge.

Использование Summarizer API

В качестве примера мы возьмём Summarizer API, чтобы показать, как в целом работать с этими интерфейсами. Summarizer API доступен и в Chrome, и в Edge, а способ его использования хорошо иллюстрирует, как работают и остальные API.

Сначала создайте веб-страницу, к которой будете обращаться через какой-либо локальный веб-сервер. Если у вас установлен Python, можно создать файл index.html в каталоге, открыть этот каталог в терминале и выполнить py -m http.server, чтобы отдать содержимое на порту 8080. Не стоит открывать страницу как локальный файл: из-за этого могут сработать ограничения на контент и всё сломается.

Вот исходный код страницы, которую нужно создать:

<div style="display: flex;">
 <textarea style="width:50%; height:24em" id="input" placeholder="Type text to be summarized"></textarea><br>
 <textarea style="width:50%; height:24em" id="output" placeholder="Summarization results"></textarea><br>
</div>
<textarea style="width:100%; height:4em" id="context" placeholder="Additional context"></textarea>
<label for="type">Type of summarization:</label>
<select id="type" name="type">
 <option value="teaser">Teaser</option>
 <option value="tldr">tl;dr</option>
 <option value="headline">Headline</option>
 <option value="key-points">Key points</option>
</select>
<label for="length">Length:</label>
<select id="length" name="length">
 <option value="short">Short</option>
 <option value="medium">Medium</option>
 <option value="long">Long</option>
</select>
<button type="button" onclick="go();">Start</button>
<div style="background-color:beige" id="log"></div>
<script>
 const $log = document.getElementById("log")
 const $input = document.getElementById("input")
 const $output = document.getElementById("output")
 const $context = document.getElementById("context")
 const $type = document.getElementById("type")
 const $length = document.getElementById("length")

 function log(text) {
 $log.innerHTML += text + "<br>";
 }
 async function summarize() {
 $log.innerHTML = "";

 if (!'Summarizer' in self) {
 log("Summarizer not available")
 return false
 };

 const availability = await Summarizer.availability();
 log(`Summarizer status: ${availability}`);

 const summarizer = await Summarizer.create({
 sharedContext: $context.value,
 type: $type.value,
 length: $length.value,
 format: 'markdown',
 monitor(m) {
 m.addEventListener('downloadprogress', (e) => {
 log(`Downloaded ${e.loaded * 100}%`);
 });
 }
 });

 log("Summarizer created, starting summarization");

 $output.value = "";

 const stream = summarizer.summarizeStreaming($input.value)
 for await (const chunk of stream) {
 $output.value += chunk;
 }

 log("Finished.")
 }
 function go() {
 summarize();
 }
</script>

Большую часть внимания стоит уделить функции summarize(). Разберём шаги по порядку.

Шаг 1: убедитесь, что API доступен

Строка if (!'Summarizer' in self) определяет, доступен ли вообще Summarizer API в браузере. Следующая строка, const availability = await Summarizer.availability();, возвращает статус модели, необходимой для API:

• downloadable: модель нужно скачать, поэтому стоит показать пользователю прогресс загрузки. В коде выше есть пример того, как это можно реализовать через функцию monitor(), передаваемую в метод Summarizer.create().
• available: модель уже находится на устройстве и может использоваться сразу.

Шаг 2: создайте объект Summarizer

Следующий шаг — создать объект Summarizer, которому можно передать несколько параметров:

• sharedContext: текст, который даёт summarizer дополнительный контекст о том, как выполнять работу, например: «Format the output as a bullet list of questions».
• type: одно из четырёх значений, определяющих формат сводки. teaser пытается заинтересовать содержанием текста, не раскрывая всех деталей; tldr даёт короткую и лаконичную сводку длиной не более одного-двух предложений; headline генерирует подходящий заголовок для текста; а key-points создаёт маркированный список ключевых выводов.
• length: одно из значений short, medium или long; этот параметр управляет длиной результата.
• format: формат входного текста. Значение по умолчанию — markdown; другое допустимое значение — plain-text. Если в качестве источника используется HTML, может быть полезно взять .innerText, чтобы получить текстовую версию входа.

Шаг 3: потоковая выдача и обход результата

Обычно нам нужно видеть вывод по мере его появления — токен за токеном, чтобы было понятно, что модель работает. Для этого используется const stream = summarizer.summarizeStreaming($input.value), чтобы создать объект, по которому можно итерироваться ($input.value — это текст для суммаризации). Затем мы используем for await (const chunk of stream){}, чтобы проходить по каждому фрагменту и добавлять его в поле $output.

Вот пример входных данных и результата:

Источник: Foundry

Ограничения Summarizer и других локальных AI API

Первое, что нужно учитывать: при первом использовании модель будет загружаться некоторое время. Размеры моделей различаются, но можно ожидать, что они будут исчисляться гигабайтами. Поэтому имеет смысл показывать пользователю какой-то индикатор процесса загрузки. В идеале стоит дать способ запустить загрузку модели и затем уведомить пользователя, когда всё будет готово.

После загрузки моделей у вас пока нет программного интерфейса для их управления. В Google Chrome есть локальный адрес chrome://on-device-internals/, который показывает, какие модели были загружены, и отображает их статистику. Эту страницу можно использовать для ручного удаления моделей или для просмотра статистики при отладке, но JavaScript API не предоставляет подобных функций.

Когда начинается процесс инференса, может возникать заметная пауза между стартом суммаризации и появлением первого токена. Сейчас API не умеет сообщать, что происходит в этот промежуток времени, поэтому хотя бы дайте пользователю понять, что процесс запущен.

Наконец, хотя Chrome и Edge уже поддерживают небольшое число локальных AI API, будущее браузерного локального AI остаётся открытым. Например, со временем может появиться более общий стандарт работы с локальными моделями, а не только прикладные варианты, показанные здесь. Но начать можно уже сейчас.

Материал — перевод статьи с английского.

Оригинал: Tap into the AI APIs of Google Chrome and Microsoft Edge