LiteGraph
Comfy UI는 LiteGraph를 기반으로 구축되었습니다.
Comfy의 많은 기능은 LiteGraph에 의해 제공되므로, 보다 복잡한 노드를 개발하는 경우 해당 리포지토리를 클론하고 doc/index.html에서 찾을 수 있는 문서를 살펴보는 것이 유용할 것입니다.
ComfyApp
app 객체(항상 import { app } from "../../scripts/app.js";로 접근 가능)는 브라우저에서 실행 중인 Comfy 애플리케이션을 나타내며, 아래에 나열된 몇 가지 유용한 속성과 함수를 포함하고 있습니다.
사용 중단됨: app나 프로토타입에 대한 함수 훅킹/몽키패치는 사용 중단되었으며 가까운 시일 내에 변경될 수 있습니다. 대신 공식 확장 훅 및 컨텍스트 메뉴 API를 사용하세요. app에 대한 함수 훅킹은 권장되지 않습니다. Comfy는 지속적으로 개발되고 있으며 핵심 동작이 변경될 수 있습니다.
app의 중요한 속성에는 다음이 포함됩니다(전체 목록은 아닙니다):
| 속성 | 내용 |
|---|
canvas | 현재 사용자 인터페이스를 나타내는 LGraphCanvas 객체입니다. 여기에는 node_over 및 selected_nodes와 같은 흥미로울 수 있는 속성이 포함되어 있습니다. |
canvasEl | DOM <canvas> 요소 |
graph | 현재 그래프를 설명하는 LGraph 객체에 대한 참조입니다 |
runningNodeId | 실행 중에 현재 실행 중인 노드입니다 |
ui | 큐, 메뉴, 대화상자와 같은 일부 UI 요소에 대한 접근을 제공합니다 |
canvas(그래픽 요소)와 graph(논리적 연결)일 것입니다.
다시 한번 말씀드리지만, 매우 많습니다. 그중 몇 가지 주요 함수는 다음과 같습니다:
| 함수 | 참고사항 |
|---|
| graphToPrompt | 그래프를 파이썬 서버로 전송할 수 있는 프롬프트로 변환합니다 |
| loadGraphData | 그래프를 로드합니다 |
| queuePrompt | 프롬프트를 큐에 제출합니다 |
| registerExtension | 이 함수는 이미 보셨죠—확장을 추가하는 데 사용됩니다 |
LGraph
LGraph 객체는 LiteGraph 프레임워크의 일부이며, 현재 그래프의 논리적 상태(노드 및 링크)를 나타냅니다.
그래프를 조작하려면 LiteGraph 문서(doc/index.html에 있으니 https://github.com/jagenjo/litegraph.js를 클론했다면)에 나와 있는 함수들을 참고하세요.
graph를 사용해 노드와 링크의 세부 정보를 얻을 수 있습니다. 예를 들어:
const ComfyNode_object_for_my_node = app.graph._nodes_by_id(my_node_id)
ComfyNode_object_for_my_node.inputs.forEach(input => {
const link_id = input.link;
if (link_id) {
const LLink_object = app.graph.links[link_id]
const id_of_upstream_node = LLink_object.origin_id
// 등등
}
});
LLink
LLink 객체는 graph.links를 통해 접근할 수 있으며, 노드 link.origin_id 출력 슬롯 link.origin_slot에서 노드 link.target_id 슬롯 link.target_slot까지의 그래프 내 단일 링크를 나타냅니다. 또한 link.type에 데이터 유형을 나타내는 문자열과 link.id를 가지고 있습니다.
LLink는 LGraphNode의 connect 메서드에서 생성됩니다(여기서 ComfyNode는 하위 클래스입니다).
직접 LLink 객체를 생성하지 마세요—대신 LiteGraph 함수를 사용하세요.
ComfyNode
ComfyNode는 LGraphNode의 하위 클래스이며, 따라서 LiteGraph 문서는 더 일반적인 작업에 도움이 됩니다. 그러나 Comfy는 LiteGraph 핵심 동작을 상당히 확장했으며, 모든 LiteGraph 기능을 사용하지도 않습니다.
다음 설명은 일반 노드에 적용됩니다.
그룹 노드, 원시 노드, 노트, 리디렉션 노드는 다른 속성을 가집니다.
ComfyNode 객체는 현재 워크플로우의 노드를 나타냅니다. 이를 활용하고 싶은 중요한 속성들이 있으며, 사용하거나 동작을 수정하기 위해 훅킹하고 싶은 함수들도 매우 많습니다.
사용 중단됨: ComfyNode나 LGraphNode의 프로토타입 메서드 훅킹은 사용 중단되었으며 가까운 시일 내에 변경될 수 있습니다. 가능한 경우 공식 확장 훅을 사용하세요. 예를 들어 컨텍스트 메뉴의 경우 getNodeMenuItems를 사용하세요. 예제는 컨텍스트 메뉴 마이그레이션 가이드를 참조하세요. console.log 명령어에 브레이크포인트를 설정하는 것이 도움이 될 수 있습니다. 이후 새 노드를 생성하면 좋아하는 디버거를 사용해 노드를 탐색할 수 있습니다.
async nodeCreated(node) {
console.log("nodeCreated")
}
| 속성 | 내용 |
|---|
bgcolor | 노드의 배경색 또는 기본값인 undefined |
comfyClass | 노드를 나타내는 파이썬 클래스 |
flags | 노드의 상태와 관련된 플래그를 포함할 수 있는 사전입니다. 특히 flags.collapsed는 접혀진 노드에 대해 true입니다. |
graph | LGraph 객체에 대한 참조입니다 |
id | 고유한 ID |
input_type | 입력 유형의 리스트(예: “STRING”, “MODEL”, “CLIP” 등). 일반적으로 파이썬 INPUT_TYPES와 일치합니다 |
inputs | 입력 리스트(아래에서 설명) |
mode | 일반적으로 0이며, 노드가 음소거되면 2로 설정되고, 바이패스되면 4로 설정됩니다. 값 1과 3은 Comfy에서 사용되지 않습니다 |
order | 실행 순서에서 노드의 위치입니다. 프롬프트가 제출될 때 LGraph.computeExecutionOrder()에 의해 설정됩니다 |
pos | 캔버스 상의 노드의 [x,y] 위치 |
properties | "S&R용 노드 이름"을 포함한 사전이며, LiteGraph에서 사용됩니다 |
properties_info | properties에 있는 항목들의 유형과 기본값입니다 |
size | 캔버스 상의 노드의 너비와 높이 |
title | 표시 제목 |
type | 노드 클래스의 고유한 이름(파이썬에서 가져온) |
widgets | 위젯 리스트(아래에서 설명) |
widgets_values | 위젯의 현재 값을 담은 리스트 |
입력, 출력, 위젯
| 함수 | 참고사항 |
|---|
| 입력 / 출력 | 대부분의 함수는 동일한 이름의 출력 메서드를 가지고 있습니다: s/In/Out/ |
addInput | 이름과 유형으로 새로운 입력을 생성합니다 |
addInputs | addInput의 배열 버전 |
findInputSlot | 입력 이름으로부터 슬롯 인덱스를 찾습니다 |
findInputSlotByType | 유형과 일치하는 입력을 찾습니다. 우선순위 옵션을 지정하거나 무료 슬롯만 사용할 수도 있습니다 |
removeInput | 슬롯 인덱스로 삭제합니다 |
getInputNode | 이 입력에 연결된 노드를 가져옵니다. 출력 equivalent는 getOutputNodes이며 리스트를 반환합니다 |
getInputLink | 이 입력에 연결된 LLink을 가져옵니다. 출력 equivalent는 없습니다 |
| 위젯 | |
addWidget | 표준 Comfy 위젯을 추가합니다 |
addCustomWidget | 맞춤형 위젯을 추가합니다(‘getComfyWidgets’ 훅에서 정의됨) |
addDOMWidget | DOM 요소로 정의된 위젯을 추가합니다 |
convertWidgetToInput | ‘isConvertableWidget’(‘widgetInputs.js’에 있음)에 의해 허용되는 경우 위젯을 입력으로 변환합니다 |
| 함수 | 참고사항 |
|---|
connect | 이 노드의 출력을 다른 노드의 입력에 연결합니다 |
connectByType | 출력을 다른 노드에 유형을 지정해 연결합니다 - 첫 번째 일치하는 슬롯에 연결됩니다 |
connectByTypeOutput | 입력을 다른 노드 출력에 유형별로 연결합니다 |
disconnectInput | 입력에 연결된 링크를 제거합니다(이름이나 인덱스로 지정) |
disconnectOutput | 특정 노드의 입력에서 출력을 연결 해제합니다 |
onConnectionChange | 각 노드에서 호출됩니다. side==1일 경우 이 노드의 입력입니다 |
onConnectInput | 연결이 이루어지기 전 호출됩니다. 만약 이 함수가 false를 반환하면 연결이 거부됩니다 |
| 함수 | 참고사항 |
|---|
setDirtyCanvas | 포그라운드(노드) 및/또는 백그라운드(링크 및 이미지)가 다시 그려져야 한다고 지정합니다 |
onDrawBackground | 배경을 그리기 위해 CanvasRenderingContext2D 객체와 함께 호출됩니다. Comfy에서 이미지를 렌더링하는 데 사용됩니다 |
onDrawForeground | 노드를 그리기 위해 CanvasRenderingContext2D 객체와 함께 호출됩니다. |
getTitle | 표시될 제목입니다. |
collapse | 노드의 접힌 상태를 전환합니다. |
collapse는 이름이 잘못 지어졌습니다. 접힌 상태를 _전환_합니다.
불린 매개변수를 받아 node.collapsable === false를 무시할 수 있습니다.
| 함수 | 참고사항 |
|---|
changeMode | 노드를 바이패스(mode == 4) 또는 비바이패스(mode == 0)로 설정하는 데 사용됩니다 |
입력과 위젯
입력과 위젯은 데이터를 노드에 입력하는 두 가지 방법을 나타냅니다. 일반적으로 위젯은 입력으로 변환될 수 있지만, 모든 입력이 위젯으로 변환될 수 있는 것은 아닙니다(많은 데이터 유형은 UI 요소를 통해 입력될 수 없기 때문입니다).
node.inputs는 현재 입력의 리스트이며(노드 왼쪽에 색깔 있는 점들), .name, .type, .link(연결된 LLink에 대한 참조, app.graph.links에 있음)를 지정합니다.
입력이 변환된 위젯인 경우, .widget에 이제 비활성화된 위젯에 대한 참조도 보관됩니다.
node.widgets는 위젯의 전체 리스트이며, 입력으로 변환되었는지 여부와 관계없이 포함됩니다. 위젯에는 다음 속성이 있습니다:
| 속성/함수 | 참고사항 |
|---|
callback | 위젯 값이 변경될 때 호출되는 함수 |
last_y | 노드 내 위젯의 수직 위치 |
name | 노드 내에서 고유한 위젯 이름 |
options | 파이썬 코드에서 지정된 대로(기본값, 최소값, 최대값 등) |
type | 위젯 유형의 이름(아래 참조)을 소문자로 표기합니다 |
value | 현재 위젯 값입니다. 이는 get 및 set 메서드를 갖는 속성입니다 |
위젯 유형
app.widgets는 현재 등록된 위젯 유형의 사전이며, 유형의 이름을 대문자로 키로 사용합니다. Comfy에 내장된 위젯 유형에는 직관적인 BOOLEAN, INT, FLOAT뿐만 아니라 STRING(단일 줄과 다중 줄 두 가지 형태), 드롭다운 선택을 위한 COMBO, 이미지 로드 노드에 사용되는 IMAGEUPLOAD가 있습니다.
맞춤형 위젯 유형은 확장에서 getCustomWidgets 메서드를 제공하여 추가할 수 있습니다.
연결된 위젯
위젯은 연결될 수도 있습니다—예를 들어 seed와 control_after_generate의 내장 동작입니다. 연결된 위젯은 .type = 'base_widget_type:base_widget_name'를 가집니다; 따라서 control_after_generate는 유형이 int:seed일 수 있습니다.
프롬프트
Comfy에서 큐 프롬프트 버튼을 누르면 app.graphToPrompt() 메서드가 호출되어 현재 그래프를 서버로 전송할 수 있는 프롬프트로 변환합니다.
app.graphToPrompt는 두 가지 속성인 output와 workflow를 가진 객체를 반환합니다.
output
prompt.output는 그래프의 각 노드의 node_id에서 두 가지 속성을 가진 객체로 매핑됩니다.
prompt.output[node_id].class_type, 파이썬 코드에서 정의된 맞춤형 노드 클래스의 고유한 이름prompt.output[node_id].inputs, 각 입력(또는 위젯)의 값을 입력 이름에서 다음으로 매핑한 객체로 포함합니다:
- 선택된 값이 위젯인 경우, 또는
- 입력에 연결된 링크가 있는 경우 (
upstream_node_id, upstream_node_output_slot)를 포함한 배열, 또는
- 위젯이 입력으로 변환되었으나 연결되지 않은 경우 undefined
- 기타 연결되지 않은 입력은
.inputs에 포함되지 않습니다
연결된 입력을 설명하는 배열의 upstream_node_id는 정수 대신 문자열로 표현됩니다.
workflow
prompt.workflow에는 다음 속성이 포함됩니다:
config - 추가 구성 옵션의 사전(기본값은 비어있음)extra - 워크플로우에 대한 추가 정보를 포함한 사전. 기본적으로 다음을 포함합니다:
extra.ds - 현재 그래프의 뷰를 설명합니다(scale 및 offset)
groups - 워크플로우의 모든 그룹last_link_id - 마지막으로 추가된 링크의 IDlast_node_id - 마지막으로 추가된 노드의 IDlinks - 그래프의 모든 링크 리스트. 각 항목은 다섯 개의 정수와 하나의 문자열로 구성된 배열입니다:
- (
link_id, upstream_node_id, upstream_node_output_slot, downstream_node_id, downstream_node_input_slot, 데이터 유형)
nodes - 그래프의 모든 노드 리스트. 각 항목은 위에서 설명한 노드 속성의 부분 집합을 매핑한 객체입니다:
- 다음 속성 포함:
flags, id, inputs, mode, order, pos, properties, size, type, widgets_values
- 또한, 출력이 없는 노드를 제외하고
outputs 속성이 있으며, 각 출력은 다음을 포함합니다:
name - 출력의 이름type - 출력의 데이터 유형links - 이 출력에서 나오는 모든 링크의 link_id 리스트(연결이 없으면 빈 리스트 또는 null일 수 있음)shape - 출력을 그리는 데 사용되는 도형(기본값은 점인 3)slot_index - 출력의 슬롯 번호
version - LiteGraph 버전 번호(작성 당시 0.4)
nodes.output는 출력이 없는 노드에서는 존재하지 않으며, 빈 리스트가 아닙니다.
