docs: Add professional README, LICENSE, and CHANGELOG
- README.md: Standard format with badges, installation, usage - LICENSE: MIT license - CHANGELOG.md: Keep a Changelog format
This commit is contained in:
InpaintRegionEditor Dev
+26
-61
@@ -1,70 +1,35 @@
|
||||
# 开发日志
|
||||
# Changelog
|
||||
|
||||
## 2026-02-27
|
||||
All notable changes to this project will be documented in this file.
|
||||
|
||||
### 会话概述
|
||||
ULW 头脑风暴会话，实现 ComfyUI InpaintRegionEditor 自定义节点。
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
### 完成的工作
|
||||
## [Unreleased]
|
||||
|
||||
1. **需求分析**
|
||||
- 理解遮罩 vs 选区的概念
|
||||
- 遮罩：定义重绘区域
|
||||
- 选区：定义参考区域（大模型重绘时参考）
|
||||
- 约束：选区必须 >= 遮罩
|
||||
### Added
|
||||
- Initial implementation of InpaintRegionEditor node
|
||||
- Photopea iframe integration for image editing
|
||||
- Right-click menu "Open in Photopea" on node
|
||||
- Load image + mask to Photopea (mask as layer mask)
|
||||
- Export image + mask from Photopea
|
||||
- Region size presets (512×512, 1024×1024, etc.)
|
||||
- PostMessage API with origin verification for security
|
||||
|
||||
2. **后端实现** (`nodes.py`)
|
||||
- 图像输入 + 选区预设（512x512, 1024x1024等）
|
||||
- 输出：图像、遮罩、选区坐标
|
||||
- 自动计算选区位置（居中于遮罩）
|
||||
### Technical Details
|
||||
- Backend: Python node with image upload and region presets
|
||||
- Frontend: Photopea iframe with postMessage communication
|
||||
- Security: Origin-verified messages (only from photopea.com)
|
||||
|
||||
3. **前端实现** (`web/extension.js`)
|
||||
- 右键菜单 "Open in Photopea"
|
||||
- Photopea iframe 全屏编辑器
|
||||
- 图像 + 蒙版双向同步
|
||||
- postMessage 通信（带 origin 验证）
|
||||
### Known Issues
|
||||
- Layer mask export script needs real-world testing
|
||||
- Large images may have performance issues
|
||||
- First Photopea load requires internet (~10MB)
|
||||
|
||||
### 技术决策
|
||||
## [0.1.0] - 2026-02-27
|
||||
|
||||
| 决策 | 选择 | 原因 |
|
||||
|------|------|------|
|
||||
| 节点模式 | Classic | 更多样例，更稳定 |
|
||||
| 编辑器 | Photopea iframe | 免费、功能完整、PS兼容 |
|
||||
| 通信 | postMessage API | Photopea 官方支持 |
|
||||
### Added
|
||||
- Initial release
|
||||
- Basic Photopea integration
|
||||
- Mask loading/saving functionality
|
||||
|
||||
### 关键代码片段
|
||||
|
||||
**Photopea 通信：**
|
||||
```javascript
|
||||
// 安全验证 origin
|
||||
if (event.origin !== "https://www.photopea.com") return;
|
||||
|
||||
// 打开图像
|
||||
await postMessage('app.open("' + base64 + '", null, false);');
|
||||
|
||||
// 导出图像
|
||||
await postMessage('app.activeDocument.saveToOE("png");');
|
||||
```
|
||||
|
||||
**蒙版作为图层蒙版加载：**
|
||||
```javascript
|
||||
// 打开蒙版作为新图层，然后转换为图层蒙版
|
||||
await postMessage('app.open("' + maskBase64 + '", null, true);');
|
||||
// 复制到图层蒙版...
|
||||
```
|
||||
|
||||
### 待解决问题
|
||||
|
||||
1. 图层蒙版导出脚本需要实际测试
|
||||
2. 大图像可能有性能问题
|
||||
3. Photopea 首次加载需要网络
|
||||
|
||||
### Git 提交
|
||||
|
||||
- `cf0f8e4`: Initial commit
|
||||
|
||||
### 下一步
|
||||
|
||||
1. 测试完整工作流
|
||||
2. 修复可能的 bug
|
||||
3. 优化用户体验
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2026 ComfyUI InpaintRegionEditor Contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -1,84 +1,83 @@
|
||||
# ComfyUI InpaintRegionEditor
|
||||
# ComfyUI Inpaint Region Editor
|
||||
|
||||
增强版遮罩编辑器，支持 Photopea 集成和可配置重绘区域。
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
[](https://github.com/comfyanonymous/ComfyUI)
|
||||
|
||||
## 功能特性
|
||||
A ComfyUI custom node that integrates [Photopea](https://www.photopea.com/) (a free online Photoshop alternative) for advanced inpaint editing with mask support.
|
||||
|
||||
- 🎨 **Photopea 集成**：完整 Photoshop 功能（液化、仿制图章、滤镜等）
|
||||
- 📐 **可配置选区**：预设尺寸（512×512 SD、1024×1024 SDXL 等）+ 自定义
|
||||
- 🎯 **自动定位**：选区自动居中于遮罩
|
||||
- ✅ **约束验证**：选区必须包含遮罩
|
||||
## Features
|
||||
|
||||
## 概念说明
|
||||
- 🎨 **Full Photopea Integration** - Complete Photoshop-like editing capabilities
|
||||
- 📐 **Region Presets** - Pre-configured sizes for SD (512×512), SDXL (1024×1024)
|
||||
- 🔄 **Bidirectional Sync** - Loads and saves both images and masks
|
||||
- 🎭 **Layer Mask Support** - Masks are loaded as Photopea layer masks
|
||||
|
||||
| 概念 | 目的 | 作用 |
|
||||
|------|------|------|
|
||||
| **遮罩 (Mask)** | 定义重绘区域 | 重绘完成后只在遮罩内合成新内容 |
|
||||
| **选区 (Region)** | 定义参考区域 | 大模型重绘时参考这个区域内的原图内容 |
|
||||
## Installation
|
||||
|
||||
**关键约束**：选区必须 ≥ 遮罩（选区必须完全包含遮罩）
|
||||
|
||||
## 安装
|
||||
### Method 1: ComfyUI Manager (Recommended)
|
||||
Search for "Inpaint Region Editor" in ComfyUI Manager.
|
||||
|
||||
### Method 2: Manual Installation
|
||||
```bash
|
||||
cd ComfyUI/custom_nodes
|
||||
git clone https://github.com/yourname/ComfyUI-InpaintRegionEditor.git
|
||||
git clone https://github.com/YOUR_USERNAME/ComfyUI-InpaintRegionEditor.git
|
||||
```
|
||||
|
||||
## 使用方法
|
||||
Restart ComfyUI.
|
||||
|
||||
1. 添加 "Inpaint Region Editor" 节点
|
||||
2. 上传图像
|
||||
3. 右键点击节点 → "🎨 Open in Photopea"
|
||||
4. 在 Photopea 中：
|
||||
- 编辑图像（液化、仿制图章等）- 可选
|
||||
- 使用选区工具绘制遮罩（要重绘的区域）
|
||||
5. 点击 "📐 从选区获取遮罩" → 点击 "💾 保存到节点"
|
||||
6. 选择选区尺寸（预设或自定义）
|
||||
7. 执行工作流
|
||||
## Usage
|
||||
|
||||
## 节点输出
|
||||
1. Add the **Inpaint Region Editor** node
|
||||
2. Upload an image
|
||||
3. Right-click the node → **"Open in Photopea"**
|
||||
4. Edit your image and create/edit the mask
|
||||
5. Click **"Save Image and Mask"**
|
||||
|
||||
| 输出 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| `image` | IMAGE | 编辑后的图像 |
|
||||
| `mask` | MASK | 遮罩（重绘区域） |
|
||||
| `region_top` | INT | 选区上边距 |
|
||||
| `region_left` | INT | 选区左边距 |
|
||||
| `region_width` | INT | 选区宽度 |
|
||||
| `region_height` | INT | 选区高度 |
|
||||
## Node Outputs
|
||||
|
||||
## 工作原理
|
||||
| Output | Type | Description |
|
||||
|--------|------|-------------|
|
||||
| `image` | IMAGE | Edited image |
|
||||
| `mask` | MASK | Inpaint mask |
|
||||
| `region_top` | INT | Region top coordinate |
|
||||
| `region_left` | INT | Region left coordinate |
|
||||
| `region_width` | INT | Region width |
|
||||
| `region_height` | INT | Region height |
|
||||
|
||||
```
|
||||
1. 大模型参考选区内的原图内容
|
||||
2. 重绘整个选区区域
|
||||
3. 根据遮罩合成：只在遮罩内放入新内容
|
||||
## Concept: Mask vs Region
|
||||
|
||||
结果：选区越大 → 参考信息越多 → 重绘越准确
|
||||
```
|
||||
| Concept | Purpose |
|
||||
|---------|---------|
|
||||
| **Mask** | Define inpaint area (what to repaint) |
|
||||
| **Region** | Define reference area (AI context) |
|
||||
|
||||
## 注意事项
|
||||
**Constraint**: Region size must be ≥ mask size.
|
||||
|
||||
- **网络依赖**：首次打开 Photopea 需要联网（约 10MB）
|
||||
- **浏览器缓存**：缓存后可离线使用
|
||||
- **隐私**：图像处理在本地完成，不上传到服务器
|
||||
## Technical Details
|
||||
|
||||
## 图像编辑功能说明
|
||||
- Uses Photopea [postMessage API](https://www.photopea.com/api/)
|
||||
- All message origins are verified for security
|
||||
- Images processed locally in browser
|
||||
|
||||
本节点的图像编辑功能基于 [Photopea](https://www.photopea.com/)，一个免费的在线图像编辑器。
|
||||
## Limitations
|
||||
|
||||
- Photopea 是由 Ivan Kutskir 开发的免费软件
|
||||
- 图像处理在您的浏览器本地完成，不上传到任何服务器
|
||||
- 使用 Photopea API 是免费的，但会显示广告
|
||||
- 您编辑的所有图像归您所有
|
||||
- Requires internet (Photopea loaded from CDN)
|
||||
- First load ~10MB, then cached
|
||||
|
||||
## 法律声明
|
||||
## Acknowledgments
|
||||
|
||||
- Photopea API 可免费用于任何目的（包括商业用途）
|
||||
- 您的作品完全归您所有，无需分享收益
|
||||
- 无需标注使用了 Photopea（但建议标注）
|
||||
- [Photopea](https://www.photopea.com/) by Ivan Kutskir
|
||||
- [ComfyUI](https://github.com/comfyanonymous/ComfyUI)
|
||||
|
||||
## 许可证
|
||||
## License
|
||||
|
||||
本项目采用 MIT 许可证。
|
||||
MIT License - see [LICENSE](LICENSE) file.
|
||||
|
||||
### Photopea Usage
|
||||
- Free API for any purpose (including commercial)
|
||||
- Your work belongs entirely to you
|
||||
- No attribution required (but appreciated)
|
||||
|
||||
## Changelog
|
||||
|
||||
See [CHANGELOG.md](CHANGELOG.md) for details.
|
||||
|
||||
Reference in New Issue
Block a user