function MainComponent() { const [imageUrl, setImageUrl] = React.useState(''); const [prompt, setPrompt] = React.useState(''); const [status, setStatus] = React.useState(''); const [imageId, setImageId] = React.useState(''); const handleGenerate = async ()=>{ setStatus('生成中...'); try { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt + ' ドット絵本体だけ 32x32')}`); const data = await response.json(); setImageUrl(data.data[0]); setImageId(generateImageIdFromUrl(data.data[0])); setStatus('生成完了'); } catch (error) { setStatus('生成失敗'); } }; const generateImageIdFromUrl = (url)=>{ const parts = url.split('/'); return parts[parts.length - 1].split('.')[0]; }; const handleGenerateAttackMotion = async ()=>{ setStatus('生成中...'); try { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(`攻撃モーションドット絵 ${imageId} 32x32`)}`); const data = await response.json(); setImageUrl(data.data[0]); setStatus('生成完了'); } catch (error) { setStatus('生成失敗'); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "ドット絵を作成します"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", value: prompt, onChange: (e)=>setPrompt(e.target.value), className: "mb-4 p-2 border-2 border-gray-300", placeholder: "プロンプトを入力", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, className: "mb-6 p-2 bg-blue-500 text-white font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, "生成"), imageId && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-base font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "画像ID: ", imageId), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateAttackMotion, className: "mb-6 p-2 bg-green-500 text-white font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "攻撃モーション生成")), /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-lg font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, status), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px] border-2 border-gray-300 flex items-center justify-center", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, imageUrl ? /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated dot art", className: "max-w-full max-h-full", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }) : /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "画像がここに表示されます"))); }