function MainComponent() { const [selectedDate, setSelectedDate] = React.useState(""); const [weather, setWeather] = React.useState(""); const [diaryEntry, setDiaryEntry] = React.useState(""); const [imageUrl, setImageUrl] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleGenerateDiary = async ()=>{ if (!selectedDate || !weather.trim()) return; setLoading(true); const messages = [ { role: "user", content: [ { type: "text", text: `日付: ${selectedDate}` }, { type: "text", text: `天気: ${weather}` }, { type: "text", text: "小学１年生が過ごした様子を小学生が書いたように、１００文字程度の文章を作成してください。" } ] } ]; const visionResponse = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }) }).then((res)=>res.json()); const diaryContent = visionResponse.choices[0].message.content; setDiaryEntry(diaryContent); const imageResponse = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(diaryContent + " crayon drawing")}`, { method: 'GET' }).then((res)=>res.json()); setImageUrl(imageResponse.data[0]); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#f0f0f0] font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[400px] bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b-2 border-[#ccc] bg-[#0078d7] text-white flex justify-between items-center", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "自動夏休み絵日記生成ツール")), /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", value: selectedDate, onChange: (e)=>setSelectedDate(e.target.value), className: "w-full border-2 border-[#ccc] rounded-lg p-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "weather", placeholder: "天気を入力...", value: weather, onChange: (e)=>setWeather(e.target.value), className: "w-full border-2 border-[#ccc] rounded-lg p-2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateDiary, className: "w-full bg-[#0078d7] text-white rounded-lg p-2", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Generate Diary"), loading && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 23 }, __self: this }, "Loading..."), diaryEntry && /*#__PURE__*/ React.createElement("div", { className: "p-2 rounded-lg w-full bg-[#e0e0e0]", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, selectedDate, " - ", weather), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, diaryEntry)), imageUrl && /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated Diary Illustration of a Crayon Drawing", className: "w-full", __source: { fileName: "", lineNumber: 75, columnNumber: 24 }, __self: this })))); }