Cihazınızda Runs Eden Bir Tasarım Asistanı – No Hesap, No Server

The premise

AI tasarım araçlarının çoğu hızlı bir sunucuya gönderir, büyük bir model çalıştırın ve kodu geri gönderin. Bu bir hesapa ihtiyaç duyar, bir ağ döngüsü, ve işinizin-progress transitlerinin başka birinin altyapısına geçişine güvenin.

Diğer aşırının ne kadar uzağa gittiğini bilmek istedik: ** Modelin kendi makinenizde çalıştığı bir tasarım asistanı. ** Hesap yok. Yükleme yok. Hızlı asla tarayıcıyı terk etmez. Bu şimdi PinePaper'in editörü bir deneysel olarak yaşıyor AI / Kod → Asistan sekmesi ve bu posta nasıl çalıştığını ve nerede kısa kaldığının dürüst bir hesabı.

Neden sadece kod için model sormaz?

Açık yaklaşım, PinePaper API'in API'e karşı JavaScript yazmak için on-device modeline sormak ve çalıştırmaktır. Bunu denedik. Kötü başarısız olur.

Küçük modeller - bir dizüstü bilgisayarlara uygun olanlar - belirli bir uygulamanın API hakkında bilgi sahibi olmak.** PinePaper.create()'u aramak için 0,5-2B modeli sorun ve bu improvizeler: yöntemin okumuyor ( SVG-style fill2Q nerede API’in color’yu beklediği bir yöntem, yanlış durumdaki tartışmalar. Çıktı * görünüşe göre * kod gibi ve sessizce yanlış şeyi yapar.

Bu yüzden kod istemeyiz. Bir konstrained araç çağrılarının listesini istiyoruz:

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

Aynı kelime PinePaper'in [MCP sunucusu] (/api/guides/mcp-integration) dış ajanlara maruz kalıyor - ancak küçük bir gönderici aracılığıyla tuval üzerinde yürütülen bir model tarafından yayılıyor.

Sınırlı çıktı yapmak imkansız

Anahtar hareketi konstrained decoding. Modelin geçerli bir şekil üretmesini umut etmek yerine, kısıtlıyoruz * ne kadar jetler yaymasına izin verilir:*

• Chrome'un yerleşik Prompt API (Gemini Nano), bir cevap kısıtlaması olarak JSON Schema'yi geçiyoruz. Model sadece şema izinlerini nesneler üretebilir - additionalProperties: false ile, şemanın tanımlanamaz olduğu herhangi bir argüman.
• **WebLLM ** ( WebGPU üzerinde çalışan açık bir model), biz **EBNF grameri ekleyin - XGrammar aracılığıyla. gramer yapıyı diktir; model sadece değerlerde doldurur.

Her ikisi de aynı alet arama şeklini üretir. Küçük bir onarım daha sonra küçük bir modelin hala yaptığına dair selamlar verir - bir damla name, onların sarmalayıcısı olmadan argümanlar - yönteminden aracı teşvik ederek. Sonuç, "yeşil bir pentagonu" bir hata yerine gerçek bir create_item çağrı haline geliyor.

İki sağlayıcı, bir sözleşme

In-device AI tek bir şey değil - tarayıcıya bağlıdır:

• Browser AI - Chrome'un inşa edilmiş-in Gemini Nano (window.LanguageModel). Tarayıcı ile model gemileri; bizden indirmek için hiçbir şey yok. Bu bugün en güvenilir anlık yol, çünkü JSON-schema kısıtlamaları ucuz ve iyi destekleniyor.
• PinePaper AI - WebLLM herhangi bir WebGPU tarayıcıda Qwen2.5 modeli çalıştırıyor. Bir modeli bir kez indirmektedir (daha sonra da çevrimdışı çalışır).
• ** Dils ** - İngilizce olmayanlar ilk önce İngilizceye tercüme edilir ( tarayıcının yerleşik çevirmeni ile), çünkü küçük kod odaklı modeller İngilizce merkezlidir. Oluşturulan sahne, hızlı dilden bağımsız olarak aynıdır.

Kullanıcı motoru seçer; her şey aşağılayıcı - kısıtlama, executor, tuval - aynıdır.

