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 回调
|
||
```
|