function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [imageUrl, setImageUrl] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const inputStyle = "border border-gray-300 rounded-md w-full p-2 text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"; const buttonStyle = "mt-4 py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75"; const handlePromptChange = (e)=>{ setPrompt(e.target.value); }; const generateImage = async ()=>{ setIsLoading(true); try { const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: prompt } ], system_prompt: 'Explain this content' }) }); const chatData = await chatResponse.json(); const generatedPrompt = chatData.choices[0].message.content; const imageResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(generatedPrompt)}`, { method: 'GET' }); const imageData = await imageResponse.json(); setImageUrl(imageData.data[0]); } catch (error) { console.error('Failed to generate image:', error); setImageUrl(''); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center font-roboto text-2xl text-gray-800", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "無料画像生成サイト"), /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-sm text-gray-600 my-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "ChatGPTと相談してプロンプトを作ってみよう"), /*#__PURE__*/ React.createElement("textarea", { className: `${inputStyle} h-40`, placeholder: "プロンプトを入力してください...", value: prompt, onChange: handlePromptChange, __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: buttonStyle, onClick: generateImage, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, isLoading ? '読み込み中...' : 'プロンプトを送信'), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-gray-800 mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "生成された画像:"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "生成された画像", className: "max-w-xs", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }))))); }