デバイス上で実行するデザインアシスタント — いいえアカウント、サーバーなし

前提条件

ほとんどのAIの設計用具はサーバーにあなたのプロンプトを送り、大きいモデルを実行し、コードを戻します. つまり、アカウント、ネットワークの往復が必要であり、あなたの仕事の進行が他のインフラストラクチャを継承するという信頼が必要です.

自分のマシンでモデルが走るデザインアシスタントです。アカウントなし. アップロードはありません. プロンプトはブラウザを離れません. 今、実験的なAI / コード→アシスタントタブとしてPinePaperのエディタに住んでおり、この投稿はそれがどのように機能するか、そしてそれが不足している場所の正直なアカウントです.

なぜコードのモデルを尋ねるの?

明らかなアプローチは、PinePaperのAPIに対してJavaScriptを書くためのオンデバイスモデルを尋ね、それを実行することです. お問い合わせ. 悪いことに失敗します.

小さいモデル — ノートパソコンに収まるもの 特定のアプリのAPIの知識はありません。* PinePaper.create() を呼び出すために 0.5-2B モデルを尋ねると、それは即興します: キーメソッドは読みません (SVG スタイルの fill で、API は color を期待します)、それを想像する方法、間違った形状の引数. 出力 looks はコードやサイレントに誤ったことをします.

ですから、コードを依頼しないでください. ツール呼び出しの禁忌のリストを要求します。

[
  { "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サーバは、外部エージェントに露出します しかし、ローカルで動くモデルによって排出され、小さいディスパッチャを通してキャンバスで実行される.

無効な出力を不可能にする

キーの移動は禁忌です。 モデルをホーピングする代わりに、有効な形状を生成します。 * どのトークンも出せます。*

• Chrome の組み込み プロンプト API (Gemini Nano) では、応答の制約として JSON Schema を渡します. モデルは、スキーマが許可するオブジェクトのみを生成することができます additionalProperties: false では、スキーマが定義されていない引数は文字通り非表現可能です.
• WebLLM(WebGPU上で動作するオープンモデル)では、XGrammar経由でEBNF文法を添付します. 文法は構造を指示します。モデルは値だけを満たします.

どちらも同じツールコール形状を生成します. 小さな修理パスで、近傍で小さなモデルがまだ作り出します ドロップされたname、ラッパーなしの引数 — 引数の形状からツールを推論することによって. 結果は、エラーの代わりに「緑色のペンタゴン」が実際のcreate_itemコールになるということです.

下記の3つを切り替えます. 2つの制約されたオプションは、同じように見えます 目的:それは主張です. それらの間の変更は、メカニズムではなく、 結果.

2つのプロバイダー、1つの契約

デバイス上のAIは1つのものではありません — ブラウザによって異なります

• ブラウザAI — Chromeの組み込みGemini Nano(window.LanguageModel). モデルはブラウザで出荷されます。私たちからダウンロードすることができません. これは、JSON-schema制約が安価で十分にサポートされているため、今日最も信頼性の高いオンデバイスパスです.
• PinePaper AI — WebLLMはWebGPUブラウザでQwen2.5モデルを実行しています. 一度にモデルをダウンロードします。(その後)、オフラインで実行します.
• 言語 — 小さなコード指向モデルが英語中心であるため、非英語のプロンプトは、最初(ブラウザの組み込みの翻訳者による)英語で翻訳されます. 生成されたシーンは、プロンプト言語に関係なく同じです.

ユーザはエンジンをピックアップします。すべての下流 — 制約、実験者、キャンバス — 同じです.

編集、生成だけでなく

ワンショットジェネレータはアシスタントではありません. 「星の赤をつくろう」をサポートするためには、このモデルはすでにキャンバス上にあるものを知っている必要があります. そのため、各ターンでは、現在のアイテムのコンパクトなスナップショットをフィードします 自分のid、種類、色 — サーバー側のチャットのように正確に. "星を赤くする" は、アイテムの ID に対する実際の modify_item 呼び出しに解決します. (そして、小さなモデルは時々それが星を意味するとき「the circle」を参照するので、expecutorはライブキャンバスに対してfuzzy参照を解決します。)

会話ログは、ローカルストレージで*デバイスに保存されます. どこからでも送信できない 失敗したプロンプトを共有するために明示的にオプトインしない限り、プロンプトと文法を改善するのに役立ちます.

小さなモデルが足りないとき — エスカレート

ここに正直な部分です:a 0.5–2Bモデルは最も弱い層です。 制約されたデコード保証 valid 構造, しかし、モデルはまだ正しいツールと感知可能な値を選ぶ必要があり、それは常にありません. ペンタゴンと未指定のモデルで六角形をつけましょう。2回「赤」を依頼し、代わりに発電機を実行できます.

そのため、アーキテクチャは1つだけではなく、first ティアとしてオンデバイスを処理します. アシスタントオファーがクラウドモデルまでの会話を全て取り出すのに失敗しました** — 同じインテント、同じキャンバス、はるかに可能なモデル — そして、あなたはあなたが去った場所を正確に継続します. 低忠実度、無料、プライベート、ワンクリックで必要なときに高い忠実度へのパス.

私たちが学んだこと

• 制約は、プロンプトを打つ. グラウンド化されたシステムプロンプトは、無効な出力を不可能にする文法/浮腫がはるかに役立ちます. 単一の最大の信頼性は、より良いプロンプトからではなく、禁忌の解読から来ました.
• モデルサイズはまだ支配します。 0.5B から 1.5B モデルまで、アシスタントが正しいツールを選ぶ頻度を著しく改善しました. 小さなモデルをスマートに変えるプロンプトはありません.
• フル文法は大きすぎます。 弊社初の文法エンコード*可能な操作 — 任意の描画コードの境界長さのエスケープハッチを含みます. ページの解読を禁じたのが大きかった. 一般的な操作をカバーするコンパクトな文法は、正しいデフォルトです。 完全な表面はオプトインです.
• メインスレッドをオフにします。 UI スレッドで推論を行うモデルはページを凍結します. WebLLM は Web ワーカーで実行されるため、エディタはモデルの読み込みと生成時に応答性を維持します.

次へ

実験的改善です. ロードマップ:

• 禁忌の経路におけるWiderツールのカバレッジ — PinePaperの操作は、フリーフォームのエスケープハッチなしで表現可能です.
• 大型オンデバイスモデル WebGPUモデルカタログとして、信頼性のための取引ダウンロードサイズ.
• より堅い楕円ループ — オプトイン障害レポートを使用して、どのプロンプトがオンデバイスモデルを旅行し、それらに対して文法を硬化させるかを測定します.
• スムーズなオンデバイス → クラウドハンドオフ, ので、エスカレーションは、ツールを切り替えるのではなく、品質ダイヤルをオンにするような感じ.

スルーライン:同じ宣言ツールの語彙は、ブラウザ境界の両側にモデルを駆動します. 外部エージェントは、MCP 上でこれらのツールを呼び出します。オンデバイスモデルは、ローカルで同じ形状を呼び出します. 1つの契約、実行するエージェント.

エディタで試す — open AI / コード → アシスタント. 無料で、デバイス上で実行し、アカウントを必要としません.