デバイス上で実行する設計アシスタント - 口座なし、サーバーなし

前提条件

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

どちらも同じツールコール形状を生成します。 小さな修理パスは、近傍で小さなモデルを保留させます。これは、そのラッパーのない引数であるnameを低下させます。 結果は、エラーの代わりに「緑色のペンタゴン」が実際のcreate_itemコールになるということです.

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

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

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

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

編集、生成だけでなく

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

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

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

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

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

私たちが学んだこと

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

次へ

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

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

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

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