메인 콘텐츠로 건너뛰기
사용자가 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에 적어도 하나의 .이 있으면 가장 왼쪽 부분이 설정 카테고리로 사용되고, 두 번째 부분이 섹션 제목으로 사용됩니다. 그 이상의 부분은 무시됩니다.

​
설정 읽기

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 문서에 설명된 속성을 attrs 필드에 추가하면 ComfyUI 설정에도 적용할 수 있습니다. 예를 들어, 숫자 입력에 증감 버튼을 추가하려면 다음과 같이 작성합니다: 
{
    id: "example.number",
    name: "예제 숫자 설정",
    type: "number",
    defaultValue: 0,
    attrs: {
        showButtons: true,
    },
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}

​
유형

​
부울

이것은 켜기/끄기 토글을 표시합니다. ToggleSwitch PrimeVue 컴포넌트를 기반으로 합니다. 
{
    id: "example.boolean",
    name: "예제 부울 설정",
    type: "boolean",
    defaultValue: false,
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}

​
텍스트

이것은 자유 형식 텍스트입니다. InputText PrimeVue 컴포넌트를 기반으로 합니다. 
{
    id: "example.text",
    name: "예제 텍스트 설정",
    type: "text",
    defaultValue: "Foo",
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}

​
숫자

숫자를 입력하는 데 사용됩니다. 소수점 자리를 허용하려면 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 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" },
        "내 두 번째 옵션",
    ],
    attrs: {
        editable: true,
        filter: true,
    },
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}

​
색상

사용자가 색상 피커에서 색상을 선택하거나 16진수 참조를 입력할 수 있도록 합니다. 포맷은 6자리 16진수를 요구하며, 3자리 축약형은 작동하지 않습니다. ColorPicker PrimeVue 컴포넌트를 기반으로 합니다. 
{
    id: "example.color",
    name: "예제 색상 설정",
    type: "color",
    defaultValue: "ff0000",
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}

​
이미지

사용자가 이미지를 업로드할 수 있도록 합니다. 설정은 데이터 URL로 저장됩니다. FileUpload PrimeVue 컴포넌트를 기반으로 합니다. 
{
    id: "example.image",
    name: "예제 이미지 설정",
    type: "image",
    onChange: (newVal, oldVal) => {
        console.log(`설정이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    },
}

​
숨겨진

숨겨진 설정은 설정 패널에 표시되지 않지만, 코드에서 읽고 쓸 수 있습니다. 
{
    id: "example.hidden",
    name: "예제 숨겨진 설정",
    type: "hidden",
}

​
기타

​
카테고리

설정의 카테고리화를 id와 별도로 지정할 수 있습니다. 이는 카테고리화와 이름을 변경하면서도 id를 바꾸지 않고 사용자가 이미 설정한 값을 잃지 않도록 합니다. 
{
    id: "example.boolean",
    name: "예제 부울 설정",
    type: "boolean",
    defaultValue: false,
    category: ["카테고리 이름", "섹션 제목", "설정 라벨"],
}

​
도구 설명

tooltip 필드를 통해 추가적인 상황별 도움말을 추가할 수 있습니다. 이는 필드 이름 뒤에 작은 ℹ︎ 아이콘을 추가하고, 사용자가 마우스를 갖다 대면 도움말 텍스트를 표시합니다. 
{
    id: "example.boolean",
    name: "예제 부울 설정",
    type: "boolean",
    defaultValue: false,
    tooltip: "이것은 도움이 되는 정보입니다",
}