Canvas：モデルが書くものすべてのライブプレビューペイン

たいていのチャットツールは、コードのブロックを手渡して「幸運を祈る」で終わりです。あなたはそれをエディタにコピーし、ファイルを保存し、ブラウザを開き、少し違うのを見て、チャットに戻り、修正を貼り付け、また繰り返す。Canvas は、このループの中で重要な 2 つ — 頼む、見る — を除く、あらゆるステップを取り除きます。

Canvas とは何か

モデルの回答に描画できるものが含まれていると、会話の隣にプレビューペインが開いて、それをライブで表示します。HTML はページとして描画されます。SVG は画像として描画されます。Mermaid ブロックは図になります。Markdown は整形されたテキストになります。あなたが見るのはソースではなく 結果 — モデルが書き終えたその瞬間に。

チャットは左に、描画されたアーティファクトは右に。あなたは話し続けます — 「ヘッダーを小さく」「背景をもっと暗く」「リトライ経路のノードを追加して」 — そしてモデルが手を入れるたびにプレビューが更新されます。コピーなし、ペーストなし、2 つ目のアプリなし。

真価を発揮するところ

雑用を会話に変える、いくつかの場面：

• ランディングのセクションとメール HTML。 ヒーローセクションを言葉で描写し、描画されるのを見て、いい感じになるまで余白と色を平たい言葉で微調整する。あなたは「もの」そのものを反復しているのであって、「ものの説明」を反復しているのではありません。
• 図。 認証ハンドシェイクのフローチャートや、リクエストのシーケンス図を頼んでみてください。Mermaid が即座に描画し、「この 2 つのステップを入れ替えて」は、手で描き直す代わりに一文で済みます。
• チャートと SVG。 さっとしたデータのスケッチ、アイコン、シンプルなイラスト。フルサイズで見て、話しながら磨きます。
• 長文の文章。 Markdown が本物の見出しと構造で描画されるので、生のアスタリスクに目を凝らすのではなく、読者が読むのと同じ形でドキュメントを読めます。

モデルピッカーと連動する

Canvas は 1 つのプロバイダーに縛られていません。速いモデルでレイアウトを下書きし、難しい部分をより強いモデルに分岐すると — プレビューは勝ったブランチについていきます。アーティファクトが 1 つのモデルのサンドボックスの中ではなくスレッドの隣に存在するので、モデルを切り替えても作業途中のものは失われません。新しい答えに対して、描画がただ再実行されるだけです。

これはスタジオ全体が築かれているのと同じ原則です：役に立つもの（ここではライブのアーティファクト）は、1 つのモデルの囲い込まれた機能セットではなく、あなたの会話に属します。

言葉で反復し、ソースを出荷する

プレビューがいい感じになったら、ソースはそこにあって持ち出せます — HTML をコピーし、SVG をエクスポートし、Mermaid 定義をつかむ。Canvas は、それ自身にしか読めないブラックボックスではありません。あなたが完全に所有するソースへ、より速くたどり着く方法です。反復は平たい言葉で行い、最後に本番投入できる出力を手にします。

効果の大きい、小さな機能

Canvas は、モデルが持っていなかった能力を足すわけではありません — モデルは昔から HTML を書けました。Canvas が取り除くのは、書かれた と 見えた のあいだのギャップです。そのギャップを閉じると、働き方が変わります：モデルの出力を、あとで評価する下書きとして扱うのをやめて、いま、リアルタイムに、同じウィンドウの中で形作っているものとして扱い始めます。それこそが、ツールが速く感じられる理由のほとんどなのです。