Up next in 10
Integrating AI with Maps to generate Locations by Kevin Toshihiro Uehara | React & Chill Conference
0 views
Aug 6, 2025
We will create an application case where I will introduce you how you can use AI to generate locations on front-end. We will use some tools to create and integrate with OpenAI to generate some locations given an user input. I will bring an overview how to create a web-app using React app and integrate with some maps Open Source tools to display on our application and introduce the integration with OpenAI to generate locations on map and be interactive for the users. I will bring an overview of a web application using AI (openAI) to generate locations on web and display on map suggested by OpenAI. In this talk I will introduce some tools like Javascript, Typescript, MapLibre, MapTiler, React Map GL. How we can integrate webapp with AI? This is the answer I want to ask yourseft and I will breing the overview of this application and teach you? š Conference Website: https://reactandchill.live š Code of Conduct: https://reactandchill.live/code-of-co... šŗ CSharp TV - Dev Streaming Destination http://csharp.tv š C# Corner - Community of Software and Data Developers https://www.c-sharpcorner.com #CSharpTV #CSharpCorner #CSharp #ReactAndChill
View Video Transcript
0:00
hi there it's a pleasure to be here and
0:03
hi there it's a pleasure to be here and
0:03
hi there it's a pleasure to be here and thank you so much for be here and today
0:07
thank you so much for be here and today
0:07
thank you so much for be here and today I'm going to talk about uh how
0:11
I'm going to talk about uh how
0:11
I'm going to talk about uh how integrating Ai and browser API voice
0:14
integrating Ai and browser API voice
0:14
integrating Ai and browser API voice recognition on web application but uh
0:19
recognition on web application but uh
0:19
recognition on web application but uh first of all how have you been and how
0:22
first of all how have you been and how
0:22
first of all how have you been and how are you doing I hope you are well and
0:26
are you doing I hope you are well and
0:26
are you doing I hope you are well and it's nice to have you here welcome to my
0:30
it's nice to have you here welcome to my
0:31
it's nice to have you here welcome to my talk and I'm very grateful to be here
0:33
talk and I'm very grateful to be here
0:33
talk and I'm very grateful to be here speaking about this topic and it's how I
0:38
speaking about this topic and it's how I
0:38
speaking about this topic and it's how I said before it's a pleasure to be here
0:41
said before it's a pleasure to be here
0:41
said before it's a pleasure to be here and a catch you L title and I promise
0:45
and a catch you L title and I promise
0:45
and a catch you L title and I promise that is I'm not a cck
0:48
that is I'm not a cck
0:48
that is I'm not a cck bait so let's
0:52
begin so um how I've been presented I'm
0:57
begin so um how I've been presented I'm
0:57
begin so um how I've been presented I'm Steph from change engineer at I food I'm
1:01
Steph from change engineer at I food I'm
1:01
Steph from change engineer at I food I'm speaker and content Tech Creator on
1:04
speaker and content Tech Creator on
1:04
speaker and content Tech Creator on YouTube uh I I participate in the compos
1:08
YouTube uh I I participate in the compos
1:08
YouTube uh I I participate in the compos from changer organization I'm gdg or
1:11
from changer organization I'm gdg or
1:11
from changer organization I'm gdg or Google developer groups compas
1:13
Google developer groups compas
1:13
Google developer groups compas collaborator C is the city where I live
1:16
collaborator C is the city where I live
1:16
collaborator C is the city where I live okay I'm part of the team and
1:19
okay I'm part of the team and
1:19
okay I'm part of the team and collaborator of the not BR Community BR
1:23
collaborator of the not BR Community BR
1:23
collaborator of the not BR Community BR because of Brazil and I'm organ
1:26
because of Brazil and I'm organ
1:26
because of Brazil and I'm organ organizer of frin compas okay
1:30
organizer of frin compas okay
1:30
organizer of frin compas okay and just to describe myself I'm um Asian
1:34
and just to describe myself I'm um Asian
1:34
and just to describe myself I'm um Asian and
1:35
and
1:35
and Japanese desent decent a yellow skin and
1:40
Japanese desent decent a yellow skin and
1:40
Japanese desent decent a yellow skin and with some tattoos and I'm using a black
1:43
with some tattoos and I'm using a black
1:43
with some tattoos and I'm using a black shirt and uh with a black hair
1:48
shirt and uh with a black hair
1:48
shirt and uh with a black hair okay um and how I said before I'm from
1:52
okay um and how I said before I'm from
1:52
okay um and how I said before I'm from Brazil s Paulo and the city where I live
1:56
Brazil s Paulo and the city where I live
1:56
Brazil s Paulo and the city where I live is
1:57
is
1:57
is compus uh one of my hob is is play CS
2:02
compus uh one of my hob is is play CS
2:02
compus uh one of my hob is is play CS Counter Strike uh but I'm very bad I'm
2:06
Counter Strike uh but I'm very bad I'm
2:06
Counter Strike uh but I'm very bad I'm very bad on Counter Strike and I always
2:10
very bad on Counter Strike and I always
2:10
very bad on Counter Strike and I always install and I
2:12
install and I
2:12
install and I uninstall uh another one of my hobbies
2:16
uninstall uh another one of my hobbies
2:16
uninstall uh another one of my hobbies is to play guitar but also I remember
2:20
is to play guitar but also I remember
2:20
is to play guitar but also I remember that I'm very very bad too now my hobby
2:26
that I'm very very bad too now my hobby
2:26
that I'm very very bad too now my hobby actually uh is to collect action figures
2:30
actually uh is to collect action figures
2:30
actually uh is to collect action figures and if you see that uh and I'm very good
2:34
and if you see that uh and I'm very good
2:34
and if you see that uh and I'm very good in this hobby because I spent
2:38
money um just talking about I
2:43
money um just talking about I
2:43
money um just talking about I food uh I work in the food Logistics
2:46
food uh I work in the food Logistics
2:46
food uh I work in the food Logistics traval uh I food is a company is the
2:50
traval uh I food is a company is the
2:50
traval uh I food is a company is the biggest food delivery company here on
2:53
biggest food delivery company here on
2:53
biggest food delivery company here on Brazil I work cross FAL uh in two teams
2:58
Brazil I work cross FAL uh in two teams
2:58
Brazil I work cross FAL uh in two teams okay location areas and location
3:01
okay location areas and location
3:01
okay location areas and location um and in addition to internal projects
3:06
um and in addition to internal projects
3:06
um and in addition to internal projects too but I work with ja processing Jo
3:10
too but I work with ja processing Jo
3:10
too but I work with ja processing Jo location parner deliver areas delivery
3:13
location parner deliver areas delivery
3:13
location parner deliver areas delivery routes and much more it's I work with a
3:17
routes and much more it's I work with a
3:17
routes and much more it's I work with a lot of contacts here at iFood
3:21
lot of contacts here at iFood
3:21
lot of contacts here at iFood okay but uh how I said in the initial of
3:29
okay but uh how I said in the initial of
3:29
okay but uh how I said in the initial of this present
3:30
this present
3:30
this present this is not a clickbait we are going to
3:33
this is not a clickbait we are going to
3:33
this is not a clickbait we are going to create an application but first of all I
3:36
create an application but first of all I
3:36
create an application but first of all I need to explain some concept uh what is
3:40
need to explain some concept uh what is
3:40
need to explain some concept uh what is LMS okay it is hard to pronounce to
3:43
LMS okay it is hard to pronounce to
3:43
LMS okay it is hard to pronounce to pronounce and I
3:46
pronounce and I
3:46
pronounce and I will uh demonstrate the application
3:50
will uh demonstrate the application
3:50
will uh demonstrate the application overview the technologies that I using
3:53
overview the technologies that I using
3:53
overview the technologies that I using the components the sh de code part the
3:58
the components the sh de code part the
3:58
the components the sh de code part the best part of this presentation
4:01
best part of this presentation
4:01
best part of this presentation and the demo the
4:03
and the demo the
4:03
and the demo the application uh work uh or and let's
4:09
application uh work uh or and let's
4:09
application uh work uh or and let's finish with the key and way uh section
4:13
finish with the key and way uh section
4:13
finish with the key and way uh section okay so what is
4:18
okay so what is
4:18
okay so what is llms basically uh llms is a lot of data
4:22
llms basically uh llms is a lot of data
4:22
llms basically uh llms is a lot of data and a lot of GPU being processed okay uh
4:28
and a lot of GPU being processed okay uh
4:28
and a lot of GPU being processed okay uh we already solved the uh sorry llm means
4:33
we already solved the uh sorry llm means
4:33
we already solved the uh sorry llm means large language model uh llm are great by
4:38
large language model uh llm are great by
4:38
large language model uh llm are great by Deep learning using uh aret
4:42
Deep learning using uh aret
4:42
Deep learning using uh aret Transformer but we already saw this
4:45
Transformer but we already saw this
4:45
Transformer but we already saw this concept and we probably used LMS before
4:50
concept and we probably used LMS before
4:50
concept and we probably used LMS before for example things FL Tor Flow by Google
4:54
for example things FL Tor Flow by Google
4:54
for example things FL Tor Flow by Google what home by
4:56
what home by
4:56
what home by IBM uh this oi was Ed use large modules
5:02
IBM uh this oi was Ed use large modules
5:02
IBM uh this oi was Ed use large modules uh Alli have your all llms processing on
5:07
uh Alli have your all llms processing on
5:07
uh Alli have your all llms processing on uh the background
5:10
uh the background
5:10
uh the background so uh having around for some time they G
5:14
so uh having around for some time they G
5:14
so uh having around for some time they G mainstream attention through the
5:17
mainstream attention through the
5:17
mainstream attention through the shpt uh and we have the llm models like
5:23
shpt uh and we have the llm models like
5:23
shpt uh and we have the llm models like GT3 and now we have
5:26
GT3 and now we have
5:26
GT3 and now we have GT4 and so on okay
5:30
GT4 and so on okay
5:30
GT4 and so on okay but let's see now with this complete
5:33
but let's see now with this complete
5:33
but let's see now with this complete Concept in your mind let's see the
5:36
Concept in your mind let's see the
5:36
Concept in your mind let's see the application overview so let's create an
5:39
application overview so let's create an
5:39
application overview so let's create an application using n voice recognition of
5:43
application using n voice recognition of
5:43
application using n voice recognition of the browser and integrate with open ey
5:47
the browser and integrate with open ey
5:48
the browser and integrate with open ey okay uh give what the users pick uh
5:52
okay uh give what the users pick uh
5:52
okay uh give what the users pick uh let's integrate with open ey andplay the
5:55
let's integrate with open ey andplay the
5:55
let's integrate with open ey andplay the result dynamically sorry for my bad
5:58
result dynamically sorry for my bad
5:59
result dynamically sorry for my bad light but dynamically on the scam
6:05
light but dynamically on the scam
6:05
light but dynamically on the scam okay so
6:07
okay so
6:07
okay so basically uh the the the the application
6:12
basically uh the the the the application
6:12
basically uh the the the the application is the movie will SMI uh I Robot it's
6:18
is the movie will SMI uh I Robot it's
6:18
is the movie will SMI uh I Robot it's in but uh it's I Robot but without willm
6:28
in but uh it's I Robot but without willm
6:28
in but uh it's I Robot but without willm sorry but the
6:32
Technologies I'm very
6:34
Technologies I'm very
6:34
Technologies I'm very B sorry for my jokes the Technologies uh
6:40
B sorry for my jokes the Technologies uh
6:40
B sorry for my jokes the Technologies uh I'm going to use vit uh the front chain
6:42
I'm going to use vit uh the front chain
6:42
I'm going to use vit uh the front chain tooling the boiler plate so I will use V
6:46
tooling the boiler plate so I will use V
6:46
tooling the boiler plate so I will use V with re and T script okay uh this is
6:52
with re and T script okay uh this is
6:52
with re and T script okay uh this is very simple and common to use uh on the
6:57
very simple and common to use uh on the
6:57
very simple and common to use uh on the ecosystem of front chain and and the
7:00
ecosystem of front chain and and the
7:00
ecosystem of front chain and and the tail wi the framework CSS okay uh so
7:05
tail wi the framework CSS okay uh so
7:05
tail wi the framework CSS okay uh so this is uh not new okay uh and the OPI
7:10
this is uh not new okay uh and the OPI
7:11
this is uh not new okay uh and the OPI so the EI tooling used to integrate with
7:13
so the EI tooling used to integrate with
7:13
so the EI tooling used to integrate with the application right okay
7:19
the application right okay
7:19
the application right okay cool so talking about opening ey okay
7:23
cool so talking about opening ey okay
7:23
cool so talking about opening ey okay the probably something new re
7:28
the probably something new re
7:28
the probably something new re script we probably
7:30
script we probably
7:30
script we probably already um solid it this Technologies
7:35
already um solid it this Technologies
7:35
already um solid it this Technologies but I want to focus on the OPI okay
7:38
but I want to focus on the OPI okay
7:38
but I want to focus on the OPI okay openi is a research laboratory related
7:41
openi is a research laboratory related
7:41
openi is a research laboratory related to artificial intelligence in the
7:44
to artificial intelligence in the
7:44
to artificial intelligence in the USA uh it has a series of products and
7:49
USA uh it has a series of products and
7:49
USA uh it has a series of products and apis the best know are
7:51
apis the best know are
7:52
apis the best know are sh and to probably you already
7:57
sh and to probably you already
7:57
sh and to probably you already us and probably you you used to create
8:01
us and probably you you used to create
8:01
us and probably you you used to create uh rejects reject for example and the we
8:05
uh rejects reject for example and the we
8:05
uh rejects reject for example and the we and to process images and artificial
8:09
and to process images and artificial
8:09
and to process images and artificial intelligence to create images okay so we
8:13
intelligence to create images okay so we
8:14
intelligence to create images okay so we going to use one of the apis um through
8:20
going to use one of the apis um through
8:20
going to use one of the apis um through AI model to
8:22
AI model to
8:22
AI model to suggest uh this
8:26
suggest uh this
8:26
suggest uh this um
8:28
um
8:28
um uh the
8:29
uh the
8:29
uh the uh results okay sorry uh it has a free
8:34
uh results okay sorry uh it has a free
8:34
uh results okay sorry uh it has a free Cota but in this demo we need to use $5
8:37
Cota but in this demo we need to use $5
8:37
Cota but in this demo we need to use $5 for use
8:40
for use
8:40
for use okay so this is the interface okay the
8:44
okay so this is the interface okay the
8:44
okay so this is the interface okay the openi so you can enter now probably you
8:49
openi so you can enter now probably you
8:49
openi so you can enter now probably you will see this screen and uh all the
8:54
will see this screen and uh all the
8:54
will see this screen and uh all the documentations how to integrate uh
8:57
documentations how to integrate uh
8:57
documentations how to integrate uh everything is there okay so you can
9:01
everything is there okay so you can
9:01
everything is there okay so you can create your all accounts and you uh use
9:07
create your all accounts and you uh use
9:07
create your all accounts and you uh use the API key that we uh we will see in
9:12
the API key that we uh we will see in
9:12
the API key that we uh we will see in the next slides but when you create
9:15
the next slides but when you create
9:15
the next slides but when you create account you can create um API key okay
9:19
account you can create um API key okay
9:19
account you can create um API key okay that we're going to use to our
9:23
that we're going to use to our
9:23
that we're going to use to our application forour
9:25
application forour
9:25
application forour application so now talking about web
9:29
application so now talking about web
9:29
application so now talking about web spech API if you don't know the browser
9:33
spech API if you don't know the browser
9:33
spech API if you don't know the browser have this
9:35
have this
9:35
have this API whoa It's amazing right because uh
9:40
API whoa It's amazing right because uh
9:40
API whoa It's amazing right because uh five years ago we can't imagine that the
9:44
five years ago we can't imagine that the
9:44
five years ago we can't imagine that the browser
9:45
browser
9:45
browser uh
9:47
uh
9:47
uh and
9:49
and
9:49
and naely uh have this API so I will use a
9:54
naely uh have this API so I will use a
9:54
naely uh have this API so I will use a library okay that is based on the
9:57
library okay that is based on the
9:57
library okay that is based on the browser na web speech API to facilitate
10:01
browser na web speech API to facilitate
10:01
browser na web speech API to facilitate the integration okay so I going to use
10:04
the integration okay so I going to use
10:04
the integration okay so I going to use this Library just to
10:08
this Library just to
10:08
this Library just to um
10:10
um
10:10
um the uh easy to present to you okay and
10:15
the uh easy to present to you okay and
10:15
the uh easy to present to you okay and avoid to create
10:18
avoid to create
10:18
avoid to create Integrations uh and be simple okay the
10:22
Integrations uh and be simple okay the
10:22
Integrations uh and be simple okay the web spech GPI alls to embed voice data
10:25
web spech GPI alls to embed voice data
10:25
web spech GPI alls to embed voice data into web applications the web spe API
10:28
into web applications the web spe API
10:29
into web applications the web spe API has two parts speech synthesis text to
10:33
has two parts speech synthesis text to
10:33
has two parts speech synthesis text to speech
10:34
speech
10:34
speech so uh and speech recognition a
10:37
so uh and speech recognition a
10:37
so uh and speech recognition a synchronous speech recognition so you we
10:39
synchronous speech recognition so you we
10:39
synchronous speech recognition so you we can transer text and to speech and
10:45
can transer text and to speech and
10:45
can transer text and to speech and speech what you're talking in text and
10:48
speech what you're talking in text and
10:48
speech what you're talking in text and you can pass the language that you are
10:52
you can pass the language that you are
10:52
you can pass the language that you are using okay and this is what uh this is
10:56
using okay and this is what uh this is
10:56
using okay and this is what uh this is going to influence what
10:59
going to influence what
10:59
going to influence what uh language you are using because the
11:03
uh language you are using because the
11:03
uh language you are using because the API will
11:04
API will
11:04
API will interpret uh what your language that you
11:09
interpret uh what your language that you
11:10
interpret uh what your language that you are using
11:12
are using
11:12
are using okay so this is documentation in the uh
11:17
okay so this is documentation in the uh
11:17
okay so this is documentation in the uh mdn web docs so we can see that web ppi
11:23
mdn web docs so we can see that web ppi
11:23
mdn web docs so we can see that web ppi is um available for the browsers okay
11:28
is um available for the browsers okay
11:28
is um available for the browsers okay and we can see all the methods the
11:32
and we can see all the methods the
11:32
and we can see all the methods the functions
11:34
functions
11:34
functions provided and if
11:38
provided and if
11:38
provided and if uh we enter on in the can IU site and
11:43
uh we enter on in the can IU site and
11:43
uh we enter on in the can IU site and search for web PPI we can see that not
11:47
search for web PPI we can see that not
11:47
search for web PPI we can see that not all the browsers
11:50
all the browsers
11:50
all the browsers uh uh is provided to you
11:55
uh uh is provided to you
11:55
uh uh is provided to you but uh I think uh in
12:01
but uh I think uh in
12:01
but uh I think uh in uh sometime all the browers
12:05
uh sometime all the browers
12:05
uh sometime all the browers are we are available to use the web
12:11
are we are available to use the web
12:11
are we are available to use the web speech API okay but in the Chrome Safar
12:15
speech API okay but in the Chrome Safar
12:15
speech API okay but in the Chrome Safar and the Thea browsers uh are available
12:21
and the Thea browsers uh are available
12:21
and the Thea browsers uh are available okay now let's to the uh the best part
12:26
okay now let's to the uh the best part
12:26
okay now let's to the uh the best part of this talk let's to the sh ni Cod
12:29
of this talk let's to the sh ni Cod
12:29
of this talk let's to the sh ni Cod so let's create a project using VD with
12:32
so let's create a project using VD with
12:32
so let's create a project using VD with the re and script I'm going to use yarn
12:35
the re and script I'm going to use yarn
12:35
the re and script I'm going to use yarn you can use npm or
12:38
you can use npm or
12:38
you can use npm or pnpm I'm going to CH JN um I going to
12:43
pnpm I'm going to CH JN um I going to
12:43
pnpm I'm going to CH JN um I going to create VD with the name the project with
12:47
create VD with the name the project with
12:47
create VD with the name the project with AI generator and passing the template
12:49
AI generator and passing the template
12:49
AI generator and passing the template react with t script I'm going to install
12:53
react with t script I'm going to install
12:53
react with t script I'm going to install install the dependencies using YN and
12:56
install the dependencies using YN and
12:56
install the dependencies using YN and simple running the application use
12:59
simple running the application use
13:00
simple running the application use yev we have this application easy beasy
13:05
yev we have this application easy beasy
13:05
yev we have this application easy beasy right okay so we have this initial
13:09
right okay so we have this initial
13:09
right okay so we have this initial struct structure provided by vit so this
13:14
struct structure provided by vit so this
13:15
struct structure provided by vit so this is default okay so we can see
13:18
is default okay so we can see
13:18
is default okay so we can see TSX the
13:20
TSX the
13:20
TSX the CSS and TSX because we are uh uh using
13:26
CSS and TSX because we are uh uh using
13:26
CSS and TSX because we are uh uh using typ script okay
13:29
typ script okay
13:29
typ script okay and the taing settings I will not deep
13:33
and the taing settings I will not deep
13:33
and the taing settings I will not deep dive in this all the settings but you
13:36
dive in this all the settings but you
13:36
dive in this all the settings but you can simple uh follow the instructions on
13:40
can simple uh follow the instructions on
13:40
can simple uh follow the instructions on the SES of the Tailwinds it's simple
13:44
the SES of the Tailwinds it's simple
13:44
the SES of the Tailwinds it's simple just uh install the dependency and
13:48
just uh install the dependency and
13:48
just uh install the dependency and create the file the post CSS and the T
13:51
create the file the post CSS and the T
13:51
create the file the post CSS and the T in config files and map the all the
13:55
in config files and map the all the
13:55
in config files and map the all the files that going to use the tailing and
13:58
files that going to use the tailing and
13:58
files that going to use the tailing and map in use the
14:01
map in use the
14:01
map in use the directives directive
14:04
directives directive
14:04
directives directive sorry now remember that I said uh when
14:09
sorry now remember that I said uh when
14:09
sorry now remember that I said uh when you create account on
14:12
you create account on
14:12
you create account on the uh opening I okay so after you
14:16
the uh opening I okay so after you
14:16
the uh opening I okay so after you create your accounts you can create um
14:21
create your accounts you can create um
14:21
create your accounts you can create um API key so I'm going to create a uh in
14:26
API key so I'm going to create a uh in
14:26
API key so I'm going to create a uh in file to map our uh um API key so here
14:32
file to map our uh um API key so here
14:32
file to map our uh um API key so here you can put your API key that you
14:35
you can put your API key that you
14:35
you can put your API key that you created and I will add some
14:39
created and I will add some
14:39
created and I will add some dependencies uh okay so I
14:43
dependencies uh okay so I
14:43
dependencies uh okay so I you uh add the speech
14:47
you uh add the speech
14:47
you uh add the speech recognition and the open AI okay so we
14:52
recognition and the open AI okay so we
14:52
recognition and the open AI okay so we going to use this
14:53
going to use this
14:53
going to use this to uh to dependences okay direct speech
14:57
to uh to dependences okay direct speech
14:57
to uh to dependences okay direct speech recognitions just how I said before it's
15:00
recognitions just how I said before it's
15:00
recognitions just how I said before it's just to be simple we can use n natively
15:04
just to be simple we can use n natively
15:04
just to be simple we can use n natively but are you going to use library that
15:07
but are you going to use library that
15:07
but are you going to use library that will facilitate and be more easy to
15:10
will facilitate and be more easy to
15:10
will facilitate and be more easy to explain
15:12
explain
15:12
explain okay and uh and the Val okay so and
15:17
okay and uh and the Val okay so and
15:17
okay and uh and the Val okay so and adding develop PES because we uh are
15:22
adding develop PES because we uh are
15:22
adding develop PES because we uh are working with TP script we need the types
15:26
working with TP script we need the types
15:26
working with TP script we need the types okay so the types of Rex spe recognition
15:30
okay so the types of Rex spe recognition
15:30
okay so the types of Rex spe recognition okay I'm I'm going to install as develop
15:38
dependency so I'm going to create a
15:41
dependency so I'm going to create a
15:41
dependency so I'm going to create a component called microphone and is a
15:44
component called microphone and is a
15:44
component called microphone and is a component responsible for presenting a
15:47
component responsible for presenting a
15:47
component responsible for presenting a microphone that will start and stop in
15:50
microphone that will start and stop in
15:50
microphone that will start and stop in this spech recognition so here we can
15:54
this spech recognition so here we can
15:54
this spech recognition so here we can see uh
15:56
see uh
15:56
see uh some uh add the microphone props will
16:01
some uh add the microphone props will
16:01
some uh add the microphone props will extend of HML props and HML button
16:06
extend of HML props and HML button
16:06
extend of HML props and HML button elements if you don't know this this
16:12
um the props of the HML some HML element
16:17
um the props of the HML some HML element
16:17
um the props of the HML some HML element you can use this so you can use on click
16:21
you can use this so you can use on click
16:21
you can use this so you can use on click on
16:23
on
16:23
on uh uh
16:25
uh uh
16:26
uh uh on on any events of the elements okay
16:30
on on any events of the elements okay
16:30
on on any events of the elements okay provided by the element by theault uh
16:33
provided by the element by theault uh
16:33
provided by the element by theault uh but I going to use the is dark if the
16:38
but I going to use the is dark if the
16:38
but I going to use the is dark if the button is
16:40
button is
16:40
button is listen uh stop and start when I click
16:45
listen uh stop and start when I click
16:45
listen uh stop and start when I click okay so I'm going to choose re function
16:48
okay so I'm going to choose re function
16:48
okay so I'm going to choose re function component passing the props of children
16:51
component passing the props of children
16:51
component passing the props of children and the microphone props and we have the
16:54
and the microphone props and we have the
16:55
and the microphone props and we have the children element here if we can now we
16:58
children element here if we can now we
16:59
children element here if we can now we can
17:00
can
17:00
can pass um everything uh children
17:04
pass um everything uh children
17:04
pass um everything uh children components okay this is not uh nothing
17:07
components okay this is not uh nothing
17:07
components okay this is not uh nothing new and here we can I'm just using the
17:13
new and here we can I'm just using the
17:13
new and here we can I'm just using the the functions to stop or start the
17:19
the functions to stop or start the
17:19
the functions to stop or start the the events okay so here we have on click
17:23
the events okay so here we have on click
17:23
the events okay so here we have on click Start listen Okay and passing this class
17:27
Start listen Okay and passing this class
17:27
Start listen Okay and passing this class name here and I'm just creating this
17:32
name here and I'm just creating this
17:32
name here and I'm just creating this stnd style
17:35
stnd style
17:35
stnd style okay so I love typescript and typescript
17:40
okay so I love typescript and typescript
17:40
okay so I love typescript and typescript is my I said I'm I'm not s uh but I'm
17:46
is my I said I'm I'm not s uh but I'm
17:46
is my I said I'm I'm not s uh but I'm typescript familiar I
17:48
typescript familiar I
17:48
typescript familiar I love uh we have this commment here enum
17:52
love uh we have this commment here enum
17:52
love uh we have this commment here enum that I created it's a object object okay
17:57
that I created it's a object object okay
17:57
that I created it's a object object okay but here it's a common ptbr okay so I
18:01
but here it's a common ptbr okay so I
18:01
but here it's a common ptbr okay so I create this command here in in portese
18:05
create this command here in in portese
18:05
create this command here in in portese and in English so here clear is aagar
18:10
and in English so here clear is aagar
18:11
and in English so here clear is aagar darker
18:12
darker
18:12
darker is
18:14
is
18:14
is scer and in English it's clear darker
18:17
scer and in English it's clear darker
18:17
scer and in English it's clear darker darker light light okay um but that's it
18:21
darker light light okay um but that's it
18:21
darker light light okay um but that's it and every this commment I map okay in
18:26
and every this commment I map okay in
18:26
and every this commment I map okay in the commment here okay if the language
18:30
the commment here okay if the language
18:30
the commment here okay if the language that I
18:31
that I
18:31
that I choose uh is equal ptbr I'm going to
18:36
choose uh is equal ptbr I'm going to
18:36
choose uh is equal ptbr I'm going to choose the ptbr if not I'm going to use
18:40
choose the ptbr if not I'm going to use
18:40
choose the ptbr if not I'm going to use the English Okay so with this step
18:44
the English Okay so with this step
18:44
the English Okay so with this step script we have the same um case it will
18:50
script we have the same um case it will
18:50
script we have the same um case it will not
18:51
not
18:51
not uh cause uh some error okay and here I
18:56
uh cause uh some error okay and here I
18:56
uh cause uh some error okay and here I have the this comments that I M
18:59
have the this comments that I M
18:59
have the this comments that I M okay is if I call clear I reset the the
19:05
okay is if I call clear I reset the the
19:05
okay is if I call clear I reset the the transcript okay if dark I will change
19:09
transcript okay if dark I will change
19:09
transcript okay if dark I will change the dark state to True Light to false so
19:13
the dark state to True Light to false so
19:13
the dark state to True Light to false so list I will call the stop listing
19:16
list I will call the stop listing
19:16
list I will call the stop listing function and if uh finished I will call
19:20
function and if uh finished I will call
19:20
function and if uh finished I will call the open AI method okay that I going to
19:26
the open AI method okay that I going to
19:26
the open AI method okay that I going to see uh in probably next next slides and
19:30
see uh in probably next next slides and
19:30
see uh in probably next next slides and the component
19:31
the component
19:31
the component select that is customable component by
19:35
select that is customable component by
19:35
select that is customable component by selection the the language that will be
19:37
selection the the language that will be
19:37
selection the the language that will be used English or Portuguese but we can
19:42
used English or Portuguese but we can
19:42
used English or Portuguese but we can use uh Spanish Japanese every language
19:47
use uh Spanish Japanese every language
19:47
use uh Spanish Japanese every language because this compony is
19:50
because this compony is
19:50
because this compony is cust
19:52
cust
19:52
cust customizable hard to
19:54
customizable hard to
19:54
customizable hard to pronounce
19:56
pronounce
19:56
pronounce this uh
20:00
so this fact creating the opinion AI
20:04
so this fact creating the opinion AI
20:04
so this fact creating the opinion AI service okay I prefer to create the a
20:08
service okay I prefer to create the a
20:08
service okay I prefer to create the a class when I'm going to create with some
20:11
class when I'm going to create with some
20:11
class when I'm going to create with some API I create this class uh that will
20:16
API I create this class uh that will
20:16
API I create this class uh that will generate the message okay so uh what I'm
20:21
generate the message okay so uh what I'm
20:21
generate the message okay so uh what I'm going to create is get the API key okay
20:26
going to create is get the API key okay
20:26
going to create is get the API key okay uh that we map it on the file here um
20:33
uh that we map it on the file here um
20:33
uh that we map it on the file here um nich pass I'm instantiation the openi
20:37
nich pass I'm instantiation the openi
20:37
nich pass I'm instantiation the openi passing the key and we need this flag
20:41
passing the key and we need this flag
20:41
passing the key and we need this flag here danger H browser because we are
20:45
here danger H browser because we are
20:45
here danger H browser because we are working on the
20:46
working on the
20:46
working on the browser
20:48
browser
20:48
browser the uh perfect world it's work on the
20:52
the uh perfect world it's work on the
20:52
the uh perfect world it's work on the back end because we going we are going
20:55
back end because we going we are going
20:55
back end because we going we are going to expose this the key but for this
21:00
to expose this the key but for this
21:00
to expose this the key but for this example I want to expose it's not not a
21:04
example I want to expose it's not not a
21:05
example I want to expose it's not not a problem okay but uh this tip is
21:09
problem okay but uh this tip is
21:09
problem okay but uh this tip is important
21:10
important
21:10
important okay uh you can pass the FED message I
21:14
okay uh you can pass the FED message I
21:14
okay uh you can pass the FED message I want only the hmil without text okay and
21:19
want only the hmil without text okay and
21:19
want only the hmil without text okay and here I call the uh one of the functions
21:22
here I call the uh one of the functions
21:22
here I call the uh one of the functions of the op and
21:25
of the op and
21:25
of the op and completions and creates and we going to
21:27
completions and creates and we going to
21:28
completions and creates and we going to pass the
21:29
pass the
21:29
pass the message uh Ro we going to pass system
21:33
message uh Ro we going to pass system
21:33
message uh Ro we going to pass system the content the message that we receive
21:36
the content the message that we receive
21:36
the content the message that we receive as uh parameter uh as a string and the
21:40
as uh parameter uh as a string and the
21:40
as uh parameter uh as a string and the fit message okay I'm going to choose the
21:44
fit message okay I'm going to choose the
21:44
fit message okay I'm going to choose the llm the model GPT
21:47
llm the model GPT
21:47
llm the model GPT 3.5 and the tempter zero this tempter is
21:51
3.5 and the tempter zero this tempter is
21:51
3.5 and the tempter zero this tempter is a flag that we uh we can zero unto uh ch
21:59
a flag that we uh we can zero unto uh ch
21:59
a flag that we uh we can zero unto uh ch I think if I'm wrong uh and just to be
22:05
I think if I'm wrong uh and just to be
22:05
I think if I'm wrong uh and just to be I'm going to pass zero because I don't
22:07
I'm going to pass zero because I don't
22:07
I'm going to pass zero because I don't want the uh the model be uh creative on
22:13
want the uh the model be uh creative on
22:13
want the uh the model be uh creative on the response if we pass two the openi
22:18
the response if we pass two the openi
22:18
the response if we pass two the openi will be creative for example it's will
22:22
will be creative for example it's will
22:22
will be creative for example it's will complate with a lot of data and I I
22:26
complate with a lot of data and I I
22:26
complate with a lot of data and I I don't need this okay so I get the First
22:31
don't need this okay so I get the First
22:31
don't need this okay so I get the First Response okay so using all the
22:36
Response okay so using all the
22:36
Response okay so using all the components that we uh saw on here okay
22:43
components that we uh saw on here okay
22:43
components that we uh saw on here okay uh it's a lot of things because because
22:47
uh it's a lot of things because because
22:47
uh it's a lot of things because because um I created so I don't uh and one think
22:52
um I created so I don't uh and one think
22:52
um I created so I don't uh and one think I don't um
22:55
I don't um
22:55
I don't um using H any
22:59
using H any
22:59
using H any D manager as
23:01
D manager as
23:01
D manager as jotai
23:03
jotai
23:03
jotai Reco Z for example I'm just using the
23:07
Reco Z for example I'm just using the
23:07
Reco Z for example I'm just using the and and and even context API I'm just
23:11
and and and even context API I'm just
23:11
and and and even context API I'm just using the state the user stage of re and
23:16
using the state the user stage of re and
23:16
using the state the user stage of re and passing as prop reing okay so uh we
23:21
passing as prop reing okay so uh we
23:21
passing as prop reing okay so uh we don't have uh a complex stage manager
23:25
don't have uh a complex stage manager
23:25
don't have uh a complex stage manager okay so I'm going simple just use this
23:29
okay so I'm going simple just use this
23:29
okay so I'm going simple just use this components that we created
23:34
okay and that's it guys uh let's see the
23:38
okay and that's it guys uh let's see the
23:38
okay and that's it guys uh let's see the result the first result uh I'm click on
23:41
result the first result uh I'm click on
23:41
result the first result uh I'm click on the button I call I promise that I'm
23:44
the button I call I promise that I'm
23:44
the button I call I promise that I'm talking I call darker and after that I
23:47
talking I call darker and after that I
23:47
talking I call darker and after that I have talk light and you saw that darker
23:52
have talk light and you saw that darker
23:52
have talk light and you saw that darker will be dark and if I to light it will
23:57
will be dark and if I to light it will
23:57
will be dark and if I to light it will be light
23:59
be light
23:59
be light and if
24:00
and if
24:01
and if I uh talk stop listen we will be uh
24:06
I uh talk stop listen we will be uh
24:06
I uh talk stop listen we will be uh resed transcript
24:10
resed transcript
24:10
resed transcript okay so another
24:12
okay so another
24:12
okay so another example uh this is more cool generates
24:15
example uh this is more cool generates
24:15
example uh this is more cool generates an image
24:18
an image
24:18
an image HML of Rond
24:21
HML of Rond
24:21
HML of Rond cats uh of in and let's see the result
24:25
cats uh of in and let's see the result
24:25
cats uh of in and let's see the result and I call
24:26
and I call
24:26
and I call finish and
24:29
finish and
24:29
finish and oh we have the cat so this is uh I don't
24:35
oh we have the cat so this is uh I don't
24:35
oh we have the cat so this is uh I don't it's very cool I don't know if you like
24:37
it's very cool I don't know if you like
24:37
it's very cool I don't know if you like it but I love it this
24:41
it but I love it this
24:41
it but I love it this example uh let's see more examples uh
24:45
example uh let's see more examples uh
24:45
example uh let's see more examples uh here I'm changing the the select
24:48
here I'm changing the the select
24:48
here I'm changing the the select component and I'm talking generate HML
24:52
component and I'm talking generate HML
24:52
component and I'm talking generate HML button red with 20% of wi it and and 30
25:00
button red with 20% of wi it and and 30
25:00
button red with 20% of wi it and and 30 pixels of padding with text White and
25:03
pixels of padding with text White and
25:03
pixels of padding with text White and the content of text will be click here
25:07
the content of text will be click here
25:07
the content of text will be click here and I will talk
25:09
and I will talk
25:09
and I will talk finish and here we are we have this
25:12
finish and here we are we have this
25:12
finish and here we are we have this button J generated dynamically with the
25:16
button J generated dynamically with the
25:16
button J generated dynamically with the web synthesis processing and the using
25:21
web synthesis processing and the using
25:21
web synthesis processing and the using the web spech API and the integration
25:25
the web spech API and the integration
25:25
the web spech API and the integration with the open ey how amazing is that
25:29
with the open ey how amazing is that
25:29
with the open ey how amazing is that it's amazing all right so I love it
25:34
it's amazing all right so I love it
25:34
it's amazing all right so I love it another example and the last I think uh
25:37
another example and the last I think uh
25:37
another example and the last I think uh generate
25:40
generate
25:40
generate iil select with
25:43
iil select with
25:44
iil select with the options active and inactive probably
25:49
the options active and inactive probably
25:49
the options active and inactive probably yeah and I will call finish and let's
25:52
yeah and I will call finish and let's
25:52
yeah and I will call finish and let's see the result we generate a HML
25:56
see the result we generate a HML
25:56
see the result we generate a HML dynamically using
25:58
dynamically using
25:58
dynamically using the uh opion and the Sy processing of
26:04
the uh opion and the Sy processing of
26:04
the uh opion and the Sy processing of the we webp this is
26:09
amazing and uh that's it uh I think
26:14
amazing and uh that's it uh I think
26:14
amazing and uh that's it uh I think that's it I know that I talk a lot of
26:19
that's it I know that I talk a lot of
26:19
that's it I know that I talk a lot of stuff but oh my God that's add ad I need
26:25
stuff but oh my God that's add ad I need
26:25
stuff but oh my God that's add ad I need I'm kidding this I have the channel is
26:28
I'm kidding this I have the channel is
26:28
I'm kidding this I have the channel is in Portuguese I call I create videos I'm
26:34
in Portuguese I call I create videos I'm
26:34
in Portuguese I call I create videos I'm how I said I'm content creator you can
26:36
how I said I'm content creator you can
26:36
how I said I'm content creator you can see more content on YouTube you can find
26:39
see more content on YouTube you can find
26:39
see more content on YouTube you can find me uh searching by Kevin
26:42
me uh searching by Kevin
26:42
me uh searching by Kevin weara um my videos is are in Portuguese
26:48
weara um my videos is are in Portuguese
26:48
weara um my videos is are in Portuguese but you can use the captions to
26:50
but you can use the captions to
26:50
but you can use the captions to translate to English okay uh I created
26:55
translate to English okay uh I created
26:55
translate to English okay uh I created some course using uh if you we want to
26:59
some course using uh if you we want to
26:59
some course using uh if you we want to introduce re re querry and State
27:03
introduce re re querry and State
27:03
introduce re re querry and State Management as with the stand recall you
27:07
Management as with the stand recall you
27:07
Management as with the stand recall you Conta API and so on okay this is my
27:12
Conta API and so on okay this is my
27:12
Conta API and so on okay this is my contact uh if you don't uh want to copy
27:16
contact uh if you don't uh want to copy
27:16
contact uh if you don't uh want to copy these uh social medias I have this uh C
27:21
these uh social medias I have this uh C
27:21
these uh social medias I have this uh C code here you can scan and all my social
27:25
code here you can scan and all my social
27:26
code here you can scan and all my social medias will available to you on link Tre
27:29
medias will available to you on link Tre
27:29
medias will available to you on link Tre okay