Isang Disenyo na Tumutulong sa Iyong Kalinisan — Walang Ulat, Walang Tagapagsilbi

Ang saligan

Karamihan sa mga kasangkapang pangdisenyo ng AI ay nagpapadala ng iyong advanced sa isang server, nagpapatakbo ng isang malaking modelo, at nagpapadala ng code pabalik. Iyan ay nangangailangan ng account, network round-trip, at trust na ang iyong trabaho-in-produce ay naghahatid ng imprastraktura ng iba.

Nais naming malaman kung gaano kalayo ang kabilang dulo: a design assistant kung saan ang modelo ay tumatakbo sa iyong sariling makina. Walang ulat. Walang pasok. Hindi kailanman umaalis ang tagapag - alaga. Ito ngayon ay naninirahan sa editor ng PinePaper bilang isang eksperimental na *PAI / Code → Assistant task, at ang post na ito ay isang tapat na salaysay kung paano ito gumagana at kung saan ito ay bumabagsak.

Bakit hindi na lamang tanungin ang modelo para sa kodigo?

Ang maliwanag na paraan ay tanungin ang on-device model na isulat ang JavaScript laban sa PinePaper's API at patakbuhin ito. Sinubukan namin ito. Ito'y lubhang nabibigo.

Maliliit na modelo — ang mga bagay na kasya sa laptop — walang kaalaman sa espesipikong ap's API. Tanungin ang isang modelong 0.5–2B na tatawagin ang PinePaper.create() at ito ay nag-iindorso: isang susing hindi binabasa ng pamamaraan (isang modelong SVG-style fill kung saan inaasahan ng API ang color), isang pamamaraang naisip nito, mga argumento sa maling hugis. Ang output * ay tumitingin tulad ng code at tahimik na ginagawa ang mali.

Kaya hindi tayo humihingi ng code. Humingi kami ng constrained list ng mga tawag sa kasangkapan:**

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

Ang parehong bokabularyong PinePaper's MCP server ay naglalantad sa mga panlabas na ahente – ngunit inilabas ng isang modelo na tumatakbo sa lokal na lugar, at pinatay sa kanbas sa pamamagitan ng isang maliit na tagahatid ng balita.

Ginagawang imposible ang hindi tanggap na output

Ang pangunahing galaw ay constrained decoding. Sa halip na umasang ang modelo ay makagagawa ng isang mabisang hugis, pinipigilan namin * kung anong mga paunawa ang ipinahihintulot pa nga nitong maglabas:*

• Sa itinayong-in ni Chrome Prompt API (Gemini Nano), nadaanan natin ang isang *JSON Schema bilang isang resettled. Ang modelo ay makagagawa lamang ng mga bagay na ipahihintulot ng schema — kasama ang additionalProperties: false, anumang argumento na hindi binibigyang kahulugan ng schema ay literal na hindi kinakatawan.
• Sa WebLLM (isang bukas na modelo na tumatakbo sa WebGPU), kami ay nagkakabit ng EBNF balarila sa pamamagitan ng XGrammar. Idinidikta ng balarila ang kayarian; ang modelo lamang ang pumupuno sa mga halaga.

Pareho silang gumagawa ng parehong beter-cal na hugis. Pagkatapos ay hinahabi ng isang maliit na pagkukumpuni ang halos-misses na isang maliit na modelo na ginagawa pa rin — name, mga argumentong walang balot — sa pamamagitan ng paglalagay sa kasangkapan mula sa hugis ng argumento. Ang resulta ay ang "pagguhit ng isang berdeng pentagon" ay nagiging isang tunay na create_item na tawag sa halip na isang pagkakamali.

Maghagisan sa pagitan ng tatlo sa ibaba. Ang dalawang bawal na mapagpipilian ay magkatulad ang hitsura layunin: iyan ang pag - aangkin. Ang mga pagbabago sa pagitan nila ay ang mekanismo, hindi ang mekanismo resulta.

Dalawang tagapaglaan, isang kontrata

Ang on-device AI ay hindi isang bagay — depende ito sa browser:

