function MainComponent() { const [userInput, setUserInput] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [imageURL, setImageURL] = React.useState(''); const handleInputChange = (event)=>{ setUserInput(event.target.value); }; const fetchChatGPTResponse = async (input)=>{ const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": input } ], system_prompt: 'Translate the following to English:' }) }); const data = await response.json(); return data.choices[0].message.content; }; const fetchStableDiffusionImage = async (prompt)=>{ const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await response.json(); return data.data[0]; }; const handleSubmit = async (event)=>{ event.preventDefault(); if (!userInput.trim()) { alert("Please enter input."); return; } setIsLoading(true); setImageURL(''); try { const translatedText = await fetchChatGPTResponse(userInput); const imageURL = await fetchStableDiffusionImage(translatedText); setImageURL(imageURL); } catch (error) { console.error("Error:", error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#00b900] p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center font-roboto text-2xl mb-6 text-white", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "AIモデル生成比較サイト"), /*#__PURE__*/ React.createElement("form", { className: "space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 bg-white", rows: "5", name: "userInput", placeholder: "Enter your input here...", value: userInput, onChange: handleInputChange, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-green-500 text-white rounded-lg hover:bg-green-600 focus:outline-none focus:ring-4 focus:ring-green-200", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "生成開始")), isLoading && /*#__PURE__*/ React.createElement("p", { className: "text-center mt-4 font-roboto text-white animate-pulse", __source: { fileName: "", lineNumber: 64, columnNumber: 23 }, __self: this }, "Loading..."), !isLoading && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, imageURL ? /*#__PURE__*/ React.createElement("img", { src: imageURL, alt: `Generated image based on translated content`, className: "max-w-full mx-auto h-auto", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-white", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "No image to display")))); }