Doc Insight UI

May 21, 2025 · View on GitHub

Doc Insight UI is a modern web application for extracting and analyzing information from document images using OCR (Optical Character Recognition) technology.

Features

📄 Upload document images for information extraction
🔍 Automatic text detection and highlighting
📋 Extract structured data from documents
🧠 Smart template-based extraction for different document types
🖼️ Real-time document preview with text highlighting
📱 Responsive design works on desktop and mobile

Tech Stack

Framework: Next.js 15
UI: React 19 with Tailwind CSS
Language: TypeScript
API Integration: RESTful API communication with backend OCR service

Getting Started

Prerequisites

Node.js 18.0 or later
npm or yarn package manager

Installation

Clone the repository

git clone https://github.com/yourusername/doc-insight-ui.git
cd doc-insight-ui

Install dependencies

npm install
# or
yarn install

Create a .env.local file in the root directory with the following content:

NEXT_PUBLIC_API_BASE_URL=http://your-api-endpoint

Start the development server

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser

Building for Production

npm run build:prod
npm run start:prod
# or
yarn build:prod
yarn start:prod

Project Structure

doc-insight-ui/
├── app/                # Next.js app directory
│   ├── api/            # API routes
│   ├── layout.tsx      # Root layout
│   ├── page.tsx        # Home page
│   └── globals.css     # Global styles
├── components/         # React components
│   ├── ExtractionResult.tsx
│   ├── FileUpload.tsx
│   ├── TemplateSelector.tsx
│   └── TextHighlighter.tsx
├── hooks/              # Custom React hooks
│   └── useExtraction.ts
├── services/           # API services
│   └── api.ts
├── types/              # TypeScript type definitions
│   └── index.ts
└── utils/              # Utility functions

How It Works

Document Upload: Users can drag and drop or select a document image to upload.
Template Selection: Users select the type of document (e.g., invoice, receipt, ID card) for targeted extraction.
Text Extraction: The image is sent to the backend service for OCR processing.
Result Visualization: Extracted text is highlighted on the original document with bounding boxes.
Data Processing: Structured data is extracted according to the selected template.

Environment Variables

NEXT_PUBLIC_API_BASE_URL: URL of the backend OCR/extraction service