Takes an image uploaded by the user and recognizes its breed by using a pre-trained TensorFlow.js model MobileNet. Then displays images of dogs of the same breed (fetched from Dog API) in an infinitely scrollable gallery.
You can see the demo here
To start the project, simply run:
npm install // first time only
npm run startTo create and then serve your own build:
npm run build
npx serve dist- Project is written in TypeScript, this is actually my first time using it
- To reduce the load on the main thread, all image classification happens inside a separate Web Worker. For easier usage, Web Worker is loaded with comlink-loader
- The MobileNet model requires an image to be passed to its
classifymethod. If the browser supportsOffscreenCanvas, it is used to create an image inside a Web Worker. If not, a regular canvas is created on the main thread, and thenImageDatais passed to the Web Worker for classification. - Infinite scroll implemented with
IntersectionObserver
Started this as a test assignment from this boilerplate