function MainComponent() { const [characters, setCharacters] = React.useState([ { name: "", description: "" } ]); const [storyTone, setStoryTone] = React.useState(""); const [age, setAge] = React.useState(""); const [pages, setPages] = React.useState(""); const [customText, setCustomText] = React.useState(""); const [generatedText, setGeneratedText] = React.useState(null); const [loading, setLoading] = React.useState(false); const [generatedImages, setGeneratedImages] = React.useState([]); const handleCharactersChange = (index, field, value)=>{ const newCharacters = characters.slice(); newCharacters[index][field] = value; setCharacters(newCharacters); }; const addCharacter = ()=>{ setCharacters([ ...characters, { name: "", description: "" } ]); }; const removeCharacter = (index)=>{ const newCharacters = characters.slice(); newCharacters.splice(index, 1); setCharacters(newCharacters); }; const generateStory = async ()=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: customText } ], system_prompt: `ユーザーが指定した内容に基づいてページごとのテキストを生成してください。テキストは{"1":"１ページ目の内容", "2":"2ページ目の内容"} というJSONで返してください。` }) }); const data = await response.json(); const resultText = JSON.parse(data.choices[0].message.content); setGeneratedText(resultText); const images = await Promise.all(Object.values(resultText).map((text)=>fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(text)}`).then((res)=>res.json()))); setGeneratedImages(images.map((img)=>img.data[0])); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-center my-4 font-crimson-text", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "ふしぎなえほんやさん"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path-to-generated-image1.png", alt: "お母さんと男の子が一緒に楽しそうに絵本を読んでいる", className: "w-[100px] h-[100px] rounded-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/path-to-generated-image2.png", alt: "お父さんと女の子が一緒に楽しそうに絵本を読んでいる", className: "w-[100px] h-[100px] rounded-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "だれがでてくる？"), characters.map((character, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: `character-name-${index}`, value: character.name, onChange: (e)=>handleCharactersChange(index, 'name', e.target.value), placeholder: "なまえ", className: "border p-2 rounded mr-2", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: `character-description-${index}`, value: character.description, onChange: (e)=>handleCharactersChange(index, 'description', e.target.value), placeholder: "とくちょう", className: "border p-2 rounded mr-2", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeCharacter(index), className: "bg-red-500 text-white px-2 py-1 rounded", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "さくじょ"))), /*#__PURE__*/ React.createElement("button", { onClick: addCharacter, className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "ついか")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "どんなおはなし？"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, [ "かわいい", "たのしい", "ドキドキ" ].map((tone)=>/*#__PURE__*/ React.createElement("button", { key: tone, onClick: ()=>setStoryTone(tone), className: `px-4 py-2 rounded ${storyTone === tone ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, tone)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "どんなことがあった？"), /*#__PURE__*/ React.createElement("textarea", { name: "custom-text", value: customText, onChange: (e)=>setCustomText(e.target.value), placeholder: "おはなしのだいこうそうをかいてください", className: "w-full border p-2 rounded", rows: "4", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, "なんページ？"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, [ "5", "7", "10" ].map((pg)=>/*#__PURE__*/ React.createElement("button", { key: pg, onClick: ()=>setPages(pg), className: `px-4 py-2 rounded ${pages === pg ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, pg, " ページ")))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, "あなたはなんさい？"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, [ "3", "4", "5", "6", "7" ].map((ageOption)=>/*#__PURE__*/ React.createElement("button", { key: ageOption, onClick: ()=>setAge(ageOption), className: `px-4 py-2 rounded ${age === ageOption ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, ageOption, " さい")))), /*#__PURE__*/ React.createElement("button", { onClick: generateStory, className: "bg-green-500 w-full text-white px-4 py-2 rounded", disabled: loading, __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, loading ? "ロード中..." : "えほんをさがす"), generatedText && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, "テキスト確認"), Object.entries(generatedText).map(([page, text])=>/*#__PURE__*/ React.createElement("div", { key: page, className: "mb-2", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, "ページ ", page), /*#__PURE__*/ React.createElement("textarea", { name: `page-text-${page}`, value: text, onChange: (e)=>{ const newText = { ...generatedText, [page]: e.target.value }; setGeneratedText(newText); }, className: "w-full border p-2 rounded", rows: "4", __source: { fileName: "", lineNumber: 141, columnNumber: 15 }, __self: this })))), Boolean(generatedImages.length) && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, "プレビュー画面"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, generatedImages.map((img, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: img, alt: `ページ${index + 1}`, className: "w-full h-auto rounded-lg", __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 162, columnNumber: 17 }, __self: this }, generatedText[index + 1])))))); }