cowart-image-gen

Cowart 画像生成

ユーザーが AI 生成画像を Cowart キャンバスに配置したい場合は、このスキルを使用してください。選択した AI 图片 ホルダーがあれば、サイズと配置の正確な基準になりますが、必須ではありません。デフォルトでは、選択したホルダーは一時的な配置先として扱い、生成した画像に置き換えます。

前提条件

このワークフローに必要な cowart_mcp ツールが利用可能であることを確認してください。定型的な前提条件として render_cowart_canvas_widget を呼び出さないでください。Cowart ウィジェットから送信されたリクエストではキャンバスがすでに開いており、既存のウィジェットは MCP が使用するストレージから挿入された画像を同期します。ユーザーがキャンバスを開く、再度開く、または明示的に更新することを別途求めた場合は、キャンバスを開くワークフローを一度実行してください。

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

新しいホルダーは、次の tldraw frame シェイプです。

{
  "type": "frame",
  "meta": {
    "cowartAiImageHolder": true
  }
}

以前のキャンバスには、同じ meta フラグを持つ従来の geo 長方形ホルダーが残っている場合があります。両方のシェイプに対応してください。

ワークフロー

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

1. MCP の get_cowart_selection ツールを使って、Cowart から選択中のシェイプを読み取ります。projectDir にはアクティブなユーザープロジェクトのディレクトリを渡してください。

2. 選択されたシェイプがちょうど 1 つで、それが AI 画像ホルダーかどうかを確認します。ホルダーとは、次のいずれかを持つ選択中のシェイプです。

   isAiImageHolder: true
   

   または：

   meta.cowartAiImageHolder: true
   

   該当する場合は、以下のホルダー置換ワークフローを使用してください。該当しない場合は、ユーザーにホルダーの選択を求めず、以下の単独ワークフローを使用して、生成した画像を現在の Cowart ページに挿入してください。

3. 配置ワークフローを選択します。

   ホルダー置換ワークフロー：選択したホルダーの props.w と props.h を、生成と配置の両方におけるサイズの基準として使用します。生成前に、次の値を算出して保持してください。

   • targetWidth：選択したホルダーの props.w
   • targetHeight：選択したホルダーの props.h
   • targetAspectRatio：簡潔に表せる場合は、約分した targetWidth:targetHeight の比率と、targetWidth / targetHeight の小数値

   選択したホルダーが、1:1、3:2、2:3、4:3、3:4、16:9、9:16 などの Cowart の比率プリセットに一致する場合は、そのプリセット名を人が読みやすい縦横比として使用してください。生成画像は、この目標サイズと縦横比に合わせて構成してください。ホルダーに収めるために、後から引き伸ばしたり切り抜いたりすることを前提にしないでください。

   生成画像は、通常の tldraw 画像シェイプとして、選択したホルダーを置き換えてください。

   • parentId：ホルダーと同じ
   • x、y、rotation：ホルダーと同じ
   • props.w、props.h：ホルダーと同じ

   これにより、最終的なキャンバスでは、AI ホルダーの中に画像が入った状態ではなく、ホルダーの位置に画像シェイプが配置されます。ユーザーが再利用可能なスロットを保持するよう明示的に求めた場合に限り、ホルダーを残してください。

   単独ワークフロー：AI ホルダーが選択されていない場合も画像を生成し、通常の画像シェイプとして現在のページに挿入してください。Cowart の表示状態から現在のページを優先して選択します。ホルダー以外のシェイプが選択されており、それが文脈として役立つ場合は画像をその横に配置し、それ以外の場合はページ内の見やすい領域に配置してください。ユーザーがサイズまたは縦横比を指定した場合は、そのサイズと比率を生成に渡し、表示にも使用してください。指定がない場合は、生成されたビットマップの自然な縦横比と、512 キャンバス単位などの実用的な表示幅を使用してください。

