Skip to content

About

Vite web version of the image long-stitching tool

Resources

Stars

1 star

Watchers

0 watching

Forks

Repository files navigation

图片长图拼接工具 Web 版

面向电商运营、设计和内容审核的生产工具。它不是展示型网站,而是每天反复打开的工作台:导入图片、整理顺序、统一宽度和边距、生成长图或切片,并在需要时使用后台托管的 AI 能力完成提示词提取、OCR 风险词排查和产品图套版。

当前产品方向是“普通客户端 + 管理后台”的局域网协作工具。普通同事只通过客户端完成生产工作;管理员在后台统一维护 API、查看费用台账、管理系统规则。普通同事不需要理解 API Key、模型、Base URL、后台端口或更新地址。

当前版本

版本:1.0.36

已完成:

  • 客户端支持名称登录,登录后显示当前用户;普通客户端不提供切换用户入口。
  • 客户端在托管模式下隐藏 API 设置、更新提示和管理入口。
  • 客户端默认自动推断后台服务地址,后台地址已收进“连接设置”,只在连接异常时作为高级项出现。
  • 登录调用后台 /api/users/login,登录后请求 /api/client/bootstrap 加载个人台账摘要和后台能力状态。
  • 服务端提供 /api/ai/prompt 和 /api/ai/image,用于代理提示词、OCR 和生图任务。
  • 普通客户端优先走本系统后台,不再要求同事填写外部模型 API Key。
  • 服务端代理读取后台保存并启用的 prompt、risk、image 三类 API 配置。
  • AI 调用成功或失败都会写入服务端台账,并绑定当前登录用户。
  • 客户端台账页读取 /api/client/ledger,只展示当前用户记录。
  • 已提供独立管理后台 admin.html,支持 API 配置、全员台账、筛选和 CSV 导出。

仍待完善:

  • 管理后台登录保护、权限控制和审计日志。
  • 后台 API 连接测试、成本规则、错误原因标准化。
  • 系统级提示词模板、风险词库和成本规则后台维护。
  • 限流、图片大小限制、任务并发限制和更完整的安全保护。

产品原则

普通用户打开客户端后,应该只需要回答一个问题:我是谁。其余连接、模型、密钥、费用归集都由系统和管理员处理。

客户端必须保持工具属性,第一屏就是登录或工作台,不做营销页。主要结构保持稳定:顶部关键操作、中央预览、图片列表、底部导出与状态反馈。

后台必须保持管理属性,优先呈现配置完整度、今日调用、失败任务、费用汇总、最近活动、API 配置和台账表格。后台可以复杂,但复杂性不能泄漏到普通客户端。

AI 是加速工具,不是最终判断者。提示词、生图、OCR 和风险词结果都必须可查看、可重试、可导出,并保留人工确认空间。

费用台账是信任机制。普通用户看到自己的记录,管理员看到全局记录;成功、失败、超时都要可追踪。

角色

普通用户:

  • 打开管理员提供的客户端地址。
  • 输入自己的名称进入工作台。
  • 导入图片、拼接长图、切片导出、批量替换、分层套版。
  • 使用后台托管的提示词、OCR 和生图能力。
  • 查看自己的 AI 调用台账。
  • 看不到 API Key、API 设置、更新配置、后台入口和其他人的台账。

管理员:

  • 打开管理后台。
  • 配置提示词 API、OCR API、生图 API。
  • 查看全员台账、筛选记录、导出 CSV。
  • 维护系统模板、风险词库、成本规则。
  • 处理连接失败、额度不足、模型异常等运维问题。

当前入口

客户端:

http://127.0.0.1:1420/

管理后台:

http://127.0.0.1:1420/admin.html

服务端 API:

http://127.0.0.1:3100/

局域网使用时,同事访问:

http://你的电脑IP:1420/

客户端会默认连接:

http://你的电脑IP:3100

只有连接失败或部署端口变更时,才需要展开登录页的“连接设置”手动修改后台地址。

核心功能

图片处理:

  • 支持 JPG、JPEG、PNG、WEBP、BMP、TIF、TIFF。
  • 支持选择图片、选择文件夹、拖拽导入、粘贴导入。
  • 支持图片排序、删除、定位预览。
  • 支持统一导出宽度,默认 790px,并可自定义。
  • 支持纯色、边缘延展、渐变融合、模糊、镜像、微阴影等间距填充。
  • 支持长图导出和按宽度切片导出。

生产增强:

  • 支持轮播分隔图和 1688 通用店招。
  • 支持批量替换同一模板中的产品图。
  • 支持分层编辑图片、文字、矩形和替换轮次。
  • 支持移动、缩放、对齐、图层顺序、混合模式和撤销。

AI 能力:

  • 提示词提取:读取参考图并生成可复用的文生图描述。
  • 一键套版:结合参考图提示词、产品图和模板规则生成新图。
  • OCR 风险词排查:识别图片文字并匹配风险词库。
  • 费用台账:记录任务类型、用户、模型、状态、费用、摘要和失败原因。

管理后台:

  • 三类 API 独立配置:提示词、OCR、生图。
  • API Key 只保存在服务端或管理员可控环境,不下发给普通客户端。
  • 全员台账支持汇总、筛选、查看和导出。
  • 后续扩展系统模板、风险词库、成本规则、公告、健康检查和审计日志。

用户流程

