Build and Deploy an AI-Powered 3D Website Using React | 2023 Three JS Course Tutorial for Beginners

Customizer.jsx

{/* Download button */}
            <button className='download-btn' onClick={downloadCanvasToImage}>
              <img
                src={download}
                alt='download_image'
                className='w-3/5 h-3/5 object-contain'
              />
            </button>

index.css

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,600;1,900&display=swap");
@import url("https://rsms.me/inter/inter.css");

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  font-family: "Inter", sans-serif;
}

@supports (font-variation-settings: normal) {
  html {
    font-family: "Inter var", sans-serif;
  }
}

.app {
  @apply relative w-full h-screen overflow-hidden;
}

.home {
  @apply w-fit xl:h-full flex xl:justify-between justify-start items-start flex-col xl:py-8 xl:px-36 sm:p-8 p-6 max-xl:gap-7 absolute z-10;
}

.home-content {
  @apply flex-1 xl:justify-center justify-start flex flex-col gap-10;
}

.head-text {
  @apply xl:text-[10rem] text-[6rem] xl:leading-[11rem] leading-[7rem] font-black text-black;
}

.download-btn {
  @apply w-14 h-14 flex justify-center items-center rounded-full glassmorphism cursor-pointer outline-none;
}

.editortabs-container {
  @apply glassmorphism w-16 border-[2px] rounded-lg flex flex-col justify-center items-center ml-1 py-4 gap-4;
}

.filtertabs-container {
  @apply absolute z-10 bottom-5 right-0 left-0 w-full flex justify-center items-center flex-wrap gap-4;
}

.aipicker-container {
  @apply absolute left-full ml-3 glassmorphism p-3 w-[195px] h-[220px] rounded-md flex flex-col gap-4;
}

.aipicker-textarea {
  @apply w-full bg-transparent text-sm border border-gray-300 p-2 outline-none flex-1;
}

.filepicker-container {
  @apply absolute left-full ml-3 glassmorphism p-3 w-[195px] h-[220px] flex flex-col rounded-md;
}

.filepicker-label {
  @apply border border-gray-300 py-1.5 px-2 rounded-md shadow-sm text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 cursor-pointer w-fit;
}

.tab-btn {
  @apply w-14 h-14 flex justify-center items-center cursor-pointer select-none;
}

