· 6 min read

Un asistent de design care ruleaza pe design dvs. PIERDERE Fără cont, fără server

Asistentul PinePaper pe dispozitiv AI transformă un prompt într-o scenă reală folosind un model lingvistic care rulează în întregime în browser-ul tău. Aici e arhitectura apeluri de instrumente constrânse, doi furnizori, și o relatare onestă a ceea ce un model mic poate și nu poate face.

Premisa

Cele mai multe instrumente de proiectare AI trimite prompt la un server, rulați un model mare, și trimiteți codul înapoi. Care are nevoie de un cont, o rețea rotund-trip, și încredere că munca ta-în-progres tranzitează infrastructura altcuiva.

Am vrut să ştim cât de departe merge cealaltă extremă: un asistent de design unde modelul rulează pe propria mașină. Nici un cont. Fără încărcare. Promptul nu părăseşte niciodată browserul. Acest lucru este acum live în editorul PinePaper ca un experimental AI / Cod → Asistent tab, iar acest post este un cont cinstit de modul în care funcționează și în cazul în care acesta cade scurt.

De ce nu întrebi modelul de cod?

Abordarea evidentă este aceea de a cere modelului de pe dispozitiv să scrie JavaScript împotriva PinePaper API și să îl ruleze. Am încercat. Eșuează rău.

Modele mici cele care se potrivesc pe un laptop nu au cunoștințe de API a unei aplicații specifice. Cereți un model de 0.5. Ieșirea * pare * ca cod și în tăcere face un lucru greșit.

Deci nu cerem codul. Cerem o listă constrânsă de apeluri instrument:

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

Același vocabular PinePaper's MCP server expune la agenți externi dar emis de un model care rulează local şi executat pe pânză printr-un mic dispecer.

Imposibilitatea de ieșire invalidă

Mutarea cheie este constrânsă decodare. În loc să sperăm că modelul produce o formă validă, constrângem ce jetoane este permis să emită:

  • Pe Chrome's built-in Prompt API (Gemini Nano), am trece un JSON Schema ca o constrângere de răspuns. Modelul poate produce doar obiecte permise schema cu additionalProperties: false, orice argument pe care schema nu-l defineşte este literalmente nereprezentabil.
  • Pe WebLLM (un model deschis care rulează pe WebGPU), atașăm o gramatică EBNF via XGrammar. Gramatica dictează structura; modelul completează doar valorile.

Ambele produc aceeași formă instrument-call. O mică trecere de reparații apoi salvează aproape dor un model mic încă mai face a scăzut name, argumente fără ambalajul lor invocând instrumentul din forma de argument. Rezultatul este că "trage un pentagon verde" devine un apel create_item real în loc de o eroare.

Schimbă între cele trei de mai jos. Cele două opțiuni constrânse arată identic pe scop: aceasta este afirmația. Ce se schimbă între ele este mecanismul, nu rezultatul.

Interactive demo — open in editor pp:PinePaper

Doi furnizori, un contract

On-device AI nu este un lucru depinde de browser:

  • Browser AI Chrome's built-in Gemini Nano (window.LanguageModel). Navele model cu browser-ul; nu e nimic de descărcat de la noi. Aceasta este calea cea mai de încredere pe dispozitiv astăzi, deoarece constrângerea JSON-schema este ieftină și bine susținută.
  • PinePaper AI WebLLM rulează un model Qwen2.5 în orice browser WebGPU. Acesta descarcă un model o dată (cached ulterior), apoi rulează offline.
  • Limba non-Engleză prompts sunt traduse în limba engleză on-device primul (prin browser-in traducător), deoarece modelele mici orientate spre cod sunt englez-centric. Scena generată este aceeași indiferent de limba promptă.

Utilizatorul alege motorul; totul în aval constrângerea, executorul, panza este identic.

Editare, nu doar generarea

