[ComfyMaster54] カスタムノードを自作!(後編) 〜ゼロから学ぶオープンソースのノード開発〜

comfyui-invert-text/
 ├─ .gitignore
 ├─ LICENSE
 ├─ README.md
 ├─ __init__.py
 └─ invert_image_node.py

import torch

class InvertImageNode:
    # カテゴリ名。UIの「Add Node」メニューでの配置先。
    CATEGORY = "example"

    @classmethod
    def INPUT_TYPES(cls):
        return {
            "required": {
                "image_in": ("IMAGE", {})
            }
        }

    # 出力はIMAGE型を1つ返す
    RETURN_TYPES = ("IMAGE", )
    RETURN_NAMES = ("image_out", )  # 出力スロットに付けるラベル(省略可)
    FUNCTION = "invert"

    def invert(self, image_in):
        # image_inはtorch.Tensor ([B,H,W,C]) で来る
        # 0~1で正規化されているので、1 - values でピクセル反転可能
        image_out = 1.0 - image_in
        return (image_out,)

from .invert_image_node import InvertImageNode

NODE_CLASS_MAPPINGS = {
    "Invert Image Node Sample": InvertImageNode
}

__all__ = ["NODE_CLASS_MAPPINGS"]

cd ComfyUI/custom_nodes
git clone https://github.com/your-account-name/comfyui-invert-image.git

0.0 seconds: [your path]\ComfyUI\custom_nodes\comfyui-invert-image

import torch            # PyTorch：テンソル操作用
import numpy as np      # NumPy：数値計算用
from PIL import Image   # Pillow：画像処理用
import json            # JSON：メタデータ処理用
import random          # random：ランダム文字列生成用
import os              # os：ファイルパス操作用
import folder_paths    # ComfyUI：パス管理用
from PIL.PngImagePlugin import PngInfo  # PNG画像のメタデータ操作用

class InvertImageNode:
    CATEGORY = "example"
    OUTPUT_NODE = True  # プレビュー機能に必要なフラグ

    @classmethod
    def INPUT_TYPES(cls):
        return {
            "required": {
                "image_in": ("IMAGE", {
                    "tooltip": "入力画像です。この画像が反転されます。"
                })
            },
            "hidden": {
                "prompt": "PROMPT",           # 生成プロンプト情報
                "extra_pnginfo": "EXTRA_PNGINFO"  # 追加のメタデータ
            }
        }

    RETURN_TYPES = ("IMAGE",)
    RETURN_NAMES = ("image_out",)
    FUNCTION = "invert"

def __init__(self):
    # 一時ファイル保存用の設定
    self.output_dir = folder_paths.get_temp_directory()
    self.type = "temp"
    
    # 一時ファイル名の重複を防ぐためのランダムな接尾辞を生成
    self.prefix_append = "_temp_" + ''.join(
        random.choice("abcdefghijklmnopqrstupvxyz") 
        for x in range(5)
    )
    
    # プレビュー用画像の圧縮レベル（1=最速、9=最高圧縮）
    self.compress_level = 1

def invert(self, image_in, prompt=None, extra_pnginfo=None):
    # 画像反転処理
    image_out = 1.0 - image_in
    
    # プレビュー用の一時ファイル保存の準備
    results = []
    filename_prefix = "inverted" + self.prefix_append
    
    # 保存先パスの取得
    full_output_folder, filename, counter, subfolder, filename_prefix = \
        folder_paths.get_save_image_path(
            filename_prefix,
            self.output_dir,
            image_out.shape[1],  # width
            image_out.shape[0]   # height
        )

    # バッチ内の各画像を処理
    for batch_number, image in enumerate(image_out):
        # PyTorchテンソルからPIL Imageへの変換
        i = 255. * image.cpu().numpy()  # 0-1の値を0-255にスケーリング
        img = Image.fromarray(np.clip(i, 0, 255).astype(np.uint8))
        
        # メタデータの設定
        metadata = None
        if prompt is not None or extra_pnginfo is not None:
            metadata = PngInfo()
            if prompt is not None:
                metadata.add_text("prompt", json.dumps(prompt))
            if extra_pnginfo is not None:
                for x in extra_pnginfo:
                    metadata.add_text(x, json.dumps(extra_pnginfo[x]))

        # ファイル名の生成と保存
        filename_with_batch = filename.replace("%batch_num%", str(batch_number))
        file = f"{filename_with_batch}_{counter:05}_.png"
        
        # 画像の保存
        img.save(
            os.path.join(full_output_folder, file),
            pnginfo=metadata,
            compress_level=self.compress_level
        )
        
        # 結果を記録
        results.append({
            "filename": file,
            "subfolder": subfolder,
            "type": self.type
        })
        counter += 1

    # UIと処理結果を返す
    return {
        "ui": {"images": results},  # プレビュー用情報
        "result": (image_out,)      # 次のノードへの出力
    }