.glassmorphism {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 30px 0 rgba(31, 38, 135, 0.07);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

input[type="file"] {
  z-index: -1;
  position: absolute;
  opacity: 0;
}

.sketch-picker {
  width: 170px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 30px 0 rgba(31, 38, 135, 0.07) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 6px !important;
}

.sketch-picker > div:nth-child(3) {
  display: none !important;
}

Hello guys , did you solve the problem , i have the same problem like you @jvan0

Why when AI Picker not load image? when Click Ask AI button this error messege pop up TypeError: Failed to fetch
This error Messege display in Console POST http://localhost:8080/api/v1/dalle net::ERR_CONNECTION_REFUSED handleSubmit @ Customizer.jsx:68 handleClick @ AIPicker.jsx:36 callCallback2 @ chunk-ZK6T5TI4.js?v=e6e1dfba:3674 invokeGuardedCallbackDev @ chunk-ZK6T5TI4.js?v=e6e1dfba:3699 invokeGuardedCallback @ chunk-ZK6T5TI4.js?v=e6e1dfba:3733 invokeGuardedCallbackAndCatchFirstError @ chunk-ZK6T5TI4.js?v=e6e1dfba:3736 executeDispatch @ chunk-ZK6T5TI4.js?v=e6e1dfba:7016 processDispatchQueueItemsInOrder @ chunk-ZK6T5TI4.js?v=e6e1dfba:7036 processDispatchQueue @ chunk-ZK6T5TI4.js?v=e6e1dfba:7045 dispatchEventsForPlugins @ chunk-ZK6T5TI4.js?v=e6e1dfba:7053 (anonymous) @ chunk-ZK6T5TI4.js?v=e6e1dfba:7177 batchedUpdates$1 @ chunk-ZK6T5TI4.js?v=e6e1dfba:18909 batchedUpdates @ chunk-ZK6T5TI4.js?v=e6e1dfba:3579 dispatchEventForPluginEventSystem @ chunk-ZK6T5TI4.js?v=e6e1dfba:7176 dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ chunk-ZK6T5TI4.js?v=e6e1dfba:5478 dispatchEvent @ chunk-ZK6T5TI4.js?v=e6e1dfba:5472 dispatchDiscreteEvent @ chunk-ZK6T5TI4.js?v=e6e1dfba:5449
This is My Customizer.jsx

`import React, { 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 } from '../assets';
import { downloadCanvasToImage, reader } from '../config/helpers';
import { EditorTabs, FilterTabs, DecalTypes } from '../config/constants';
import { fadeAnimation, slideAnimation } from '../config/motion';
import { AIPicker, ColorPicker, CustomButton, FilePicker, 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 activeTab
  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 {
      setGeneratingImg(true);

      const response = await fetch('http://localhost:8080/api/v1/dalle', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          prompt,
        })
      })


      const data = await response.json();

      handleDecals(type, `data:image/png;base64,${data.photo}`)
    } catch (error) {
      alert(error)
    } finally {
      setGeneratingImg(false);
      setActiveEditorTab("");
    }
  }

  const handleDecals = (type, result) => {
    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.isFullTexture = !activeFilterTab[tabName];
        break;
      default:
        state.isLogoTexture = true;
        state.isFullTexture = false;
        break;
    }

    // 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`

Can someone Help me???

Did you manage to fix it? I'm facing the same issue: When trying to generate an Image AI (My code looks the same as in the tutorial)

Hi, can you resolve this?

This is what I found:
This is due to the server side issue. Openai image generator is no longer free so it requires credit/money to buy the images for new accounts.

hey can anyone point me towards the creating download/save button in the customize section, it says at the end of the video to find that code in the description but i cannot find it.

Any solution to this

Hi guys,

My landing page button is over size and also the background is dark, can anyone help please!

try to change the version of three in package.json to this "three": "^0.154.0",

Hey guys I'm getting this error The page works and then I get this errors within a second.

Can someone help me out with this

Go to index.js in store folder and change isLogoTextur value from true to false

PLEASE HELP ME WITH MY SHADOW IT LOOKS VERY DARK COMPARED TO HIS: HERE IS MY CODE:

import { useRef } from "react"; import { AccumulativeShadows, RandomizedLight } from "@react-three/drei";

const Backdrop = () => { const shadows = useRef();

return ( <AccumulativeShadows ref={shadows} temporal frames={60} alphaTest={0.85} scale={10} rotation={[Math.PI / 2, 0, 0]} position={[0, 0, -0.14]} > <RandomizedLight amount={1} radius={9} intensity={0.55} ambient={0.25} position={[5, 5, -10]} /> <RandomizedLight amount={1} radius={5} intensity={0.25} ambient={0.55} position={[-5, 5, -9]} /> ); };

export default Backdrop;

Make the intensity= 1.5

I am facing this issue when i am running the server file
import { Configuration, OpenAIApi} from 'openai'; ^^^^^^^^^^^^^ SyntaxError: The requested module 'openai' does not provide an export named 'Configuration' at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21) at async ModuleJob.run (node:internal/modules/esm/module_job:181:5) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:281:24) at async loadESM (node:internal/process/esm_loader:88:5) at async handleMainPromise (node:internal/modules/run_main:65:12)

@Abhishek058 You have installed version 4 open ai API and you are using modules of version 3. use this

// Old(Version 3)
import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

// New(Version 4)
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY // This is also the default, can be omitted
});

const openai = new OpenAI(config);
on line no. 13 and the server started working

