ziqinyeow / E-Commerce-Website-using-React-Tensorflow

An e-commerce web application using React JS, React Context API, Styled-Components as the frontend, and 3 Tensorflow JS-powered pre-trained models.

Home Page:https://ziqinyeow.github.io/E-Commerce-Website-using-React-Tensorflow/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

E-Commerce Web Application using React JS & Tensorflow JS

Overview

  • Dashboard style e-commerce website
  • Responsive layout
  • No CSS libraries
  • Using Styled Components
  • React Context API
  • Tensorflow MobileNet Image Classifier for searching purposes

CodeSandBox Demo

Check this out
All the style is written using styled-components in .js file.
Svg illustration are contributed by Undraw

Searching Process

The search bar allows the input of product name, brand, colour and image address.

While inputting product name, brand and colour, the webpage directly routes you to the product page, and the array of a specific item is being displayed.

While inputting the image address, the image identification box directly pops up using a particular javascript regular expression. You can then press the identify image button; within the 20ms interference time of the MobileNet v2 model, an array of 3 prediction results are being displayed by the probability.

There are particular image URL blocked by the cross-origin policy (CORS policy). The user can also provide an image file input to the browser for image classification.

Brief Intro of Tensorflow JS MobileNet

MobileNet-v2 is a convolutional neural network that is 53 layers deep. You can load a pre-trained version of the network trained on more than a million images from the ImageNet database. The pre-trained network can classify images into 1000 object categories, such as keyboard, mouse, pencil, and many animals. As a result, the network has learned rich feature representations for a wide range of images.

MobileNet-v2 image classification for javascript from Tensorflow JS library provides eye-opening interactivity for the users or clients without any installation. This is the model that runs directly in the browser, and the data input stays only at the client side; this significantly secures the privacy of the clients or users. Accurate results are provided for the users in the vast decrease in time(20ms interference time) and better performance experience than VGG-16(OxfordNet). The model can determine even the species of the animal.

About

An e-commerce web application using React JS, React Context API, Styled-Components as the frontend, and 3 Tensorflow JS-powered pre-trained models.

https://ziqinyeow.github.io/E-Commerce-Website-using-React-Tensorflow/


Languages

Language:JavaScript 99.3%Language:CSS 0.4%Language:HTML 0.3%