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!
Try it out!
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
- Node.js (v16 or later)
- Bun (recommended) or npm
To install Bun:
curl -fsSL https://bun.sh/install | bash- Clone the repository
- Install dependencies:
# Using Bun (recommended - faster!)
bun install
# Or using npm
npm install- Start the development server:
# Using Bun
bun run dev
# Or using npm
npm run dev- Open
http://localhost:3000in your browser
- Create a folder under
public/comparison-images/ - Add your images to this folder
Example structure:
public/
comparison-images/
diagen-process/
image1.png
image2.png
...
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!
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.
- 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!
- Select your dataset from the home screen
- 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
- 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
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
},
...
]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
Found a bug? Have a feature request? Feel free to open an issue or submit a PR!
This project wouldn't be possible without: