function MainComponent() { const [inputText, setInputText] = React.useState(''); const [loading, setLoading] = React.useState(false); const [cards, setCards] = React.useState([]); const translateText = async (text)=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: text } ], system_prompt: 'このコンテンツを日本語に翻訳してください。' }) }); const data = await response.json(); setLoading(false); if (response.ok && data.choices.length > 0) { return data.choices[0].message.content; } else { throw new Error('Failed to translate story.'); } }; const generateImage = async (text)=>{ const modifiedText = `新海誠風 ${text}`; const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(modifiedText)}`, { method: 'GET' }); const data = await response.json(); if (response.ok && data.data.length > 0) { return data.data[0]; } else { return ''; } }; const generateStory = async (imageUrl)=>{ const base64ImageUrl = imageUrl.replace('data:image/png;base64,', ''); const response = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: [ { type: 'text', text: 'Describe a story based on this image.' }, { type: 'image_url', image_url: { url: base64ImageUrl } } ] } ] }) }); const data = await response.json(); if (response.ok && data.choices.length > 0) { const translatedStory = await translateText(data.choices[0].message.content); return translatedStory; } else { return 'Failed to generate story.'; } }; const handleSubmit = async (e)=>{ e.preventDefault(); if (inputText.trim() !== '') { setLoading(true); try { const imageUrl = await generateImage(inputText); if (imageUrl) { const storyText = await generateStory(imageUrl); setCards((prevCards)=>[ ...prevCards, { imageUrl, storyText } ]); } } catch { // Handle error } setLoading(false); } setInputText(''); }; const handleChange = (e)=>{ setInputText(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F0F0]", __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white p-6 rounded-lg border border-gray-200 shadow-md", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-center mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "Create Picture Book Story"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Input Text"), /*#__PURE__*/ React.createElement("input", { name: "message", type: "text", placeholder: "Type text here...", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500", value: inputText, onChange: handleChange, __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: `px-4 py-2 ${loading ? 'bg-gray-500' : 'bg-[#00B900]'} text-white rounded-md`, disabled: loading, __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, loading ? 'Generating...' : 'Generate')))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white p-6 rounded-lg border border-gray-200 shadow-md mt-4", __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, cards.map(({ imageUrl, storyText }, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mt-4", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, imageUrl && /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: `Generated picture book image ${index + 1}`, className: "max-w-xs mx-auto rounded-md", __source: { fileName: "", lineNumber: 129, columnNumber: 26 }, __self: this }), storyText && /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-center text-sm font-roboto", __source: { fileName: "", lineNumber: 130, columnNumber: 27 }, __self: this }, storyText))))); }