95 lines
2.8 KiB
Markdown
95 lines
2.8 KiB
Markdown
|
# C 端接入 Demo
|
|||
|
|
|
|||
|
|
乐读派 AI 创作系统 C 端接入参考代码。
|
|||
|
|
|
|||
|
|
## 文件说明
|
|||
|
|
|
|||
|
|
| 文件 | 说明 |
|
|||
|
|
|------|------|
|
|||
|
|
| `HmacSigner.js` | HMAC-SHA256 签名工具（所有 C 端 API 均需签名） |
|
|||
|
|
| `CreationApi.js` | API 封装（A1-A4 创作 + B1-B6 查询） |
|
|||
|
|
| `CreationProgressTracker.js` | 创作进度追踪器（WebSocket + HTTP 双通道） |
|
|||
|
|
| `example-usage.js` | 完整接入示例（4 个场景） |
|
|||
|
|
|
|||
|
|
## 快速接入
|
|||
|
|
|
|||
|
|
### 1. 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install crypto-js sockjs-client @stomp/stompjs
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 最简接入（纯 HTTP 轮询）
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import CreationApi from './CreationApi.js'
|
|||
|
|
|
|||
|
|
const api = new CreationApi('https://server.com', 'ORG001', 'your-secret')
|
|||
|
|
|
|||
|
|
// 创作
|
|||
|
|
const { workId } = await api.createBySentence({
|
|||
|
|
orgId: 'ORG001', phone: '13800138000',
|
|||
|
|
sentence: '小恐龙学游泳', style: 'style_cartoon'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 轮询直到完成
|
|||
|
|
const poll = setInterval(async () => {
|
|||
|
|
const data = await api.getWork(workId)
|
|||
|
|
console.log(`${data.progress}% - ${data.progressMessage}`)
|
|||
|
|
if (data.status === 'COMPLETED' || data.status === 'FAILED') {
|
|||
|
|
clearInterval(poll)
|
|||
|
|
console.log(data.status === 'COMPLETED' ? data.pageList : data.failReason)
|
|||
|
|
}
|
|||
|
|
}, 5000)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 最佳体验（WebSocket + 自动降级）
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import CreationApi from './CreationApi.js'
|
|||
|
|
import CreationProgressTracker from './CreationProgressTracker.js'
|
|||
|
|
|
|||
|
|
const api = new CreationApi('https://server.com', 'ORG001', 'your-secret')
|
|||
|
|
const { workId } = await api.createBySentence({ ... })
|
|||
|
|
|
|||
|
|
const tracker = new CreationProgressTracker({
|
|||
|
|
serverUrl: 'https://server.com',
|
|||
|
|
orgId: 'ORG001', appKey: 'ORG001', appSecret: 'your-secret',
|
|||
|
|
workId,
|
|||
|
|
onProgress: (pct, msg) => updateUI(pct, msg),
|
|||
|
|
onComplete: (result) => showResult(result)
|
|||
|
|
})
|
|||
|
|
tracker.start()
|
|||
|
|
|
|||
|
|
// 用户离开页面时
|
|||
|
|
tracker.stop()
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 接口清单
|
|||
|
|
|
|||
|
|
| 接口 | 方法 | 路径 | 签名 | 说明 |
|
|||
|
|
|------|------|------|------|------|
|
|||
|
|
| B1 | POST | /api/v1/query/validate | 需要 | 校验额度 |
|
|||
|
|
| B2 | GET | /api/v1/query/work/{workId} | 需要 | 作品详情+实时进度 |
|
|||
|
|
| B3 | GET | /api/v1/query/works | 需要 | 作品列表 |
|
|||
|
|
| B6 | GET | /api/v1/query/styles | 不需要 | 画风列表 |
|
|||
|
|
| A1 | POST | /api/v1/creation/one-sentence | 需要 | 一句话创作 |
|
|||
|
|
| A2 | POST | /api/v1/creation/scene-elements | 需要 | 四要素创作 |
|
|||
|
|
| A3 | POST | /api/v1/creation/image-story | 需要 | 图片故事创作 |
|
|||
|
|
| A4 | POST | /api/v1/creation/video | 需要 | 视频合成 |
|
|||
|
|
|
|||
|
|
## 进度追踪策略
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
WebSocket 连接成功
|
|||
|
|
│ 实时推送 progress + message
|
|||
|
|
│
|
|||
|
|
├─ 断连 → 自动重连（3秒间隔）
|
|||
|
|
│ 同时启动 B2 HTTP 轮询补位（5秒间隔）
|
|||
|
|
│
|
|||
|
|
├─ 重连成功 → 停止轮询，恢复 WebSocket
|
|||
|
|
│ 立即查一次 B2 补齐断连期间状态
|
|||
|
|
│
|
|||
|
|
└─ progress=100 或 -1 → 查 B2 获取完整数据 → onComplete 回调
|
|||
|
|
```
|