function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [conversation, setConversation] = React.useState([]); async function handleUpload(event) { const file = event.target.files[0]; if (file) { setIsLoading(true); try { const uploadedImageUrl = URL.createObjectURL(file); await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "system", "content": "User uploaded a photo for editing." } ], system_prompt: 'How can we assist you with editing the photo?' }) }).then((response)=>response.json()).then((data)=>{ setConversation((conversation)=>[ ...conversation, { role: 'assistant', content: data.result } ]); }); } catch (error) { setConversation((conversation)=>[ ...conversation, { role: 'system', content: 'Error processing the photo.' } ]); } finally{ setIsLoading(false); } } } let loadingIndicator; if (isLoading) { loadingIndicator = /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center space-x-2 animate-pulse h-[200px]", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-[#E5E7EB] rounded-full", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-[#E5E7EB] rounded-full", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-[#E5E7EB] rounded-full", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this })); } let chatResponses = conversation.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: `chat-message-${index}`, className: `p-2 my-2 rounded-lg ${msg.role === 'assistant' ? 'bg-blue-200' : 'bg-red-200'}`, __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, msg.content)); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#f4f4f4] min-h-screen flex flex-col items-center pt-10", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-2xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, "Photo Editor"), /*#__PURE__*/ React.createElement("section", { className: "w-full max-w-4xl p-4 shadow-lg bg-white mb-6", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b border-[#E5E7EB] pb-4 mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-xl text-[#121212]", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Upload your photo")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "w-full flex flex-col items-center px-4 py-6 bg-white text-blue rounded-lg shadow-lg tracking-wide border border-blue cursor-pointer hover:bg-blue-600 hover:text-white", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-upload-alt fa-3x", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "mt-2 text-base leading-normal", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "Select a file"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "hidden", name: "photo-upload", accept: "image/*", onChange: handleUpload, __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, loadingIndicator))), /*#__PURE__*/ React.createElement("section", { className: "w-full max-w-4xl p-4 bg-white shadow-lg mb-6", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b border-[#E5E7EB] pb-4 mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-xl text-[#121212]", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Edit your photo")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-between items-center gap-4", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-6 py-2 bg-blue-600 text-white rounded-lg focus:outline-none", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Add Filter"), /*#__PURE__*/ React.createElement("button", { className: "px-6 py-2 bg-blue-600 text-white rounded-lg focus:outline-none", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Adjust"), /*#__PURE__*/ React.createElement("button", { className: "px-6 py-2 bg-blue-600 text-white rounded-lg focus:outline-none", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Crop"), /*#__PURE__*/ React.createElement("button", { className: "px-6 py-2 bg-blue-600 text-white rounded-lg focus:outline-none", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Resize"))), /*#__PURE__*/ React.createElement("section", { className: "w-full max-w-4xl p-4 bg-white shadow-lg", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "Assistant"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, chatResponses)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } `)); }