Hello guy, pls am having some issue with codes, the css rule are not working on the threejs image inside my Home.jsx file

Hey man , look again the updated video , vecause the author has corrected it. 👋 ✒️KleaDushku🖋

…

On Wed, 24 Jan 2024 at 12:52, Learn-01 ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Hello guy, pls am having some issue with codes, the css rule are not working on the threejs image inside my Home.jsx file — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/597252d9d77fa65e30f596d99b03cc11#gistcomment-4848566> or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWTEZLC5T6MTHTPFE65MA5DYQDYWVBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTEMJWHAYDCNJTU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

PLEASE HELP ME WITH MY SHADOW IT LOOKS VERY DARK COMPARED TO HIS: HERE IS MY CODE:
import { useRef } from "react"; import { AccumulativeShadows, RandomizedLight } from "@react-three/drei";
const Backdrop = () => { const shadows = useRef();
return ( <AccumulativeShadows ref={shadows} temporal frames={60} alphaTest={0.85} scale={10} rotation={[Math.PI / 2, 0, 0]} position={[0, 0, -0.14]} > <RandomizedLight amount={1} radius={9} intensity={0.55} ambient={0.25} position={[5, 5, -10]} /> <RandomizedLight amount={1} radius={5} intensity={0.25} ambient={0.55} position={[-5, 5, -9]} /> ); };
export default Backdrop;

i solved by changing the version of three in package.json to this "three": "^0.154.0",

PLEASE HELP ME WITH MY SHADOW IT LOOKS VERY DARK COMPARED TO HIS: HERE IS MY CODE:

import { useRef } from "react"; import { AccumulativeShadows, RandomizedLight } from "@react-three/drei";

const Backdrop = () => { const shadows = useRef();

return ( <AccumulativeShadows ref={shadows} temporal frames={60} alphaTest={0.85} scale={10} rotation={[Math.PI / 2, 0, 0]} position={[0, 0, -0.14]} > <RandomizedLight amount={1} radius={9} intensity={0.55} ambient={0.25} position={[5, 5, -10]} /> <RandomizedLight amount={1} radius={5} intensity={0.25} ambient={0.55} position={[-5, 5, -9]} /> ); };

export default Backdrop;

Hey! pls sir did you later fix the code? if yes pls can you paste the codes in you index.css file because, i think mine is lacking some of the rules

Hey guys I'm getting this error The page works and then I get this errors within a second.
Can someone help me out with this

Go to index.js in store folder and change isLogoTextur value from true to false

Hey man , look again the updated video , vecause the author has corrected it. 👋 ✒️KleaDushku🖋
…
On Wed, 24 Jan 2024 at 12:52, Learn-01 @.> wrote: @.* commented on this gist. ------------------------------ Hello guy, pls am having some issue with codes, the css rule are not working on the threejs image inside my Home.jsx file — Reply to this email directly, view it on GitHub https://gist.github.com/adrianhajdin/597252d9d77fa65e30f596d99b03cc11#gistcomment-4848566 or unsubscribe https://github.com/notifications/unsubscribe-auth/AWTEZLC5T6MTHTPFE65MA5DYQDYWVBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTEMJWHAYDCNJTU52HE2LHM5SXFJTDOJSWC5DF . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub .

Sorry where can i get it, do you have any link or something, because I've checked everywhere i could.
Pls help me out!!

PLEASE HELP ME WITH MY SHADOW IT LOOKS VERY DARK COMPARED TO HIS: HERE IS MY CODE:

import { useRef } from "react"; import { AccumulativeShadows, RandomizedLight } from "@react-three/drei";

const Backdrop = () => { const shadows = useRef();

return ( <AccumulativeShadows ref={shadows} temporal frames={60} alphaTest={0.85} scale={10} rotation={[Math.PI / 2, 0, 0]} position={[0, 0, -0.14]} > <RandomizedLight amount={1} radius={9} intensity={0.55} ambient={0.25} position={[5, 5, -10]} /> <RandomizedLight amount={1} radius={5} intensity={0.25} ambient={0.55} position={[-5, 5, -9]} /> ); };

