Помощник по дизайну, который работает на вашем устройстве — нет учетной записи, нет сервера
Ассистент PinePaper на устройстве AI превращает подсказку в реальную сцену, используя языковую модель, которая полностью работает в вашем браузере. Вот архитектура - ограниченные вызовы инструментов, два провайдера и честный отчет о том, что может и не может сделать крошечная модель.
On this page
Предпосылка
Большинство инструментов проектирования 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. Грамматика диктует структуру; модель заполняет только значения.
Оба имеют одинаковую форму инструментального вызова. Небольшой ремонтный пропуск затем спасает почти пропущенную крошечную модель, которая все еще делает.. a drop name, аргументы без обертки — вывод инструмента из формы аргумента. В результате «рисовать зеленый пятиугольник» становится настоящим вызовом create_item вместо ошибки.
Переключитесь между тремя ниже. Два ограниченных варианта выглядят одинаково цель: это утверждение. Что меняется между ними, так это механизм, а не механизм результат.
Два поставщика, один контракт
На устройстве AI это не одно это зависит от браузера:
- Браузер AI Встроенный Chrome Gemini 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. Он бесплатный, работает на вашем устройстве и не требует учетной записи.
Ready to create?
Start making animated GIFs, videos, and graphics — free, no signup.
Open PinePaper Editor