Hack Club

teach your webcam to recognize your stuff

point your camera at something. give it a few photos. train a model and watch it recognize the thing you taught it. everything runs in your browser ,you use photos you took yourself.

no really, you can finish this in about 3 hours

the deal

no leaderboard. no complicated requirements. just build something that works.

you build
  • a webcam demo that recognizes something you chose
  • something that runs in your browser
  • a real computer vision project you can show people
you need
  • about 3 hours
  • photos you took yourself
  • 2+ hours logged on hackatime
you get
  • a Logitech C270 HD webcam, shipped to you
  • that's all it takes :)

no tiers. no points. build it, ship it, get the webcam.

try it before you build it

here's a small example of what you're making. turn on your camera, show it rock, paper, and scissors a few times, then hold one up and see what it predicts.

live
not trained yet
this demo needs your camera. nothing leaves your browser.
the whole point, shrunk down to fit in your hand
hold up a sign and hit its button 5 to 8 times from different angles. do the same for the other two. then hold one up and see if it gets it right.
for better results: get your hand close to the camera, keep the lighting fairly similar, and change the angle a little when taking your training photos.
loading the model…

how to build yours

eight steps. about 3 hours total.

1

pick your idea

pick something you can easily photograph - keep it to 2-4 classes.

pick something you can photograph easily. some ideas:

  • your two pets
  • your desk when it's clean vs. messy
  • different cards from your collection
  • two objects in your room
  • different people on camera

keep it to 2-4 classes. more classes means more photos and more training.

2

collect your photos

~30-50 photos per class, varied angle & lighting.

take around 30 to 50 photos per class using your laptop webcam or phone. change the angle and lighting a little - don't take all 50 photos from exactly the same position. this will probably take around 30 to 40 minutes.

3

sort your photos

one folder per class - or upload straight into teachable machine.

put each class into its own folder, for example biscuit/ and luna/. if you're using teachable machine, you can upload the photos directly into each class instead.

4

train the classifier

upload to teachable machine, hit train, done in minutes.

open teachable machine. create an image project, add your classes, upload your photos, and train it. training happens in your browser - you don't need a GPU or anything installed.

5

test it

check the live preview, retrain if it's getting confused.

teachable machine gives you a live webcam preview with the prediction for each class. try each thing you trained it on. if it's getting confused, take some more photos and train it again.

6

export the model

export as tensorflow.js - model.json plus weight files.

once you're happy with it, export the model as tensorflow.js. you should get a model.json file and some weight files. these can run directly in a browser.

7

make it do something

~15-20 lines of JS connecting the prediction to a reaction - software-only is fine.

now make the prediction actually do something. we've provided the webcam setup and model loading — your job is to connect the prediction to something. for example:

  • change the background
  • play a sound
  • show a gif
  • change some text
  • turn an LED on
  • move a servo

you don't need to make anything complicated. any of the software-only options above count as a complete answer on their own - hardware is a bonus, not a requirement. this part can be around 15 to 20 lines of javascript.

8

record it and ship

20-30s demo video, then submit repo + video + teachable machine link.

record a 20 to 30 second video of your project working. show the camera recognizing the thing and the reaction actually happening. then push your project to github and submit your github repo, your demo video, and your teachable machine project.

shipped one? put it here

show us what you made.

connect hackatime you need at least 2 hours logged before you can ship
tape it here (or click to browse) a gif or screen recording of the demo reacting to your actual camera — not a pre-recorded clip fed into it
got it! go log your hours and go build the next one.