Initial commit to git.yoin
This commit is contained in:
hmo
76
image-service/references/color-sync-guide.md
Normal file
76
image-service/references/color-sync-guide.md
Normal file
@@ -0,0 +1,76 @@
|
||||
# 配色协同机制
|
||||
|
||||
当 image-service 与其他 skill 配合使用时（如 pptx、docx、obsidian 等），**必须感知上下文配色方案并自动适配**，确保生成的图片与目标载体风格统一。
|
||||
|
||||
## 协同原则
|
||||
|
||||
1. **主动感知**：生成配图前，先确认目标载体的配色方案
|
||||
2. **自动适配**：将配色信息融入图片生成提示词
|
||||
3. **风格统一**：背景色、主色调、强调色保持一致
|
||||
|
||||
## 配色来源优先级
|
||||
|
||||
| 优先级 | 来源 | 说明 |
|
||||
|-------|------|------|
|
||||
| 1 | 用户明确指定 | 用户直接提供的颜色值 |
|
||||
| 2 | 当前任务上下文 | 正在制作的 PPT/文档的配色方案 |
|
||||
| 3 | 项目配置文件 | `.design/palette.json` 或类似配置 |
|
||||
| 4 | 默认风格 | 手绘白底风格（无特殊要求时） |
|
||||
|
||||
## 与 PPTX 协同
|
||||
|
||||
制作 PPT 配图时，从 pptx skill 的设计方案中提取配色：
|
||||
|
||||
```markdown
|
||||
# 示例：PPT 配色方案
|
||||
- 背景色：#181B24（深蓝黑）
|
||||
- 主色：#B165FB（紫色）
|
||||
- 辅助色：#40695B（翡翠绿）
|
||||
- 文字色：#FFFFFF / #AAAAAA
|
||||
```
|
||||
|
||||
生成图片时，将配色融入提示词：
|
||||
|
||||
```bash
|
||||
# 错误示例（不考虑配色）
|
||||
python scripts/text_to_image.py "流程图，用户路径变化" -r 16:9
|
||||
|
||||
# 正确示例（融入配色）
|
||||
python scripts/text_to_image.py "信息图风格，深色背景#181B24，科技感流程图。用紫色#B165FB和翡翠绿#40695B作为强调色，展示用户路径变化，发光线条风格，中文标签" -r 16:9
|
||||
```
|
||||
|
||||
## 与其他 Skill 协同
|
||||
|
||||
| 目标载体 | 配色来源 | 适配要点 |
|
||||
|---------|---------|---------|
|
||||
| **PPTX** | HTML slides 的 CSS 配色 | 背景色、强调色、文字色统一 |
|
||||
| **DOCX** | 文档主题色或用户指定 | 配合文档正式/活泼风格 |
|
||||
| **Obsidian** | Vault 主题（深色/浅色） | 适配笔记阅读体验 |
|
||||
| **小红书** | 品牌色或内容调性 | 竖版 3:4，吸睛配色 |
|
||||
| **调研报告** | 统一手绘风格 | 使用 research_image.py 预设 |
|
||||
|
||||
## 配色提示词模板
|
||||
|
||||
```
|
||||
信息图风格，{背景描述}背景{背景色}，{风格描述}。
|
||||
使用{主色}作为主色调，{辅助色}作为辅助色。
|
||||
{内容描述}，{视觉风格}，中文标签。
|
||||
```
|
||||
|
||||
**示例**：
|
||||
```
|
||||
信息图风格，深色背景#181B24，科技感对比图。
|
||||
使用紫色#B165FB作为主色调，翡翠绿#40695B作为辅助色。
|
||||
左侧展示SEO特点，右侧展示GEO特点，发光连接线风格，中文标签。
|
||||
```
|
||||
|
||||
## Agent 执行规范
|
||||
|
||||
1. **识别协同场景**：检测是否在为其他 skill 生成配图
|
||||
2. **提取配色方案**：从上下文/HTML/配置中获取颜色值
|
||||
3. **构建适配提示词**：将配色信息自然融入生成描述
|
||||
4. **验证风格一致**：生成后确认与目标载体视觉协调
|
||||
|
||||
## 协同执行流程
|
||||
|
||||
1. 确认目标载体 → 2. 提取配色方案 → 3. 融入提示词 → 4. 生成适配图片
|
||||
135
image-service/references/long-image-guide.md
Normal file
135
image-service/references/long-image-guide.md
Normal file
@@ -0,0 +1,135 @@
|
||||
# 长图生成规范
|
||||
|
||||
生成需要拼接的长图时，采用**叠罗汉式串行生成**，每张图参考上一张图生成，确保风格一致、衔接自然。
|
||||
|
||||
## 铁律：执行前必须分析+确认
|
||||
|
||||
**收到长图需求后，禁止直接开始生成！必须先完成以下步骤：**
|
||||
|
||||
### 第一步：分析提示词结构
|
||||
|
||||
仔细阅读提示词，识别以下信息：
|
||||
1. **分屏数量**：提示词中有几个明确的段落/模块？
|
||||
2. **每屏内容**：每一屏具体要展示什么？
|
||||
3. **全局风格**：色调、风格、光影等统一要素
|
||||
4. **衔接元素**：段落之间用什么元素过渡？
|
||||
|
||||
### 第二步：输出分屏规划表
|
||||
|
||||
必须用表格形式输出规划，让用户一目了然：
|
||||
|
||||
```markdown
|
||||
| 屏数 | 内容概要 | 关键元素 |
|
||||
|-----|---------|---------|
|
||||
| 1 | 主视觉+标题 | xxx |
|
||||
| 2 | xxx特写 | xxx |
|
||||
| ... | ... | ... |
|
||||
|
||||
**全局风格**：xxx风格、xxx色调、xxx布光
|
||||
**输出比例**：3:4
|
||||
**预计生成**：N张图 → 拼接为长图
|
||||
```
|
||||
|
||||
### 第三步：等待用户确认
|
||||
|
||||
**必须等用户说"OK"、"开始"、"没问题"后才能开始生成！**
|
||||
|
||||
用户可能会：
|
||||
- 调整分屏数量
|
||||
- 修改某屏内容
|
||||
- 补充遗漏的要素
|
||||
|
||||
## 核心原则：叠罗汉式串行生成
|
||||
|
||||
**为什么用串行而不是并发？**
|
||||
- 每张图的顶部颜色需要与上一张图的底部颜色衔接
|
||||
- 只有等上一张图生成完成，才能提取其底部色调
|
||||
- 串行生成确保每一屏之间的过渡自然无缝
|
||||
|
||||
**为什么参考上一张而不是首图？**
|
||||
- 参考首图会导致中间屏幕风格跳跃
|
||||
- 叠罗汉式参考让风格逐屏延续，过渡更平滑
|
||||
- 每张图只需关心与相邻图的衔接
|
||||
|
||||
## 生成前校验清单
|
||||
|
||||
| 检查项 | 要求 | 示例 |
|
||||
|-------|------|------|
|
||||
| **比例统一** | 所有分图使用相同 `-r` 参数 | 全部 `-r 3:4` |
|
||||
| **风格描述统一** | 使用相同的风格关键词 | 全部 `电影级美食摄影风格` |
|
||||
| **色调统一** | 定义主色调范围 | 全部 `深红色、暖棕色、金色` |
|
||||
|
||||
## Agent 执行流程（铁律）
|
||||
|
||||
```
|
||||
1. 收到长图需求
|
||||
2. 【分析】仔细阅读提示词，识别分屏结构
|
||||
3. 【规划】输出分屏规划表（表格形式）
|
||||
4. 【确认】等待用户确认后才开始生成（铁律！）
|
||||
5. 定义全局风格变量（主色调、风格词）
|
||||
6. 串行生成每一屏：
|
||||
a. 首屏：用 text_to_image.py 生成，定调
|
||||
b. 第2屏：用 image_to_image.py 参考第1屏生成
|
||||
c. 第3屏：用 image_to_image.py 参考第2屏生成
|
||||
d. 以此类推...每屏参考上一屏
|
||||
7. 每屏生成后等待完成，再生成下一屏（串行，不可并发）
|
||||
8. 全部完成后，使用 --blend 20 拼接输出
|
||||
```
|
||||
|
||||
## 图生图 Prompt 规范
|
||||
|
||||
**核心要点：顶部衔接上一张底部**
|
||||
|
||||
后续图片的 prompt 必须包含：
|
||||
1. **顶部衔接声明**：明确顶部颜色/氛围与上一张底部衔接
|
||||
2. **风格继承**：参考上一张图的整体风格、光影
|
||||
3. **本屏内容**：描述当前屏幕要展示的内容
|
||||
|
||||
**Prompt 模板：**
|
||||
```
|
||||
参考模板图的整体风格、色调和光影氛围。本屏顶部与上一屏底部自然衔接。{本屏具体内容描述}
|
||||
```
|
||||
|
||||
**更精确的写法（推荐）：**
|
||||
```
|
||||
参考模板图的{风格}、{色调}、{光影}。顶部延续上一屏底部的{颜色/氛围}。{本屏具体内容描述}
|
||||
```
|
||||
|
||||
## 分屏位置规范
|
||||
|
||||
| 位置 | 处理方式 |
|
||||
|------|---------|
|
||||
| **首屏** | 顶部正常开始，底部内容自然过渡（无需刻意留白） |
|
||||
| **中间屏** | 顶部衔接上一屏底部颜色，底部内容自然过渡 |
|
||||
| **尾屏** | 顶部衔接上一屏底部颜色，底部正常收尾 |
|
||||
|
||||
**关键：不要预留固定百分比的留白区域，让内容自然过渡即可**
|
||||
|
||||
## 执行示例
|
||||
|
||||
```bash
|
||||
# 步骤1：生成首屏（文生图，定调）
|
||||
python .opencode/skills/image-service/scripts/text_to_image.py "高端美食摄影风格，深红暖棕金色调，电影级布光..." -r 3:4 -o 01_hero.png
|
||||
# 等待完成
|
||||
|
||||
# 步骤2：生成第2屏（参考第1屏）
|
||||
python .opencode/skills/image-service/scripts/image_to_image.py 01_hero.png "参考模板图的美食摄影风格、深红暖棕色调、电影级布光。顶部延续上一屏底部的暖色氛围。本屏内容：酥皮特写..." -r 3:4 -o 02_crisp.png
|
||||
# 等待完成
|
||||
|
||||
# 步骤3：生成第3屏（参考第2屏）
|
||||
python .opencode/skills/image-service/scripts/image_to_image.py 02_crisp.png "参考模板图的美食摄影风格、深红暖棕色调、电影级布光。顶部延续上一屏底部的色调。本屏内容：牛排特写..." -r 3:4 -o 03_tenderloin.png
|
||||
# 等待完成
|
||||
|
||||
# ...以此类推
|
||||
|
||||
# 最后：拼接（推荐 blend 20）
|
||||
python .opencode/skills/image-service/scripts/merge_long_image.py 01_hero.png 02_crisp.png 03_tenderloin.png ... -o final.png --blend 20
|
||||
```
|
||||
|
||||
## 铁律
|
||||
|
||||
1. **必须串行生成**：每屏生成完成后再生成下一屏，禁止并发
|
||||
2. **叠罗汉式参考**：第N屏参考第N-1屏，不是全部参考首屏
|
||||
3. **顶部衔接**：每屏的顶部颜色/氛围必须与上一屏底部衔接
|
||||
4. **不留固定留白**：不要预留4%/8%等固定留白，让内容自然过渡
|
||||
5. **脚本区分**：首屏用 `text_to_image.py`，后续全部用 `image_to_image.py`
|
||||
41
image-service/references/text-rendering-guide.md
Normal file
41
image-service/references/text-rendering-guide.md
Normal file
@@ -0,0 +1,41 @@
|
||||
# 文字清晰规范
|
||||
|
||||
生成包含中文文字的图片时，**必须在 prompt 末尾追加文字清晰指令**，确保文字可读、无乱码。
|
||||
|
||||
## 文字清晰后缀（必加）
|
||||
|
||||
```
|
||||
【文字渲染要求】
|
||||
- 所有中文文字必须清晰可读，笔画完整，无模糊、无乱码、无伪文字
|
||||
- 文字边缘锐利，呈现印刷级清晰度，彻底消除压缩噪点与边缘溢色
|
||||
- 字体风格统一，字距适中，排版规整
|
||||
- 严禁出现无法阅读的乱码字符或残缺笔画
|
||||
```
|
||||
|
||||
## 完整 Prompt 结构
|
||||
|
||||
```
|
||||
{风格描述}。{内容描述}。{布局描述}。
|
||||
|
||||
【文字渲染要求】
|
||||
- 所有中文文字必须清晰可读，笔画完整，无模糊、无乱码、无伪文字
|
||||
- 文字边缘锐利，呈现印刷级清晰度
|
||||
- 字体风格统一，排版规整
|
||||
```
|
||||
|
||||
## 生成后校验流程
|
||||
|
||||
1. 生成图片后，用 `image_to_text.py -m ocr` 校验文字是否清晰
|
||||
2. 如果 OCR 识别结果与预期文字不符，使用图生图迭代修复
|
||||
3. 修复 prompt 使用以下模板
|
||||
|
||||
## 文字修复 Prompt（图生图迭代修复用）
|
||||
|
||||
```
|
||||
执行语意级图像重构。针对图中模糊或乱码的文字区域进行修复：
|
||||
1. 保持原图的版面配置、物体座标、配色风格完全不变
|
||||
2. 将模糊文字修复为清晰的简体中文：{预期文字内容}
|
||||
3. 文字笔画必须呈现印刷级清晰度，边缘锐利，无压缩噪点
|
||||
4. 严禁产生无法阅读的伪文字或乱码
|
||||
直接输出修复后的图像。
|
||||
```
|
||||
Reference in New Issue
Block a user