· 3 min read

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

PinePaper 的伺服器 AI 助手使用完全在您的瀏覽器中運行的語言模型, 將一個提示轉換成真實的場景 。 這是建築 受限的工具呼叫 兩位提供商 以及一個小模型能做和不能做的事的誠實描述.

前提

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

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

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

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

小型模型—— 那些合適的電腦.. 無法知道特定應用程式的 API 。 ** 請用 0. 5– 2B 型號 呼叫 PinePaper.create() 而它即時使用 : 此方法不讀的按鍵( SVG 式的 fill 其中 API 預期 color ) 、 其想像的方法 、 參數的形狀錯誤 . 輸出* 看起來像密碼 默默地做錯事了.

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

[
  { "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的內建中. 模型只能產生 方案所允許的物件.. 和 additionalProperties: false 一起, 任何未定義的參數都實際上無法表示 .
  • WebLLM(在WebGPU上執行的開放型態)上,我們附加了EBNF语法 通过XGrammar. 語法決定了結構;模型只填充數值 .

兩者都產生相同的工具呼叫形狀. 一個小小的修补通道 然后拯救了一個小模型 name 從參數的形狀推断工具. 結果是「 畫一綠五角星」 變成真正的 create_item 呼叫而不是錯誤 .

切換到下面的三個. 兩個受限的選項看起來都一樣 目的:即要求. 他們之間的改變是机制 不是 成果.

Interactive demo — open in editor pp:PinePaper

2家供应商,1家合同

戴維斯AI不是一回事.. 要看瀏覽器 :

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

使用者選取引擎; 下游的一切.. 限制 執行者 畫布.. 完全相同.

編輯, 不只是產生

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

聊天紀錄被保存在您的裝置上 ** 在本地儲存中 . 任何東西都不能寄到任何地方 除非你明確地選擇分享失敗的提示 幫助我們改善提示和語法.

如果小模型不夠.. 升級

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

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

我們學到的

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

接下來呢

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

  • 限制路径中的Wider工具覆盖范围 - 更多PinePaper的操作 在沒有自由形逃生舱的情況下.
  • Larger on-device models 随着WebGPU 型號目錄的增長,用下載大小換取可靠性.
  • 收緊 eval 環路 - 使用選入失敗報告來測量 何者會觸碰 假設模型.
  • 於是.

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

試試看編輯.. AI/代碼=助理. 免費的,用你的裝置運行,不需要帳號.

Ready to create?

Start making animated GIFs, videos, and graphics — free, no signup.

Open PinePaper Editor