· 7 min read

A design asszisztens, hogy fut az eszköz - nincs számla, nincs kiszolgáló

PinePaper on-device AI asszisztense igazi jelenetté alakít egy prompt-ot egy nyelvi modell segítségével, amely teljesen a böngésződben fut. Itt az architektúra - korlátozott szerszámhívások, két szolgáltató, és egy őszinte beszámoló arról, hogy egy apró modell mire képes és mire nem.

A feltevés

A legtöbb AI tervezési eszköz elküldi az azonnali egy szerver, fut egy nagy modell, és küldje vissza a kódot. Ahhoz kell egy számla, egy hálózati körutazás, és bízom benne, hogy a munka-a-haladás átviszi valaki más infrastruktúráját.

Tudni akartuk, milyen messzire megy a másik extrém: * * * egy design asszisztens, ahol a modell fut a saját gép. * * Nincs számla. Nincs feltöltés. A prompt soha nem hagyja el a böngészőt. Ez most élőben PinePaper szerkesztője, mint egy kísérleti * * AI / Code → Asszisztens * * tab, és ez a bejegyzés egy őszinte számla, hogyan működik, és hol esik rövid.

Miért nem kérdezed meg a modellt a kódról?

A nyilvánvaló megközelítés az, hogy kérjük meg az on-device modell írni JavaScript ellen PinePaper API és futtassa. Próbáltuk. Rosszul sikerült.

Kis modellek - a laptopra való.. nincs tudomása egy adott alkalmazás API-éről. Kérjen egy 0.5-2B modellt, hogy hívja PinePaper.create() és improvizál: egy kulcs a módszer nem olvasható (egy SVG- style fill, ahol a API elvárja color), egy olyan módszer, amit tervezett, argumentumok a rossz formában. A kimenet * úgy néz ki * mint a kód és csendben csinál a rossz dolog.

Tehát nem kérünk kódot. Kérünk egy * * kényszerített listát a szerszám hívások: * *

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

Ugyanaz a szókincs, a PinePaper [MCP szerver] (/api/guides/mcp-integration), külső ügynököknek - de egy helyi modell adta ki, és egy kis diszpécseren keresztül végezték ki a vásznon.

Az érvénytelen kimenet lehetetlenné tétele

A legfontosabb lépés a dekódolás. Ahelyett, hogy azt remélnénk, hogy a modell egy érvényes formát hoz létre, korlátozzuk, hogy * milyen zsetonokat ad ki: *

  • A Chrome épületén * * Prompt API * * (Gemini Nano), a * * JSON Schema * * válaszkorlátozásként. A modell csak tárgyakat tud előállítani, amiket a séma engedélyez additionalProperties: false-vel, minden érv, amit a séma nem definiál, szó szerint nem reprezentatív.
  • On * * WebLLM * * (a WebGPU-en futó nyílt modell), csatolunk egy * * EBNF nyelvtant * * keresztül XGrammar. A nyelvtan határozza meg a szerkezetet, a modell csak az értékeket tölti ki.

Mindkettő ugyanazt az eszköz-hívás formát gyártja. Egy kis javítójegy, majd megmenti a közel lévőket egy eldobott name, viták nélkül a csomagolás - az eszközt az argumentum formájából. Az eredmény az, hogy "rajzoljon egy zöld pentagon" válik egy igazi create_item hívás helyett hiba.

Váltás az alábbi három között. A két kényszer opciók úgy néz ki, azonos a cél: ez a követelés. Mi változik közöttük a mechanizmus, nem a végeredmény.

Interactive demo — open in editor pp:PinePaper

Két szolgáltató, egy szerződés

A AI nem egy dolog a böngészőtől függ:

      • Browser AI * * - Chrome épülete * * Gemini Nano * * (window.LanguageModel). A modell hajók a böngésző; nincs mit letölteni tőlünk. Ez ma a legmegbízhatóbb egy eszköz útvonal, mert a JSON- smea kényszer olcsó és jól támogatott.
      • PinePaper AI * * - * * WebLLM * * Qwen2.5 modellt futtat bármely WebGPU böngészőben. Egyszer letölt egy modellt (utána leadta), majd offline fut.
      • Nyelvek * * - nem-angol parancsok fordítják angol on-device először (keresztül a böngésző építmény -a fordító), mert a kis kódorientált modellek angol-centrikus. A generált jelenet ugyanaz, függetlenül a gyors nyelvtől.

