function MainComponent() { const [question, setQuestion] = React.useState(''); const [vertex, setVertex] = React.useState({ p: '', q: '' }); const [feedback, setFeedback] = React.useState(''); const [explanation, setExplanation] = React.useState(''); const [loading, setLoading] = React.useState(false); const generateQuestion = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: '２次関数の頂点を求める問題を1問のみ生成してください。その際、頂点は整数になるように出力してください。返事は入りません。問題のみの出力' } ] }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); setQuestion(data.choices[0].message.content); setFeedback(''); setExplanation(''); setVertex({ p: '', q: '' }); } catch (error) { console.error('Error generating question:', error); } finally{ setLoading(false); } }; const handleSubmit = async (e)=>{ e.preventDefault(); const { p, q } = vertex; setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: `the vertex of the equation is (${p},${q})` } ] }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); setFeedback(data.choices[0].message.content.includes('Correct') ? '正解' : '不正解'); setExplanation(data.choices[0].message.content); } catch (error) { console.error('Error submitting answer:', error); } finally{ setLoading(false); } }; React.useEffect(()=>{ generateQuestion(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-6 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "mb-4 text-2xl text-center font-bold", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "インタラクティブ学習アプリ", /*#__PURE__*/ React.createElement("div", { className: "text-lg font-normal", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "平方完成の問題を解いてみましょう")), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-4 text-xl", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, loading ? '問題を生成中...' : question), /*#__PURE__*/ React.createElement("section", { className: "mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "頂点 (p, q):", /*#__PURE__*/ React.createElement("input", { type: "number", name: "p", value: vertex.p, onChange: (e)=>setVertex({ ...vertex, p: e.target.value }), className: "border p-2 m-2", required: true, __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "q", value: vertex.q, onChange: (e)=>setVertex({ ...vertex, q: e.target.value }), className: "border p-2 m-2", required: true, __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "提出"))), /*#__PURE__*/ React.createElement("section", { className: "mb-4 text-xl", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, feedback && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 97, columnNumber: 26 }, __self: this }, feedback)), /*#__PURE__*/ React.createElement("section", { className: "mb-4 text-md", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, explanation)), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-green-500 text-white rounded", onClick: generateQuestion, __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "次の問題"))))); }