Hang tight while we fetch the video data and transcripts. This only takes a moment.
Connecting to YouTube player…
Fetching transcript data…
We’ll display the transcript, summary, and all view options as soon as everything loads.
Next steps
Loading transcript tools…
Deep learning project end to end | Potato Disease Classification - 5 : Website (In React JS) | codebasics | YouTubeToText
YouTube Transcript: Deep learning project end to end | Potato Disease Classification - 5 : Website (In React JS)
Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.
Share:
Video Transcript
Video Summary
Summary
Core Theme
This content demonstrates how to build a React.js website that acts as a testing ground for a deep learning model. The website allows users to upload an image of a potato plant leaf, and the model predicts whether the plant has a disease, leveraging a FastAPI backend developed previously.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
In today's video we are going to build a
website where you can drag and drop an
image of a potato plant leaf and the
website will tell you
whether the plant has a disease or not.
Now behind the scene it is calling the
fast API back end which we wrote in our
last video
and the purpose of
building this website is to use it as a
local test pad because our eventual goal
is to build this
beautiful mobile app which farmers can
use right.
That app we will build in the future
videos but in today's video let's build
a website using react.js which is a hot
technology for building websites right
now. You can use angular, plain html, css
javascript
bootstrap there are so many way
frameworks available out there but
react.js is very very popular
right now so that's why I'm using it.
Now one thing to keep in mind is
the this series is all about deep
learning.
I'm not teaching you web technology so
if you don't have fundamentals clear
about web such as what is what is html,
css, javascript then you need to clear
them and there is a very nice Khan
academy course which I'm going to put a
link in the video description below if
you have seen that then you will have
your fundamentals covered and then you
need to watch some videos on react.js in
Youtube so that you get some
understanding in this video. I will not
go into detail, I will just keep it very
upper level, you know.
So
if you feel like oh I'm not
understanding it that's because you need
to have those fundamentals clear. If I
start going into detail this video will
become maybe 10 hour video which I don't
want. So I will go keep it to keep things
at a very high level. We'll build this
beautiful website
and we'll start doing prediction. Let's
start with the installation process.
[Music]
Let's go to my Github page and look at
the readme for installation instructions.
This is my Github page the link is in
video description below and the
installation instructions for react js
are provided here. You need to install
node.js. Node.js is more like fast API. It
is a backend framework but it is in
javascript so you need to install it on
your machine first.
Second one you need to install is npm.
NPM is more like pip you know you can
install any javascript module by saying
install. So install NPM
as well on your computer
then you need to
clone this repository locally on your
machine. So I have already
I have already. You see I have cloned
this repository and you see front-end
directory. This is where we are going to
save our website code so you just do
ctrl c
and ctrl v that into your directory. We
are working on potato. This is directory
I already did control v. So that's why I
have front-end directory
present here.
Now we will install all necessary
modules.
So I will go to
[Music]
portrait to
disease
front-end directory and here
please run this command mp npm
install hyphen hyphen from log json.
Now
this is going to install all the
dependencies
using
the package.json file.
Let's launch visual studio code here.
I prefer using user visual studio code
for web programming from react for react
programming and so on. So I have opened
visual studio code
where
I went to open folder and I open
this entire folder here
and here I have this front-end directory
where
I have two files package.json and
packagelock.json. Now these files are
similar to
requirement.txt in python which list all
your dependency. So when you do npm
install, it will look into this file and
it will figure out all the things that
to install
xuse react react dom whatever
Every dependency that is needed it will
install that. And the difference between
package and package
log file is that package log file has
more details on what dependency it is
going to install
and what are the exit
get commits that
it will
you know pull.
So when you install when you do npm
install from block.json it will use
package.json. If you don't provide this
flag then it will use package.json.
When it uses package.json
it might pull latest versions of these
dependencies or get commit ids you know
whereas in package log json it will
exactly fetch the given get commit. So
your behavior is more predictable
predictable that's why I like to use npm
install hyphen iphone from block dot
json
It will take some time to
install everything
and I have already installed this
and you can see this node modules
directory. So in this directory it has
pulled all the dependencies all
javascript modules that we need for our
project.
You need to run
after that npm audit fix. To fix some
vulnerabilities you can read online
about npm audit fix. I don't want to go
into detail but these are the commands
that you need to run. I have clearly
outlined them on my github page so we
run NPM install and NPM audit fix. Now,
rename dot environment.examples.env
So I have already done that just copy
paste that file
and
create. See.
So
this is the file you get but I copied it
as dot env where I have specified the
url of my fast api server. Remember we
are running our fast API server on local
host port number 8000. If you are
running on a different port please
change the port number here.
Now that things are installed fine I
will quickly run my project. We will go
and look into code little later but let
me first run it and kind of show you how
it works. So for running it you can run
NPM run start
and that will
launch our website
on port 3000. See localhost port 3000 is
where it is running. Look at the
beautiful website. Look at this garden
farmer's picture and the picture of the
farm.
Here you can drag and drop
the
potato plant image
and it will do the prediction for you.
let's
let's check what's going on in the code.
Okay.
Now I have already mentioned
that this is not a web tutorial this is
not a tutorial on react.js. If I have to
explain react.js in detail it will take
probably 10 hours. So I just go over
the overall architecture.
So here in the front end there is a
source directory
which has file called ape.js now app.js
is the main file
and it is using something called a
functional component in react. So this is
a functional component and
this is the main kind of
function or main entry point where it is
returning
this image upload file.
I want you to go to youtube search for
react functional component. You will find
this video watch it so you get an idea
on what is functional to a functional
component. You need to follow some react
basic tutorials. Just to get an
understanding on how things work okay? So
here
it is returning
the html for your main website
and that html has this main element
called image upload which we are
importing from
dot slash home. Now what is this so when
you wherever you see this thing you can
read it like this. We generally omit.js
extension but it is actually importing
something from home.js and I have
home.js here and it is importing image
upload so let me search image upload.
Okay what is this really?
This is a specific javascript syntax
where it is returning this function
Okay and this function is actually
returning that html fragment. See this
fragment so what will eventually happen
is this whole fragment will get placed
here and it will form your whole
html for your entire website and you can
see elements like
the title- see Codebasics potato. This is
classification, this title
is something you see here
and drag and drop this image
or this control rather
is drop zone area.
So that's the
ready-made control that we're using and
this control if you look into our file
we're importing it from a module
node module called this so
if you search for
let's say this, you'll find information
on this component.
So it's a ready-made component which for
dragging and dropping file that we are
importing in our project. That's the best
thing about react Python all these open
source
frameworks that
you can import these red image libraries
ready components and it's you're just
doing really a work of a plumber. You're
assembling different components and
creating a beautiful pipeline
okay?
Now when you drag and drop image
on that control what happens. So we have
the website running.
if I drag and drop the image here what's
going to happen. So let's see
so here
in this particular
element you see on change so whenever
I'm dropping a file it is calling on
select file method. When I say on select
it will of course check if the file is
there or not. If it is not there you do
some
work here but let's say file is there
and file 0.
Basically if you're dropping multiple
files, file 0 will be your first file.
It will call set selected file method
now set selected file method
defined here and there. Is a there is a
variable called selected file and there
is this thing called use state. Now you
state is a hook it's a react hook
for which I will say
use state, okay?
In Youtube watch this 15 minutes video,
you will get a very good understanding
of what this hook is about or in general
read about you state and use the fact
hooks in react.
Again I'm not going into the details
because our tutorial becomes too long. So
that's why pause my video
get some information and use it. Use the
fact and then you come back but see as a
data scientist. You don't need to know
web frameworks too much into detail if
you have
overview that's good enough. So
it's up to you if you want to go too
much into detail but I will give you an
overview which is
selected file is a variable
and set selected file
is a function
that sets this variable, okay? It's like a
setter function for this variable so
whenever you drag and drop an image on
our website it will call this method and
will set
a variable called selected file. So
eventually selected file variable has
the content of the file.
Okay and then comes use effect method
So in the use effect once you drag and
drop the file it will call this use
effect method and it will call this
function called send file. Now send file
is using
exio's
library to make an http call to
our backend. So we are doing an post
call
using the url. This url okay what was
this url.
Well this was url was
what we used in our postman. Remember, we
were using this in postman. So if I look
at my postman, we are using localhost
call on 8000 predict. See that's exactly
what we have localhost colon 8000
predict
and in the data what are we supplying
well we are creating a form data
variable
and we are saying okay file key has this
selected file as an data value
and that's exactly what we did in our
postman. In our postman we use form data
we had a key as a file and the content
of the file here in the value and that's
exactly what we are doing in this react
code.
See form data
and this is the file
and then
it will make a call to our first API
backend and here is the place where we
will get our response. So let's quickly
test these things out and before we test
this.
I need to run
my
back-end server. So I'll go to back-end
server I will not bother about running
main tf serving. You can run it up to you
but I'm just running my main dot pi file
and it says my
server is ready on this machine. I always
try to test things out first in postman
and then I use
react
for testing things. So I will make a call
here and see you know our server is
ready on 8000 port. Yes it is ready! We
are getting response fine
Now I will run my UI. So my UI is already
running.
So my UI is running here
and I will
do f12. So when you do f12 in browser it
shows the debug pan which has things
like console sources,
you know different controls.
So here
let me
first show you my back end. So my back
where is
Yes it is here
and
I will monitor my back end
Here so my back end is running, you see.
Okay, so I'm here and I will make a call.
Now so I will drag and drop file here.
So this is the directory
and I will set a breakpoint
just to make sure things are working,
okay? So here
In the js I will go to potato disease
front end source
in home.js.
Let me first put a breakpoint in home.js
so
I will come to
home.js
and you can by clicking here. You can put
a breakpoint. So I have breakpoint before
the call and after the call
let me drag and drop. So when I drag in
drop c. The control comes here you can
do this to go to next
you know next
ss etc but here in the form data you can
see that in the form data
I have
a file. I will have the file
as an
attribute.
Okay, somewhere you'll see the file I
dDon't want to go into detail that much
but you can observe all the variables
and things like that. And when you do
this resume
what you will notice is
you will get a receiver call in our back
end.
So this is my back end
and I'm just showing everything here
because
that way.
See here you see you see one post call
and you don't see anything here right
and when I do
this
see I see the call which means
my back end return the response fine.
Okay, now what's happening here is see
I'm not getting
control here. It is just spinning.
So maybe there is some error happening.
So when I go to console I see this error
called course. So
course policy is not set you need to
know about course if you're doing web
programming. So here
just search for what is
cross origin resource.
This is resource sharing you know watch
this video 100 second you get an idea.
Basically, the error is happening because
we are running our server on 3000
Our back end is running on 8 000 and it
is called a cross origin request. So we
need to change our backend and add some
code related to core course. Okay. So I
will just stop my backend here and we
need to add this code actually.
So you need to say
that hey fast API
add middleware and allow these origins
What are these origins? Well, allow
request coming from localhost colon 3000.
That's where our react.js UI is running.
Now when you run this again.
Let's try this out whenever this is
ready we'll make another request from
our UIC. This is ready here
and let's go back
here.
Once again I'll just
refresh this
and then
drag and drop this image.
Same I'm here in the request
go here.
It will take some time. See wonderful! I
got my response back
and when you look at this response in
the data you see class is healthy and
confidence is 0.999. So if you run it
you see this thing being displayed fine.
Amazing! This is working okay. Hooray! So
just clear it.
Try out few other
images.
See it's so fast
late blight hundred percent, okay. Late
blight. It was a late blight
I'm using just the training images
because
I'm just feeling lazy to download new
images from internet. But try
different images. This model is quite
accurate. It will tell you the accurate
prediction. So by by doing this website
we created a test pad and we created
some react js UI
which can allow us to help to test our
model basically.
That's all I had for this video friends
In the future video, we will cover
deployment to gcp and
building a mobile application in react
native. I hope you're liking this series
so far if you are please give it a
thumbs up. That's my fees for this
session and share it with your friends
who are looking for their final year
deep learning machine learning project
or who wants to just in general build
something useful
for farmers, you know. This is a real
project where we are covering all the
real life aspects so I'm hoping you're
liking it. I will see you in the next
video.
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
