Add frontend and backend infrastructure for PA228 image segmentation project

[Copilot]

Overview

This PR implements a complete frontend solution for the PA228 image segmentation project, providing a modern web interface for model inference with a Flask backend API and React frontend application.

What's New

Backend API (backend/)

A Flask-based REST API that exposes the existing PyTorch segmentation model through HTTP endpoints:

• Three RESTful endpoints:

  • GET /api/health - Check server and model status
  • GET /api/model/info - Get model configuration and class information
  • POST /api/predict - Upload image and receive segmentation prediction

• Features:

  • Automatic model loading on startup with configurable path
  • CORS enabled for cross-origin frontend communication
  • Image preprocessing pipeline (resize, crop, normalize)
  • Base64 encoding for web-friendly image transport
  • Integration with existing inference.py and model architecture

Frontend Application (frontend/)

A modern React web interface built with Vite that provides an intuitive UI for image segmentation:

Components:

• ImageUpload - Drag-and-drop file upload with visual feedback and file validation
• PredictionDisplay - Side-by-side comparison of original and segmented images with color-coded class legend
• ModelInfo - Real-time backend connection status indicator

Features:

• 🖼️ Drag-and-drop image upload with fallback file browser
• 🤖 Real-time inference via API integration
• 🎨 Side-by-side visualization of results
• 📊 8-class segmentation legend with color mapping
• 🔄 Live backend health monitoring
• 🌓 Light/dark mode support
• 📱 Fully responsive design for all devices
• ⚡ Fast development with Vite HMR

Documentation

Comprehensive documentation for both development and production use:

• QUICKSTART.md - 5-minute setup guide for quick start
• README_FRONTEND.md - Complete project documentation covering architecture, deployment, and troubleshooting
• backend/README.md - Backend API reference with endpoint specifications
• frontend/README.md - Frontend development guide with component documentation

Technology Stack

• Frontend: React 19.1.1 + Vite 7.1.7
• Backend: Flask 3.0 + Flask-CORS
• ML Framework: PyTorch 2.1.0 (existing)
• Styling: Modern CSS3 with responsive design
• Image Processing: Albumentations (existing)

Quick Start

Start Backend

cd backend
pip install -r requirements.txt
cd ..
python backend/app.py

Start Frontend

cd frontend
npm install
npm run dev

Open http://localhost:5173 and start segmenting images!

Screenshot

The interface shows:

• Professional gradient header with project branding
• Real-time model status indicator (green when ready)
• Intuitive drag-and-drop upload area
• Clean, modern design that works in both light and dark modes

Configuration

Both backend and frontend are configurable through environment variables:

Backend (backend/app.py):

export MODEL_PATH=/path/to/model.pt  # Default: ./model.pt
export PORT=5000                      # Default: 5000

Frontend (frontend/.env):

VITE_API_URL=http://localhost:5000

Implementation Details

Minimal Changes

• No modifications to existing Python ML code (training.py, inference.py, network.py, dataset.py)
• New code isolated in backend/ and frontend/ directories
• Updated .gitignore to exclude build artifacts (node_modules, dist, etc.)

API Design

The backend API follows REST principles with proper error handling:

• JSON responses for structured data
• Base64-encoded images for binary data transport
• HTTP status codes for error indication
• CORS headers for browser security

Frontend Architecture

React components are modular and reusable:

• Functional components with hooks for state management
• Separate CSS files for component styling
• Props-based communication between components
• Environment-based configuration for API URL

Testing

• ✅ Frontend builds successfully (npm run build)
• ✅ ESLint passes with no warnings
• ✅ UI verified and screenshot captured
• ✅ All components render correctly

Next Steps

This implementation provides a foundation for further development:

• Add user authentication for production deployment
• Implement batch processing for multiple images
• Add model selection for comparing different trained models
• Export segmentation results in various formats
• Add performance metrics visualization

Dependencies

All dependencies are properly specified:

• Backend: backend/requirements.txt (Flask, torch, albumentations, etc.)
• Frontend: frontend/package.json (React, Vite, ESLint, etc.)

No changes to existing project dependencies.

---

Resolves #[issue_number] - Create frontend for the project

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Create frontend for the project</issue_title>
<issue_description>Implement the initial frontend for the borisim/PA228 project. This includes setting up the project structure, configuration for frontend tooling, and preparing the basic layout/components to enable further development.

Tasks:

• Choose a frontend framework/library (e.g., React, Vue, Angular, etc.)
• Set up build tools and configuration
• Create basic layouts and placeholder components
• Ensure the frontend can communicate with the backend (API integration, if available)
• Add documentation on how to run and develop the frontend

This issue will serve as a parent for further frontend-specific tasks.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #1

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.