function MainComponent() { const [imageSrc, setImageSrc] = React.useState(''); const [showImage, setShowImage] = React.useState(false); const [loading, setLoading] = React.useState(false); const [result, setResult] = React.useState(''); const handleImageUpload = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = ()=>{ setImageSrc(reader.result); setShowImage(true); setResult(''); }; reader.readAsDataURL(file); } }; const createScreensaver = async ()=>{ setLoading(true); setShowImage(true); const messages = [ { "role": "user", "content": "Create a screensaver from the uploaded image." } ]; fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }) }).then((response)=>response.json()).then((data)=>{ setLoading(false); if (data.status) { setResult(data.choices[0].message.content); } else { setResult('Failed to create screensaver.'); } }).catch((error)=>{ setLoading(false); setResult('Error creating screensaver.'); }); }; const handleDownload = ()=>{ const element = document.createElement("a"); const file = new Blob([ imageSrc ], { type: "application/x-screensaver" }); element.href = URL.createObjectURL(file); element.download = "screensaver.scr"; document.body.appendChild(element); element.click(); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col items-center justify-center bg-gray-100", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, "Bouncing Picture Screensaver Maker"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "imageUpload", className: "mb-4", onChange: handleImageUpload, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded font-roboto hover:bg-blue-600 mb-4", onClick: createScreensaver, __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, loading ? "Creating..." : "Create Screensaver"), result && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 font-roboto mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 20 }, __self: this }, result), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2 rounded font-roboto hover:bg-green-600", onClick: handleDownload, style: { display: imageSrc ? 'block' : 'none' }, __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "Download Screensaver")), /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center mt-8 relative", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, showImage && /*#__PURE__*/ React.createElement("img", { src: imageSrc, alt: "Uploaded Screensaver Image", className: "img-bounce img-rotate w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, ` .img-bounce { position: absolute; animation: bounce 3s infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-100px); } } .img-rotate { animation: rotate 5s infinite linear; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `)); }