· 6 min read

Asisten Desain Yang Menjalankan Divais Anda - Tanpa Akun, Tanpa 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.

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 di laptop - tidak memiliki * * tidak ada pengetahuan dari aplikasi tertentu API. * * Tanyakan sebuah model 0.52B untuk memanggil PinePaper.create() dan improvisasi: kunci yang tidak dibaca (sebuah gaya SVG- fill di mana 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) memaparkan ke agen eksternal - tapi dipancarkan oleh model yang 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), kita melewati * * JSON Skema * * sebagai batasan respon. Model ini hanya dapat menghasilkan objek yang diizinkan skema - dengan additionalProperties: false, argumen apapun skema tidak mendefinisikan secara harfiah unrepresentable.
  • Pada * * WebLLM * * (sebuah model terbuka berjalan di WebGPU), kami paste an * * EBNF grammar * * 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 - sebuah name dijatuhkan, argumen tanpa wrapper mereka - dengan memasukkan alat dari bentuk argumen. Hasilnya adalah "menggambar sebuah pentagon hijau" menjadi panggilan create_item yang sebenarnya sebagai ganti kesalahan.

Dua penyedia, satu kontrak

On- perangkat AI bukan satu hal - itu tergantung pada peramban:

      • 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-device yang paling dapat diandalkan saat ini, karena batasan skema JSON-yang paling murah dan baik-didukung.
      • PinePaper AI * * * WebLLM * * menjalankan model Qwen2,5 dalam browser PWebGPU manapun. Ini mengunduh model sekali (cache after), kemudian berjalan offline.
      • Bahasa * * - bukan-bahasa Inggris prompt diterjemahkan ke bahasa Inggris on-device 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 - kendala, 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 dia snapshot kompak dari item-item saat ini - ID mereka, tipe, dan warna - persis seperti obrolan sisi server- akan. "Membuat bintang merah" kemudian menyelesaikan ke panggilan modify_item nyata terhadap id item itu. (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 tentang itu dikirim di mana saja - kecuali Anda secara eksplisit opt dalam berbagi prompt gagal, yang membantu kita meningkatkan 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 usaha gagal asisten menawarkan untuk * * tangan seluruh percakapan up ke model Cloud * * - sama niat, kanvas sama, model 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 escape 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 Pekerja Web sehingga penyunting tetap merespon sementara sebuah beban model dan menghasilkan.

Apa selanjutnya

Ini adalah percobaan dan peningkatan. Di peta jalan:

      • cakupan alat Wider dalam jalur terbatasi * * - lebih dari operasi PinePaper 's ekspresible tanpa freeform escape menetas.
      • Larger on- perangkat model * * sebagai model katalog WebGPU tumbuh, perdagangan ukuran download untuk keandalan.
      • Sebuah loop eval lebih ketat * * - menggunakan pilihan-dalam laporan kegagalan untuk mengukur yang mendorong perjalanan model on-perangkat dan harden 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.

♪ Try it in the editor - open ♪ ♪ PAI / Code Asistant ♪ 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