SDFX

用于构建和分享具有精美UI的AI应用的终极无代码平台。加入我们的Discord服务器社区，获取最新消息、视频教程和演示应用。

SDFX截图

SDFX使复杂工作流程的简单用户界面创建成为可能。SDFX应用结合了Comfy工作流和用户界面。描述工作流的JSON被额外的应用程序和作者元信息以及UI组件与节点小部件之间的关联所丰富。

特性
截图
SDFX应用JSON结构指南
安装
运行
已在本地使用ComfyUI的用户安装指南

为什么选择SDFX?

本项目最初是为了满足来自A1111（基于表单的UI）和ComfyUI（基于图形节点）这两个具有不同愿景的社区用户的需求而创建的。通过SDFX，我们旨在融合两个世界的优点，而没有缺点。例如，SDFX允许创建复杂的图形（就像在ComfyUI中那样），但同时覆盖一个更简单、高级的UI（如基于表单的界面，具有令人难以置信的UI）。因此，理论上，有人可以用SDFX重新创建A1111并在线分享JSON。

这是一个初步草案，还有很多工作要做（主要是即将发布的App Creator）。一些人对我们失去了信心，甚至称我们为虚拟软件。事实上，正如你浏览源代码所看到的，SDFX需要大量的工作。它是由一个独立开发者创建的，现在团队正在壮大。我们尝试做正确的事情，只专注于我们最擅长的领域：使用现代前端技术栈进行UI和产品设计。因此，我们100%依赖Comfy的后端，使SDFX与ComfyUI完全兼容。然而，安装ComfyUI并不是必需的，因为一切都被抽象化了。我们还努力简化安装过程；在大多数情况下，你只需要双击setup.bat / setup.sh并按照向导进行操作。

我们希望你会喜欢它，我们很高兴与你分享我们的愿景和这个仓库，希望它能为你的许多贡献铺平道路，进一步推进开源AI领域的发展。

特性

在复杂工作流之上构建和分享用户友好的应用
与ComfyUI及其所有功能100%兼容
可以与你现有的Comfy安装一起工作（使用我们的SDFXBridgeForComfy自定义节点）
使用typescript几乎从头重构的LiteGraph
动画图形导航
节点书签和高级图形搜索
闪电般快速的UI实例化和漂亮的高级组件（比Gradio快450倍）
UI调试器（目前还很初级）
原生自定义节点管理器（感谢Dr.Lt.Data）
导出和分享应用及模板（即将推出群组节点导出）
高级基于图层的图像和蒙版编辑器（正在进行中）
高级检查点选择器和画廊
高级输入图像选择器
现代超快前端技术栈（vitejs、vuejs、electron）
可编译为原生应用（Windows、Linux、Mac）或网页应用
极易维护和添加新功能

截图

图形视图

SDFX截图

应用视图

提示词时间线组件

SDFX截图

UI调试器

SDFX截图

节点书签

SDFX截图

节点管理器

SDFX截图

SDFX应用JSON结构指南

欢迎使用SDFX应用的JSON结构指南。以下是为希望理解和使用JSON格式创建用户友好UI的开发者提供的全面概述。我们的目标是确保清晰易用，以便您能够自信地集成和交换SDFX应用。

SDFX应用的基本JSON结构：

{
"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`: "SD15的时间线"
- `icon`: null（应更新为512x512图像的链接或base64 URL）
- `keywords`: "时间线, SD15, 超分辨率, LCM"
- `author`: "SDFX"
- `license`: "MIT"
- `url`: "https://sdfx.ai"

应用类型

type: 指定为"sdfx"，此键将应用标识为SDFX应用，同时保持与ComfyUI的兼容性。这意味着SDFX应用可以拖放到ComfyUI上，反之亦然。

UI映射结构

mapping: 指定UI结构。在映射中，您可能会发现以下结构来描述具有检查点加载器的Tab组件，完全兼容Tailwind CSS类：

{
"label": "生成",
"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": "区块1",
"class": "leftview w-80",
"component": "div",
"childrin": [
{
"label": "检查点",
"showLabel": true,
"type": "control",
"component": "ModelPicker",
"target": {
"nodeId": 4,
"nodeType": "CheckpointLoaderSimple",
"widgetNames": ["ckpt_name"],
"widgetIdxs": [0]
}
}
]
}
]
}
]
}

LiteGraph键

剩余的键是用于描述工作流的标准LiteGraph属性。

用于映射的UI组件

开发者可以利用丰富的UI组件集来创建用户界面。以下是可以使用和自定义的组件列表，这些组件与VueJS和Tailwind CSS兼容：

Button
DragNumber
ImageLoader
Input
ModelPicker
Number
Preview
Prompt
PromptTimeline
Selector
Slider
TextArea
Toggle
BoxDimensions
BoxSeed

此外，HTML元素如div、p、ul、li、img、iframe、video等可用于丰富用户界面。

对于布局和结构设计，SplitPane、SplitH、SplitV、Tab、TabBox、TabBar和ToggleSettings等元素提供了进一步的自定义选项。

使用VueJS和Tailwind CSS创建新组件的简便性是无与伦比的，允许快速开发和高质量的用户界面设计。随着SDFX朝着开源发布迈进，这份指南将对期待参与专业和以用户为中心平台的开发者来说是无价的。

享受使用SDFX创建的过程，让JSON结构的简洁性和强大功能提升您的应用开发流程。

即将推出的功能：SDFX应用创建器

注意： 目前，设计SDFX应用和将UI组件映射到节点参数的过程是手动的。我们理解其中涉及的复杂性，并很高兴地宣布SDFX应用创建器即将发布。

SDFX应用创建器将通过引入具有拖放功能的可视化设计界面来让您创建UI映射。这将大大简化将UI控件与工作流图中相应节点参数连接的过程。敬请期待此功能。

安装

确保您的系统满足以下要求：

Node.js 版本 18.9.1
npm 版本 8.19.1
Python 3.11
Git

Windows

git clone https://github.com/sdfxai/sdfx.git
cd sdfx

然后打开 setup.bat 安装依赖项

错误提示没有Python，但已安装？

一个常见的错误是在安装过程中忘记勾选将Python添加到PATH的选项，因为它在安装向导中通常是默认未选中的。确保将Python添加到系统的环境变量中以顺利运行脚本。

SDFX截图

Linux/MacOs

git clone https://github.com/sdfxai/sdfx.git
cd sdfx
./setup.sh

手动安装

点击展开

要进行手动安装，请按以下步骤操作：

安装前端依赖项： 导航到SDFX的src目录并安装npm依赖项：

cd src
npm install
cd ..

克隆并安装ComfyUI： 将ComfyUI仓库克隆到SDFX的根目录从ComfyUI GitHub并按照readme中提供的安装说明安装ComfyUI依赖项。
添加自定义节点SDFXBridgeForComfyUI 按照自定义节点SDFXBridgeForComfyUI仓库中的说明将其添加到您的ComfyUi custom_nodes文件夹。
创建配置文件： 在项目根目录创建一个名为sdfx.config.json的文件。按照此处提供的说明根据您的需求构建配置文件。
运行启动ComfyUI 然后使用以下命令启动SDFX：

cd src
npm run start