Vehicle AI Recognition

A full-stack prototype built for Turners Car Insurance to streamline vehicle quoting using AI image recognition. Developed as part of the Mission Ready HQ Full Stack Development diploma (Mission 1).

Features

• Upload a vehicle photo and get an AI-powered prediction
• Two models running in parallel:
  • Vehicle Type — identifies the category (e.g. sedan, SUV, van)
  • Vehicle Model — identifies the specific make/model (e.g. Toyota Prado)
• Manual fallback selection if confidence is below threshold
• Confidence score displayed with each result

Tech Stack

Layer	Technology
Frontend	React + Vite
Backend	Node.js + Express
AI	Azure Custom Vision
Image handling	Multer

Project Structure

├── backend/ │ ├── config.js │ ├── server.js │ ├── routes/ │ │ └── predict.js │ └── uploads/ # Sample test images included └── frontend/ └── src/ ├── App.jsx └── components/ └── ImageAnalysis.jsx

Getting Started

Prerequisites

• Node.js v18+
• An Azure account with two Custom Vision projects set up (see Azure Custom Vision docs)

Azure setup tip: If your Custom Vision resources aren't populating when you create a new project, try switching to Firefox or Zen Browser. This is a known Chrome rendering issue — resources appear immediately in other browsers and Chrome usually picks them up afterwards.

1. Clone the repo

git clone https://github.com/amyheritage/vehicle-image-classifier.git
cd vehicle-image-classifier

2. Set up the backend

cd backend
npm install
cp .env.example .env

Fill in your Azure credentials in backend/.env:

VISION_PREDICTION_ENDPOINT=<your-endpoint>
VISION_PREDICTION_KEY=<your-key>
PROJECT_ID=<your-project-id>
PUBLISHED_MODEL_NAME=<your-iteration-name>
VISION_V2_ENDPOINT=<your-endpoint>
VISION_V2_KEY=<your-key>
PROJECT_ID_V2=<your-project-id>
PUBLISHED_MODEL_NAME_V2=<your-iteration-name>

npm start

3. Set up the frontend

cd frontend
npm install
cp .env.example .env

The default frontend/.env points to http://localhost:4000.

npm run dev

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

Usage

1. Open the app in your browser
2. Upload a photo of a vehicle
3. Click Find my vehicle type
4. View the AI prediction and confidence score
5. Confirm the result or select manually if needed

Test Images

Sample vehicle images are included in backend/uploads/ — a mix of sedans, SUVs, vans, and other vehicle types. No need to source your own photos to test the app.

Training Your Own Models

If you want to retrain or extend the Custom Vision models, here's how the training data was sourced for this project.

Datasets used

The following open datasets were used to train both models:

• Vehicle Type dataset — Mendeley Data — all five vehicle type categories were used
• Vehicle Make/Model dataset — Mendeley Data — a selected subset of makes was used

Supplementing with Google Images

For additional make/model images, you can use a browser save + terminal conversion method:

1. Search for the vehicle make/model on Google Images
2. Save the full page (File > Save Page As > Webpage, Complete)
3. In the terminal, navigate to the saved folder and convert the HTML assets to images — this captures all images loaded on the page - 9min vid for instructions (https://www.youtube.com/watch?v=Mx8Ax1n7UjA&t=320s)
4. Important: manually review and delete unusable images before uploading to Custom Vision. Interior shots, badges, and low-quality images will skew your model's training significantly.

Azure Custom Vision tips

• Use the official Microsoft documentation to set up your training project and publish your model iteration
• You'll need to create an Azure account and provision a Custom Vision resource before you can train

Security Note

Never commit your .env files. Both backend/.env and frontend/.env are listed in .gitignore. Use the .env.example files as templates.