function MainComponent() { const [image, setImage] = React.useState(''); const [croppedImage, setCroppedImage] = React.useState(''); const [extractedText, setExtractedText] = React.useState(''); const [isScanning, setIsScanning] = React.useState(false); const [isSummaryLoading, setIsSummaryLoading] = React.useState(false); const [summary, setSummary] = React.useState(''); const handleImageChange = async (e)=>{ const file = e.target.files[0]; const reader = new FileReader(); reader.onloadend = ()=>{ setImage(reader.result); setSummary(''); setExtractedText(''); }; if (file) { reader.readAsDataURL(file); } }; const scanDocument = async ()=>{ setIsScanning(true); const imageData = croppedImage ? croppedImage.split(',')[1] : image.split(',')[1]; const data = new FormData(); data.append('image', imageData); const response = await fetch('/integrations/scan-document/', { method: 'POST', body: data }); const result = await response.json(); if (response.ok) { setExtractedText(result.extractedDocument); setIsScanning(false); generateSummary(result.extractedDocument); } else { console.error('Error scanning document'); setIsScanning(false); } }; const generateSummary = async ()=>{ setIsSummaryLoading(true); const messages = [ { role: "user", content: extractedText } ]; const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages, system_prompt: 'Create a headline for this text' }) }); const result = await response.json(); if (response.ok) { setSummary(result.choices[0].message.content); setIsSummaryLoading(false); } else { console.error('Error generating summary'); setIsSummaryLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-8 text-[#121212]", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, "読書メモアプリ"), image ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "Uploaded book page", className: "w-[300px] h-auto mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "border-4 border-dashed border-[#007bff] w-[300px] h-[300px] mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, croppedImage && /*#__PURE__*/ React.createElement("img", { src: croppedImage, alt: "Cropped section of the book page", __source: { fileName: "", lineNumber: 77, columnNumber: 32 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: scanDocument, className: "font-roboto bg-[#007bff] text-white py-2 px-4 rounded hover:bg-[#0056b3] mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, isScanning ? 'トリミングしてスキャン中...' : 'トリミングする'))) : /*#__PURE__*/ React.createElement("button", { className: "font-roboto bg-[#007bff] text-white py-2 px-4 rounded hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "書籍の画像をアップロード", /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleImageChange, className: "hidden", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }))), summary && /*#__PURE__*/ React.createElement("div", { className: "text-md font-roboto mb-4 font-semibold bg-[#f0f2f5] p-2 rounded", __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, summary), extractedText && /*#__PURE__*/ React.createElement("img", { src: extractedText, alt: "OCR extracted text from the book page", className: "w-[300px] h-auto mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this })); }