function MainComponent({ uploadedImage }) { const [image, setImage] = React.useState(uploadedImage || null); const [result, setResult] = React.useState(null); const handleImageUpload = (e)=>{ const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = ()=>{ setImage(reader.result); }; reader.readAsDataURL(file); } }; const handleCompare = async ()=>{ try { const ocrResult = await fetch('/api/ocr', { method: 'POST', body: image }).then((res)=>res.json()); const compareResult = await fetch('/api/compare', { method: 'POST', body: JSON.stringify({ text: ocrResult.text }) }).then((res)=>res.json()); setResult(compareResult.match); } catch (error) { console.error('Error:', error); } }; const resultText = result === null ? '' : result ? '一致します' : '一致しません'; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 space-y-4", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "画像の文字読み取り＆照合"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "imageUpload", className: "p-2 border border-gray-300 rounded", onChange: handleImageUpload, __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }), image && /*#__PURE__*/ React.createElement("img", { src: image, alt: "アップロードされた画像", className: "w-[300px] h-[300px] object-contain", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "mt-4 p-2 bg-blue-500 text-white rounded font-roboto", onClick: handleCompare, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "照合開始"), result !== null && /*#__PURE__*/ React.createElement("div", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, resultText)); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 items-center", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { uploadedImage: "path/to/your/image.jpg", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this })); }