An AI-powered web application that classifies images as cats or dogs using TensorFlow.js
🚀 Live Demo • 📖 Documentation • 🛠️ Installation • 🤝 Contributing
This project is a modern, responsive web application that uses machine learning to classify images of cats and dogs. Built as part of the freeCodeCamp Machine Learning curriculum, it demonstrates the power of client-side AI with TensorFlow.js, providing real-time image classification without sending data to external servers.
- 🧠 AI-Powered: Convolutional Neural Network for accurate image classification
- 🔒 Privacy-First: All processing happens locally in your browser
- ⚡ Real-Time: Instant predictions with TensorFlow.js
- 🎨 Modern UI: Beautiful, responsive design with dark/light mode
- 📱 Mobile-Friendly: Works seamlessly across all devices
- 🚀 Fast: Built with Vite for optimal performance
| Feature | Description |
|---|---|
| 🖼️ Image Upload | Drag & drop or click to upload images (JPG, PNG, GIF) |
| 🤖 AI Classification | Real-time cat vs dog prediction with confidence scores |
| 📊 Confidence Meter | Visual confidence indicator with color-coded results |
| 🌓 Dark Mode | Beautiful dark/light theme toggle with system preference detection |
| 📱 Responsive Design | Optimized for desktop, tablet, and mobile devices |
| ⚡ Instant Results | Client-side processing for immediate feedback |
- Intuitive Interface: Clean, modern design inspired by industry leaders
- Smooth Animations: Subtle transitions and micro-interactions
- Accessibility: WCAG compliant with proper contrast ratios
- Performance: Optimized loading and rendering
- Error Handling: Graceful error messages and recovery
- TypeScript: Full type safety and better developer experience
- Component Architecture: Modular, reusable React components
- State Management: Efficient state handling with React hooks
- Theme System: Context-based theme management
- Build Optimization: Tree-shaking and code splitting with Vite
- Node.js (v16 or higher)
- npm or yarn
# Clone the repository
git clone https://github.com/AyushSingh360/cat-dog-classifier.git
# Navigate to project directory
cd cat-dog-classifier
# Install dependencies
npm install
# Start development server
npm run devThe application will be available at http://localhost:5173
# Create production build
npm run build
# Preview production build
npm run previewcat-dog-classifier/
├── 📁 public/ # Static assets
├── 📁 src/
│ ├── 📁 components/ # React components
│ │ ├── Header.tsx # Navigation header
│ │ ├── Footer.tsx # Footer component
│ │ ├── ImageUploader.tsx # Image upload interface
│ │ ├── PredictionResult.tsx # Results display
│ │ ├── ModelInfo.tsx # Model information
│ │ └── ThemeToggle.tsx # Dark mode toggle
│ ├── 📁 contexts/ # React contexts
│ │ └── ThemeContext.tsx # Theme management
│ ├── 📁 types/ # TypeScript definitions
│ │ └── index.ts # Type definitions
│ ├── 📁 utils/ # Utility functions
│ │ └── modelUtils.ts # ML model utilities
│ ├── App.tsx # Main application
│ ├── main.tsx # Application entry point
│ └── index.css # Global styles
├── 📄 package.json # Dependencies and scripts
├── 📄 tailwind.config.js # Tailwind configuration
├── 📄 tsconfig.json # TypeScript configuration
├── 📄 vite.config.ts # Vite configuration
└── 📄 README.md # This file
The model uses a Convolutional Neural Network (CNN) architecture optimized for binary image classification:
Input Layer (150x150x3)
↓
Conv2D (32 filters, 3x3) + ReLU
↓
MaxPooling2D (2x2)
↓
Conv2D (64 filters, 3x3) + ReLU
↓
MaxPooling2D (2x2)
↓
Conv2D (128 filters, 3x3) + ReLU
↓
MaxPooling2D (2x2)
↓
Flatten
↓
Dense (512 units) + ReLU
↓
Dense (1 unit) + Sigmoid
- Dataset: Microsoft Cats vs Dogs dataset
- Training Images: 20,000+ images with data augmentation
- Validation Accuracy: >90%
- Optimizer: Adam
- Loss Function: Binary Crossentropy
- Data Augmentation: Rotation, shifting, shearing, zooming, flipping
| Metric | Value |
|---|---|
| Accuracy | >90% |
| Precision | ~89% |
| Recall | ~91% |
| F1-Score | ~90% |
| Inference Time | <100ms |
| Theme | Primary | Secondary | Accent | Background |
|---|---|---|---|---|
| Light | #667eea |
#764ba2 |
#f59e0b |
#f8fafc |
| Dark | #667eea |
#764ba2 |
#f59e0b |
#0f172a |
- Font Family: Inter, system fonts
- Headings: 600-700 weight
- Body: 400-500 weight
- Line Height: 1.5 (body), 1.2 (headings)
Based on 8px grid system: 4px, 8px, 16px, 24px, 32px, 48px, 64px
| Technology | Version | Purpose |
|---|---|---|
| React | 18.2.0 | UI framework |
| TypeScript | 5.0.2 | Type safety |
| Vite | 4.4.5 | Build tool |
| Tailwind CSS | 3.3.3 | Styling |
| Technology | Version | Purpose |
|---|---|---|
| TensorFlow.js | 4.15.0 | ML inference |
| Canvas API | Native | Image preprocessing |
| Tool | Purpose |
|---|---|
| ESLint | Code linting |
| PostCSS | CSS processing |
| Autoprefixer | CSS vendor prefixes |
| Metric | Score |
|---|---|
| Performance | 95+ |
| Accessibility | 100 |
| Best Practices | 100 |
| SEO | 100 |
- Initial Bundle: ~500KB (gzipped)
- TensorFlow.js: ~400KB (cached)
- Application Code: ~100KB (gzipped)
We welcome contributions! Please see our Contributing Guidelines for details.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Use TypeScript for all new code
- Follow ESLint configuration
- Use Prettier for formatting
- Write meaningful commit messages
This project is licensed under the MIT License - see the LICENSE file for details.
- freeCodeCamp - For the excellent Machine Learning curriculum
- Microsoft - For the Cats vs Dogs dataset
- TensorFlow Team - For TensorFlow.js
- Pexels - For beautiful stock photos
- Lucide - For the icon library
Your Name - [@Ayush SIngh] - ayushsingh21109@gmail.com
Project Link: https://github.com/AyushSingh360/cat-dog-classifier
⭐ Star this repository if you found it helpful!
Made with ❤️ for the freeCodeCamp community