切换主题
字数
1077 字
阅读时间
5 分钟
前后端联调
prompt
总结一下开发的关键点, 调接口需要的 参数
1. 前端接口参数:
ts
interface AICreateParams {
topic: string // 问卷主题
questionCount: number // 题目数量(1-10)
purpose: string // 调研目的
}
2. 后端返回数据格式:
ts
interface AIResponseData {
questions: Array<{
title: string // 问题标题
options: string[] // 选项数组
}>
}
3. 关键开发点:
A. API 配置:
- 接口地址:
/api/ai/generate
- 请求方法:POST
- 超时设置:建议 30 秒以上,因为 AI 生成可能需要较长时间
ts
timeout: 30 * 1000 // 在 ajax.ts 中设置
B. 错误处理:
ts
try {
const data = await generateQuestionnaire(values)
// 处理成功响应
} catch (error) {
message.error(error instanceof Error ? error.message : '创建失败,请重试')
}
C. 数据转换:
- 将 AI 生成的问题转换为问卷组件格式
ts
const componentInfo = {
fe_id: nanoid(),
type: 'questionRadio',
title: question.title,
props: {
title: question.title,
options: question.options.map(text => ({
text,
value: text,
})),
value: '',
isVertical: true,
},
}
D. UI 交互:
- 使用 Modal 弹窗收集用户输入
- 提供加载状态反馈
- 成功后自动关闭弹窗并清空表单
中途遇到的问题
超时问题: 默认的 10 秒超时时间对 AI 生成来说太短 解决:增加超时时间
ts
timeout: 30 * 1000 // 30秒
数据格式转换问题: AI 返回的数据需要转换为组件格式
json
// 需要转换的格式
{
title: string,
options: string[]
}
// 转换为
{
fe_id: string,
type: 'questionRadio',
title: string,
props: {
options: Array<{text: string, value: string}>
}
}
后端调用 千帆 AppBuilder api
让我总结一下使用百度 AI API 生成问卷问题的关键点:
1. 接口调用流程
- 第一步:创建会话
ts
POST /v2/app/conversation
{
"app_id": "YOUR_APP_ID"
}
第二步:生成问题
ts
POST /v2/app/conversation/runs
{
"app_id": "YOUR_APP_ID",
"conversation_id": "从第一步获取的 conversation_id",
"query": "问题生成提示语",
"stream": false
}
2. 必需参数
- `app_id`: 应用标识
- `Authorization`: 认证令牌(在请求头中)
- 生成问题时需要的参数:
- `topic`: 问卷主题
- `questionCount`: 问题数量
- `purpose`: 调研目的
3. 返回数据格式
ts
{
"questions": [
{
"title": "问题标题",
"options": ["选项1", "选项2", "选项3", ...]
},
// ... 更多问题
]
}
4. 调用示例
ts
// 前端调用
const generateQuestions = async (topic: string, count: number, purpose: string) => {
const res = await axios.post('/api/question/generate', {
topic,
questionCount: count,
purpose
});
return res.data;
};
// 后端处理
@Post('generate')
@Public()
async generateQuestions(
@Body() dto: GenerateQuestionDto
) {
const { topic, questionCount, purpose } = dto;
return this.questionService.generateQuestions(topic, questionCount, purpose);
}
5. 注意事项
- 需要正确配置
app_id
和Authorization
令牌 - 建议使用环境变量存储敏感信息
- 需要处理 API 调用可能的错误情况
- JSON 响应需要特殊处理以确保正确解析
这些是实现 AI 问题生成功能的核心要点,确保这些配置和参数正确可以帮助顺利集成该功能。
在开发过程中遇到了以下主要问题:
JSON 解析错误
- 问题:AI 返回的 JSON 字符串包含中文标点和特殊格式
- 错误信息:
"好的,以下是为您生成"... is not valid JSON
- 解决方案:实现了两步解析策略
ts
// 1. 先尝试直接解析
try {
return JSON.parse(jsonStr);
} catch (firstError) {
// 2. 失败后进行清理再解析
cleanJsonStr = jsonStr.replace(/。/g, '') // 处理中文标点
.replace(/,/g, ',')
.replace(/:/g, ':')
// ... 更多清理步骤
}
格式不一致问题
- AI 返回的 JSON 结构有时缺少结束括号
- 解决方案:添加括号检查和补全
ts
if (!cleanJsonStr.endsWith('}')) {
cleanJsonStr += '}';
}
网络超时问题
- API 调用偶尔超时
- 解决方案:添加重试机制和超时设置
ts
const options = {
timeout: 30000, // 30秒超时
// ... 其他选项
};
// 添加重试逻辑
for (let i = 0; i < retries; i++) {
try {
const response = await fetch(url, options);
// ...
} catch (error) {
if (i === retries - 1) throw error;
await new Promise(resolve => setTimeout(resolve, Math.pow(2, i) * 1000));
}
}
贡献者
sunchengzhi