4. ユーザーが別の画像生成方法を明示的に指定していない限り、組み込みの imagegen スキルを使ってビットマップを生成します。要求されたアセットに、目に見えるコピー、ラベル、ポスターのテキスト、広告文、UI テキスト、またはタイポグラフィが必要な場合は、そのテキストを画像生成プロンプトに直接含め、画像モデルに最終的なビットマップを生成させます。ユーザーがローカルでのタイポグラフィ、決定的なテキストオーバーレイ、SVG／ベクター出力、または画像生成以外のレイアウト手順を明示的に求めていない限り、テキストのない背景を生成してからローカルでテキストを追加する方法を既定にしないでください。

   ホルダーワークフローでは、画像生成リクエストに、選択したホルダーの目標サイズとアスペクト比を明示的に含める必要があります。たとえば、次のようにこの情報をモデルプロンプトに追加します。

   Target canvas slot: 512 x 683 canvas units.
   Target aspect ratio: 3:4 (0.75 width/height).
   Compose the final bitmap for this portrait ratio so it fits the slot without cropping or stretching.
   

   画像生成ツールまたはモデルがサイズやアスペクト比のパラメーターを受け付ける場合は、プロンプトテキストに加えて、最も近い対応オプションを渡します。プロンプトテキストしか使用できない場合でも、プロンプトテキストに targetWidth、targetHeight、targetAspectRatio を含める必要があります。

   Cowart に挿入する前に、実際のローカル出力画像を慎重に特定します。組み込みの画像生成フローが、常に $CODEX_HOME/generated_images 内に新しいファイルを書き出すとは限りません。

   優先する解決順序：

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

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

   プロジェクトに紐づく出力の場合は、解決した生成画像を選択したページのアセットフォルダーにコピーします。

   canvas/pages/<page-id-without-page-prefix>/assets/
   

5. 生成した画像を新しい tldraw 画像シェイプとして挿入します。

   ホルダー置換ワークフローでは、insert_cowart_image を anchorShapeId にホルダー ID を指定して呼び出し、replaceAiImageHolder は未設定のままにするか、true に設定します。MCP ツールはホルダーがあった位置に画像を正確に配置し、ホルダーシェイプを削除します。

   • type: image
   • parentId: ホルダーと同じ
   • x、y、rotation: ホルダーと同じ
   • props.w、props.h: ホルダーと同じ
   • props.assetId: 新しい画像アセット ID
   • meta.cowartGeneratedForAiImageHolder: ホルダーシェイプ ID
   • meta.cowartReplacedAiImageHolder: true

   ユーザーが AI ホルダーを再利用可能な状態で残すよう明示的に求めた場合は、replaceAiImageHolder: false を指定して insert_cowart_image を呼び出します。このレガシーモードでは、フレームホルダーの場合、生成した画像はフレームの子として挿入されます。

   単独ワークフローでは、通常の画像として現在のページに挿入します。

   • type: image
   • parentId: 現在のページ ID。ただし、選択したホルダー以外のシェイプの横に配置する必要がある場合は、そのシェイプと同じ親
   • x、y: ページ内の見やすい領域、または選択したホルダー以外のシェイプの横
   • rotation: 0
   • props.w、props.h: 生成ビットマップのアスペクト比に合った表示サイズ
   • props.assetId: 新しい画像アセット ID
   • meta.cowartGeneratedStandalone: true

6. 置換の一環として、既定では選択したホルダーを削除します。単独ワークフローでは、ユーザーが明示的に求めない限り、最初にホルダーを作成しないでください。

7. Cowart MCP 経由で保存します。生成したビットマップの挿入には insert_cowart_image を優先し、tldraw のスナップショット全体を更新する必要がある場合に限り save_cowart_canvas_state を使用します。

   画像アセットにはページローカルのアセット URL を優先します。

   /page-assets/<page-id-without-page-prefix>/<filename>
   

8. Cowart ウィジェットを MCP 連携ストレージから更新し、挿入されたシェイプ ID、最終的な寸法、目標アスペクト比、保存されたアセットパス、およびホルダー置換ワークフローを使用した場合は置換されたホルダー ID を確認します。

注意事項

• ホルダーが従来の回転した geo 長方形の場合は、置換後の画像にも同じ rotation を保持します。
• 古いバージョンの Cowart で生成された画像がすでにホルダー内にある場合、ホルダーを置換するときは、ホルダーとその子画像シェイプを削除してから、ホルダーがあった位置に通常の画像シェイプを 1 つ作成します。
• AI 画像 ホルダーが選択されていないことだけを理由に、生成を拒否しないでください。ビットマップを生成し、現在の Cowart ページに挿入します。
• 既存のアセットファイルを上書きしないでください。タイムスタンプ付きのファイル名を使用します。