function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(""); const [loadingPrompt, setLoadingPrompt] = React.useState(false); const [loadingImage, setLoadingImage] = React.useState(false); const [style, setStyle] = React.useState("写真"); const translateToEnglish = async (text)=>{ const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: text } ] }) }); const data = await response.json(); return data.choices[0].message.content; }; const generateImage = async (text)=>{ const stylePrompt = style === "写真" ? "realistic photograph" : "anime style image"; const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(`${text}, ${stylePrompt}`)}&width=1024&height=1024`, { method: "GET" }); const data = await response.json(); return data.data[0]; }; const handleSubmit = async ()=>{ if (input.trim()) { setLoadingPrompt(true); const translatedText = await translateToEnglish(input); setLoadingPrompt(false); setLoadingImage(true); const imageUrl = await generateImage(translatedText); setLoadingImage(false); setMessages([ ...messages, { text: input, sender: "self" }, { text: imageUrl, sender: "bot", image: true } ]); setInput(""); } }; const loadingContent = loadingPrompt ? "プロンプトを生成中..." : "画像作成中..."; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-black font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between bg-[#00c300] p-2", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-lg font-bold", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "完全無料の画像生成AIサイト"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera text-white", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-video text-white", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone text-white", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-col w-full space-y-4 p-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>{ if (msg.image) { return /*#__PURE__*/ React.createElement("li", { key: index, className: "self-center p-2 bg-white rounded-xl max-w-[70%] border", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: msg.text, alt: `Generated image ${index}`, className: "w-full h-auto rounded-xl", __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this })); } else if (msg.sender === "self") { return /*#__PURE__*/ React.createElement("li", { key: index, className: "self-end bg-[#00c300] text-white p-2 rounded-xl max-w-[70%]", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, msg.text); } }))), /*#__PURE__*/ React.createElement("footer", { className: "flex items-center p-2 bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "message", type: "text", className: "flex-1 border p-2 rounded-full", placeholder: "Type a message...", value: input, onChange: (e)=>setInput(e.target.value), __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-2 bg-[#00c300] text-white p-2 rounded-full", onClick: handleSubmit, __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center p-4 bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `p-2 rounded-full ${style === "写真" ? "bg-[#00c300] text-white" : "bg-white text-[#00c300]"}`, onClick: ()=>setStyle("写真"), __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "写真"), /*#__PURE__*/ React.createElement("button", { className: `p-2 rounded-full ml-2 ${style === "アニメ風画像" ? "bg-[#00c300] text-white" : "bg-white text-[#00c300]"}`, onClick: ()=>setStyle("アニメ風画像"), __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "アニメ風画像")), (loadingPrompt || loadingImage) && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center text-white", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-bounce", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, loadingContent)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, ` .animate-bounce { animation: bounce 2s infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-25%); } } `)); }