Asystent Designu, który działa na Twoim urządzeniu - Brak konta, brak serwera

Założenie

Większość narzędzi projektowych AI wysyła Twój sygnał na serwer, uruchamia duży model i wysyła kod z powrotem. To wymaga konta, podróży sieciowej i zaufania, że twoja praca-in-progress przechodzi przez czyjąś infrastrukturę.

Chcieliśmy wiedzieć, jak daleko sięga druga skrajność: * * asystent projektowy, gdzie model działa na własnej maszynie. * * Brak konta. Nie wysyłaj. Sygnał nie opuszcza przeglądarki. Jest to teraz na żywo w edytorze PinePaper jako eksperymentalny * * AI / Code → Assistant * * tab, a ten post jest uczciwym kontem jak to działa i gdzie to jest krótkie.

Dlaczego po prostu nie zapytasz modelu kodu?

Oczywistym podejściem jest zwrócenie się do modelu on- device o napisanie JavaScript przeciwko PinePaper API i uruchomienie go. Próbowaliśmy. Źle się kończy.

Małe modele - te, które pasują do laptopa.. nie mają * * wiedzy o konkretnej aplikacji API. * * Poproś model 0.5- 2B, aby zadzwonić do PinePaper.create() i improwizuje: klucz, którego metoda nie czyta (SVG- style fill, gdzie API oczekuje color), metody, którą sobie wyobrażał, argumenty w złym kształcie. Wyjście * wygląda jak kod i po cichu robi złe rzeczy.

Więc nie prosimy o kod. Prosimy o listę * * ograniczonych połączeń narzędzi: * *

[
  { "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" } }
]

To samo słownictwo PinePaper [serwer MCP] (/api/guides/mcp-integration) naraża na działanie zewnętrznych agentów - ale emitowane przez model działa lokalnie, i wykonywane na płótnie przez małego dyspozytora.

Uniemożliwianie nieprawidłowego wyjścia

Kluczowym ruchem jest * * ograniczone dekodowanie. * * Zamiast mieć nadzieję, że model wytwarza poprawny kształt, ograniczamy * jakie żetony może emitować: *

• Na budynku Chrome w * * Prompt API * * (Gemini Nano), przechodzimy * * JSON Schema * * jako ograniczenie odpowiedzi. Model może produkować tylko przedmioty, na które pozwala schemat - z additionalProperties: false każdy argument, którego schemat nie definiuje, jest dosłownie nierepresentacyjny.
• Na * * WebLLM * * (otwarty model działający na WebGPU), dołączamy gramatykę * * EBNF * * poprzez XGrammar. Gramatyka dyktuje strukturę; model wypełnia tylko wartości.

Oba produkują ten sam kształt narzędzia. Mała przepustka naprawcza, a następnie ratowanie blis- chybi mały model nadal robi - upuszczony name, argumenty bez opakowania - poprzez wyciągnięcie narzędzia z kształtu argumentu. Wynik jest taki, że "rysować zielony pentagon" staje się prawdziwym wywołaniem create_item zamiast błędu.

Przełącz na trzy niżej. Dwie ograniczone opcje wyglądają identycznie na cel: takie jest roszczenie. Jakie zmiany między nimi jest mechanizm, a nie wynik.

Dwóch dostawców, jedna umowa

AI nie jest jedną rzeczą - zależy od przeglądarki:

• / Browser AI Budynek Chrome 'a w * * Gemini Nano * * (window.LanguageModel). Model statków z przeglądarką; nie ma nic do pobrania od nas. Jest to najbardziej niezawodna ścieżka on- device dzisiaj, ponieważ JSON- schemat ograniczenie jest tanie i dobrze obsługiwane.
• PinePaper AI * * WebLLM * * uruchomiony model Qwen2.5 w dowolnej przeglądarce WebGPU. Pobiera model raz (później buforowany), a następnie działa offline.
• • • Languages * non-English prompts są tłumaczone na angielski on- device najpierw (za pośrednictwem przeglądarki built- in tłumacz), ponieważ małe modele kode- zorientowane są na angielski-centryczny. Wygenerowana scena jest taka sama bez względu na szybki język.

Użytkownik wybiera silnik; wszystko na dole - ograniczenie, wykonawca, płótno - jest identyczny.

Edycja, nie tylko generowanie