export default Backdrop;

Intensity 1.5-1.9 will be ok

Why when AI Picker not load image? when Click Ask AI button this error messege pop up TypeError: Failed to fetch
This error Messege display in Console POST http://localhost:8080/api/v1/dalle net::ERR_CONNECTION_REFUSED handleSubmit @ Customizer.jsx:68 handleClick @ AIPicker.jsx:36 callCallback2 @ chunk-ZK6T5TI4.js?v=e6e1dfba:3674 invokeGuardedCallbackDev @ chunk-ZK6T5TI4.js?v=e6e1dfba:3699 invokeGuardedCallback @ chunk-ZK6T5TI4.js?v=e6e1dfba:3733 invokeGuardedCallbackAndCatchFirstError @ chunk-ZK6T5TI4.js?v=e6e1dfba:3736 executeDispatch @ chunk-ZK6T5TI4.js?v=e6e1dfba:7016 processDispatchQueueItemsInOrder @ chunk-ZK6T5TI4.js?v=e6e1dfba:7036 processDispatchQueue @ chunk-ZK6T5TI4.js?v=e6e1dfba:7045 dispatchEventsForPlugins @ chunk-ZK6T5TI4.js?v=e6e1dfba:7053 (anonymous) @ chunk-ZK6T5TI4.js?v=e6e1dfba:7177 batchedUpdates$1 @ chunk-ZK6T5TI4.js?v=e6e1dfba:18909 batchedUpdates @ chunk-ZK6T5TI4.js?v=e6e1dfba:3579 dispatchEventForPluginEventSystem @ chunk-ZK6T5TI4.js?v=e6e1dfba:7176 dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ chunk-ZK6T5TI4.js?v=e6e1dfba:5478 dispatchEvent @ chunk-ZK6T5TI4.js?v=e6e1dfba:5472 dispatchDiscreteEvent @ chunk-ZK6T5TI4.js?v=e6e1dfba:5449
This is My Customizer.jsx

`import React, { 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 } from '../assets';
import { downloadCanvasToImage, reader } from '../config/helpers';
import { EditorTabs, FilterTabs, DecalTypes } from '../config/constants';
import { fadeAnimation, slideAnimation } from '../config/motion';
import { AIPicker, ColorPicker, CustomButton, FilePicker, 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 activeTab
  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 {
      setGeneratingImg(true);

      const response = await fetch('http://localhost:8080/api/v1/dalle', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          prompt,
        })
      })


      const data = await response.json();

      handleDecals(type, `data:image/png;base64,${data.photo}`)
    } catch (error) {
      alert(error)
    } finally {
      setGeneratingImg(false);
      setActiveEditorTab("");
    }
  }

  const handleDecals = (type, result) => {
    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.isFullTexture = !activeFilterTab[tabName];
        break;
      default:
        state.isLogoTexture = true;
        state.isFullTexture = false;
        break;
    }

    // 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`

Can someone Help me???

Did you manage to fix it? I'm facing the same issue: When trying to generate an Image AI (My code looks the same as in the tutorial)

Hi, can you resolve this?

Am facing such problem, were you able to sort it out sir

[]

didn't show anything because of these error. how to solve these error.
Hello guys, the problem is not with the component of Tshirt it was with open AI it doesnot support create image function its with open AI 4th version, just install open ai 3 version npm install openai@3

Anyone facing the below error
Failed to load resource: net::ERR_CONNECTION_TIMED_OUT 2index.js:26 Uncaught Error: Could not load potsdamer_platz_1k.hdr: Failed to fetch) at Object.onError (index-27578f8f.esm.js:1643:36) at three.module.js:41932:39 console.js:213 The above error occurred in the component:

