在使用R3F时,如何解决openAI API(DALL.E)给出的控制台错误?

我正在使用DALL制作一个三JS网站(R3F)。E API,但它不能正常工作,我得到了一些错误。请帮我解决这个问题。

//服务器目录 //index.js

import express from "express";
import * as dotenv from "dotenv"
import cors from 'cors'

import dalleRoutes from './routes/dalle.routes.js'

dotenv.config()
const app = express()
app.use(cors())
app.use(express.json({limg:"50mb"}))

app.use('/api/v1/dalle',dalleRoutes)

app.get('/',(req,res)=>{
    res.status(200).json({message :"Hello From DALL.E"})
})

app.listen(8080,()=>console.log("server has started on port 8080"))

//dalle.routes.js

import express from 'express'
import * as dotenv from 'dotenv'
import OpenAI from 'openai';





dotenv.config()

const router = express.Router()



const openai = new OpenAI({
    organization: "org-4AVac6GLlT8mZNB7T5K9Ak5r",
    apiKey:process.env.OPENAI_API_KEY,
})

router.route('/').get((req,res)=>{
    res.status(200).json({message:"Hello from DLL.E ROUTES"})
})

router.route('/').post(async(req,res)=>{
    try{
        const {prompt} = req.body

        const response = await openai.createImage({
            prompt,
            n:1,
            size:'1024x1024',
            response_format:'b64_json'
        })


        const image = response.data.data[0].b64_json
        console.log("Generated image:", image);

        res.status(200).json({photo:image})

    }catch(error){
        console.error();
        res.status(500).json({message:"Something went wrong "})
    }
})
export default router

//客户端目录

//pages/customizer.jsx

  

import {useState, useEffect } from 'react'
import { AnimatePresence , motion} from 'framer-motion'
import { useSnapshot } from 'valtio'

import config from '../config/config'
import state from '../store'
import {download, logoShirt} from '../assets'
import {downloadCanvasToImage,reader} from '../config/helpers'
import {EditorTabs, FilterTabs, DecalTypes} from '../config/constants'
import { fadeAnimation, slideAnimation } from '../config/motion'
import {AIPicker, ColorPicker,FilePicker,CustomButton,Tab} from '../components'
const Customizer = () => {
  const snap = useSnapshot(state)
  const [file,setFile] = useState("")
  const [prompt,setPrompt] = useState("")
  const [generatingImg,setGeneratingImg]= useState(false)
  const [activeEditorTab, setActiveEditorTab] = useState("")
  const [activeFilterTab, setActiveFilterTab] = useState({
    logoShirt:true,
    stylishShirt:false
  }
  )
  //show tab content Depending on the active tab
  const generateTabContent= ()=>{
     switch(activeEditorTab){
      case "colorpicker":
      return <ColorPicker/>
      case "filepicker":
      return <FilePicker
      file={file}
      setFile={setFile}
      readFile={readFile}
      />

      case "aipicker":
      return <AIPicker
      prompt={prompt}
      setPrompt={setPrompt}
      generatingImg={generatingImg}
      handleSubmit={handleSubmit}
      />
      default:
        return null

     }
  }

  const handleSubmit = async(type)=>{
    if(!prompt) return alert ("Please enter a prompt")
    try{
       //call backend to generate AI image
        setGeneratingImg(true)

        const response = await fetch('http://localhost:8080/api/v1/dalle',{

          method:'POST',
          headers:{
            'Content-Type':'application/json',
            // "Authorization": "Bearer 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"
          },
          body:JSON.stringify({
            prompt,
          })


        })
        const data= await response.json()
        console.log("Received data:", data);
        handleDecals(type,`data:image/png;base64,${data.photo}`)


    }catch(error){
      alert(error)
    }finally{
      setGeneratingImg(false)
      setActiveEditorTab("")
    }
  }
  const handleDecals = (type,result) =>{
    if (!result) {
      console.error("Received undefined image data.");
      console.log("Complete response data:", result); // Log the entire response data for debugging
      return;
    }
    const decalType= DecalTypes[type]
    state[decalType.stateProperty]=result
    if(!activeFilterTab[decalType.filterTab]){
      handleActiveFilterTab(decalType.filterTab)
    }
  }

  const handleActiveFilterTab = (tabName)=>{
    switch(tabName){
      case "logoShirt":
        state.isLogoTexture = !activeFilterTab[tabName]
        break
      case "stylishShirt":
        state.isFilterTab = !activeFilterTab[tabName]
        break
      default:
        state.isFullTexture = false
        state.isLogoTexture = true  
    }
    // after setting the state activeFilterTab is updated
    setActiveFilterTab((prevState)=>{
      return{
        ...prevState,
        [tabName]:!prevState[tabName]
      }
    })
  }

  const readFile = (type)=>{
    reader(file)
    .then((result)=>{
      handleDecals(type,result)
      setActiveEditorTab("")
    })
  }

  return (
    <AnimatePresence>
      {!snap.intro && (
        <>
         <motion.div 
         key="custom"
         className='absolute top-0 left-0 z-10'
         {...slideAnimation('left')}>
          <div className='flex items-center min-h-screen'>
              <div className='editortabs-container tabs'>
                {EditorTabs.map((tab)=>(
                  <Tab
                  key={tab.name}
                  tab={tab}
                  handleClick={()=>{setActiveEditorTab(tab.name)}}/>
                ))}
                {generateTabContent()}
              </div>
          </div>

         </motion.div>
         <motion.div
         className='absolute z-10 top-5 right-5'
         {...fadeAnimation}>
          <CustomButton
          type="filled"
          title="Go Back"
          handleClick={()=>state.intro=true}
          customStyles='w-fit px-4 py-2.5 font-bold text-sm'
          />

         </motion.div>

         <motion.div className='filtertabs-container'
         {...slideAnimation('up')}>
           {FilterTabs.map((tab)=>(
                  <Tab
                  key={tab.name}
                  tab={tab}
                  isFilterTab
                  isActiveTab={activeFilterTab[tab.name]}
                  handleClick={()=>{handleActiveFilterTab(tab.name)}}/>
                ))}

         </motion.div>
        </>
      )}
    </AnimatePresence>
  )
}

export default Customizer

我试着搜索开放的人工智能文档,但我无法解决这个问题,所以如果你们能帮我解决问题,我将不胜感激。我认为旧的API文档有问题,有些东西发生了变化,所以我不知道发生了什么。