cowart-image-edit

Cowart Image Edit

このスキルを使うと、ユーザーが提供したCowartの注釈付きスクリーンショットをもとに、AI生成ビットマップを修正し、対応する元画像の隣に配置できます。

前提条件

このワークフローで必要なcowart_mcpツールが利用できることを確認してください。通常の前提手順としてrender_cowart_canvas_widgetを呼び出さないでください。Cowartウィジェットから送信された注釈リクエストにはすでに開いたキャンバスがあり、既存のウィジェットはMCPバックのストレージから挿入結果を同期します。ユーザーが別途キャンバスを開く、再度開く、または明示的に更新するよう依頼した場合は、キャンバスを開くワークフローを一度実行して対応してください。

Cowartの状態は、ローカルホストのブラウザーサービスではなく、Cowart MCPツールを通じて読み書きします。

関連するスクリーンショットはユーザーが提供します。現在のキャンバスを自動でキャプチャしたり、編集リクエストを推測するためにキャンバス全体をスキャンしたりしないでください。キャンバスには、異なる注釈が付いた画像が多数含まれている場合があります。

ワークフロー

Cowartのサイドバーキャンバスからのフォローアップでは、すべてのCowartツールでCowartのコンテキスト／メッセージに記載されたprojectDirとcanvasDirをそのまま使用してください。これらのパスは、会話の作業ディレクトリと異なる場合があります。通常のプロジェクトに関する会話では、これまでどおりアクティブなユーザープロジェクトを使用してください。

1. ユーザーが提供したスクリーンショットを確認します。

   ユーザーが別々のスクリーンショットは同じ画像に属すると述べている場合を除き、各スクリーンショットを1つの出力画像に対する確定的な編集指示として扱います。

   ユーザーが複数のスクリーンショットを提供した場合は、それぞれを個別に処理し、生成した出力も別々にしてください。明示的に依頼されない限り、スクリーンショット間の注釈をまとめないでください。

2. 各スクリーンショットから編集要件を読み取ります。

   スクリーンショット自体から、表示されている注釈ラベル、矢印、近くの編集メモを読み取ります。それぞれのメモがどこに適用されるかを判断するには、矢印の先端またはマークされた領域を確認してください。

   ツールバー、青い選択枠、サイズ変更ハンドル、カーソルアイコン、関係のない隣接画像など、エディターのUIは無視してください。

3. 生成元の画像を選びます。

   可能な限り、提供されたスクリーンショットに見える、きれいな元画像の内容をビジュアルのベースとして使ってください。

   スクリーンショットが大きく切り抜かれている、隠れている、または解像度が低く、適切な画像ベースとして使用できない場合は、元画像の書き出しデータか、その特定の画像を鮮明に撮ったスクリーンショットをユーザーに依頼してください。

   編集意図を把握するために、現在のCowartキャンバスを読み取らないでください。依頼された変更にはスクリーンショットを使用してください。Cowartの状態を読み取るのは、生成した結果を既存の内容に重ねずに配置するために必要な場合に限ります。

4. 画像生成用の入力を準備します。

   提供されたスクリーンショットを使用し、ユーザーがより鮮明な元画像も提供した場合は、それも使用します。

   生成プロンプトでは、次の点に従ってください。

   • 注釈のテキストを編集指示として適用する
   • 注釈で別途指定されない限り、元画像の被写体、構図、アスペクト比、スタイルを維持する
   • 赤い矢印、ラベル、青い選択枠、ハンドル、ツールUIなど、すべての注釈アーティファクトを出力から除去する
   • 修正済みのクリーンな画像のみを出力する

5. 新しいビットマップを生成します。

   現在の環境で利用できる組み込みの画像生成フローを使用してください。元画像ファイルを上書きしないでください。たとえば、次のようにタイムスタンプ付きのファイル名で新しいビットマップを保存します。

   annotation-edit-20260620-153012.png
   

   Cowartに挿入する前に、実際のローカル出力画像を慎重に特定してください。組み込みの画像生成フローが常に$CODEX_HOME/generated_imagesに新しいファイルを書き出すとは限らないため、そこにあると決めつけないでください。

   優先する解決順序：

   • 利用可能な場合は、現在の画像生成ツール呼び出しで返された正確なローカル画像パスを使用します。
   • 新しいファイルパスが返されない場合は、現在のリクエストに対応する現在の Codex セッション JSONL を調べ、最新の image_generation_call.result から PNG／base64 ペイロードを抽出して、タイムスタンプ付きの出力ファイル名で保存します。
   • $CODEX_HOME/generated_images を使用できるのは、たとえば生成後のタイムスタンプが一致するなど、現在のリクエストで作成されたファイルだと証明できる場合に限ります。古い generated_images ディレクトリ内で最も新しいという理由だけで、古い画像を選んではいけません。

   解決したファイルを Cowart に挿入する前に、ローカルのビットマップを目視で確認し、このスクリーンショット用に新たに生成された修正版の画像であり、古い生成済みアセットではないことを確かめます。

