Extract Text from Image with OCR - React JS

///<reference path="../../public/Common/Leadtools.Document.d.ts" /> 
import { useState, useEffect } from "react"; 
 
function DocumentHelper() { 
   const [serviceStatus, setServiceStatus] = useState(String); 
 
   useEffect(() => { 
      connectToDocumentService(); 
   }, []); 
 
   async function connectToDocumentService() { 
      try { 
         lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
         lt.Document.DocumentFactory.servicePath = ""; 
         lt.Document.DocumentFactory.serviceApiPath = "api"; 
         setServiceStatus("Connecting to service " + lt.Document.DocumentFactory.serviceUri); 
         await lt.Document.DocumentFactory.verifyService(); 
         setServiceStatus("Service Connection Verified!"); 
      } catch (error) { 
         console.error(error); 
         setServiceStatus("Service not properly connected."); 
      } 
   } 
 
   return <p id="serviceStatus">{serviceStatus}</p>; 
} 
 
export default DocumentHelper; 

///<reference path="../../public/Common/Leadtools.Controls.d.ts" /> 
///<reference path="../../public/Common/Leadtools.Document.d.ts" /> 
///<reference path="../../public/Common/jquery.d.ts" /> 
///<reference path="../index.d.ts" /> 
import baseImage from "../Resources/ocr1.tif"; 
import { ChangeEvent, useEffect, useRef, useState } from "react"; 
 
function ImageViewer() { 
   const imageViewerRef = useRef(null); 
   const [imageViewer, setImageViewer] = useState<lt.Controls.ImageViewer>(); 
   const [image, setImage] = useState(); 
   const [imageBlob, setImageBlob] = useState<Blob>(); 
   const [outputs, setOutputs] = useState<string>(); 
 
   // On component mount, create the ImageViewer 
   useEffect(() => { 
      createImageViewer(); 
   }, []); 
 
   // When the state is updated, update the imageUrl 
   useEffect(() => { 
      if (imageViewer) if (image) imageViewer.imageUrl = image; 
   }, [image]); 
 
   async function createImageViewer() { 
      try { 
         if (imageViewerRef.current) { 
            const response = await fetch(baseImage); 
            const blob = await response.blob(); 
            setImageBlob(blob); 
            const leaddoc = await lt.Document.DocumentFactory.loadFromFile(blob, new lt.Document.LoadDocumentOptions()); 
            const imageUrl = await leaddoc.pages.item(0).getImageUrl(); 
            const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerRef.current); 
            const imageViewer = new lt.Controls.ImageViewer(createOptions); 
            imageViewer.zoom(lt.Controls.ControlSizeMode.fit, 1, imageViewer.defaultZoomOrigin); 
            imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
            imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
            imageViewer.autoCreateCanvas = true; 
            setImageViewer(imageViewer); 
            setImage(imageUrl); 
         } 
      } catch (error) { 
         console.log(error); 
      } 
   } 
 
   // When file is uploaded, make sure it is valid then update the state 
   const handleFileUpload = async (e: ChangeEvent<HTMLInputElement>) => { 
      if (e.target.files) { 
         const selectedFile = e?.target?.files[0]; 
         const response = await fetch(URL.createObjectURL(selectedFile)); 
         const blob = await response.blob(); 
         setImageBlob(blob); 
         const leaddoc = await lt.Document.DocumentFactory.loadFromFile(blob, new lt.Document.LoadDocumentOptions()); 
         const imageUrl = await leaddoc.pages.item(0).getImageUrl(); 
         console.log(imageUrl); 
         setImage(imageUrl); 
      } 
   }; 
 
   async function handleOCRClick() { 
      setOutputs("Running OCR scan..."); 
      try { 
         if (!imageBlob) { 
            alert("No image Chosen for OCR Recognition."); 
         } else { 
            const leadRectD = lt.LeadRectD.empty; 
            const leadDoc = await lt.Document.DocumentFactory.loadFromFile(imageBlob, new lt.Document.LoadDocumentOptions()); 
            console.log("Document loaded and has cache id: " + leadDoc.documentId); 
            leadDoc.pages.item(0).getText(leadRectD); 
            const data = await leadDoc.pages.item(0).getText(leadRectD); 
            if (data) { 
               console.log(data); 
            } 
            console.log(data.text); 
            setOutputs(data.text); 
         } 
      } catch (error) { 
         console.log(error); 
         setOutputs("OCR Failed, check console for more details."); 
      } 
   } 
 
   return ( 
      <div className="imageViewerDiv"> 
         <div className="leftDiv"> 
            <div className="btnMenu"> 
               <input type="file" onChange={handleFileUpload} /> 
               <button onClick={handleOCRClick}>Extract Text</button> 
            </div> 
            <div className="imageDisplayDiv" ref={imageViewerRef}></div> 
         </div> 
         <div className="rightDiv"> 
            <p>Output:</p> 
            <div className="output">{outputs}</div> 
         </div> 
      </div> 
   ); 
} 
 
export default ImageViewer; 

return ( 
   <div className="App"> 
      <header className="App-header"> 
         <div className="toolbar"> 
            <p>LEADTools Extracting Text</p> 
            <DocumentService /> 
         </div> 
         <ImageViewer /> 
      </header> 
   </div> 
);