Een ontwerpassistent die draait op uw apparaat

Het uitgangspunt

De meeste AI ontwerptools sturen je prompt naar een server, draaien een groot model en sturen code terug. Dat heeft een account nodig, een netwerkrondreis, en vertrouw erop dat je werk-in-vooruitgang iemand anders zijn infrastructuur doorgeeft.

We wilden weten hoe ver het andere uiterste gaat: een ontwerpassistent waar het model op je eigen machine draait. Geen rekening. Geen upload. De prompt verlaat nooit de browser. Dit is nu live in PinePaper's editor als een experimentele AI / Code → Assistent tabblad, en dit bericht is een eerlijk verslag van hoe het werkt en waar het kort valt.

Waarom vraag je het model niet om code?

De voor de hand liggende benadering is om het on-device model te vragen om JavaScript te schrijven tegen PinePaper's API en het uit te voeren. We hebben het geprobeerd. Het faalt slecht.

Kleine modellen De modellen die passen op een laptop hebben ** geen kennis van een specifieke app API.** Vraag een model van 0.5 De output looks lijkt op code en doet stilletjes het verkeerde.

Dus we vragen niet om code. We vragen om een ** beperkte lijst van tool calls:**

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

Dezelfde woordenschat PinePaper's MCP server stelt externe agenten bloot maar wordt uitgezonden door een model dat lokaal draait en wordt uitgevoerd op het doek via een kleine dispatcher.

Ongeldige uitvoer onmogelijk maken

De belangrijkste zet is gekorte decodering. In plaats van te hopen dat het model een geldige vorm produceert, beperken we * welke tokens het zelfs mag uitstralen:*

• Op Chrome's ingebouwde Prompt API (Gemini Nano) passeren we een JSON Schema als reactiebeperking. Het model kan alleen objecten produceren die het schema toelaat met additionalProperties: false, elk argument dat het schema niet definieert is letterlijk onrepresenteerbaar.
• Op WebLLM (een open model draait op WebGPU), we voeg een EBNF grammatica toe via XGrammar. De grammatica dicteert de structuur; het model vult alleen de waarden in.

Beide produceren dezelfde gereedschap-roepvorm. Een kleine reparatie pas dan redt de bijna-missers een klein model nog steeds maakt een gedaalde name, argumenten zonder hun wrapper Het resultaat is dat "teken een groene pentagon" een echte create_item call wordt in plaats van een fout.

Twee aanbieders, één contract

On-device AI is niet één ding, het hangt af van de browser:

• Browser AI Chrome's ingebouwde Gemini Nano (window.LanguageModel). Het model wordt geleverd met de browser; er valt niets van ons te downloaden. Dit is de meest betrouwbare on-device pad vandaag, omdat de JSON-schema beperking is goedkoop en goed ondersteund.
• • PinePaper AI** * WebLLM met een Qwen2.5 model in elke WebGPU browser. Het downloadt een model eenmaal (gecached daarna), dan loopt offline.
• Talen Niet-Engelse prompts worden eerst vertaald naar het Engels op het apparaat (via de ingebouwde vertaler van de browser), omdat de kleine code-georiënteerde modellen Engels-centrisch zijn. De gegenereerde scène is hetzelfde ongeacht de snelle taal.

De gebruiker pakt de motor; alles stroomafwaarts de beperking, de uitvoerder, het canvas is identiek.

Bewerken, niet alleen genereren

Een one-shot generator is geen assistent. Om de ster rood te maken, moet het model weten wat er al op het doek staat. Dus elke draai voeren we het een compacte snapshot van de huidige items "Maak de ster rood" dan lost op tot een echte modify_item oproep tegen de id van het item. (En omdat een klein model soms verwijst naar "the circle" wanneer het de ster betekent, lost de uitvoerder fuzzy referenties op tegen het live doek.)

Het gesprekslogboek wordt op uw apparaat bewaard in lokale opslagruimte. Niets over het wordt ergens naartoe gestuurd .

Wanneer het kleine model is niet genoeg

Hier is het eerlijke deel: *een 0.5 Beperkte decodering garandeert * ongeldige structuur, maar het model moet nog steeds de juiste tool en verstandige waarden kiezen, en het zal niet altijd. Vraag naar een pentagon en een ondergespecificeerd model geeft je een zeshoek; vraag twee keer om "rood" en het kan in plaats daarvan een generator draaien.

Dus de architectuur behandelt on-device als de first tier, niet de enige. Na een paar mislukte pogingen biedt de assistente aan om het hele gesprek hand up naar het Cloud model Lage trouw, vrij en privé, met een één-klik pad naar hoge trouw wanneer je het nodig hebt.

Wat we geleerd hebben

• Constraints beat prompting. Een geaard systeemprompt helpt; een grammatica/schema dat ongeldige output onmogelijk maakt helpt veel meer. De enige grootste betrouwbaarheid sprong kwam van beperkte decodering, niet van een betere prompt.
• Modelgrootte domineert nog steeds. Gaan van een 0.5B naar een 1.5B model merkbaar verbeterd hoe vaak de assistent kiest het juiste gereedschap. Er is geen prompt die een klein model in een slimme verandert.
• De volledige grammatica kan te groot zijn. Onze eerste grammatica gecodeerde elk mogelijke operatie met inbegrip van een begrensde vluchtluik voor willekeurige tekencode. Het was zo groot dat beperkte decodering de pagina stillegde. Een compacte grammatica die de gemeenschappelijke operaties dekt is de juiste standaard; het volledige oppervlak is opt-in.
• Ren het van de hoofddraad. Een model dat gevolg geeft aan de UI-thread bevriest de pagina. WebLLM draait in een Web Worker zodat de editor reageert terwijl een model laadt en genereert.

Wat nu

Dit is experimenteel en beter. Over de routekaart:

• Bredere dekking van het gereedschap in het beperkte pad Meer van PinePaper's operaties expressief zonder de vrije vorm ontsnapping luik.
• ** Grotere on-device modellen** als WebGPU model catalogi groeien, trading download grootte voor betrouwbaarheid.
• Een strakkere eval loop met behulp van opto-in failure rapporten om te meten welke aanwijzingen trip de on-device modellen en verharden de grammatica tegen hen.
• Een gladdere on-device → Cloud handoff, dus escalatie voelt als het draaien van de kwaliteit wijzerplaat in plaats van schakelen tools.

De throughline: dezelfde declarative tool woordenschat rijdt een model aan weerszijden van de browsergrens. Een externe agent noemt deze tools over MCP; een on-device model noemt dezelfde vormen lokaal. Eén contract, agenten waar ze ook heen rennen.

Probeer het in de editor Open AI / Code → Assistent. Het is gratis, draait op uw apparaat, en heeft geen account nodig.