A modern React web application for solving systems of linear algebraic equations with advanced features including manual matrix entry, OCR-based photo recognition, and multiple solving methods.
- Adjustable matrix dimensions (rows × columns)
- Intuitive grid interface for entering coefficients and constants
- Real-time validation
- Support for matrices up to 20×20
- OCR Support: Upload images of handwritten or printed equations
- AI-Powered (Optional): Integration with OpenAI GPT-4 Vision API for superior accuracy
- Manual Input Fallback: Type equations directly if OCR fails
- Automatic processing on upload
- Review and edit extracted values before solving
-
Gaussian Elimination: Works for any system size with partial pivoting
- Handles inconsistent systems (no solution)
- Detects underdetermined systems (infinite solutions)
- Shows complete step-by-step solution
-
Cramer's Rule: For square matrices where det(A) ≠ 0
- Automatic validation (requires n×n matrix)
- Shows determinant calculations
- Step-by-step solution for each variable
- Solution Vector: Clear display of x₁, x₂, ..., xₙ values
- System Status: Identifies unique, infinite, or no solution cases
- Step-by-Step Solution: Expandable accordion showing every step
- Initial augmented matrix
- Row swaps (pivoting)
- Elimination steps
- Back substitution (Gaussian)
- Determinant calculations (Cramer's)
- Final solution values
- Material Design interface
- Responsive layout
- Intuitive controls
- Clean, professional appearance
- React 18: Modern React with hooks and functional components
- Vite: Fast build tool and development server
- Material-UI (MUI): Component library for Material Design
- Tesseract.js: Client-side OCR for text recognition from images
- OpenAI Vision API (Optional): GPT-4 Vision for advanced image analysis
- Node.js (v14 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/yourusername/LizaProject.git cd LizaProject -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser Navigate to
http://localhost:5173(or the port shown in terminal)
npm run buildThe built files will be in the dist directory.
- Set Dimensions: Enter the number of rows (equations) and columns (variables)
- Enter Matrix: Fill in the coefficient matrix (A) and constants vector (b)
- Format: Ax = b
- Each row represents one equation
- Select Method: Choose between Gaussian Elimination or Cramer's Rule
- Solve: Click "Solve System" to get results
- Switch Tab: Go to "Photo Upload" tab
- Upload Image: Click or drag-and-drop an image of your equations
- Automatic Processing: OCR automatically extracts the matrix
- Review: Edit extracted values if needed in the review dialog
- Confirm: Click "Use This Matrix" to populate the manual entry form
- Solve: Return to manual entry tab and click "Solve System"
- Tesseract.js (Default): Free, client-side OCR
- OpenAI Vision (Optional): Better accuracy, requires API key
- Click "API Settings" to enter your OpenAI API key
- Get key from: https://platform.openai.com/api-keys
- API key is stored locally in your browser
The application supports standard equation format:
1x₁ - 1x₂ + 3x₃ - 3x₄ = -12
3x₁ - 2x₂ + 7x₃ - 10x₄ = -36
3x₁ - 5x₂ + 10x₃ - 10x₄ = -36
-3x₁ + 2x₂ - 1x₃ + 15x₄ = 33
Or simplified:
1x1 - 1x2 + 3x3 - 3x4 = -12
3x1 - 2x2 + 7x3 - 10x4 = -36
LizaProject/
├── src/
│ ├── components/
│ │ ├── MatrixSizeSelector.jsx # Matrix dimension inputs
│ │ ├── MatrixInput.jsx # Manual matrix entry grid
│ │ ├── PhotoUpload.jsx # Image upload and OCR
│ │ ├── MethodSelector.jsx # Solving method selection
│ │ └── ResultsDisplay.jsx # Solution and steps display
│ ├── utils/
│ │ ├── matrixSolver.js # Gaussian & Cramer algorithms
│ │ ├── matrixParser.js # OCR text to matrix parser
│ │ ├── ocrProcessor.js # Tesseract.js integration
│ │ ├── openaiVision.js # OpenAI Vision API integration
│ │ └── numberFormatter.js # Number formatting utilities
│ ├── App.jsx # Main application component
│ ├── index.jsx # Application entry point
│ └── styles.css # Global styles
├── public/
├── package.json
├── vite.config.js
└── README.md
Gaussian Elimination
- Implements partial pivoting for numerical stability
- Detects and handles inconsistent systems
- Identifies underdetermined systems (infinite solutions)
- Performs back substitution to find solutions
- Tracks and displays all intermediate steps
Cramer's Rule
- Validates square matrix requirement (n×n)
- Calculates determinant using recursive algorithm
- Creates modified matrices (Aᵢ) by replacing columns
- Computes each variable using det(Aᵢ)/det(A)
- Shows determinant calculations for each step
Tesseract.js Integration
- Client-side OCR processing (no backend required)
- Automatic image preprocessing (contrast enhancement)
- Character whitelist for better math recognition
- Progress tracking during processing
OpenAI Vision API
- Optional integration for superior accuracy
- Sends image to GPT-4 Vision for analysis
- Structured prompt for equation extraction
- Handles complex mathematical notation
The parser handles multiple formats:
- Standard equations:
1x1 - 1x2 + 3x3 = -12 - Subscripts:
x₁, x₂→ converted tox1, x2 - Spaced formats:
1 x 1 - 1 x 2 - Compact formats:
1x1-1x2+3x3 - OCR errors: Merged digits, character substitutions
Optimized for Google Chrome. May work in other modern browsers.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
Created with React, Vite, and modern web technologies.
- Tesseract.js for OCR capabilities
- Material-UI for beautiful components
- OpenAI for Vision API (optional feature)
Note: For OpenAI Vision API, you need your own API key. This feature is optional and the app works perfectly with free Tesseract OCR.