Image Comparison Analysis Tool

A powerful web-based tool that uses Claude 3.7 Sonnet AI to analyze and compare two images, providing detailed breakdowns of their photographic characteristics and key differences. This tool is perfect for photographers, designers, and visual artists looking to understand the technical and aesthetic differences between images.

Features

• Upload and compare any two images side-by-side
• AI-powered detailed analysis of multiple photographic attributes:
  • Color grading
  • Brightness and exposure
  • Composition
  • Perspective
  • Depth of field
  • Objects and subjects
  • Scene type
  • Thematic elements
  • Lighting techniques
  • Emotional tone
• Clear visual presentation of key differences
• Detailed technical breakdown of each image
• JSON output for integration with other tools

Installation

1. Clone this repository:

git clone <repository-url>
cd image-comparison

2. Install dependencies:

npm install

3. Set up your Claude API key:

   1. Go to https://console.anthropic.com/ and create an account if you don't have one
   2. Navigate to the API Keys section
   3. Create a new API key
   4. Copy the API key for the next step

4. Create a .env file in the root directory with your Claude API key:

ANTHROPIC_API_KEY=your-api-key-here
PORT=3000

Usage

1. Start the server:

npm start

2. Open your browser and navigate to http://localhost:3000

3. Upload two images that you want to compare

4. Click "Analyze Images" and wait for Claude to process the comparison

5. View the results across three tabs:

   • Visual Comparison - Side-by-side view with key differences
   • Technical Details - Detailed breakdown of each photographic attribute
   • JSON Data - Raw JSON output for developers

Image Optimization Tips

For the best performance when using this tool:

• Image Size: For optimal performance and cost efficiency, resize your images to approximately 1092×1092px (1:1 aspect ratio) or equivalent size (~1.15 megapixels) before uploading
• Image Quality: Ensure images are clear and not too blurry or pixelated
• Supported Formats: JPEG, PNG, GIF, and WebP formats are all supported
• File Size Limits: Maximum 5MB per image through the API
• Text in Images: If images contain important text, make sure it's legible

These optimizations will improve response time and analysis accuracy while reducing token usage.

Claude Vision Capabilities

Claude 3.7 Sonnet excels at:

• Analyzing visual attributes like color, composition, and lighting
• Comparing multiple images to identify differences
• Understanding objects, scenes, and artistic elements

Some limitations to be aware of:

• Cannot identify specific individuals in photos
• May have reduced accuracy with very small images (under 200px)
• Limited spatial reasoning for complex layouts
• Not designed for medical diagnostic image interpretation

Technical Details

This application uses:

• Node.js and Express for the backend
• Anthropic's Claude 3.7 Sonnet API for AI image analysis
• Pure JavaScript, HTML, and CSS for the frontend (no frameworks)

Claude API Documentation

For more information about Claude API setup and capabilities, refer to:

• Initial Setup: https://docs.anthropic.com/en/docs/initial-setup
• Vision Capabilities: https://docs.anthropic.com/en/docs/build-with-claude/vision
• Claude API Overview: https://docs.anthropic.com/claude/reference/getting-started-with-the-api
• Python SDK: https://github.com/anthropics/anthropic-sdk-python
• Node.js SDK: https://github.com/anthropics/anthropic-sdk-typescript

License

MIT

Credits

This tool was built using Claude 3.7 Sonnet by Anthropic for image analysis.