在您的裝置上執行的設計助理—— 沒有帳號, 沒有伺服器

前提

大多數 AI 設計工具會將您的啟動傳送到伺服器, 執行一個大模型, 並傳回代碼 。 這需要一個帳戶,一個網絡往返, 并相信你的在建工程 轉移別人的基礎.

我們想知道另一個極端的進展是多遠的, 沒有帳號 沒有上傳。 提示從不離開瀏覽器 。 這篇文章在PinePaper的編輯器裡.

為什么不直接問代碼模型呢?

明顯的方法是要求在端端的模型對 PinePaper 的 API 寫 JavaScript 並執行它 。 我們試過了 失敗了.

小型的型號, 配上電腦的型號, 請用 0. 5–2B 型號呼叫 QQ 而它即興發起: 方法不讀的按鍵( SVG 類型的 QQ 1Q 其中 API 預期 QQ2Q ) , 即用它想象的方法, 參數的形狀錯誤 。 輸出* 看起來像密碼 默默地做錯事了.

所以我們不要求密碼 我們要求一份受限制的工具名單:**

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

同樣的词汇 PinePaper 的 [MCP 伺服器] (/api/guides/mcp-integration) 暴露在外部代理中, 但被當地執行的模型所釋放.

使輸出不合法

按鍵移動是**受限制的解碼。 ** 而不是希望模型能產生有效的形狀

• 在Chrome內建的Prompt API(Gemini Nano)上, 模式只能產生方案允許的物件.
• 在WebLLM(在WebGPU上執行的開放型號)上,我們 通过 XGrammar 附上EBNF 文法。 語法決定了結構;模型只填充數值 .

兩者都產生相同的工具呼叫形狀. 一個小的修補通過從爭論形狀中推斷工具, 結果是「 拖曳綠色五角星」 變成真正的 QQ1Q 呼叫而不是錯誤 .

2家供应商,1家合同

On-device AI不是一回事

• ** Browser AI** – Chrome的內置Gemini Nano (window.LanguageModel). 有瀏覽器的模擬船,我們沒有東西下載。 因為 JSON- schema 限制很便宜, 且支持性很好 .
• ** PinePaper AI** — WebLLM 在任何 WebGPU 瀏覽器中執行一個 Quen2.5 模型。 它下載過一次模型( 之後會被下載) , 然後會下線 .
• ** Languages ** – 非英語提示先翻譯為英文 on-device(透過瀏覽器內置的翻譯), 產生的場景是相同的, 無論是否使用即時語言 .

使用者選取引擎; 下游的一切 —— 限制, 執行者, 畫布 —— 都一樣 .

編輯, 不只是產生

一發電機不是助手 為了支持"讓星星紅" 模特兒需要知道畫布上已經有什么 所以每個轉彎, 我們都向它提供目前項目的緊密快照 —— 其代碼、類型和顏色 —— 就像伺服器邊聊天一樣。 「讓星星紅」, 因為小模型有時會提到「圓圈」

聊天紀錄被保存在您的裝置上 ** 在本地儲存中 。 除非您明确選擇分享失敗的提示, 這幫助我們改善提示與語法.

當小模型不夠時

實際上, 但模型仍得選擇正確的工具與合理價值, 要求五角星和未指定型號會給你一個六角星; 要求兩次「 紅色」 , 它可能會運用產生器.

所以建築將視窗視為第一 而不是唯一的一層 經過幾次失敗的試驗 助理提出把整段對話都交出來 同樣的意向,同樣的畫布, 一個更有能力的模型, 你繼續你留下的原點。 忠誠度低 自由 私人 隨時需要 只需一擊就能達到忠誠度高.

我們學到的

• ** 限制被催促。 根據的系統提示有幫助; 文法/ chema 使不合法的輸出不可能 。 最大的可靠性跳跃 來自受限的解碼 而不是更好的即時.
• ** 模型大小仍然占主导地位。 ** 從0.5B到1.5B型, 沒有快感能把一個小模型變成一個聰明的模型.
• • 完整的文法可能太大* 我們的第一個語法編碼了 * 每個可能的操作 —— 包括一個邊界長的逃生舱口, 如此之大 受限的解碼讓頁面陷入僵局 包含共同操作的緊密文法是正確的預設; 完整的表面是選入的 .
• 甩掉主線 在UI線上做推論的模型會冻结頁面 。 WebLLM 在Web Worker 中執行, 所以編輯器在模型加載和產生時保持反應 .

接下來呢

這是實驗性的改善 在地圖上 :

• ** 受限路徑中的Wider工具覆盖范围** – 更多PinePaper的操作在沒有freeform逃生舱門的情况下可以表達.
• ** Larger on-device models** 随着WebGPU 型號目錄的增長,用下載大小換取可靠性.
• ** 更緊密的 eval 環路 ** —— 用選入的失敗報告來測量.
• 於是.

過線 : 相同的宣傳工具字串在瀏覽器邊界的任意一邊產生模型 。 外部代理在 MCP 上呼叫這些工具; 本地端的伺服器模型也呼叫相同的形狀 。 一份合同,不管他們跑哪兒都行.

• 用編輯器試試** AI/代碼** 助理**。 這是免費的,用你的裝置運行,不需要帳號。 *