Image Classifier

A machine learning project that demonstrates the complete pipeline from model training to production deployment. This project trains a FastAI model to classify cats and dogs, deploys it to Hugging Face Spaces, and creates a modern React/TypeScript web interface using the Gradio API.

Live Demo: Live Demo

Huggingface/Gradio Build: Hugging Face Space

Tech Stack

Frontend

• React 18 - Modern UI library with hooks
• TypeScript - Type-safe JavaScript development
• Vite - Fast build tool and development server
• Tailwind CSS - Utility-first CSS framework
• DaisyUI - Beautiful component library built on Tailwind

Backend/ML

• FastAI - Deep learning framework
• PyTorch - Machine learning library
• Gradio - ML model deployment and API
• Hugging Face Spaces - Model hosting platform

How It's Made

Model Training with FastAI

The project begins with training a convolutional neural network using FastAI's high-level API. FastAI was chosen for its rapid prototyping capabilities and built-in support for transfer learning with pre-trained models.

Training Process:

1. Data Preparation: Organize cat and dog images into separate folders
2. Model Creation: Use ResNet34 architecture with transfer learning
3. Training: Fine-tune the model for 4 epochs
4. Export: Save the trained model as model.pkl

from fastai.vision.all import *

# Load data
path = Path('path/to/your/images')
dls = ImageDataLoaders.from_folder(path, valid_pct=0.2, item_tfms=Resize(224))

# Create learner
learn = vision_learner(dls, resnet34, metrics=error_rate)

# Train
learn.fine_tune(4)

# Save model
learn.export('model.pkl')

Tech used: FastAI, PyTorch, ResNet34, Transfer Learning

Deployment with Hugging Face Spaces

The trained model is deployed using Gradio on Hugging Face Spaces, providing a free hosting solution with built-in API access. This approach eliminates the need for server management while providing automatic scaling.

Gradio Interface:

from fastai.vision.all import *
import gradio as gr

# Load the trained model
learn = load_learner('model.pkl')

# Define categories
categories = ('dog', 'cat')

def classify_image(img):
    pred, idx, probs = learn.predict(img)
    return dict(zip(categories, map(float, probs)))

# Create Gradio interface
image = gr.Image(height=192, width=192)
label = gr.Label(num_top_classes=3)
examples = ['dog.jpg', 'cat.jpg', 'bird.jpg']

intf = gr.Interface(
    fn=classify_image, 
    inputs=image, 
    outputs=label, 
    examples=examples
)
intf.launch(inline=False)

Tech used: Gradio, Hugging Face Spaces, Python

Modern React/TypeScript Web Interface

A modern, type-safe web application built with React 18 and TypeScript that integrates with the deployed model through the Gradio API. The interface provides an intuitive drag-and-drop experience with real-time image classification and beautiful visual confidence indicators.

Key Features:

• Real-time Image Preview - Instant preview of selected images
• Animated Confidence Bars - Beautiful visual indicators with smooth animations
• Responsive Design - Optimized for desktop and mobile using DaisyUI components
• Type Safety - Full TypeScript support for better development experience
• Error Handling - Comprehensive error states and loading indicators
• Modern UI - Clean, accessible interface built with DaisyUI and Tailwind CSS

Component Architecture:

// Main App Component
function App() {
  const [client, setClient] = useState<GradioClient | null>(null);
  const [currentImage, setCurrentImage] = useState<File | null>(null);
  const [results, setResults] = useState<ClassificationResult[]>([]);
  
  // Gradio API integration
  const classifyImage = async () => {
    const result = await client.predict("/predict", { 
      img: currentImage 
    });
    displayResults(result.data);
  };
}

API Integration:

import { Client } from "@gradio/client";

// Type-safe Gradio client
interface GradioClient {
  predict: (endpoint: string, data: { img: File }) => Promise<{
    data: unknown;
  }>;
  view_api: () => Promise<any>;
}

// Connect to Hugging Face Space
const client = await Client.connect("j1r3h/image-classifier");

Tech used: React 18, TypeScript, Vite, Tailwind CSS, DaisyUI, Gradio Client

Optimizations

The project implements several performance and development optimizations:

Frontend Optimizations

• Vite Build Tool: Lightning-fast development server and optimized production builds
• TypeScript: Compile-time error checking and better IDE support
• Component Architecture: Modular React components for maintainability and reusability
• Tailwind CSS: Utility-first styling for consistent design and smaller bundle sizes
• DaisyUI Components: Pre-built accessible components with consistent theming

Performance Optimizations

• Client-side processing: Image preview and validation handled locally
• Efficient API calls: Single connection reuse for multiple predictions
• Responsive design: Optimized for both desktop and mobile devices
• Error handling: Graceful fallbacks for network issues and invalid inputs
• Code splitting: Vite automatically optimizes bundle size

Lessons Learned

Building this project provided valuable insights into the complete ML deployment pipeline and modern frontend development:

ML Pipeline Insights

• Model deployment complexity: While FastAI makes training straightforward, production deployment requires careful consideration of hosting, API design, and user experience
• API integration challenges: Working with external APIs requires robust error handling and fallback strategies
• User experience importance: A well-trained model means nothing without an intuitive interface that users can easily interact with
• Separation of concerns: Decoupling the ML model from the user interface allows for independent iteration and scaling

Frontend Development Insights

• TypeScript benefits: Type safety significantly reduces runtime errors and improves development experience
• Component architecture: Breaking UI into reusable components makes code more maintainable and testable
• Modern tooling: Vite provides excellent developer experience with fast hot reload and optimized builds
• Design systems: DaisyUI + Tailwind CSS combination provides consistent, accessible components with minimal custom CSS
• Migration strategy: Converting from vanilla HTML/JS to React/TypeScript requires careful planning but results in much more maintainable code

The project successfully demonstrates how modern ML tools can be combined with contemporary frontend technologies to create production-ready applications with minimal infrastructure overhead and excellent developer experience.