Design Print

Design Details

Category: ${activeTab}

${activeTab === "interior" ? `

Room: ${room}

Style: ${style}

` : activeTab === "machine" ? `

Type: ${machineType}

Style: ${machineStyle}

` : activeTab === "floor" ? `

Type: ${floorType}

Style: ${floorStyle}

` : activeTab === "game" ? `

Type: ${gameType}

Style: ${gameStyle}

` : `

Type: ${appType}

Style: ${appStyle}

Design Prompt

${prompt}

Generated Design

`); printWindow.document.close(); printWindow.focus(); printWindow.print(); }, [ activeTab, room, style, machineType, machineStyle, floorType, floorStyle, gameType, gameStyle, appType, appStyle, prompt, image ]); const handleFinish = useCallback((message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); setPrompt(message); }, []); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: handleFinish }); const generateDesignDescription = async (type, params)=>{ const prompts = { interior: `Create a detailed description for a ${params.style} ${params.room} interior design`, machine: `Describe a ${params.style} ${params.type} technical design`, floor: `Detail a ${params.style} ${params.type} floor plan layout`, game: `Describe a ${params.style} ${params.type} game environment design`, app: `Detail a ${params.style} ${params.type} interface design` }; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompts[type] } ], stream: true }) }); handleStreamResponse(response); return response; }; const generateImage = async (description, type)=>{ try { const stableResult = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(description)}`); const dalleResult = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(description)}`); const imageSearchResult = await fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(description)}`); const [stableData, dalleData, searchData] = await Promise.all([ stableResult.json(), dalleResult.json(), imageSearchResult.json() ]); const allImages = [ ...stableData.data || [], ...dalleData.data || [], ...(searchData.items || []).map((item)=>item.originalImageUrl) ]; if (allImages.length > 0) { setImage(allImages[0]); } } catch (error) { console.error(error); } }; const handleSuggestPrompt = useCallback(async ()=>{ setLoading(true); try { const params = { interior: { style, room }, machine: { style: machineStyle, type: machineType }, floor: { style: floorStyle, type: floorType }, game: { style: gameStyle, type: gameType }, app: { style: appStyle, type: appType } }[activeTab]; await generateDesignDescription(activeTab, params); } catch (error) { console.error(error); } setLoading(false); }, [ activeTab, style, room, machineStyle, machineType, floorStyle, floorType, gameStyle, gameType, appStyle, appType ]); const handleGenerate = useCallback(async ()=>{ if (!prompt) return; setLoading(true); try { await generateImage(prompt, activeTab); } catch (error) { console.error(error); } setLoading(false); }, [ prompt, activeTab ]); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 206, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "icon", href: "data:image/svg+xml,", __source: { fileName: "", lineNumber: 207, columnNumber: 9 }, __self: this })), !isAuthenticated ? /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5] p-8 font-raleway flex items-center justify-center", __source: { fileName: "", lineNumber: 213, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-8 max-w-md w-full", __source: { fileName: "", lineNumber: 214, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-8 text-[#333]", __source: { fileName: "", lineNumber: 215, columnNumber: 13 }, __self: this }, "Five Stars Design Generator", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 217, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, "⭐⭐⭐⭐⭐")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "password", value: password, onChange: (e)=>setPassword(e.target.value), placeholder: "Enter password", className: "w-full p-3 border rounded-md", __source: { fileName: "", lineNumber: 221, columnNumber: 15 }, __self: this }), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm text-center", __source: { fileName: "", lineNumber: 229, columnNumber: 17 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: handleLogin, className: "w-full bg-[#4a90e2] hover:bg-[#357abd] text-white font-bold py-3 px-6 rounded-md transition duration-200", __source: { fileName: "", lineNumber: 231, columnNumber: 15 }, __self: this }, "Login")))) : /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5] p-8 font-raleway flex flex-col", __source: { fileName: "", lineNumber: 241, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto flex-grow", __source: { fileName: "", lineNumber: 242, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-center mb-8 text-[#333] leading-tight px-4", __source: { fileName: "", lineNumber: 243, columnNumber: 13 }, __self: this }, "Five Stars Design Generator ", /*#__PURE__*/ React.createElement("br", { className: "hidden md:block", __source: { fileName: "", lineNumber: 244, columnNumber: 43 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-2xl", __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this }, "⭐⭐⭐⭐⭐")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center mb-8 space-x-2 md:space-x-4", __source: { fileName: "", lineNumber: 247, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("interior"), className: `px-4 md:px-6 py-2 rounded-t-lg ${activeTab === "interior" ? "bg-white text-[#4a90e2]" : "bg-[#e0e0e0] text-[#666]"} mb-2`, __source: { fileName: "", lineNumber: 248, columnNumber: 15 }, __self: this }, "Interior Design"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("machine"), className: `px-4 md:px-6 py-2 rounded-t-lg ${activeTab === "machine" ? "bg-white text-[#4a90e2]" : "bg-[#e0e0e0] text-[#666]"} mb-2`, __source: { fileName: "", lineNumber: 254, columnNumber: 15 }, __self: this }, "Machine Design"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("floor"), className: `px-4 md:px-6 py-2 rounded-t-lg ${activeTab === "floor" ? "bg-white text-[#4a90e2]" : "bg-[#e0e0e0] text-[#666]"} mb-2`, __source: { fileName: "", lineNumber: 260, columnNumber: 15 }, __self: this }, "Floor Plan"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("app"), className: `px-4 md:px-6 py-2 rounded-t-lg ${activeTab === "app" ? "bg-white text-[#4a90e2]" : "bg-[#e0e0e0] text-[#666]"} mb-2`, __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }, "App Design"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("game"), className: `px-4 md:px-6 py-2 rounded-t-lg ${activeTab === "game" ? "bg-white text-[#4a90e2]" : "bg-[#e0e0e0] text-[#666]"} mb-2`, __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, "Game Design"), /*#__PURE__*/ React.createElement("a", { href: "/art-generator", className: "px-4 md:px-6 py-2 rounded-t-lg bg-[#ffd700] text-[#333] hover:bg-[#ffed4a] transition duration-200 mb-2", __source: { fileName: "", lineNumber: 278, columnNumber: 15 }, __self: this }, "Try Art Generator ✨"), /*#__PURE__*/ React.createElement("a", { href: "https://zoo.dev/text-to-cad", target: "_blank", rel: "noopener noreferrer", className: "px-4 md:px-6 py-2 rounded-t-lg bg-[#4a90e2] text-white hover:bg-[#357abd] transition duration-200 mb-2", __source: { fileName: "", lineNumber: 284, columnNumber: 15 }, __self: this }, "Try CAD Model ⚙️"), /*#__PURE__*/ React.createElement("a", { href: "https://v2.app.sloyd.ai/labs/image-to-3d", target: "_blank", rel: "noopener noreferrer", className: "px-4 md:px-6 py-2 rounded-t-lg bg-[#6366f1] text-white hover:bg-[#4f46e5] transition duration-200 mb-2", __source: { fileName: "", lineNumber: 292, columnNumber: 15 }, __self: this }, "Try 3D Model 🎮")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 mb-8", __source: { fileName: "", lineNumber: 302, columnNumber: 13 }, __self: this }, activeTab === "interior" ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 304, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 305, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333] mb-2", __source: { fileName: "", lineNumber: 306, columnNumber: 21 }, __self: this }, "Room Type"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-3 border rounded-md", value: room, onChange: (e)=>setRoom(e.target.value), __source: { fileName: "", lineNumber: 307, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "living room", __source: { fileName: "", lineNumber: 312, columnNumber: 23 }, __self: this }, "Living Room"), /*#__PURE__*/ React.createElement("option", { value: "bedroom", __source: { fileName: "", lineNumber: 313, columnNumber: 23 }, __self: this }, "Bedroom"), /*#__PURE__*/ React.createElement("option", { value: "kitchen", __source: { fileName: "", lineNumber: 314, columnNumber: 23 }, __self: this }, "Kitchen"), /*#__PURE__*/ React.createElement("option", { value: "bathroom", __source: { fileName: "", lineNumber: 315, columnNumber: 23 }, __self: this }, "Bathroom"), /*#__PURE__*/ React.createElement("option", { value: "home office", __source: { fileName: "", lineNumber: 316, columnNumber: 23 }, __self: this }, "Home Office"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 319, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333] mb-2", __source: { fileName: "", lineNumber: 320, columnNumber: 21 }, __self: this }, "Style"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-3 border rounded-md", value: style, onChange: (e)=>setStyle(e.target.value), __source: { fileName: "", lineNumber: 321, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "modern", __source: { fileName: "", lineNumber: 326, columnNumber: 23 }, __self: this }, "Modern"), /*#__PURE__*/ React.createElement("option", { value: "minimalist", __source: { fileName: "", lineNumber: 327, columnNumber: 23 }, __self: this }, "Minimalist"), /*#__PURE__*/ React.createElement("option", { value: "scandinavian", __source: { fileName: "", lineNumber: 328, columnNumber: 23 }, __self: this }, "Scandinavian"), /*#__PURE__*/ React.createElement("option", { value: "industrial", __source: { fileName: "", lineNumber: 329, columnNumber: 23 }, __self: this }, "Industrial"), /*#__PURE__*/ React.createElement("option", { value: "bohemian", __source: { fileName: "", lineNumber: 330, columnNumber: 23 }, __self: this }, "Bohemian"), /*#__PURE__*/ React.createElement("option", { value: "traditional", __source: { fileName: "", lineNumber: 331, columnNumber: 23 }, __self: this }, "Traditional")))) : activeTab === "machine" ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 336, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 337, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333] mb-2", __source: { fileName: "", lineNumber: 338, columnNumber: 21 }, __self: this }, "Machine Type"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-3 border rounded-md", value: machineType, onChange: (e)=>setMachineType(e.target.value), __source: { fileName: "", lineNumber: 341, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "robot", __source: { fileName: "", lineNumber: 346, columnNumber: 23 }, __self: this }, "Robot"), /*#__PURE__*/ React.createElement("option", { value: "vehicle", __source: { fileName: "", lineNumber: 347, columnNumber: 23 }, __self: this }, "Vehicle"), /*#__PURE__*/ React.createElement("option", { value: "spacecraft", __source: { fileName: "", lineNumber: 348, columnNumber: 23 }, __self: this }, "Spacecraft"), /*#__PURE__*/ React.createElement("option", { value: "drone", __source: { fileName: "", lineNumber: 349, columnNumber: 23 }, __self: this }, "Drone"), /*#__PURE__*/ React.createElement("option", { value: "mech", __source: { fileName: "", lineNumber: 350, columnNumber: 23 }, __self: this }, "Mech"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 353, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333] mb-2", __source: { fileName: "", lineNumber: 354, columnNumber: 21 }, __self: this }, "Style"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-3 border rounded-md", value: machineStyle, onChange: (e)=>setMachineStyle(e.target.value), __source: { fileName: "", lineNumber: 355, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "sci-fi", __source: { fileName: "", lineNumber: 360, columnNumber: 23 }, __self: this }, "Sci-Fi"), /*#__PURE__*/ React.createElement("option", { value: "steampunk", __source: { fileName: "", lineNumber: 361, columnNumber: 23 }, __self: this }, "Steampunk"), /*#__PURE__*/ React.createElement("option", { value: "cyberpunk", __source: { fileName: "", lineNumber: 362, columnNumber: 23 }, __self: this }, "Cyberpunk"), /*#__PURE__*/ React.createElement("option", { value: "military", __source: { fileName: "", lineNumber: 363, columnNumber: 23 }, __self: this }, "Military"), /*#__PURE__*/ React.createElement("option", { value: "industrial", __source: { fileName: "", lineNumber: 364, columnNumber: 23 }, __self: this }, "Industrial")))) : activeTab === "floor" ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 369, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 370, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333] mb-2", __source: { fileName: "", lineNumber: 371, columnNumber: 21 }, __self: this }, "Space Type"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-3 border rounded-md", value: floorType, onChange: (e)=>setFloorType(e.target.value), __source: { fileName: "", lineNumber: 372, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "apartment", __source: { fileName: "", lineNumber: 377, columnNumber: 23 }, __self: this }, "Apartment"), /*#__PURE__*/ React.createElement("option", { value: "house", __source: { fileName: "", lineNumber: 378, columnNumber: 23 }, __self: this }, "House"), /*#__PURE__*/ React.createElement("option", { value: "office", __source: { fileName: "", lineNumber: 379, columnNumber: 23 }, __self: this }, "Office"), /*#__PURE__*/ React.createElement("option", { value: "studio", __source: { fileName: "", lineNumber: 380, columnNumber: 23 }, __self: this }, "Studio"), /*#__PURE__*/ React.createElement("option", { value: "retail space", __source: { fileName: "", lineNumber: 381, columnNumber: 23 }, __self: this }, "Retail Space"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 384, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333] mb-2", __source: { fileName: "", lineNumber: 385, columnNumber: 21 }, __self: this }, "Style"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-3 border rounded-md", value: floorStyle, onChange: (e)=>setFloorStyle(e.target.value), __source: { fileName: "", lineNumber: 386, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "modern", __source: { fileName: "", lineNumber: 391, columnNumber: 23 }, __self: this }, "Modern"), /*#__PURE__*/ React.createElement("option", { value: "traditional", __source: { fileName: "", lineNumber: 392, columnNumber: 23 }, __self: this }, "Traditional"), /*#__PURE__*/ React.createElement("option", { value: "open concept", __source: { fileName: "", lineNumber: 393, columnNumber: 23 }, __self: this }, "Open Concept"), /*#__PURE__*/ React.createElement("option", { value: "minimalist", __source: { fileName: "", lineNumber: 394, columnNumber: 23 }, __self: this }, "Minimalist"), /*#__PURE__*/ React.createElement("option", { value: "loft", __source: { fileName: "", lineNumber: 395, columnNumber: 23 }, __self: this }, "Loft")))) : activeTab === "game" ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 400, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 401, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333] mb-2", __source: { fileName: "", lineNumber: 402, columnNumber: 21 }, __self: this }, "Game Type"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-3 border rounded-md", value: gameType, onChange: (e)=>setGameType(e.target.value), __source: { fileName: "", lineNumber: 403, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "rpg", __source: { fileName: "", lineNumber: 408, columnNumber: 23 }, __self: this }, "RPG"), /*#__PURE__*/ React.createElement("option", { value: "action", __source: { fileName: "", lineNumber: 409, columnNumber: 23 }, __self: this }, "Action"), /*#__PURE__*/ React.createElement("option", { value: "strategy", __source: { fileName: "", lineNumber: 410, columnNumber: 23 }, __self: this }, "Strategy"), /*#__PURE__*/ React.createElement("option", { value: "platformer", __source: { fileName: "", lineNumber: 411, columnNumber: 23 }, __self: this }, "Platformer"), /*#__PURE__*/ React.createElement("option", { value: "simulation", __source: { fileName: "", lineNumber: 412, columnNumber: 23 }, __self: this }, "Simulation"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 415, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333] mb-2", __source: { fileName: "", lineNumber: 416, columnNumber: 21 }, __self: this }, "Style"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-3 border rounded-md", value: gameStyle, onChange: (e)=>setGameStyle(e.target.value), __source: { fileName: "", lineNumber: 417, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "fantasy", __source: { fileName: "", lineNumber: 422, columnNumber: 23 }, __self: this }, "Fantasy"), /*#__PURE__*/ React.createElement("option", { value: "sci-fi", __source: { fileName: "", lineNumber: 423, columnNumber: 23 }, __self: this }, "Sci-Fi"), /*#__PURE__*/ React.createElement("option", { value: "post-apocalyptic", __source: { fileName: "", lineNumber: 424, columnNumber: 23 }, __self: this }, "Post-Apocalyptic"), /*#__PURE__*/ React.createElement("option", { value: "cartoon", __source: { fileName: "", lineNumber: 425, columnNumber: 23 }, __self: this }, "Cartoon"), /*#__PURE__*/ React.createElement("option", { value: "realistic", __source: { fileName: "", lineNumber: 426, columnNumber: 23 }, __self: this }, "Realistic")))) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 431, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 432, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333] mb-2", __source: { fileName: "", lineNumber: 433, columnNumber: 21 }, __self: this }, "App Type"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-3 border rounded-md", value: appType, onChange: (e)=>setAppType(e.target.value), __source: { fileName: "", lineNumber: 434, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "mobile app", __source: { fileName: "", lineNumber: 439, columnNumber: 23 }, __self: this }, "Mobile App"), /*#__PURE__*/ React.createElement("option", { value: "web app", __source: { fileName: "", lineNumber: 440, columnNumber: 23 }, __self: this }, "Web App"), /*#__PURE__*/ React.createElement("option", { value: "desktop app", __source: { fileName: "", lineNumber: 441, columnNumber: 23 }, __self: this }, "Desktop App"), /*#__PURE__*/ React.createElement("option", { value: "tablet app", __source: { fileName: "", lineNumber: 442, columnNumber: 23 }, __self: this }, "Tablet App"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 445, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333] mb-2", __source: { fileName: "", lineNumber: 446, columnNumber: 21 }, __self: this }, "Style"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-3 border rounded-md", value: appStyle, onChange: (e)=>setAppStyle(e.target.value), __source: { fileName: "", lineNumber: 447, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "minimal", __source: { fileName: "", lineNumber: 452, columnNumber: 23 }, __self: this }, "Minimal"), /*#__PURE__*/ React.createElement("option", { value: "glassmorphic", __source: { fileName: "", lineNumber: 453, columnNumber: 23 }, __self: this }, "Glassmorphic"), /*#__PURE__*/ React.createElement("option", { value: "neumorphic", __source: { fileName: "", lineNumber: 454, columnNumber: 23 }, __self: this }, "Neumorphic"), /*#__PURE__*/ React.createElement("option", { value: "colorful", __source: { fileName: "", lineNumber: 455, columnNumber: 23 }, __self: this }, "Colorful"), /*#__PURE__*/ React.createElement("option", { value: "dark mode", __source: { fileName: "", lineNumber: 456, columnNumber: 23 }, __self: this }, "Dark Mode")))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 462, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333] mb-2", __source: { fileName: "", lineNumber: 463, columnNumber: 17 }, __self: this }, "Design Prompt"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-3 border rounded-md min-h-[100px]", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Your design prompt will appear here...", __source: { fileName: "", lineNumber: 464, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mt-6", __source: { fileName: "", lineNumber: 472, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSuggestPrompt, disabled: loading, className: "flex-1 bg-[#6c757d] hover:bg-[#5a6268] text-white font-bold py-3 px-6 rounded-md transition duration-200", __source: { fileName: "", lineNumber: 473, columnNumber: 17 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 479, columnNumber: 21 }, __self: this }) : "Suggest Prompt"), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, disabled: loading || !prompt, className: "flex-1 bg-[#4a90e2] hover:bg-[#357abd] text-white font-bold py-3 px-6 rounded-md transition duration-200", __source: { fileName: "", lineNumber: 484, columnNumber: 17 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 490, columnNumber: 21 }, __self: this }) : "Generate Design"))), image && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 499, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `Generated ${activeTab} design`, className: "w-full h-auto rounded-md", __source: { fileName: "", lineNumber: 500, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handlePrint, className: "mt-4 bg-[#4a90e2] hover:bg-[#357abd] text-white font-bold py-2 px-4 rounded-md transition duration-200", __source: { fileName: "", lineNumber: 505, columnNumber: 17 }, __self: this }, "Print Design"))), /*#__PURE__*/ React.createElement("footer", { className: "text-center text-[#666] text-sm mt-8 pb-4", __source: { fileName: "", lineNumber: 515, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 516, columnNumber: 13 }, __self: this }, "Powered by Five Stars App Solutions"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 517, columnNumber: 13 }, __self: this }, "© All Rights Reserved Five Stars App Solutions 2024")))); }

Five Stars Design Generator⭐⭐⭐⭐⭐

Five Stars Design Generator
⭐⭐⭐⭐⭐