Vue3+AnimeJS场景下，如何让OpenAI API返回指定代码并改参数

我在Vue3项目中使用OpenAI开发包，目前能正常获取API响应，但希望API返回仅修改参数值的指定puppet调用代码结构（实现用户要求的木偶动作），但当前API返回的是JSON结构，无法直接使用。

当前核心问题出在系统提示词和用户prompt的冲突：原系统提示要求输出JSON，导致AI优先返回JSON格式，忽略了返回代码的需求。以下是具体解决方案：

解决方案步骤 #

1. 修改系统提示词 #

将系统角色的提示从要求输出JSON，改为明确要求输出指定格式的JavaScript代码块，不要任何额外解释或JSON结构。

2. 优化用户prompt #

更清晰地定义输出要求：明确给出要修改的模板代码，指定仅替换translatXValues和rotateValues的具体值，不要改变代码结构。

修改后的代码示例 #

以下是调整后的sendQuestion方法及相关配置：

async sendQuestion() {
  // 明确的prompt，指定输出格式和修改规则
  const userPrompt = `
  请严格按照以下模板返回JavaScript代码，仅替换translatXValues和rotateValues的具体值，不要修改代码结构，不要添加任何额外内容或JSON：
  模板：
  this.puppet('#rightArm', '替换成具体X位移值', '替换成具体旋转值');
  this.puppet('#leftArm', '替换成具体X位移值', '替换成具体旋转值');
  this.puppet('#leftLeg', '替换成具体X位移值', '替换成具体旋转值');
  this.puppet('#rightLeg', '替换成具体X位移值', '替换成具体旋转值');
  this.puppet('#body', '替换成具体X位移值', '替换成具体旋转值');
  this.puppet('#head', '替换成具体X位移值', '替换成具体旋转值');

  需求：让我的木偶${this.question}
  注意：位移值需要带px单位，旋转值需要带deg单位，比如'10px'、'-5deg'
  `;

  try {
    const completion = await openai.chat.completions.create({
      messages: [
        {
          role: "system",
          content: "你是一个代码生成助手，仅输出符合要求的JavaScript代码块，不要任何解释、说明或JSON结构。"
        },
        { role: "user", content: userPrompt }
      ],
      model: "gpt-3.5-turbo-1106",
    });

    if (completion.choices[0].message.content) {
      this.emitter.emit('openai', completion.choices[0].message.content.trim());
    }
  } catch (error) {
    console.error(error);
  }
}

关键说明 #

• 原系统提示"You are a helpful assistant designed to output JSON."是导致返回JSON的核心原因，必须修改。
• 用户prompt中给出明确的代码模板和参数格式要求（如单位），能大幅提升AI输出的准确性。
• 使用trim()去除返回内容的首尾空白，避免多余换行或空格影响后续执行。

内容的提问来源于stack exchange，提问作者LK29