at EnvironmentCube (http://localhost:5173/node_modules/.vite/deps/@react-three_drei.js?v=6e8e4e89:115119:3)
at Environment (http://localhost:5173/node_modules/.vite/deps/@react-three_drei.js?v=6e8e4e89:115203:16)
at Suspense
at ErrorBoundary (http://localhost:5173/node_modules/.vite/deps/chunk-2NIKWBGZ.js?v=6e8e4e89:16596:5)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-2NIKWBGZ.js?v=6e8e4e89:18339:21)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-2NIKWBGZ.js?v=6e8e4e89:17941:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. overrideMethod @ console.js:213 2react-three-fiber.esm.js:144 Uncaught Error: Could not load potsdamer_platz_1k.hdr: Failed to fetch) at Object.onError (index-27578f8f.esm.js:1643:36) at three.module.js:41932:39 console.js:213 The above error occurred in the <ForwardRef(Canvas)> component:

at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-2NIKWBGZ.js?v=6e8e4e89:18483:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-2NIKWBGZ.js?v=6e8e4e89:18339:21)
at CanvasWrapper
at CanvasModel
at main
at App

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. overrideMethod @ console.js:213 react-dom.development.js:26923 Uncaught Error: Could not load potsdamer_platz_1k.hdr: Failed to fetch) at Object.onError (index-27578f8f.esm.js:1643:36) at three.module.js:41932:39
But if I remove the shirt will come up, even all the errors will erase up

Hello, <Environment path="/hdri/" files="potsdamer_platz_1k.hdr" /> Download this hdr file (https://polyhaven.com/a/potsdamer_platz) and place it inside hdri folder inside public folder and in the component add props like this.

Can you please explain what did you meant by adding props in components

@ankytastic I'm getting the same error, and it's because '@react-three/drei' has been updated. Reinstalling it will solve the problem. First, stop both the localhost and use npm install @react-three/drei.

Hello guys, the problem is not with the component of Tshirt it was with open AI it doesnot support create image function its with open AI 4th version, just install open ai 3 version npm install openai@3

to load resource: the server responded with a status of 500 (Internal Server Error) data:image/png;base…:1 Failed to load resource: net::ERR_INVALID_URL 2index.js:21 Uncaught Error: Could not load data:image/png;base64,undefined: undefined) at index-bb759d07.esm.js:1624:36 at HTMLImageElement.onImageError (three.module.js:41011:19) react-reconciler.development.js:9747 The above error occurred in the component:

at Shirt (http://localhost:5173/src/canvas/Shirt.jsx?t=1681024127442:25:16)
at group
at group
at group
at Center2 (http://localhost:5173/node_modules/.vite/deps/@react-three_drei.js?v=18924c58:97375:3)
at group
at CameraRig (http://localhost:5173/src/canvas/CameraRig.jsx?t=1681023956641:23:3)
at Suspense
at ErrorBoundary (http://localhost:5173/node_modules/.vite/deps/chunk-BH6CJ5FL.js?v=18924c58:16132:5)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-BH6CJ5FL.js?v=18924c58:17860:21)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-BH6CJ5FL.js?v=18924c58:17462:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. logCapturedError @ react-reconciler.development.js:9747 2react-three-fiber.esm.js:144 Uncaught Error: Could not load data:image/png;base64,undefined: undefined) at index-bb759d07.esm.js:1624:36 at HTMLImageElement.onImageError (three.module.js:41011:19) react-dom.development.js:18687 The above error occurred in the <ForwardRef(Canvas)> component:

at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-BH6CJ5FL.js?v=18924c58:18002:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-BH6CJ5FL.js?v=18924c58:17860:21)
at CanvasWrapper
at CanvasModel
at main
at App

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:18687 react-dom.development.js:26923 Uncaught Error: Could not load data:image/png;base64,undefined: undefined) at index-bb759d07.esm.js:1624:36 at HTMLImageElement.onImageError (three.module.js:41011:19) getting this error sadly has anyone came across or know the fix please thank you.

Hello guys, the problem is not with the component of Tshirt it was with open AI it doesnot support create image function its with open AI 4th version, just install open ai 3 version npm install openai@3

Anyone facing the below error
Failed to load resource: net::ERR_CONNECTION_TIMED_OUT 2index.js:26 Uncaught Error: Could not load potsdamer_platz_1k.hdr: Failed to fetch) at Object.onError (index-27578f8f.esm.js:1643:36) at three.module.js:41932:39 console.js:213 The above error occurred in the component:

at EnvironmentCube (http://localhost:5173/node_modules/.vite/deps/@react-three_drei.js?v=6e8e4e89:115119:3)
at Environment (http://localhost:5173/node_modules/.vite/deps/@react-three_drei.js?v=6e8e4e89:115203:16)
at Suspense
at ErrorBoundary (http://localhost:5173/node_modules/.vite/deps/chunk-2NIKWBGZ.js?v=6e8e4e89:16596:5)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-2NIKWBGZ.js?v=6e8e4e89:18339:21)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-2NIKWBGZ.js?v=6e8e4e89:17941:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. overrideMethod @ console.js:213 2react-three-fiber.esm.js:144 Uncaught Error: Could not load potsdamer_platz_1k.hdr: Failed to fetch) at Object.onError (index-27578f8f.esm.js:1643:36) at three.module.js:41932:39 console.js:213 The above error occurred in the <ForwardRef(Canvas)> component:

at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-2NIKWBGZ.js?v=6e8e4e89:18483:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-2NIKWBGZ.js?v=6e8e4e89:18339:21)
at CanvasWrapper
at CanvasModel
at main
at App

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. overrideMethod @ console.js:213 react-dom.development.js:26923 Uncaught Error: Could not load potsdamer_platz_1k.hdr: Failed to fetch) at Object.onError (index-27578f8f.esm.js:1643:36) at three.module.js:41932:39
But if I remove the shirt will come up, even all the errors will erase up

Hello, <Environment path="/hdri/" files="potsdamer_platz_1k.hdr" /> Download this hdr file (https://polyhaven.com/a/potsdamer_platz) and place it inside hdri folder inside public folder and in the component add props like this.

Hello guys, the problem is not with the component of Tshirt it was with open AI it doesnot support create image function its with open AI 4th version, just install open ai 3 version npm install openai@3

Anyone wants to know how to make the app in version latest of open ai 4 is or else just install openai3 via npm for norrmal going course:- in dalleroutes .... just paste this let me know if problem still occurs ...... router.route('/').post(async (req, res) => {
try {
const { prompt } = req.body;

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

const image = response.data[0].b64_json; 

mjlkjkjlkj

I am encountering this error even after attempting to resolve it by installing OpenAI version 3, but I am still facing the same issue

I am encountering this error even after attempting to resolve it by installing OpenAI version 3, but I am still facing the same issue

Same. Did you fix it?

Hey guys I'm getting this error The page works and then I get this errors within a second.

Can someone help me out with this

Hey guys I'm getting this error The page works and then I get this errors within a second.
Can someone help me out with this

I fixed it by commenting out the map-anisotropy={16} property in the Shirt.jsx component.

Why when AI Picker not load image? when Click Ask AI button this error messege pop up TypeError: Failed to fetch
This error Messege display in Console POST http://localhost:8080/api/v1/dalle net::ERR_CONNECTION_REFUSED handleSubmit @ Customizer.jsx:68 handleClick @ AIPicker.jsx:36 callCallback2 @ chunk-ZK6T5TI4.js?v=e6e1dfba:3674 invokeGuardedCallbackDev @ chunk-ZK6T5TI4.js?v=e6e1dfba:3699 invokeGuardedCallback @ chunk-ZK6T5TI4.js?v=e6e1dfba:3733 invokeGuardedCallbackAndCatchFirstError @ chunk-ZK6T5TI4.js?v=e6e1dfba:3736 executeDispatch @ chunk-ZK6T5TI4.js?v=e6e1dfba:7016 processDispatchQueueItemsInOrder @ chunk-ZK6T5TI4.js?v=e6e1dfba:7036 processDispatchQueue @ chunk-ZK6T5TI4.js?v=e6e1dfba:7045 dispatchEventsForPlugins @ chunk-ZK6T5TI4.js?v=e6e1dfba:7053 (anonymous) @ chunk-ZK6T5TI4.js?v=e6e1dfba:7177 batchedUpdates$1 @ chunk-ZK6T5TI4.js?v=e6e1dfba:18909 batchedUpdates @ chunk-ZK6T5TI4.js?v=e6e1dfba:3579 dispatchEventForPluginEventSystem @ chunk-ZK6T5TI4.js?v=e6e1dfba:7176 dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ chunk-ZK6T5TI4.js?v=e6e1dfba:5478 dispatchEvent @ chunk-ZK6T5TI4.js?v=e6e1dfba:5472 dispatchDiscreteEvent @ chunk-ZK6T5TI4.js?v=e6e1dfba:5449
This is My Customizer.jsx

`import React, { 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 } from '../assets';
import { downloadCanvasToImage, reader } from '../config/helpers';
import { EditorTabs, FilterTabs, DecalTypes } from '../config/constants';
import { fadeAnimation, slideAnimation } from '../config/motion';
import { AIPicker, ColorPicker, CustomButton, FilePicker, 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 activeTab
  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 {
      setGeneratingImg(true);

      const response = await fetch('http://localhost:8080/api/v1/dalle', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          prompt,
        })
      })


      const data = await response.json();

      handleDecals(type, `data:image/png;base64,${data.photo}`)
    } catch (error) {
      alert(error)
    } finally {
      setGeneratingImg(false);
      setActiveEditorTab("");
    }
  }

  const handleDecals = (type, result) => {
    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.isFullTexture = !activeFilterTab[tabName];
        break;
      default:
        state.isLogoTexture = true;
        state.isFullTexture = false;
        break;
    }

    // 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`

Can someone Help me???

Did you manage to fix it? I'm facing the same issue: When trying to generate an Image AI (My code looks the same as in the tutorial)

Hi, can you resolve this?

Am facing such problem, were you able to sort it out sir

For everyone experiencing the AI Image generation issue, I found an alternative by using another AI from rapidapi, all you have to do is register on rapidapi.com and subscribe to this api that gives 20 free image generation per month https://rapidapi.com/bussinesonline250/api/ai-text-to-image-generator-api after registering go here to copy the backend code to use the api to generate image.

const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY // This is also the default, can be omitted
});

Thanks this was indeed helpful.

hey can anyone point me towards the creating download/save button in the customize section, it says at the end of the video to find that code in the description but i cannot find it.

You can add the given code above by @adrianhajdin as below to use the Download button (also add the imports):

I am facing this issue when i am running the server file
import { Configuration, OpenAIApi} from 'openai'; ^^^^^^^^^^^^^ SyntaxError: The requested module 'openai' does not provide an export named 'Configuration' at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21) at async ModuleJob.run (node:internal/modules/esm/module_job:181:5) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:281:24) at async loadESM (node:internal/process/esm_loader:88:5) at async handleMainPromise (node:internal/modules/run_main:65:12)

@Abhishek058 You have installed version 4 open ai API and you are using modules of version 3. use this

// Old(Version 3)
import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

// New(Version 4)
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY // This is also the default, can be omitted
});

const openai = new OpenAI(config); on line no. 13 and the server started working

you use new version of openai, and Configuration is define in old version so you update the openai version

the Shirt is not changing color according to the color picker any fix

My CSS is not being applied . anyone have idea about it. My Button color is same as default. same is the case with the size design