function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [numberOfImages, setNumberOfImages] = React.useState(1); const [images, setImages] = React.useState([]); const [chatGPTResponses, setChatGPTResponses] = React.useState([]); const [geminiResponses, setGeminiResponses] = React.useState([]); const handleResponse = async ()=>{ const stableDiffusionAPI = "https://api.stablediffusion.fake/v1/generate"; const chatGPTAPI = "https://api.chatgpt.fake/v1/generate"; const geminiAPI = "https://api.google.gemini.fake/v1/generate"; let requestData = { prompt: prompt, num_images: numberOfImages }; const stableDiffusion = fetch(stableDiffusionAPI, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestData) }).then((response)=>response.json()); const chatGPT = fetch(chatGPTAPI, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: prompt }) }).then((response)=>response.json()); const gemini = fetch(geminiAPI, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: prompt }) }).then((response)=>response.json()); Promise.all([ stableDiffusion, chatGPT, gemini ]).then((values)=>{ setImages(values[0].images); setChatGPTResponses(values[1].responses); setGeminiResponses(values[2].responses); }); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#f0f2f5] overflow-auto flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-white bg-[#1DA1F2] p-4 font-roboto mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Stable Diffusion, ChatGPT, Google Gemini の簡易版")), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "mb-2 p-2 border rounded w-full max-w-[400px]", name: "prompt", placeholder: "プロンプトを入力", value: prompt, onChange: (e)=>setPrompt(e.target.value), __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "mb-2 p-2 border rounded w-full max-w-[400px]", type: "number", min: "1", max: "5", name: "numberOfImages", placeholder: "生成する画像の数", value: numberOfImages, onChange: (e)=>setNumberOfImages(parseInt(e.target.value, 10)), __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "mb-4 p-2 bg-[#1DA1F2] text-white font-roboto rounded", onClick: handleResponse, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "全て生成"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `Stable Diffusion generated from prompt: ${prompt}`, className: "w-[200px] h-[100px]", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, chatGPTResponses.map((response, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, `ChatGPT: ${response}`)), geminiResponses.map((response, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, `Google Gemini: ${response}`)))); }