Editing, sadece oluşturma

Bir atış jeneratörü bir yardımcı değildir. “Yıldız kırmızısını yapmak” için, model zaten tuval üzerinde ne olduğunu bilmek gerekir. Bu yüzden her biri şu anki eşyaların kompakt bir fotoğrafını besliyoruz - onların ids, türleri ve renkler - tam olarak bir sunucunun sohbeti gibi. “Yıldız kırmızısı yap” sonra eşyanın kimliğine karşı gerçek bir modify_item çağrısına karar verir. (Ve küçük bir model bazen yıldız anlamına geldiğinde, executor canlı tuvale karşı bulanık referansları çözer.)

Konuşma logu devam ediyor ** cihazınızda ** yerel depolamada. Hiçbir şey herhangi bir yere gönderilmez - hiçbir şekilde başarısız hızlı bir şekilde paylaşmayı tercih etmeseniz, bu da acil ve gramer geliştirmemize yardımcı olur.

Küçük model yeterince olmadığı zaman - yükselerek

İşte dürüst kısım: a 0,5-2B modeli en zayıf tier. Kısıtlama garantileri *valid yapısı *, ancak model hala doğru aracı ve mantıklı değerleri seçmek zorunda ve her zaman olmayacak. Bir pentagon ve alt tanımlı bir model size bir hexagon verir; "kırmızı" için iki kez sorun ve bunun yerine bir jeneratör çalıştırılabilir.

Bu yüzden mimarlık, * ilk* tier olarak, tek değil. Birkaç başarısız olduktan sonra asistan ** Tüm konuşmayı elden çıkarır Bulut modeli** - aynı niyet, aynı tuval, çok daha yetenekli bir model - ve tam olarak nereye gittiğiniz yerde devam ediyorsunuz. Düşük sadakat, ücretsiz ve özel, ihtiyacınız olduğunda yüksek sadakat için tek tıkla bir yol ile.

Öğrendiğimiz şey

• Konstraints hızla yendi. Bir zeminli sistem hızlı yardımcı olur; geçersiz çıktıyı imkansız kılan bir gramer /schema daha fazla yardımcı olur. Tek en büyük güvenilirlik atlayışı, daha iyi bir hızlı değil, kısıtlayıcıdan geldi.
• **Model büyüklüğü hala egemendir. ** 0,5B'den 1.5B modeline gitmek, asistanın doğru aracı nasıl seçtiğini fark etti. Akıllı bir modele dönüşen hızlı bir şey yok.
• ** Tam gramer çok büyük olabilir.** İlk gramer kodlandı * her * olası işlem - zorunlu uzunlukta bir kaçış kutusu dahil olmak üzere. Bu kadar büyükydi ki sayfayı kapladı. Ortak işlemleri kapsayan kompakt bir gramer doğru varsayılandır; tam yüzey opt-in.
• Run it off the main thread. UI thread üzerindeki bir model sayfayı donduruyor. WebLLM bir Web Worker'de çalışır, böylece editör bir model yükleri ve üretirken yanıt verir.

What's next

Bu deneysel ve geliştirmektir. Yol haritasında:

• ** Kısıtlı yoldaki araç kapsaması ** - daha fazla PinePaper'in operasyonları ücretsiz form kaçışı olmadan ifade edilebilir.
• **Larger on-device modelleri ** WebGPU model katalogları büyüdükçe, güvenilirlik için ticaret indirme boyutu.
• ** Sıkıntılı bir döngü ** - opted-in başarısızlık raporlarını kullanarak, on-device modellerini gezip grameri onlara karşı sertleştirir.
• Epsiz bir → Cloud handoff, bu yüzden escalation, anahtarlama aletlerinden ziyade kaliteli aramayı hissediyor.

The throughline: Aynı declarative araç kelime tarayıcı sınırının her tarafında bir model kullanıyor. Dış bir ajan bu araçları MCP üzerinde çağırır; bir on-device model yerel olarak aynı şekilleri arar. Bir sözleşme, nerede koşuyorlarsa ajanlar.

• editörün içinde – açık AI / Kod → Asistan. Ücretsiz, cihazınızda çalışır ve hesaba ihtiyaç duymaz.*