Math Problem Solver

An intelligent web application that allows users to upload images of math problems and receive detailed, step-by-step solutions powered by Claude AI with vision capabilities.

Features

• Image Upload: Drag-and-drop or click to upload images of math problems
• AI-Powered Analysis: Uses Claude 3.5 Sonnet with vision to read and understand math problems from images
• Step-by-Step Solutions: Provides detailed explanations for each step of the solution
• Modern UI: Clean, responsive interface that works on desktop and mobile devices
• Multiple Image Formats: Supports PNG, JPG, JPEG, GIF, and WEBP files

Screenshots

The app features:

• Clean upload interface with drag-and-drop support
• Image preview before solving
• Loading state while processing
• Formatted solution display with step-by-step breakdown
• Error handling for invalid inputs

Technology Stack

• Backend: Python with Flask
• Frontend: HTML5, CSS3, JavaScript (Vanilla)
• AI: Anthropic Claude API with vision capabilities
• Image Processing: Pillow (PIL)

Prerequisites

• Python 3.8 or higher
• Anthropic API key (Get one here)

Quick Start

For a quick setup, you can use the provided startup scripts:

Linux/Mac:

chmod +x run.sh
./run.sh

Windows:

run.bat

These scripts will automatically:

• Create a virtual environment if needed
• Install all dependencies
• Start the Flask server

Just make sure you have a .env file with your API key first!

Manual Installation

1. Clone the repository

git clone <repository-url>
cd Test-JDP

2. Create a virtual environment

# On Linux/Mac
python3 -m venv venv
source venv/bin/activate

# On Windows
python -m venv venv
venv\Scripts\activate

3. Install dependencies

pip install -r requirements.txt

4. Set up environment variables

Create a .env file in the root directory:

cp .env.example .env

Edit the .env file and add your Anthropic API key:

ANTHROPIC_API_KEY=your_actual_api_key_here
FLASK_ENV=development
FLASK_DEBUG=True
MAX_CONTENT_LENGTH=16777216

To get an API key:

1. Go to https://console.anthropic.com/
2. Sign up or log in
3. Navigate to API Keys section
4. Create a new API key
5. Copy and paste it into your .env file

Usage

Running the application

python app.py

The application will start on http://localhost:5000

Using the app

1. Open your browser and navigate to http://localhost:5000
2. Click the upload area or drag and drop an image of a math problem
3. Click "Solve Math Problem"
4. Wait for the AI to analyze and solve the problem
5. View the step-by-step solution

Supported Image Types

• PNG (.png)
• JPEG (.jpg, .jpeg)
• GIF (.gif)
• WebP (.webp)

Maximum file size: 16MB

API Endpoints

GET /

Serves the main application interface

POST /solve

Analyzes and solves a math problem from an uploaded image

Request:

• Method: POST
• Content-Type: multipart/form-data
• Body: image file

Response:

{
  "success": true,
  "solution": "Step-by-step solution text..."
}

GET /health

Health check endpoint

Response:

{
  "status": "healthy",
  "api_configured": true
}

Project Structure

Test-JDP/
├── app.py                 # Flask application and API endpoints
├── requirements.txt       # Python dependencies
├── .env.example          # Environment variable template
├── .env                  # Environment variables (create this)
├── .gitignore            # Git ignore rules
├── README.md             # This file
├── templates/
│   └── index.html        # Main HTML template
├── static/
│   ├── styles.css        # Application styles
│   └── script.js         # Frontend JavaScript
└── uploads/              # Temporary upload directory
    └── .gitkeep

How It Works

1. Upload: User uploads an image containing a math problem
2. Encoding: The image is read and base64-encoded
3. AI Analysis: The encoded image is sent to Claude API with vision capabilities
4. Problem Solving: Claude analyzes the image, identifies the math problem, and solves it step-by-step
5. Display: The solution is returned and displayed in a formatted, easy-to-read manner

Error Handling

The application handles various error scenarios:

• Invalid file types
• Files exceeding size limits
• Missing API key configuration
• Network errors
• AI processing errors

All errors are displayed to the user with helpful messages.

Development

Running in development mode

The app runs in debug mode by default when using python app.py. This provides:

• Auto-reload on code changes
• Detailed error messages
• Debug toolbar

Environment Variables

• ANTHROPIC_API_KEY: Your Anthropic API key (required)
• FLASK_ENV: Set to 'development' or 'production'
• FLASK_DEBUG: Enable/disable debug mode
• MAX_CONTENT_LENGTH: Maximum file upload size in bytes (default: 16MB)
• PORT: Server port (default: 5000)

Security Considerations

• The app validates file types and sizes before processing
• Uploaded files are read into memory and not permanently stored
• API keys are stored in environment variables, never in code
• CORS is enabled for development (configure for production use)

Troubleshooting

"API key not configured" error

• Make sure you've created a .env file
• Verify your ANTHROPIC_API_KEY is set correctly
• Restart the Flask server after updating .env

Image upload fails

• Check the file size is under 16MB
• Verify the file format is supported (PNG, JPG, JPEG, GIF, WEBP)
• Ensure the uploads/ directory exists

Server won't start

• Make sure port 5000 is not in use
• Verify all dependencies are installed: pip install -r requirements.txt
• Check Python version is 3.8 or higher

Future Enhancements

Potential features for future versions:

• Support for handwritten math problems
• Multiple problem detection in a single image
• Solution export (PDF, text file)
• Problem history and favorites
• Support for different math subjects (calculus, algebra, geometry, etc.)
• LaTeX rendering for mathematical notation
• User accounts and problem-saving functionality

License

This project is open source and available under the MIT License.

Contributing

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

Support

If you encounter any issues or have questions, please open an issue on the GitHub repository.

Acknowledgments

• Powered by Anthropic Claude AI
• Built with Flask