使用OpenAI API生成React路由代码时首行出现多余字符串求助

问题原因 #

你遇到的首行多余字符串and for component give UpperCaseFileName as component value，是因为text-davinci-003模型在补全时自行延续了prompt中未明确收尾的指令逻辑。你的prompt仅定义了路由path的规则，模型推测你可能遗漏了component的配置规则，因此补全了这段说明文字，导致生成的代码包含无效前缀。

解决方案 #

1. 优化Prompt，明确指令边界 #

在prompt末尾补充完整的component规则，并明确要求只返回代码，不添加额外说明，避免模型自行补全无关内容。修改后的prompt示例：

create a router config.js file with name as routerConfig for files page1.js only using BrowserRouter,Route and Routes tag from react-router-dom.Import BrowserRouter,Route and Routes tag from react-router-dom.Enclose all Route tag with Routes tag.Don't use Switch.Import files from ./filename in lowercase.In Route tag,for path give /filename itself as path value, and for component give UpperCaseFileName as component value.只返回最终的代码内容，不要添加任何额外说明。

2. 对返回结果进行预处理 #

如果无法修改prompt，可以在获取生成结果后，通过代码过滤掉非代码开头的无效内容。示例：

var code = codeResponse.data.choices[0].text;
// 分割为行，找到第一个以import开头的有效代码行
const codeLines = code.split('\n');
const validStartIndex = codeLines.findIndex(line => line.trim().startsWith('import'));
if (validStartIndex !== -1) {
  code = codeLines.slice(validStartIndex).join('\n');
}
console.log(code);

这段代码会自动定位到代码的起始位置，截取有效部分，剔除开头的多余字符串。

3. 更换指令遵循性更好的模型 #

text-davinci-003属于旧版补全模型，指令遵循性不如新版对话模型（如gpt-3.5-turbo、gpt-4）。更换为对话模型并调整调用方式，能大幅减少此类问题。示例代码：

const { Configuration, OpenAIApi } = require("openai");

async function generateRouterConfig() {
  const prompt = `create a router config.js file with name as routerConfig for files page1.js only using BrowserRouter,Route and Routes tag from react-router-dom.Import BrowserRouter,Route and Routes tag from react-router-dom.Enclose all Route tag with Routes tag.Don't use Switch.Import files from ./filename in lowercase.In Route tag,for path give /filename itself as path value`;
  
  const configuration = new Configuration({
    apiKey: "API-KEY",
  });
  const openai = new OpenAIApi(configuration);

  const codeResponse = await openai.createChatCompletion({
    model: "gpt-3.5-turbo",
    messages: [
      { role: "user", content: `${prompt} 只返回完整的代码，不要添加任何额外说明文字` }
    ],
    temperature: 0.7,
  });

  const code = codeResponse.data.choices[0].message.content;
  console.log(code);
}

generateRouterConfig();

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