def invert(self, image_in, prompt=None, extra_pnginfo=None):
    try:
        # 画像反転処理
        image_out = 1.0 - image_in
        
        # 入力チェック
        if not isinstance(image_out, torch.Tensor):
            raise ValueError("Invalid image format")
            
        if len(image_out.shape) != 4:
            raise ValueError("Expected 4D tensor (batch, height, width, channels)")
        
        # 以下、前述の処理を続ける...
        
    except Exception as e:
        print(f"Error in InvertImageNode: {str(e)}")
        # エラー時は元の画像をそのまま返す
        return {
            "ui": {"error": str(e)},
            "result": (image_in,)
        }

import torch
import numpy as np
from PIL import Image
import json
import random
import os
import folder_paths
from PIL.PngImagePlugin import PngInfo

class InvertImageNode:
    """画像を反転させるノードクラス
    
    このノードは入力画像の色を反転（ネガポジ反転）させます。
    また、ComfyUIの標準的なプレビュー機能を実装しています。
    """
    
    # ノードの基本設定
    CATEGORY = "example"  # UIメニューでの表示カテゴリ
    OUTPUT_NODE = True    # このノードが出力を持つことを示すフラグ（プレビュー機能に必要）

    @classmethod
    def INPUT_TYPES(cls):
        """ノードの入力定義
        
        Returns:
            dict: 必須入力とhidden入力を含む入力定義
        """
        return {
            "required": {
                "image_in": ("IMAGE", {
                    "tooltip": "入力画像です。この画像が反転されます。"
                })
            },
            # プロンプト情報とメタデータ用のhidden入力
            "hidden": {
                "prompt": "PROMPT",           # 生成時のプロンプト情報
                "extra_pnginfo": "EXTRA_PNGINFO"  # 追加のメタデータ
            }
        }

    # 出力の定義
    RETURN_TYPES = ("IMAGE",)     # 出力型の定義（画像型）
    RETURN_NAMES = ("image_out",) # 出力スロットのラベル名
    FUNCTION = "invert"           # 実行時に呼び出される関数名

    def __init__(self):
        """初期化メソッド
        
        一時ファイル保存用の設定を初期化します。
        """
        # 一時ファイル保存先ディレクトリの設定
        self.output_dir = folder_paths.get_temp_directory()
        self.type = "temp"  # ファイルタイプを一時ファイルとして指定
        
        # 一時ファイル名の重複を防ぐためのランダムな接尾辞を生成
        self.prefix_append = "_temp_" + ''.join(random.choice("abcdefghijklmnopqrstupvxyz") for x in range(5))
        
        # PNG圧縮レベル（1=最速、9=最高圧縮）
        self.compress_level = 1  # プレビュー用なので高速化優先

    def invert(self, image_in, prompt=None, extra_pnginfo=None):
        """画像反転処理の主関数
        
        Args:
            image_in (torch.Tensor): 入力画像テンソル [B,H,W,C]
            prompt (dict, optional): 生成プロンプト情報
            extra_pnginfo (dict, optional): 追加のメタデータ
        
        Returns:
            dict: UI更新情報と処理結果を含む辞書
        """
        # 画像の反転処理（1から引くことで色を反転）
        image_out = 1.0 - image_in
        
        # プレビュー用の一時ファイル保存処理の開始
        results = []  # 保存した画像の情報を格納するリスト
        filename_prefix = "inverted"  # 基本ファイル名
        filename_prefix += self.prefix_append  # ランダムな接尾辞を追加
        
        # 保存先のパス情報を取得
        full_output_folder, filename, counter, subfolder, filename_prefix = folder_paths.get_save_image_path(
            filename_prefix,
            self.output_dir,
            image_out.shape[1],  # 画像の幅
            image_out.shape[0]   # 画像の高さ
        )

        # バッチ内の各画像を処理
        for batch_number, image in enumerate(image_out):
            # PyTorchテンソルをPIL Imageに変換
            i = 255. * image.cpu().numpy()  # 0-1の値を0-255にスケーリング
            img = Image.fromarray(np.clip(i, 0, 255).astype(np.uint8))
            
            # メタデータの設定（プロンプトや追加情報）
            metadata = None
            if prompt is not None or extra_pnginfo is not None:
                metadata = PngInfo()
                if prompt is not None:
                    metadata.add_text("prompt", json.dumps(prompt))
                if extra_pnginfo is not None:
                    for x in extra_pnginfo:
                        metadata.add_text(x, json.dumps(extra_pnginfo[x]))

            # ファイル名を生成して画像を保存
            filename_with_batch = filename.replace("%batch_num%", str(batch_number))
            file = f"{filename_with_batch}_{counter:05}_.png"
            img.save(
                os.path.join(full_output_folder, file),
                pnginfo=metadata,
                compress_level=self.compress_level
            )
            
            # 保存した画像の情報を記録
            results.append({
                "filename": file,       # ファイル名
                "subfolder": subfolder, # サブフォルダ名
                "type": self.type       # ファイルタイプ（temp）
            })
            counter += 1

        # 処理結果を返す
        return {
            "ui": {"images": results},  # UI更新用の画像情報
            "result": (image_out,)      # ノードの出力値（次のノードへの入力として使用）
        }

