Asisten Desain Yang Menjalankan Divais Anda - Tak ada Akun, Tak ada Server
Satu-satunya perangkat AI asisten AI mengubah prompt ke sebuah adegan nyata menggunakan model bahasa yang seluruhnya ada di browser Anda. Inilah arsitektur - panggilan alat yang dibatasi, dua penyedia, dan sebuah akun jujur tentang apa yang model kecil bisa dan tidak bisa lakukan.
On this page
Pemikirannya
Kebanyakan perangkat desain AI mengirimkan prompt Anda ke server, menjalankan model besar, dan mengirim kode kembali. Yang membutuhkan akun, jaringan round-trip, dan kepercayaan bahwa Anda bekerja-in-progress mentransfer infrastruktur orang lain.
Kami ingin tahu seberapa jauh ekstrem lainnya: Asisten desain mana model berjalan pada mesin Anda sendiri. Tidak ada rekening. Tidak ada upload. Prompt tidak pernah meninggalkan peramban. Ini sekarang hidup di editor PinePaper sebagai percobaan * * AI / Code Asistency * * * tab, dan posting ini adalah akun jujur tentang bagaimana ia bekerja dan di mana ia jatuh pendek.
Mengapa tidak hanya meminta model untuk kode?
Pendekatan yang jelas adalah meminta model perangkat on- untuk menulis JavaScript terhadap API dan menjalankannya. Kita sudah mencobanya. Itu gagal parah.
Model kecil - yang cocok dengan laptop - tidak ada pengetahuan tentang API. Tanyakan sebuah model 0.52B untuk memanggil PinePaper.create() dan improvisasi: kunci metodenya tidak dibaca (sebuah gaya SVG- fill dimana API mengharapkan color), sebuah metode yang diimajinasikan, argumen dalam bentuk yang salah. Keluaran * tampak * seperti kode dan diam-diam melakukan hal yang salah.
Jadi kita tidak meminta kode. Kami meminta daftar panggilan alat yang dibatasi:
[
{ "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" } }
]
Kosakata yang sama PinePaper [server MCP] (/api/guides/mcp-integration) mengekspos ke agen eksternal - tapi dikeluarkan oleh model berjalan lokal, dan dieksekusi di kanvas melalui operator kecil.
Membuat keluaran tidak valid tidak mungkin
Langkah kuncinya adalah decoding yang dibatasi. Alih-alih berharap model menghasilkan bentuk yang valid, kita menahan * token apa itu bahkan diperbolehkan untuk memancarkan: *
- On Chrome 's built- in * * Promt API * * (Gemini Nano), we pass a * * JSON Skema * * as a response listraint. Model hanya dapat menghasilkan objek skema memungkinkan - dengan
additionalProperties: false, argumen apapun skema tidak mendefinisikan secara harfiah unrepresentable. - Pada * * WebLLM * * (sebuah model terbuka berjalan di WebGPU), kami melampirkan tata bahasa * * EBNF * * via XGrammar. Tata bahasa mendikte struktur; model hanya mengisi nilai-nilai.
Keduanya menghasilkan bentuk tool- sama. Sebuah lulus perbaikan kecil kemudian menyelamatkan dekat- merindukan model kecil masih membuat - name dijatuhkan, argumen tanpa pembungkus - dengan memasukkan alat dari bentuk argumen. Hasilnya adalah "menggambar sebuah pentagon hijau" menjadi panggilan nyata create_item daripada sebuah kesalahan.
Beralih antara tiga di bawah ini. Kedua pilihan yang dibatasi terlihat identik pada tujuan: itu adalah klaim. Apa yang mengubah antara mereka adalah mekanisme, bukan hasilnya.
Dua penyedia, satu kontrak
On- perangkat AI bukan satu hal - itu tergantung pada browser:
- Browser AI * * - Chrome 's built-in * * Gemini Nano * * (
window.LanguageModel). Kapal model dengan peramban, tidak ada yang dapat diunduh dari kita. Ini adalah jalur on- perangkat yang paling dapat diandalkan saat ini, karena batasan skema JSON- adalah murah dan baik-didukung.
- Browser AI * * - Chrome 's built-in * * Gemini Nano * * (
- WebLLM * * menjalankan model Qwen2.5 dalam browser WebGPU manapun. Ini mengunduh model sekali (cache after), kemudian berjalan offline.
- Bahasa * * - pemohon bukan-bahasa Inggris diterjemahkan ke perangkat on- bahasa Inggris pertama (via peramban 's built-in penerjemah), karena model code-orientasi kecil adalah bahasa Inggris-sentris. Adegan yang dihasilkan adalah sama terlepas dari bahasa prompt.
Pengguna mengambil mesin, semuanya hilir - batasan, eksekutor, kanvas - identik.
Menyunting, tidak hanya menghasilkan
Generator satu tembakan bukanlah asisten. Untuk mendukung "membuat bintang merah", model perlu tahu apa yang sudah di kanvas. Jadi setiap giliran kita beri makan snapshot kompak dari item saat ini - kedua, golongan kanan yang mempunyai kedudukan tinggi. alangkah mulianya kedudukan golongan itu persis seperti obrolan server-side akan. "Membuat bintang merah" kemudian menyelesaikan untuk modify_item panggilan nyata terhadap id item. (Dan karena model kecil kadang mengacu pada "the _ circle" ketika itu berarti bintang, pelakon menyelesaikan referensi fuzzy terhadap kanvas langsung.)
Log percakapan disimpan * * pada perangkat Anda * * di penyimpanan lokal. Tidak ada yang dikirim kemana-mana kecuali anda secara eksplisit opt dalam berbagi prompt gagal, yang membantu kita memperbaiki prompt dan tata bahasa.
Ketika model kecil tidak cukup - meningkat
Inilah bagian jujur: * * a 0.52B model adalah tingkat terlemah. * * Pembatalan kode terbatasi menjamin struktur * valid *, tetapi model masih harus memilih alat yang tepat dan nilai yang masuk akal, dan itu tidak akan selalu. Mintalah sebuah pentagonal dan sebuah model under- dispesifikasikan memberikan sebuah heksagon; meminta dua kali untuk "merah" dan mungkin menjalankan generator sebagai gantinya.
Jadi arsitektur memperlakukan on- perangkat sebagai * tingkat * pertama, bukan satu-satunya. Setelah beberapa upaya gagal asisten menawarkan untuk * * tangan seluruh percakapan sampai dengan model Cloud * * - niat yang sama, kanvas yang sama, model yang jauh lebih mampu - dan anda melanjutkan persis di mana anda tinggalkan. Loyalitas rendah, bebas dan pribadi, dengan satu jalur klik untuk kesetiaan tinggi ketika Anda membutuhkannya.
Apa yang telah kita pelajari
- Constraints beat promitting. * * Prompt sistem membumi membantu; suatu tata bahasa / skema yang membuat keluaran mustahil tidak valid membantu jauh lebih banyak. Lompatan bergantung terbesar datang dari decoding terbatas, bukan dari prompt yang lebih baik.
- Model ukuran masih mendominasi. Pergi dari 0.5B ke model 1.5B terlihat ditingkatkan seberapa sering asisten memilih alat yang tepat. Tidak ada prompt yang mengubah model kecil menjadi yang cerdas.
- Tata bahasa penuh bisa terlalu besar. Tata bahasa pertama kami dikodekan * setiap * mungkin operasi - termasuk bound- panjang jalan keluar menetas untuk kode gambar sewenang-wenang. Itu begitu besar yang membatasi decoding stalled halaman. Tata bahasa kompak meliputi operasi umum adalah standar yang tepat; permukaan penuh opt- in.
- Jalankan itu dari benang utama. * * Sebuah model melakukan inferensi pada benang UI membeku halaman. WebLLM berjalan dalam Web Worker sehingga editor tetap responsif sementara sebuah beban model dan menghasilkan.
Apa selanjutnya
Ini adalah percobaan dan peningkatan. Di peta jalan:
- cakupan alat lebih lebar dalam jalur terhambatan * * - lebih dari operasi PinePaper 's diungkapkan tanpa freeform escape menetas.
- Larger on- perangkat model * * sebagai model katalog WebGPU tumbuh, perdagangan ukuran download untuk keandalan.
A tight eval loop # # - menggunakan opted- dalam laporan kegagalan untuk mengukur yang mendorong perjalanan model on- perangkat dan mengeraskan tata bahasa terhadap mereka.
- A smoother on-device AverCloud handoff * *, so eskalation feels like turning up the quality dial rather than switching tools.
Melalui baris: kosakata alat deklarasi yang sama mendorong model di kedua sisi batas peramban. Seorang agen eksternal menyebut alat-alat ini melalui MCP; sebuah model on- perangkat memanggil bentuk yang sama secara lokal. Satu kontrak, agen dimanapun mereka berlari.
Coba di penyunting - buka AI / Asisten Kode. Ini gratis, berjalan pada perangkat Anda, dan tidak perlu account.
Ready to create?
Start making animated GIFs, videos, and graphics — free, no signup.
Open PinePaper Editor