Rice detection system for face recognition (Part 3)

Tram Ho

In part 2 , we have completed the server part. And the last step we will also write the interface part with ReactJS.

Set up

Here I use nodejs 12.16. Setup steps include:

  • cd $PROJECT : go to the project directory address
  • yarn create react-app frontend : from creating react frontend folder
  • cd frontend && yarn ađ antd : add antd library to yarn
  • Write Dockerfile with the following content:

  • Now, can you run yarn start in the frontend or docker-compose up folder outside the main directory and also create the 3000 port interface that has the image below?
  • Note, if you use docker-compose, you have to fix the reactjs proxy of reactjs to http://flask:3500 and for local to run it will be in package.json . default If you have no problems go to the next step.


In here we will write 3 components:

  • 1 component displays the district name
  • 1 component is the form to send photos and wards
  • 1 component displays the result

Display district name

  • Create the file Title.js .
  • Add the following content to.

  • Here is a basic hook component with title is the name of the district we need.
  • We implement GET protocol with api /district , Reactjs will automatically map them with proxy in package.json
  • At the App Component return:

  • We get the screen:

Create a Photo submission form

  • Create ImageUpload.js file
  • We will use the form component of antd.

Here we have the screen of a form to upload photos and select districts with Select but it still has no Data.

  • We will get the district data via api /wards

  • Here after the react is initialized, call render() and it will mount again and call componentDidMount() and will change this.state.wards with the district values ​​from the API. And renderWardOpt called in render will create Card Option .
  • But now the image selection is not displayed, so we have to write a function to turn the upload file into ObjectURL
  • And we will have to handle the event press the submit button. The antd form allows us to handle this event with the onFinish assignment in the Form card.

  • We send a POST Request to /face with the data variable FormData() . Here, we also have this.props.returnResult(res) to return the results to the Parent component that the App handles.
  • Finally, we have a satisfactory form:

Create the result returned

  • Create Result.js file and write the following content:

  • This component receives the value sent from the Component App as permission, which is the result returned from the POST request above.
  • useEffect here changes when props.permission changes.
  • Revise the App to the following:

  • We pass into the ImageUpload component the getResult function to get the server’s response to the App, changing the value of this.state.permission assigned in the Result component.


Here you will have a screen like the one below: Or We have now completed a simple AI project. Any questions or comments please leave below. Thank you all so much for watching here ^ _ ^.

Share the news now

Source : Viblo