Un generator cu un singur foc nu este un asistent. Pentru a sprijini "face steaua roşie," modelul trebuie să ştie ce este deja pe pânză. Deci, fiecare viraj l-am hrani un instantaneu compact al elementelor curente id-urile lor, tipuri, și culorile lor exact ca un server-side chat ar fi. "Fă steaua roşie" apoi rezolvă la un apel modify_item real împotriva actului de identitate. (Și pentru că un mic model se referă uneori la "cercul" când înseamnă steaua, executorul rezolvă referințe neclare împotriva pânzei vii.)

Jurnalul conversaţiei este păstrat pe dispozitivul dumneavoastră în depozitul local. Nimic despre ea nu este trimis oriunde cu excepția cazului în care optați în mod explicit pentru a partaja prompte eșuate, care ne ajută să îmbunătățim prompte și gramatica.

Atunci când modelul mic nu este suficient escaladare

Iată partea sinceră: un model de 0.51/2B este cel mai slab nivel. Garanţii de decodare constrânse * structură validă*, dar modelul trebuie să aleagă instrumentul corect şi valorile sensibile, şi nu va fi întotdeauna. Cere un pentagon și un model nespecificat vă oferă un hexagon; cere de două ori pentru "roșu" și s-ar putea rula un generator în schimb.

Deci arhitectura tratează pe-dispozitiv ca primul nivel, nu singurul. După câteva încercări eșuate asistentul oferă să mână întreaga conversație până la modelul Cloud aceeasi intentie, aceeasi panza, un model mult mai capabil şi continui exact unde ai rămas. Fidelitate scăzută, liberă și privată, cu un singur click cale către fidelitate mare, atunci când aveți nevoie de ea.

Ce am învăţat

  • Constrângeri bate prompting. Un sistem la sol prompt ajută; o gramatica / schema care face imposibil de ieșire invalid ajută mult mai mult. Cel mai mare salt de fiabilitate a venit de la decodare constrâns, nu de la un prompt mai bun.
  • Mărimea modului încă domină. Trecerea de la 0.5B la un model 1.5B îmbunătăţit vizibil cât de des asistentul alege instrumentul potrivit. Nu există nici un prompt care transformă un model mic într-unul inteligent.
  • Gramatica completă poate fi prea mare. Prima noastră gramatica codificată * fiecare * posibilă operație inclusiv o trapă de evacuare de lungime delimitată pentru codul de desen arbitrar. A fost atât de mare încât decodarea constrânsă a blocat pagina. O gramatică compactă care acoperă operațiunile comune este implicitul corect; suprafața completă este opt-in.
  • Fugi de pe firul principal. Un model care face concluzii pe firul UI îngheaţă pagina. WebLLM rulează într-un Web Worker astfel încât editorul rămâne receptiv în timp ce un model încarcă și generează.

Ce urmează

Acest lucru este experimental și îmbunătățirea. În foaia de parcurs:

  • Acoperirea mai largă a uneltelor în calea constrânsă mai multe dintre operațiunile PinePaper expresibil fără trapa de evacuare freeform.
  • Larger on-device models as WebGPU model catalogs grow, trading download size for fiabilitate.
  • O buclă evală mai strânsă utilizarea rapoartelor de eșec optate-in pentru a măsura care determină împiedicarea modelelor de dispozitiv și întărirea gramaticii împotriva acestora.
  • A smooth on-device → Cloud handoff, so escalad feels like turning up the quality dial loc switch tools.

Linia de parcurs: același vocabular instrument declarativ conduce un model de pe fiecare parte a limitelor browser-ului. Un agent extern numește aceste instrumente peste MCP; un model on-device numește aceleași forme la nivel local. Un contract, agenţi oriunde ar alerga.

Încearcă în editorul deschide AI / Cod → Asistent. Este gratuit, rulează pe dispozitivul, și nu are nevoie de cont.

Ready to create?

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

Open PinePaper Editor