Skip to main content

​
概要

comfyui-image-annotator は、コミュニティユーザーの luckdvr によって提供された 対話型の画像アノテーション ComfyUI ノード です。その中核価値は、プロンプト作成のハードルを下げること にあります。たとえば「左上の赤いボタンを置き換えて」と説明するのに苦労する代わりに、変更したい領域を 丸で囲む、クリックする、または枠で囲む だけで、モデルにどこを編集すべきかを正確に示せます。三段階パイプライン「image → annotate → API」の 前段 に配置するよう設計されています。
プロジェクト情報
  • 🔗 ソース: github.com/luckdvr/comfyui-image-annotator
  • 📜 ライセンス: MIT
  • 👤 作者: luckdvr
  • ⭐ コミュニティ貢献 — Luck Nano Banana Pro と同じ作者
推奨ワークフロー: Image → Annotator → API node
最適なのは、英語の prompt や、正確な「どこを編集するか」の説明が苦手なユーザー です。マウスに どこを 任せ、1行の prompt に 何を 任せましょう。

​
主な機能

3種類のアノテーションタイプ

ポイント (⦿): シングルクリック · 矩形 (▢): ドラッグして描画 · ポリゴン (⬡): 複数クリックで自動クローズ

リアルタイム描画

アノテーションはキャンバス上にライブ描画されます — WYSIWYGで、プレビューへの往復はありません

ズーム / パン / 選択

標準搭載のキャンバス操作で、大きな画像でも正確にアノテーションできます

50ステップの取り消し

最大50回まで取り消せます — 安心して自由に試せます

二重出力

アノテーション済み画像（モデル用）と アノテーションJSON（後続のパース用）の両方を出力します

カスタマイズ可能なスタイル

線色、線幅、塗りつぶしの透明度、ポイントサイズ — すべて設定可能です

​
対応する APIYI モデル

このノードは自体では API を呼び出しません — 注釈を付けるだけです。注釈付きの画像は、画像入力を受け付ける任意の APIYI モデルに渡せます。おすすめの組み合わせは次のとおりです。

​
ノードの詳細

​
入力

​
出力

​
インストール

1

手順1: custom_nodes にクローンします

2

手順2: ComfyUI を再起動します

追加の依存関係はありません — ComfyUI の組み込み環境を使用します。再起動後、ノードパレットで ImageAnnotator を検索してください。
3

手順3: 3段階のワークフローを接続します

ノードを順番に接続します:
ImageAnnotator キャンバス上で編集する領域を囲み、後続の API ノードで簡単な prompt を入力して（例: “replace the marked area with a red sports car”）実行します。

​
使用例

​
例1: ローカル置換（初心者向け）

1

元画像を読み込む

LoadImage — リビングルームの写真を読み込みます
2

対象領域に注釈を付ける

ImageAnnotator — ソファの横にある空いたスペースの周りに長方形を描きます
3

1行の prompt を書く

Luck Nano Banana Pro — prompt: 「マークした領域に緑の室内用植物を置く」
4

実行して保存する

モデルはボックス内のちょうどその位置に植物を追加し、残りはそのままにします

​
例2: マルチ領域での精密編集

polygon を使って服の輪郭を囲み、point で帽子の位置を指定し、rectangle で背景を指定してから、次のように prompt します:
モデルは各領域で個別に編集を行います。

​
例3: ビジュアル Q&A / 理解

Gemini / Qwen-VL では、モデルに「長方形の中にある物体は何か、またシーンの中でどんな役割を果たしているか」を説明するように尋ねます。注釈によって、モデルに正確な視覚的アンカーを与えられます。

​
よくある質問

従来の画像編集では、どこを、どのように変更するかの両方を説明する必要があり、英語を母語としない方や AI 初心者には大変です。このノードでは、位置情報はマウスから取得されるため、prompt では何を変更するかだけを説明すればよいです。これまで 3〜5 文必要だった説明が、短い一文で済みます。
はい、良い意味で影響します。ほとんどのマルチモーダルモデル（Nano Banana, Gemini, Qwen-VL）は、画像上のアノテーション記号を「ユーザーが指定した対象領域」と認識し、指示により正確に従います。視覚的な干渉が気になる場合は、ノード設定で線幅を細くし、塗りつぶしを半透明にしてください。
  1. ディレクトリを確認してください: ComfyUI/custom_nodes/comfyui-image-annotator
  2. ComfyUI を完全に再起動してください（フロントエンドの更新だけでは不十分です）
  3. ComfyUI のコンソールでエラーを確認してください
はい。annotations_json の出力だけを下流に接続してください。後処理で座標をカスタムスクリプトに渡したいときに便利です。
推奨パイプライン: LoadImage → ImageAnnotator → Luck Nano Banana Pro
  • ImageAnnotator.annotated_image を Luck Nano Banana Pro.image_01 に接続する
  • マークした領域に対して何をするかを説明する自然言語 prompt を使用する
  • 最初の結果がずれている場合は、Luck Nano Banana Pro の retry_times または seed モードを使って再実行する

​
関連リソース

Luck Nano Banana Pro ノード

著者の API 呼び出しノード — こちらと相性抜群です

Nano Banana Pro API

Nano Banana Pro の全機能

ComfyUI ノードコレクション

すべての Nano Banana ComfyUI ノードを閲覧できます

APIYI コンソール

キー、使用状況、チャネルを管理します