A felhasználó kiválasztja a motort, mindent lefelé - a kényszer, a végrehajtó, a vászon.. azonos.

Szerkesztés, nem csak generálás

Egy egylövéses generátor nem asszisztens. A "vörös csillag" támogatásához a modellnek tudnia kell, mi van a vásznon. Tehát minden fordulat egy kompakt képet ad az aktuális tételekről - az azonosítóik, típusaik és színeik - pontosan olyan, mint egy szerver-oldal beszélgetés. "Legyen piros a csillag", majd egy igazi modify_item hívás ellen a termék azonosítója. (És mivel egy kis modell néha a "The _ circle" -ra utal, amikor azt jelenti, hogy a csillag, a végrehajtó oldja fel bolyhos utalásokat az élő vászonra.)

A beszélgetésnaplót a helyi raktárban tároljuk. Semmi sincs elküldve kivéve, ha kifejezetten úgy dönt, hogy megosztja a sikertelen kérések, ami segít nekünk javítani a kérések és nyelvtan.

Ha a kis modell nem elég.. fokozódhat

Itt van az őszinte rész: * * a 0.5-2B modell a leggyengébb szint. * * Kényszerített dekódolási garanciák * érvényes szerkezet *, de a modell még mindig kell választani a megfelelő eszközt és értelmes értékeket, és ez nem fog mindig. Kérj egy pentagont és egy aluldefiniált modellt, ami hatszöget ad; kérj kétszer vöröset, és lehet, hogy egy generátort működtet helyette.

Tehát az építészet az eszközt, mint az első * szint, nem az egyetlen. Néhány sikertelen kísérlet után az asszisztens felajánlja, hogy az egész beszélgetést átadja a Cloud modellnek ugyanaz a szándék, ugyanaz a vászon, sokkal rátermettebb modell.. és pontosan ott folytatod, ahol abbahagytad. Alacsony hűség, szabad és privát, egy kattintással a magas hűség, ha szükség van rá.

Amit megtanultunk

      • Constraints beat sprinting. * * A földelt rendszer prompt segít; a gramma / séma, amely érvénytelen kimenetet lehetetlen segít sokkal. Az egyetlen legnagyobb megbízhatósági ugrás a korlátozott dekódolásból jött, nem egy jobb gyorsaságból.
      • Modell méret még mindig dominál. * * A 0.5B-ről az 1.5B modellre való áttérés észrevehetően javított azon, hogy az asszisztens milyen gyakran választja ki a megfelelő eszközt. Nincs olyan pillanat, ami egy apró modellt okossá változtatna.
      • A teljes nyelvtan túl nagy lehet. * * Az első nyelvtani kódolt * minden * lehetséges művelet - beleértve egy visszapattanó-hosszúságú menekülőnyílást önkényes rajzoláshoz. Olyan nagy volt, hogy a dekódolás elakadt. A közös műveleteket lefedő kompakt nyelvtan a helyes alapértelmezés; a teljes felület opt- in.
      • Run it off the main throne. * * Egy modell, aki az UI fonalra mutat, lefagyasztja az oldalt. WebLLM fut a web Worker, így a szerkesztő reagál, míg a modell terhelés és generál.

Mi következik

Ez kísérleti és javuló. Az ütemtervről:

      • Szélesebb eszköz lefedettség a szűk ösvényen * * - a PinePaper további műveletei expresszálhatók a freeform menekülőnyílás nélkül.
        • Nagyobb egy eszköz modellek * * mint WebGPU modell katalógusok nőnek, kereskedelmi letöltési méret a megbízhatóság.
      • A closer eval loop * * - a hibajelentések használata, amelyek az on-device modellekre való kattintás és a nyelvtan ellenük történő megkeményítése érdekében szükségesek.
      • A simább egy-eszköz → Cloud handoff * *, így eszkaláció úgy érzi, mintha felfordítja a minőségi tárcsa helyett kapcsolási eszközök.

Az átvezető vonal: ugyanaz a deklaratív eszköz szókincs vezet egy modellt mindkét oldalán a böngésző határ. Egy külső ügynök a MCP-en keresztül hívja ezeket az eszközöket; egy on-device modell helyileg ugyanazokat a formákat hívja. Egy szerződés, ügynökök, bárhol is futnak.

*Próbáld ki a szerkesztőben open * * AI / Code → asszisztens * . Ingyen van, a készülékeden fut, és nem kell számla.

Ready to create?

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

Open PinePaper Editor