function MainComponent() { const [characterInfo, setCharacterInfo] = React.useState({ name: '', gender: '', age: '', pronoun: '', behavioralConcerns: '', favoriteThings: '', dreams: '', additionalInfo: '', symbolicEvents: '' }); const [stories, setStories] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const [coverImages, setCoverImages] = React.useState([]); const [userClicks, setUserClicks] = React.useState(0); const [referralLink, setReferralLink] = React.useState(''); const [referralVisible, setReferralVisible] = React.useState(false); const [displayQRCode, setDisplayQRCode] = React.useState(false); const handleChange = (e)=>{ setCharacterInfo((prevInfo)=>({ ...prevInfo, [e.target.name]: e.target.value })); }; const submitCharacterInfo = async ()=>{ if (userClicks < 3) { setIsLoading(true); setStories([]); setUserClicks(userClicks + 1); try { const currentTime = new Date().toISOString(); await fetch('/api/db/access-management', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `access_records` (`name`, `gender`, `age`, `pronoun`, `behavioral_concerns`, `favorite_things`, `dreams`, `additional_info`, `symbolic_events`, `id`) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)", values: [ characterInfo.name, characterInfo.gender, characterInfo.age, characterInfo.pronoun, characterInfo.behavioralConcerns, characterInfo.favoriteThings, characterInfo.dreams, characterInfo.additionalInfo, characterInfo.symbolicEvents, currentTime ] }) }); const response = await fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": `あなたは一流の絵本作家です。これから、一人ひとりの子供の、子供のための、世界にたった一つだけの、その子専用の心の底から感動できる絵本のストーリーを生成してください。 #名前: ${characterInfo.name} #性別: ${characterInfo.gender} #年齢: ${characterInfo.age} #一人称(自分の呼び名): ${characterInfo.pronoun} #親が悩むその子の言動や行動: ${characterInfo.behavioralConcerns} #好きなもの: ${characterInfo.favoriteThings} #夢や目標: ${characterInfo.dreams} #その他のその子の情報: ${characterInfo.additionalInfo} #その他のその子の特徴や象徴的な出来事: ${characterInfo.symbolicEvents}` } ] }) }); const data = await response.json(); data.choices[0].message.content.split('\n').forEach((sentence, index)=>{ setTimeout(()=>{ setStories((oldStories)=>[ ...oldStories, sentence ]); }, index * 1000); }); } catch (error) { console.error('Failed to fetch story:', error); } finally{ setIsLoading(false); } } else { setReferralVisible(true); } }; const createCoverImagePrompt = ()=>{ return `あなたはストーリーの文章から画像生成用のプロンプトを作る一流のクリエーターです。\n${stories.join('\n')}`; }; const createCoverImages = async ()=>{ setIsLoading(true); setCoverImages([]); const prompt = createCoverImagePrompt(); try { for(let i = 0; i < 4; i++){ const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": prompt } ], "system_prompt": "Explain this content" }) }); const data = await response.json(); const imagePrompt = data.choices[0].message.content; const imageResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(imagePrompt)}`, { method: 'GET' }); const imageData = await imageResponse.json(); setCoverImages((oldImages)=>[ ...oldImages, ...imageData.data ]); } } catch (error) { console.error('Failed to generate cover images:', error); } finally{ setIsLoading(false); } }; const handleBack = ()=>{ window.location.href = "https://ehon.life/"; }; const handleShareToFriend = ()=>{ const userID = 'example_user_id'; const newUserReferralLink = `https://aiehon.created.app?referralId=${userID}`; setReferralLink(newUserReferralLink); setDisplayQRCode(true); }; const handleCopyLink = ()=>{ navigator.clipboard.writeText(`${referralLink}\nパーソナライズされた世界にたった一つの絵本のストーリーが無料で作れるウェブページ`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full min-h-screen p-4 bg-gradient-to-b from-[#ADD8E6] to-[#FFFFFF] relative font-crimson-text", __source: { fileName: "", lineNumber: 141, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { animation: 'flyInAnimation 5s ease-in-out forwards, fadeInAnimation 2s ease-in-out infinite', backgroundColor: '#FFFFFF', width: '120%' }, __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", style: { animation: 'textMorph 5s ease-in-out infinite' }, __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { style: { color: '#ff7f7f' }, __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, "無料で絵本のストーリーを作ってみる"), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 144, columnNumber: 70 }, __self: this }), /*#__PURE__*/ React.createElement("span", { style: { color: '#ff7f7f' }, __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, "Personalized Story"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mt-8 text-center", __source: { fileName: "", lineNumber: 149, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#6D6875]", __source: { fileName: "", lineNumber: 150, columnNumber: 9 }, __self: this }, "主人公となる子の情報"), /*#__PURE__*/ React.createElement("form", { className: "mt-4 space-y-4", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "名前", onChange: handleChange, className: "w-full p-2 text-black", required: true, __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "gender", onChange: handleChange, className: "w-full p-2 text-black", required: true, __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, "性別を選択"), /*#__PURE__*/ React.createElement("option", { value: "男の子", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, "男の子"), /*#__PURE__*/ React.createElement("option", { value: "女の子", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, "女の子")), /*#__PURE__*/ React.createElement("input", { type: "number", name: "age", placeholder: "年齢", min: "0", onChange: handleChange, className: "w-full p-2 text-black", required: true, __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "pronoun", placeholder: "一人称(自分の呼び名)", onChange: handleChange, className: "w-full p-2 text-black", required: true, __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "behavioralConcerns", placeholder: "親が悩むその子の言動や行動", onChange: handleChange, className: "w-full p-2 text-black", required: true, __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "favoriteThings", placeholder: "好きなもの", onChange: handleChange, className: "w-full p-2 text-black", required: true, __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "dreams", placeholder: "夢や目標", onChange: handleChange, className: "w-full p-2 text-black", required: true, __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "additionalInfo", placeholder: "その他のその子の情報", onChange: handleChange, className: "w-full p-2 text-black", required: true, __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "symbolicEvents", placeholder: "その他のその子の特徴や象徴的な出来事", onChange: handleChange, className: "w-full p-2 text-black", required: true, __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: submitCharacterInfo, className: "w-full max-w-md py-2 mt-4 text-white bg-[#E5989B] hover:bg-[#6D6875]", __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this }, "無料で絵本のストーリーを作る")), referralVisible && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, "無料の上限に達しました。さらに無料でストーリーを作るにはAI Ehonを友達に紹介すれば可能です"), /*#__PURE__*/ React.createElement("button", { onClick: handleShareToFriend, className: "px-4 py-2 mt-4 bg-[#E5989B] text-white", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, "友達に紹介する"), referralLink && /*#__PURE__*/ React.createElement("div", { className: "p-4 border rounded-lg mt-4 bg-[#F3E8FF]", __source: { fileName: "", lineNumber: 171, columnNumber: 30 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: referralLink, target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }, referralLink), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, "パーソナライズされた世界にたった一つの絵本のストーリーが無料で作れるウェブページ"), /*#__PURE__*/ React.createElement("button", { onClick: handleCopyLink, className: "px-4 py-2 mt-4 bg-[#E5989B] text-white", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, "コピー")), displayQRCode && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 176, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(referralLink)}`, alt: "Referral QR Code", __source: { fileName: "", lineNumber: 176, columnNumber: 73 }, __self: this })))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 z-50 flex items-center justify-center w-full h-full bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 181, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full border-t-2 border-b-2 border-[#B5838D] h-12 w-12", __source: { fileName: "", lineNumber: 182, columnNumber: 9 }, __self: this })), stories.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "p-6 mt-8 bg-[#FFE5D9] rounded-lg text-black text-center max-w-md mx-auto", __source: { fileName: "", lineNumber: 186, columnNumber: 9 }, __self: this }, stories.map((sentence, index)=>/*#__PURE__*/ React.createElement("p", { key: index, style: { animation: `typing ${0.5 * index + 1}s steps(30, end), blink-caret .75s step-end infinite` }, className: "whitespace-pre-wrap inline-block", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, sentence)), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 190, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: createCoverImages, className: "px-4 py-2 mt-4 text-white bg-[#E5989B] hover:bg-[#6D6875]", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, "この絵本の表紙を作る"), /*#__PURE__*/ React.createElement("p", { className: "text-xs", __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, "※[無料お試しの為、生成レベル1.0を使用、有償の際はV3.0となります]"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-black underline", __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this }, "※[V3.0のクオリティーはこちらになります]"), /*#__PURE__*/ React.createElement("a", { href: "https://ehon.life/model", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 196, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ehon.life/story/images/9441341475a2ba23dfc504e50f678e6b.png", alt: "表紙アート V3.0クオリティー例", className: "w-1/2 h-auto mx-auto", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }))), coverImages.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4 mt-8 sm:grid-cols-2", __source: { fileName: "", lineNumber: 203, columnNumber: 9 }, __self: this }, coverImages.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `Generated.cover.art.${index + 1}`, className: "w-full h-auto rounded-lg", __source: { fileName: "", lineNumber: 205, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("a", { href: "https://ehon.life", className: "fixed bottom-[20px] left-1/2 transform -translate-x-1/2 z-50", __source: { fileName: "", lineNumber: 210, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ehon.life/story/images/e406e7c3a73d4cf83770511e3b4b3aeb.jpg", alt: "AI Ehonのロゴ画像", __source: { fileName: "", lineNumber: 211, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-sm text-center", __source: { fileName: "", lineNumber: 214, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#6D6875]", __source: { fileName: "", lineNumber: 215, columnNumber: 9 }, __self: this }, "AI Ehon Copyright"), /*#__PURE__*/ React.createElement("img", { src: "https://png.pngtree.com/png-vector/20220506/ourmid/pngtree-copyright-sign-concept-ink-vector-png-image_17722512.png", alt: "著作権イメージ", className: "w-1/5 h-auto mx-auto", __source: { fileName: "", lineNumber: 216, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleBack, className: "mt-4 px-4 py-2 bg-[#E5989B] text-white", __source: { fileName: "", lineNumber: 217, columnNumber: 9 }, __self: this }, "戻る"), /*#__PURE__*/ React.createElement("div", { className: "h-[100px]", __source: { fileName: "", lineNumber: 218, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 221, columnNumber: 7 }, __self: this }, ` @keyframes fadeInAnimation { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @keyframes textMorph { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @keyframes flyInAnimation { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: black } } `)); }