Jednostrzałowy generator nie jest asystentem. Aby wesprzeć "zrobić gwiazdę czerwoną", model musi wiedzieć, co jest już na płótnie. Więc za każdym razem karmimy go kompaktowym migawką aktualnych elementów - ich ids, typy, i kolory - dokładnie tak, jak na czacie po stronie serwera. "Zrób gwiazdę czerwoną", a następnie ustaw się na prawdziwe połączenie modify_item przeciwko identyfikatorowi elementu. (A ponieważ mały model czasami odnosi się do "the _ circle", kiedy to oznacza gwiazdę, wykonawca rozwiązuje niewyraźne odniesienia do żywego płótna.)

Dziennik rozmów jest przechowywany na urządzeniu w lokalnym magazynie. Nic z tego nie jest nigdzie wysyłane chyba, że zdecydowałeś się na podzielenie się nieudanymi sugestiami, co pomaga nam ulepszyć sugestie i gramatykę.

Kiedy mały model nie wystarczy.. eskalacja

Oto najszczersza część: * * model 0.5-2B jest najsłabszym poziomem. * * Ograniczone gwarancje dekodowania * poprawna struktura *, ale model nadal musi wybrać odpowiednie narzędzie i rozsądne wartości, i nie zawsze. Poproś o pentagon i nieokreślony model daje Ci sześciokąt; poproś dwukrotnie o "czerwony" i może uruchomić generator zamiast.

Architektura traktuje urządzenie jako pierwszy poziom, nie tylko. Po kilku nieudanych próbach asystent proponuje przekazać całą rozmowę modelowi Cloud ten sam zamiar, to samo płótno, o wiele bardziej zdolny model - i kontynuujesz dokładnie tam, gdzie skończyłeś. Niska wierność, wolna i prywatna, z jedną ścieżką do wysokiej wierności, gdy jej potrzebujesz.

Czego się nauczyliśmy

• • • Constraints beat prompting. * * Uziemiony sygnał systemowy pomaga; gramatyka / schemat, który sprawia, że nieprawidłowe wyjście jest niemożliwe, pomaga znacznie więcej. Największy skok niezawodności nastąpił z ograniczonego dekodowania, a nie z lepszego momentu.
• • • Rozmiar modelu nadal dominuje. * * Przejście z modelu 0.5B do modelu 1.5B wyraźnie poprawiło, jak często asystent wybiera odpowiednie narzędzie. Nie ma takiego momentu, który zmieniłby mały model w inteligentny.
• Pełna gramatyka może być zbyt duża. Nasza pierwsza gramatyka zakodowana * każda * możliwa operacja - w tym luk ratunkowy o ograniczonej długości dla arbitralnego kodu rysunku. Był tak duży, że ograniczony dekodowanie zablokowało stronę. Kompaktowa gramatyka obejmująca wspólne operacje jest domyślna; pełna powierzchnia jest opt- in.
• • • Run it off the main thread. * * Model wykonujący wniosek na nici UI zamraża stronę. WebLLM działa w sieci Web Worker, więc edytor pozostaje aktywny, podczas gdy model ładuje i generuje.

Co dalej

To jest eksperymentalne i ulepszające. Plan działania:

• • • Szersze pokrycie narzędzi w ścieżce ograniczonej * * - więcej operacji PinePaper ekspresowych bez luku ucieczki.
• • • Większe modele na urządzeniu * * w miarę jak rozwijają się katalogi modeli WebGPU, handlując wielkością pobierania dla niezawodności.
• • • A streamer eval loop * * - przy użyciu opted-in raporty awarii do pomiaru, które skłania do podróży modeli on- device i utwardzić gramatykę przeciwko nim.
• • • A gładszy na urządzeniu → Chmura przekazania * *, więc eskalacja czuje się jak podkręcanie jakości wybierania zamiast przełączania narzędzi.

Przepustowość: to samo deklarujące narzędzie słownictwo napędza model po obu stronach granicy przeglądarki. Zewnętrzny agent nazywa te narzędzia przez MCP; model on- device wywołuje te same kształty lokalnie. Jeden kontrakt, agenci gdziekolwiek biegną.

*Spróbuj w edytorze open * * AI / Code → Assistant * . Jest za darmo, działa na urządzeniu i nie potrzebuje konta.