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-2 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/d8fcaa80-e26f-47df-acfe-6273edeb1a77/)` }, __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-5xl md:text-6xl font-bold text-[#2c3e50] mb-6 animate-fade-in", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "年賀状メーカー"), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl text-[#34495e] mb-8 animate-fade-in-delay", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "あなただけのオリジナル年賀状を作りましょう"), isStarted ? /*#__PURE__*/ React.createElement(NewYearCardMaker, { __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }) : /*#__PURE__*/ React.createElement("button", { onClick: handleStart, disabled: isLoading, className: ` bg-[#D4424E] hover:bg-[#B33641] text-white font-bold py-4 px-8 rounded-lg shadow-lg text-2xl md:text-3xl 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 NewYearCardMaker() { 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); const [isGeneratingImages, setIsGeneratingImages] = useState(true); const [titleColor, setTitleColor] = useState("#000000"); const [messageColor, setMessageColor] = useState("#000000"); const [nameColor, setNameColor] = useState("#000000"); const resetForm = ()=>{ setStep(1); setGeneratedImages([]); setSelectedImage(null); setTitle(""); setCustomTitle(""); setMessages([]); setCustomMessage(""); setName(""); setShowCustomTitle(false); setShowCustomMessage(false); setIsGeneratingImages(true); setTitleColor("#000000"); setMessageColor("#000000"); setNameColor("#000000"); generateInitialImages(); handleGenerateMessages(); }; useEffect(()=>{ generateInitialImages(); handleGenerateMessages(); }, []); const generateInitialImages = async ()=>{ setIsGeneratingImages(true); const newImages = await generateImages(3); setGeneratedImages(newImages); setIsGeneratingImages(false); }; const generateImages = async (count)=>{ const prompts = [ "japanese new year card background with kadomatsu bamboo decorations and plum blossoms, ornate border design, traditional japanese art style, warm lighting, high quality, decorative frame, landscape format 148mm x 100mm", "japanese new year card background with shinto shrine gates and paper lanterns, ornate border design, traditional japanese art style, warm lighting, high quality, decorative frame, landscape format 148mm x 100mm", "japanese new year card background with osechi ryori and mochi decorations, ornate border design, traditional japanese art style, warm lighting, high quality, decorative frame, landscape format 148mm x 100mm" ]; try { const imagePromises = Array.from({ length: count }).map((_, index)=>fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(prompts[index % prompts.length])}&width=740&height=500`).then((res)=>res.json()).then((data)=>data.data[0])); return await Promise.all(imagePromises); } catch (error) { console.error("Error generating images:", error); return []; } }; const handleGenerateMessages = async ()=>{ try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `新年の挨拶の心温まる一言メッセージを3つ日本語で生成してください。各メッセージは1-2文で簡潔に。番号は付けないでください。` } ] }) }); const data = await response.json(); const newMessages = data.choices[0].message.content.split("\n").filter((msg)=>msg.trim()); setMessages(newMessages); } catch (error) { console.error("Error generating messages:", error); setMessages([]); } }; const handleDownload = async ()=>{ const canvas = document.createElement("canvas"); canvas.width = 740; canvas.height = 500; const ctx = canvas.getContext("2d"); const img = new Image(); img.crossOrigin = "anonymous"; img.onload = ()=>{ ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.textAlign = "center"; if (title || customTitle) { ctx.font = "bold 48px serif"; ctx.fillStyle = titleColor; ctx.fillText(title || customTitle, canvas.width / 2, 100); } if (customMessage || messages[0]) { ctx.font = "32px serif"; ctx.fillStyle = messageColor; const message = customMessage || messages[0]; const lines = message.split("\n"); lines.forEach((line, i)=>{ ctx.fillText(line, canvas.width / 2, canvas.height / 2 + i * 40); }); } if (name) { ctx.font = "24px serif"; ctx.fillStyle = nameColor; ctx.fillText(name, canvas.width / 2, canvas.height - 80); } const link = document.createElement("a"); link.href = canvas.toDataURL("image/png"); link.download = "newyear_card.png"; link.click(); }; img.src = selectedImage; }; const steps = [ { title: "1. 背景画像を選ぶ", content: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 220, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, isGeneratingImages ? /*#__PURE__*/ React.createElement("div", { className: "col-span-3 text-center py-8", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl text-[#D4424E] mb-4", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 225, columnNumber: 17 }, __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-[#D4424E]" : ""}`, onClick: ()=>setSelectedImage(image), __source: { fileName: "", lineNumber: 229, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: generateInitialImages, disabled: isGeneratingImages, className: "bg-[#D4424E] hover:bg-[#B33641] text-white font-bold py-2 px-4 rounded-lg shadow-lg transition duration-300 mt-4 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 241, columnNumber: 11 }, __self: this }, "もう一度生成")) }, { title: "2. タイトルを選ぶ", content: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 254, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 255, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setTitle("謹賀新年"); setShowCustomTitle(false); }, className: "bg-[#D4424E] hover:bg-[#B33641] text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300", __source: { fileName: "", lineNumber: 256, columnNumber: 13 }, __self: this }, "謹賀新年"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setTitle("明けましておめでとうございます"); setShowCustomTitle(false); }, className: "bg-[#D4424E] hover:bg-[#B33641] text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300", __source: { fileName: "", lineNumber: 265, columnNumber: 13 }, __self: this }, "明けましておめでとうございます"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowCustomTitle(true), className: "bg-[#D4424E] hover:bg-[#B33641] text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300", __source: { fileName: "", lineNumber: 274, 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-[#D4424E] focus:outline-none", __source: { fileName: "", lineNumber: 282, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 291, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm", __source: { fileName: "", lineNumber: 292, columnNumber: 13 }, __self: this }, "文字色:"), /*#__PURE__*/ React.createElement("input", { type: "color", value: titleColor, onChange: (e)=>setTitleColor(e.target.value), className: "w-8 h-8 rounded cursor-pointer", __source: { fileName: "", lineNumber: 293, columnNumber: 13 }, __self: this }))) }, { title: "3. メッセージを選ぶ", content: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 306, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-3 w-full max-w-md", __source: { fileName: "", lineNumber: 307, 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: 309, columnNumber: 15 }, __self: this }, message))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2 w-full md:w-auto", __source: { fileName: "", lineNumber: 321, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateMessages, className: "bg-[#D4424E] hover:bg-[#B33641] text-white font-bold py-2 px-4 rounded-lg shadow-lg transition duration-300 w-full md:w-auto", __source: { fileName: "", lineNumber: 322, columnNumber: 13 }, __self: this }, "もう一度提案"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowCustomMessage(true), className: "bg-[#D4424E] hover:bg-[#B33641] text-white font-bold py-2 px-4 rounded-lg shadow-lg transition duration-300 w-full md:w-auto", __source: { fileName: "", lineNumber: 328, 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-[#D4424E] focus:outline-none mt-2", __source: { fileName: "", lineNumber: 337, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 346, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm", __source: { fileName: "", lineNumber: 347, columnNumber: 13 }, __self: this }, "文字色:"), /*#__PURE__*/ React.createElement("input", { type: "color", value: messageColor, onChange: (e)=>setMessageColor(e.target.value), className: "w-8 h-8 rounded cursor-pointer", __source: { fileName: "", lineNumber: 348, columnNumber: 13 }, __self: this }))) }, { title: "4. 名前を入力", content: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 361, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 w-full max-w-md", __source: { fileName: "", lineNumber: 362, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: name, onChange: (e)=>setName(e.target.value), placeholder: "あなたの名前を入力してください", className: "flex-1 px-4 py-2 rounded-lg border-2 border-gray-300 focus:border-[#e74c3c] focus:outline-none", __source: { fileName: "", lineNumber: 363, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 371, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm", __source: { fileName: "", lineNumber: 372, columnNumber: 15 }, __self: this }, "文字色:"), /*#__PURE__*/ React.createElement("input", { type: "color", value: nameColor, onChange: (e)=>setNameColor(e.target.value), className: "w-8 h-8 rounded cursor-pointer", __source: { fileName: "", lineNumber: 373, columnNumber: 15 }, __self: this })))) }, { title: "5. 完成！", content: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 387, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2 w-full md:w-auto", __source: { fileName: "", lineNumber: 388, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, className: "bg-[#D4424E] hover:bg-[#B33641] 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: 389, columnNumber: 13 }, __self: this }, "PNGで保存"), /*#__PURE__*/ React.createElement("button", { onClick: resetForm, className: "bg-[#6c757d] hover:bg-[#5a6268] 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 mt-4", __source: { fileName: "", lineNumber: 395, columnNumber: 13 }, __self: this }, "もう一度作る"))) } ]; const currentStep = steps[step - 1]; return /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto p-1", __source: { fileName: "", lineNumber: 410, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[148mm] h-[100mm] mb-2 rounded-lg overflow-hidden bg-white shadow-xl mx-auto scale-[0.85] md:scale-100 origin-top", __source: { fileName: "", lineNumber: 411, columnNumber: 7 }, __self: this }, selectedImage && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-cover bg-center", style: { backgroundImage: `url(${selectedImage})` }, __source: { fileName: "", lineNumber: 413, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 417, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center p-4 bg-white bg-opacity-30 rounded-lg max-w-[80%]", __source: { fileName: "", lineNumber: 418, columnNumber: 15 }, __self: this }, step > 1 && (title || customTitle) && /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl font-merriweather mb-2 text-shadow", style: { color: titleColor }, __source: { fileName: "", lineNumber: 420, columnNumber: 19 }, __self: this }, title || customTitle), step > 2 && (customMessage || messages[0]) && /*#__PURE__*/ React.createElement("p", { className: "text-base md:text-lg font-playfair mb-2 text-shadow whitespace-pre-wrap", style: { color: messageColor }, __source: { fileName: "", lineNumber: 428, columnNumber: 19 }, __self: this }, customMessage || messages[0]), step > 3 && name && /*#__PURE__*/ React.createElement("p", { className: "text-sm md:text-base font-merriweather text-shadow", style: { color: nameColor }, __source: { fileName: "", lineNumber: 436, columnNumber: 19 }, __self: this }, name))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-2 mb-2 h-[40vh] overflow-y-auto", __source: { fileName: "", lineNumber: 449, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg md:text-xl font-merriweather mb-2 sticky top-0 bg-white z-10", __source: { fileName: "", lineNumber: 450, columnNumber: 9 }, __self: this }, currentStep.title), currentStep.content), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 sticky bottom-0 bg-white p-1 z-20", __source: { fileName: "", lineNumber: 456, 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-2 px-4 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105", __source: { fileName: "", lineNumber: 458, columnNumber: 11 }, __self: this }, "戻る"), step < steps.length && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep(step + 1), className: "w-full bg-[#D4424E] hover:bg-[#B33641] text-white font-bold py-2 px-4 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105", __source: { fileName: "", lineNumber: 466, columnNumber: 11 }, __self: this }, "次へ"))); }