Image Comparison Tool

A sleek, intuitive tool for comparing and ranking images using Elo rating system. Perfect for testing image generation models, comparing design iterations, or just ranking your favorite photos!

🔗 Related Projects

This tool is part of a larger ecosystem:

• eloranker - The core ranking engine powering this tool
• diagen - Generate beautiful diagrams to compare with this tool

🚀 Quick Start

Prerequisites

• Node.js (v16 or later)
• Bun (recommended) or npm

To install Bun:

curl -fsSL https://bun.sh/install | bash

Installation

1. Clone the repository
2. Install dependencies:

# Using Bun (recommended - faster!)
bun install

# Or using npm
npm install

3. Start the development server:

# Using Bun
bun run dev

# Or using npm
npm run dev

4. Open http://localhost:3000 in your browser

📸 Setting Up Your Images

1. Create a folder under public/comparison-images/
2. Add your images to this folder

Example structure:

public/
  comparison-images/
    diagen-process/
      image1.png
      image2.png
      ...

Need Images to Compare?

Use diagen to generate beautiful diagrams:

npx diagen <source file>

This will create a set of diagrams that you can then compare using this tool!

🎯 How It Works

This tool uses eloranker to implement an image-optimized Elo rating system. Originally developed for chess rankings, the Elo rating system has been adapted here for image comparison.

The Math Behind It (Simplified)

• Each image starts with a base rating (1500)
• When two images are compared:
  • Winner gains points
  • Loser loses points
  • The amount of points exchanged depends on the difference in their current ratings
• The more comparisons, the more accurate the rankings become!

🎮 Using the Tool

1. Select your dataset from the home screen
2. Compare images using:
   • ⬆️ Up arrow or "Top Wins" button for top image
   • ⬇️ Down arrow or "Bottom Wins" button for bottom image
   • ⬅️ Left arrow or "Tie" button if they're equal

Pro Tips

• Use the collapsible sidebar to see live ranking updates
• Watch the progress bar to see how close you are to a stable ranking
• Zoom in on images for detailed comparison
• Download your results anytime:
  • Rankings data: Final positions and scores
  • Win/Loss data: Complete comparison history

📊 Getting Your Results

Click the "Download Rankings" or "Download Win/Loss" buttons to get your data in JSON format.

Example rankings file:

[
  {
    "rank": 1,
    "id": "image1.png",
    "rating": 1865.4
  },
  ...
]

💝 Share Your Results!

We're excited to see how you use this tool! If you're willing to share your comparison data, we'd love to see your rankings. This is especially valuable if you're comparing diagrams generated by diagen - your preferences help us improve our generation algorithms!

Share here: https://tally.so/embed/wvxPLv

🤝 Contributing

Found a bug? Have a feature request? Feel free to open an issue or submit a PR!

🙏 Acknowledgements

This project wouldn't be possible without:

• eloranker for the core ranking algorithm
• diagen for beautiful diagram generation