function MainComponent() { const [inputText, setInputText] = React.useState(''); const [correctedText, setCorrectedText] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const handleInputChange = (e)=>{ setInputText(e.target.value); }; const handleSubmit = async ()=>{ setIsLoading(true); try { const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `以下の文章を校正し、表形式でまとめてください。表には校正前の文章と校正後の文章と校正の理由を提示してください。校正前の文章は、必ず１文ごとにしてください。校正の際は、以下の点に注意してください： 1. 誤字脱字の修正 2. 文法の確認と修正 3. 句読点の適切な使用 4. 文章構造の改善（長文の分割など） 5. 表現の統一と簡潔化文章：${inputText}` } ] }) }); const data = await response.json(); const result = data.choices[0].message.content; const tableRows = result.split('\n').filter((row)=>row.trim().startsWith('|') && !row.includes('校正前の文章')); const parsedRows = tableRows.map((row)=>{ const [, before, after, reason] = row.split('|').map((cell)=>cell.trim()); return { before, after, reason }; }); setCorrectedText(parsedRows); } catch (error) { console.error('Error:', error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-sans", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, "文章校正ツール"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-32 p-2 border border-gray-300 rounded", placeholder: "校正したい文章を入力してください", name: "inputText", value: inputText, onChange: handleInputChange, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded", onClick: handleSubmit, disabled: isLoading, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, isLoading ? '校正中...' : '校正する'), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "校正結果"), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse border border-gray-300", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "校正前の文章"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "校正後文章"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "校正の理由"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, correctedText.map((row, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, row.before), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, row.after), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, row.reason))))))); }