function MainComponent() { const [generatedImageData, setGeneratedImageData] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); const [status, setStatus] = React.useState(''); const handleSubmit = async (event)=>{ event.preventDefault(); setIsLoading(true); setStatus('Sending request...'); const prompt = event.target.prompt.value; const negativePrompt = event.target.negativePrompt.value; const width = parseInt(event.target.width.value); const height = parseInt(event.target.height.value); try { setStatus('Generating image...'); const response = await fetch('/api-proxy/image-generation-api/text2img', { method: 'POST', body: JSON.stringify({ key: "9fvVBLeK8sY26HtRBYl6O4zIyvunMzuU828Rx5c0T9PB7KNryFAQEobIFf8L", prompt: prompt, negative_prompt: negativePrompt, width: width, height: height, samples: 1, safety_checker: true, seed: Math.floor(Math.random() * 1000000), instant_response: true, base64: true, webhook: "", track_id: "" }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); setGeneratedImageData(data); setStatus('Image generated successfully!'); } catch (error) { setStatus('Error generating image. Please try again.'); } setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8 text-[#333]", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "Image Generator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-8 rounded-lg shadow-md w-full max-w-md", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "prompt", className: "block text-gray-700 font-bold mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Prompt"), /*#__PURE__*/ React.createElement("textarea", { id: "prompt", name: "prompt", rows: "3", className: "w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none resize-none", placeholder: "Enter a description of the image you want to generate", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "negativePrompt", className: "block text-gray-700 font-bold mb-2", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Negative Prompt"), /*#__PURE__*/ React.createElement("textarea", { id: "negativePrompt", name: "negativePrompt", rows: "2", className: "w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none resize-none", placeholder: "Describe what should not be in the image", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-6", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "width", className: "block text-gray-700 font-bold mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Width"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "width", name: "width", min: "64", max: "1024", defaultValue: "512", className: "w-24 px-3 py-2 text-gray-700 border rounded-lg focus:outline-none", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "height", className: "block text-gray-700 font-bold mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Height"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "height", name: "height", min: "64", max: "1024", defaultValue: "512", className: "w-24 px-3 py-2 text-gray-700 border rounded-lg focus:outline-none", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-3 py-4 text-white bg-[#1d4ed8] rounded-lg focus:outline-none hover:bg-[#1e40af]", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, isLoading ? 'Generating...' : 'Generate Image')), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-[#333]", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, "Generated Image Data"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md w-full max-w-2xl overflow-auto", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, generatedImageData ? /*#__PURE__*/ React.createElement("pre", { className: "text-sm text-gray-800 whitespace-pre-wrap break-words", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, JSON.stringify(generatedImageData, null, 2)) : /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-400", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "Image data will appear here"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, status), isLoading && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full border-4 border-[#1d4ed8] border-t-transparent animate-spin mx-auto", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } `)); }