· 6 min read

Návrhový asistent, který běží na vašem zařízení - žádný účet, žádný server

PinePaper on- zařízení AI asistent změní příkaz na skutečnou scénu pomocí jazykového modelu, který běží zcela ve vašem prohlížeči. Zde je architektura - omezené nástrojové hovory, dva poskytovatelé, a upřímný popis toho, co malý model může a nemůže dělat.

Předpoklad

Většina designových nástrojů AI pošle vaši výzvu na server, spustí velký model a pošle kód zpět. To potřebuje účet, síť round-trip, a věřit, že vaše práce-in- pokrok prochází něčí infrastruktury.

Chtěli jsme vědět, jak daleko je ten druhý extrém: * * designový asistent, kde model běží na vašem vlastním stroji. * * Žádný účet. Žádné nahrávání. Příkaz nikdy neopustí prohlížeč. Toto je nyní živě v editoru PinePaper jako experimentální * * AI / Code → Asistent * *, a tento příspěvek je poctivý popis toho, jak funguje a kde to zaostává.

Proč se prostě nezeptáš modelu kódu?

Jasným přístupem je požádat model on- device, aby napsal JavaScript proti PinePaper a spustit jej. Zkusili jsme to. Špatně to selže.

Malé modely - ty, které se vejdou do laptopu - nemají žádné znalosti o konkrétní aplikaci API. * * Zeptejte se modelu 0.5-2B volat PinePaper.create() a improvizuje: klíč metoda nečte (SVG-styl fill, kde API očekává color), metoda, kterou si představoval, argumenty ve špatném tvaru. Výstup * vypadá * jako kód a tiše dělá špatnou věc.

Takže se neptáme na kód. Žádáme o * * omezený seznam volání nástrojů: * *

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

Stejný slovník PinePaper je [MCP server] (/api/guides/mcp-integration) vystavuje externím agentům - ale emituje model běží lokálně, a provádí na plátně přes malý dispečer.

Neplatný výstup není možný

Klíčový krok je dekódování. Místo toho, abychom doufali, že model vytvoří platný tvar, omezíme * jaké tokeny je dokonce dovoleno emitovat: *

  • Na Chrome 's built- in * * Prompt API * * (Gemini Nano), jsme projít * * JSON Schema * * jako omezení odezvy. Model může produkovat pouze objekty, které Schéma povoluje - s additionalProperties: false, jakýkoliv argument, který schéma nedefinuje, je doslova nerepresivní.
  • Na * * WebLLM * * (open model běží na WebGPU), jsme Připojit * * EBNF gramatiku * * přes XGrammar. Gramatika určuje strukturu, model pouze vyplňuje hodnoty.

Oba produkují stejný tvar tool- call. Malý servisní průsmyk pak zachrání blízko-chybí malý model stále dělá - pokles name, argumenty bez jejich obal - tím, že inferring nástroj z argumentového tvaru. Výsledkem je, že "nakreslit zelený pětiúhelník" se stává skutečným create_item volání místo chyby.

Dva poskytovatelé, jedna smlouva

On- zařízení AI není jedna věc - záleží na prohlížeči:

      • Browser AI * * - Chrome 's built- in * * Gemini Nano * * (window.LanguageModel). Modelové lodě s prohlížečem, nemáme co stáhnout. Toto je dnes nejspolehlivější cesta na zařízení, protože omezení JSON- schema je levné a dobře podporované.
      • PinePaper AI * * - * * WebLLM * * běží model Qwen2.5 v libovolném prohlížeči WebGPU. Stahuje model jednou (cached after) a pak běží offline.
      • Languages * * - non-English results are translated to English on- device first (via the browser 's built- in translator), because the small code- oriented models are English-centric. Vygenerovaná scéna je stejná bez ohledu na rychlý jazyk.

Uživatel si vybere motor; vše po proudu - omezení, vykonavatel, plátno - je identické.

Editace, nejen generování

Jednorázový generátor není asistent. Na podporu "udělat hvězdu červenou", model potřebuje vědět, co už je na plátně. Takže každé otočení ho krmíme kompaktním snímkem aktuálních položek - jejich ID, typy a barvy - přesně tak, jako by to bylo na straně serverů. "Udělat hvězdu červenou" pak se rozhodne pro skutečné modify_item volání proti ID položky. (A protože malý model někdy odkazuje na "_ circle", když to znamená hvězda, vykonavatel řeší nejasné odkazy na živé plátno.)

Deník konverzace je uložen * * na vašem zařízení * * v místním úložišti. Nic o tom není posláno nikam - pokud se výslovně nerozhodnete sdílet neúspěšné podněty, které nám pomohou zlepšit podněty a gramatiku.

Když malý model nestačí - eskalovat

Zde je upřímná část: * * 0,5-2B model je nejslabší úroveň. * * Snížená dekódování garancí * platná struktura *, ale model stále musí vybrat správný nástroj a rozumné hodnoty, a to nebude vždy. Požádejte o pentagon a nedostatečně specifikovaný model vám dá šestiúhelník; požádejte dvakrát o "červenou" a to by mohlo spustit generátor místo.

Takže architektura se k zařízení chová jako k prvnímu stupni, ne jako jedinému. Po několika neúspěšných pokusech asistent nabízí * * ruce celý rozhovor nahoru k modelu Cloud * * - stejný záměr, stejné plátno, mnohem schopnější model - a pokračujete přesně tam, kde jste přestali. Nízká věrnost, volný a soukromý, s one-click cestu k vysoké věrnost, když ji potřebujete.

Co jsme se naučili

      • Constraints beat aspting. * * Uzemněný systém rychlý pomáhá; gramatika / schéma, které dělá neplatný výstup nemožné pomáhá mnohem více. Jeden největší skok spolehlivosti pochází z omezeného dekódování, ne z lepší rychlosti.
      • Model size still dominuje. * * Přechod z 0,5B na 1.5B model znatelně zlepšila, jak často asistent vybere správný nástroj. Není žádný spěch, který by z malého modelu udělal chytrého.
      • The full gramatic can be too big. * * Naše první gramatika zakódovala * každou * možnou operaci - včetně překlenutého únikového poklopu pro libovolný výkresový kód. Byl tak velký, že dekódování zablokovalo stránku. Kompaktní gramatika zahrnující společné operace je správný výchozí; celý povrch je opt- in.
      • Run it off the main thread. * * Model, který dělá inference na vlákně UI zmrazí stránku. WebLLM běží v webu Worker, takže editor zůstává citlivý, zatímco model načte a generuje.

Co dál

Tohle je experimentální a lepší. V plánu:

      • Větší pokrytí nástroje v omezené cestě * * - více operací PinePaper je výrazný bez freeform únikový poklop.
      • Larger on- device models * * as WebGPU model katalogy rostou, obchodování velikost stahování pro spolehlivost.
      • A tender eval loop * * - using opted- in failure reports to measure which undertakes the on- device models and harden the gramatic against them.
      • A jemnější on- device → Cloud handoff * *, takže eskalace cítí, jako by se obrátil na kvalitní vytáčení spíše než přepínání nástrojů.

Průchodnost: stejný deklarativní nástroj slovní zásoba řídí model na obou stranách hranice prohlížeče. Externí agent nazývá tyto nástroje přes MCP; model on- zařízení nazývá stejné tvary lokálně. Jedna smlouva, agenti všude, kde běží.

  • Zkuste to v editoru - otevřít * * AI / Code → Asistent * *. Je zdarma, běží na vašem zařízení, a nepotřebuje účet. *

Ready to create?

Start making animated GIFs, videos, and graphics — free, no signup.

Open PinePaper Editor