function UploadAndScanButton({ onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Upload and Scan"); } function UploadAndScanButtonStory() { const handleUploadAndScan = ()=>{ // Logic to trigger file upload and start the OCR process console.log("Upload and Scan triggered"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UploadAndScanButton, { onClick: handleUploadAndScan, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function MainComponent() { const [file, setFile] = React.useState(null); const [extractedData, setExtractedData] = React.useState({ date: '', companyName: '', name: '', position: '', contactPerson: '', email: '', phone: '', address: '', notes: '' }); const handleFileChange = (e)=>{ setFile(e.target.files[0]); }; const handleUploadAndScan = async ()=>{ if (!file) return; const formData = new FormData(); formData.append('file', file); try { const uploadResponse = await fetch('API_ENDPOINT_FOR_IMAGE_OR_PDF_UPLOAD', { method: 'POST', body: formData }); const filePath = await uploadResponse.json(); const extractionResponse = await fetch('API_ENDPOINT_FOR_TEXT_EXTRACTION_USING_CHATGPT', { method: 'POST', body: JSON.stringify({ filePath: filePath.file }), headers: { 'Content-Type': 'application/json' } }); const extractionData = await extractionResponse.json(); setExtractedData({ date: extractionData.date || '', companyName: extractionData.companyName || '', name: extractionData.name || '', position: extractionData.position || '', contactPerson: extractionData.contactPerson || '', email: extractionData.email || '', phone: extractionData.phone || '', address: extractionData.address || '', notes: extractionData.notes || '' }); } catch (error) { console.error("Error during the extraction process: ", error); } }; const handleFormSubmit = async (e)=>{ e.preventDefault(); try { await fetch('API_ENDPOINT_FOR_SAVING_TO_SPREADSHEET', { method: 'POST', body: JSON.stringify(extractedData), headers: { 'Content-Type': 'application/json' } }); alert('Data saved successfully!'); } catch (error) { console.error("Error saving data: ", error); } }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-screen-md mx-auto", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, "Business Card Scanner with ChatGPT"), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, "Take a picture of a business card or upload a PDF and the details will be saved automatically using ChatGPT's API."), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "upload", className: "mb-2 font-semibold", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Upload a picture or a PDF of a business card:"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "upload", name: "business-card", accept: "image/*, .pdf", className: "mb-4", onChange: handleFileChange, __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(UploadAndScanButton, { onClick: handleUploadAndScan, __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, "Extracted Information:"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Date:"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", className: "w-full p-2 border rounded", value: extractedData.date, onChange: (e)=>setExtractedData((prev)=>({ ...prev, date: e.target.value })), __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Company Name:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "companyName", className: "w-full p-2 border rounded", value: extractedData.companyName, onChange: (e)=>setExtractedData((prev)=>({ ...prev, companyName: e.target.value })), __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "Name:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", className: "w-full p-2 border rounded", value: extractedData.name, onChange: (e)=>setExtractedData((prev)=>({ ...prev, name: e.target.value })), __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "Position:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "position", className: "w-full p-2 border rounded", value: extractedData.position, onChange: (e)=>setExtractedData((prev)=>({ ...prev, position: e.target.value })), __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Contact Person:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "contactPerson", className: "w-full p-2 border rounded", value: extractedData.contactPerson, onChange: (e)=>setExtractedData((prev)=>({ ...prev, contactPerson: e.target.value })), __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "Email Address:"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", className: "w-full p-2 border rounded", value: extractedData.email, onChange: (e)=>setExtractedData((prev)=>({ ...prev, email: e.target.value })), __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, "Phone Number:"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", className: "w-full p-2 border rounded", value: extractedData.phone, onChange: (e)=>setExtractedData((prev)=>({ ...prev, phone: e.target.value })), __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "Address:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "address", className: "w-full p-2 border rounded", value: extractedData.address, onChange: (e)=>setExtractedData((prev)=>({ ...prev, address: e.target.value })), __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, "Notes:"), /*#__PURE__*/ React.createElement("textarea", { name: "notes", rows: "4", className: "w-full p-2 border rounded", value: extractedData.notes, onChange: (e)=>setExtractedData((prev)=>({ ...prev, notes: e.target.value })), __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-green-500 hover:bg-green-700 text-white font-bold rounded", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, "Save to Spreadsheet")))); }