comfyui-invert-image/
  └─ js/
      └─ invert_preview.js

import { app } from "../../../scripts/app.js";
import { api } from "../../../scripts/api.js";

app.registerExtension({
    name: "Comfy.InvertImagePreview",
    
    async beforeRegisterNodeDef(nodeType, nodeData, app) {
        // InvertImageノードの場合のみ処理
        if (nodeType.comfyClass !== "InvertImage") return;
        
        // ここに実装を追加していきます
    }
});

function createPreviewHost(node) {
    // コンテナ要素の作成
    const container = document.createElement("div");
    container.className = "comfy-img-preview";
    
    // スタイルの設定
    container.style.minHeight = "200px";
    container.style.minWidth = "100px";
    container.style.maxHeight = "300px";
    container.style.backgroundColor = "#1e1e1e";
    container.style.display = "flex";
    container.style.justifyContent = "center";
    container.style.alignItems = "center";
    container.style.marginTop = "10px";
    container.style.overflow = "hidden";
    container.style.borderRadius = "4px";

    // 状態管理用の変数
    let currentImages = null;
    let firstUpdate = true;

    // プレビューのサイズ更新処理
    function updatePreviewSize() {
        if (!currentImages) return;

        const nodeWidth = node.size[0];
        const containerHeight = container.clientHeight;

        // 初回更新時の処理
        if (firstUpdate) {
            firstUpdate = false;
            if (containerHeight < 200) {
                container.style.minHeight = "200px";
            }
        }

        // アスペクト比を保持したサイズ計算
        const { naturalWidth, naturalHeight } = currentImages[0];
        const scale = Math.min(
            (nodeWidth - 20) / naturalWidth,    // 横幅に合わせたスケール
            containerHeight / naturalHeight,     // 高さに合わせたスケール
            1                                   // 最大スケール（等倍）
        );

        // 計算したサイズを適用
        const width = Math.floor(naturalWidth * scale);
        const height = Math.floor(naturalHeight * scale);

        currentImages.forEach(img => {
            img.style.width = width + "px";
            img.style.height = height + "px";
            img.style.objectFit = "contain";
        });
    }

    // プレビューホストのインターフェース
    return {
        element: container,
        
        // 画像更新メソッド
        updateImages(imgs) {
            if (imgs !== currentImages) {
                container.replaceChildren(...imgs);
                currentImages = imgs;
                requestAnimationFrame(() => {
                    updatePreviewSize();
                });
                node.onResize?.(node.size);
            }
        },
        
        updateSize: updatePreviewSize
    };
}

