Uncaught TypeError: Cannot redefine property: visibilityState
at Function.defineProperty (<anonymous>)
at main.js:21:10
localhost:8080/api/v1/dalle:1
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
data:image/png;base64,undefined:1
GET data:image/png;base64,undefined net::ERR_INVALID_URL
Image (async)
load @ three.module.js:42392
load @ three.module.js:42595
(anonymous) @ index-6662eaf2.esm.js:1645
(anonymous) @ index-6662eaf2.esm.js:1645
(anonymous) @ index-6662eaf2.esm.js:1645
query @ index.js:51
suspend @ index.js:68
useLoader @ index-6662eaf2.esm.js:1661
useTexture @ useTexture.js:8
Shirt @ Shirt.jsx:13
renderWithHooks @ react-reconciler.development.js:7363
updateFunctionComponent @ react-reconciler.development.js:11802
beginWork @ react-reconciler.development.js:13845
beginWork$1 @ react-reconciler.development.js:19513
performUnitOfWork @ react-reconciler.development.js:18686
workLoopSync @ react-reconciler.development.js:18597
renderRootSync @ react-reconciler.development.js:18565
performSyncWorkOnRoot @ react-reconciler.development.js:18183
flushSyncCallbacks @ react-reconciler.development.js:2936
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 21 more frames
Show less
2index-6662eaf2.esm.js:1648 Uncaught Error: Could not load data:image/png;base64,undefined: undefined
at index-6662eaf2.esm.js:1648:36
at HTMLImageElement.onImageError (three.module.js:42367:19)
(anonymous) @ index-6662eaf2.esm.js:1648
onImageError @ three.module.js:42367
Show 2 more frames
Show less
react-reconciler.development.js:9747 The above error occurred in the <Shirt> component:
at Shirt (http://127.0.0.1:5174/src/Canvas/Shirt.jsx:26:16)
at group
at group
at group
at Center2 (http://127.0.0.1:5174/node_modules/.vite/deps/@react-three_drei.js?v=d1833a4a:111772:3)
at group
at CamRig (http://127.0.0.1:5174/src/Canvas/CamRig.jsx:24:3)
at Suspense
at ErrorBoundary (http://127.0.0.1:5174/node_modules/.vite/deps/chunk-N222EQID.js?v=d1833a4a:16596:5)
at FiberProvider (http://127.0.0.1:5174/node_modules/.vite/deps/chunk-N222EQID.js?v=d1833a4a:18345:21)
at Provider (http://127.0.0.1:5174/node_modules/.vite/deps/chunk-N222EQID.js?v=d1833a4a:17947:3)
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
logCapturedError @ react-reconciler.development.js:9747
callback @ react-reconciler.development.js:9815
callCallback @ react-reconciler.development.js:4279
commitUpdateQueue @ react-reconciler.development.js:4300
commitLayoutEffectOnFiber @ react-reconciler.development.js:14877
commitLayoutMountEffects_complete @ react-reconciler.development.js:16290
commitLayoutEffects_begin @ react-reconciler.development.js:16276
commitLayoutEffects @ react-reconciler.development.js:16214
commitRootImpl @ react-reconciler.development.js:18945
commitRoot @ react-reconciler.development.js:18811
finishConcurrentRender @ react-reconciler.development.js:17990
performConcurrentWorkOnRoot @ react-reconciler.development.js:17907
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 15 more frames
Show less
2index-6662eaf2.esm.js:1648 Uncaught Error: Could not load data:image/png;base64,undefined: undefined
at index-6662eaf2.esm.js:1648:36
at HTMLImageElement.onImageError (three.module.js:42367:19)
(anonymous) @ index-6662eaf2.esm.js:1648
onImageError @ three.module.js:42367
Show 2 more frames
Show less
react-dom.development.js:18687 The above error occurred in the <ForwardRef(Canvas)> component:
at Canvas (http://127.0.0.1:5174/node_modules/.vite/deps/chunk-N222EQID.js?v=d1833a4a:18489:3)
at FiberProvider (http://127.0.0.1:5174/node_modules/.vite/deps/chunk-N222EQID.js?v=d1833a4a:18345:21)
at CanvasWrapper
at ErrorBoundary (http://127.0.0.1:5174/src/Canvas/index.jsx:25:3)
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
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25892
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 15 more frames
Show less
react-dom.development.js:26923 Uncaught Error: Could not load data:image/png;base64,undefined: undefined
at index-6662eaf2.esm.js:1648:36
at HTMLImageElement.onImageError (three.module.js:42367:19)
(anonymous) @ index-6662eaf2.esm.js:1648
onImageError @ three.module.js:42367
Show 2 more frames
Show less
<Shirt> component:
at Shirt (http:
at group
at group
at group
at Center2 (http:
at group
at CamRig (http:
at Suspense
at ErrorBoundary (http:
at FiberProvider (http:
at Provider (http:
React will try to recreate this component tree from scratch using the error boundary you provided,
ErrorBoundary
.
What I have tried:
const handleSubmit = async (type) => {
if (!prompt) return alert("Please enter a prompt");
try {
setGeneratingImg(true);
const response = await fetch('http://localhost:8081/api/v1/dalle', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
prompt,
})
});
if (response.ok) {
const data = await response.json();
handleDecals(type, `data:image/png;base64,${data.photo}`);
} else {
alert("Error: Unable to fetch data from the server");
}
} catch (error) {
console.error(error);
alert("Something went wrong");
} finally {
setGeneratingImg(false);
setActiveEditorTab("");
}
};
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({ origin: '*' }));
app.use(express.json({ limit: "50mb" }))
app.use("/api/v1/dalle", dalleRoutes);
app.get('/', (req, res) => {
res.status(200).json({ message: "Hello from DALL.E" })
})
app.listen(8081, () => console.log('Server has started on port 8081'))