function JapaneseFeedbackInput({ name, value, onChange, placeholder }) { return /*#__PURE__*/ React.createElement("textarea", { name: name, value: value, onChange: onChange, className: "border p-2 w-full h-[100px] font-roboto", placeholder: placeholder, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function JapaneseFeedbackInputStory() { const [feedback, setFeedback] = React.useState(""); const handleFeedbackChange = (event)=>{ setFeedback(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(JapaneseFeedbackInput, { name: "feedback", value: feedback, onChange: handleFeedbackChange, placeholder: "あなたの好みについて教えてください...", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [feedback, setFeedback] = React.useState(""); const [images, setImages] = React.useState([]); const [learning, setLearning] = React.useState(false); const handleFeedbackChange = (e)=>{ setFeedback(e.target.value); }; const generateImages = async ()=>{ try { const response = await fetch("https://api.example.com/generate", { method: "GET" }); const data = await response.json(); setImages(data.images); } catch (error) { console.error("Error fetching images:", error); } }; const learnAndGenerate = async (feedbackText)=>{ setLearning(true); try { const response = await fetch("https://api.example.com/learn", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ feedback: feedbackText }) }); const data = await response.json(); setImages(data.images); } catch (error) { console.error("Error learning and generating images:", error); } setLearning(false); }; const handleFeedbackSubmit = async (e)=>{ e.preventDefault(); await learnAndGenerate(feedback); }; React.useEffect(()=>{ generateImages(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F0F2F5] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleFeedbackSubmit, className: "bg-white p-6 rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "画像生成アプリ"), /*#__PURE__*/ React.createElement(JapaneseFeedbackInput, { name: "feedback", value: feedback, onChange: handleFeedbackChange, placeholder: "フィードバックを入力...", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 bg-blue-500 text-white font-roboto py-2 px-4 rounded hover:bg-blue-700 transition duration-300", disabled: learning, __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, learning ? "学習中..." : "フィードバックを元に生成")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `学習により生成された画像 ${index + 1}`, className: "w-[300px] h-[300px] object-cover m-2", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this })))); }