하단 패널 탭

Bottom Panel Tabs API로 ComfyUI 하단 패널에 커스텀 탭을 추가합니다. 인터랙티브 요소, React 컴포넌트, 독립 등록을 포함합니다.

하단 패널 탭 API를 사용하면 확장 프로그램에서 ComfyUI 인터페이스의 하단 패널에 맞춤형 탭을 추가할 수 있습니다. 이는 로그, 디버깅 도구 또는 맞춤형 패널과 같은 기능을 추가하는 데 유용합니다.

​

기본 사용법

app.registerExtension({
  name: "MyExtension",
  bottomPanelTabs: [
    {
      id: "customTab",
      title: "맞춤형 탭",
      type: "custom",
      render: (el) => {
        el.innerHTML = '<div>이것은 내 맞춤형 탭 콘텐츠입니다</div>';
      }
    }
  ]
});

​

탭 구성

각 탭에는 id, title, type과 함께 렌더링 함수가 필요합니다:

{
  id: string,              // 탭의 고유 식별자
  title: string,           // 탭에 표시되는 제목
  type: string,            // 탭 유형 (보통 "custom")
  icon?: string,           // 아이콘 클래스 (선택사항)
  render: (element) => void // 탭 콘텐츠를 채우는 함수
}

render 함수는 DOM 요소를 받아 탭의 콘텐츠를 삽입해야 합니다.

​

대화형 요소 추가하기

버튼과 같은 대화형 요소를 추가할 수 있습니다:

app.registerExtension({
  name: "InteractiveTabExample",
  bottomPanelTabs: [
    {
      id: "controlsTab",
      title: "컨트롤",
      type: "custom",
      render: (el) => {
        el.innerHTML = `
          <div style="padding: 10px;">
            <button id="runBtn">워크플로 실행</button>
          </div>
        `;
        
        // 이벤트 리스너 추가
        el.querySelector('#runBtn').addEventListener('click', () => {
          app.queuePrompt();
        });
      }
    }
  ]
});

​

React 컴포넌트 사용하기

React 컴포넌트를 하단 패널 탭에 마운트할 수 있습니다:

// 확장 프로그램에서 React 종속성을 가져오기
import React from "react";
import ReactDOM from "react-dom/client";

// 간단한 React 컴포넌트
function TabContent() {
  const [count, setCount] = React.useState(0);
  
  return (
    <div style={{ padding: "10px" }}>
      <h3>React 컴포넌트</h3>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

// React 콘텐츠와 함께 확장 프로그램 등록하기
app.registerExtension({
  name: "ReactTabExample",
  bottomPanelTabs: [
    {
      id: "reactTab",
      title: "React 탭",
      type: "custom",
      render: (el) => {
        const container = document.createElement("div");
        container.id = "react-tab-container";
        el.appendChild(container);
        
        // React 컴포넌트 마운트
        ReactDOM.createRoot(container).render(
          <React.StrictMode>
            <TabContent />
          </React.StrictMode>
        );
      }
    }
  ]
});

​

독립적 등록 방법

registerExtension 외부에서도 탭을 등록할 수 있습니다:

app.extensionManager.registerBottomPanelTab({
  id: "standAloneTab",
  title: "독립적 탭",
  type: "custom",
  render: (el) => {
    el.innerHTML = '<div>이 탭은 독립적으로 등록되었습니다</div>';
  }
});