function MainComponent() { const [uploading, setUploading] = React.useState(false); const [imageUrl, setImageUrl] = React.useState(""); const [input, setInput] = React.useState(""); const [responses, setResponses] = React.useState([]); const [loading, setLoading] = React.useState(false); const handleImageUpload = async (event)=>{ setUploading(true); setTimeout(()=>{ setImageUrl(URL.createObjectURL(event.target.files[0])); setUploading(false); }, 1000); }; const sendMessage = async (e)=>{ e.preventDefault(); setLoading(true); const payload = { messages: [ { role: "user", content: input } ], system_prompt: "Senior computer class user management" }; const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }).then((res)=>res.json()); if (response.status) { setResponses((oldResponses)=>[ ...oldResponses, response.choices[0].message.content ]); } setInput(""); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#121212] text-3xl mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "シニア向けパソコン教室利用者管理"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] shadow-lg rounded-lg p-6 bg-white", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: sendMessage, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-[#121212] text-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", placeholder: "田中太郎", className: "mt-1 p-2 w-full border rounded-md", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "age", className: "block text-[#121212] text-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "年齢"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "age", name: "age", placeholder: "65", className: "mt-1 p-2 w-full border rounded-md", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-[#121212] text-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", placeholder: "example@example.com", className: "mt-1 p-2 w-full border rounded-md", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "photo", className: "block text-[#121212] text-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "利用者の写真"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "photo", name: "photo", onChange: handleImageUpload, className: "mt-1 p-2 w-full border rounded-md", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }), uploading ? /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#121212]", __source: { fileName: "", lineNumber: 57, columnNumber: 26 }, __self: this }, "アップロード中...") : "", imageUrl && /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "アップロードした利用者の写真", className: "mt-2 max-h-[200px] rounded-md", __source: { fileName: "", lineNumber: 58, columnNumber: 26 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#007ACC] text-white font-bold py-2 rounded-md hover:bg-[#005EA6]", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "メッセージを送信")), loading && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 64, columnNumber: 21 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, responses.map((response, index)=>/*#__PURE__*/ React.createElement("p", { key: index, __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, response))))); }

シニア向けパソコン教室 利用者管理

シニア向けパソコン教室 利用者管理

シニア向けパソコン教室利用者管理

シニア向けパソコン教室利用者管理