tfjs-recycling - GitLite

KO | EN

gitlite — search

#python #typescript #llm #golang #go #linux #macos #nodejs #java #awesome #vue #security #mcp #ios

tfjs-recycling

(★ 108)

[WIP] Using Tensorflow.js to detect objects and help recycle

File Explorer

Download Latest Version (.zip)

- FUNDING.yml
- - imagenet_classes.js
  - materials.js
  - redBinList.js
  - yellowBinList.js
- - utils.js
  - webcam.js
- App.css
- App.js
- ImageRecognition.js
- index.js
.babelrc
.DS_Store
.gitignore
bundle.js
index.html
LICENSE
package-lock.json
package.json
README.md
recycle.gif
webpack.config.js

# Installation Guide

1. Get the code

git clone https://github.com/charliegerard/tfjs-recycling

Downloads the entire project code from GitHub to your computer.

cd tfjs-recycling

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn

Downloads and installs the libraries listed in package.json.

yarn start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Using Tensorflow.js for easier recycling.

I always struggle to remember what is recyclable and what isn't so I decided to use [Tensorflow.js](https://js.tensorflow.org/) and the object detection model [coco-ssd](https://www.npmjs.com/package/@tensorflow-models/coco-ssd) to recognise objects and help determine which bin I should throw them in.

**This is a prototype**.

The object detection is only as good as the pre-trained model used.

For the classification between different bins, I wrote a couple of files listing different objects that should be thrown in the yellow or red bins. These objects will differ depending on the country you live in. I based my selection on the NSW region in Australia.

At the moment, the objects listed in my files are based off of the [90 classes of the coco-ssd model](https://github.com/tensorflow/tfjs-models/blob/master/coco-ssd/src/classes.ts) and the [1000 classes of the mobilenet model](./src/data/imagenet_classes.js).

The lists could be more detailed and include one for electronic goods that need to be thrown separately but that's a next step.

My main goal so far was to see if it would work, and it kinda does :)

[Working Demo](https://charliegerard.github.io/tfjs-recycling)

![demo](https://raw.githubusercontent.com/charliegerard/tfjs-recycling/master/recycle.gif)

## Installing and running locally

1. Clone the repository:
```bash
git clone https://github.com/charliegerard/tfjs-recycling.git
```

2. Navigate to it:
```bash
cd tfjs-recycling
```

3. Install the dependencies:
```bash
yarn
```

4. Start:

```bash
yarn start
```

A browser window/tab should open on port 8081.

## Tech stack:

* Tensorflow.js v0.15.3
* Tensorflow model coco-ssd v0.1.1
* HTML / CSS / JS
* Webpack 4
* Babel 7

## Building

To build the project, run `yarn build` and the `public` directory will have the deployable files.