情報パネルバッジ - ComfyUI

情報パネルバッジ API により、拡張機能は ComfyUI の情報ページにカスタムバッジを追加できます。これらのバッジには拡張機能に関する情報を表示でき、ドキュメント、ソースコード、または他のリソースへのリンクを含めることができます。

基本的な使い方

app.registerExtension({
  name: "MyExtension",
  aboutPageBadges: [
    {
      label: "Documentation",
      url: "https://example.com/docs",
      icon: "icon-[lucide--file]"
    },
    {
      label: "GitHub",
      url: "https://github.com/username/repo",
      icon: "icon-[lucide--github]"
    }
  ]
});

バッジ設定

各バッジには、以下のすべてのプロパティが必要です：

{
  label: string,           // バッジに表示されるテキスト
  url: string,             // バッジがクリックされたときに開く URL
  icon: string             // アイコンクラス（例："icon-[lucide--github]"）
}

アイコンオプション

バッジのアイコンには、icon-[lucide--<icon-name>] 形式の Lucide アイコンクラスを使用します。以下はよく使用されるアイコンの一部です：

ドキュメント：icon-[lucide--file] または icon-[lucide--book-open]
GitHub: icon-[lucide--github]
外部リンク：icon-[lucide--external-link]
情報：icon-[lucide--info]
ダウンロード：icon-[lucide--download]
ウェブサイト：icon-[lucide--globe]

これらのクラスはフロントエンドのビルド時に生成されるため、使用できるのはフロントエンド自体が使用している Lucide アイコンのみです。アイコンが表示されない場合は、別のアイコンを選ぶか、拡張機能が読み込むスタイルシートで独自のアイコンクラスを定義してください。 pi pi-file などの PrimeIcons クラスは現時点ではまだ表示されますが、段階的に廃止されています。新しいコードでは使用しないでください。PrimeVue 削除に伴う移行を参照してください。

例

app.registerExtension({
  name: "BadgeExample",
  aboutPageBadges: [
    {
      label: "Website",
      url: "https://example.com",
      icon: "icon-[lucide--globe]"
    },
    {
      label: "Donate",
      url: "https://example.com/donate",
      icon: "icon-[lucide--heart]"
    },
    {
      label: "Documentation",
      url: "https://example.com/docs",
      icon: "icon-[lucide--book-open]"
    }
  ]
});

バッジは設定ダイアログの情報パネルに表示され、ComfyUI インターフェースの右上隅にあるギアアイコンからアクセスできます。