設定

ComfyUI に設定オブジェクトを提供すると、ユーザーが ComfyUI 設定パネルを開いた際に表示されます。

​

基本操作

​

設定項の追加

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

app.registerExtension({
    name: "My Extension",
    settings: [
        {
            id: "example.boolean",
            name: "設定例（ブール値）",
            type: "boolean",
            defaultValue: false,
        },
    ],
});

id はすべての拡張機能間で一意である必要があり、値の取得に使用されます。

カテゴリを指定 しない場合、id は . で分割され、設定パネル内の表示位置が決定されます。

• id に . が含まれていない場合、「その他」カテゴリに表示され、id がセクション見出しとして使用されます。
• id に少なくとも 1 つの . が含まれている場合、左側の部分が設定カテゴリとして使用され、2 番目の部分がセクション見出しとして使用されます。それ以降の部分は無視されます。

​

設定項の読み取り

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

if (app.extensionManager.setting.get('example.boolean')) {
    console.log("設定は有効です。");
} else {
    console.log("設定は無効です。");
}

​

変更への反応

onChange() イベントハンドラは、ユーザーが設定パネルで設定を変更するとすぐに呼び出されます。

これは拡張機能の登録時、つまりページが読み込まれるたびに呼び出されます。

{
    id: "example.boolean",
    name: "設定例（ブール値）",
    type: "boolean",
    defaultValue: false,
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

​

設定項の書き込み

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

try {
    await app.extensionManager.setting.set("example.boolean", true);
} catch (error) {
    console.error(`設定の変更中にエラーが発生しました：${error}`);
}

​

追加設定

設定タイプは PrimeVue コンポーネントに基づいています。 PrimeVue ドキュメントに記載されている Props は、attrs フィールドに追加することで ComfyUI 設定用に定義できます。

例えば、これは数値入力に増減ボタンを追加します：

{
    id: "example.number",
    name: "設定例（数値）",
    type: "number",
    defaultValue: 0,
    attrs: {
        showButtons: true,
    },
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

​

タイプ

​

ブール値 (Boolean)

これはオン/オフのトグルを表示します。

ToggleSwitch PrimeVue コンポーネント に基づいています。

{
    id: "example.boolean",
    name: "設定例（ブール値）",
    type: "boolean",
    defaultValue: false,
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

​

テキスト (Text)

これは自由形式のテキストです。

InputText PrimeVue コンポーネント に基づいています。

{
    id: "example.text",
    name: "設定例（テキスト）",
    type: "text",
    defaultValue: "Foo",
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

​

数値 (Number)

これは数値を入力するためのものです。

小数点以下を許可するには、maxFractionDigits 属性を 0 より大きい数値に設定します。

InputNumber PrimeVue コンポーネント に基づいています。

{
    id: "example.number",
    name: "設定例（数値）",
    type: "number",
    defaultValue: 42,
    attrs: {
        showButtons: true,
        maxFractionDigits: 1,
    },
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

​

スライダー (Slider)

これにより、ユーザーは直接数値を入力するか、スライダー経由で入力できます。

Slider PrimeVue コンポーネント に基づいています。範囲はサポートされていません。

{
    id: "example.slider",
    name: "設定例（スライダー）",
    type: "slider",
    attrs: {
        min: -10,
        max: 10,
        step: 0.5,
    },
    defaultValue: 0,
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

​

コンボ (選択リスト)

これにより、ユーザーは値のドロップダウンリストから選択できます。

オプションは単純な文字列として、または text と value フィールドを持つオブジェクトとして提供できます。単純な文字列のみを提供する場合、それは両方に使用されます。

editable: true 属性を指定してユーザーに自由形式のテキストを入力させたり、filter: true 属性を指定して検索可能にしたりできます。

Select PrimeVue コンポーネント に基づいています。グループはサポートされていません。

{
    id: "example.combo",
    name: "設定例（コンボ）",
    type: "combo",
    defaultValue: "first",
    options: [
        { text: "最初のオプション", value: "first" },
        "2 番目のオプション",
    ],
    attrs: {
        editable: true,
        filter: true,
    },
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

​

色 (Color)

これにより、ユーザーはカラーピッカーから色を選択するか、16 進数参照を入力できます。

形式には 6 桁の完全な 16 進数が必要です。3 桁の省略形は機能しません。

ColorPicker PrimeVue コンポーネント に基づいています。

{
    id: "example.color",
    name: "設定例（色）",
    type: "color",
    defaultValue: "ff0000",
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

​

画像 (Image)

これにより、ユーザーは画像をアップロードできます。

設定は data URL として保存されます。

FileUpload PrimeVue コンポーネント に基づいています。

{
    id: "example.image",
    name: "設定例（画像）",
    type: "image",
    onChange: (newVal, oldVal) => {
        console.log(`設定が ${oldVal} から ${newVal} に変更されました`);
    },
}

​

隠し (Hidden)

隠し設定は設定パネルに表示されませんが、コードから読み書きできます。

{
    id: "example.hidden",
    name: "設定例（隠し）",
    type: "hidden",
}

​

その他

​

カテゴリ

id とは別に、category フィールドを使用して設定のカテゴリを指定できます。 これにより、id を変更せずにカテゴリ分類と命名を変更でき、ユーザーがすでに設定した値が失われることを防げます。

{
    id: "example.boolean",
    name: "設定例（ブール値）",
    type: "boolean",
    defaultValue: false,
    category: ["カテゴリ名", "セクション見出し", "設定ラベル"],
}

​

ツールチップ

tooltip フィールドで追加のコンテキストヘルプを追加できます。これにより、フィールド名の後に小さな ℹ︎ アイコンが表示され、ユーザーがマウスを乗せたときにヘルプテキストが表示されます。

{
    id: "example.boolean",
    name: "設定例（ブール値）",
    type: "boolean",
    defaultValue: false,
    tooltip: "これは役立つ情報です",
}