init: 旅行商品发布AI助手Demo
- 单文件交互式Demo:六大表单模块 + 右侧AI助手面板 - 一键发品(弹窗式)与对话式自主发品(Agent模式) - 多工具串行调度 + 逐工具确认(human-in-the-loop) - 偏好学习机制(localStorage,越用越好用) - Prompt提示词设计文档与项目方法论笔记
This commit is contained in:
@@ -0,0 +1,71 @@
|
||||
# 旅行商品发布 AI 助手 Demo
|
||||
|
||||
飞猪商家商品发布平台右侧嵌入的 AI 助手交互式演示。模拟完整的商品发布页(六大模块表单)+ 右侧 AI 助手面板,主打「一键发品」与「越用越好用」的偏好学习机制。
|
||||
|
||||
## 快速开始
|
||||
|
||||
无需构建,直接用浏览器打开:
|
||||
|
||||
```bash
|
||||
open index.html
|
||||
```
|
||||
|
||||
或启动本地静态服务:
|
||||
|
||||
```bash
|
||||
npx serve .
|
||||
```
|
||||
|
||||
## 功能概览
|
||||
|
||||
### 左侧商品发布表单(6 大模块)
|
||||
|
||||
| 模块 | 说明 |
|
||||
|---|---|
|
||||
| 商品标题 | 40 字计数器 + 目的地/天数/类型/人群标签(作为 AI 上下文) |
|
||||
| 详细介绍 | 列表页卖点摘要 |
|
||||
| 商品详情 | 富文本编辑器(工具栏 + 图文混排) |
|
||||
| 商品图片 | 4 列图片网格,主图/详情图角标 |
|
||||
| 行程编辑 | 动态 D1~Dn 天数卡片 |
|
||||
| 价格库存 | 团期表格(日期/成人价/儿童价/库存/在售状态) |
|
||||
|
||||
每个模块标题行右侧有 `✨ AI` 按钮,可直接唤起助手中对应工具(面板收起时自动展开)。
|
||||
|
||||
### 右侧 AI 助手
|
||||
|
||||
- **8 个快捷工具**:生成标题、卖点描述、商品详情、配图建议、行程规划、智能定价、SEO 关键词、合规检查
|
||||
- **一键发品(弹窗式)**:选 4 项配置 → 6 大模块逐步生成 → 偏好沉淀 + 成长等级
|
||||
- **对话式自主发品(Agent 模式)**:一句话下需求(如「帮我发个海南亲子6天自由行」),助手自动规划 8 步任务清单、串行调用工具
|
||||
- **多工具串行调度**:如「帮我优化标题和详情」,自动识别 2+ 模块并依次执行
|
||||
- **逐工具确认(human-in-the-loop)**:串行过程中每个工具生成卡片后展示,支持自动(5s 倒计时)/ 手动两种确认模式,可随时切换、可「换一版」
|
||||
- **上下文感知**:生成内容随表单选择(目的地/天数/人群)联动
|
||||
- **一键回填**:生成卡片「⚡ 一键填入」写入对应模块,自动滚动定位 + 高亮闪烁
|
||||
|
||||
### 偏好学习(越用越好用)
|
||||
|
||||
- 即时记忆:每次发品沉淀偏好(localStorage),下次自动预填配置
|
||||
- 成长等级:Lv.1 通用模板(0-2 次)→ Lv.2 风格匹配(3-9 次)→ Lv.3 爆款复刻(10+ 次)
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
├── index.html # 单文件 Demo(HTML + CSS + JS,零依赖)
|
||||
├── Prompt提示词设计文档.md # 各工具背后的 Prompt 设计规范(可直接落地真实 LLM)
|
||||
└── AI领教营/ # 项目方法论笔记(AI 价值/边界/验证框架)
|
||||
```
|
||||
|
||||
## 设计规范
|
||||
|
||||
- **品牌主色**:`#FF7A1A`(飞猪橙黄),渐变 `#FFA200 → #FF6600`
|
||||
- **语义色**:AI 橙黄 / 用户蓝紫(`#6366f1 → #8b5cf6`),成功绿 / 警示橙不受主题影响
|
||||
|
||||
## 落地指引
|
||||
|
||||
Demo 中的生成逻辑为前端模拟数据(`genData`)。接入真实 LLM 时:
|
||||
|
||||
1. 将助手面板抽成 Vue/React 独立组件
|
||||
2. 按设计文档定义 API 契约(表单上下文 + 生成类型 → 流式返回)
|
||||
3. Agent 编排对应后端 Agent Loop:意图分类 → 参数抽取 → function calling → 结果回填 → 偏好沉淀
|
||||
4. 偏好沉淀对应商家画像服务,喂给 LLM 的个性化 prompt
|
||||
|
||||
详见 `Prompt提示词设计文档.md`。
|
||||
Reference in New Issue
Block a user