6. Cowart MCP を使って、修正版の画像を元画像の横に挿入します。

   Cowart MCP の insert_cowart_image ツールを優先してください。MCP ツールを利用できない場合を除き、tldraw の asset／shape レコードや小数形式の index キーを手書きしないでください。このツールはビットマップをページローカルのアセットフォルダーにコピーし、tldraw の画像アセットと画像シェイプを作成し、有効な tldraw の小数形式のインデックスを生成し、重なりを避けてアンカーの横に配置したうえで、プロジェクトに紐づく Cowart のキャンバスファイル経由で保存します。

   新しい tldraw 画像アセットと新しい画像シェイプを追加します。元画像、元の AI 图片 フレーム、またはいずれの注釈シェイプも、更新、削除、非表示、親の変更、並べ替えをしないでください。

   すでに明確な配置アンカーがある場合は、それを優先します。

   • ユーザーが元画像を選択している場合は、その画像をアンカーとして使用します。
   • ユーザーが元の AI 图片 フレームを選択している場合は、そのフレームをアンカーとして使用します。
   • スクリーンショットに元画像がはっきりと表示されており、現在の Cowart ページに一致する生成画像または元画像、あるいは AI 图片 フレームが 1 つだけある場合は、ユーザーに選択を求めず、それをアンカーとして使用します。
   • 複数のスクリーンショット／出力があり、対応するアンカーを一意に特定できない場合は、それぞれに対応するアンカーを選択するか、配置順を明示するようユーザーに求めます。
   • アンカーが明確でなく、ユーザーが横並びでの比較を指定していない場合は、元画像や注釈に重なったり、それらを移動、非表示、削除したりしないよう、現在のページ上の近くにある空き領域に結果を配置します。

   配置ルール：

   • 元画像が AI 图片 フレーム内にある場合は、ページレベルでのフレームの境界をアンカーとして使い、新しい画像をそのフレームと同じ階層に配置します。
   • それ以外の場合は、元画像自体の境界と親を使用します。
   • 注釈付きの元画像の近くに以前の修正版画像がある場合は、以前の注釈出力が左側に配置されていることがあるため、新しい修正版画像は現在注釈のある画像／元画像の右側に配置することを優先します。
   • 新しい画像は、アンカーから約 40 キャンバス単位の余白を空けて右側に配置します。
   • ユーザーから異なるサイズの指定がない限り、アンカーと表示幅・高さを一致させます。
   • その位置で既存のコンテンツと重なる場合は、新しい画像が重ならない位置まで、anchor width + 40 ずつ右に移動します。
   • アンカーがなく空き領域に配置する場合は、生成画像を注釈付きの元画像ページの近くに置き、分かっている場合は元画像と同程度のサイズにし、既存のシェイプと重ならない位置を選びます。

   推奨するシェイプのメタデータ：

   {
     "cowartGeneratedFromAnnotationEdit": true,
     "cowartAnnotationSourceShapeId": "<selected source image or frame id>",
     "cowartAnnotationScreenshot": "<source screenshot file name when available>"
   }
   

7. Cowart 経由で保存します。

   ビットマップの生成後にのみ、Cowart の状態にアクセスします。このアクセスは、新しい画像をアンカーの横または近くの空き領域に挿入するためだけに使用し、編集意図の把握には使用しません。

   推奨する MCP 呼び出し形式：

   {
     "imagePath": "/absolute/path/to/annotation-edit-20260620-153012.png",
     "projectDir": "/absolute/path/to/user/codex-project",
     "anchorShapeId": "<selected source image or frame id>",
     "placement": "right",
     "margin": 40,
     "matchAnchor": true,
     "fileName": "annotation-edit-20260620-153012.png",
     "annotationScreenshot": "<source screenshot file name when available>",
     "shapeMeta": {
       "cowartGeneratedFromAnnotationEdit": true
     },
     "altText": "Revised image generated from Cowart annotation screenshot"
   }
   

   MCP ツールは、新しい assetId、shapeId、保存済みアセットのパス、ページ ID、境界、および生成された index を返す必要があります。返された index が有効な tldraw の小数形式のインデックスであり、独自の説明用文字列ではないことを確認してください。 insert_cowart_image が利用できない場合に限りフォールバックします。必要なストアスナップショットを更新し、save_cowart_canvas_state で保存してください。

   フォールバックモードでは、ページローカルの画像アセット URL を使用します。

   /page-assets/<page-dir>/<filename>
   

   Cowart の MCP ストレージ層は、以下の場所にページごとのスナップショットを保持します。

   canvas/pages/<page-id-without-page-prefix>/cowart-canvas.json
   

8. 視覚的に確認します。

   Cowart ウィジェットを MCP ベースのストレージから更新させてから、次を確認してください。

   • 元の画像がまだ同じ場所にある
   • 元の批注の矢印とラベルがまだ表示されている
   • 新しく修正された画像が元の画像の隣に表示されている
   • 新しい画像に注釈の矢印、ラベル、選択範囲、UI クロームが含まれていない

ガードレール

• ユーザーが明示的に置き換えを求めない限り、元の画像を絶対に置き換えないでください。
• 注釈の図形を絶対に削除または移動しないでください。それらは目に見える編集指示です。
• 修正された画像を元の AI 图片 フレームの内側に絶対に配置しないでください。古い画像が覆われ、ビフォーアフターの比較が難しくなる可能性があるためです。
• 編集意図を得るために現在のキャンバスを自動キャプチャまたはスキャンしないでください。ユーザーが提供したスクリーンショットを使用してください。
• 注釈が互いに矛盾している場合は、最も文字通りに解釈した統合案を生成し、その曖昧さに言及してください。
• 提供されたスクリーンショットに選択状態のアウトラインやツールバーの UI が表示されている場合は、それらを生成すべきコンテンツではなくコンテキストとしてのみ扱ってください。