function MainComponent() { const [generatedImage, setGeneratedImage] = React.useState(""); const [gptVisionResult, setGptVisionResult] = React.useState(""); const [uploadedImage, setUploadedImage] = React.useState(""); const handleUpload = async (event)=>{ const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = async ()=>{ const base64data = reader.result; setUploadedImage(base64data); await fetchGPTVision(base64data); await fetchDalleImage(); }; }; const fetchGPTVision = async (imageData)=>{ const response = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: [ { type: 'text', text: 'Analyze this image' }, { type: 'image_url', image_url: { url: imageData } } ] } ] }) }); const data = await response.json(); const content = data?.choices[0]?.message?.content; setGptVisionResult(content); }; const fetchDalleImage = async ()=>{ const response = await fetch('/integrations/dall-e-3/?prompt=recycle shop', { method: 'GET' }); const data = await response.json(); const imageUrl = data?.data[0]; setGeneratedImage(imageUrl); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 space-y-4 bg-[#fdfdfd] min-h-screen", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-4xl text-[#333]", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, "Recycle Shop"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full space-y-6 max-w-[600px]", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xl text-[#666]", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Welcome to our recycle shop. Upload an image to know what GPT Vision and DALL-E 3 can tell you about it!"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "image", accept: ".png, .jpg, .jpeg, .webp, .gif", className: "font-roboto text-[#333]", onChange: handleUpload, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-2xl text-[#333] mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Uploaded Image"), uploadedImage && /*#__PURE__*/ React.createElement("img", { src: uploadedImage, alt: "Uploaded by user", className: "w-full h-auto object-cover", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-2xl text-[#333] mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Generated Image"), generatedImage && /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "Generated by DALL-E 3", className: "w-full h-auto object-cover", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-2xl text-[#333] mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "GPT Vision Analysis"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666]", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, gptVisionResult)))); }