0:00 In today's video we are going to build a
0:02 website where you can drag and drop an
0:04 image of a potato plant leaf and the
0:07 website will tell you
0:08 whether the plant has a disease or not.
0:10 Now behind the scene it is calling the
0:12 fast API back end which we wrote in our
0:15 last video
0:16 and the purpose of
0:19 building this website is to use it as a
0:21 local test pad because our eventual goal
0:24 is to build this
0:25 beautiful mobile app which farmers can
0:28 use right.
0:29 That app we will build in the future
0:31 videos but in today's video let's build
0:33 a website using react.js which is a hot
0:36 technology for building websites right
0:38 now. You can use angular, plain html, css
0:42 javascript
0:43 bootstrap there are so many way
0:45 frameworks available out there but
0:47 react.js is very very popular
0:50 right now so that's why I'm using it.
0:52 Now one thing to keep in mind is
0:55 the this series is all about deep
0:56 learning.
0:57 I'm not teaching you web technology so
1:00 if you don't have fundamentals clear
1:02 about web such as what is what is html,
1:06 css, javascript then you need to clear
1:08 them and there is a very nice Khan
1:10 academy course which I'm going to put a
1:12 link in the video description below if
1:14 you have seen that then you will have
1:16 your fundamentals covered and then you
1:18 need to watch some videos on react.js in
1:22 Youtube so that you get some
1:23 understanding in this video. I will not
1:26 go into detail, I will just keep it very
1:29 upper level, you know.
1:31 So
1:32 if you feel like oh I'm not
1:34 understanding it that's because you need
1:36 to have those fundamentals clear. If I
1:39 start going into detail this video will
1:40 become maybe 10 hour video which I don't
1:43 want. So I will go keep it to keep things
1:46 at a very high level. We'll build this
1:48 beautiful website
1:50 and we'll start doing prediction. Let's
1:52 start with the installation process.
1:55 [Music]
1:59 Let's go to my Github page and look at
2:02 the readme for installation instructions.
2:04 This is my Github page the link is in
2:06 video description below and the
2:08 installation instructions for react js
2:10 are provided here. You need to install
2:13 node.js. Node.js is more like fast API. It
2:16 is a backend framework but it is in
2:19 javascript so you need to install it on
2:22 your machine first.
2:24 Second one you need to install is npm.
2:27 NPM is more like pip you know you can
2:29 install any javascript module by saying
2:34 install. So install NPM
2:37 as well on your computer
2:39 then you need to
2:41 clone this repository locally on your
2:44 machine. So I have already
2:48 I have already. You see I have cloned
2:50 this repository and you see front-end
2:52 directory. This is where we are going to
2:54 save our website code so you just do
2:57 ctrl c
2:59 and ctrl v that into your directory. We
3:01 are working on potato. This is directory
3:03 I already did control v. So that's why I
3:06 have front-end directory
3:08 present here.
3:10 Now we will install all necessary
3:12 modules.
3:14 So I will go to
3:15 [Music]
3:16 portrait to
3:18 disease
3:20 front-end directory and here
3:24 please run this command mp npm
3:30 install hyphen hyphen from log json.
3:34 Now
3:35 this is going to install all the
3:37 dependencies
3:39 using
3:40 the package.json file.
3:43 Let's launch visual studio code here.
3:46 I prefer using user visual studio code
3:49 for web programming from react for react
3:51 programming and so on. So I have opened
3:53 visual studio code
3:55 where
3:56 I went to open folder and I open
4:00 this entire folder here
4:03 and here I have this front-end directory
4:06 where
4:08 I have two files package.json and
4:11 packagelock.json. Now these files are
4:14 similar to
4:15 requirement.txt in python which list all
4:18 your dependency. So when you do npm
4:20 install, it will look into this file and
4:22 it will figure out all the things that
4:25 to install
4:27 xuse react react dom whatever
4:30 Every dependency that is needed it will
4:32 install that. And the difference between
4:34 package and package
4:37 log file is that package log file has
4:40 more details on what dependency it is
4:43 going to install
4:45 and what are the exit
4:47 get commits that
4:49 it will
4:50 you know pull.
4:52 So when you install when you do npm
4:56 install from block.json it will use
4:59 package.json. If you don't provide this
5:01 flag then it will use package.json.
5:05 When it uses package.json
5:09 it might pull latest versions of these
5:11 dependencies or get commit ids you know
5:14 whereas in package log json it will
5:16 exactly fetch the given get commit. So
5:19 your behavior is more predictable
5:22 predictable that's why I like to use npm
5:25 install hyphen iphone from block dot
5:28 json
5:29 It will take some time to
5:31 install everything
5:33 and I have already installed this
5:35 and you can see this node modules
5:37 directory. So in this directory it has
5:39 pulled all the dependencies all
5:41 javascript modules that we need for our
5:44 project.
5:46 You need to run
5:49 after that npm audit fix. To fix some
5:53 vulnerabilities you can read online
5:55 about npm audit fix. I don't want to go
5:57 into detail but these are the commands
5:59 that you need to run. I have clearly
6:02 outlined them on my github page so we
6:05 run NPM install and NPM audit fix. Now,
6:09 rename dot environment.examples.env
6:12 So I have already done that just copy
6:14 paste that file
6:16 and
6:17 create. See.
6:19 So
6:20 this is the file you get but I copied it
6:22 as dot env where I have specified the
6:26 url of my fast api server. Remember we
6:28 are running our fast API server on local
6:32 host port number 8000. If you are
6:34 running on a different port please
6:36 change the port number here.
6:40 Now that things are installed fine I
6:42 will quickly run my project. We will go
6:45 and look into code little later but let
6:47 me first run it and kind of show you how
6:49 it works. So for running it you can run
6:51 NPM run start
6:54 and that will
6:56 launch our website
6:57 on port 3000. See localhost port 3000 is
7:01 where it is running. Look at the
7:03 beautiful website. Look at this garden
7:06 farmer's picture and the picture of the
7:08 farm.
7:10 Here you can drag and drop
7:12 the
7:12 potato plant image
7:15 and it will do the prediction for you.
7:20 let's
7:21 let's check what's going on in the code.
7:26 Okay.
7:27 Now I have already mentioned
7:29 that this is not a web tutorial this is
7:32 not a tutorial on react.js. If I have to
7:35 explain react.js in detail it will take
7:37 probably 10 hours. So I just go over
7:40 the overall architecture.
7:42 So here in the front end there is a
7:43 source directory
7:45 which has file called ape.js now app.js
7:48 is the main file
7:50 and it is using something called a
7:52 functional component in react. So this is
7:56 a functional component and
7:58 this is the main kind of
8:01 function or main entry point where it is
8:03 returning
8:05 this image upload file.
8:08 I want you to go to youtube search for
8:10 react functional component. You will find
8:12 this video watch it so you get an idea
8:14 on what is functional to a functional
8:16 component. You need to follow some react
8:19 basic tutorials. Just to get an
8:21 understanding on how things work okay? So
8:25 here
8:28 it is returning
8:30 the html for your main website
8:33 and that html has this main element
8:35 called image upload which we are
8:38 importing from
8:39 dot slash home. Now what is this so when
8:41 you wherever you see this thing you can
8:43 read it like this. We generally omit.js
8:46 extension but it is actually importing
8:48 something from home.js and I have
8:50 home.js here and it is importing image
8:54 upload so let me search image upload.
8:57 Okay what is this really?
9:00 This is a specific javascript syntax
9:02 where it is returning this function
9:05 Okay and this function is actually
9:07 returning that html fragment. See this
9:10 fragment so what will eventually happen
9:12 is this whole fragment will get placed
9:16 here and it will form your whole
9:19 html for your entire website and you can
9:22 see elements like
9:25 the title- see Codebasics potato. This is
9:27 classification, this title
9:29 is something you see here
9:34 and drag and drop this image
9:36 or this control rather
9:38 is drop zone area.
9:41 So that's the
9:43 ready-made control that we're using and
9:45 this control if you look into our file
9:48 we're importing it from a module
9:52 node module called this so
9:54 if you search for
9:57 let's say this, you'll find information
9:59 on this component.
10:01 So it's a ready-made component which for
10:04 dragging and dropping file that we are
10:06 importing in our project. That's the best
10:08 thing about react Python all these open
10:10 source
10:11 frameworks that
10:13 you can import these red image libraries
10:16 ready components and it's you're just
10:18 doing really a work of a plumber. You're
10:21 assembling different components and
10:23 creating a beautiful pipeline
10:27 okay?
10:28 Now when you drag and drop image
10:31 on that control what happens. So we have
10:33 the website running.
10:34 if I drag and drop the image here what's
10:36 going to happen. So let's see
10:39 so here
10:40 in this particular
10:43 element you see on change so whenever
10:46 I'm dropping a file it is calling on
10:49 select file method. When I say on select
10:53 it will of course check if the file is
10:56 there or not. If it is not there you do
10:58 some
10:59 work here but let's say file is there
11:01 and file 0.
11:02 Basically if you're dropping multiple
11:04 files, file 0 will be your first file.
11:07 It will call set selected file method
11:10 now set selected file method
11:14 defined here and there. Is a there is a
11:17 variable called selected file and there
11:19 is this thing called use state. Now you
11:21 state is a hook it's a react hook
11:25 for which I will say
11:30 use state, okay?
11:32 In Youtube watch this 15 minutes video,
11:35 you will get a very good understanding
11:37 of what this hook is about or in general
11:40 read about you state and use the fact
11:43 hooks in react.
11:45 Again I'm not going into the details
11:48 because our tutorial becomes too long. So
11:50 that's why pause my video
11:52 get some information and use it. Use the
11:54 fact and then you come back but see as a
11:58 data scientist. You don't need to know
12:00 web frameworks too much into detail if
12:03 you have
12:04 overview that's good enough. So
12:07 it's up to you if you want to go too
12:09 much into detail but I will give you an
12:10 overview which is
12:13 selected file is a variable
12:15 and set selected file
12:17 is a function
12:19 that sets this variable, okay? It's like a
12:21 setter function for this variable so
12:24 whenever you drag and drop an image on
12:26 our website it will call this method and
12:30 will set
12:32 a variable called selected file. So
12:34 eventually selected file variable has
12:36 the content of the file.
12:39 Okay and then comes use effect method
12:43 So in the use effect once you drag and
12:45 drop the file it will call this use
12:47 effect method and it will call this
12:50 function called send file. Now send file
12:53 is using
12:54 exio's
12:56 library to make an http call to
12:59 our backend. So we are doing an post
13:02 call
13:03 using the url. This url okay what was
13:06 this url.
13:07 Well this was url was
13:09 what we used in our postman. Remember, we
13:11 were using this in postman. So if I look
13:14 at my postman, we are using localhost
13:16 call on 8000 predict. See that's exactly
13:19 what we have localhost colon 8000
13:21 predict
13:25 and in the data what are we supplying
13:27 well we are creating a form data
13:29 variable
13:31 and we are saying okay file key has this
13:34 selected file as an data value
13:37 and that's exactly what we did in our
13:39 postman. In our postman we use form data
13:42 we had a key as a file and the content
13:44 of the file here in the value and that's
13:47 exactly what we are doing in this react
13:50 code.
13:52 See form data
13:53 and this is the file
13:55 and then
13:57 it will make a call to our first API
13:59 backend and here is the place where we
14:01 will get our response. So let's quickly
14:05 test these things out and before we test
14:07 this.
14:08 I need to run
14:09 my
14:11 back-end server. So I'll go to back-end
14:12 server I will not bother about running
14:14 main tf serving. You can run it up to you
14:17 but I'm just running my main dot pi file
14:19 and it says my
14:21 server is ready on this machine. I always
14:23 try to test things out first in postman
14:26 and then I use
14:27 react
14:28 for testing things. So I will make a call
14:31 here and see you know our server is
14:34 ready on 8000 port. Yes it is ready! We
14:36 are getting response fine
14:38 Now I will run my UI. So my UI is already
14:41 running.
14:44 So my UI is running here
14:47 and I will
14:50 do f12. So when you do f12 in browser it
14:53 shows the debug pan which has things
14:56 like console sources,
14:58 you know different controls.
15:00 So here
15:02 let me
15:05 first show you my back end. So my back
15:10 where is
15:13 Yes it is here
15:15 and
15:17 I will monitor my back end
15:20 Here so my back end is running, you see.
15:24 Okay, so I'm here and I will make a call.
15:28 Now so I will drag and drop file here.
15:31 So this is the directory
15:33 and I will set a breakpoint
15:36 just to make sure things are working,
15:38 okay? So here
15:40 In the js I will go to potato disease
15:45 front end source
15:47 in home.js.
15:49 Let me first put a breakpoint in home.js
15:51 so
15:53 I will come to
15:54 home.js
15:56 and you can by clicking here. You can put
15:58 a breakpoint. So I have breakpoint before
16:00 the call and after the call
16:04 let me drag and drop. So when I drag in
16:06 drop c. The control comes here you can
16:09 do this to go to next
16:11 you know next
16:12 ss etc but here in the form data you can
16:16 see that in the form data
16:18 I have
16:20 a file. I will have the file
16:23 as an
16:24 attribute.
16:29 Okay, somewhere you'll see the file I
16:31 dDon't want to go into detail that much
16:36 but you can observe all the variables
16:38 and things like that. And when you do
16:40 this resume
16:42 what you will notice is
16:46 you will get a receiver call in our back
16:49 end.
16:51 So this is my back end
16:57 and I'm just showing everything here
16:58 because
17:00 that way.
17:01 See here you see you see one post call
17:04 and you don't see anything here right
17:06 and when I do
17:08 this
17:09 see I see the call which means
17:11 my back end return the response fine.
17:15 Okay, now what's happening here is see
17:17 I'm not getting
17:19 control here. It is just spinning.
17:22 So maybe there is some error happening.
17:24 So when I go to console I see this error
17:27 called course. So
17:29 course policy is not set you need to
17:32 know about course if you're doing web
17:34 programming. So here
17:37 just search for what is
17:40 cross origin resource.
17:43 This is resource sharing you know watch
17:46 this video 100 second you get an idea.
17:49 Basically, the error is happening because
17:51 we are running our server on 3000
17:54 Our back end is running on 8 000 and it
17:56 is called a cross origin request. So we
17:59 need to change our backend and add some
18:02 code related to core course. Okay. So I
18:04 will just stop my backend here and we
18:07 need to add this code actually.
18:11 So you need to say
18:13 that hey fast API
18:15 add middleware and allow these origins
18:18 What are these origins? Well, allow
18:20 request coming from localhost colon 3000.
18:23 That's where our react.js UI is running.
18:27 Now when you run this again.
18:30 Let's try this out whenever this is
18:33 ready we'll make another request from
18:35 our UIC. This is ready here
18:38 and let's go back
18:41 here.
18:42 Once again I'll just
18:44 refresh this
18:46 and then
18:47 drag and drop this image.
18:50 Same I'm here in the request
18:52 go here.
18:53 It will take some time. See wonderful! I
18:56 got my response back
18:58 and when you look at this response in
19:01 the data you see class is healthy and
19:03 confidence is 0.999. So if you run it
19:07 you see this thing being displayed fine.
19:10 Amazing! This is working okay. Hooray! So
19:13 just clear it.
19:14 Try out few other
19:17 images.
19:19 See it's so fast
19:21 late blight hundred percent, okay. Late
19:23 blight. It was a late blight
19:26 I'm using just the training images
19:28 because
19:29 I'm just feeling lazy to download new
19:31 images from internet. But try
19:33 different images. This model is quite
19:35 accurate. It will tell you the accurate
19:38 prediction. So by by doing this website
19:41 we created a test pad and we created
19:43 some react js UI
19:45 which can allow us to help to test our
19:49 model basically.
19:51 That's all I had for this video friends
19:54 In the future video, we will cover
19:56 deployment to gcp and
19:59 building a mobile application in react
20:02 native. I hope you're liking this series
20:04 so far if you are please give it a
20:06 thumbs up. That's my fees for this
20:08 session and share it with your friends
20:11 who are looking for their final year
20:13 deep learning machine learning project
20:15 or who wants to just in general build
20:17 something useful
20:18 for farmers, you know. This is a real
20:21 project where we are covering all the
20:23 real life aspects so I'm hoping you're
20:26 liking it. I will see you in the next
20:28 video.
