Помощник по дизайну, который работает на вашем устройстве — нет учетной записи, нет сервера

Предпосылка

Большинство инструментов проектирования AI отправляют запрос на сервер, запускают большую модель и отправляют код обратно. Для этого нужна учетная запись, круглосуточная сеть и доверие к тому, что ваша работа проходит через чужую инфраструктуру.

Мы хотели знать, как далеко зайдет другая крайность: помощник по дизайну, где модель работает на вашей собственной машине. Без счета. Не загружать. Подсказка никогда не покидает браузер. Это в настоящее время в прямом эфире в редакторе PinePaper в качестве экспериментальной вкладки AI / Code → Assistant, и этот пост является честным отчетом о том, как он работает и где он не хватает.

Почему бы просто не спросить модель кода?

Очевидный подход заключается в том, чтобы попросить модель на устройстве написать JavaScript против PinePaper и запустить его. Мы попробовали. Это плохо.

Небольшие модели — те, которые помещаются на ноутбуке — не знают API конкретного приложения. Попросите модель 0,5-2B назвать PinePaper.create(), и она импровизирует: ключ, который метод не читает (fill в стиле SVG, где API ожидает color), метод, который он представлял, аргументы в неправильной форме. Выход выглядит как код и молча делает неправильные вещи.

Поэтому мы не просим код. Мы просим ** ограниченный список вызовов инструментов: **

[
  { "name": "pinepaper_set_background_color", "arguments": { "color": "#0F0F1A" } },
  { "name": "pinepaper_create_item", "arguments": { "itemType": "star", "x": 400, "y": 300, "radius": 90, "color": "#E74C3C", "animationType": "pulse" } }
]

Тот же словарный запас PinePaper [сервер MCP] (/api/guides/mcp-integration) подвергается воздействию внешних агентов, но излучается моделью, работающей локально, и выполняется на холсте через небольшой диспетчер.

Делать недействительный выход невозможным

Ключевым моментом является ограниченное декодирование. Вместо того, чтобы надеяться, что модель имеет правильную форму, мы ограничиваем токены, которые она даже может излучать:

• На встроенном Chrome Prompt API (Gemini Nano) мы передаем JSON Schema в качестве ограничения отклика. Модель может производить только объекты, разрешенные схемой — с additionalProperties: false любой аргумент, который схема не определяет, буквально непредставим.
• На WebLLM (открытая модель, работающая на WebGPU) Прикрепите грамматику EBNF через XGrammar. Грамматика диктует структуру; модель заполняет только значения.

Оба имеют одинаковую форму инструментального вызова. Небольшой ремонтный пропуск затем спасает почти пропущенную крошечную модель, которая все еще делает - упавший name, аргументы без их обертки - выводя инструмент из формы аргумента. В результате «нарисовать зеленый пятиугольник» становится настоящим вызовом create_item вместо ошибки.

Два поставщика, один контракт

На устройстве AI не одно — это зависит от браузера:

• ** Браузер AI** — встроенный ChromeGemini Nano (window.LanguageModel). Модель поставляется с браузером; от нас нечего скачивать. Сегодня это самый надежный путь на устройстве, потому что ограничение JSON-схемы дешево и хорошо поддерживается.
• PinePaper AI — WebLLM работает с моделью Qwen2.5 в любом браузере WebGPU. Он загружает модель один раз (кэшируется после этого), а затем работает в автономном режиме.
• Языки — неанглийские подсказки сначала переводятся на английский язык на устройстве (через встроенный переводчик браузера), потому что небольшие код-ориентированные модели ориентированы на английский язык. Сгенерированная сцена одинакова, независимо от языка.

Пользователь выбирает двигатель; все ниже по течению — ограничение, исполнитель, холст — идентично.

Редактировать, а не просто генерировать

Генератор с одним выстрелом не помощник. Чтобы поддержать «сделать звезду красной», модель должна знать, что уже на холсте. Таким образом, каждый поворот мы кормим его компактным снимком текущих элементов - их идентификаторов, типов и цветов - точно так же, как чат на стороне сервера. «Сделай звезду красной», затем решается на настоящий вызов modify_item против идентификатора объекта. (И поскольку маленькая модель иногда относится к «кругу», когда она означает звезду, исполнитель разрешает нечеткие ссылки на живое полотно.)

Журнал разговора хранится ** на вашем устройстве** в локальном хранилище. Ничего об этом нигде не отправляется — если вы явно не решите поделиться неудачными подсказками, что помогает нам улучшить подсказки и грамматику.

Когда малой модели недостаточно — эскалация

Вот честная часть: ** модель 0,5-2B является самым слабым ярусом. Ограниченное декодирование гарантирует действительную структуру, но модель все равно должна выбрать правильный инструмент и разумные значения, и это будет не всегда. Попросите пентагон, и нижеуказанная модель даст вам шестиугольник; попросите дважды «красный», и вместо него может работать генератор.

Таким образом, архитектура рассматривает устройство как первый, а не единственный уровень. После нескольких неудачных попыток помощник предлагает ** провести весь разговор. Облачная модель — то же намерение, тот же холст, гораздо более способная модель — и вы продолжаете именно там, где остановились. Низкая точность, бесплатная и частная, с одним щелчком мыши путь к высокой точности, когда вам это нужно.

Чему мы научились

• Ограничения бьют подсказки. Заземленная система подсказки помогает; грамматика / схема, которая делает недействительный выход невозможным, помогает гораздо больше. Самый большой скачок надежности произошел из-за ограниченного декодирования, а не из-за более быстрого.
• ** Размер модели доминирует.** Переход от 0,5B к 1,5B заметно улучшил то, как часто помощник выбирает правильный инструмент. Нет подсказки, которая превращает крошечную модель в умную.
• Полная грамматика может быть слишком большой. Наша первая грамматика закодировала все возможные операции, включая выходной люк ограниченной длины для произвольного кода рисования. Он был настолько большим, что ограниченное декодирование застопорило страницу. Компактная грамматика, охватывающая общие операции, является правильным по умолчанию; полная поверхность включена.
• ** Выключите его из основного потока.** Модель, делающая вывод на нити пользовательского интерфейса, замораживает страницу. WebLLM работает в Web Worker, поэтому редактор остается отзывчивым, пока модель загружается и генерирует.

Что дальше

Это экспериментально и совершенствуется. На дорожной карте:

• ** Широкое покрытие инструмента в ограниченном пути ** — больше операций PinePaper, выразимых без аварийного люка свободной формы.
• Большие модели на устройстве по мере роста каталогов моделей WebGPU, размер загрузки для надежности.
• ** Более узкая петля эваля** — использование опциональных отчетов о сбоях для измерения, что побуждает сбить модели на устройстве и затвердеть грамматику против них.
• ** Более плавное устройство → Облачная передача**, поэтому эскалация похожа на включение качественного циферблата, а не на переключение инструментов.

Сквозная линия: один и тот же словарь декларативных инструментов управляет моделью по обе стороны границы браузера. Внешний агент вызывает эти инструменты через MCP; модель на устройстве вызывает те же формы локально. Один контракт, агенты, где бы они ни работали.

*Попробуйте в редакторе — откройте AI / Code → Assistant. Он бесплатный, работает на вашем устройстве и не требует учетной записи