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:
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.
Step 3: Change those keys!
… which is cool and all, but not really that helpful for us. 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?
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!