0:00
Uh hello guys, in this video I'll show
0:02
you I built out a Canva and remove.bg
0:06
clone unlimited AI image background
0:08
remover offline editor in ReactJS. So
0:11
this is actually the React project which
0:13
actually removes background from images
0:15
directly in the browser. It actually
0:17
uses some AI models directly in the
0:19
browser. So we are using these free AI
0:24
models which is ONX runtime web and
0:27
transformer.js JS hugging face. So which
0:31
is very difficult to run directly inside
0:33
your machine. But I integrated this
0:35
inside this React project. We are using
0:37
the latest version of React. So we are
0:40
running this application inside the
0:42
browser. Let me show you the demo. So
0:45
these are some of the backgrounds that I
0:47
removed. This is actually the AI model
0:49
that we are using web GPU as you can see
0:52
right here. So this model directly
0:57
executes directly in the browser. So
1:00
it's a complete offline editor similar
1:02
to Canva and remove BG. So if you're
1:05
looking for for an alternative, you can
1:07
actually purchase the script. I've given
1:10
the script in the description of the
1:12
video and it's after purchasing it you
1:14
will get the source code from Google
1:16
Drive and it's fully customizable. Each
1:18
and every file it's coded inside
1:21
TypeScript as you can just see here.
1:25
So it actually executes directly in the
1:29
So there is no back end to it. It's a
1:32
single page application. As you execute
1:35
this, you basically select bulk images
1:38
and you will see the background is
1:40
successfully removed. And it also
1:42
provides you with the option to
1:44
customize the background. You can change
1:46
it with a solid color.
1:51
You can even put a image as well.
1:54
Customize the background with a
1:58
So it's a fully fleshed editor.
2:06
So you can even change the background of
2:08
the image as well. Just select any image
2:12
and it will be reflected back in real
2:16
So you can just see the background image
2:18
is changed here. So I built this editor
2:21
from scratch here. So each and every
2:23
line of code is customizable. So the
2:26
link is given in the description. You
2:27
can directly purchase this source code.
2:30
And uh after that you can just see here
2:32
it also uh removed the second image
2:35
background as well. So both the image
2:38
background have been successfully
2:42
So it's a single page application. So it
2:44
directly runs in the browser. So you'll
2:46
see we are running it.
2:52
So it also comes with the editor as
2:54
well. So here you can edit your images
2:56
as well. So you can apply a blur effect.
2:59
You can customize the brightness,
3:01
contrast levels. So all the things are
3:03
there. So it's coded inside React. As
3:06
you see, it's using the latest version
3:14
So, you can just see all the files are
3:18
You can even add additional features on
3:28
So, the link is given in the