function MainComponent() { const [isStarted, setIsStarted] = useState(false); const [isLoading, setIsLoading] = useState(false); const handleStart = ()=>{ setIsLoading(true); setTimeout(()=>{ setIsStarted(true); setIsLoading(false); }, 1000); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-cover bg-center p-4 flex flex-col items-center justify-center font-merriweather relative overflow-hidden", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-cover bg-center bg-opacity-50", style: { backgroundImage: `url(https://ucarecdn.com/374ff448-a5ff-43bf-b76a-d489b02e9c52/)` }, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 text-center bg-white bg-opacity-80 p-8 rounded-lg", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl md:text-7xl font-bold text-[#2c3e50] mb-8 animate-fade-in", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "クリスマスカード"), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl text-[#34495e] mb-12 animate-fade-in-delay", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "あなただけのオリジナルカードを作りましょう"), isStarted ? /*#__PURE__*/ React.createElement(ChristmasCardMaker, { __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }) : /*#__PURE__*/ React.createElement("button", { onClick: handleStart, disabled: isLoading, className: ` bg-[#e74c3c] hover:bg-[#c0392b] text-white font-bold py-6 px-12 rounded-lg shadow-lg text-4xl md:text-5xl transition duration-300 ease-in-out transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed animate-bounce `, __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }), "Loading...") : "START")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, ` @keyframes fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in 1s ease-out; } .animate-fade-in-delay { animation: fade-in 1s ease-out 0.5s both; } .animate-bounce { animation: bounce 2s infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } `)); } function ChristmasCardMaker() { const [step, setStep] = useState(1); const [generatedImages, setGeneratedImages] = useState([]); const [selectedImage, setSelectedImage] = useState(null); const [title, setTitle] = useState(""); const [customTitle, setCustomTitle] = useState(""); const [messages, setMessages] = useState([]); const [customMessage, setCustomMessage] = useState(""); const [name, setName] = useState(""); const [showCustomTitle, setShowCustomTitle] = useState(false); const [showCustomMessage, setShowCustomMessage] = useState(false); useEffect(()=>{ generateInitialImages(); handleGenerateMessages(); }, []); const generateInitialImages = async ()=>{ const images = await generateImages(3); setGeneratedImages(images); }; const generateImages = async (count)=>{ try { const promises = Array.from({ length: count }).fill().map(()=>fetch("/integrations/stable-diffusion-v-3/?prompt=christmas card background, festive, warm colors, high quality&width=559&height=377").then((res)=>res.json()).then((data)=>data.data[0])); return await Promise.all(promises); } catch (error) { console.error("Error generating images:", error); return []; } }; const handleGenerateMessages = async ()=>{ const newMessages = await generateMessages(3); setMessages(newMessages); }; const generateMessages = async (count)=>{ try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `クリスマスの心温まる一言メッセージを${count}つ日本語で生成してください。各メッセージは1-2文で簡潔に。番号は付けないでください。` } ] }) }); const data = await response.json(); return data.choices[0].message.content.split("\n").filter((msg)=>msg.trim()); } catch (error) { console.error("Error generating messages:", error); return []; } }; const handleDownload = async ()=>{ const canvas = document.createElement("canvas"); canvas.width = 559; canvas.height = 377; const ctx = canvas.getContext("2d"); const img = new Image(); img.crossOrigin = "anonymous"; img.onload = ()=>{ ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.font = "bold 24px Merriweather"; ctx.textAlign = "center"; ctx.strokeStyle = "black"; ctx.lineWidth = 3; ctx.fillStyle = "black"; addTextToCanvas(ctx, title || customTitle, canvas.width / 2, 50, "bold 24px Merriweather"); addTextToCanvas(ctx, customMessage || messages[0], canvas.width / 2, canvas.height / 2, "16px Playfair"); addTextToCanvas(ctx, name, canvas.width / 2, canvas.height - 30, "14px Merriweather"); const link = document.createElement("a"); link.href = canvas.toDataURL("image/png"); link.download = "christmas_card.png"; link.click(); }; img.src = selectedImage; }; const addTextToCanvas = (ctx, text, x, y, font)=>{ if (text) { ctx.font = font; ctx.strokeText(text, x, y); ctx.fillText(text, x, y); } }; const steps = [ { title: "1. 背景画像を選ぶ", content: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 208, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 209, columnNumber: 11 }, __self: this }, generatedImages.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `クリスマス背景 ${index + 1}`, className: `w-32 h-32 object-cover cursor-pointer rounded-lg transition duration-300 ${selectedImage === image ? "ring-4 ring-[#e74c3c]" : ""}`, onClick: ()=>setSelectedImage(image), __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: generateInitialImages, className: "bg-[#e74c3c] hover:bg-[#c0392b] text-white font-bold py-2 px-4 rounded-lg shadow-lg transition duration-300 mt-4", __source: { fileName: "", lineNumber: 222, columnNumber: 11 }, __self: this }, "もう一度生成")) }, { title: "2. タイトルを選ぶ", content: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 234, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 235, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setTitle("メリークリスマス！"); setShowCustomTitle(false); }, className: "bg-[#e74c3c] hover:bg-[#c0392b] text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300", __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, "メリークリスマス！"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setTitle("Merry Christmas"); setShowCustomTitle(false); }, className: "bg-[#e74c3c] hover:bg-[#c0392b] text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300", __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, "Merry Christmas"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowCustomTitle(true), className: "bg-[#e74c3c] hover:bg-[#c0392b] text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300", __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }, "自分で入力")), showCustomTitle && /*#__PURE__*/ React.createElement("input", { type: "text", name: "customTitle", value: customTitle, onChange: (e)=>setCustomTitle(e.target.value), placeholder: "タイトルを入力してください", className: "w-full max-w-md px-4 py-2 rounded-lg border-2 border-gray-300 focus:border-[#e74c3c] focus:outline-none", __source: { fileName: "", lineNumber: 262, columnNumber: 13 }, __self: this })) }, { title: "3. メッセージを選ぶ", content: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 277, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-3 w-full max-w-md", __source: { fileName: "", lineNumber: 278, columnNumber: 11 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>{ setCustomMessage(message); setShowCustomMessage(false); }, className: "cursor-pointer p-3 bg-white rounded-lg shadow hover:shadow-md transition duration-300", __source: { fileName: "", lineNumber: 280, columnNumber: 15 }, __self: this }, message))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2 w-full md:w-auto", __source: { fileName: "", lineNumber: 292, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateMessages, className: "bg-[#e74c3c] hover:bg-[#c0392b] text-white font-bold py-2 px-4 rounded-lg shadow-lg transition duration-300 w-full md:w-auto", __source: { fileName: "", lineNumber: 293, columnNumber: 13 }, __self: this }, "もう一度提案"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowCustomMessage(true), className: "bg-[#e74c3c] hover:bg-[#c0392b] text-white font-bold py-2 px-4 rounded-lg shadow-lg transition duration-300 w-full md:w-auto", __source: { fileName: "", lineNumber: 299, columnNumber: 13 }, __self: this }, "自分で入力")), showCustomMessage && /*#__PURE__*/ React.createElement("input", { type: "text", name: "customMessage", value: customMessage, onChange: (e)=>setCustomMessage(e.target.value), placeholder: "メッセージを入力してください", className: "w-full max-w-md px-4 py-2 rounded-lg border-2 border-gray-300 focus:border-[#e74c3c] focus:outline-none mt-2", __source: { fileName: "", lineNumber: 308, columnNumber: 13 }, __self: this })) }, { title: "4. 名前を入力", content: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 323, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: name, onChange: (e)=>setName(e.target.value), placeholder: "あなたの名前を入力してください", className: "w-full max-w-md px-4 py-2 rounded-lg border-2 border-gray-300 focus:border-[#e74c3c] focus:outline-none", __source: { fileName: "", lineNumber: 324, columnNumber: 11 }, __self: this })) }, { title: "5. 完成！", content: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 338, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2 w-full md:w-auto", __source: { fileName: "", lineNumber: 339, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, className: "bg-[#e74c3c] hover:bg-[#c0392b] text-white font-bold py-4 px-8 rounded-lg shadow-lg text-xl transition duration-300 ease-in-out transform hover:scale-105 w-full md:w-auto", __source: { fileName: "", lineNumber: 340, columnNumber: 13 }, __self: this }, "PNGで保存"))) } ]; const currentStep = steps[step - 1]; return /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto p-4", __source: { fileName: "", lineNumber: 355, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[148mm] h-[100mm] mb-8 rounded-lg overflow-hidden bg-white shadow-xl", __source: { fileName: "", lineNumber: 356, columnNumber: 7 }, __self: this }, selectedImage && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-cover bg-center", style: { backgroundImage: `url(${selectedImage})` }, __source: { fileName: "", lineNumber: 358, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 362, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-black p-8", __source: { fileName: "", lineNumber: 363, columnNumber: 15 }, __self: this }, step > 1 && (title || customTitle) && /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-merriweather mb-8 text-shadow", __source: { fileName: "", lineNumber: 365, columnNumber: 19 }, __self: this }, title || customTitle), step > 2 && (customMessage || messages[0]) && /*#__PURE__*/ React.createElement("p", { className: "text-lg font-playfair mb-8 text-shadow", __source: { fileName: "", lineNumber: 370, columnNumber: 19 }, __self: this }, customMessage || messages[0]), step > 3 && name && /*#__PURE__*/ React.createElement("p", { className: "text-base font-merriweather text-shadow", __source: { fileName: "", lineNumber: 375, columnNumber: 19 }, __self: this }, name))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 mb-6", __source: { fileName: "", lineNumber: 385, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-merriweather mb-6", __source: { fileName: "", lineNumber: 386, columnNumber: 9 }, __self: this }, currentStep.title), currentStep.content), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 390, columnNumber: 7 }, __self: this }, step > 1 && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep(step - 1), className: "w-full bg-[#6c757d] hover:bg-[#5a6268] text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105", __source: { fileName: "", lineNumber: 392, columnNumber: 11 }, __self: this }, "戻る"), step < steps.length && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep(step + 1), className: "w-full bg-[#e74c3c] hover:bg-[#c0392b] text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105", __source: { fileName: "", lineNumber: 400, columnNumber: 11 }, __self: this }, "次へ"))); }