// ノード作成時の処理
const onNodeCreated = nodeType.prototype.onNodeCreated;
nodeType.prototype.onNodeCreated = function() {
    const result = onNodeCreated?.apply(this, arguments);
    
    // プレビューホストを作成してノードに追加
    this.previewHost = createPreviewHost(this);
    this.widgets?.length && 
        this.widgets[0].element.appendChild(this.previewHost.element);

    return result;
};

// リサイズ時の処理
const onResize = nodeType.prototype.onResize;
nodeType.prototype.onResize = function(size) {
    const result = onResize?.apply(this, arguments);
    this.previewHost?.updateSize();
    return result;
};

// 実行完了時の処理
const onExecuted = nodeType.prototype.onExecuted;
nodeType.prototype.onExecuted = async function(message) {
    const result = onExecuted?.apply(this, arguments);
    
    // プレビュー更新
    if (message?.ui?.images) {
        try {
            // 画像の非同期読み込み
            const images = await Promise.all(
                message.ui.images.map(async (img) => {
                    // 画像URLの生成
                    const url = api.apiURL(
                        `/view?filename=${encodeURIComponent(img.filename)}` +
                        `&type=${img.type}`
                    );
                    
                    // 画像要素の作成と読み込み
                    const imgElement = new Image();
                    imgElement.src = url;
                    
                    // 読み込み完了を待機
                    return new Promise((resolve, reject) => {
                        imgElement.onload = () => resolve(imgElement);
                        imgElement.onerror = reject;
                    });
                })
            );
            
            // プレビューを更新
            this.previewHost.updateImages(images);
        } catch (error) {
            console.error("Failed to update preview:", error);
        }
    }

    return result;
};

from .invert_image_node import InvertImageNode

NODE_CLASS_MAPPINGS = {
    "Invert Image Node Sample": InvertImageNode
}

WEB_DIRECTORY = "./js"

__all__ = ["NODE_CLASS_MAPPINGS", "WEB_DIRECTORY"]

import { app } from "../../../scripts/app.js";
import { api } from "../../../scripts/api.js";

/**
 * 画像反転ノードのプレビュー機能を実装する拡張機能
 */
