Isang Disenyo na Tumutulong sa Iyong Kalinisan — Walang Ulat, Walang Tagapagsilbi
Ang on-device AI assistant ng AI ay gumagawa ng isang advanced tungo sa isang real na eksena gamit ang isang modelo ng wika na ganap na tumatakbo sa iyong browser. Narito ang arkitektura — mahigpit na mga tawag sa kagamitan, dalawang tagapaglaan, at isang tapat na ulat ng kung ano ang magagawa at hindi magagawa ng isang maliit na modelo.
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.
Ang maliliit na modelo — ang mga bagay na angkop sa isang laptop — ay may nong kaalaman sa espesipikong app's API. Tanungin ang isang modelong 0.5–2B na tumawag ng PinePaper.create() at ito ay nag-iimbento: isang susing hindi binabasa ng pamamaraan (isang modelong SVG-style fill kung saan ang API ay umaasa ng 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, at pinatay sa kanbas sa pamamagitan ng isang maliit na tagahatid.
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 resection demand. Ang modelo ay makagagawa lamang ng mga bagay na pinahihintulutan ng schema — na may
additionalProperties: false, anumang argumento na hindi binibigyang kahulugan ng schema ay literal na hindi kinakatawan. - Sa WebLM (isang bukas na modelo na tumatakbo sa WebGPU), tayo ay nagdikit ng isang EBNF balarila via 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 isang maliit na pagre - repair pass ang nagliligtas sa halos-miss ng isang maliit na modelo na ginagawa pa rin — isang bumabang name, mga argumentong walang balot ng mga ito — sa pamamagitan ng paglilipat sa kasangkapan mula sa hugis ng argumento. Ang resulta ay ang "pagguhit ng isang berdeng pentagon" ay nagiging isang tunay na create_item call sa halip na isang pagkakamali.
Dalawang tagapaglaan, isang kontrata
Ang on-device AI ay hindi isang bagay — ito ay depende sa browser:
- Browser AI — Itinayong-in Gemini 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 — WebLLLM* ay nagpapatakbo ng isang Qwen2.5 modelo sa anumang WebGPU browser. Minsan itong nag - download ng isang modelo (pinatay pagkatapos nito), pagkatapos ay tumatakbo ito sa offline.
- Languages — non-English propulsions ay isinalin sa Ingles on-device una (via the browser's debut-in translation), dahil ang maliit na code-oriented na mga modelo ay Ingles-centric. Ang likhang tanawin ay pareho saanmang wikang madalian.
Pinipili ng gumagamit ang makina; ang lahat ng daloy ng tubig — ang instraktor, ang kanbas — ay magkakatulad.
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 pag-ikot ay pinakakain namin ito ng isang siksik na litrato ng mga kasalukuyang bagay – ang kanilang mga id, tipo, at kulay — eksaktong tulad ng isang server-side chat. "Gawing pula ang bituin" pagkatapos ay magpasiya sa isang tunay na modify_item call laban sa iid 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 bigong pangganyak, na tumutulong sa atin na pagbutihin ang pangganyak at balarila.
Kapag ang maliit na modelo ay hindi sapat — lumalaki
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 *han ang buong usapan sa modelong Cloud — gayunding layon, kambas, 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 spekulasyon ng balarila bawat posibleng operasyon — kabilang na ang isang cruted-habang escape ay napisa para sa di - makatuwirang pagguhit ng kodigo. 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 nasa isang Web Worker kaya ang editor ay nananatiling tumutugon samantalang ang isang modelong kargada at gumagawa.
Ano ang susunod
Ito ay eksperimental at sumusulong. Sa daan:
- Wider tool coverage sa ipinagbabawal na landas — ang higit pang mga operasyon ng PinePaper ay ipinahahayag nang walang napipisang freeform.
- Larger on-device model habang ang mga katalogo ng modelong WebGPU ay lumalaki, na nangangalakal ng download na sukat para sa pagkamaaasahan.
- *Ang mas mahigpit na eval loop — na gumagamit ng opted-in failure reports upang sukatin kung alin ang nag-udyok ng paglalakbay ang on-device na mga modelo at pinatigas 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.
- Ituro ito sa editor — bukas AI / Code → Assistant. Ito'y libre, tumatakbo sa iyong aparato, at hindi na kailangan ang account.*
Ready to create?
Start making animated GIFs, videos, and graphics — free, no signup.
Open PinePaper Editor