function MainComponent() { const [chatHistory, setChatHistory] = React.useState([]); const [message, setMessage] = React.useState(""); const [status, setStatus] = React.useState(""); const handleMessageChange = (e)=>{ setMessage(e.target.value); }; const handleSubmit = async (e)=>{ e.preventDefault(); const userInput = { type: "user", text: message }; setStatus("プロンプト作成中"); setChatHistory([ ...chatHistory, userInput ]); const chatGPTResponse = await simulateChatGPTResponse(message); const chatGPTMessage = { type: "chatgpt", text: chatGPTResponse }; setStatus("画像作成中"); setChatHistory((currentHistory)=>[ ...currentHistory, chatGPTMessage ]); const imageData = await simulateStableDiffusionImageGeneration(chatGPTResponse); const imageMessage = { type: "image", src: imageData }; setStatus(""); setChatHistory((currentHistory)=>[ ...currentHistory, imageMessage ]); setMessage(""); }; const simulateChatGPTResponse = async (userInput)=>{ await new Promise((resolve)=>setTimeout(resolve, 2000)); // Simulate network delay return `Based on "${userInput}", a captivating image could include...`; }; const simulateStableDiffusionImageGeneration = async (prompt)=>{ await new Promise((resolve)=>setTimeout(resolve, 3000)); // Simulate image generation delay return "generated-image.jpg"; // Placeholder for generated image path }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f8f9fa]", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto text-[#4285F4]", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "完全無料の画像生成AIサイト")), /*#__PURE__*/ React.createElement("div", { className: "w-full px-4 max-w-md", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-[#333]", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "ChatGPTと相談")), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] mb-4 overflow-auto bg-white border-2 border-gray-300 rounded-lg px-4 py-2", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, chatHistory.map((chat, index)=>chat.type === "image" ? /*#__PURE__*/ React.createElement("img", { key: index, src: chat.src, alt: "生成された画像", className: "mx-auto my-2 w-[90%] h-auto rounded-lg", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { key: index, className: `my-2 ${chat.type === "user" ? "text-right" : "text-left"}`, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-gray-200 rounded px-4 py-2 inline-block", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, chat.text))), status && /*#__PURE__*/ React.createElement("div", { className: "text-center my-2", __source: { fileName: "", lineNumber: 55, columnNumber: 22 }, __self: this }, status)), /*#__PURE__*/ React.createElement("form", { method: "post", className: "flex w-full", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-grow h-12 px-4 border-2 border-gray-300 rounded-l-full focus:border-blue-500 focus:outline-none", placeholder: "プロンプトを入力...", value: message, onChange: handleMessageChange, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-20 h-12 bg-[#4285F4] text-white rounded-r-full font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "送信")))); }