Huggingface.js: Step-by-Step Guide to Getting Started

all right in this video I'm going to be talking to you about hugging face JS and how you can get started and moving on these open source models if you'd like to use them so in this video I'm not going to show you how to like build a model or do anything extreme like that I'm just going to show you how to leverage existing models that are on their platform but before I get into that I just want to touch on hugging face itself so if you're not familiar with hugging face so hugging face is a company that's well known for their work in artificial intelligence and is sort of becoming almost like a GitHub of Open Source models and data sets and just a place where you can go ahead and both look at the models and and interact with them and it's all done in a you know a nice interface and it's starting to develop an ecosystem all around it so there's been a well-established python ecosystem for quite some time and what's exciting is now there's also a JavaScript library implementation where it makes it super simple to interact with their models so without further Ado what we're going to do to get this up and running is go ahead and make an account on hugging face you don't need a credit card or anything like that to get set up make an account once you've done that head over to the top right hand corner we're going to go to settings and then we're going to go ahead and make an API key so once you're on the settings page just go to access tokens and then you can make a a read token you can make it will give you the decision between read and write in this example you'll just need to make a read token and then once you have that we're going to go over and put that into our DOT EnV file so I'll just open up vs code here so go into an empty directory or or any directory really but going to an empty directory just to make it simple and go into your dot EnV file if you haven't made one already just go ahead and you know you can touch dot EnV make a variable name for your API key and then so variable name equal and then paste in the key there so once you've done that I'm just going to run through what we're going to be doing here so we're going to import the required library and in this case we're going to be using the hugging face inference Library so if you go ahead and npm I uh hugging face inference and then we're also going to be using dot EnV unless you're putting your API key in line here so we'll you can go ahead and install those I already have them installed so I won't run them and once we have that so we have that declared we're going to initialize.env and then this is where you'll access the variable that you put in dot EnV or you could paste it in line here if you didn't want to you do all the dot EnV stuff so from there we're going to actually initialize the hugging face inference class and this is going to be where we it does a lot of the work so in the first example I'm going to show you I'm going to show you how to reference a specific model and then in the following examples I'll show you how you can go in and leverage their docs and just sort of quickly get going with what they have built in in their JavaScript wrapper here so if you want to use a custom model or a a specific model on their Hub so the first thing you can do is you can go over and click the models here and once you've done that you'll have a whole list of all sorts of models now even though there's a lot on the page here the thing that I found useful is take a look at the tasks here so think about the application of say you have an idea on how you want to leverage AI or if you just want to start to get ideas this is a great place to start you can see you know you can get text to text generation or image to image or you know text image so in the first example I'm going to be using a library where it's image to text so the way you can find the model that I'm going to be showing you is you can go image to text and then you can sort by most downloaded here or however you want you might have like a particular use case that you're looking for you can always search as well and here is the model that we're going to use so if you just go ahead and copy the model here you can go ahead and paste it in right as you see here so in this example I'm going to be showing you this image here which I have in this tab and it's just simply a picture of a zebra so it's going to take this image we're first going to fetch it I'll just get the code here so first we're going to fetch it and then once we fetched it we're going to convert that image into a blob and then that blob so that data representation of the image is what we're going to pass to the model so you can sort of think of inference as that's what we're using to get the prediction it's almost like a prediction API so pick the model and then pass in an input wait for a prediction and the reason why I want to say prediction is when you get a result that you're not happy with or pleased with or what have you just know that this is this is just how it works it's it's you know it's a you know it's the statistics and probability it's not something that's going to be absolute where you pass in an image and it tells you exactly what it is but what I found with this model in particular uh it's their most downloaded model and it does work really well like I'd say the hit rate is what with what I've tried probably about 80 plus percent um now it can struggle with sometimes abstract images or something that might be uh very detailed um you know if you're expecting like a very like verbose explanation of like this like detailed scene you might struggle with that but if you handle or pass it you know just sort of typical images that you you might uh leverage uh it does a pretty good job but instead of just talking through that I'll just demonstrate it here so we're going to pass the results here or yeah so pass the results from our image specify our model and we're just going to Simply log the result so if I just go node hugging face it's going to reach for that image get the blob and then once it has a blob it's going to go ahead and pass that through so we see okay a zebra standing in a field of tall grass so it did a great job in this example so obviously play around with this in this example that I'm showing you here the nice thing about it is it's set up in a way since you're fetching the image converting it to a blob you'll be able just to pass in whatever URL image that you'd like like you don't need to download them locally and play around with that you can just pass it in line in your code here so um now to actually leverage the wrapper so if you want to start to use it in a way that they've built this wrapper let me just pull it up here if we go back to the hugging face Js and we go to this inference page here now this inference page is great because it shows you all of the built-in libraries and examples and that you you can pass in so if it's a you know a summarization model that you want to use it gives you example of you know the model the input parameters so this is a really great place to start if you're just sort of toying with an idea I'd encourage you to look here um and maybe even before looking at the the custom models because this just has a lot of good information of both examples like working examples and the actual different types of models themselves so if you have a use case you're thinking of and you want to explore take a look through this page you know it's a quick read there's quite a few but you know you could read this in in a few minutes really and the nice thing with it is once you have the library installed I'll just go back and make a couple tweaks here if I just log and remove the comments you can start to see that you can really get going and leverage these in often cases incredibly powerful models with very few lines of code so here I'm just going to get everything get rid of everything from these lines here and I'm going to change my variable name here to have it within the same convention that they're using in these Docs so once you have that set up you can go ahead and just start reaching for examples here so I'll just show you these I'm not going to go through too many so hopefully you you know you'll you'll be encouraged to you know go and explore and try these things by yourself but so here we have the summarization so we're using the Facebook Bart large CNN model now if we go ahead and run this again see we just wait for oh instead of that we actually have to get our results here so we'll run that again we see okay so there's the summarized version now obviously if this was a fair bit longer you could it might be a better demonstration of it summarizing but this is just an example obviously and then once you have that set up you can really just come in here find the the model that you want to use um you know translation now some of these models you might have to pass in other parameters like maybe specify the language and and whatnot but this is a really good place to get started um so and the thing with this is if I just hop back to the models as well is you can let's just click models here the the thing that's nice with hugging face is it's not just uh NLP models so there's lots of different types of models you know there's there's uh models where it's like you know image to text like I just demonstrated but there's there's lots of models that are coming out here so you can use it for voice recognition or all sorts of of different use cases um you know there might be tabular data that you want to work with even text to speech which is is pretty interesting so say you want to have an application that will speak back to you I haven't played around with this but uh you know that could be an interesting use case so you want to build something like Siri or something this is a great platform to start to flesh out and Tinker with whatever ideas you might have so I'm not going to go into any any more examples here so you can see in the video you know just hop through the video again if you'd like you can see where I found these things but if you just send Google hugging face JS and then go into the use the inference API it will give you a host of different examples and yeah so I hope you found this useful if you did please like comment share and subscribe if you have any questions as always feel free to drop them into the comments below and otherwise until the next one

Channel: Developers Digest

Views: 13,297

Keywords: HuggingFace, Machine Learning, Natural Language Processing, NLP, AI, Artificial Intelligence, Transformers, Open Source, Data Science, Pretrained Models, Tokenization, Text Classification, Sentiment Analysis, Language Generation, Chatbots, Question Answering, Named Entity Recognition, Machine Translation, Text Summarization, Python, JavaScript, PyTorch, TensorFlow, Deep Learning, Neural Networks, Language Models, BERT, GPT-3, T5, HuggingFace.js, Javascript, Node.JS, Node, Nodejs, GPT-4

Id: z41vJlPMqnE

Length: 11min 54sec (714 seconds)

Published: Mon May 15 2023