495 lines
14 KiB
Markdown
495 lines
14 KiB
Markdown
# 海报单图/长图、文字可编辑与参考图上传精简计划
|
||
|
||
> - 文档版本：v3.0
|
||
> - 编制日期：2026-07-30
|
||
> - 目标：支持单张海报和长图海报，文字可直接修改，并可上传一张参考图
|
||
> - 预计工作量：6～8 人日
|
||
|
||
---
|
||
|
||
## 一、结论
|
||
|
||
采用“AI 视觉图片 + HTML 内容模块”的拆分方式，可以达到参考样例的效果，而且比让图片模型一次生成整张长图更可靠。
|
||
|
||
正确流程是：
|
||
|
||
```text
|
||
计划书 + 产品小册子 + 可选参考图
|
||
→ 提取完整计划数据和产品卖点
|
||
→ 根据数据决定展示哪些内容模块
|
||
→ AI 只生成封面或结尾所需的无字视觉图
|
||
→ HTML 渲染标题、正文、数据卡、卖点、图表、Logo 和免责声明
|
||
→ 用户点击文字直接修改
|
||
→ 导出单张 PNG 或一张长图 PNG
|
||
```
|
||
|
||
不使用 Fabric.js，不开发自由拖拽设计器，也不做复杂图层系统。
|
||
|
||
---
|
||
|
||
## 二、参考样例分析
|
||
|
||
前两张样例尺寸约为 1536×3072，属于 1:2 长图。它们不是一张普通海报简单拉长，而是由多个内容模块组成：
|
||
|
||
1. 品牌与封面主视觉；
|
||
2. 客户/投保人摘要；
|
||
3. 年缴保费、缴费期、累计投入、保障期限；
|
||
4. 现金价值或利益增长曲线；
|
||
5. 产品核心卖点；
|
||
6. 可选币种或产品选项；
|
||
7. 关键数据汇总；
|
||
8. 结尾主张、Logo 和免责声明。
|
||
|
||
第三张样例是更长的纵向模块列表，本质仍然是多个区块依次拼接。
|
||
|
||
样例中有三个不能交给图片模型的内容：
|
||
|
||
- 中文标题和正文：容易错字、乱码；
|
||
- 保险数字和图表：容易产生错误数字、错误坐标；
|
||
- Logo、图标和免责声明：必须使用真实素材和确定性排版。
|
||
|
||
因此，AI 只负责人物、城市、家庭、建筑、风景等视觉图；其他内容全部由 HTML、CSS、真实数据和图表组件生成。
|
||
|
||
---
|
||
|
||
## 三、两种输出模式
|
||
|
||
### 3.1 单张海报
|
||
|
||
建议尺寸：
|
||
|
||
- 1080×1440；
|
||
- 1080×1920；
|
||
- 1080×1080。
|
||
|
||
单图最多展示：
|
||
|
||
```text
|
||
封面视觉
|
||
标题和一句话说明
|
||
3～4 个关键数据
|
||
3 个核心卖点
|
||
行动号召
|
||
免责声明
|
||
```
|
||
|
||
单图适合朋友圈、私聊和快速宣传，信息必须精简。
|
||
|
||
### 3.2 长图海报
|
||
|
||
建议宽度固定为 1080，高度根据内容自动计算，常见范围为 2160～6000。
|
||
|
||
长图可展示：
|
||
|
||
```text
|
||
封面
|
||
客户专属计划
|
||
投入方案
|
||
利益增长图
|
||
产品亮点
|
||
保障/红利/提取选项
|
||
币种
|
||
关键数据
|
||
结尾
|
||
免责声明
|
||
```
|
||
|
||
长图不是让图片模型直接生成一张 1080×6000 的图片。图片模型通常只适合常见比例，直接生成超长图会出现：
|
||
|
||
- 内容密度失控；
|
||
- 中文和数字错误；
|
||
- 前后段视觉不连续；
|
||
- 无法修改文字；
|
||
- 图表和保险数据不可信；
|
||
- 超长尺寸不被供应商支持。
|
||
|
||
长图模式应生成 2～3 张无字视觉素材，例如：
|
||
|
||
- 封面主视觉；
|
||
- 中间过渡图，可选；
|
||
- 结尾主视觉。
|
||
|
||
其余区块使用 HTML 卡片、CSS 背景和图表组合。长图生成任务可以循环调用图片模型 2～3 次，而不是要求一次返回整张长图。
|
||
|
||
---
|
||
|
||
## 四、当前数据为什么不够
|
||
|
||
当前海报计划书解析使用：
|
||
|
||
```python
|
||
ExtractionOrchestrator.extract_for_poster()
|
||
```
|
||
|
||
该方法存在两个明确限制：
|
||
|
||
1. 只读取 PDF 文本前 6000 字符；
|
||
2. 只提取以下字段：
|
||
|
||
```text
|
||
age
|
||
gender
|
||
currency
|
||
sum_assured
|
||
premium_term
|
||
annual_premium
|
||
coverage_period
|
||
key_benefits
|
||
```
|
||
|
||
这些字段只能支撑：
|
||
|
||
- 投保年龄；
|
||
- 年缴保费；
|
||
- 缴费年期；
|
||
- 保额；
|
||
- 保障期限；
|
||
- 几个简短卖点。
|
||
|
||
它无法支撑：
|
||
|
||
- 利益增长曲线；
|
||
- 保证与非保证价值对比；
|
||
- 累计保费；
|
||
- 第 10/20/30 年关键数据；
|
||
- 回本年度；
|
||
- 红利和终期分红；
|
||
- 提取计划；
|
||
- 身故保障变化；
|
||
- 不同产品类型的专项内容。
|
||
|
||
当前产品小册子解析也只读取前 8000 字符，并只提取：
|
||
|
||
```text
|
||
product_name
|
||
features
|
||
currency_options
|
||
coverage_highlights
|
||
```
|
||
|
||
这会漏掉位于后续页面的红利锁定、保费假期、提取选项、币种转换、受益人安排、投保限制和免责声明。
|
||
|
||
因此，“提取数据过少”不是感觉问题，而是当前海报解析方法的设计目标本来就是低成本单张海报。
|
||
|
||
另外还有两个数据真实性隐患：
|
||
|
||
1. 旧上传表单预置了 35 岁、500,000 保额、5 年缴费、100,000 年缴保费等业务默认值。解析字段缺失时，默认值可能残留并被用户误认为解析结果。所有业务数字应初始化为 `null`，缺失时显示“待确认”，不能预填示例数字。
|
||
2. 完整储蓄险解析 Prompt 已提取 `sum_insured/basic_sum_insured`，但当前 `normalize_savings_plan()` 没有将它们写入归一化后的 `policy`。长图使用完整解析前，需要补回 `sumInsured` 和 `basicSumInsured`，否则关键数据卡仍可能缺少名义金额。
|
||
|
||
---
|
||
|
||
## 五、复用现有完整解析能力
|
||
|
||
项目的 PPT 模块已经存在更完整的：
|
||
|
||
```python
|
||
ExtractionOrchestrator.extract_plan()
|
||
```
|
||
|
||
它已经支持：
|
||
|
||
- PDF 全文规则提取；
|
||
- 储蓄险、重疾险、IUL 分类；
|
||
- 利益演示表逐年数据；
|
||
- 保证现金价值；
|
||
- 非保证利益、红利和终期分红；
|
||
- 总退保价值；
|
||
- 身故保障；
|
||
- 提取计划；
|
||
- 来源页码；
|
||
- 数据不完整时的 LLM 回退；
|
||
- 归一化数据结构。
|
||
|
||
海报模块不应继续扩充轻量的 `extract_for_poster()`，而应直接复用完整计划解析：
|
||
|
||
```text
|
||
上传计划书
|
||
→ extract_plan()
|
||
→ 保存完整结构化数据
|
||
→ PosterContentBuilder 根据输出模式挑选字段
|
||
→ 单图只取摘要
|
||
→ 长图使用摘要 + 关键年度 + 图表序列
|
||
```
|
||
|
||
这样 PPT 和海报共享一份计划书解析结果，不会出现同一份计划书在两个模块中数字不一致。
|
||
|
||
前端只需要让用户确认计划摘要和长图会使用的关键年度，不需要把几十行利益表全部铺成表单。完整利益表保存用于画图，确认区重点展示：
|
||
|
||
- 年龄、性别和吸烟状态；
|
||
- 币种、保额、年缴保费、缴费年期和保障期限；
|
||
- 第 10/20/30 年等关键利益值；
|
||
- 保证与非保证口径；
|
||
- 数据来源页；
|
||
- 缺失项和警告。
|
||
|
||
---
|
||
|
||
## 六、长图所需数据
|
||
|
||
### 6.1 计划书数据
|
||
|
||
计划书负责提供客户专属数字：
|
||
|
||
| 分类 | 最少字段 |
|
||
|------|----------|
|
||
| 客户 | 年龄、性别、吸烟状态（如有） |
|
||
| 保单 | 产品名称、币种、基本保额、年缴保费、缴费年期、保障期限 |
|
||
| 投入 | 年缴保费、累计总保费 |
|
||
| 利益表 | 保单年度、累计保费、保证现金价值、非保证利益、总退保价值、身故保障 |
|
||
| 提取 | 提取年度、提取金额、累计提取、提取后价值 |
|
||
| 来源 | 每个关键数字对应的 PDF 页码 |
|
||
|
||
长图不需要把几十行利益表全部显示出来，但画图时需要完整序列。关键数据卡可以选择第 10、20、30 年和期末数据。
|
||
|
||
### 6.2 产品小册子数据
|
||
|
||
小册子负责提供产品规则和卖点：
|
||
|
||
| 分类 | 最少字段 |
|
||
|------|----------|
|
||
| 产品定位 | 产品名称、产品类型、一句话定位 |
|
||
| 核心卖点 | 3～8 项标题、摘要和来源页 |
|
||
| 保障亮点 | 身故、危疾、预支或其他保障 |
|
||
| 红利机制 | 保证/非保证、红利锁定、终期分红等 |
|
||
| 灵活选项 | 提取、保费假期、币种转换、保单拆分等 |
|
||
| 币种 | 支持币种列表 |
|
||
| 投保规则 | 年龄、缴费期、保障期等 |
|
||
| 风险提示 | 非保证利益、汇率、退保损失等免责声明 |
|
||
|
||
小册子解析不能再简单截取前 8000 字符。应按关键词选择相关页面，例如：
|
||
|
||
```text
|
||
产品特色
|
||
保障
|
||
红利
|
||
终期分红
|
||
提取
|
||
保费假期
|
||
币种转换
|
||
受益人
|
||
投保年龄
|
||
风险
|
||
重要事项
|
||
```
|
||
|
||
从命中的页面中提取结构化内容，并保留来源页码。
|
||
|
||
---
|
||
|
||
## 七、长图模块生成规则
|
||
|
||
不是每份计划都强制展示所有模块。根据数据完整度自动决定：
|
||
|
||
| 模块 | 出现条件 |
|
||
|------|----------|
|
||
| 封面 | 始终出现 |
|
||
| 客户专属计划 | 年龄、币种、保费等摘要字段齐全 |
|
||
| 投入方案 | 年缴保费和缴费年期存在 |
|
||
| 利益增长图 | 至少有 3 个有效利益年度 |
|
||
| 提取计划 | 存在正式提取数据 |
|
||
| 产品亮点 | 小册子至少提取 3 个有效卖点 |
|
||
| 币种选择 | 至少有 2 种币种 |
|
||
| 关键数据 | 至少有 3 个可确认的关键指标 |
|
||
| 结尾与免责声明 | 始终出现 |
|
||
|
||
规则：
|
||
|
||
- 缺少数据就隐藏模块，不能让 AI 补数字；
|
||
- 数据不足 4 个有效模块时，建议生成单图，不强行拉成长图；
|
||
- 保证和非保证数据必须分开展示；
|
||
- 图表的每一个点来自利益演示表；
|
||
- 所有重要数字保留来源页码用于后台核对；
|
||
- 用户修改文字只能改表达，不能直接把已确认数字改成任意值。
|
||
|
||
---
|
||
|
||
## 八、HTML 海报结构
|
||
|
||
### 8.1 单图
|
||
|
||
```html
|
||
<article class="poster poster--single">
|
||
<PosterHero />
|
||
<PosterSummaryCards />
|
||
<PosterFeatureCards />
|
||
<PosterCallToAction />
|
||
<PosterDisclaimer />
|
||
</article>
|
||
```
|
||
|
||
### 8.2 长图
|
||
|
||
```html
|
||
<article class="poster poster--long">
|
||
<PosterHero />
|
||
<PosterCustomerPlan />
|
||
<PosterPremiumSummary />
|
||
<PosterBenefitChart />
|
||
<PosterFeatureList />
|
||
<PosterCurrencyOptions />
|
||
<PosterKeyMetrics />
|
||
<PosterClosing />
|
||
<PosterDisclaimer />
|
||
</article>
|
||
```
|
||
|
||
标题、说明和卖点文字使用 HTML，可点击直接修改。数据卡和图表绑定结构化数据，不允许 AI 在图片中绘制。
|
||
|
||
利益曲线可以复用现有 ECharts 依赖，导出前将图表转成图片或包含在 HTML 截图中。
|
||
|
||
Logo 使用后台真实 Logo 文件，图标使用本地 SVG 图标，不由 AI 生成。
|
||
|
||
---
|
||
|
||
## 九、参考图
|
||
|
||
首期支持上传一张参考图：
|
||
|
||
```text
|
||
POST /insurance/poster/reference-image
|
||
GET /insurance/poster/reference-image/{imageKey}
|
||
DELETE /insurance/poster/reference-image/{imageKey}
|
||
```
|
||
|
||
支持 JPG、PNG、WebP，最大 10 MB。
|
||
|
||
参考图主要影响：
|
||
|
||
- 封面构图；
|
||
- 色彩和光线；
|
||
- 人物或场景方向；
|
||
- 长图中 2～3 张视觉图片的统一风格。
|
||
|
||
参考图不用于：
|
||
|
||
- 读取或复制其中的错误文字；
|
||
- 生成 Logo；
|
||
- 生成保险数据和图表。
|
||
|
||
如果供应商不支持参考图，必须明确提示。参考图调用失败时不能静默忽略。
|
||
|
||
---
|
||
|
||
## 十、导出方式
|
||
|
||
### 单图
|
||
|
||
直接使用 `html-to-image` 将完整海报节点导出为 PNG。
|
||
|
||
### 长图
|
||
|
||
对于常见的 1080×2160～5000 长图，可以直接导出完整 HTML 节点。
|
||
|
||
对于高度更大的长图，为避免浏览器画布尺寸和内存问题：
|
||
|
||
1. 分别导出每个 HTML 模块；
|
||
2. 后端使用 Pillow 按顺序纵向拼接；
|
||
3. 返回一张最终长图 PNG。
|
||
|
||
这样最终仍是一张图片，但不要求浏览器或图片模型一次处理超高画布。
|
||
|
||
导出前必须等待：
|
||
|
||
- AI 视觉图加载完成；
|
||
- 中文字体加载完成；
|
||
- ECharts 图表渲染完成；
|
||
- 文字编辑状态退出。
|
||
|
||
---
|
||
|
||
## 十一、最小代码改造
|
||
|
||
### 后端
|
||
|
||
| 文件 | 修改 |
|
||
|------|------|
|
||
| `api/insurance/poster/tasks.py` | 计划书改用完整 `extract_plan()` |
|
||
| `api/insurance/poster/manual_parser.py` | 按关键页面提取更丰富的小册子内容 |
|
||
| `api/insurance/poster/content_builder.py` | 新增：把计划书和小册子数据变成单图/长图模块 |
|
||
| `api/insurance/poster/routes.py` | 参考图和长图导出接口 |
|
||
| `api/insurance/poster/image_generator.py` | 只生成无字视觉图 |
|
||
| `api/insurance/generation/celery_tasks.py` | 单图生成 1 张视觉图；长图生成 2～3 张 |
|
||
|
||
不新增复杂素材中心，不修改 BaoDan 基座。
|
||
|
||
### 前端
|
||
|
||
| 文件 | 修改 |
|
||
|------|------|
|
||
| `frontend/src/composables/usePosterWorkspace.ts` | 增加 `outputMode: single/long` 和参考图状态 |
|
||
| `frontend/src/utils/poster-api.ts` | 参考图、内容模块和导出接口 |
|
||
| `frontend/src/components/poster/workspace/PosterCreativePanel.vue` | 单图/长图选择和参考图上传 |
|
||
| `frontend/src/components/poster/workspace/PosterStage.vue` | 根据模式渲染 HTML 海报 |
|
||
| `frontend/src/components/poster/long/*` | 长图的 6～9 个小模块 |
|
||
| `frontend/src/pages/PosterPage.vue` | 文字保存和 PNG 导出 |
|
||
|
||
继续使用现有：
|
||
|
||
- `copy_content` 保存可编辑文案；
|
||
- `parsed_data` 保存完整解析结果；
|
||
- `confirmed_data` 保存人工确认数据；
|
||
- `draft_revision` 保存草稿版本；
|
||
- ECharts 绘制利益曲线。
|
||
|
||
---
|
||
|
||
## 十二、实施顺序与工期
|
||
|
||
### Phase 1：完整数据复用（1.5～2 人日）
|
||
|
||
- 海报计划书改用 `extract_plan()`；
|
||
- 保存完整利益演示数据；
|
||
- 扩展小册子关键页面提取；
|
||
- 增加数据完整度检查。
|
||
|
||
验收：
|
||
|
||
- 能获取计划摘要和至少 3 个利益年度；
|
||
- 图表数据来自正式利益表；
|
||
- 产品卖点来自小册子并带来源页。
|
||
|
||
### Phase 2：单图 HTML 海报（1～1.5 人日）
|
||
|
||
- AI 只生成无字背景；
|
||
- HTML 显示标题、正文、数据卡和卖点；
|
||
- 文字可以点击修改；
|
||
- 单图 PNG 导出。
|
||
|
||
### Phase 3：长图模板（2～2.5 人日）
|
||
|
||
- 增加 `single/long` 选择；
|
||
- 增加客户计划、投入、图表、卖点、币种、关键数据和结尾模块；
|
||
- 根据数据自动隐藏无效模块；
|
||
- 长图生成 2～3 张统一风格的视觉素材；
|
||
- 长图 PNG 导出。
|
||
|
||
### Phase 4：参考图与测试（1～1.5 人日）
|
||
|
||
- 单张参考图上传、预览、更换和删除；
|
||
- 参考图传入视觉生成；
|
||
- 权限、文件类型和 EXIF 清理；
|
||
- 单图/长图端到端测试；
|
||
- 旧海报兼容测试。
|
||
|
||
总计约 6～8 人日。
|
||
|
||
---
|
||
|
||
## 十三、完成标准
|
||
|
||
- [ ] 用户可以选择单图或长图；
|
||
- [ ] 单图支持 1080×1440、1080×1920 和方图；
|
||
- [ ] 长图宽度固定、高度按有效模块自动计算；
|
||
- [ ] 长图由 HTML 模块组成，不由图片模型一次生成；
|
||
- [ ] AI 图片中不包含正式中文、数字、Logo 和图表；
|
||
- [ ] 标题和说明文字可以直接点击修改；
|
||
- [ ] 利益曲线来自完整计划书利益演示数据；
|
||
- [ ] 产品卖点来自小册子并保留来源；
|
||
- [ ] 数据不足时隐藏模块，不虚构内容；
|
||
- [ ] 用户可以上传一张参考图；
|
||
- [ ] 参考图失败不会被静默忽略；
|
||
- [ ] 单图和长图都能导出为一张 PNG；
|
||
- [ ] 旧海报仍能预览和下载；
|
||
- [ ] 不开发自由拖拽和复杂图层系统；
|
||
- [ ] 不修改 BaoDan 基座代码。
|