FIN-OCR Browser-Based Demo Application

NOTE: This project is a WORK-IN-PROGRESS.

This project contains a browser-based application demonstrating how to use fin-ocr-sdk. The application performs OCR (Optical Character Recognition) on data received from a video capture device (e.g., your device's webcam).

Features

This demo application includes two demos:

• Check Image OCR Analysis: Upload a check image directly to extract MICR data using the fin-ocr-sdk. This process runs in the browser, so your image data will remain on your device.
• Analyze Generated Check Image: Generate a simulated check image and run OCR to extract critical MICR data.

Prerequisites

Ensure you have the following installed on your system:

• Git
• Node.js (v20.x or higher, which includes npm)
• npm (comes with Node.js)

Installation Steps

1. Clone the SDK and Demo Repositories

Clone both the SDK and the demo application repositories:

git clone https://github.com/discoverfinancial/fin-ocr-sdk.git
git clone https://github.com/discoverfinancial/fin-ocr-browser-demo.git

2. Build and Link the SDK

Navigate to the SDK directory, install dependencies, build it, and link it globally:

cd fin-ocr-sdk
npm run build
npm link

Note for users with restricted npm global path

If the normal global path for npm is restricted on your corporate machine, you can still use npm link by following these steps:

For Unix-like Systems (Linux/macOS):

1. Set up a local npm prefix:

   • Configure npm to use a local directory for global installations. This allows you to use npm link without requiring access to the restricted global path.
   • Run the following command:

     npm config set prefix ~/.npm-global

   • This changes the global installation directory to ~/.npm-global, which should be accessible even with corporate restrictions.

2. Add the new npm global directory to your PATH:

   • Add the following line to your .bashrc, .zshrc, or corresponding shell configuration file:

     export PATH=~/.npm-global/bin:$PATH

   • Then, source the file to update your current shell session:

     source ~/.bashrc  # or source ~/.zshrc

3. Use npm link as usual:

For Windows Users:

1. Set up a local npm prefix:

   • Configure npm to use a local directory for global installations by running the following command in your terminal (Command Prompt or PowerShell):

     npm config set prefix "%USERPROFILE%\npm-global"

   • This changes the global installation directory to %USERPROFILE%\npm-global, which is within your user profile and should be accessible despite corporate restrictions.

2. Add the new npm global directory to your PATH:

   • Open the Environment Variables settings in Windows.
   • Add %USERPROFILE%\npm-global\bin to your PATH variable.

3. Use npm link as usual:

3. Install Dependencies and Build the Demo Application

Next, navigate to the fin-ocr-browser-demo directory and run the following commands to install the necessary dependencies and build the project:

cd ../fin-ocr-browser-demo
npm link @discoverfinancial/fin-ocr-sdk
npm run build

Running the Application Locally

To start the application:

npm run dev

Then open the application in your browser on the indicated port, which is http://localhost:5173 by default.