"use client"; function MainComponent() { const [sketch, setSketch] = React.useState(null); const [generatedImage, setGeneratedImage] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); const [prompt, setPrompt] = React.useState(""); const [editablePrompt, setEditablePrompt] = React.useState(""); const [selectedStyle, setSelectedStyle] = React.useState(""); const canvasRef = React.useRef(null); const [isDrawing, setIsDrawing] = React.useState(false); const [uploadedImage, setUploadedImage] = React.useState(null); const [canvasSize, setCanvasSize] = React.useState("1:1"); const [undoStack, setUndoStack] = React.useState([]); const [redoStack, setRedoStack] = React.useState([]); const styles = [ "super realistic", "illustration", "cartoon", "anime and manga", "digital art", "cyberpunk", "vintage", "van gogh", "logo", "street art", "pop art", "3d", "photorealistic portrait", "pixel art", "comics", "baroque art", "renaissance art", "romantic art" ]; const sizes = { "1:1": { width: 300, height: 300 }, "16:9": { width: 400, height: 225 }, "9:16": { width: 225, height: 400 } }; React.useEffect(()=>{ const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext("2d"); ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, canvas.width, canvas.height); saveCanvasState(); } }, [ canvasSize ]); const saveCanvasState = ()=>{ const canvas = canvasRef.current; if (canvas) { setUndoStack([ ...undoStack, canvas.toDataURL() ]); setRedoStack([]); } }; const undo = ()=>{ if (undoStack.length > 1) { const prevState = undoStack[undoStack.length - 2]; setRedoStack([ ...redoStack, undoStack[undoStack.length - 1] ]); setUndoStack(undoStack.slice(0, -1)); loadCanvasState(prevState); } }; const redo = ()=>{ if (redoStack.length > 0) { const nextState = redoStack[redoStack.length - 1]; setUndoStack([ ...undoStack, nextState ]); setRedoStack(redoStack.slice(0, -1)); loadCanvasState(nextState); } }; const loadCanvasState = (state)=>{ const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext("2d"); const img = new Image(); img.onload = ()=>{ ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); }; img.src = state; } }; const startDrawing = (e)=>{ const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext("2d"); const rect = canvas.getBoundingClientRect(); const x = e.type.includes("mouse") ? e.clientX - rect.left : e.touches[0].clientX - rect.left; const y = e.type.includes("mouse") ? e.clientY - rect.top : e.touches[0].clientY - rect.top; ctx.beginPath(); ctx.moveTo(x, y); setIsDrawing(true); } }; const draw = (e)=>{ if (!isDrawing) return; const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext("2d"); const rect = canvas.getBoundingClientRect(); const x = e.type.includes("mouse") ? e.clientX - rect.left : e.touches[0].clientX - rect.left; const y = e.type.includes("mouse") ? e.clientY - rect.top : e.touches[0].clientY - rect.top; ctx.lineTo(x, y); ctx.stroke(); } }; const stopDrawing = ()=>{ setIsDrawing(false); const canvas = canvasRef.current; if (canvas) { setSketch(canvas.toDataURL()); saveCanvasState(); } }; const clearCanvas = ()=>{ const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext("2d"); ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, canvas.width, canvas.height); setSketch(null); setGeneratedImage(null); setPrompt(""); setEditablePrompt(""); setSelectedStyle(""); setUploadedImage(null); saveCanvasState(); } }; const handleImageUpload = (e)=>{ const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = ()=>{ setUploadedImage(reader.result); setSketch(reader.result); }; reader.readAsDataURL(file); } }; const generateImage = async ()=>{ if (!sketch && !uploadedImage || !selectedStyle) return; setIsLoading(true); try { const messages = [ { role: "user", content: [ { type: "text", text: `Generate an image based on this ${uploadedImage ? "photo" : "sketch"} in the style of ${selectedStyle}. Please describe the image in detail.` }, { type: "image_url", image_url: { url: uploadedImage || sketch } } ] } ]; const response = await fetch("/integrations/gpt-vision/", { method: "POST", body: JSON.stringify({ messages }), headers: { "Content-Type": "application/json" } }); const data = await response.json(); if (data.choices && data.choices.length > 0) { const imageDescription = data.choices[0].message.content; setPrompt(imageDescription); setEditablePrompt(imageDescription); const imageResponse = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(imageDescription + ` Style: ${selectedStyle}`)}`, { method: "GET" }); const imageData = await imageResponse.json(); if (imageData.data && imageData.data.length > 0) { setGeneratedImage(imageData.data[0]); } } } catch (error) { console.error("Error:", error); } finally{ setIsLoading(false); } }; const regenerateImage = async ()=>{ if (!editablePrompt || !selectedStyle) return; setIsLoading(true); try { const imageResponse = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(editablePrompt + ` Style: ${selectedStyle}`)}`, { method: "GET" }); const imageData = await imageResponse.json(); if (imageData.data && imageData.data.length > 0) { setGeneratedImage(imageData.data[0]); } } catch (error) { console.error("Error:", error); } finally{ setIsLoading(false); } }; const downloadImage = ()=>{ if (generatedImage) { const link = document.createElement("a"); link.href = generatedImage; link.download = `generated-image-${canvasSize}.png`; link.target = "_blank"; link.rel = "noopener noreferrer"; link.click(); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-gradient-to-br from-pink-200 to-purple-300 p-4 md:p-8", __source: { fileName: "", lineNumber: 255, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 256, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-purple-800 font-sans", __source: { fileName: "", lineNumber: 257, columnNumber: 9 }, __self: this }, "Sketch to Image")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-center items-center gap-6 md:gap-8", __source: { fileName: "", lineNumber: 261, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-4", __source: { fileName: "", lineNumber: 262, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4", __source: { fileName: "", lineNumber: 263, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mr-2", __source: { fileName: "", lineNumber: 264, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: undo, className: "px-3 py-1 mx-1 rounded-full text-sm bg-pink-200 text-purple-800 hover:bg-pink-300 transition duration-300 ease-in-out", disabled: undoStack.length <= 1, __source: { fileName: "", lineNumber: 265, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-undo", __source: { fileName: "", lineNumber: 270, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: redo, className: "px-3 py-1 mx-1 rounded-full text-sm bg-pink-200 text-purple-800 hover:bg-pink-300 transition duration-300 ease-in-out", disabled: redoStack.length === 0, __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo", __source: { fileName: "", lineNumber: 277, columnNumber: 17 }, __self: this }))), Object.keys(sizes).map((size)=>/*#__PURE__*/ React.createElement("button", { key: size, onClick: ()=>setCanvasSize(size), className: `px-3 py-1 mx-1 rounded-full text-sm ${canvasSize === size ? "bg-purple-500 text-white" : "bg-pink-200 text-purple-800 hover:bg-pink-300"} transition duration-300 ease-in-out`, __source: { fileName: "", lineNumber: 281, columnNumber: 15 }, __self: this }, size))), uploadedImage ? /*#__PURE__*/ React.createElement("img", { src: uploadedImage, alt: "Uploaded sketch or photo", className: "object-cover rounded-lg mb-4", style: { width: sizes[canvasSize].width, height: sizes[canvasSize].height }, __source: { fileName: "", lineNumber: 295, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, width: sizes[canvasSize].width, height: sizes[canvasSize].height, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseOut: stopDrawing, onTouchStart: startDrawing, onTouchMove: draw, onTouchEnd: stopDrawing, className: "border-2 border-pink-400 rounded-lg cursor-crosshair touch-none", __source: { fileName: "", lineNumber: 305, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 319, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: clearCanvas, className: "bg-pink-500 text-white px-3 py-2 rounded-lg hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-400 transition duration-300 ease-in-out text-sm md:text-base", __source: { fileName: "", lineNumber: 320, columnNumber: 13 }, __self: this }, "Clear"), /*#__PURE__*/ React.createElement("label", { className: "bg-purple-500 text-white px-3 py-2 rounded-lg hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition duration-300 ease-in-out text-sm md:text-base cursor-pointer", __source: { fileName: "", lineNumber: 326, columnNumber: 13 }, __self: this }, "Upload Image", /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleImageUpload, className: "hidden", __source: { fileName: "", lineNumber: 328, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generateImage, disabled: !sketch && !uploadedImage || !selectedStyle || isLoading, className: "bg-purple-500 text-white px-3 py-2 rounded-lg hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 disabled:opacity-50 transition duration-300 ease-in-out text-sm md:text-base", __source: { fileName: "", lineNumber: 335, columnNumber: 13 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 343, columnNumber: 17 }, __self: this }) : "Generate Image"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-4", __source: { fileName: "", lineNumber: 350, columnNumber: 9 }, __self: this }, generatedImage ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 352, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "Generated image based on sketch or photo", className: "object-cover rounded-lg mb-4", style: { width: sizes[canvasSize].width, height: sizes[canvasSize].height }, __source: { fileName: "", lineNumber: 353, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 362, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: regenerateImage, className: "bg-purple-500 text-white px-3 py-2 rounded-lg hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition duration-300 ease-in-out text-sm md:text-base", __source: { fileName: "", lineNumber: 363, columnNumber: 17 }, __self: this }, "Regenerate"), /*#__PURE__*/ React.createElement("button", { onClick: downloadImage, className: "bg-pink-500 text-white px-3 py-2 rounded-lg hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-400 transition duration-300 ease-in-out text-sm md:text-base", __source: { fileName: "", lineNumber: 369, columnNumber: 17 }, __self: this }, "Download"))) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center text-purple-600 border-2 border-pink-400 rounded-lg text-sm md:text-base", style: { width: sizes[canvasSize].width, height: sizes[canvasSize].height }, __source: { fileName: "", lineNumber: 378, columnNumber: 13 }, __self: this }, "Generated image will appear here"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 bg-white rounded-lg shadow-lg p-4 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 390, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-purple-800 mb-2", __source: { fileName: "", lineNumber: 391, columnNumber: 9 }, __self: this }, "Choose Style"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-4", __source: { fileName: "", lineNumber: 392, columnNumber: 9 }, __self: this }, styles.map((style)=>/*#__PURE__*/ React.createElement("button", { key: style, onClick: ()=>setSelectedStyle(style), className: `px-3 py-1 rounded-full text-sm ${selectedStyle === style ? "bg-purple-500 text-white" : "bg-pink-200 text-purple-800 hover:bg-pink-300"} transition duration-300 ease-in-out`, __source: { fileName: "", lineNumber: 394, columnNumber: 13 }, __self: this }, style)))), prompt && /*#__PURE__*/ React.createElement("div", { className: "mt-6 bg-white rounded-lg shadow-lg p-4 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 410, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-purple-800 mb-2", __source: { fileName: "", lineNumber: 411, columnNumber: 11 }, __self: this }, "Image Description"), /*#__PURE__*/ React.createElement("textarea", { value: editablePrompt, onChange: (e)=>setEditablePrompt(e.target.value), className: "w-full h-40 p-2 border-2 border-pink-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-800", __source: { fileName: "", lineNumber: 414, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: regenerateImage, className: "mt-2 bg-purple-500 text-white px-3 py-2 rounded-lg hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition duration-300 ease-in-out text-sm md:text-base", __source: { fileName: "", lineNumber: 419, columnNumber: 11 }, __self: this }, "Update and Regenerate"))); }