Mistral OCR - Full-Stack React + FastAPI Application

A modern OCR application that extracts text and images from PDFs and image files using Mistral AI's OCR API.

Project Structure

mistral/
├── backend/           # FastAPI backend
│   ├── app/
│   │   ├── __init__.py
│   │   └── main.py
│   └── requirements.txt
├── frontend/          # React frontend
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── services/      # API services
│   │   ├── styles/         # CSS styles
│   │   ├── App.jsx        # Main App component
│   │   └── main.jsx       # Entry point
│   ├── public/
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
└── README.md

Features

• 📄 Upload PDF, JPG, PNG, and WEBP files
• 🔍 Extract text using OCR
• 🖼️ Extract images from documents
• 📝 View extracted content in beautiful markdown format
• 🎨 Modern, responsive UI with gradient design
• ⚡ Fast and efficient processing

Prerequisites

• Python 3.8+
• Node.js 16+ and npm
• Mistral API key

Setup Instructions

1. Environment Setup

Create a .env file in the root directory:

MISTRAL_API_KEY=your_mistral_api_key_here

2. Backend Setup

Navigate to the backend directory and install dependencies:

cd backend
pip install -r requirements.txt

Start the backend server:

cd app
python main.py

Or using uvicorn directly:

uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

The backend will be available at http://localhost:8000

3. Frontend Setup

Navigate to the frontend directory and install dependencies:

cd frontend
npm install

Start the development server:

npm run dev

The frontend will be available at http://localhost:3000

4. Production Build

To build the frontend for production:

cd frontend
npm run build

The built files will be in the dist folder.

API Endpoints

Health Check

GET /api/health

Process Document

POST /api/process
Content-Type: multipart/form-data

Body:
  file: <file>

Development

Backend Development

The backend is a FastAPI application. You can view the interactive API documentation at http://localhost:8000/docs when the server is running.

Frontend Development

The frontend is built with:

• React 18 - UI library
• Vite - Build tool and dev server
• Axios - HTTP client for API calls
• Marked - Markdown parser
• CSS Modules - Component-scoped styling

Architecture

Backend (FastAPI)

• Clean API-only implementation
• CORS enabled for frontend
• File validation and size checking
• Integration with Mistral OCR API
• Error handling and proper HTTP status codes

Frontend (React)

• Component-based architecture
• Separation of concerns:
  • Components: UI elements
  • Services: API communication
  • Styles: CSS modules for each component
• State management with React hooks
• Responsive design
• Accessible UI

Components

• Header - Application header with title
• UploadArea - Drag-and-drop file upload
• LoadingSpinner - Loading state indicator
• ErrorAlert - Error message display
• ResultsDisplay - Display OCR results
• ImageModal - Full-size image viewer

File Size Limits

• Maximum file size: 16MB
• Supported formats: PDF, PNG, JPG, JPEG, WEBP
• Maximum images extracted: 50 per document

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License