function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [data, setData] = React.useState({ meaning: '', phonetic: '', example: '', origin: '', knowledge: '' }); const [images, setImages] = React.useState([]); const fetchData = async ()=>{ const googleSearchResponse = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(prompt)}`, { method: 'GET' }); const googleData = await googleSearchResponse.json(); const stableDiffusionResponses = await Promise.all(Array.from({ length: 4 }).fill(null).map(()=>fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}&width=512&height=512`, { method: 'GET' }))); const imagesData = await Promise.all(stableDiffusionResponses.map((response)=>response.json())); setData({ meaning: googleData.items[0]?.snippet || '', phonetic: googleData.items[1]?.snippet || '', example: googleData.items[2]?.snippet || '', origin: googleData.items[3]?.snippet || '', knowledge: googleData.items[4]?.snippet || '' }); setImages(imagesData.flatMap((d)=>d.data)); }; React.useEffect(()=>{ if (prompt) { fetchData(); } }, [ prompt ]); const handleSubmit = (e)=>{ e.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, "単語解説アプリ"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", placeholder: "単語を入力", className: "w-full p-2 border rounded", onChange: (e)=>setPrompt(e.target.value), __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "font-sans text-sm space-y-2", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 58, columnNumber: 14 }, __self: this }, "意味: "), data.meaning), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 59, columnNumber: 14 }, __self: this }, "発音記号: "), data.phonetic), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 60, columnNumber: 14 }, __self: this }, "例文: "), data.example), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 61, columnNumber: 14 }, __self: this }, "由来: "), data.origin), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 62, columnNumber: 14 }, __self: this }, "豆知識: "), data.knowledge)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `Generated image ${index + 1} for ${prompt}`, className: "w-full object-cover h-[250px]", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }))))); }