我有一个简单的 React 应用，使用 OpenAI API 生成图像，如下所示。

`

import logo from './logo.svg';import './App.css';import { useState } from "react";const { Configuration, OpenAIApi } = require("openai");const configuration = new Configuration({  apiKey: process.env.OPENAI_API_KEY,});const openai = new OpenAIApi(configuration);function App() {  const [userPrompt, setUserPrompt] = useState("")  const [imageUrl, setImageUrl] = useState("")  const generateImage = async () => {    const imageParameters = {      prompt: userPrompt,      n:1,      size: "256x256",    }    const response = await openai.createImage(imageParameters);    const urlData = response.data.data[0].url;    console.log("urlData =",urlData);    setImageUrl(urlData);  }  return (    <div className="App">      {        imageUrl          ? <img src={imageUrl} className="image" alt="ai thing" />          : <img src={logo} className="image" alt="logo" />      }      <p>使用 DALL·E 生成独特图像</p>      <p>你想看到什么？</p>      <input        placeholder='悉尼歌剧院的日落'        onChange={(e) => setUserPrompt(e.target.value)}      />      <button onClick={() => generateImage()}>生成</button>    </div>  );}export default App;

`

API KEY 位于 .env 文件中，并且是正确的。然而，当我点击生成按钮时，控制台会抛出如下错误：

我尝试使用 DALL-E API 创建一个 React 应用来生成图像，参考了这个指南。但是在 API 调用/请求之后，我无法接收到（图像）响应消息。

回答：

这里是一个工作的 ES6 NodeJs 示例，它可以保存 PNG 文件。要使其工作，请在 package.json 的顶部添加 “type”: “module”。OpenAi 的请求会返回一个指向 PNG 文件的 URL 数组。createImage 中的 “n” 是数组中图像的数量。

import { Configuration, OpenAIApi } from "openai";import http from "https"; // 或 'https' 用于 https:// URLsimport fs from "fs";const configuration = new Configuration({  apiKey: OPENAI_API_KEY,});const openai = new OpenAIApi(configuration);const response = await openai.createImage({  prompt: "一只可爱的海獭宝宝",  n: 1,  size: "1024x1024",});const file = fs.createWriteStream("test.png");const request = http.get(response.data.data[0].url, function (response) {  response.pipe(file);  file.on("finish", () => {    file.close();    console.log("下载完成！");  });});