Ready, Set, Recycle! is a browser-based waste-sorting assistant that uses machine learning and computer vision to analyze an object and predict whether it belongs in:
- Recycling
- Compost
- Garbage
- Other
Users can classify an item through a live camera feed or by uploading an image. The model runs directly in the browser, so images are processed locally in this version of the project rather than being uploaded to a separate prediction server.
Project Purpose
Sorting waste can be confusing because packaging, food containers, and other everyday objects may look similar while belonging in different disposal streams. This project demonstrates how artificial intelligence can be used to provide a quick visual prediction and confidence score for each available category.
The result should be treated as guidance rather than a final disposal decision. Recycling and compost rules vary between municipalities, and the machine learning model can make mistakes.
Features
- Live object classification using the device camera
- Image upload support for JPG, PNG, and WebP files
- Automatic predictions after an image is uploaded
- Four waste categories: Recycling, Compost, Garbage, and Other
- Confidence percentages for every category
- Low-confidence handling when the top prediction is below 65%
- Smoothed live predictions to reduce rapid changes and flickering
- Responsive interface for desktop and mobile screens
- Browser-based processing with no dedicated backend required
- Accessible labels, status messages, and camera controls
Technologies Used
HTML
HTML is used to structure the landing page and the waste indicator interface. It provides the navigation, camera and upload controls, prediction results, confidence bars, and project information.
CSS
CSS is used to create the visual design, responsive layout, animated background elements, glass-style interface components, buttons, panels, and mobile adjustments.
JavaScript
JavaScript controls the application logic, including:
- Loading the trained model
- Requesting camera permission
- Reading uploaded image files
- Running predictions
- Updating confidence bars and disposal guidance
- Handling low-confidence predictions
- Starting and stopping live camera recognition
- Preloading page assets and managing page transitions
TensorFlow.js
TensorFlow.js allows a trained machine learning model to run directly inside a web browser using JavaScript.
In this project, TensorFlow.js performs inference, meaning it uses the already-trained model to analyze a new camera frame or uploaded image and calculate a probability for each waste category.
The project currently loads TensorFlow.js version 1.7.4 through a CDN.
Google Teachable Machine
The image-classification model was created and exported using Google Teachable Machine.
Teachable Machine provides the exported files needed by the website:
model.json — describes the neural network structuremetadata.json — stores class labels, image size, and model informationweights.bin — contains the learned numerical weights of the model
The website uses the Teachable Machine Image library to load these files and connect them to TensorFlow.js.
How I Created the Machine Learning Model
I created the image-classification model using Google Teachable Machine. I selected an image project and created four separate classes: Recycling, Compost, Garbage, and Other.
For each class, I collected and uploaded several datasets containing examples of different objects that belong to that waste category. The datasets included a variety of recyclable materials, compostable items, garbage items, and unrelated objects for the Other category. Using several datasets helped expose the model to more visual variety instead of training it on only one type of object or background.
The training data included different objects, angles, lighting conditions, distances, colours, shapes, and backgrounds. This allowed the model to learn broader visual patterns associated with each category. For example:
- The Recycling datasets contained examples such as bottles, cans, cardboard, paper, and recyclable containers.
- The Compost datasets contained examples such as food scraps, fruit peels, vegetables, and other organic waste.
- The Garbage datasets contained examples of items that usually belong in regular trash.
- The Other datasets contained objects that did not clearly belong in the first three categories, helping reduce incorrect predictions.
After organizing and labelling the datasets, I trained the model inside Teachable Machine. During training, the model examined the images and learned visual features that could help distinguish one class from another. I then tested the model with new images that were not part of the training data and added more examples when certain objects were being classified incorrectly.
Once the model was trained, I exported it as a TensorFlow.js model. Teachable Machine generated three main files:
model.json for the model architecturemetadata.json for the class labels and model informationweights.bin for the values learned during training
These files were added to the website's model folder. The website loads them through TensorFlow.js and the Teachable Machine Image library, allowing the model to analyze camera frames and uploaded images directly in the browser.
Machine Learning
Machine learning allows a computer to learn visual patterns from labelled examples rather than relying only on manually written rules.
For this project, training images are grouped into four labelled classes:
- Recycling
- Compost
- Garbage
- Other
During training, the model learns patterns associated with each class. When it receives a new image, it compares the visual features in that image with the patterns learned during training and returns a probability for every category.
For example, a prediction could look like:
Recycling: 82%
Garbage: 10%
Other: 6%
Compost: 2%
The category with the highest probability becomes the top prediction. The application only presents it as a confident result when its probability is at least 65%. Otherwise, the item is shown as Uncertain.
Computer Vision
Computer vision is the area of artificial intelligence that enables computers to interpret visual information such as photos and video frames.
In Ready, Set, Recycle!, computer vision is used to:
- Read frames from the live camera
- Analyze uploaded images
- Identify visual features associated with different waste types
- Compare those features with the trained model
- Produce category predictions and confidence scores
The exported model expects images with a size of 224 × 224 pixels and processes three colour channels: red, green, and blue.
How the Prediction System Works
- The browser loads
model.json, metadata.json, and weights.bin. - TensorFlow.js reconstructs the trained neural network in the browser.
- The user starts the camera or uploads an image.
- The image is passed to the Teachable Machine model.
- The model calculates probabilities for Recycling, Compost, Garbage, and Other.
- The application sorts the probabilities from highest to lowest.
- The top result and all confidence scores are displayed.
- If the top score is below 65%, the application displays an uncertain result and recommends trying better lighting, a different angle, or a simpler background.
For live recognition, the application requests a new prediction approximately every 120 ms. It also smooths the confidence values so the displayed prediction does not change too aggressively between camera frames.
Current Model Information
- Framework: TensorFlow.js
- Export tool: Google Teachable Machine Image
- TensorFlow.js version:
1.7.4 - Teachable Machine model version:
2.4.14 - Image library package:
@teachablemachine/image - Input image size:
224 × 224 - Classes: Recycling, Compost, Garbage, Other
- Confidence threshold:
65% - Maximum uploaded image size:
8 MB - Accepted uploads: JPG, PNG, WebP
Improving Prediction Accuracy
Model performance depends heavily on the training data.
The Other category is especially important because it gives the model examples of objects that do not clearly belong to the main waste categories.
Responsible Use and Limitations
This project is an educational prototype and should not replace official municipal waste guidance.
Important limitations include:
- The model can be incorrect even when confidence appears high.
- Confidence is not the same as guaranteed accuracy.
- Disposal rules differ by city and municipality.
- Similar-looking packaging may require different disposal methods.
- Dirty, reflective, crushed, hidden, or poorly lit items may be difficult to classify.
- The model only recognizes patterns represented in its training data.
- Hazardous waste, batteries, electronics, medical waste, and special materials may require separate disposal programs.
Always verify uncertain items using the official waste-sorting guidance for your local municipality.
Privacy
In this version of the project, predictions are processed directly in the browser. The application does not include a backend service for uploading or storing camera images.
Camera access is only requested after the user selects Start camera. The camera stream is stopped when the user presses Stop or leaves the page.
Third-party libraries are loaded from public CDNs, and browser behaviour may vary depending on device permissions, browser settings, and hosting configuration.
Credits
Built with:
- HTML
- CSS
- JavaScript
- TensorFlow.js
- Google Teachable Machine
- Teachable Machine Image Library
Disclaimer
Ready, Set, Recycle! provides an AI-generated prediction only. Always check your local municipality’s official waste disposal rules before recycling, composting, or discarding an item.