• *Browser AI — Itinayo ang Chrome-in *PGemini Nano (window.LanguageModel). Ang modelong mga barko na may browser; walang mai-download mula sa amin. Ito ang pinaka-mapagkakatiwalaang on-device path sa ngayon, dahil ang JSON-schema demandt ay mura at mahusay ang suporta.
• *PinePaper AI — WebLLM na nagpapatakbo ng isang Qwen2.5 model sa anumang WebGPU browser. Minsan itong nag - download ng isang modelo (pinatay pagkatapos nito), pagkatapos ay tumatakbo ito sa offline.
• *Languate — ang non-English propulsion ay isinalin sa Ingles na on-device muna (via the browser's na-in translation), dahil ang mga maliit na code-oriented na modelo ay Ingles-centric. Ang likhang tanawin ay pareho saanmang wikang madalian.

Hinupili ng gumagamit ang makina; lahat ng daloy ng tubig — ang demand, ang proscutor, ang kanbas — ay magkatulad.

Pagtitimpla, hindi lamang paglikha

Ang isang-shot generator ay hindi katulong. Upang suportahan ang "pagpula sa bituin," kailangang malaman ng modelo kung ano na ang nasa kanbas. Kaya bawat pagliko ay pinakakain namin ito ng isang siksik na larawan ng kasalukuyang mga bagay — ang kanilang mga id, uri, at kulay — tulad ng isang server-side chat. "Gawing pula ang bituin" pagkatapos ay tumutungo sa isang tunay na modify_item na tawag laban sa id ng bagay. (At dahil sa ang isang maliit na modelo ay kung minsan tumutukoy sa "ang circle" kapag ito ay nangangahulugang ang bituin, ang produktor ay nagreresulta sa mga malabong pagtukoy laban sa live canvas.)

Ang logo ng pag-uusap ay itinatago sa iyong aparato sa lokal na imbakan. Walang anumang ipinadadala rito saanman — malibang piliin mong ibahagi ang nabigong pangganyak, na tumutulong sa atin na pagbutihin ang pangganyak at balarila.

Kapag hindi sapat ang maliit na modelo — dumarami

Narito ang tapat na bahagi: a 0.5–2B modelo ang pinakamahinang baitang.** Ang kinukwentang decoding ay gumagarantiya ng valid istruktura, ngunit ang modelo ay kailangan pa ring pumili ng tamang kasangkapan at makatuwirang mga pagpapahalaga, at hindi ito laging mapipili. Humingi ng pentagon at isang under-specified model ay nagbibigay sa iyo ng isang hexagon; humingi ng dalawang beses na "pula" at sa halip ito ay maaaring magpatakbo ng isang generator.

Kaya ang arkitektura ay tumatrato sa on-device bilang ang first andana, hindi lamang ang isa. Pagkatapos ng ilang nabigong pagtatangka ang katulong ay nag-aalok sa ** ibigay ang buong usapan hanggang sa Cloud model* — gayunding layunin, kanbas, isang mas mahusay na modelo — at ikaw ay nagpapatuloy kung saan ka umalis. Mababang katapatan, malaya at pribado, na may one-click na landas sa mataas na katapatan kapag kailangan mo ito.

Ang aming natutuhan

• Ang mga contraints best ending. Ang isang conclured system leader ay nakakatulong; ang isang balarila/schema na gumagawa sa hindi tanggap na output na imposible ay mas malaki ang maitutulong. Ang nag - iisang pinakamalaking maaasahang pagtalon ay ang pagbabawal sa pag - aalis ng mga bagay - bagay, hindi mula sa mas mahusay na hakbang.
• Ang sukat ng makina ang nangingibabaw pa rin. Ang pagpunta mula sa 0.5B tungo sa isang modelong 1.5B ay kapansin - pansing napabuti kung gaano kadalas pinipili ng katulong ang tamang kagamitan. Walang madalian na gumagawa sa isang maliit na modelo na matalino.
• Ang buong balarila ay maaaring napakalaki. Ang ating unang kodigo ng balarila * bawat* posibleng operasyon — kasama ang isang cruted-haba na escape off off off offed para sa inscription code. Ito'y napakalaki anupa't ang pahina ay natigilan dahil sa decoding. Isang siksik na balarila na sumasaklaw sa karaniwang mga operasyon ang tamang default; ang buong ibabaw ay op-in.
• ** Ilagay ito sa pangunahing sinulid.* Pinayelo ng isang modelo na naglalagay ng larawan sa hibla ng UI ang pahina. Ang WebLLM ay tumatakbo sa isang Web Worker kaya ang editor ay nananatiling tumutugon habang ang isang modelong karga at produksyon.

Ano ang susunod

Ito ay eksperimental at sumusulong. Sa daan:

• *Wider tool sumasaklaw sa ipinagbabawal na landas — mas marami sa mga operasyon ng PinePaper ang nagpapahayag na maaari nang hindi mapipisa ang freeform.
• Larger on-device model habang ang mga katalogo ng modelong WebGPU ay lumalaki, na nangangalakal ng download na sukat para sa pagkamaaasahan.
• ** Mas mahigpit na presilya* — gamit ang opted-in failure reports upang sukatin na nag-udyok ng paglalakbay ang on-device models at tumigas ang balarila laban sa kanila.
• Ang mas makinis na on-device → Cloud handoff, kaya ang paglaki ay parang pagbubukas ng kalidad na dial sa halip na pagpapalit ng mga kagamitan.

Ang unline: ang parehong declarative tool bukary ay nagtutulak sa isang modelo sa magkabilang gilid ng hangganan ng browser. Tinatawag ng isang panlabas na agent ang mga kasangkapang ito sa MCP; tinatawag ng isang on-device model ang parehong mga hugis sa lugar. Isang kontrata, mga ahente saanman sila tumakbo.

Subukin ito sa editor — bukas AI / Code → Assistant. Ito'y libre, tumatakbo sa iyong aparato, at hindi na kailangan ang account.