普通用户:

  1. 打开客户端地址。
  2. 输入名称进入工作台。
  3. 导入图片或文件夹。
  4. 调整顺序、宽度、边距、间距和预览效果。
  5. 可选:提取提示词、OCR 排查、上传产品图生成套版。
  6. 导出长图、切片或套版结果。
  7. 打开台账查看自己的 AI 调用记录。

管理员:

  1. 打开管理后台。
  2. 配置并启用提示词、OCR、生图 API。
  3. 查看配置完整度和最近任务状态。
  4. 查看、筛选、导出全员台账。
  5. 维护模板、风险词库和成本规则。
  6. 处理失败原因、额度异常和接口不可用问题。

技术结构

.
├── index.html
├── admin.html
├── package.json
├── vite.config.js
├── src
│   ├── main.js                 # 客户端入口、状态管理、业务逻辑、Canvas 渲染
│   ├── admin.js                # 管理后台入口、API 配置、全员台账
│   ├── styles.css              # 客户端样式
│   ├── admin.css               # 管理后台样式
│   ├── riskLexiconPreset.js    # 默认风险词库
│   └── assets                  # 静态资源
├── server
│   ├── index.js                # 后台 API、AI 代理、台账接口
│   └── storage.js              # 本地 JSON 数据存储
└── dist

后续复杂化时建议继续拆分:

src       # 普通客户端
admin     # 管理后台模块
server    # API 代理、配置、台账、用户会话
shared    # 客户端、后台、服务端共享常量或类型

本地启动

安装依赖:

npm.cmd install

启动客户端:

npm.cmd run dev

启动服务端:

npm.cmd run server

健康检查:

GET http://127.0.0.1:3100/api/health

服务端首次运行会自动创建:

server/data/app-data.json

该文件保存用户、后台 API 配置、台账、模板、词库版本和成本规则,属于本地运行数据,不应提交到代码仓库。

构建

npm.cmd run build

构建产物输出到 dist。

开发路线

P0:多用户与后台 API 闭环

  • 名称登录和当前用户展示,不在普通客户端提供切换用户入口。
  • 客户端隐藏设置、更新、后台入口。
  • 后台 API 代理提示词、OCR、生图。
  • 服务端写入台账,客户端只看个人台账,后台看全员台账。
  • 登录页不让普通用户填写后台地址,连接设置只作为异常处理入口。

P1:后台管理增强

  • 台账筛选、汇总、导出。
  • API 连接测试。
  • 成本规则配置。
  • 失败原因标准化。
  • 高风险操作二次确认。

P2:系统模板与风险词库

  • 后台维护系统级提示词模板。
  • 后台维护系统级风险词库。
  • 客户端默认读取系统规则,同时保留个人临时编辑能力。
  • 模板和词库增加版本号。

P3:权限与安全

  • 管理后台登录保护。
  • API Key 脱敏或加密存储。
  • 普通用户接口权限隔离。
  • 请求频率限制、任务并发限制、图片大小限制。
  • 管理员操作审计日志。

P4:体验与运维

  • 系统公告、最近任务状态、健康检查。
  • 默认导出宽度、默认间距、默认模板后台配置。
  • 数据备份与恢复说明。
  • 局域网部署指引和版本信息页。

注意事项

  • 图片处理主要在本地完成,超大图片或大批量处理会占用较多内存。
  • API Key 属于敏感信息,不能下发给普通客户端。
  • 名称登录适合局域网内部轻量协作;外网访问或费用敏感场景必须升级为账号密码、单点登录或企业身份认证。
  • 风险词排查只是辅助工具,最终仍以平台规则、法律规则和人工审核为准。
  • 修改导出逻辑后,需要验证长图、切片、批量替换和分层套版导出。
  • 修改后台代理后,需要验证个人台账隔离、管理员汇总、失败记录和 API Key 不泄露。

套版生图比例与参考图规则

  • 一键套版不是普通文生图。系统必须先判断当前图片是否有单独添加的参考图:有则只使用当前图片参考图;没有才使用一键套版中上传的全局参考图。
  • 当前原图负责风格、构图、版式、光影、背景、文字位置和生成比例;参考图只负责产品图片、产品细节、材质纹理和产品信息参考。
  • 当前图片参考图和一键套版全局参考图不能混在同一次生图请求里打包上传,避免模型同时参考两套产品信息导致结果跑偏。
  • “尺寸比例:自动匹配”必须读取当前原图宽高来推导生成画布;参考图不影响生成比例。用户选择 9:16、1:1、4:5 等固定比例时,以用户选择为准。
  • 后台 /api/ai/image 在存在参考图输入时应优先调用图片编辑能力;只有没有任何图片输入时,才允许退回普通文生图。
  • 如果生图服务商不支持图片编辑或不支持目标尺寸,应向用户展示可理解的失败原因,并提示管理员检查生图模型能力,而不是静默生成一个比例错误的结果。

局域网访问说明

  • 127.0.0.1 只代表当前这台电脑,同事不能用 http://127.0.0.1:1420/ 访问你的服务。
  • 同事应访问你的局域网 IP,例如 http://192.192.3.180:1420/。
  • 前端服务需要监听 0.0.0.0:1420,后台服务需要监听 0.0.0.0:3100。
  • 如果同事仍打不开,需要在 Windows 防火墙中允许 TCP 端口 1420 和 3100 的入站访问。

About

Vite web version of the image long-stitching tool

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages