Up next in 10
Build a Grammarly Clone in Flask to Check Grammar & Spelling Checker Web App in Browser
178K views
Jan 9, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/build-a-grammarly-clone-in-flask-to-check-grammar-spelling-checker-web-app-in-browser/ Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:00
uh hello guys welcome to this uh video
0:02
so in this video we will try to build a
0:05
grammarly clone grammarly is a popular
0:08
web app which allows you to correct your
0:11
mistakes which happens in grammar or if
0:13
you make any sort of spelling mistakes
0:15
it will automatically correct those
0:17
mistakes and correct your grammar as
0:19
well inside sentences so let's suppose
0:22
if you try to paste a paragraph which
0:25
contains a lot of grammatical and
0:27
spelling mistakes so if you just type
0:30
here grammar checker there are a lot of
0:32
web apps available right online which
0:36
allows you to check your grammar so we
0:40
will try to build these one of these
0:42
apps so if I take a sample text which
0:45
contains a graph so if you go to free
0:48
mediat tools.com my website so here I
0:51
actually developed this tool right here
0:53
at the bottom side you will found out
0:55
this spelling and grammar checker tool
0:57
so if you go to this tool you will
0:59
actually land on this user interface and
1:02
here you need to paste your text which
1:06
contains grammatical or spelling mistake
1:08
so you will see that underline spelling
1:10
is incorrect so the spelling mistakes
1:14
are highlighted by automatically these
1:16
red underlines if you see these are
1:18
spelling mistakes and the grammar of
1:19
this sentence is also wrong so now this
1:22
grammarly web app will automatically
1:24
check these mistakes as I click this
1:26
button it will now show this model
1:30
window to you that correcting the
1:31
grammar mistakes please please wait as
1:34
we process your text so after processing
1:37
the test it will actually give you the
1:39
correct text you will see that the
1:42
spelling mistakes are done you will see
1:44
underline spelling mistake is corrected
1:48
and also if
1:49
you just see the text the grammatical
1:53
mistakes have also been rectified so
1:55
this is the incorrect text this is a
1:57
corrected text now you can copy this
1:59
text and paste it if you are writing a
2:01
blog or if you are uh just having your
2:04
text it's a very helpful tool which
2:07
allows you to correct your grammatical
2:10
and spelling errors that you
2:13
make so if you are writing a blog post
2:16
it will be a very good
2:18
tool so if you have some spelling
2:20
mistakes inside your text it will
2:22
correct it you can try this tool by
2:24
visiting my website freem mediat
2:26
tools.com
2:27
Che grammar and I developed this tool
2:31
using a python package that I written by
2:34
myself which uh uh does this thing
2:37
automatically it makes use of artificial
2:39
intelligence and also it
2:41
uses uh grammarly as well and we are we
2:45
are not using any sort of API if you see
2:48
we are actually just written this
2:51
package right here which is called as
2:54
grammarly clone this is a overall
2:56
project you can get the Full Source Code
2:59
by visiting the link in the description
3:01
of this live stream and you will be
3:03
landing on my website proot store.com
3:05
and where you can directly purchase the
3:08
full source code with full directory
3:09
structure and documentation and you can
3:12
just see that this package that I
3:14
developed which contains a lot of more
3:16
python files so inside our app.py we are
3:19
actually using the flask web server to
3:22
actually make this web application and
3:24
we are actually importing this at the
3:26
very top if you see gramarly clone we
3:28
are importing this package and it
3:30
contains language tool and we are
3:33
instantiating a new instance of it and
3:36
this is actually the full code and we
3:37
will be writing this code from scratch
3:40
so now I will start this application and
3:42
this is our index.html route which is
3:45
using tailin CSS for the user interface
3:47
so I will just delete everything from
3:49
scratch and now I will write the app.py
3:52
file so if you purchase it from my
3:55
website you will get this ZIP file from
3:57
Google Drive you will be redirected to
3:59
Google Drive where you will actually get
4:01
the zip file which will contain this all
4:04
these files so now for the very first
4:06
time we will now write the flask file
4:09
app.py so from flask we need to import
4:12
The Base Library of
4:15
flask and we also need to import the
4:18
request module as well render template
4:20
as well and Json as well so here we are
4:23
actually writing the backend server code
4:25
so we need to first of all initialize a
4:28
new Flash cap and then we'll be
4:30
initializing the tool right here and
4:32
we'll be importing this uh we need to
4:34
import the third package third party
4:37
package that we that I created for you
4:40
for this specific application grammarly
4:42
clone you will see that all these files
4:44
that I created from scratch and uh now
4:48
we imported this now we'll be using this
4:50
module grammarly clone and it contains
4:52
this method which is language tool and
4:54
here you need to provide the language so
4:56
you are processing the English language
4:58
so we will just just providing this code
5:00
English language so now we will be
5:03
starting our flask application so we
5:05
will simply have a if condition so if
5:08
the main function you need to run the
5:11
flash cap so if you just uh see if I run
5:14
this now I say python app.py so it will
5:17
start my application on port number
5:19
Local Host 5000 so I just need to make a
5:22
simple get request so whenever someone
5:25
visits so you just write in flask you
5:28
just write at theate app route and then
5:31
you put your route so it's a Home Route
5:36
here we're defining the function index
5:38
so right here we'll be returning the
5:39
template index. HTML so uh by default in
5:43
flask you need to create this templates
5:45
folder and just create this file index
5:47
for HTML so this template we will be
5:50
loading and you can just write here H1
5:54
tag grammarly clone
6:00
so if you visit now Local Host
6:03
5,000 locally you will see this uh H1
6:08
tab which
6:12
is okay we need to start this so python
6:17
app.py so it is now
6:22
running so now you can see this is the
6:25
H1 tag that we written so now it is
6:27
showing right here so now the next thing
6:29
we need to do uh we need to import a
6:32
Tailwind CSS so the CDN of Tailwind CSS
6:36
simply I will copy this and after the
6:39
title paste it so now we'll be using
6:41
Tailwind here for the user interface so
6:44
just write grammarly clone as the title
6:46
of the web page and we also will be
6:48
using suet alert which is a uh alert
6:52
library to actually show beautiful alert
6:55
boxes so the name of the library is
6:58
sweet alert to so it's a beautiful
7:00
responsive
7:02
customizable library for showing these
7:04
alert boxes in the browser so these are
7:06
the normal alert but we'll be using
7:08
these so for this we are including the
7:10
CDM for it so sub include this so now
7:13
what we need to do we need to construct
7:16
our user interface we'll be using the
7:20
classes here of Tailwind which is BG
7:22
gray and 100 and font
7:27
Sans and here you'll be having the div
7:30
which will be having the container class
7:32
MX Auto and padding will be six so
7:35
inside this we will have the heading
7:37
here 2 XL and it will be bold and uh
7:42
margin four and also it will be in the
7:44
center position so it will simply say
7:47
grammarly clone so if you refresh now
7:52
you will actually see the Tailwind CSS
7:55
will be applied and you will see you can
7:57
increase the size here by increasing
7:59
this value four so if you increase it
8:01
the value will increase you will see
8:03
that
8:04
so now this is good and after this H1
8:08
tag we need to add the text area where
8:11
we will allow the user to actually enter
8:13
the text in correct text so it'll be
8:15
giving an ID to it of text input and we
8:18
will also be giving some Tailwind
8:20
classes to it w full width will be full
8:23
padding will be
8:25
two and we also need to give it a border
8:29
as well as well so you'll see
8:32
border border
8:34
gray 300 and also it could be rounded
8:38
margin bottom four so if you refresh now
8:41
there will be this text area will be
8:43
added right here where you will be
8:45
allowing the user to actually enter the
8:49
text so we will be also be giving a
8:52
place placeholder attribute so here
8:54
we'll simply say the user enter text
8:57
here dot dot dot so so here the user
9:00
will enter the text if you see you will
9:02
see this nice little placeholder as well
9:05
so after doing this we just need a
9:08
simple button to actually allow the user
9:12
to submit the form so check button we'll
9:15
be giving an ID to it on giving BG blue
9:18
500 so these are all Tailwind
9:22
classes and the color of the button will
9:25
be white padding to rounded and when we
9:28
hover on to the button it will change BG
9:31
blue
9:33
600 and the button text will be simply
9:36
correct text so if you refresh now there
9:39
will be a button will be added this as
9:41
you can
9:43
see so after this we will also be adding
9:46
a output text area where we will be
9:48
showing the correct input so we'll be
9:50
giving an ID to it of also corrected
9:54
input corrected text sorry
10:00
so we will also be giving the same
10:02
classes here to this also
10:08
so so this will be read only so we can't
10:11
modify the text inside this so this will
10:14
only be read
10:18
only so by default it will be disabled
10:21
so you can't just write inside this it
10:24
it will only be read only so that's all
10:28
so just just after this button we will
10:30
be also be giving an H2 tag where we
10:33
will be giving corrected text just to
10:38
show to the user that this is a
10:39
corrected text we'll be giving a class
10:42
text Excel font semibold margin top six
10:47
margin bottom two so just before this
10:51
text area we showing a simple corrected
10:53
text so now here the user will write the
10:55
input text it will be containing this
10:57
output text right here so now the user
11:00
interface is complete now we just need
11:02
to write the JavaScript code so we'll be
11:05
just be including the script.js we'll be
11:08
creating a new file in this directory
11:11
script.js so we also need the jQuery CDN
11:15
as well so we'll simply include the
11:16
jQuery
11:19
CDM just before this include the CDN for
11:25
jQuery so now uh inside this JavaScript
11:28
we will actually
11:31
be uh
11:33
having document ready function of J
11:41
cury so when all the elements are loaded
11:44
in the Dom we will all just
11:46
be binding a button uh event handler to
11:50
the when we click the button when we
11:52
click this button this function will
11:53
automatically
11:56
execute
11:57
so we can just just say alert button
12:00
just to cross check if it is
12:03
working so if you click this button
12:05
right
12:11
here uh I think we haven't given this ID
12:15
to this button so just check uh check
12:18
button we have given this ID if you
12:21
see check
12:27
button uh I think the JavaScript code is
12:30
not working so if I console log you will
12:33
see script.js is not found uh let me put
12:39
dot like
12:42
this now it is
12:46
found script JS not
12:51
found uh by default in flask guys you
12:55
can't I don't let me write it in the
12:58
same
12:59
so script
13:09
so so here we will just be binding
13:16
this so when we click this button let me
13:18
just say alert
13:25
here you can see that now the alert
13:28
statement is executing so now instead of
13:31
this we just need
13:33
to show the sweet
13:37
alert
13:39
dialogue with the user so you'll simply
13:42
say s w l and it contains a fire method
13:46
and here it actually contains various
13:49
options the title of the aler window so
13:51
it will say correcting the grammar
13:52
mistakes text please wait while we
13:54
process your text and allow outside
13:57
click to false so the user can't click
13:59
outside of the model window to close it
14:02
and uh this is the call back function
14:05
when
14:07
the use when the dialog box shows so
14:10
you'll be uh calling this function show
14:17
loading
14:18
so I think
14:30
so yeah so just format if you now click
14:34
uh enter anything right here click on
14:36
this now you will see this nice little
14:39
uh alert window appearing so now uh we
14:44
also need to hide this as well but
14:46
before that we just need to make our
14:48
post request we'll say dollar post and
14:50
here we'll be making this end point in
14:52
the back end in flask you'll say check
14:55
underscore text and here we will be
14:57
passing the text text as a second
15:01
parameter so inside this object we will
15:04
pass our text that needs to be pass so
15:07
we'll be inside jQuery we have this
15:10
method which is uh we'll Target it by
15:13
the ID that we have given so text input
15:16
and the actual value the user writes so
15:22
after this inside this call back
15:24
function we will actually get the
15:27
response so just format the
15:31
document so you we have given this ID if
15:34
you see text input so we are referencing
15:37
this ID right here to actually get the
15:39
value
15:41
so now after we get this response we
15:45
need to hide this so now to hide this
15:47
you will simply say swell closed so this
15:49
will hide
15:50
the alert
15:53
window so after this we just need to say
15:57
corrected text value response. text so
16:01
whatever is the output text area we have
16:04
given this ID as well if you see
16:07
uh ID is equal to corrected text and we
16:10
are just manipulating and whatever is
16:13
the response coming response. text so
16:15
now we need to write this uh end point
16:18
in the flask check uncore text so now
16:20
just move to
16:22
app.py so right here we will now now be
16:26
writing this post request so we'll say
16:28
app
16:30
route uh check uncore
16:33
text and you'll be having this methods
16:36
so this will be the post
16:39
method inside the flask you will just
16:42
write the function check text so you'll
16:44
we basically be getting the text which
16:47
the user has submitted so we can do this
16:49
using request. form text so we'll
16:53
actually get the text that the user has
16:56
submitted so we have have this text
16:58
proper right here so we are simply
17:00
referencing it and getting this and then
17:02
we will say matches tool. check so we
17:05
have inside this module that I created
17:08
this method is there which is check it
17:11
will which will automatically checks
17:12
your grammar mistakes and spelling
17:14
mistakes and which uh does the same job
17:18
that grammarly uses so again we will say
17:22
Corrections will be an empty array and
17:25
then you'll say for match in matches
17:29
and uh after
17:31
this we will say correction is equal
17:36
to an object which will contain these
17:40
properties which is offset error
17:43
length then it will contain the
17:46
replacement as
17:51
well which will be match
18:02
so this is a correction
18:06
object so after this what we need to do
18:09
corrections. append
18:14
correction so just outside this we we
18:17
say
18:20
Corrections corrected
18:23
text is equal to text and then we will
18:27
say for correction
18:29
in so all this code you will get guys uh
18:33
the link is given in the
18:37
description it is so we are simply
18:40
returning this text uh
18:51
just so after we get this we will simply
18:55
say we need to return this as a response
18:58
so we say
19:02
jsonify and we will be giving a text
19:05
property to
19:12
it so we just need to import this
19:15
jsonify at the very top so this will be
19:19
jsonify so now this is actually a
19:22
backend API ready uh when you visit
19:25
this uh the application is complete so
19:29
if I just refresh now and start this
19:34
flash cap python app.py so now the app
19:37
is
19:38
listening Local Host 5,000 port number
19:41
so if you just write any text if
19:47
you if you just make a mistake right
19:50
here
20:03
so you can see
20:05
that uh we have written this text right
20:07
here quite a lot of mistakes are there
20:10
and as I press this button correct text
20:12
it will automatically detect all these
20:14
mistakes that I happen grammatically and
20:16
spelling error mistakes as well so once
20:19
you do this you will see the
20:23
text so you can see that so it has here
20:26
you will see spelling it it was
20:28
containing Capital as well it has also
20:31
rectified that also played spelling
20:34
mistake it has also fixed this as well
20:36
if you see it is quite efficient you can
20:40
see has it has also corrected the
20:43
grammatical mistakes as well similarly
20:46
that grammarly does so it will save a
20:48
lot of time for you if you actually make
20:50
a lot of blog post and you could just
20:53
use this tool it's completely free and
20:55
unlimited we are we are not using any
20:58
sort of API uh I just developed this uh
21:01
package from scratch in Python and the
21:04
link is given in the description you can
21:05
directly purchase this full source code
21:08
and uh you can actually develop this
21:10
tool you can use this source code and
21:12
actually modify it and you can even
21:15
extend this functionality as well and
21:17
you can develop your own tool as well
21:19
using this module as well so this is
21:21
actually the thing that I want to show
21:24
you the grammarly and it will contain as
21:27
many text as you can show you can
21:30
see the tool is deployed you can paste
21:33
as much text as you want you can see all
21:36
these mistakes are there if you click it
21:38
it can handle as much text as you paste
21:40
it inside the text area there is no
21:42
limitation and you can see it has it
21:45
will take some time and then it will
21:47
return you the corrected text you will
21:49
see that so no errors are there so you
21:52
can see all these red lines have been
21:54
fixed automatically it uses Ai and I
21:58
developed it from scratch so it doesn't
22:00
use any sort of API it doesn't have any
22:02
sort of restriction you can use it for
22:04
unlimited number of time and the link is
22:07
given you can go to the description and
22:09
purchase it at the checkout page I do
22:12
have given the live demo link so you can
22:15
first of all use this tool before
22:17
purchasing it so that you will get this
22:20
source code so thank you very much for
22:23
watching this video and I will be seeing
22:25
you guys in the next live stream