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 sığanlar - Belirli bir uygulamanın API hakkında bilgi yok. PinePaper.create()'i aramak için 0,5-2B modeli sorun ve bu doğaçlamaları: yöntemin okumuyor ( SVG tarzı fill, API'in color'i nerede beklediğini), 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 dış ajanlara maruz kalır - ancak yerel olarak çalışan bir model tarafından yayılan ve tuval üzerinde küçük bir sevker aracılığıyla idam edilmiştir.

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'i geçiyoruz. Model sadece şema izinlerini nesneleri üretebilir - additionalProperties: false ile, şemanın tanımlanmasının herhangi bir argümanı tam anlamıyla açık değildir.
• WebLLM ( WebGPU'te çalışan açık bir model), bir EBNF grameri 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ığını selamlıyor - name'i terk etti, perdeleri olmadan tartışmalar - aracı argüman biçiminden teşvik ederek. Sonuç şu ki, "bir yeşil pentagonu" bir hata yerine gerçek bir create_item çağrı haline geliyor.

Aşağıdaki üç arasında geçiş. İki kısıtlı seçenek aynı görünüyor amaç: bu iddiadır. Aralarındaki değişiklikler mekanizma değil, mekanizmadır sonuç.

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

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

• Browser AI – Chrome'un yerleşik 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ısında Qwen2.5 modeli çalıştırıyor. Bir modeli bir kez indirmektedir (daha sonra da çevrimdışı çalışır).
• Dils – i̇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ı.

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 - ayılar, türleri ve renkler - tam olarak bir server-side sohbet gibi olurdu. “Yıldız kırmızısı yap” sonra gerçek bir modify_item öğenin boşluğa karşı çağrı yapar. (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 - açıkça başarısız hızlı bir şekilde paylaşmayı tercih etmediyseniz, bu da hızlı ve gramer geliştirmemize yardımcı olur.

Küçük model yeterli olmadığında - yükselerek yükseldi

İş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 Bulut modeline kadar tüm konuşmayı elden çıkarmaya çalışır - - aynı niyet, aynı tuval, çok daha yetenekli bir model - ve tam olarak nereye gittiğiniz yerde devam edersiniz. 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ı operasyon - pasif çizim kodu için sınırlanmış bir kaçış kapağı da dahil. 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ı 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ı bir ev döngüsü - - opted-in başarısızlık raporlarını kullanarak, on-device modellerini ve grameri onlara karşı zorlaştırmak.
• 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örde deneyin - açık AI / Kod → Asistan. Ücretsiz, cihazınızda çalışır ve hesaba ihtiyaç duymaz.