function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [generatedImage, setGeneratedImage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const generateImage = async ()=>{ if (!prompt) return; setIsLoading(true); try { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await response.json(); if (data.data && data.data.length > 0) { setGeneratedImage(data.data[0]); } } catch (error) { console.error('画像生成中にエラーが発生しました:', error); } finally{ setIsLoading(false); } }; const resetForm = ()=>{ setPrompt(''); setGeneratedImage(''); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-6 font-noto-sans", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "DALL-E 3 画像生成サイト"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "prompt", className: "block text-sm font-medium text-gray-700 mb-2 font-noto-sans", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "画像の説明を入力してください"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "prompt", name: "prompt", value: prompt, onChange: (e)=>setPrompt(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 font-noto-sans", placeholder: "例: 夕日に染まる富士山", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generateImage, disabled: isLoading, className: "w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 font-noto-sans mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, isLoading ? '生成中...' : '画像を生成'), generatedImage && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "生成された画像", className: "w-full rounded-md shadow-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-between", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: generatedImage, download: "generated_image.png", className: "inline-block bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 font-noto-sans", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "画像をダウンロード"), /*#__PURE__*/ React.createElement("button", { onClick: resetForm, className: "inline-block bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 font-noto-sans", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, "最初に戻る")))))); }