概述

为了方便不熟悉代码的用户直观体验DataFlow算子和流水线的设计，我们精心开发了前后端完备的DataFlow—WebUI，技术栈使用Vue+FastAPI作为前后端，后端包装了DataFlow Python库的算子和Pipeline并通过Ray运行具体任务。并且，DataFlow-WebUI可以作为开源项目，供您开发Workflow搭建类的框架借鉴与参考。

特点

1. 服务于DataFlow，内置DataFlow流水线的功能，且内置样例数据集，安装后可直接体验。
2. 可以通过拖拉拽等方式在画布上直观编排DataFlow算子，组织成流水线并运行。并随时观察执行状态与下载运行后的数据。
3. 目前只支持API部署的大模型后端，如果本地模型可以先通过vLLM或者SGLang部署服务后，配置调用API访问。
4. 作为科研开源项目，为保证简洁性与便于维护，没有设置用户管理、多并发队列等面向业务的功能，主要服务于本地部署和体验。

使用方式

首先你需要按照安装教程安装DataFlow主仓库，安装好后，直接执行如下命令即可启动DataFlow网页界面：

dataflow webui

也可以手动修改端口和url等配置，也可以手动使用本地zip或者解压后的路径来避免网络下载WebUI组件，具体指令可通过-h来查看

dataflow webui -h

随后，就会自动从github release中下载最新发行版的DataFlow-Webui并在本地解压部署启动。当部署完成后，应该会自动打开浏览器。如果没有打开的话，可以手动访问http://localhost:<port>/来体验网页。

关于如何使用，我们提供了教程文档，具体请参考：

• 中文教程：https://wcny4qa9krto.feishu.cn/wiki/F4PDw76uDiOG42k76gGc6FaBnod
• English Document：https://wcny4qa9krto.feishu.cn/wiki/SYELwZhh9ixcNwkNRnhcLGmWnEg

特别的，如果你对具体的前后端实现，于自动化release的Github Action配置感兴趣的话，想要看源码，请参考：https://github.com/OpenDCAI/DataFlow-webui

结合DataFlow-Ecosystem扩展WebUI算子库

上一节中实现的DataFlow-Extension算子库，可以通过注册的方式将其引入到WebUI中使用。

首先在下载并解压后的DataFlow-WebUI路径下找到backend/app/core/config.py文件，在其中的_DATAFLOW_EXTENSIONS添加DataFlow-Extension的Python包名字符串，并确保你已经在当前的python环境中安装了该包。比如我自定义的包名为df_sunnyhaze，则应该改为：

    # Please input your custom DataFlow extensions here, the system will try to dynamically load them at runtime
    _DATAFLOW_EXTENSIONS = [
        "df_sunnyhaze"
    ]

可以导入多种依赖包，添加后重启WebUI服务，就可以在WebUI的算子库中看到DataFlow-Extension中的算子了。