function GenerateImageButton({ label }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function GenerateImageButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GenerateImageButton, { label: "イメージを生成", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [inputPrompts, setInputPrompts] = React.useState([]); const [inputPrompt, setInputPrompt] = React.useState(''); const [imageUrl, setImageUrl] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleSubmit = async (event)=>{ event.preventDefault(); setLoading(true); const combinedPrompt = [ ...inputPrompts, inputPrompt ].join(', '); try { const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(combinedPrompt)}`, { method: 'GET' }); const data = await response.json(); setImageUrl(data.data[0]); setInputPrompts([ ...inputPrompts, inputPrompt ]); } catch (error) { setInputPrompt(''); } setInputPrompt(''); setLoading(false); }; const handleInputChange = (event)=>{ setInputPrompt(event.target.value); }; const handleReset = ()=>{ setInputPrompts([]); setInputPrompt(''); setImageUrl(''); }; const regenerateImage = async ()=>{ setLoading(true); const combinedPrompt = inputPrompts.join(', '); try { const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(combinedPrompt)}`, { method: 'GET' }); const data = await response.json(); setImageUrl(data.data[0]); } catch (error) { setInputPrompt(''); } setLoading(false); }; const handleDeletePrompt = (index)=>{ setInputPrompts(inputPrompts.filter((_, i)=>i !== index)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#333] mb-8", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "画像生成AIサイト"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mb-6", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", value: inputPrompt, onChange: handleInputChange, className: "bg-white border border-[#ccc] text-[#333] text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "キーワードを追加", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement(GenerateImageButton, { label: "イメージを生成", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }), imageUrl && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: regenerateImage, type: "button", className: "ml-4 text-white bg-green-500 hover:bg-green-700 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "再生成"), /*#__PURE__*/ React.createElement("button", { onClick: handleReset, type: "button", className: "ml-4 text-white bg-red-500 hover:bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "リセット"))), /*#__PURE__*/ React.createElement("ul", { className: "list-disc ml-5 my-4", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, inputPrompts.map((prompt, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-[#333] flex justify-between items-center", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, prompt, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeletePrompt(index), className: "text-red-500 text-sm px-2 py-1", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "削除"))))), imageUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: `Generated based on: ${inputPrompts.join(', ')}`, className: "max-w-full h-auto rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this })), loading && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this }, "Loading...")); }