function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [style, setStyle] = React.useState(''); const [images, setImages] = React.useState([]); const [loading, setLoading] = React.useState(false); const generateImages = async ()=>{ setLoading(true); setImages([]); const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt + ', ' + style)}`, { method: 'GET' }); const data = await response.json(); setImages(data.data); setLoading(false); }; const styles = [ 'Realistic', 'Cartoon', 'Retro', 'Holographic', 'Vaporwave', '3D', '2D' ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] text-[#e1e1e1] font-poppins flex flex-col items-center min-h-screen py-10", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-2 relative", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "Arty 2", /*#__PURE__*/ React.createElement("span", { className: "text-xs bg-purple-600 text-white rounded-full px-2 py-1 ml-2", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Beta")), /*#__PURE__*/ React.createElement("p", { className: "mb-6 flex items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, "Venkel AI 2024", /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "©")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full max-w-[600px] px-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "prompt", type: "text", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Enter your prompt", className: "w-full mb-4 p-2 rounded-full bg-[#ffffff1a] border border-[#ffffff1a] focus:outline-none text-white", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "style", value: style, onChange: (e)=>setStyle(e.target.value), className: "w-full mb-4 p-2 rounded-full bg-[#ffffff1a] border border-[#ffffff1a] focus:outline-none text-white", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Choose a style"), styles.map((style)=>/*#__PURE__*/ React.createElement("option", { key: style, value: style, __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, style))), /*#__PURE__*/ React.createElement("button", { onClick: generateImages, className: "mb-6 p-3 rounded-full bg-purple-600 hover:bg-purple-800", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bolt text-white", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 border-4 border-t-[transparent] border-white border-b-[#000] rounded-full animate-spin", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, images.map((imgUrl, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imgUrl, alt: `Generated img ${index}`, className: "w-full rounded-[50px] object-cover", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: imgUrl, download: `generated_img_${index}.png`, className: "absolute top-2 right-2 bg-purple-600 p-2 rounded-full", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download text-white", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this })))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, ` @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } `)); }

Arty 2Beta