function Component({ onClick, children }) { return /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full py-2 px-4 bg-blue-500 text-white font-bold rounded-md hover:bg-blue-300 transition duration-300", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function ComponentStory() { const generateImage = ()=>{ console.log("アイキャッチ画像を作る action executed"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { onClick: generateImage, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "アイキャッチ画像を作る")); } function MainComponent() { const [loading, setLoading] = React.useState(false); const [imageSrc, setImageSrc] = React.useState(''); const [prompt, setPrompt] = React.useState(''); const generateImage = async ()=>{ setLoading(true); const title = document.getElementById("title").value; const responseGpt = await fetch('/api/chatgpt', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title }) }); const { prompt } = await responseGpt.json(); setPrompt(prompt); const responseStableDiffusion = await fetch('/api/stable-diffusion', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt }) }); const { imageUrl } = await responseStableDiffusion.json(); setImageSrc(imageUrl); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-blue-900 flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white font-roboto mb-8", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "ブログのアイキャッチ画像を作成"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md bg-blue-700 p-8 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white text-lg font-bold mb-2", htmlFor: "title", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "記事のタイトル"), /*#__PURE__*/ React.createElement("input", { name: "title", id: "title", type: "text", className: "w-full p-2 border-2 border-blue-500 rounded-md focus:outline-none focus:border-blue-300", placeholder: "タイトルを入力", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement(Component, { onClick: generateImage, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "アイキャッチ画像を作る")), loading && /*#__PURE__*/ React.createElement("div", { className: "loading-animation text-white text-2xl font-roboto mt-8", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "生成中です。"), !loading && imageSrc && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("img", { src: imageSrc, alt: "生成されたアイキャッチ画像", className: "mt-8 w-full rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 mt-4 rounded-lg shadow-lg w-full max-w-md", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Stable Diffusion 用のプロンプト:"), /*#__PURE__*/ React.createElement("p", { className: "text-blue-900 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, prompt))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-animation { display: flex; align-items: center; } .loading-animation::before { content: ''; width: 24px; height: 24px; margin-right: 8px; border: 4px solid #ffffff; border-top-color: #3498db; border-radius: 50%; animation: spin 1s linear infinite; } `)); }