Free ML-powered Web Apps (React, Javascript) Tutorial with Gradio API [Hugging Face]

hey friends welcome to one little coder today we are going to discuss about one of the most underrated features of hugging face spaces is the most underrated features of hugging face pieces is the apa part of it so if you have a gradient application running on hugging face spaces you can use the apa that is generated out of the gradient application and this is something that i recently learned that i am taking it for granted as well i knew this feature i have uh i have probably explained it in one of my previous videos but i never paid attention to this as itself as a feature thanks to korean binoy who actually made a tweet so it says during this week's fast.a lesson one one of the underrated features of gradio are showcased with spaces you can use gradio apis to create machine learning powered websites apps very easily there is no api limitation no authentication and then you can you can think about the possibilities that you have got so let's take a step back so what what what is happening here what is happening here is gradio if you know i've got a separate course and radio gradio is one of the fastest way to create your ml web application if you happen to use gradio you might not have noticed the footer here that says view the api so if you have not seen it just just go ahead whenever you have deployed a gradient application go ahead and then click this at this point you can see my gradient application it's a simple text box that takes an input and then gives a json output just simply as a string this is like one of the most simplest that you have if i have to show you the code like i can click this and look at the app.pi file all you have like it's it's just less than 10 20 likes of code um we are importing radio sgr transformers pipeline and setting the task as sentiment analysis getting the input sentiment sentiment text and then doing the sentiment analysis giving the output just simply as json like very simple just like your nlp 101 even you know before 101 whatever it is now what we have is we have got this gradient application deployed up and running on hugging face spaces if you are not if you if you have not heard of this news hugging face quite some time back higher um acquired radio so graduates right now part of hugging face spaces or hugging face so what i can do here is i can go here and then type what i want i can just say you know the the game where let's say um sunrises lost it's hurting okay so probably some random text um you can see that it has generated the output which is again a json string you have got label and you have got score well and good now what the feature that we are going to talk about is usually when you want to host an api you would you would probably you know take a serverless method you would go to aws lambda you would do all those things even if it is a free application if it's an open source still you would do the same thing because you have not found a way to host an api for free and then utilize that right but this video is going to help you from that what i'm suggesting you is again thanks to korean benoit's tweet that actually gave me the spark that we are under utilizing this click this view the api button once you click this you're going to reach this page let me zoom in so what this page is saying this page is telling us how you can use that gradient space this the app the grade you have that you have created and deployed it on hugging face spaces how you can use that as an api that's it as simple as that the url in point that you need for the apa call is this the input that the api takes is this the output that the api generates is this and what kind of payload you're process sending what kind of response you're going to get not just that you're going to also get live sample code for three different platforms one python second curl and third javascript so if you want to use this an api using python this is what you have to do it's quite simple import request i request using this and then json so i'm going to open my python quickly so i'm going to load my python okay so i have my terminal it's going to be quite simple and uh small i don't i don't want to spend a lot of time in here okay so i'm going to say python3 okay after i do this i'm going to say import request again you don't have to pay a lot of attention here because this is going to be very straightforward all i want to show you is that it is going to work but what i'm going to show you next is the most important part so i'm going to copy this i'm going to copy this okay and i'm going to say paste it run this and then it's going to give you like it has already calculated i'm saying j r json it says this label is positive of course because we have given hello world so if i happen to say maybe you know this this movie sucks and we do this and then i'm printing our.json you can see the label is negative so you can see this api thing works very well on python but you know the objective is not to do with python that's that's not the point of this video the point of this video is um pi script is quite popular recently because you know that gives you the ability to write python on the browser without using any bridge language or anything so what many production level applications do is they like to build micro services micro service architecture which means every micro service talks to the main system or talks to another system using apis http calls so what i am proposing here or what many people would do is let's say if you want to develop a sentiment analysis system on a website you're not going to put the sentiment analysis model on the website rather what you would do is you would create like a service or serverless service that uses the model does the inference and then gives you an apa endpoint where you're going to make a call and then get the result so what i'm going to show you right now is how to quickly create a website or a web page that can do sentiment analysis simply taking a text input having a button to do the calculation and then return the sentiment analysis scope you know maybe the json response completely simple without having to write a single line of machine learning code why because we already have the apa endpoint right the ap endpoint is available here your machine learning model is the inference part is actually running on hugging face spaces and it is powered by gradio and all you need to do is use this api endpoint create a website that can do this task press that's what exactly what we are going to do now in the next section of the video where we are going to use hugging face spaces powered by radio as an apa hosting platform you know just like how you would do it on aws lambda or um there are many api marketplace that gives you this you're going to use this as that but this is again free and known limitation all these all these good things about a gig face so what we are going to do we're going to build a simple web page that can take input from a text box um i think i might have it open yeah that can take an input and it has a button and then you're going to get the result so let me let me simply run it and show you so maybe first let me type something very positive i love this youtube channel okay let's see if it works get the result okay we have got a positive result this is positive average time taken all these things well i'm good so maybe i can now say um moon knight is an amazing series and oscar deserves an oscar oscar isaac is the person who acted in the series once again did it even change i think it changed you can see the duration change you can see the change so it is again positive it has got a good score so it is working let me finally end with one negative thing i hate corruption okay controversial statement to say on a youtube video oh i hate corruption comes as positive that's quite shocking maybe let me give something else maybe i can say um the food taste sucks okay and it is negative so but right now we have completely got it working now i'm going to show you how you can build this using simply html and javascript without any machine learning because you're going to use a api endpoint that we just saw from from hugging face and then you're going to build this okay for that i'm going to open my vs code and the text is quite small i'm sorry about it first of all the file is an html file and i'm going to also show you how to deploy this okay so it is not just going to be um simply where i'm showing you how to create this but also we're going to deploy this on github github pages so it's a very simple html code let me remove the unnecessary comments that i've got i've got i've got i have okay so what what are we doing here so let me quickly take you through the code so you have an idea what is happening here so first we have an html open and html close here um if you're familiar with html anytime you open something you have to close it as simple as that i've got uh we are not defining any title but if you want to just give title you can say title and close the title okay title is closed and then you can say what is this sentiment analysis powered by radio api okay it looks good so you've got title so if you go back to the page you can see when i refresh this you wouldn't see anything here but you would actually see the title here so you can maybe i have to bring this a little bit down but can you see can you see can you can you can you see let me let me show you yeah you can actually see can you see on the right hand side where it says sentiment analysis powered by radio app so that is what title is it's quite important for search engines if you're going to deploy this somewhere in the browser tab then you can set our icon all those things i'm not going to do that but yeah that is there so then we are opening up the body tag and within body tag we are going to define our text area maybe before that at a good good good practices to define an h1 tag and then say say the same thing sentiment analysis using this blah blah blah blah radio apa maybe a lad hugging face emoticon just to see it is working place okay save it go back here and then you can see sentiment analysis powered by radio apa and then you have got um this the setup so looks good at this point um you know this is how i learned html like so many years back after you have the h1 tag now you are going to define the text area so you're going to say how many rows that you want and then you're going to say id id is quite important in html for you to identify a particular component and then the placeholder takes i can say enter your text here and then you have got the html and here enter your text here you might be wondering how am i not refreshing the page here because i'm running an extension called a live server um i i can show you the next i can show you the extension live server is it going to open yeah live server helps you launch um the development environment without having to save so this is quite handy so if you're going to do web development or if you're going to do anything like what i'm doing live server should be like that extension should be really helpful okay so the next thing is uh now our text area is defined you know what is the text area which is this part the next thing is we need to define a button um again it has a class um and then what the what do you want the button to do what you want the button to do is when the button is clicked on click then you want to call this function which is start update you're going to pass on the event and then it's going to call the function okay and then the button label is git you can change the label to say get sentiment okay that is probably better get sentiment you have got kit sentiment now after this um if if if you want to add maybe what you can happy how do you know happy may be sad okay so happy and sad so we have got happy and sad so you can you can you can play with the you can play with the aesthetics later if you want so we have got a button that says happy and sad get sentiment the next thing is we are going to define this text area again 14 but the id is different you can see the ids value here ids result here and then there is a placeholder text now our html part is clear so we have got h1 tag box button box now we are going to define the javascript part where we are going to say when this function is called which is start update you can update the text area which is this and we're going to do that by using a function and you know this is slightly convoluted you can avoid a couple of things you can definitely refactor this code and i'm recording this video 2 a.m midnight so you can understand that how how creative my brain is at this point so now i'm calling this function called updatetext area and then this function contains the url the url that we just copied from this so this is the end point right so you copy this endpoint and you come here and then you paste it so late url you are defining an object url string and then you are saying that get the value right get the value of the text box value okay so maybe maybe this is confusing what what i'll do is i'll change the text box name as input input text okay this is my input so i'm going to use that here and say get the value so get the value that is inside the text box called input text and that's why we are using dot get element i by id by height is the id by which you are trying to get the value and then you are assigning it to a new object called text now you are going to take the new variable text and just for debugging purpose you know the age old console.log like print i'm doing it but it's not required i'm commenting it now you're going to take this text and pass it on to the apa call now you know you might be thinking you know what i'm python programmer i have no clue how to write a post http post script snippet using javascript don't worry gradius got you covered all you have to do is go back here i just showed you python code if you're going to do a chrome job or something you can use call but all you're going to do is go to javascript copy this and come back here now when you come back here you would get slightly similar like this but not entirely this there are slight differences but you know more or less you would get here instead of doing console.log of the json response we are actually sending it back to the text area that's the only difference that you would see between this code and this code so what we are doing here is we are taking the text we are using the url we are using fetch which is going to make an http call what is the kind of http call that you want to make this is post how do you know this is supposed because my gradio apa actually tells me that you have to make a post call post and what is the body the body should be json.stringify data and the actual text so json the body is json.stringify data takes you know as an array or um list whatever it is the text comes from this text and then you are taking the response getting the response and then you know you are finding the area text area of the result the second box and then you are going to add this value whatever the json response is and then you are going to pass on the value here inside the text area and then you are closing this entire function and then finally you are closing the script and then finally you are closing the body and then finally you're closing the html so that's it if you may be like before you want to close it if you want to write something say you know happy coding okay i be coding [Music] and and you know i can i can i can do a pitch of my channel so maybe i can say um subscribe to one little coder he is awesome you know this sounds narcissistic but it's okay so after you do all these things you can actually see you know what uh sentiment analysis or blah blah blah blah you've got the text you've got the box you've got says happy coding subscribe to one little coder he is awesome so let me let me go ahead and then type something and maybe copy this and then type the same thing here and then say get the sentiment the sentiment is positive so our application is working fine on local machine so now i said i'm going to also show you how to deploy this what am i going to do to deploy this you know the like for me the easiest um or the simplest or the most efficient place to deploy a static html page is getter pages you know hands down i always find it really easy for me to do it just for hobby projects so now what i'm going to do is i'm going to copy this entire code okay the index.html if you want to upload it you can do it if you already know to use git that is fine great you can go ahead and do it but let us assume that you don't know any of these things i'm going to just go and then create github dot com slash amrs my github profile and i'm going to go and then click create a new repo okay let me click create a new repo click new repository and i'm going to say send demand analysis webpage okay that's a terrible name for this okay this uses hugging face spaces powered by radio or gradient powered by whatever it is to create a simple html page okay that's nice and do i want to initialize the readme yeah fine and licensed i'll keep mit if anyone wants to make money with this please go ahead i'll be so happy after i create this now you have you know like what i have got so i'm going to go add a file and then i'm going to say create file and paste exactly what i got and i'm going to call it index.html the extension was from index.html should i zoom in a little bit yeah index.html and i'm going to go ahead and commit the new file you know i'm not adding comment messages you know that's a terrible practice but just forgive me this is 2am in the midnight so after this i'm going to go to the settings and i'm going to go to the pages i'm going to say go to the root folder which is like main and enable the page save the page okay if you want to choose a theme you can definitely choose a theme if you want to use jql and all those things i'm not doing this just getting a simple html page now you know that this is the html url before i open this i'm going to copy this because every time getting the url is a big pain i'm going to come back here and i'm going to say i'm going to say what what i'm going to say i'm going to say settings you know there is a place where i can add this url just like this yeah website add it and topic if you want to give it give it save it so at this point i've got the url and i've got the url here and you can see here that there is a github action that is currently running to build the html page that we we just created what is building means here building basically means that you had a raw html file and this is going to render the html file it build the html file so that it can be rendered on the browser so that is currently happening if our code did not have any error ideally this should work fine without any problem but oh yeah it was actually making me um worry about that now we have got the green tick mark so at this point our page should be ideally have been deployed rendered ready so i'm going to click this i'm going to come back here i'm going to zoom in a little bit you know want a little bit a lot and then i'm going to show you that this is you can see the url you can see the url this is not on my local machine this is on the internet you can i i'll i'll put this link in the youtube description make sure you check it out and you can see so i'm going to type something interesting maybe what what should i type i don't know i love i love radio and i'm going to get the sentiment you know it's positive that's great um i hated java when i was a student and i think my opinion hasn't changed okay it's independent negative cool so i i love gradius positive i hated java blah blah blah as negative so right now at this point if you have followed this tutorial or if you're going to go back and watch this in about 22 minutes we took a state-of-the-art machine learning model that is hosted on hugging face bases via gradio app we use the api to create a very simple web page web application that can be hosted on github which means data pages is a page it's a place where you can host static websites and we have hosted this on a static page because all we are doing is we are taking the taking the api that is given to us by gradio which has already been hosted on hugging face spaces and we have built a very small you know less than 50 lines of html code to create uh create this amazing thing and um and this is awesome so um i mean i feel this is awesome that's why i spent so many hours in creating this tutorial and i hope you find this video useful once again a big shout out to korean who actually um i mean i knew that ap existed but i never felt uh maybe i was taking it for granted korean actually opened my eyes and uh literally um so thank you so much for curry and benoit for giving this amazing suggestion and i'll i'll link this tweet as well in the youtube description so if you want to show some love go today click it so this this should mean something to them original poster so um this this html this repository will be in the youtube description um the the link to the repository the rendered html page will be in the youtube description if you have any questions please let me know in the comments section otherwise i hope this this tutorials was helpful to you in creating your own websites or web pages you know it's not just simple html you can build a react application you can build an android application you can build a mobile application that the potential is really amazing while your model is being deployed and served from clean face bases for free so this is awesome thanks to hugging face once again this is definitely not sponsored by them um but yeah thanks to the amazing platform that they've given amazing radio i love radio so see you in the next video take care happy coding uh let me know what you are building um if you have any other feedback see you peace

Channel: 1littlecoder

Views: 10,105

Keywords:

Id: 3IPttgpUWHg

Length: 24min 30sec (1470 seconds)

Published: Tue May 10 2022