Neural Network Web Page Scroller TFJS

Words
364
Reading
2 min
Listen
Play
8y

Repository

https://github.com/gabru-md/choc-oh
choc-oh.png

choc-oh is a tensorflow-js application of auto scrolling web page. The web page auto scrolls in the vertical direction depending on where you're reading.

New Features

  • What feature(s) did you add?
    This involved understanding the Pacman Example made by tfjs-examples on https://github.com/tensorflow/tfjs-examples
    I remodelled it into an auto scrolling application for a webpage that scrolls the page in the direction of you reading.
  • How did you implement it/them?
    The whole code is implemented using javascript and the tfjs library. It is built on top of the pacman-exampleas stated before. The user first trains the model to work on corresponding labels. Once the user is done with training, then the user can press the scroll button to start autoscrolling the webpage.
    You can view the live demo of the application here : https://choc-oh.surge.sh
    nnsc.png

How to use demo?

  • Choose the orientation of your face that you like to scroll up, and long press the scroll up button for sometime.
  • Choose the orientation of your face that you like to scroll down, and long press the scroll down button for sometime.
  • Choose the orientation of your face that you like to stay, and long press the stay button for sometime.
  • Once done, click Train and after training click Scroll. And you're good to go.

New Projects

  • What is the project about?
    This project is about implementing a tensorflowjs example in browser that supports various scrolling modes. Currently only vertical scrolling has been implemented. There can be multiple use case for this example. For example : pausing of youtube video if the user looks away etc. But that will require a chrome-extensionto be made for the same.The following technologies are used:

    • tensorflowjs
    • html & css
    • babel
    • surge.sh
  • Roadmap
    Creating a chrome extension for the same so that it can be used over different websites. I will be focusing on chrome extension because of the fact that I can then maybe proceed onto fulfilling the youtube example as well from it.

  • How to contribute?
    Contributing to this is very easy. Just reach out to my repository https://github.com/gabru-md/choc-oh
    First use the surge deployment of choc-oh here -> https://choc-oh.surge.sh

Demo : How to ?

GitHub Account

https://github.com/gabru-md/choc-oh

Contributions

All my contributions to this repository count for this blog.

Thank you!

Neural Network Web Page Scroller TFJS | Ecency