function MainComponent() { const [messages, setMessages] = React.useState([ { id: 1, sender: "AI", text: "ChatGPT, どんな画像を生成しますか？", type: "text" } ]); const [inputText, setInputText] = React.useState(""); const fetchImage = async (prompt)=>{ const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await response.json(); return data.data[0]; }; const handleChange = (event)=>{ setInputText(event.target.value); }; const handleSubmit = async (event)=>{ event.preventDefault(); if (!inputText.trim()) return; const userMessage = { id: messages.length + 1, sender: "User", text: inputText, type: "text" }; setMessages((messages)=>[ ...messages, userMessage ]); const imageURL = await fetchImage(inputText); const aiResponse = { id: messages.length + 2, sender: "AI", text: imageURL, type: "image" }; setMessages((messages)=>[ ...messages, aiResponse ]); setInputText(""); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#00B900] p-5 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[400px] w-full bg-white rounded-lg shadow-2xl", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "無料画像生成AIサイト")), /*#__PURE__*/ React.createElement("ul", { className: "divide-y divide-gray-200 overflow-y-auto", style: { maxHeight: "500px" }, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("li", { key: message.id, className: "p-4 flex", style: { animation: "slideIn 0.5s ease-out" }, __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mr-4", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold ${message.sender === "AI" ? "bg-green-500" : "bg-blue-500"}`, __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, message.sender === "AI" ? "AI" : "あなた")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, message.type === "text" ? /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, message.text) : /*#__PURE__*/ React.createElement("img", { src: message.text, alt: "AIが生成した画像", className: "max-w-xs rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "メッセージを入力", value: inputText, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded-lg", name: "messageInput", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } `)); }