function MainComponent() { const [prompt, setPrompt] = React.useState('クロノグラフ, タキメーター, プラチナケース, 黒色の文字盤, 支払いはキャッシュまたは電子決済の選択式, 日本語表示, 時計'); const [paymentMethod, setPaymentMethod] = React.useState('cash'); const [generatedImage, setGeneratedImage] = React.useState(''); const [loading, setLoading] = React.useState(false); const fetchGeneratedImage = async ()=>{ setLoading(true); const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}&width=1024&height=1024`, { method: 'GET' }); const data = await response.json(); if (data && data.data.length) { setGeneratedImage(data.data[0]); } setLoading(false); }; React.useEffect(()=>{ fetchGeneratedImage(); }, []); const handlePaymentMethodChange = (event)=>{ setPaymentMethod(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#010101] min-h-screen flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center max-w-lg mx-auto", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-semibold text-white text-4xl mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "高級クロノグラフ時計"), /*#__PURE__*/ React.createElement("p", { className: "font-light text-gray-400 text-xl mb-8", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "究極の精度と美しさ、プラチナ製の洗練されたデザイン"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4 mb-12", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "paymentMethod", value: "cash", checked: paymentMethod === 'cash', onChange: handlePaymentMethodChange, className: "text-black mr-2", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }), "キャッシュ"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "paymentMethod", value: "electronic", checked: paymentMethod === 'electronic', onChange: handlePaymentMethodChange, className: "text-black mr-2", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }), "電子決済")), loading ? /*#__PURE__*/ React.createElement("div", { className: "mt-12 text-white", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "生成中...") : /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "プラチナ製のクロノグラフとタキメーター付きの黒色文字盤時計の画像", className: "w-[300px] h-[300px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }))); }