Clarifai’s v2 API JavaScript starter is an easy way to help you visualize and test all of Clarifai’s public and alpha/beta models. We just released a new and improved version of our JavaScript starter on the interwebs, so keep reading for a short tutorial on how to use it!
You might have noticed that we launched the Clarifai v2 API to the public rather recently, complete with a whole gaggle of new features, new models, and new ways to explore your media. An easy way to use and test our visual recognition models is our brand new and improved v2 API JavaScript Starter, which is now available on the interwebs! This starter is able to help you visualize and test all of Clarifai’s public and alpha/beta models, so keep reading for a short tutorial on how to use it.
But wait…there’s more!
The JS Starter can:
- Provide a user interface for testing our models
- Add images to your v2 applications with the click of a button
- Test your custom models via a dropdown menu
- Make your day a gazillion (metric) times better
Ok, not so sure about that last point, but it’s a rough estimate.
Let’s get this Clari-party started shall we?
Step 1: Get those creds!
Like most other parts of our platform you’ll need application credentials to use this. If you have this already you can skip to step 2, but if you don’t then head on over to our signup page for your shiny, new Clarifai account. Once you have that down, navigate to your applications page, which will look something like this but without my existing ones there already:
There’s a big blue button there and your assignment is to click it, should you choose to accept this mission. Give your new app a name, leave the model as general-v1.3 (doesn’t really matter for the purposes of this project), and save that bad boy.
Voila! You now have an application with credentials:
Hopefully yours aren’t blurred, but if they are let us know cuz that’d be weird.
Save these for now and venture on to step 2!
Step 2: Grab the project!
Our JS Starter is conveniently stored on the Programmer Haven otherwise known as GitHub, specifically at:
https://github.com/Clarifai/javascript-starter
If you go there you’ll be able to access all of the files that we need for this, with the simple click of a huge Green button at the top right corner:
Make sure to click “Download Zip” so that it adds everything to your Downloads folder.
Once you’ve done that, find the downloaded zip file and double-click on it to activate all of its magical powers. This should generate a folder for you with the same name (javascript-starter-master), and now we’re pretty much ready to get our JavaScript on. Feel free to change that folder name to something else if you’re feeling adventurous!
Step 3: Change those keys!
Next – and this is important – you’ll want to double-click on the keys.js file inside your newly created javascript-starter-master/whatever-you-renamed-it-to folder so that you can edit it.
We just purchased a shiny new Lambo and we need the keys to show it off to everyone as we whiz by them. Fortunately, we have this from step 1! Copy and paste those into here, maintaining the single-quotes and the semicolons at the end and then save the file.
(P.S. at this point it’s probably a good idea to tell you not to share your keys with anyone else unless you can really, really trust them .. .kinda similar to a Lambo)
Step 4: Put this baby to the test!
Now that your keys are in place, all you’ll need to do is double-click on index.html, which will prompt one of your browsers to open it. The browser will read from this and your other files (a key reason why they need to be stored together in the same folder) and render this Monet-worthy canvas for you:
Looks a little blank at the moment but that’s about to change, and fast.
There’s a chance that you’ve created some Custom Models already, and if you have with the provided credentials they should be appearing in that “Custom” dropdown menu at the end. If not, it’ll be blank, and that’s OK. For now let’s do some testing with our General Model by entering a URL of a swimming ninja cat and clicking on “Predict a URL!”:
WHOA! There’s the picture itself and the top 20 predictions for it!
You can also change the Model by selecting a different radio button and hitting “Predict” again. This amazing little feline is obviously Safe For Work, but what about its color palette? Can you tell us that, Clarifai?
Boom.
Let’s test a local file now. Obviously, we all have a picture of Tom Cruise somewhere on our hard drives so let’s use that to test our Celebrity Model:
Looking GOOD T-C! A lot of people gave this guy flak over the years but he’s still got it.
You may be wondering to yourselves…"what the heck is that little Add Image to Application button below every result?” Let’s click it.
Suh-WEET! Now you’ve added Tom Cruise directly to your v2 application that is tied to these credentials. You can verify this by logging into our User Interface and clicking on your application. Pretty cool huh?
You can continue on from here and try out all of our models and even your Custom ones, demoing away at your heart’s content!
Happy JavaScript-ing!
