前端10行代码调用gpt接口生成ai原生应用(附流式接口调用方法和一个小坑)

1、正常调用 2、流式接口调用 3、流式接口时间长会有，重发机制，无法关闭，使用sinal.abort()

用到的东西： openai、fetchEventSource

接口api如下,非流式调用

const msg = await chat({
    messages: [
      { role: "system", content: roleDuty },
      { role: "user", content: doWhat },
    ],
    temperature: 0.01,
    model: "gpt-3.5-turbo",
    // functions: CHAT_PROMPT.tools.map(tool => tool.function),
  }

前端调用非流式接口

res = await axios.post(`/api/urlToEssay?videoUrl=${url}`, {
        prompt,
      });

流式调用

const response = await openai.chat.completions.create({
      temperature: 0.01,
      model: "gpt-3.5-turbo",
      messages: [
        { role: "system", content: roleDuty },
        { role: "user", content: JSON.stringify({ prompt:promptText }) },
      ],
      stream: true,
    });
    // 将数据流式地发送到客户端
    for await (const chunk of response) {
      let message = chunk.choices[0]?.delta?.content || "";
      console.log(message);
      res.write(`data: ${JSON.stringify(message)}\n\n`);
    }

前端调用流式接口

fetchEventSource(`/api/urlToEssay_v2?videoUrl=${url}`, {
      method: "POST",
      body: JSON.stringify({
        prompt,
      }),
      signal: ctrl2.signal,
      onmessage: (event) => {
        console.log(essayRef.current)
        essayRef.current += JSON.parse(event.data);
      },
      onerror: (event) => {
        console.log("asyncEvent2", event);
        throw event;
      },
      onclose: () => {
        setEssay(essayRef.current);
        essayRef.current=''
        ctrl2.abort()
      },
    });

防止无限重复请求的重点 ctrl2.abort()

正文，待补充