function MainComponent() { const [uploadedFile, setUploadedFile] = React.useState(null); const [categories, setCategories] = React.useState(''); const [ocrResults, setOcrResults] = React.useState(''); const [isProcessing, setIsProcessing] = React.useState(false); const handleFileChange = (event)=>{ setUploadedFile(event.target.files[0]); }; const handleCategoriesChange = (event)=>{ setCategories(event.target.value); }; const performOCR = async ()=>{ if (!uploadedFile) return; setIsProcessing(true); const formData = new FormData(); formData.append('file', uploadedFile); try { const response = await fetch('OCR_API_ENDPOINT', { method: 'POST', body: formData }); const data = await response.json(); setOcrResults(data.text); } catch (error) { console.error('OCR Error:', error); setOcrResults('OCR 失敗'); } setIsProcessing(false); }; const outputToSpreadsheet = async ()=>{ try { await fetch('SPREADSHEET_API_ENDPOINT', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: ocrResults, categories: categories.split(',') }) }); alert('スプレットシートに出力しました。'); } catch (error) { console.error('Spreadsheet Output Error:', error); alert('スプレットシート出力エラー'); } }; const recheckAndAppendToSpreadsheet = async ()=>{ await performOCR(); await outputToSpreadsheet(); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center p-8 space-y-4", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#121212]", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "領収書OCR処理システム"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px]", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "upload", className: "block mb-2 text-lg font-medium text-[#121212]", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "PDFアップロード"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "upload", name: "upload", accept: "application/pdf", className: "w-full text-sm text-grey-900 border border-gray-300 rounded-lg p-2.5", onChange: handleFileChange, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white shadow-md rounded-lg p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "設定"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "categories", className: "block mb-2 text-lg font-medium text-[#121212]", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "分類カテゴリ"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "categories", name: "categories", placeholder: "例：日付、金額、店名", className: "w-full text-sm text-grey-900 border border-gray-300 rounded-lg p-2.5", value: categories, onChange: handleCategoriesChange, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] flex justify-between mt-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", type: "button", onClick: performOCR, disabled: isProcessing, __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "OCR実行"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", type: "button", onClick: outputToSpreadsheet, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "スプレットシート出力")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] mt-8", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "OCR結果プレビュー"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-[300px] p-4 text-sm text-grey-900 border border-gray-300 rounded-lg", value: ocrResults, readOnly: true, __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] flex justify-end mt-4", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded", type: "button", onClick: recheckAndAppendToSpreadsheet, __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "再チェック・追記"))); }