function ImageGenerationButton({ isLoading }) { const buttonText = isLoading ? '生成中...' : '画像を生成'; return /*#__PURE__*/ React.createElement("button", { type: "submit", className: `mt-4 px-4 py-2 text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`, disabled: isLoading, __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, buttonText); } function ImageGenerationButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageGenerationButton, { isLoading: false, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ImageGenerationButton, { isLoading: true, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [generatedImage, setGeneratedImage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = (e)=>{ e.preventDefault(); setIsLoading(true); setTimeout(()=>{ setGeneratedImage('/generated-image.jpg'); setIsLoading(false); }, 2000); }; 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: 16, 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: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:flex", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "uppercase tracking-wide text-sm text-indigo-500 font-semibold", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "DALL-E 3 画像生成"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mt-6", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", value: prompt, onChange: (e)=>setPrompt(e.target.value), className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", placeholder: "画像の説明を入力してください", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(ImageGenerationButton, { isLoading: isLoading, __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this })), generatedImage && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "DALL-E 3で生成された画像", className: "w-full h-auto rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this })))))); }