React implementation of Boss sensor. Popup nonsense activity generator when boss is approaching with your browser and webcam.
This is an implementation of face recognition algorithm running purely on the browser using the Tensorflow.js and face.api library. The basic concept of this project comes from BossSensor.
The program scan images from webcam frame by frame. Finding if there is a face on the image and recognizing the face if it is momorized by deeplearning technique. Then alert the user to hide the screens.
Your data and pictures here never leave your computer! In fact, this is one of the main advantages of running neural networks in your browser. Instead of sending us your data, we send you both the model and the code to run the model. You don't need to install Python, Tensorflow or something, these are then run by your browser.
Your browser will download a model around ~6.4MB in size. Be careful if you have limited bandwidth (mobile data users). The face recognition models will be downloaded once you click on train or sensor page.
Just follow these steps. This is the main screenshot. Once your face data is ready, a green tick will be shown on the Train button. If you didn't prepare the face image to program, click Train button first.
This is the train page. Add your boss images from your computer or use the webcam to capture some. Once there are face images on the application, the train button will appears, click it to train the neural network.
Second, coordinate your webcam to let it face the passage, then click and drag the green rectangle to select the scanning zoom. The application with a smaller scanning zoom will run faster. (It means will react faster. :P)
Third, set up the sensor. Click the webcam buttom to active and click recognize buttom to active face recognization. Note that the application will only detect face in this step, no warning will shown.
Final Then click the detecting buttom, once the application detect the boss, an alert window will pop and redirect to non-sense generator.
- Webcam
- Browser (Chrome is perfered)
- Some images of your boss
Nothing. Only a webcam and a tensorflow.js supported browser are needed.
- BossSensor
- face-api.js
- Tensorflow.js
- React
- Redux
- Create React App
- Material Design Lite
- Material-UI
- react-webcam
- node
^8.11.0 - yarn
^1.13.0
- Clone source code
$ git clone https://github.com/Panepo/Uzuki.git
- Install dependencies
$ cd Uzuki
$ yarn
- Start development server and visit http://localhost:3000/
$ yarn start
yarn <script> |
Description |
|---|---|
start |
Serves your app at localhost:3000 |
test |
Run test code in ./src |
lint |
Lint code in ./src |
prettier |
Prettier code in ./src |
build |
Builds the production application to ./build |
deploy |
Deploy the production application to github pages |
Build code before deployment by running yarn build.