Test visual recognition models with Clarifai's v2 API JavaScript starter

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:

image04

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:

image03

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:

image08

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. It’ll look like this at first …

image05

… 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:

image07

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!”:

image06

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?

image01

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:

image02

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.

image00

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!


Introducing the Clarifai Community forum, your new favorite place to geek out with other developers

Have you ever wanted to share all of your Clarifai-related thoughts, ideas, and prayers in one fancy centralized location? Do you dream of a place where you can collaborate with other users and make all your magical Clarifai dreams come true? Well, we hope so, because we have some bomb.com news for you guys …

Introducing the Clarifai Community, the interweb’s hottest new forum for artificial intelligence and image recognition discussions

Join the Clarifai Community forums to:

  • Get all your questions answered about A.I. and visual recognition
  • Meet like-minded developers and nerds who share mutual interests
  • Be the first to preview special alpha and beta Clarifai features and models
  • Learn how to get a job at Clarifai

The site is pretty intuitive but we’ll go over some of the basics for you. When you visit our community page, you’ll see a “Sign Up” button at the top right which will allow you to connect to our forum via Facebook, Git, or an email address. Sign up now to get the party started!

Next – after logging in, you’ll see this awesomeness:

image01

The horizontal menu below the Clarifai logo will help you navigate across all the sweet topics you can choose from (and add to). Latest will curate the hot threads for you, New will have the latest posts, Unread will show the posts you haven’t seen yet, Top will show the posts with the most comments, and Categories will sort out a nice list for you by, you guessed it, categories. You can also filter by a specific Category via the dropdown menu to the left labelled “all categories”!

To create a new topic in any of these categories, simply click the New Topic button on the top right, which will give you a cute little screen at the bottom with Title, Category, and Description fields. Our forum allows you to use HTML, images and even VIDEO embedding! Wow!

Another thing to note are the little Hamburger and Profile icons at the Top-Top right. The Hamburger will give you a list like this:

image00

… which is basically everything you see in the horizontal menu, plus a few other nifty links. This is where you can find stuff like who the admins are, our privacy guidelines, and some very cool keyboard shortcuts (40 in total!). You can also see a list of community users via the “Users” link on the top and click on any individual profiles to learn more about that person.

Speaking of which, the profile icon, which shows your username’s first letter by default, will show you all of your notifications from topics and also three little sub-buttons – bookmarks, messages, and preferences:

image02

Chances are you’ll be using the third one the most, as this essentially controls the bulk of your Community Experience! This will enable you to add a picture and cover photo, reset your password, fill in your bio, log out, and see all of the posts and topics you’ve ever created and/or responded to.

Lastly, we wanted to make this site as fun as possible (obviously) so we also added some gamification in the form of badges! Check out a sample of some of the sweet community swag you can earn:

image03

There are 30 badges in total and you can bet your bottom dollar that we’ll be giving a prize out to the person who collects all of them first.

Happy Community-ing!