app.registerExtension({
    name: "Comfy.InvertImagePreview",
    
    /**
     * ノード定義の登録前に呼び出される処理
     * @param {Object} nodeType - ノードの型定義
     * @param {Object} nodeData - ノードのデータ
     * @param {Object} app - ComfyUIのアプリケーションインスタンス
     */
    async beforeRegisterNodeDef(nodeType, nodeData, app) {
        // InvertImageノードの場合のみ処理を行う
        if (nodeType.comfyClass !== "InvertImage") return;

        /**
         * プレビューホストを作成する関数
         * @param {Object} node - ノードインスタンス
         * @returns {Object} プレビューホストのインターフェース
         */
        function createPreviewHost(node) {
            // プレビュー用のコンテナ要素を作成
            const container = document.createElement("div");
            container.className = "comfy-img-preview";
            // コンテナのスタイル設定
            container.style.minHeight = "200px";
            container.style.minWidth = "100px";
            container.style.maxHeight = "300px";
            container.style.backgroundColor = "#1e1e1e";
            container.style.display = "flex";
            container.style.justifyContent = "center";
            container.style.alignItems = "center";
            container.style.marginTop = "10px";
            container.style.overflow = "hidden";

            // 現在表示中の画像の参照を保持
            let currentImages = null;
            let firstUpdate = true;

            /**
             * プレビュー画像のサイズを更新する関数
             * ノードのサイズに合わせて画像を適切にスケーリングします
             */
            function updatePreviewSize() {
                if (!currentImages) return;

                const nodeWidth = node.size[0];
                const containerHeight = container.clientHeight;

                // 最初の更新時は最小高さを設定
                if (firstUpdate) {
                    firstUpdate = false;
                    if (containerHeight < 200) {
                        container.style.minHeight = "200px";
                    }
                }

                // アスペクト比を保持しながら、プレビュー画像のサイズを計算
                const { naturalWidth, naturalHeight } = currentImages[0];
                const scale = Math.min(
                    (nodeWidth - 20) / naturalWidth,    // 横幅に合わせたスケール
                    containerHeight / naturalHeight,     // 高さに合わせたスケール
                    1                                   // 最大スケール（等倍）
                );

                // 計算したサイズを適用
                const width = Math.floor(naturalWidth * scale);
                const height = Math.floor(naturalHeight * scale);

                // バッチ内の全画像にサイズを適用
                currentImages.forEach(img => {
                    img.style.width = width + "px";
                    img.style.height = height + "px";
                    img.style.objectFit = "contain";  // アスペクト比を保持
                });
            }

            // プレビューホストのインターフェースを返す
            return {
                element: container,  // DOM要素
                
                /**
                 * プレビュー画像を更新する関数
                 * @param {Array<HTMLImageElement>} imgs - 新しい画像要素の配列
                 */
                updateImages(imgs) {
                    if (imgs !== currentImages) {
                        // 画像を更新
                        container.replaceChildren(...imgs);
                        currentImages = imgs;
                        // サイズ更新を次のフレームで実行
                        requestAnimationFrame(() => {
                            updatePreviewSize();
                        });
                        // ノードのリサイズイベントを発火
                        node.onResize?.(node.size);
                    }
                },
                
                // サイズ更新関数を外部に公開
                updateSize: updatePreviewSize
            };
        }

        // ノード作成時の処理をカスタマイズ
        const onNodeCreated = nodeType.prototype.onNodeCreated;
        nodeType.prototype.onNodeCreated = function() {
            const result = onNodeCreated?.apply(this, arguments);
            
            // プレビューホストを作成してノードに追加
            this.previewHost = createPreviewHost(this);
            // 最初のウィジェットの要素にプレビューを追加
            this.widgets?.length && this.widgets[0].element.appendChild(this.previewHost.element);

            return result;
        };

        // ノードのサイズ変更時の処理をカスタマイズ
        const onResize = nodeType.prototype.onResize;
        nodeType.prototype.onResize = function(size) {
            const result = onResize?.apply(this, arguments);
            // プレビューのサイズを更新
            this.previewHost?.updateSize();
            return result;
        };

        // ノードの実行完了時の処理をカスタマイズ
        const onExecuted = nodeType.prototype.onExecuted;
        nodeType.prototype.onExecuted = async function(message) {
            const result = onExecuted?.apply(this, arguments);
            
            // UIメッセージに画像情報が含まれている場合
            if (message?.ui?.images) {
                try {
                    // 全ての画像を非同期で読み込む
                    const images = await Promise.all(
                        message.ui.images.map(async (img) => {
                            // 画像URLを生成
                            const url = api.apiURL(`/view?filename=${encodeURIComponent(img.filename)}&type=${img.type}`);
                            const imgElement = new Image();
                            imgElement.src = url;
                            // 画像の読み込み完了を待つ
                            return new Promise((resolve, reject) => {
                                imgElement.onload = () => resolve(imgElement);
                                imgElement.onerror = reject;
                            });
                        })
                    );
                    // プレビューを更新
                    this.previewHost.updateImages(images);
                } catch (error) {
                    console.error("Failed to update preview:", error);
                }
            }

            return result;
        };
    }
});

comfyui-invert-text/
 ├─ .gitignore
 ├─ LICENSE
 ├─ README.md
 ├─ __init__.py
 ├─ invert_image_node.py
 └─ js
    └─ invert_preview.js