function RoundedButtonDesign({ children, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "font-inter font-medium text-[#0E0F10] bg-[#E4E4E4] rounded-[8px] px-4 py-2 hover:bg-white transition-colors duration-200", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function RoundedButtonDesignStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: ()=>console.log('Button clicked'), __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "Click me"), /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: ()=>console.log('Another button clicked'), __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Another button")); } function MainComponent() { const [generatedImage, setGeneratedImage] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [imagePrompt, setImagePrompt] = React.useState(""); const [userImages, setUserImages] = React.useState([]); const [selectedStyle, setSelectedStyle] = React.useState("No Style"); const [selectedModel, setSelectedModel] = React.useState("Model"); const [loadingPercentage, setLoadingPercentage] = React.useState(0); const [error, setError] = React.useState(null); const modelStyles = { "DALL-E": [ "No Style", "Realistic", "Cyberpunk", "3D", "Cartoon", "Anime", "Steampunk", "Nature", "Oil Painting", "Watercolor", "Synthwave", "Mythological", "Mystical", "Luxury", "Video Game" ], Imagen: [ "No Style", "Realistic", "Cyberpunk", "3D", "Cartoon", "Anime", "Steampunk", "Nature", "Oil Painting", "Watercolor", "Synthwave", "Mythological", "Mystical", "Luxury", "Video Game" ], "Imagen Fast": [ "No Style", "Realistic", "Cyberpunk", "3D", "Cartoon", "Anime", "Steampunk", "Nature", "Oil Painting", "Watercolor", "Synthwave", "Mythological", "Mystical", "Luxury", "Video Game" ], Stable: [ "Photographic-classic", "Photograph", "Cinematic", "Realistic", "Animation", "Comic Book", "Cyberpunk", "Analog Film", "Fantasy Art", "Craft Clay", "Line Art", "Pixel Art", "Graffiti", "Game GTA", "Papercraft Paper", "3D Character", "Baroque", "Caricature", "Colored Pencil", "Doodle Art", "Futurism", "Impressionism", "Rococo", "Sketch", "Surrealism", "Sticker Design" ] }; const imageSuggestions = [ "Futuristic cityscape", "Enchanted forest", "Underwater kingdom", "Steampunk airship", "Alien landscape", "Cyberpunk street" ]; const generateImage = async ()=>{ setIsLoading(true); setError(null); let loadingPercentage = 0; const interval = setInterval(()=>{ loadingPercentage = Math.min(loadingPercentage + 2, 95); setLoadingPercentage(loadingPercentage); }, 500); try { const fullPrompt = selectedStyle === "Style" || selectedStyle === "No Style" ? imagePrompt : `${imagePrompt} in ${selectedStyle} style`; const response = await fetch(`/integrations/dall-e-3/?prompt=${fullPrompt}`, { method: "GET", headers: { "Content-Type": "application/json" } }); if (!response.ok) { throw new Error(`Error generating image: ${response.status}`); } const data = await response.json(); if (data.data?.[0]) { setGeneratedImage(data.data[0]); } else if (data.error) { throw new Error(data.error); } } catch (error) { console.error("Error generating image:", error); setError(error.message); } clearInterval(interval); setLoadingPercentage(100); setTimeout(()=>{ setIsLoading(false); setLoadingPercentage(0); }, 500); }; const handleCopy = ()=>{ navigator.clipboard.writeText(generatedImage); }; const handleDownload = (url)=>{ const link = document.createElement("a"); link.href = url; link.download = "generated-image.png"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; const clearInput = ()=>{ setImagePrompt(""); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-[#000000] text-[#B6B7B7] font-inter", __source: { fileName: "", lineNumber: 169, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full font-inter bg-[#000000] px-4", __source: { fileName: "", lineNumber: 170, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex items-center", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center opacity-0 animate-fade-in py-4", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/bb07bf1b-875f-42f8-a190-98b2fde0be39/", alt: "MatterForge logo", className: "w-16 h-16 md:w-20 md:h-20", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 178, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-3xl font-semibold text-white", __source: { fileName: "", lineNumber: 179, columnNumber: 15 }, __self: this }, "MatterForge"), /*#__PURE__*/ React.createElement("p", { className: "text-sm md:text-base text-[#B6B7B7]", __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this }, "AI Image Generator"))))), /*#__PURE__*/ React.createElement("div", { className: "p-8 md:p-12", __source: { fileName: "", lineNumber: 189, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-12", __source: { fileName: "", lineNumber: 190, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-6xl flex flex-col md:flex-row md:space-x-12 md:space-y-0 space-y-8", __source: { fileName: "", lineNumber: 191, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 flex flex-col justify-between", __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: selectedModel, onChange: (e)=>{ setSelectedModel(e.target.value); setSelectedStyle("No Style"); }, className: "w-1/2 p-4 rounded-lg border border-[#2a2e31] bg-[#1d2124] text-[#B6B7B7] opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Model", disabled: true, __source: { fileName: "", lineNumber: 203, columnNumber: 19 }, __self: this }, "Model"), /*#__PURE__*/ React.createElement("option", { value: "DALL-E", __source: { fileName: "", lineNumber: 206, columnNumber: 19 }, __self: this }, "DALL-E 3"), /*#__PURE__*/ React.createElement("option", { value: "Imagen", __source: { fileName: "", lineNumber: 207, columnNumber: 19 }, __self: this }, "Replicate (Imagen 3)"), /*#__PURE__*/ React.createElement("option", { value: "Imagen Fast", __source: { fileName: "", lineNumber: 208, columnNumber: 19 }, __self: this }, "Replicate (Imagen 3 Fast)"), /*#__PURE__*/ React.createElement("option", { value: "Stable", __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }, "Stable Diffusion")), /*#__PURE__*/ React.createElement("select", { value: selectedStyle, onChange: (e)=>setSelectedStyle(e.target.value), className: "w-1/2 p-4 rounded-lg border border-[#2a2e31] bg-[#1d2124] text-[#B6B7B7] opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "No Style", __source: { fileName: "", lineNumber: 217, columnNumber: 19 }, __self: this }, "No Style"), selectedModel !== "Model" && modelStyles[selectedModel].slice(1).map((style)=>/*#__PURE__*/ React.createElement("option", { key: style, value: style, __source: { fileName: "", lineNumber: 220, columnNumber: 23 }, __self: this }, style)))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 226, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full", __source: { fileName: "", lineNumber: 227, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: imagePrompt, onChange: (e)=>setImagePrompt(e.target.value), placeholder: "Image Description", rows: "4", className: "w-full p-4 rounded-lg border border-[#2a2e31] bg-[#1d2124] text-[#B6B7B7] placeholder-[#4a4e51] opacity-0 animate-fade-in resize-none", __source: { fileName: "", lineNumber: 228, columnNumber: 19 }, __self: this }), imagePrompt && /*#__PURE__*/ React.createElement("button", { onClick: clearInput, className: "absolute right-4 top-4 text-[#B6B7B7] hover:text-white", __source: { fileName: "", lineNumber: 236, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-times text-xs", __source: { fileName: "", lineNumber: 240, columnNumber: 23 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-3", __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this }, imageSuggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setImagePrompt(suggestion), className: "px-4 py-2 rounded-lg border border-[#2a2e31] bg-[#1d2124] text-sm text-[#B6B7B7] hover:border-[#3a3e41] opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 247, columnNumber: 19 }, __self: this }, suggestion)))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mt-8", __source: { fileName: "", lineNumber: 257, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full p-4 bg-[#1d2124] text-[#B6B7B7] border border-[#2a2e31] rounded-lg hover:border-[#3a3e41] flex items-center justify-center opacity-0 animate-fade-in", onClick: generateImage, disabled: isLoading, __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this }, "Generate Image"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-left text-[#B6B7B7] mt-3 opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 265, columnNumber: 15 }, __self: this }, "Not perfect? Try again. AI can make mistakes."))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 flex justify-center items-center", __source: { fileName: "", lineNumber: 270, columnNumber: 11 }, __self: this }, error ? /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] md:w-[512px] md:h-[512px] bg-[#1d2124] border border-[#2a2e31] flex items-center justify-center rounded-lg opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#ff4444] text-center px-4", __source: { fileName: "", lineNumber: 273, columnNumber: 17 }, __self: this }, error)) : isLoading ? /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] md:w-[512px] md:h-[512px] bg-[#1d2124] border border-[#2a2e31] flex items-center justify-center rounded-lg opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 276, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-32 h-32 relative", __source: { fileName: "", lineNumber: 277, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full border-4 border-t-[#B6B7B7] border-r-[#666] border-b-[#444] border-l-[#222] rounded-full animate-spin", __source: { fileName: "", lineNumber: 278, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm text-[#B6B7B7]", __source: { fileName: "", lineNumber: 279, columnNumber: 19 }, __self: this }, loadingPercentage, "%"))) : generatedImage ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 285, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "Generated Image", className: "w-full max-w-[455px] h-auto object-contain mb-6 rounded-lg", __source: { fileName: "", lineNumber: 286, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 291, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-4 w-12 h-12 bg-[#1d2124] text-[#B6B7B7] border border-[#2a2e31] rounded-lg hover:border-[#3a3e41] flex items-center justify-center", onClick: handleCopy, __source: { fileName: "", lineNumber: 292, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-copy text-xs", __source: { fileName: "", lineNumber: 296, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "p-4 w-12 h-12 bg-[#1d2124] text-[#B6B7B7] border border-[#2a2e31] rounded-lg hover:border-[#3a3e41] flex items-center justify-center", onClick: ()=>handleDownload(generatedImage), __source: { fileName: "", lineNumber: 298, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-download text-xs", __source: { fileName: "", lineNumber: 302, columnNumber: 21 }, __self: this })))) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] md:w-[512px] md:h-[512px] bg-[#1d2124] border border-[#2a2e31] flex items-center justify-center rounded-lg opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 307, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7]", __source: { fileName: "", lineNumber: 308, columnNumber: 17 }, __self: this }, "No image generated yet.")))), /*#__PURE__*/ React.createElement("div", { className: "mt-12 text-sm text-left opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 313, columnNumber: 9 }, __self: this }, "DarkMatter AI 🤖✨"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 316, columnNumber: 9 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fade-in { animation: fadeIn 0.5s ease-in forwards; } `))); }