@550w-tools

一个整合AIGC生产流程的WebUI工具集 🔧🧱

功能描述

该项目的核心能力

• 功能1：PromptEditor 提示词编辑器
• 功能2：ImageProcessor 图片处理器——抠图、resize、白底填充、裁剪。
• 功能3：...

Env 环境准备

• Node.js >= 14.0.0
• (可选的) tnpm >= 9.7.1
• ~~需要安装canvas-node的环境依赖~~
  • MacOS用户

    brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

  • Windows用户
    • https://github.com/Automattic/node-canvas/wiki/Installation:-Windows

如何使用

1. 全局安装/更新 @550w-tools/cli

moss update

如果当前版本不支持该命令可用下面的命令进行更新：

npm i @550w-tools/cli@latest -g

2. 命令行一键启动WebUI与Node服务

moss run

3. 浏览器打开WebUI地址（自动打开）

URL: http://127.0.0.1:5503/webapp/#/

Feature 功能

PromptEditor 提示词编辑器

用于对图片训练后生成的prompt文件进行单一/批量编辑操作。

1. 输入/选择预处理后存放图片与prompt文件的目录（存放.png/.jpg与.txt文件的目录)

2. Images栏目中选择图片

3. Prompts栏目中对单张图片的prompt内容进行编辑

支持的操作：

• 编辑内容：点击prompt，在输入框中进行编辑，编辑完成后点击其他区域或按下回车即可完成编辑。
• 删除：点击红色垃圾桶Icon进行删除。
• 新增：点击底部ADD按钮在prompt文件内容末尾新增一条prompt。
• 移动：直接拖拽prompt移动在文件内容中的顺序。

4. PromptCollection：批量编辑Prompt内容

操作与Prompts栏目中一致，但会作用于所有prompt文件。

5. SAVE: 保存

点击顶部保存按钮，即可将编辑后的内容保存至本地原文件中。

ImageProcessor 图像处理

用于对训练的图片进行裁剪、抠图、尺寸调整、添加背景底色等

1. 裁剪

// ...

2. 抠图

// ...

3. 尺寸调整

// ...

4. 填充背景色

// ...

5. 删除图片

// ...

Devlopment 开发手册

本地调试

npm run start

本地构建

npm run build

本地 commit

fie c

发布

beta版本发布（日常）

tnpm run publish:d 

正式版本发布

tnpm run publish:o

F&Q

1. npm permission denied

通常是因为npm全局路径设置不对。

sudo chown -R $USER /usr/local/bin/node_modules

2. CLI命令执行路径无权限｜修改CLI命令执行路径

# 编辑终端对应配置文件
vim ~/.bash_profile

# 末尾新增两行配置PATH环境变量
export PATH="~/.npm-global:$PATH"
export PATH="~/.npm-global/bin:$PATH"

# 使用source编译立即生效或重启终端生效
source ~/.bash_profile