특징 | 스크린샷 | SDFX 앱 가이드 | 설치 | 달리다
아름다운 UI로 AI 앱을 구축하고 공유할 수 있는 최고의 노코드 플랫폼입니다.
최신 뉴스, 비디오 튜토리얼 및 데모 앱을 보려면 Discord Server 커뮤니티에 가입하세요.
SDFX를 사용하면 복잡한 워크플로우를 위한 간단한 사용자 인터페이스를 생성할 수 있습니다. SDFX 애플리케이션은 Comfy 워크플로와 사용자 인터페이스를 결합합니다. 워크플로를 설명하는 JSON은 애플리케이션과 해당 작성자에 대한 추가 메타 정보는 물론 UI 구성 요소와 노드 위젯 간의 연결로 강화됩니다.
특징
스크린샷
SDFX 애플리케이션 JSON 구조 가이드
설치
달리다
이미 ComfyUI를 로컬에서 사용하고 있는 사용자를 위한 설치
이 프로젝트는 원래 서로 다른 비전을 가진 두 커뮤니티인 A1111(폼 기반 UI)과 ComfyUI(그래프 노드 기반) 사용자의 요구를 충족하기 위해 만들어졌습니다. SDFX를 통해 우리는 단점 없이 두 세계의 장점을 병합하는 것을 목표로 했습니다. 예를 들어 SDFX를 사용하면 복잡한 그래프(ComfyUI에서와 마찬가지로)를 생성할 수 있지만 더 간단하고 높은 수준의 UI(예: 놀라운 UI가 포함된 양식 기반 인터페이스)를 오버레이할 수 있습니다. 따라서 이론적으로 누군가 SDFX로 A1111을 다시 생성하고 JSON을 온라인으로 공유할 수 있습니다.
이는 초기 초안이므로 아직 할 일이 많습니다(주로 곧 출시될 App Creator). 어떤 사람들은 우리에 대한 믿음을 잃었고 심지어 우리를 증기라고 부르기까지 했습니다. 소스 코드를 살펴보면 알 수 있듯이 실제로 SDFX에는 상당한 양의 작업이 필요했습니다. 1인 개발자가 만들었고, 지금은 팀이 성장하고 있습니다. 우리는 우리가 가장 잘하는 일, 즉 최신 프런트엔드 스택을 갖춘 UI와 제품 디자인에만 초점을 맞춰 올바른 일을 하려고 노력했습니다. 따라서 우리는 Comfy의 백엔드에 100% 의존하여 SDFX가 ComfyUI와 완벽하게 호환되도록 만듭니다. 그러나 모든 것이 추상화되어 있으므로 ComfyUI를 설치할 필요는 없습니다. 또한 설치 과정을 단순화하기 위해 노력했습니다. 대부분의 경우 setup.bat / setup.sh를 두 번 클릭하고 마법사를 따르기만 하면 됩니다.
우리는 여러분이 좋아하길 바라며, 우리의 비전과 이 리포지토리를 여러분과 공유하게 되어 매우 기쁩니다. 여러분이 오픈 소스 AI 공간의 발전을 위해 많은 기여를 할 수 있는 기반이 되기를 바랍니다.
SDFX 애플리케이션용 JSON 구조 가이드에 오신 것을 환영합니다. 다음은 SDFX로 사용자 친화적인 UI를 만들기 위해 JSON 형식을 이해하고 활용하려는 개발자를 위한 포괄적인 개요입니다. 우리의 목표는 명확성과 사용 편의성을 보장하여 SDFX 앱을 자신있게 통합하고 교환할 수 있도록 하는 것입니다.
{
"name" : " SDFX Timeline SD15 " ,
"meta" : {},
"type" : " sdfx " ,
"mapping" : {
"leftpane" : [],
"mainpane" : [],
"rightpane" : []
},
"version" : 0.4 ,
"last_node_id" : 287 ,
"last_link_id" : 569 ,
"nodes" : [],
"links" : [],
"groups" : [],
"config" : {},
"extra" : {}
}
name
: 애플리케이션에 할당하는 이름입니다.meta
: 이 키에는 애플리케이션에 대한 필수 세부 정보가 들어 있습니다. 예를 들면 다음과 같습니다. - ` version ` : "0.4.1"
- ` description ` : "Timeline for SD15"
- ` icon ` : null (This should be updated with a link to a 512x512 image, or a base64 URL)
- ` keywords ` : "timeline, SD15, upscaler, LCM"
- ` author ` : "SDFX"
- ` license ` : "MIT"
- ` url ` : " https://sdfx.ai "
type
: "sdfx"
로 지정된 이 키는 ComfyUI와의 호환성을 유지하면서 앱을 SDFX 애플리케이션으로 식별합니다. 즉, SDFX 앱을 ComfyUI로 끌어서 놓을 수 있고 그 반대로도 가능합니다.mapping
: UI 구조를 지정합니다. 매핑 내에서 Tailwind CSS 클래스와 완벽하게 호환되는 체크포인트 로더가 있는 Tab 구성 요소를 설명하는 다음 구조를 찾을 수 있습니다. {
"label": "Generation",
"component": "Tab",
"class": "p-4 lg : p-8 xl : p-10 overflow-y-scroll",
"childrin": [
{
"component": "div",
"class": "flex justify-between space-x-4 lg : space-x-8 ",
"childrin": [
{
"label": "Section 1",
"class": "leftview w-80",
"component": "div",
"childrin": [
{
"label": "Checkpoint",
"showLabel": true,
"type": "control",
"component": "ModelPicker",
"target": {
"nodeId": 4,
"nodeType": "CheckpointLoaderSimple",
"widgetNames": [ "ckpt_name" ] ,
"widgetIdxs": [ 0 ]
}
}
]
}
]
}
]
}
개발자는 사용자 인터페이스를 생성하기 위해 다양한 UI 구성요소 세트를 활용할 수 있습니다. 다음은 VueJS 및 Tailwind CSS로 사용하고 맞춤설정할 수 있는 사용 가능한 구성 요소 목록입니다.
Button
DragNumber
ImageLoader
Input
ModelPicker
Number
Preview
Prompt
PromptTimeline
Selector
Slider
TextArea
Toggle
BoxDimensions
BoxSeed
또한 div
, p
, ul
, li
, img
, iframe
, video
등과 같은 HTML 요소를 사용하여 사용자 인터페이스를 풍부하게 할 수 있습니다.
레이아웃 및 구조 디자인의 경우 SplitPane
, SplitH
, SplitV
, Tab
, TabBox
, TabBar
및 ToggleSettings
와 같은 요소는 추가 사용자 정의를 제공합니다.
VueJS 및 Tailwind CSS를 사용하면 새로운 구성 요소를 쉽게 만들 수 있어 빠른 개발과 고품질 사용자 인터페이스 디자인이 가능합니다. SDFX가 오픈 소스 릴리스로 전환함에 따라 이 가이드는 전문적이고 사용자 중심적인 플랫폼을 사용하기를 기대하는 개발자에게 매우 귀중한 자료가 될 것입니다.
SDFX로 창작을 즐기고 JSON 구조의 단순성과 강력함을 통해 애플리케이션 개발 프로세스를 향상해 보세요.
참고: 현재 SDFX 애플리케이션을 디자인하고 UI 구성 요소를 노드 매개 변수에 매핑하는 프로세스는 수동입니다. 우리는 관련된 복잡성을 이해하고 있으며 SDFX App Creator의 출시가 곧 임박했음을 발표하게 되어 기쁘게 생각합니다.
SDFX App Creator를 사용하면 드래그 앤 드롭 기능을 갖춘 시각적 디자인 인터페이스를 도입하여 UI 매핑을 만들 수 있습니다. 이렇게 하면 UI 컨트롤을 워크플로 그래프의 해당 노드 매개변수와 연결하는 프로세스가 크게 단순화됩니다. 이 기능을 계속 지켜봐 주시기 바랍니다.
시스템이 다음 요구 사항을 충족하는지 확인하십시오.
git clone https://github.com/sdfxai/sdfx.git
cd sdfx
그런 다음 setup.bat
열어 종속성을 설치합니다.
git clone https://github.com/sdfxai/sdfx.git
cd sdfx
./setup.sh
수동 설치를 수행하려면 다음 단계를 따르십시오.
프런트엔드 종속성을 설치합니다.
SDFX의 src
디렉터리로 이동하여 npm 종속 항목을 설치합니다.
cd src
npm install
cd ..
ComfyUI 복제 및 설치:
ComfyUI GitHub에서 ComfyUI 저장소를 SDFX의 루트 디렉터리에 복제하고 Readme에 제공된 설치 지침에 따라 ComfyUI 종속성을 설치합니다.
사용자 정의 노드 SDFXBridgeForComfyUI 추가
사용자 정의 노드 SDFXBridgeForComfyUI 저장소의 지침에 따라 이를 ComfyUi custom_nodes 폴더에 추가합니다.
구성 파일 생성:
프로젝트 루트에 sdfx.config.json
이라는 파일을 만듭니다. 요구 사항에 따라 구성 파일을 작성하려면 여기에 제공된 지침을 따르십시오.
달리다
ComfyUI를 시작한 다음 다음을 사용하여 SDFX를 시작합니다.
cd src
npm run start
컴퓨터에 이미 ComfyUI가 설치되어 있는 경우 다음 단계에 따라 SDFX를 통합하세요.
ComfyUI custom_node 경로에서 SDFXBridgeForComfyUI custom_node를 복제합니다.
git clone https://github.com/sdfxai/SDFXBridgeForComfyUI.git
자세한 지침은 ComfyUI README의 공식 SDFX를 참조하세요.
프런트엔드 종속성을 설치하고 실행합니다.
cd src
npm install
npm run start
run.bat
(Linux/MacOs의 경우 ./run.sh
)를 사용하여 SDFX 앱 실행