Model Comparison Lab 🌰

A text-to-image model comparison tool powered by fal.ai. Compare multiple AI image generation models side-by-side to evaluate quality, cost, and performance.

Features

• 🎨 Compare 5 state-of-the-art text-to-image models simultaneously
• ⚡ Real-time generation with queue status monitoring
• 💰 Cost tracking per generation
• ⏱️ Performance metrics (generation time)
• 📥 Download generated images
• 🎯 Clean, responsive UI built with React + TailwindCSS

Supported Models

• flux-pro v1.1 ultra ($0.06/image)
• recraft v3 ($0.04/image)
• wan 2.5 preview ($0.05/image)
• nano banana ($0.039/image)
• seedream v4 ($0.035/image)

Quick Start

Prerequisites

• Node.js 18.x or higher
• npm 9.x or higher
• A fal.ai API key (sign up for free)

Installation

1. Clone the repository:

git clone https://github.com/mahidalhan/Model-comparison-lab.git
cd model-comparison-lab

2. Install dependencies:

npm install

3. Create a .env file in the project root:

VITE_FAL_API_KEY=your-fal-api-key-here

💡 Get your API key: Visit fal.ai → Sign up → Dashboard → API Keys

4. Start the development server:

npm run dev

5. Open http://localhost:5173 in your browser

Usage

1. Enter a text prompt describing the image you want to generate
2. Select one or more models to compare
3. Click "Generate" and wait for results
4. Compare outputs side-by-side
5. Download your favorite images

Scripts

# Development
npm run dev          # Start dev server
npm run build        # Build for production
npm run preview      # Preview production build

# Testing
npm run test         # Run unit tests
npm run test:watch   # Run tests in watch mode
npm run test:e2e     # Run E2E tests

# Code Quality
npm run typecheck    # Type checking
npm run lint         # Lint code

Tech Stack

• React 18 - UI framework
• TypeScript 5 - Type safety
• Vite - Build tool and dev server
• TailwindCSS - Styling
• @fal-ai/client - fal.ai JavaScript SDK
• Vitest - Unit testing
• Playwright - E2E testing

Project Structure

model-comparison-lab/
├── src/
│   ├── components/      # React components
│   ├── services/        # API integration
│   ├── hooks/           # Custom React hooks
│   ├── types/           # TypeScript types
│   ├── utils/           # Helper functions
│   └── App.tsx          # Main app component
├── tests/               # Unit and E2E tests
├── specs/               # Feature specifications
└── .env                 # Environment variables (not in git)

Environment Variables

Variable	Description	Required
VITE_FAL_API_KEY	Your fal.ai API key	Yes

⚠️ Important: Never commit your .env file. It's already in .gitignore.

Contributing

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

License

MIT

Acknowledgments

• Powered by fal.ai - Fast and reliable AI model inference
• Built with ❤️ using React and TypeScript