La premessa

La maggior parte degli strumenti di progettazione AI invia il tuo prompt a un server, esegui un modello grande e invia il codice indietro. Questo ha bisogno di un account, di una rete di andata e ritorno, e si fidi che il tuo work-in-progress transita nell'infrastruttura di qualcun altro.

Volevamo sapere fino a che punto l'altro estremo va: un assistente di design dove il modello corre sulla vostra macchina. Nessun conto. Nessun caricamento. Il prompt non lascia mai il browser. Questo è ora live nell'editor di PinePaper come una scheda sperimentale AI / Code → Assistant, e questo post è un resoconto onesto di come funziona e dove cade breve.

Perché non chiedere il codice al modello?

L'approccio ovvio è quello di chiedere al modello on-device di scrivere JavaScript contro PinePaper API e eseguirlo. Ci abbiamo provato. Non riesce male.

Piccoli modelli — quelli che si adattano a un computer portatile — avere nessuna conoscenza del API di un'app specifica. Chiedi a un modello 0.5-2B di chiamare PinePaper.create() e improvvisa: una chiave che il metodo non legge (un SVG-style fill dove il API si aspetta color), un metodo immaginato, argomenti nella forma sbagliata. L'output * guarda* come il codice e silenziosamente fa la cosa sbagliata.

Quindi non chiediamo il codice. Chiediamo un elenco limitato delle chiamate degli strumenti:**

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

Lo stesso vocabolario PinePaper MCP server espone ad agenti esterni — ma emesso da un modello che corre localmente, e eseguito su tela attraverso un piccolo dispacciatore.

Rendere impossibile l'uscita non valida

La mossa chiave e' la decodifica contrattata. Invece di sperare che il modello produca una forma valida, confidiamo che gettoni è anche consentito emettere:

• Su Chrome integrato Prompt API (Gemini Nano), passiamo un JSON Schema come vincolo di risposta. Il modello può produrre solo oggetti che lo schema permette — con additionalProperties: false, qualsiasi argomento che lo schema non definisce è letteralmente inrappresentabile.
• Su WebLLM (un modello aperto in esecuzione su WebGPU), alleghiamo una grammatica EBNF** tramite XGrammar. La grammatica detta la struttura; il modello riempie solo i valori.

Entrambi producono la stessa forma di portautensili. Un piccolo pass di riparazione poi recupera i quasi-misses un piccolo modello ancora fa — un name caduto, argomenti senza il loro wrapper — facendo riferimento allo strumento dalla forma dell'argomento. Il risultato è che "disegnare un pentagono verde" diventa una vera chiamata create_item invece di un errore.

Passare tra i tre sotto. Le due opzioni vincolate sembrano identiche scopo: questo è il reclamo. Ciò che cambia tra loro è il meccanismo, non il esito.

Due fornitori, un contratto

On-device AI non è una cosa — dipende dal browser:

• Ricercatore AI Chrome integrato Gemini Nano (window.LanguageModel). Il modello navi con il browser; non c'è nulla da scaricare da noi. Questo è il percorso on-device più affidabile oggi, perché il vincolo JSON-schema è economico e ben supportato.
• **PinePaper AI * WebLLM che esegue un modello Qwen2.5 in qualsiasi browser WebGPU. Scarica un modello una volta (incassato in seguito), poi corre offline.
• Languages i solleciti non inglesi vengono tradotti prima in inglese (traduttore integrato del browser), perché i piccoli modelli orientati al codice sono in inglese-centrici. La scena generata è la stessa indipendentemente dalla lingua del prompt.

L'utente sceglie il motore; tutto a valle — il vincolo, l'esecutore, la tela — è identico.

Modifica, non solo generando

Un generatore di un colpo non è un assistente. Per sostenere "fare la stella rossa", il modello deve sapere cosa c'è già sulla tela. Così ogni turno lo nutriamo un'istantanea compatta degli elementi attuali — loro ids, tipi e colori — esattamente come una chat sul lato server. "Fare la stella rossa" poi si risolve a una vera chiamata modify_item contro l'id dell'oggetto. (E perché un piccolo modello a volte si riferisce a "il circle" quando significa la stella, l'esecutore risolve riferimenti fuzzy contro la tela live.)

Il registro di conversazione è tenuto sul dispositivo nella memoria locale. Non c'è nulla di tutto ciò che viene inviato da nessuna parte — a meno che non si opti esplicitamente per condividere suggerimenti falliti, che ci aiuta a migliorare i suggerimenti e la grammatica.

Quando il piccolo modello non è abbastanza — escalate

Ecco la parte onesta: un modello 0.5-2B è il livello più debole. La decodifica limitata garantisce la struttura valvolare, ma il modello deve ancora scegliere lo strumento giusto e i valori sensibili, e non sempre. Chiedere un pentagono e un modello sotto-specificato ti dà un esagono; chiedere due volte per "rosso" e potrebbe eseguire un generatore invece.

Così l'architettura tratta on-device come il first tier, non l'unico. Dopo alcuni tentativi falliti l'assistente offre di hand l'intera conversazione fino al modello Cloud — stesso intento, stessa tela, un modello molto più capace — e tu continui esattamente dove ti sei lasciato. Bassa fedeltà, libera e privata, con un percorso di un clic per alta fedeltà quando ne hai bisogno.

Cosa abbiamo imparato

• I vincoli battono il prompt. Un prompt del sistema a terra aiuta; una grammatica/schema che rende impossibile l'uscita non valida aiuta molto di più. Il salto di affidabilità più grande è venuto da decodifica limitata, non da un prompt migliore.
• La dimensione del modello domina ancora. Passando da uno 0,5B a un modello 1.5B notevolmente migliorato come spesso l'assistente sceglie lo strumento giusto. Non c'è alcun prompt che trasforma un piccolo modello in uno intelligente.
• La grammatica può essere troppo grande. La nostra prima grammatica ha codificato ogni possibile operazione incluso un portello di salvataggio limitato per codice di disegno arbitrario. Era così grande che la decodifica contrattata ha bloccato la pagina. Una grammatica compatta che copre le operazioni comuni è il giusto default; la superficie completa è opt-in.

• Tiralo fuori dal filo principale. # Un modello che fa l'inferenza sul filo dell'interfaccia utente blocca la pagina. WebLLM funziona in un Web Worker in modo che l'editor rimanga reattivo mentre un modello carica e genera.

Cosa succede

Questo è sperimentale e migliorare. Sulla mappa stradale:

• Copertura degli strumenti Wider nel percorso limitato — più delle operazioni di PinePaper espressibili senza il portello di fuga libera.
• Larger on-device modelli in quanto i cataloghi di modelli WebGPU crescono, le dimensioni di download di trading per l'affidabilità.
• Un loop evale più stretto utilizzando report di guasto opted-in per misurare che spinge a trippare i modelli on-device e indurire la grammatica contro di loro.
• Un dispositivo on-device più fluido → Cloud handoff, quindi l'escalation sembra accendere il quadrante di qualità piuttosto che cambiare gli strumenti.

La linea: lo stesso vocabolario di strumento dichiarativo guida un modello su entrambi i lati del bordo del browser. Un agente esterno chiama questi strumenti su MCP; un modello on-device chiama le stesse forme localmente. Un contratto, agenti ovunque si trovino.

Provare nel redattore — open AI / Code → Assistant. E' gratis, funziona sul tuo dispositivo e non ha bisogno di nessun account.