December 12, 2024 • 36 mins
Ankit Sharma, an Angular GDE and author, joins us in this episode of Adventures in Angular to talk about using Azure cognitive services with Angular.
Links
Picks
Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.
Links
- https://azure.microsoft.com/en-in/services/cognitive-services
- https://tic-tac-toe-d9068.firebaseapp.com/
- https://bookcart.azurewebsites.net/
- https://azure.microsoft.com/en-in/services/cognitive-services
- How To Create A Multi-Language Translator Using Angular And Azure Cognitive Services
- https://azure.microsoft.com/en-in/services/cognitive-services/face/#demo
- https://ankitsharmablogs.com/
- https://www.c-sharpcorner.com/ebooks/build-a-full-stack-web-application-using-angular-and-firebase
Picks
- Brooks - Cover face AND nose
- Ankit - TEACH: share your knowledge
Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.
Mark as Played
Transcript
Episode Transcript
Available transcripts are automatically generated. Complete accuracy is not guaranteed.
Speaker 1 (00:06):
Hello, and how do you Welcome to another adventures in Angular.
My name is Alessa Nicel. I am the Angular Developer
Advocate for Kendo you I and today with me as
a Panla Summer show, I have Brooks Force with us.
Speaker 2 (00:19):
Hello, Hello, and we.
Speaker 1 (00:22):
Are super excited to introduce our guests today. It is
and Kit Sharma Welcome.
Speaker 3 (00:29):
Hello, Hello Alisha.
Speaker 1 (00:31):
So tell us tell us about yourself.
Speaker 3 (00:33):
Yeah, so my name is un Kit. I am currently
staying in Hedrabad, India and I'm currently working with ADP.
I have almost six years of experience in dott net
technologies and I'm currently working as a Fullish tech developer.
Where in the front and I'm using Angler, We're in
the back and I'm using dott Neet technologies and I
am a Google Developer expert and I am also a
(00:56):
community contributor. So I like to write articles and blogs
on various platforms and I also written books. One of
the book is on Blazer and another one is on
sea Shot and I also published a free ebook on
Angler and how to use Angler and Firebase to create
an blog application.
Speaker 1 (01:15):
Oh my goodness, So, like, how do you have time?
First off, let's hit that one because it sounds like
you do it all and I can't even conquer the
front end.
Speaker 3 (01:27):
So yes, so maybe front and in the morning, back
and in the evening.
Speaker 1 (01:35):
You're right and needs more time management. So today we
are I don't want to spoil it, but do you
want to tell the audience about what we are talking
about on the show today?
Speaker 3 (01:47):
Yes, So today we are going to talk about how
to make your Angler applications and smart. We are going
to introduce as your cognitive service to an Angler application
using an asp dot ne code back in so it
will be a fullish tech project. So you I will
be on Angler and the back and will be on
a sp dot net code and we will use we
(02:08):
will be integrating as your Cognitive services to h to
create an OC stands for Optical Character recognition. So the
what we will do that we will upload an image.
The image will have some text and using as your
community services, we will extract the text from the image.
Speaker 1 (02:24):
So I've never personally used as your cognitive services. What
are they?
Speaker 3 (02:29):
As? It provides a list of cognitive services such as
you can extract text from an image, you can translate
from one language to another language, you can translate your
speech to text. There there are a list of and
they are very wide range of community services provided by Azure.
So I'm using few of them. One of them in
(02:51):
Angler in my application.
Speaker 1 (02:53):
That sounds really awesome is so is it all free
to use? Is it like a subscription plan? How do
you get started with the Azure cognitive part?
Speaker 3 (03:03):
So Aszure itself has a paid plant, but for the
first one month, it's completely free. Where you got, if
I'm not wrong, almost three hundred dollars to play around
for first for one month and after that you can
transfer it to pay as you go or other the
other plants available. So yeah, and there are few services
(03:23):
which are free for twelve months, and all of the
list is avlable. I don't have the exact list with
me now, but most of the list is available on
the as your website.
Speaker 1 (03:31):
So what got you like? Started on this ocr app?
Speaker 3 (03:35):
So I was just playing around. See I've written a
lot of article on Angler where I created flesh Teck
application where I created some cloud operation. Then I created
and I was playing with Cloud, so I thought of
playing with cloud. So in Cloud, I first started with
fire Base because five ways was free, so I created
a few applications with fire Base. One is blogging application
(03:57):
and another is a multiplayer Tic Tac Toe game application.
Multi yeah, so this multiplayer tic tact game is super awesome.
The thing is that that the usp of that application
is that you can play with anyone in the world.
If I want to play with you, I will send
you a U r L. You play at your machine,
I play at my machine and we can play in
real time.
Speaker 1 (04:16):
Okay, I have to find your GitHub, broke quick.
Speaker 3 (04:19):
Yeah it is. It is in guitab. If it is,
it is a level, it's it's it's free.
Speaker 1 (04:23):
It's free.
Speaker 3 (04:24):
Okay. But I was talking so after after fire Base,
after fire Base, I thought of doing something to play
play around something. So what I got into is that
when I and I joined a new company called a
DP in last year August, and there I got it
as a subscription. So let's say, I said, okay, let's
(04:44):
play play with it. Why why to waste it? So
I was playing around something something, and then I came
up with this few few applications. One of them is
a multi language translator, which is similar to a Google translate.
So there you have to create you have put your
input language and it will translate in almost twenty six languages,
so that is an translator. So after a translator translator,
(05:08):
I came across I was going to a documentation and
saw it that the ocr API from Zocognitive Services. I
really liked it, so I created this application. OHR stands
for Optical Character Recognition.
Speaker 1 (05:20):
Oh my goodness. So do we want to tell us
what you would like to walk through? First? You want
to walk through using the application and what that looks like?
Or do you want to walk through creating it and
the pieces? Or you you tell me where where shall
we go?
Speaker 3 (05:35):
Maybe we can start with how to create it? So
I have a I have written one blog post also
which is published on my website as well as as
well as it is published on free code Camp.
Speaker 2 (05:47):
So we're going.
Speaker 3 (05:48):
To have that.
Speaker 1 (05:49):
Gethub link and the blog post and all your info
linked in the show notes. Check it out if you're
not driving.
Speaker 3 (05:56):
Yeah. So yeah, the GitHub and in the article I
I have clearly stared the by step process of how
to create this application. But let me give you an
overview of how to create this. So the first is
there are two prerecredits, two separate prerecresiits. So one is
for Angler, So if you are new to Angler, if
you're not Angler developer and you're new to Angler, then
(06:18):
you have to do all the precrecruise for Angler. One
of them is Angler Cli no JS. Only two prerecrus
for to to software you have to install, and then
another one is since we are using asp dott code
back end, so we have to finish the prerecreuse for
dot net code also, So for that we need dot
net core as DK three dot one which is the
(06:40):
latest one, and we have to install Visa Studo twenty nineteen.
Speaker 1 (06:44):
I really want to say I recently I've been like
JavaScript all the way, and I've done a little bit
of like Ruby and rails, but mostly it's like, hey,
I'm like sticking to the front end. So I recently
had a core at work who works with dot net
and he was like, hey, let's spin up this app
together on my machine. And I was like okay. And
(07:07):
it wasn't as like I've I've downloaded, I've cloned down
and like got started with NOE projects that were harder
to get set up. So it's really not that difficult
to get started with dot net. And so if you
haven't and you want to try it. Just really it's
not that scary, so anyway.
Speaker 3 (07:22):
Yes, yes, it's it's very scary forward. It's simple. You
just need to install with your story nineteen and the community.
A DESA is completely free for the lifetime you will
won't we charge any a single penny for that. We
just to renting and dot net code as dot net
code is also an open source so you can diet
click it up dot net code d also, So after
this installation is done, the third thing you required isn't
(07:44):
as a subscription account. So if you don't have an
Azo subscription account, you can create a free as a
subscription account for one month and you may need a
credit card for that and you won't we charged anything
until you use that. But for first one month it's
completely free. After it will be paid service. So after
this prequidy is done, you have to create a Angler
(08:06):
and SP dot net code project. So there is that
there are few templates provided by Video Studio in dot
net where they have already created a template application where
all all the setup is done, where we have a
back end of SP dot net co on the front
end of Angler. So you have to create a template
application and then you can.
Speaker 2 (08:25):
You have to.
Speaker 3 (08:26):
You can get started with the dot net code. The
first step that we can do is to create a
dot net code service which will call our as your
A p I. So for that, the first step is
to we have to go to Azure and then we
have to create the cognitive service. So there there is
something called az your portal there you have to go.
So if you sign if you signed to as you
(08:47):
you can go to portal Lotz dot com and there
you have to create the cognitive service. So the steps
are pretty simple and it is the steps are clearly
mentioned the applications in the article. Also there you have
to create something called computer vision. So computer vision is
the name of our cognitive service that we have to create,
and it's very simple. It's a form where you have
(09:10):
to keep the name and location and some pricing tie
and those basic details you have to furnish and will
be created and then you will get a key, subscription
key and the end point you are So the subscription
key and the end point you are l will be
unique for your own cognitive service and you have to
use this to access your cognitive service from your dot
(09:31):
code application. That is how the whole communication from your
code to and as your cloud is going to work.
So this is where the key and the endpoint you
all comes into effect. So once your key is done generated,
your endpoint you are generated. Now the things are pretty
much a straightforward. So what you have to do is
(09:51):
you have to write a service and in the service
you have to make an actually bit call and you
have to send your image data in form of bites
to your as a cloud where that's to be called,
and then you will get the return and all the
work is done by your cognitive service. They will return
you all the text from that image in form of
(10:12):
a Jason. Now you got the Jason. Now it's up
to you how you are to want to manipulate it.
So in my case, I have done some manipulation. The
reason for that is they will send Jason in a
in a word format, so like they will send each
word wise and they will send a lot of information
like what is the coordinate of that word, if the
word is a state or not it is rotated by
(10:34):
some degrees. Is a lot of information. They said, I
don't mind all the information. The requirement from my app
is that if there's a text written over the image,
I want to print that text on the simple textbox.
And also the text is written in form of line,
but the object is written Jason is returned where they
have separated word wise. So I did some small manipulation
(10:57):
where I am joining all the words to create a
line by separation. So there's a small manipulation where I
use a string builder to uh look through that Jason
and fetch the ward and they create the sentence. And
once you've got the sentence, you will also get the language.
So the ocr A P I support I think twenty
(11:18):
six languages. I am not sure about the exact count,
but around twenty five to twenty six languages. So you
can send, you can send upload the image in any
of these twenty six languages and they will give you
the result for that.
Speaker 1 (11:32):
I'm just amazing. I'm watching the gifts on the bottom
of your blog poster.
Speaker 3 (11:38):
And it's amazing, like, yes, yes, that that gives. Yeah,
so that gif is there. And so once once you
create that application, was the application is uh? You know? Well, yeah,
you got the you've got the Jason, and you've got
the language also. So now the question is now there
(12:00):
is a very interesting thing. So I will tell you
what is the According to me, this is the best
part of my article. So the language which they returned
is in the form of code, for example Ian for English,
fr for French, and something like that. But if I
have to show to the user, I cannot show Ian
or FR. That is not user friendly. You don't understand that.
(12:22):
So I need to show full language English, French. So
now there are two options. Either create There is a
documentation on Microsoft website where you can see the list
of all the languages which is supported by ocr API.
So you have to create the You have to create
a dictionary or a lookup table manually where you will
(12:42):
map every language with their key. But that is not
what programmers do. If I have to do work manually,
I cannot be a programmer, right, So I have to
do some modernization. So what I did is so I
did a kind of hack. So there is another cognitive
service that is called translate text. So as the name suggests,
it translates texts from one language to another language. So
(13:05):
Microsoft has created a public API where they expose the
list of all the languages which is supported by translate
Text API, and the list of languages which is supported
by ocr API is a subset of list of language
supported by Translate Text API. So I make a call
to Translate Text API endpoint. I get all the lists,
(13:27):
populate it in a dictionary, and my work is done.
I set all my manual work and now everything is automation.
So if you see in the article, I have clearly
mentioned if you go, there's a section called why do
we need to fetch the list of supported language? There's
a sandy Yeah, there are small paragraphs. So there I
have mentioned clearly that why I am calling because people
(13:49):
will get confused that if you're working with an ocr API,
why you are calling a Translate text api end point.
So this is the reason. I just need to fetch
the list of language and make it more user friendly application.
So from this I am creating a look up table
basically a dictionary. And when I am getting a language
code like Ian I am getting, I am displaying the
value as English on the UI. If I'm getting far
(14:11):
for French, I am displaying the name is French on
the UI. So this makes my language more user friendly.
So I also like to add one more thing. So
on this particular thing only I spent almost two days
because I want I thought that let's show the code only.
But then I thought that code want to be more
(14:32):
user friendly, so make it something more user friendly so
that people can relate to it. So that is why
I created this particular hack.
Speaker 1 (14:41):
I love it. Is it a hack to.
Speaker 3 (14:43):
Be it's not a hack, but it's something different than
the normal workflow.
Speaker 1 (14:53):
Yeah.
Speaker 3 (14:54):
And and and in the client side, if you see,
it's a uh plain simple UI for angler. So I
have a service. I am calling the endpoint and the
thing is that I am uploading the IMAH. So there
is a uh there's an option to upload the image
and then show an image preview. So if you see
to show the image preview, calling and I am uploading
(15:17):
the IMAH and I am showing the max file size
of four m b. Yeah, so there is a limitation. Also,
I forget to mention that there is a limitation of
O c R A p I that the maximum file
size can be four mbs only. So I don't know
what is logic for this limitation, but trently, this is
a limitation. So that's why I have put the maximum
five sizes four mbs. And then once the image uploaded,
(15:41):
I will get that uploaded image and in a form
of byte, and I am sending viable call to my
back end, and then the back end is sending me
a string data the text and which I'm displaying on
the UI. So this is how my application is working
end to end. And I'm using bootsteff for some styling.
And that's how you get to the end of the
(16:02):
article where you can see that of some gift which
you are a fan of.
Speaker 1 (16:05):
Now, oh my goodness, I am. I'm actually looking through
your GitHub codes right now. I'm trying to find the
point that you're calling the the vision service or the
to find a list of languages language support for computing.
Speaker 3 (16:23):
Yeah, so I will tell you you have to go
to ocr controller inside the controllers folder, and the and
the last method is get available languages method.
Speaker 1 (16:34):
So how long did you said that? The the UCR
portion where you're translating basically from like fr to French
took you two days? How long did the whole thing
take to accomplish?
Speaker 3 (16:46):
So the whole application, see the multiple parts, So the
whole application, I will say along five days for five days,
I'm not sure the days. Yeah, but yeah, working part time,
not completely.
Speaker 1 (16:58):
You're like, I didn't pay basically is what you're saying
to me.
Speaker 3 (17:03):
Yeah, no, no, it's a working part time. Basically it
means like two three hours a day. So I will
say fifteen to twenty hours to create everything and two
days especially for that translation from to create that look
up dictionary, because I have to think of a logic
that what should I do in that case at one
point of at one point I thought to create everything manually,
(17:26):
and I think that there is no program between me
and an a lazy person like we should be. We
are developed. We should do some smart solution. We should
give some smart solution. So that's why I come up
with that particle logic. So that's how this method come
into existence. So one more thing I would like to add.
So here you can see I have created a few
(17:46):
models also, so these models will allow me to bind
to my Jason data addictally. So the OCA API is
returning data in a format of adjacent and then when
I decalize the Jason using our in our code dot
net code, then I need a class or a model
to bind it to directly. So that is why I
have created a few models to store the values. So
(18:09):
that is coming from the JON. So here you can
see we have a language model will give the name
of the language, the native name. That directly that there
are few things are there which are coming from the
Jason And maybe at the end I can I can
share few relevant details where you can find the JSON
structure and maybe the AZ your cognitive service socioor API
(18:32):
official documentation where you can see that structure and step
by step will be more helpful.
Speaker 1 (18:37):
Yes, I haven't even touched the dot net side. I'm scared,
like walking through your angular code, I'm like, oh no,
well it's on the back. So what walking through? What
everything that like the dot net is handling, it's obviously handling.
Speaker 3 (18:51):
Yes, yeah, you can say the heavy lifting is done
by the dot net and angler is just for just
to show, like you can suggest for UI, just for
make the app beautiful look and feel. Yeah.
Speaker 4 (19:05):
Are you doing any sort of authorization with that net
or anything like that or is this just the father No, so.
Speaker 3 (19:12):
There is so. Initially I told that when you when
you create the API, you will get a key, a
PI subscription and the end points for this subscription key
is the my authoriation. So that's that should be kept
hidden or it should be used privately.
Speaker 2 (19:27):
Yeah, it's a it's a really cool app.
Speaker 3 (19:29):
Thanks you.
Speaker 4 (19:29):
It's always annoying to have to deal with paper anyways,
So you know, just you can whip one of these
up pretty quick.
Speaker 2 (19:35):
It's awesome.
Speaker 3 (19:36):
Yeah so yeah, so yeah. So adding on the same note,
so now as you have two different kinds of APIs.
One is for optical Character Reader, which I am using,
which recognizes only the printed text. It will not recognize
the handwritten text. Now there is another ap I called
read API, which is beneficial for large document or handwritten text.
(19:58):
Let's say you have multi pages which you want took
a handleton page and which you want to convert to
a word. Then you can use a red PA, which
is a separate APA from this, and which which works
very good with the handleton text.
Speaker 1 (20:09):
I mean, like I'm thinking maybe not my handwriting, like
someone who can actually write.
Speaker 2 (20:18):
You can train the models, you know.
Speaker 1 (20:21):
Oh yeah, oh man, it's rough. Bob my husband who's
known me for like ten years, he still like struggles
because it changes daily.
Speaker 3 (20:31):
So yeah, dynamic handwriting, Oh my goodness. So that was
for the application. I really enjoyed this creating this because
it was a lot of tricks and a lot of
things we have to do. It was a great experience
for me. And then I write this article. I said,
(20:52):
let's say have this knowledge with everyone write this article.
Speaker 1 (20:56):
I'm just amazed because I I'm on your get up
looking at all your applications. Do you just get a
hanker in You're like, hey, I want to like blogging
app with Angular, cloud fire Store. Yes, you're just like, hey.
Speaker 3 (21:11):
So say this blogging So this blogging app with Angler
and fire Store has a long story attached to it.
So yeah, so the story is that this is this
application is my playground. Playground means if I want to
you want to learn something in Angler, I use this application.
(21:32):
And there is another application if you see have you
seen the bookcart? Yeah, so for bookcart, I have pinged
you in the chat. Also you can look at that.
So book cut is a kind of complete page complete,
what you say, shopping cut application. So there is a
(21:52):
online e cart here in India called flip card, So
I just I just stole the name from there. I
put a book cut. So this is a bookshop as
you can see it. And it's the pretty basic application.
I'm using Angle, matarials, dot net Core, but complete into
an application and it has authoriation, authentication, and there are
a lot of other things also, so you can place
(22:14):
the order, you can upload the images, you can see
the preview of images, logging a registation, and we have
temperativen form reactive forms. So whatever. I so these two
applications blogging application, book cut application is my playground. If
I have to learn something, I put it here.
Speaker 1 (22:32):
So here so like keeps evolving and growing as you do.
Speaker 3 (22:36):
Yes, exactly, yeah, exactly, So right now in a book cut,
I'm planning to implement NGRX because I'm learning NGRX since
last few days, few months basically, so I want to
implement JRX over there so it might grow.
Speaker 1 (22:49):
So what's the do you plan on having like a
split of like this version within GRX, this version without
or you just this is.
Speaker 3 (22:59):
Just upgrade upgrade. It's a demo application, it's and it's
already on GitHub freely available, so if anybody wants to
show the previous version, they can already go to previous
commits and see that.
Speaker 1 (23:10):
I can't wait. I'm totally I'm going to start following
you and people.
Speaker 3 (23:13):
Now that's awesome, man, that that would be very awesome.
Speaker 1 (23:19):
So before we get too much top topic. I think
you said you had a couple of things you wanted
to mention or did you already touch on them for
back to the original application with OCR So if you
go to.
Speaker 3 (23:30):
The original application, I think I have covered most of
the part and I would have shown it demo, but
I think I cannot. Yeah, yeah, so that I would,
and unfortunately I have not deployed it anywhere. Otherwise people
could have played around. But there's some issue with the
deployment in my as your application since the company provided
(23:50):
and my company provider, so there's some limitation over there,
so I could not be able to deploy it. But
if you follow the steps message the application, or even
if you just create a PI key and the endpoint
clone my repository, put your key and run to run.
So yeah, yeah, yeah, it's a guarantee you will not
face any issue. It's a guarantee.
Speaker 1 (24:13):
That is some big talking here.
Speaker 2 (24:17):
Yes, yes, it's you will not have an issue.
Speaker 1 (24:20):
I love that so much.
Speaker 3 (24:21):
Yes you will. It's a guarantee I am taking. If
you have an issue, you can post public on your
tutor that your your app is wrong. It's a guarantee
basically on your.
Speaker 2 (24:34):
End so.
Speaker 3 (24:39):
This is try and tested. So and I would say
that as your cognitive service is awesome, so you will
you will see some difference from your normal app. So
I have written a lot of articles, if you see,
I am writing for almost last three years and I
have written a lot of articles, more than fifty five
to sixty articles. I have written do a lot of
(25:00):
different kinds of applications. But this using cognitive service is
something different because it makes your app smart. You app
become a smart like and it looks cool. So that that, yeah,
it looks cool that you are doing something. You're doing
something great. The other applications also, I am not saying
bad about other applications like if I'm written about forms
(25:21):
and then data uploading, creud operations and gr X, they're
all great. But this is something different.
Speaker 1 (25:27):
No, it is, and I I love it that you
were just like, hey, they offered this a p I
I need to use it, yes, And and they are.
Speaker 3 (25:35):
There are a lot of different APIs, like so they
have something called language APIs and they have Q and
a maker. So in the ASU there's something called Q
and a maker. So there you can set up Q
and A for your website or something like that. Then
text analytics analytics. So in the text analytics you can
(25:57):
analyze the text what are the text for the keywords
and entities and all. And then you have in the
in the vision uh in the face recognition. The face
recognition is one of the very great API where you
can upload an image and it will recognize the face
the location of the face, and then you can it
will show a box around that it will look like
(26:18):
a sci fi movie, so that that looks awesome. Yeah.
So and then you have vision a p I form recognizer,
so you you can upload a form. You can extract
text from the form. So those a lot of API
is provided. So I will provide a list, I will
provide the link, can put in the notes and people
(26:38):
can go through it and see that there is an
extensive document provided by Microsoft and and and and the
best part about this is this is all going on
back end. So all the a p I you you
so that I would say that three te architecture one
is on the cloud where which do all the heavy lifting.
You create the a p I get the key and
(26:59):
then you have a middlewere part of the thing. So
where like services in my case it is ESP dot
net code and the UI. You can use anything. Your
free to use any UI. So I am using Angler
and Blazer. So I have few applications on Blazer also
and Angler also, so I am working Palel on both
of them. You can use other also, you can use Plain,
Javaz view, you can use React, whatever you want to use.
Speaker 1 (27:21):
So I saw, I saw you wrote a book on Blazer.
Speaker 3 (27:24):
Yeah, and the funny part is that is the first
ever book in the world on Blazer.
Speaker 1 (27:29):
Oh my, well it didn't like just drop like officially.
Speaker 3 (27:33):
It was dropped officially, but when I wrote the book,
it was still in preview.
Speaker 1 (27:38):
Nice. That's awesome.
Speaker 3 (27:42):
What is that? Yes?
Speaker 1 (27:44):
On Amazon?
Speaker 3 (27:45):
What is that on? Yeah, it's on Amazon, so yeah.
Speaker 1 (27:49):
The front door of course it's on Amazon.
Speaker 3 (27:52):
Yeah. And recently I have published another book on sha
where I have co authored with Raphael and Marius were
also Microsoft MVPs. So this is published recent seat. It
was a complete Sea Sharp guide from beginners to advanced level.
Speaker 1 (28:07):
That is awesome. I actually have a friend and coworker
who is an advocate for Blazer here at kend of U.
I might have took you two up because that's.
Speaker 3 (28:15):
Yeah, yeah, yeah, sure, sure, Actually I am more into
the UI. That's why I pick Blazer easily and so earlier.
I used to work as a dot net developer almost
when I started my career. The dot net developed almost
six years back. And Blazer uses sea sharp as a language,
so it was natural to me. And then I moved
(28:36):
to Angler because the demand in the market. It's simple. Yeah,
Blazer is still in a development phase, so that is fine.
We had let's not go discuss what the Blazer. But
Angler is awesome. Yeah, so I Angler gives me food.
That's why it's awesome.
Speaker 1 (28:53):
How long ago did you start using Angular?
Speaker 3 (28:55):
Almost three years? Little less than three years? Yeah, I
started from Angler four.
Speaker 1 (29:00):
Okay, oh that's nice. You didn't have the one that
to swap. Well, this has been such a fun show
and I really am amazed. If you write a book next,
could it please be about how I do so much
with my life and how you can stop wasting yours
(29:20):
like that? I think it's the title needs work, but
I think.
Speaker 2 (29:27):
Yeah, but no, is there.
Speaker 1 (29:31):
Anything outside of ocr app that you want to talk
about before we get to.
Speaker 3 (29:36):
Picks outside the If you if you look into the
same cognitive services, I have created a translate text cognitive
service also, so there's another So there's another link I
can share you. I am not sure if it is
published on a free code camp, but it is published
on my website or not my website in the medium
in the front medium you know Ango in the website.
(30:00):
Angler in Depth is there on medium, right, So yeah,
there is a publication medium that is called Angler in Depth.
So I have created a I have written an article
or that how to create a multi language translator using
Angler and as your cognitive service. So it's a it's
similar to Google Translate. And if if you I have
(30:20):
bring you the link in the chat, if you open
and again go to bottom, you can see that awesome
gift and there so so there you can see that
you can write. You can translate from any language language
I think almost twenty five twenty six language, sixty language
ORRY sixty languages supported by translated API, so you can
translate from sixty languages to and fro to and fro
(30:43):
from sixty languages. So again, the architecture and the structure
of this app is same to that of ocr app.
Everything is same. I created an API, rite the middle
layer and then put a UI to make the app
beautiful and I'm passing. I'm calling the API through service calls.
These are too, which I have explored till now. I'm
planning to explore the Fierce API next because that looks
(31:06):
cool to me.
Speaker 4 (31:06):
Yeah, I saw the face can detect emotion, which is
kind of cool. Yeah, like if you're angry, yeah, anger, contempt,
discuss fear, happiness, neutral sadness, and surprise.
Speaker 2 (31:21):
I don't think gives you like a rating on each one.
Speaker 1 (31:23):
Because I know humans who can't detect those.
Speaker 2 (31:26):
I was going to say contempt and anger. That's like
legs similar. I think I could use that day today.
I mean, I know both are probably someone's. Yeah.
Speaker 4 (31:39):
Anyways, so that's cool. That's definitely a it'd be fun
to play around with for sure.
Speaker 3 (31:44):
As though as awesome, like if you play on the
quality service it is, it is great.
Speaker 1 (31:49):
I'm making sure these links make it in the show.
Speaker 2 (31:52):
I got the face one awesome.
Speaker 1 (31:55):
Perfect. Well, thank you so much for coming on the
show today. And again, what is your Twitter handles slash
GitHub so people can find your user name and follow you.
Speaker 3 (32:08):
Okay, so my Twitter handle is Ankie Shearma under scot
zero zeo seven and my GitHub is unki sarma hyphen
zu seven. So the reason Twitter does not contain hyphen
is because it doesn't allow highun so.
Speaker 1 (32:25):
Worse, you have like a user name and then it's
like nope, yes.
Speaker 3 (32:33):
Yeah so this this is? Uh, this is. And also
I have a blog, personal blog Nki Shelma blogs dot com.
So there I write continuously, and there is a free
ebook I have published, so I can I can share
you the link. Also, I will just mention a brief
description about the app. So you just talked about that
blogging application, right, So I have written a free ebook.
(32:56):
It's almost hundred pages where I have explained how to
create this blogging application using Angler and firebas from scratch.
So this book is just a by step guide where
you can learn how to use Firebase with an Angler application.
Speaker 1 (33:10):
Oh I love that you said your GD Are you
both fire based and Angular? No?
Speaker 3 (33:15):
Only Angler?
Speaker 1 (33:16):
Okay, I mean we can fix that. We need to
talk to the fire Based team because you've got like,
I don't know, twenty demos using Firebase.
Speaker 3 (33:26):
Yeah, I would love that.
Speaker 1 (33:30):
So okay, I think we are ready for picks, although
I'm pickless today. So Brooks, hopefully you can pick up
Jeez where I am totally dropping said ball. I was.
Speaker 4 (33:44):
I'm kind of pickless, but I just wanted to stand
on my soapbox for a second and say, if you're
wearing a mask, cover your nose and your mouth, because
if you don't cover your nose, one, you look weird
as all get out, Like your nose looks like ten
times and two, it's not really doing anything. Last week's
(34:05):
pick for me was wearing crocs with socks, So like
me saying, you look weird.
Speaker 2 (34:12):
Your nose sticking out, that's something.
Speaker 1 (34:15):
Yeah, it gets me when I'm like driving and I
see like other people driving alone wearing masks.
Speaker 2 (34:23):
That's weird too, That's weird. That's creepy. Guys. You can
breathe now, this is you're in the car, right.
Speaker 1 (34:30):
I'm like, maybe they're just so comfortable they just don't
want to take it off. I don't know. I just
think it's bizarre.
Speaker 2 (34:41):
That's my pick, covering your face and nose with a mask.
Speaker 3 (34:46):
Yeah, do you use what is what the mosk is for?
Speaker 1 (34:49):
I know? Okay, so yes, do you have any picks?
They don't have to be techrelated, they can be.
Speaker 3 (35:01):
I have something which I talked a lot often about
and I I uh ask a lot of people also
like you guys are also community contributor and not only
you everyone. So what I say is that teach. That's it.
So how you can teach. So let's say you know something,
it doesn't matter what you know. You know something, you
(35:22):
teach to your junior. So if you are a developer,
teach your junior about development. If you're a tester, you
teach your test testing. You know your testing. If you
are marketing guy, if you're a salesperson, whatever, you not
teach your juniors. The reason for I'm the reason I
am saying this is that you can learn more from
your peers than from your schoolar colleges. And this is
(35:43):
not only in this is mostly in my country, but
I think this holds too everywhere in the world. So
I just want to say to everyone, just teach, splait
the knowledge. But that is one of my motive behind
doing all this community work. So like, spread the knowledge,
whatever you know, whatever you know, just teacher, that is
what I'm saying. Teach.
Speaker 1 (36:00):
That's beautiful. I love it.
Speaker 2 (36:02):
That's great.
Speaker 1 (36:03):
Thank you, Thank you so much for coming on this
show today. You were a absolute wonderful guest.
Speaker 3 (36:11):
Thank you, thank you. I would love to thank you
guys also for inviting me. And this was a great session.
I like talking to Like I talked through an article
without sharing anything, without showing anything.
Speaker 1 (36:23):
I know, it's very weird. It's hard sometimes because people
are like and I show this code, and I'm like,
well could but no one would see it. So it's
always really interesting to see people teach through code concepts
or angular you know, without visuals. So oh awesome. Well,
(36:44):
thank you so much. Everyone has a marvelous day and
we'll see you on the next one.
Speaker 3 (36:48):
Yeah, thank you, thank you, thank you. Luke By
Hello, and how do you Welcome to another adventures in Angular.
My name is Alessa Nicel. I am the Angular Developer
Advocate for Kendo you I and today with me as
a Panla Summer show, I have Brooks Force with us.
Speaker 2 (00:19):
Hello, Hello, and we.
Speaker 1 (00:22):
Are super excited to introduce our guests today. It is
and Kit Sharma Welcome.
Speaker 3 (00:29):
Hello, Hello Alisha.
Speaker 1 (00:31):
So tell us tell us about yourself.
Speaker 3 (00:33):
Yeah, so my name is un Kit. I am currently
staying in Hedrabad, India and I'm currently working with ADP.
I have almost six years of experience in dott net
technologies and I'm currently working as a Fullish tech developer.
Where in the front and I'm using Angler, We're in
the back and I'm using dott Neet technologies and I
am a Google Developer expert and I am also a
(00:56):
community contributor. So I like to write articles and blogs
on various platforms and I also written books. One of
the book is on Blazer and another one is on
sea Shot and I also published a free ebook on
Angler and how to use Angler and Firebase to create
an blog application.
Speaker 1 (01:15):
Oh my goodness, So, like, how do you have time?
First off, let's hit that one because it sounds like
you do it all and I can't even conquer the
front end.
Speaker 3 (01:27):
So yes, so maybe front and in the morning, back
and in the evening.
Speaker 1 (01:35):
You're right and needs more time management. So today we
are I don't want to spoil it, but do you
want to tell the audience about what we are talking
about on the show today?
Speaker 3 (01:47):
Yes, So today we are going to talk about how
to make your Angler applications and smart. We are going
to introduce as your cognitive service to an Angler application
using an asp dot ne code back in so it
will be a fullish tech project. So you I will
be on Angler and the back and will be on
a sp dot net code and we will use we
(02:08):
will be integrating as your Cognitive services to h to
create an OC stands for Optical Character recognition. So the
what we will do that we will upload an image.
The image will have some text and using as your
community services, we will extract the text from the image.
Speaker 1 (02:24):
So I've never personally used as your cognitive services. What
are they?
Speaker 3 (02:29):
As? It provides a list of cognitive services such as
you can extract text from an image, you can translate
from one language to another language, you can translate your
speech to text. There there are a list of and
they are very wide range of community services provided by Azure.
So I'm using few of them. One of them in
(02:51):
Angler in my application.
Speaker 1 (02:53):
That sounds really awesome is so is it all free
to use? Is it like a subscription plan? How do
you get started with the Azure cognitive part?
Speaker 3 (03:03):
So Aszure itself has a paid plant, but for the
first one month, it's completely free. Where you got, if
I'm not wrong, almost three hundred dollars to play around
for first for one month and after that you can
transfer it to pay as you go or other the
other plants available. So yeah, and there are few services
(03:23):
which are free for twelve months, and all of the
list is avlable. I don't have the exact list with
me now, but most of the list is available on
the as your website.
Speaker 1 (03:31):
So what got you like? Started on this ocr app?
Speaker 3 (03:35):
So I was just playing around. See I've written a
lot of article on Angler where I created flesh Teck
application where I created some cloud operation. Then I created
and I was playing with Cloud, so I thought of
playing with cloud. So in Cloud, I first started with
fire Base because five ways was free, so I created
a few applications with fire Base. One is blogging application
(03:57):
and another is a multiplayer Tic Tac Toe game application.
Multi yeah, so this multiplayer tic tact game is super awesome.
The thing is that that the usp of that application
is that you can play with anyone in the world.
If I want to play with you, I will send
you a U r L. You play at your machine,
I play at my machine and we can play in
real time.
Speaker 1 (04:16):
Okay, I have to find your GitHub, broke quick.
Speaker 3 (04:19):
Yeah it is. It is in guitab. If it is,
it is a level, it's it's it's free.
Speaker 1 (04:23):
It's free.
Speaker 3 (04:24):
Okay. But I was talking so after after fire Base,
after fire Base, I thought of doing something to play
play around something. So what I got into is that
when I and I joined a new company called a
DP in last year August, and there I got it
as a subscription. So let's say, I said, okay, let's
(04:44):
play play with it. Why why to waste it? So
I was playing around something something, and then I came
up with this few few applications. One of them is
a multi language translator, which is similar to a Google translate.
So there you have to create you have put your
input language and it will translate in almost twenty six languages,
so that is an translator. So after a translator translator,
(05:08):
I came across I was going to a documentation and
saw it that the ocr API from Zocognitive Services. I
really liked it, so I created this application. OHR stands
for Optical Character Recognition.
Speaker 1 (05:20):
Oh my goodness. So do we want to tell us
what you would like to walk through? First? You want
to walk through using the application and what that looks like?
Or do you want to walk through creating it and
the pieces? Or you you tell me where where shall
we go?
Speaker 3 (05:35):
Maybe we can start with how to create it? So
I have a I have written one blog post also
which is published on my website as well as as
well as it is published on free code Camp.
Speaker 2 (05:47):
So we're going.
Speaker 3 (05:48):
To have that.
Speaker 1 (05:49):
Gethub link and the blog post and all your info
linked in the show notes. Check it out if you're
not driving.
Speaker 3 (05:56):
Yeah. So yeah, the GitHub and in the article I
I have clearly stared the by step process of how
to create this application. But let me give you an
overview of how to create this. So the first is
there are two prerecredits, two separate prerecresiits. So one is
for Angler, So if you are new to Angler, if
you're not Angler developer and you're new to Angler, then
(06:18):
you have to do all the precrecruise for Angler. One
of them is Angler Cli no JS. Only two prerecrus
for to to software you have to install, and then
another one is since we are using asp dott code
back end, so we have to finish the prerecreuse for
dot net code also, So for that we need dot
net core as DK three dot one which is the
(06:40):
latest one, and we have to install Visa Studo twenty nineteen.
Speaker 1 (06:44):
I really want to say I recently I've been like
JavaScript all the way, and I've done a little bit
of like Ruby and rails, but mostly it's like, hey,
I'm like sticking to the front end. So I recently
had a core at work who works with dot net
and he was like, hey, let's spin up this app
together on my machine. And I was like okay. And
(07:07):
it wasn't as like I've I've downloaded, I've cloned down
and like got started with NOE projects that were harder
to get set up. So it's really not that difficult
to get started with dot net. And so if you
haven't and you want to try it. Just really it's
not that scary, so anyway.
Speaker 3 (07:22):
Yes, yes, it's it's very scary forward. It's simple. You
just need to install with your story nineteen and the community.
A DESA is completely free for the lifetime you will
won't we charge any a single penny for that. We
just to renting and dot net code as dot net
code is also an open source so you can diet
click it up dot net code d also, So after
this installation is done, the third thing you required isn't
(07:44):
as a subscription account. So if you don't have an
Azo subscription account, you can create a free as a
subscription account for one month and you may need a
credit card for that and you won't we charged anything
until you use that. But for first one month it's
completely free. After it will be paid service. So after
this prequidy is done, you have to create a Angler
(08:06):
and SP dot net code project. So there is that
there are few templates provided by Video Studio in dot
net where they have already created a template application where
all all the setup is done, where we have a
back end of SP dot net co on the front
end of Angler. So you have to create a template
application and then you can.
Speaker 2 (08:25):
You have to.
Speaker 3 (08:26):
You can get started with the dot net code. The
first step that we can do is to create a
dot net code service which will call our as your
A p I. So for that, the first step is
to we have to go to Azure and then we
have to create the cognitive service. So there there is
something called az your portal there you have to go.
So if you sign if you signed to as you
(08:47):
you can go to portal Lotz dot com and there
you have to create the cognitive service. So the steps
are pretty simple and it is the steps are clearly
mentioned the applications in the article. Also there you have
to create something called computer vision. So computer vision is
the name of our cognitive service that we have to create,
and it's very simple. It's a form where you have
(09:10):
to keep the name and location and some pricing tie
and those basic details you have to furnish and will
be created and then you will get a key, subscription
key and the end point you are So the subscription
key and the end point you are l will be
unique for your own cognitive service and you have to
use this to access your cognitive service from your dot
(09:31):
code application. That is how the whole communication from your
code to and as your cloud is going to work.
So this is where the key and the endpoint you
all comes into effect. So once your key is done generated,
your endpoint you are generated. Now the things are pretty
much a straightforward. So what you have to do is
(09:51):
you have to write a service and in the service
you have to make an actually bit call and you
have to send your image data in form of bites
to your as a cloud where that's to be called,
and then you will get the return and all the
work is done by your cognitive service. They will return
you all the text from that image in form of
(10:12):
a Jason. Now you got the Jason. Now it's up
to you how you are to want to manipulate it.
So in my case, I have done some manipulation. The
reason for that is they will send Jason in a
in a word format, so like they will send each
word wise and they will send a lot of information
like what is the coordinate of that word, if the
word is a state or not it is rotated by
(10:34):
some degrees. Is a lot of information. They said, I
don't mind all the information. The requirement from my app
is that if there's a text written over the image,
I want to print that text on the simple textbox.
And also the text is written in form of line,
but the object is written Jason is returned where they
have separated word wise. So I did some small manipulation
(10:57):
where I am joining all the words to create a
line by separation. So there's a small manipulation where I
use a string builder to uh look through that Jason
and fetch the ward and they create the sentence. And
once you've got the sentence, you will also get the language.
So the ocr A P I support I think twenty
(11:18):
six languages. I am not sure about the exact count,
but around twenty five to twenty six languages. So you
can send, you can send upload the image in any
of these twenty six languages and they will give you
the result for that.
Speaker 1 (11:32):
I'm just amazing. I'm watching the gifts on the bottom
of your blog poster.
Speaker 3 (11:38):
And it's amazing, like, yes, yes, that that gives. Yeah,
so that gif is there. And so once once you
create that application, was the application is uh? You know? Well, yeah,
you got the you've got the Jason, and you've got
the language also. So now the question is now there
(12:00):
is a very interesting thing. So I will tell you
what is the According to me, this is the best
part of my article. So the language which they returned
is in the form of code, for example Ian for English,
fr for French, and something like that. But if I
have to show to the user, I cannot show Ian
or FR. That is not user friendly. You don't understand that.
(12:22):
So I need to show full language English, French. So
now there are two options. Either create There is a
documentation on Microsoft website where you can see the list
of all the languages which is supported by ocr API.
So you have to create the You have to create
a dictionary or a lookup table manually where you will
(12:42):
map every language with their key. But that is not
what programmers do. If I have to do work manually,
I cannot be a programmer, right, So I have to
do some modernization. So what I did is so I
did a kind of hack. So there is another cognitive
service that is called translate text. So as the name suggests,
it translates texts from one language to another language. So
(13:05):
Microsoft has created a public API where they expose the
list of all the languages which is supported by translate
Text API, and the list of languages which is supported
by ocr API is a subset of list of language
supported by Translate Text API. So I make a call
to Translate Text API endpoint. I get all the lists,
(13:27):
populate it in a dictionary, and my work is done.
I set all my manual work and now everything is automation.
So if you see in the article, I have clearly
mentioned if you go, there's a section called why do
we need to fetch the list of supported language? There's
a sandy Yeah, there are small paragraphs. So there I
have mentioned clearly that why I am calling because people
(13:49):
will get confused that if you're working with an ocr API,
why you are calling a Translate text api end point.
So this is the reason. I just need to fetch
the list of language and make it more user friendly application.
So from this I am creating a look up table
basically a dictionary. And when I am getting a language
code like Ian I am getting, I am displaying the
value as English on the UI. If I'm getting far
(14:11):
for French, I am displaying the name is French on
the UI. So this makes my language more user friendly.
So I also like to add one more thing. So
on this particular thing only I spent almost two days
because I want I thought that let's show the code only.
But then I thought that code want to be more
(14:32):
user friendly, so make it something more user friendly so
that people can relate to it. So that is why
I created this particular hack.
Speaker 1 (14:41):
I love it. Is it a hack to.
Speaker 3 (14:43):
Be it's not a hack, but it's something different than
the normal workflow.
Speaker 1 (14:53):
Yeah.
Speaker 3 (14:54):
And and and in the client side, if you see,
it's a uh plain simple UI for angler. So I
have a service. I am calling the endpoint and the
thing is that I am uploading the IMAH. So there
is a uh there's an option to upload the image
and then show an image preview. So if you see
to show the image preview, calling and I am uploading
(15:17):
the IMAH and I am showing the max file size
of four m b. Yeah, so there is a limitation. Also,
I forget to mention that there is a limitation of
O c R A p I that the maximum file
size can be four mbs only. So I don't know
what is logic for this limitation, but trently, this is
a limitation. So that's why I have put the maximum
five sizes four mbs. And then once the image uploaded,
(15:41):
I will get that uploaded image and in a form
of byte, and I am sending viable call to my
back end, and then the back end is sending me
a string data the text and which I'm displaying on
the UI. So this is how my application is working
end to end. And I'm using bootsteff for some styling.
And that's how you get to the end of the
(16:02):
article where you can see that of some gift which
you are a fan of.
Speaker 1 (16:05):
Now, oh my goodness, I am. I'm actually looking through
your GitHub codes right now. I'm trying to find the
point that you're calling the the vision service or the
to find a list of languages language support for computing.
Speaker 3 (16:23):
Yeah, so I will tell you you have to go
to ocr controller inside the controllers folder, and the and
the last method is get available languages method.
Speaker 1 (16:34):
So how long did you said that? The the UCR
portion where you're translating basically from like fr to French
took you two days? How long did the whole thing
take to accomplish?
Speaker 3 (16:46):
So the whole application, see the multiple parts, So the
whole application, I will say along five days for five days,
I'm not sure the days. Yeah, but yeah, working part time,
not completely.
Speaker 1 (16:58):
You're like, I didn't pay basically is what you're saying
to me.
Speaker 3 (17:03):
Yeah, no, no, it's a working part time. Basically it
means like two three hours a day. So I will
say fifteen to twenty hours to create everything and two
days especially for that translation from to create that look
up dictionary, because I have to think of a logic
that what should I do in that case at one
point of at one point I thought to create everything manually,
(17:26):
and I think that there is no program between me
and an a lazy person like we should be. We
are developed. We should do some smart solution. We should
give some smart solution. So that's why I come up
with that particle logic. So that's how this method come
into existence. So one more thing I would like to add.
So here you can see I have created a few
(17:46):
models also, so these models will allow me to bind
to my Jason data addictally. So the OCA API is
returning data in a format of adjacent and then when
I decalize the Jason using our in our code dot
net code, then I need a class or a model
to bind it to directly. So that is why I
have created a few models to store the values. So
(18:09):
that is coming from the JON. So here you can
see we have a language model will give the name
of the language, the native name. That directly that there
are few things are there which are coming from the
Jason And maybe at the end I can I can
share few relevant details where you can find the JSON
structure and maybe the AZ your cognitive service socioor API
(18:32):
official documentation where you can see that structure and step
by step will be more helpful.
Speaker 1 (18:37):
Yes, I haven't even touched the dot net side. I'm scared,
like walking through your angular code, I'm like, oh no,
well it's on the back. So what walking through? What
everything that like the dot net is handling, it's obviously handling.
Speaker 3 (18:51):
Yes, yeah, you can say the heavy lifting is done
by the dot net and angler is just for just
to show, like you can suggest for UI, just for
make the app beautiful look and feel. Yeah.
Speaker 4 (19:05):
Are you doing any sort of authorization with that net
or anything like that or is this just the father No, so.
Speaker 3 (19:12):
There is so. Initially I told that when you when
you create the API, you will get a key, a
PI subscription and the end points for this subscription key
is the my authoriation. So that's that should be kept
hidden or it should be used privately.
Speaker 2 (19:27):
Yeah, it's a it's a really cool app.
Speaker 3 (19:29):
Thanks you.
Speaker 4 (19:29):
It's always annoying to have to deal with paper anyways,
So you know, just you can whip one of these
up pretty quick.
Speaker 2 (19:35):
It's awesome.
Speaker 3 (19:36):
Yeah so yeah, so yeah. So adding on the same note,
so now as you have two different kinds of APIs.
One is for optical Character Reader, which I am using,
which recognizes only the printed text. It will not recognize
the handwritten text. Now there is another ap I called
read API, which is beneficial for large document or handwritten text.
(19:58):
Let's say you have multi pages which you want took
a handleton page and which you want to convert to
a word. Then you can use a red PA, which
is a separate APA from this, and which which works
very good with the handleton text.
Speaker 1 (20:09):
I mean, like I'm thinking maybe not my handwriting, like
someone who can actually write.
Speaker 2 (20:18):
You can train the models, you know.
Speaker 1 (20:21):
Oh yeah, oh man, it's rough. Bob my husband who's
known me for like ten years, he still like struggles
because it changes daily.
Speaker 3 (20:31):
So yeah, dynamic handwriting, Oh my goodness. So that was
for the application. I really enjoyed this creating this because
it was a lot of tricks and a lot of
things we have to do. It was a great experience
for me. And then I write this article. I said,
(20:52):
let's say have this knowledge with everyone write this article.
Speaker 1 (20:56):
I'm just amazed because I I'm on your get up
looking at all your applications. Do you just get a
hanker in You're like, hey, I want to like blogging
app with Angular, cloud fire Store. Yes, you're just like, hey.
Speaker 3 (21:11):
So say this blogging So this blogging app with Angler
and fire Store has a long story attached to it.
So yeah, so the story is that this is this
application is my playground. Playground means if I want to
you want to learn something in Angler, I use this application.
(21:32):
And there is another application if you see have you
seen the bookcart? Yeah, so for bookcart, I have pinged
you in the chat. Also you can look at that.
So book cut is a kind of complete page complete,
what you say, shopping cut application. So there is a
(21:52):
online e cart here in India called flip card, So
I just I just stole the name from there. I
put a book cut. So this is a bookshop as
you can see it. And it's the pretty basic application.
I'm using Angle, matarials, dot net Core, but complete into
an application and it has authoriation, authentication, and there are
a lot of other things also, so you can place
(22:14):
the order, you can upload the images, you can see
the preview of images, logging a registation, and we have
temperativen form reactive forms. So whatever. I so these two
applications blogging application, book cut application is my playground. If
I have to learn something, I put it here.
Speaker 1 (22:32):
So here so like keeps evolving and growing as you do.
Speaker 3 (22:36):
Yes, exactly, yeah, exactly, So right now in a book cut,
I'm planning to implement NGRX because I'm learning NGRX since
last few days, few months basically, so I want to
implement JRX over there so it might grow.
Speaker 1 (22:49):
So what's the do you plan on having like a
split of like this version within GRX, this version without
or you just this is.
Speaker 3 (22:59):
Just upgrade upgrade. It's a demo application, it's and it's
already on GitHub freely available, so if anybody wants to
show the previous version, they can already go to previous
commits and see that.
Speaker 1 (23:10):
I can't wait. I'm totally I'm going to start following
you and people.
Speaker 3 (23:13):
Now that's awesome, man, that that would be very awesome.
Speaker 1 (23:19):
So before we get too much top topic. I think
you said you had a couple of things you wanted
to mention or did you already touch on them for
back to the original application with OCR So if you
go to.
Speaker 3 (23:30):
The original application, I think I have covered most of
the part and I would have shown it demo, but
I think I cannot. Yeah, yeah, so that I would,
and unfortunately I have not deployed it anywhere. Otherwise people
could have played around. But there's some issue with the
deployment in my as your application since the company provided
(23:50):
and my company provider, so there's some limitation over there,
so I could not be able to deploy it. But
if you follow the steps message the application, or even
if you just create a PI key and the endpoint
clone my repository, put your key and run to run.
So yeah, yeah, yeah, it's a guarantee you will not
face any issue. It's a guarantee.
Speaker 1 (24:13):
That is some big talking here.
Speaker 2 (24:17):
Yes, yes, it's you will not have an issue.
Speaker 1 (24:20):
I love that so much.
Speaker 3 (24:21):
Yes you will. It's a guarantee I am taking. If
you have an issue, you can post public on your
tutor that your your app is wrong. It's a guarantee
basically on your.
Speaker 2 (24:34):
End so.
Speaker 3 (24:39):
This is try and tested. So and I would say
that as your cognitive service is awesome, so you will
you will see some difference from your normal app. So
I have written a lot of articles, if you see,
I am writing for almost last three years and I
have written a lot of articles, more than fifty five
to sixty articles. I have written do a lot of
(25:00):
different kinds of applications. But this using cognitive service is
something different because it makes your app smart. You app
become a smart like and it looks cool. So that that, yeah,
it looks cool that you are doing something. You're doing
something great. The other applications also, I am not saying
bad about other applications like if I'm written about forms
(25:21):
and then data uploading, creud operations and gr X, they're
all great. But this is something different.
Speaker 1 (25:27):
No, it is, and I I love it that you
were just like, hey, they offered this a p I
I need to use it, yes, And and they are.
Speaker 3 (25:35):
There are a lot of different APIs, like so they
have something called language APIs and they have Q and
a maker. So in the ASU there's something called Q
and a maker. So there you can set up Q
and A for your website or something like that. Then
text analytics analytics. So in the text analytics you can
(25:57):
analyze the text what are the text for the keywords
and entities and all. And then you have in the
in the vision uh in the face recognition. The face
recognition is one of the very great API where you
can upload an image and it will recognize the face
the location of the face, and then you can it
will show a box around that it will look like
(26:18):
a sci fi movie, so that that looks awesome. Yeah.
So and then you have vision a p I form recognizer,
so you you can upload a form. You can extract
text from the form. So those a lot of API
is provided. So I will provide a list, I will
provide the link, can put in the notes and people
(26:38):
can go through it and see that there is an
extensive document provided by Microsoft and and and and the
best part about this is this is all going on
back end. So all the a p I you you
so that I would say that three te architecture one
is on the cloud where which do all the heavy lifting.
You create the a p I get the key and
(26:59):
then you have a middlewere part of the thing. So
where like services in my case it is ESP dot
net code and the UI. You can use anything. Your
free to use any UI. So I am using Angler
and Blazer. So I have few applications on Blazer also
and Angler also, so I am working Palel on both
of them. You can use other also, you can use Plain,
Javaz view, you can use React, whatever you want to use.
Speaker 1 (27:21):
So I saw, I saw you wrote a book on Blazer.
Speaker 3 (27:24):
Yeah, and the funny part is that is the first
ever book in the world on Blazer.
Speaker 1 (27:29):
Oh my, well it didn't like just drop like officially.
Speaker 3 (27:33):
It was dropped officially, but when I wrote the book,
it was still in preview.
Speaker 1 (27:38):
Nice. That's awesome.
Speaker 3 (27:42):
What is that? Yes?
Speaker 1 (27:44):
On Amazon?
Speaker 3 (27:45):
What is that on? Yeah, it's on Amazon, so yeah.
Speaker 1 (27:49):
The front door of course it's on Amazon.
Speaker 3 (27:52):
Yeah. And recently I have published another book on sha
where I have co authored with Raphael and Marius were
also Microsoft MVPs. So this is published recent seat. It
was a complete Sea Sharp guide from beginners to advanced level.
Speaker 1 (28:07):
That is awesome. I actually have a friend and coworker
who is an advocate for Blazer here at kend of U.
I might have took you two up because that's.
Speaker 3 (28:15):
Yeah, yeah, yeah, sure, sure, Actually I am more into
the UI. That's why I pick Blazer easily and so earlier.
I used to work as a dot net developer almost
when I started my career. The dot net developed almost
six years back. And Blazer uses sea sharp as a language,
so it was natural to me. And then I moved
(28:36):
to Angler because the demand in the market. It's simple. Yeah,
Blazer is still in a development phase, so that is fine.
We had let's not go discuss what the Blazer. But
Angler is awesome. Yeah, so I Angler gives me food.
That's why it's awesome.
Speaker 1 (28:53):
How long ago did you start using Angular?
Speaker 3 (28:55):
Almost three years? Little less than three years? Yeah, I
started from Angler four.
Speaker 1 (29:00):
Okay, oh that's nice. You didn't have the one that
to swap. Well, this has been such a fun show
and I really am amazed. If you write a book next,
could it please be about how I do so much
with my life and how you can stop wasting yours
(29:20):
like that? I think it's the title needs work, but
I think.
Speaker 2 (29:27):
Yeah, but no, is there.
Speaker 1 (29:31):
Anything outside of ocr app that you want to talk
about before we get to.
Speaker 3 (29:36):
Picks outside the If you if you look into the
same cognitive services, I have created a translate text cognitive
service also, so there's another So there's another link I
can share you. I am not sure if it is
published on a free code camp, but it is published
on my website or not my website in the medium
in the front medium you know Ango in the website.
(30:00):
Angler in Depth is there on medium, right, So yeah,
there is a publication medium that is called Angler in Depth.
So I have created a I have written an article
or that how to create a multi language translator using
Angler and as your cognitive service. So it's a it's
similar to Google Translate. And if if you I have
(30:20):
bring you the link in the chat, if you open
and again go to bottom, you can see that awesome
gift and there so so there you can see that
you can write. You can translate from any language language
I think almost twenty five twenty six language, sixty language
ORRY sixty languages supported by translated API, so you can
translate from sixty languages to and fro to and fro
(30:43):
from sixty languages. So again, the architecture and the structure
of this app is same to that of ocr app.
Everything is same. I created an API, rite the middle
layer and then put a UI to make the app
beautiful and I'm passing. I'm calling the API through service calls.
These are too, which I have explored till now. I'm
planning to explore the Fierce API next because that looks
(31:06):
cool to me.
Speaker 4 (31:06):
Yeah, I saw the face can detect emotion, which is
kind of cool. Yeah, like if you're angry, yeah, anger, contempt,
discuss fear, happiness, neutral sadness, and surprise.
Speaker 2 (31:21):
I don't think gives you like a rating on each one.
Speaker 1 (31:23):
Because I know humans who can't detect those.
Speaker 2 (31:26):
I was going to say contempt and anger. That's like
legs similar. I think I could use that day today.
I mean, I know both are probably someone's. Yeah.
Speaker 4 (31:39):
Anyways, so that's cool. That's definitely a it'd be fun
to play around with for sure.
Speaker 3 (31:44):
As though as awesome, like if you play on the
quality service it is, it is great.
Speaker 1 (31:49):
I'm making sure these links make it in the show.
Speaker 2 (31:52):
I got the face one awesome.
Speaker 1 (31:55):
Perfect. Well, thank you so much for coming on the
show today. And again, what is your Twitter handles slash
GitHub so people can find your user name and follow you.
Speaker 3 (32:08):
Okay, so my Twitter handle is Ankie Shearma under scot
zero zeo seven and my GitHub is unki sarma hyphen
zu seven. So the reason Twitter does not contain hyphen
is because it doesn't allow highun so.
Speaker 1 (32:25):
Worse, you have like a user name and then it's
like nope, yes.
Speaker 3 (32:33):
Yeah so this this is? Uh, this is. And also
I have a blog, personal blog Nki Shelma blogs dot com.
So there I write continuously, and there is a free
ebook I have published, so I can I can share
you the link. Also, I will just mention a brief
description about the app. So you just talked about that
blogging application, right, So I have written a free ebook.
(32:56):
It's almost hundred pages where I have explained how to
create this blogging application using Angler and firebas from scratch.
So this book is just a by step guide where
you can learn how to use Firebase with an Angler application.
Speaker 1 (33:10):
Oh I love that you said your GD Are you
both fire based and Angular? No?
Speaker 3 (33:15):
Only Angler?
Speaker 1 (33:16):
Okay, I mean we can fix that. We need to
talk to the fire Based team because you've got like,
I don't know, twenty demos using Firebase.
Speaker 3 (33:26):
Yeah, I would love that.
Speaker 1 (33:30):
So okay, I think we are ready for picks, although
I'm pickless today. So Brooks, hopefully you can pick up
Jeez where I am totally dropping said ball. I was.
Speaker 4 (33:44):
I'm kind of pickless, but I just wanted to stand
on my soapbox for a second and say, if you're
wearing a mask, cover your nose and your mouth, because
if you don't cover your nose, one, you look weird
as all get out, Like your nose looks like ten
times and two, it's not really doing anything. Last week's
(34:05):
pick for me was wearing crocs with socks, So like
me saying, you look weird.
Speaker 2 (34:12):
Your nose sticking out, that's something.
Speaker 1 (34:15):
Yeah, it gets me when I'm like driving and I
see like other people driving alone wearing masks.
Speaker 2 (34:23):
That's weird too, That's weird. That's creepy. Guys. You can
breathe now, this is you're in the car, right.
Speaker 1 (34:30):
I'm like, maybe they're just so comfortable they just don't
want to take it off. I don't know. I just
think it's bizarre.
Speaker 2 (34:41):
That's my pick, covering your face and nose with a mask.
Speaker 3 (34:46):
Yeah, do you use what is what the mosk is for?
Speaker 1 (34:49):
I know? Okay, so yes, do you have any picks?
They don't have to be techrelated, they can be.
Speaker 3 (35:01):
I have something which I talked a lot often about
and I I uh ask a lot of people also
like you guys are also community contributor and not only
you everyone. So what I say is that teach. That's it.
So how you can teach. So let's say you know something,
it doesn't matter what you know. You know something, you
(35:22):
teach to your junior. So if you are a developer,
teach your junior about development. If you're a tester, you
teach your test testing. You know your testing. If you
are marketing guy, if you're a salesperson, whatever, you not
teach your juniors. The reason for I'm the reason I
am saying this is that you can learn more from
your peers than from your schoolar colleges. And this is
(35:43):
not only in this is mostly in my country, but
I think this holds too everywhere in the world. So
I just want to say to everyone, just teach, splait
the knowledge. But that is one of my motive behind
doing all this community work. So like, spread the knowledge,
whatever you know, whatever you know, just teacher, that is
what I'm saying. Teach.
Speaker 1 (36:00):
That's beautiful. I love it.
Speaker 2 (36:02):
That's great.
Speaker 1 (36:03):
Thank you, Thank you so much for coming on this
show today. You were a absolute wonderful guest.
Speaker 3 (36:11):
Thank you, thank you. I would love to thank you
guys also for inviting me. And this was a great session.
I like talking to Like I talked through an article
without sharing anything, without showing anything.
Speaker 1 (36:23):
I know, it's very weird. It's hard sometimes because people
are like and I show this code, and I'm like,
well could but no one would see it. So it's
always really interesting to see people teach through code concepts
or angular you know, without visuals. So oh awesome. Well,
(36:44):
thank you so much. Everyone has a marvelous day and
we'll see you on the next one.
Speaker 3 (36:48):
Yeah, thank you, thank you, thank you. Luke By
Popular Podcasts
CrimeLess: Hillbilly Heist
It’s 1996 in rural North Carolina, and an oddball crew makes history when they pull off America’s third largest cash heist. But it’s all downhill from there. Join host Johnny Knoxville as he unspools a wild and woolly tale about a group of regular ‘ol folks who risked it all for a chance at a better life. CrimeLess: Hillbilly Heist answers the question: what would you do with 17.3 million dollars? The answer includes diamond rings, mansions, velvet Elvis paintings, plus a run for the border, murder-for-hire-plots, and FBI busts.
Crime Junkie
Does hearing about a true crime case always leave you scouring the internet for the truth behind the story? Dive into your next mystery with Crime Junkie. Every Monday, join your host Ashley Flowers as she unravels all the details of infamous and underreported true crime cases with her best friend Brit Prawat. From cold cases to missing persons and heroes in our community who seek justice, Crime Junkie is your destination for theories and stories you won’t hear anywhere else. Whether you're a seasoned true crime enthusiast or new to the genre, you'll find yourself on the edge of your seat awaiting a new episode every Monday. If you can never get enough true crime... Congratulations, you’ve found your people. Follow to join a community of Crime Junkies! Crime Junkie is presented by audiochuck Media Company.
Stuff You Should Know
If you've ever wanted to know about champagne, satanism, the Stonewall Uprising, chaos theory, LSD, El Nino, true crime and Rosa Parks, then look no further. Josh and Chuck have you covered.