面向电商商品的 AI 改图桌面工具,支持多种图像编辑功能。
| 功能 | 说明 | 输入 |
|---|---|---|
| 自由构图 | 根据参考图和描述重新构图生成全新画面 | 图片 + 描述 |
| 场景替换 | 保持商品不变,替换背景场景 | 图片 + 场景描述 + 可选场景参考图 |
| 商品替换 | 替换标记区域为参考商品 | 图片 + 涂抹mask + 描述 + 可选参考商品图 |
| 商品换色 | 将标记区域颜色改为目标色 | 图片 + 涂抹mask + 颜色选择 + 描述 |
| 局部重绘 | 重新生成标记区域内容 | 图片 + 涂抹mask + 描述 + 可选参考图 |
| 智能延展 | 沿指定方向自然延展图片边界 | 图片 + 方向 + 距离 |
| 图片翻译 | 将图片中的文字翻译为目标语言 | 图片 + 涂抹mask + 语言选择 |
| AI 超清 | 提升图片分辨率和清晰度 | 图片 + 分辨率选择 |
- Electron 36 — 跨平台桌面应用
- electron-vite 3 — Electron 专用构建工具
- electron-builder — 打包为 Windows Portable .exe
- React 19 + TypeScript 5.8
- Tailwind CSS v4 — 原子化样式
- shadcn/ui + Radix UI — 组件库
- Lucide React — 图标
- React Router v7 — 路由
- i18next — 中英双语国际化
- Sonner — Toast 通知
- electron-store 8 — 加密持久化存储
- sharp — 图片处理(合成、拼接、缩放、mask 生成)
- Electron net.fetch — Chromium 网络栈,支持系统代理
%APPDATA%\woo-image\
├── config.json ← 模型配置、API Key(加密存储)
└── settings.json ← 应用设置
woo-image/
├── resources/
│ └── icon.ico # 应用图标
├── src/
│ ├── main/ # Electron 主进程
│ │ ├── index.ts # 窗口创建、生命周期
│ │ ├── ipc.ts # IPC 通信注册
│ │ └── api/
│ │ ├── openai.ts # AI API 调用(多级回退)
│ │ ├── prompts.ts # 差异化系统提示词
│ │ ├── types.ts # TypeScript 类型定义
│ │ └── utils.ts # 工具函数
│ ├── preload/
│ │ └── index.ts # 预加载脚本(安全桥接)
│ └── renderer/ # React 前端
│ ├── main.tsx # 入口
│ ├── assets/
│ │ └── main.css # 全局样式 + 滚动条美化
│ ├── components/
│ │ ├── Layout.tsx # 侧边栏 + 路由布局
│ │ ├── ImageUpload.tsx # 图片上传组件
│ │ ├── ImageCanvas.tsx # 画笔涂抹组件
│ │ ├── ImageCompare.tsx # 并排对比组件
│ │ ├── ModelSelect.tsx # 模型选择下拉
│ │ ├── ExampleShowcase.tsx # 示例展示
│ │ └── ui/ # shadcn/ui 基础组件
│ ├── pages/ # 功能页面
│ │ ├── FreeComposition.tsx
│ │ ├── SceneReplace.tsx
│ │ ├── ProductReplace.tsx
│ │ ├── ProductRecolor.tsx
│ │ ├── PartialRepaint.tsx
│ │ ├── SmartExtend.tsx
│ │ ├── ImageTranslate.tsx
│ │ ├── AiUpscale.tsx
│ │ └── Settings.tsx
│ └── hooks/
│ └── useApiKey.ts # 模型配置 Hook
├── electron.vite.config.ts
├── package.json
└── tsconfig.json
- Node.js >= 18
- Windows 10/11
# 安装依赖
npm install
# 启动开发模式
npm run dev# 构建并打包为 Portable .exe
npm run pack
# 输出文件
# dist/WooImage-0.1.0.exe