function MainComponent() { const [prompt, setPrompt] = React.useState("Beautiful cozy fantasy stone cottage in a spring forest aside a cobblestone path and a babbling brook. Stone wall. Mountains in the distance. Magical tone and feel, hyper-realistic."); const [imageUrl, setImageUrl] = React.useState("/path-to-mountain-cottage-image.jpg"); const [uploadedImage, setUploadedImage] = React.useState(null); const handlePromptChange = (event)=>{ setPrompt(event.target.value); }; const handleTryPrompt = async ()=>{ try { const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(prompt)}`); const data = await response.json(); if (data.data && data.data.length > 0) { setImageUrl(data.data[0]); } } catch (error) { console.error("Error generating image:", error); } }; const handleImageUpload = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e)=>{ setUploadedImage(e.target.result); setImageUrl(e.target.result); }; reader.readAsDataURL(file); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#1e1e1e] text-white min-h-screen flex", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/4 p-4 border-r border-gray-700", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "General settings"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm mb-1", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Model"), /*#__PURE__*/ React.createElement("select", { className: "w-full bg-gray-800 rounded p-2", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Firefly Image 3"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm mb-1", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Aspect ratio"), /*#__PURE__*/ React.createElement("select", { className: "w-full bg-gray-800 rounded p-2", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Widescreen (16:9)")))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Content type"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 px-3 py-1 rounded", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Art"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-700 px-3 py-1 rounded", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Photo"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-700 px-3 py-1 rounded", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Auto"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Composition"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "border border-gray-600 p-2 rounded flex items-center justify-center w-[100px] h-[100px]", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-image text-3xl", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "border border-gray-600 p-2 rounded flex items-center justify-center w-[100px] h-[100px] cursor-pointer", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-upload-alt text-3xl", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "border border-gray-600 p-2 rounded flex items-center justify-center w-[100px] h-[100px]", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-folder-open text-3xl", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "w-3/4 p-4", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: prompt, className: "w-full rounded-lg", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full bg-gray-800 rounded p-2 mb-2", rows: "3", placeholder: "Enter your prompt here", value: prompt, onChange: handlePromptChange, __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-700 px-3 py-1 rounded", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "Art"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-700 px-3 py-1 rounded", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "Fantasy"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-700 px-3 py-1 rounded", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "Cinematic"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-700 px-3 py-1 rounded", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "Hyper realistic"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 px-3 py-1 rounded ml-auto", onClick: handleTryPrompt, __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Try Prompt"))))); }