Full-Stack ML Apps (Javascript, React, Streamlit) with Gradio API

Key Takeaways

hey friends welcome to one little coder if you ever wanted to build a machine learning application you would know that sometimes you have to wrap this entire machine learning application as an API so for your application you need front-end and back-end sometimes your front end could be not python for example it could be react.js it could be angularjsr it could be any JavaScript framework that you want to use while the backend being powered by Python and most of the time people actually use apis for it the APA is communicating to the front end and making calls to the server and this is how the full stack application is going to look like but traditionally if you wanted to use an API you need to host it on a server and then use something like Fast API and then get the APA so this is what we have been doing all the while but today or probably yesterday night radio announced a new feature where you can use gradu as an API this has been there for a while we probably would have discussed this in this Channel as well but now this has been revamped and then you have got use radio as an APA as an option which means you can now create a machine learning application host it on hugging face spaces now use that as an APA rather than a full stack application on any web application that you are going to develop and to show this demo I'm going to build a streamlined application which is no way connected to radio which is no way connected to hugging phase but this stream unit application which is running on my local machine is going to be powered by that gradio API which we are going to see how to create in a short while let's get started with this radio API first I got to know about this announcement from abubakar's tweet and this is very simple so at the end of a radio Uplink if you are running a radio application that is greater than 3.11 you're going to see a very small button at the bottom called use via API and once you click that you're going to get all the details first let me show you what is happening here in this application this is a text to speech application which is powered by radio API which is hosted on hugging face spaces first I have to go here and then enter a text for example I can literally copy this from abubakar's tweet and paste it copy come back paste it and then click the text to speech magic which is a streamlit button and then when I run to share radio's new use my rappy cage okay we are not here to evaluate how the T text to to speech is working but we can see that this is completely working fine and this is right now working on my local machine and now what does it mean let me take you inside the code and show you what is happening to quickly see what is happening this is a very simple streamlit application but the way this text to speech is happening is by making an APA call to the APA that is hosted on hugging fee spaces now let us identify how that is happening anytime you have a hugging face page that is is actually running greater than 3.11 go click the file version click the readme and then see so this SDK version is 3.11 so if any grade your application that is hosted on hugging face spaces that is greater than 3.11 you're going to see a very small icon at the bottom so if I zoom in you're going to see a very small icon that says use via APA and once you click that it's going to take you to this very nice page like if you are familiar with swagger very swagger like interface where you can see okay this is an API documentation for this space and this is the end point and for this end point you have to make a post request and this is your sample input payload and this is your output response object and this API documentation kudos to the team does not end here but also gives you sample code for Python and JavaScript so for python you can copy this code and literally run it it's going to give you a result for JavaScript you can copy this and add it to your is angularjs or whatever JavaScript framework that you are using given that we know how to see an EPA documentation for a particular hugging phase spaces that is basically a radio application let's now take this and go to an API platform and then see how does it work for that I'm going to use something called Hopscotch this is like an open source alternative for Postman if you are familiar with Postman so what I've done here is I've copied the endpoint here I've come to Hopscotch and I've pasted the end point now whenever there is an endpoint we need to make sure that is it a get request or is it a post request so instead of get I've selected post and now we need to make a call we need to make a call to the APA endpoint using an input payload so that is basically your text which is ideally going to be converted into speech which is going to be shown or displayed or responded back to you as a base 64 string which is the base64 encoded string of the audio so I have gone here and then gone to the body and then set my data the payload is like I want the base64 for hello world so or I can I can probably paste the same thing whatever the message here is you can copy this come back here paste the entire message okay we have we have the call we have the codes so really Stoke to share greatest new API let's stick to this now I can send and when I send this thing this Hopscotch is going to help me send a call using this payload to this endpoint as a post request which is a HTTP request the good thing is we have got 200 response which is Success which means the request that we made to the end point is successful and we have got a response right now it doesn't make any sense it doesn't make any sense because this is a base 64 encoded audio so I'm going to copy this just for us to understand and go to Google or wherever you want to and then search for base64 to MP3 and I'm going to see base64 to audio I'm going to paste it here and I'm going to click decode base64 to audio and then I'm going to play the audio do we have the audio here okay I still don't see the audio here cannot decode okay I should use basics for decoder you could base 64. okay the problem is because I had added the codes that's a terrible mistake foreign cool so now we know that this entire API thing works fine which is what we verified using Hopscotch by making a call to the hugging face APA endpoint using the input payload that we just gave the text here which says really stoked to Shared graders new API and then we got a base64 encoded string and response which we used to service base64.guru to convert into audio files so that we verified this entire thing works so now what we are going to do is we are going to just simply go here copy the beautiful python code that The Graduate team has put together for us and we are going to merge it or we are just going to combine this to a streamlined application and that's the whole point of this video just to show that the back end and the printing can stay separately just like most full stack applications so if you are a JavaScript developer and if you want to develop machine learning powered applications this is exactly what you have do not exactly but this is one of the things that you can do so now I'm going to go to my code editor which in this case is vs code and I've created a new folder a project folder and I've got a file called app dot Pi which is a streamlit application first I have to import certain required libraries which in this case is streamlit for full full stack application development a request for making HTTP calls base64 just for encoding and decoding then we have got a very beautiful title that says text to speech powered by gradu API hosted on hugging face spaces if you want to add then we are going to use streamlits input component text input to collect the input from the user which is going to be stored in in underscore text the next thing is we have enabled we have created a button called text to speech magic so if you see your application you can see text to speech magic like in case if you want to optimize it like for example let's say I want to do something like this with an icon maybe this yeah so we have a button that has text to speech magic the text and we are going to say once you click the button if the button is clicked we had word we are not specifying click here but you know that's what it means then we are going to use a progress bar or a spinner in this case and we are going to just use a code that we just copied from the gradio documentation this code and we will say making a call and the input payload instead of the hard-coded text you want to use the input text that we got from the user so that once we get the response instead of being it being a response object we are converting into a Json and then we are storing it here if you want you can call it Json response Json as well and then I can use that here so now we need an audio player for that we are going to Simply use an HTML audio player and this is a simple HTML tag and to embed the audio base64 encoded content inside it we are using IF string here this is an if string python if string and everything else is a string and here you have got the python object which is response underscore Json inside that data and inside the first object which is the base 64 encoded string and we have to also specify what type of audio content it is in this case it is audio slash Flack that's a type and once you you have the markdown or HTML you can just display the HTML using hd.markdon do not use this in production because this is prone to cross-site scripting and all these kind of things so this is just for demo to show that you can have front-end and backend separately all together so that's why it says unsafe allow HTML and we are enabling it true now save it once you save it go to your terminal click new terminal and once you get the new terminal you say streamlit run app.5 once you do that it is going to run this entire file to quickly summarize again we have loaded required libraries we have got a title we have got a widget that collects input from the user we have got a button and once the button is clicked we have we have a spinner that runs until we do all these things in this case make a post request to the hugging face spaces for the particular gradio API and use that to embed an audio player and you know display to the user so let me run this once I run this it's going to give me the link where it is run I can come back here once I run this you can see that the new button with with the lightning icon that we added is here and I can add something radio is amazing I just love it but streamlit is also equally amazing that's why this demo uses extremely takes click Text to Speech Magic we have got the audio output played radio is amazing I just love it but travel it is also equally amazing that's why this demo uses tremolite that's why this demo uses shrimlet and now we have successfully managed to build a full stack machine learning application that does speech to text the streamlit application is streamlit is the stack that is powering the full stack application but the front end is streamlit but the back end which is you know in this case streamlit but makes call HTTP calls using an APA to a radio application and that grade your application is hosted on hugging face spaces and that's the power of Open Source now what you can do is you can host your model on hugging face build a radio application on top of it host it on hugging face pieces and then use that API to build uh any kind of application whether it is a curl command whether it is a HTTP request or if you are building an R shiny application now you can use it anywhere in any programming language because it's just an EPA call which is quite possible in any programming language so you're not bound only by Python and whatever you want to do and that is why we used streamly to show that power say where we have a streamlined application that makes APA calls to the radio APA I hope this video was helpful to you once again kudos to the team for making this amazing new or enhanced APA option using radio but if you have any other question let me know in the comment section otherwise see you in the next video peace