IBM Watson Salesforce Visual Recognition

In this Blog, I am going to explain how to Integrate Salesforce and IBM Watson Image Recognition.  Visual Recognition allows users to understand the contents of an image or video frame, answering the question: “What is in this image?” and “Are there similar images?” etc. The IBM Watson Visual Recognition service uses deep learning algorithms to analyze images for scenes, objects, faces, and other content. The response includes keywords that provide information about the content.A set of built-in classes provides highly accurate results without training. You can train custom classifiers to create specialized classes. You can also create custom collections of your own images, and then upload an image to search the collection for similar images. In this blog, we are going to use default classifiers to classify an image and then detect faces in an image. You can also preview a live version of this application. Some of the major highlights include

Object determination — Classification of things in the image
Face detection — Detect human faces, including estimation of age & gender
Text extraction — Extract text contained in the image
Celebrity identifier — Identity of the person if your image includes a public figure

1. Setup API Key for IBM Watson Visual Recognition

  1. Register for IBM Bluemix with US South or your preferred region.
  2. Log in to the IBM Bluemix.
  3. Select Create app, to start with the new applet
  4. Find Watson on Services tab
  5. On Watson services, select Visual Recognition API
  6. Click on Create to get started.
  7. On Service credentials, select on credential-1 and copy the API-key
    Once you get the API key you are completed with Bluemix console setup now we will turn to Salesforce.

2. Salesforce Setup

I am considering the case is having an image which we will use for Image Recognition. So let’s set up two new fields on the case as shown below. Upload_Image_URL__c – URL(255)
Image__c  formula   HYPERLINK( Upload_Image_URL__c ,IMAGE( Upload_Image_URL__c , “Case Image”))

3. Train a Custom Classifier

So not too much worried at this stage on the  Custom Classifier and trying to emphasize the out of the box default classifier with IBM Waston. You can consider to implement the custom classifier based on the business logic and wanted to implement your own image classification that fits your model like a product catalog.

4.Remote Site Settings

Add the Image Recognition services under Remote Site settings.

5.Recognition Image

Here is the simple visualforce page that shows how we can classify the images as shown below. You will get the result of each image with a prediction score and Classification. You can now use the class with the highest score in your application to label your image.

6. Code Walkthrough

Here is the code walkthrough for the apex controller. The below code is shown the simple way to build the endpoint URL of image Recognition services.

 public String buildImageRecognizationURL(String imageURL ,String API_KEY ){
        String baseURL = ''+API_KEY+'&url='+imageURL+'&version=2016-05-20';
        return baseURL ;

the below code is making an API call to Watson services along with the image URL

 HttpRequest req = new HttpRequest();
        String baseURL = buildImageRecognizationURL(c.Upload_Image_URL__c, '9c1be84069f7af00896771d0dfd8b1bb4c822d5b');
        Http http = new Http();
        HTTPResponse res = http.send(req);

Below Code is used to for parsing the JSON response data to show it the page

 public list<Classification> parseJson(String jsonRes){
        list<Classification> classif = new list<Classification>() ;
        Map<String, Object> m =(Map<String, Object>)JSON.deserializeUntyped(jsonRes);
        List<Object> a = (List<Object>)m.get('images');
        Map<String, Object> a2 =(Map<String, Object>)a[0];
        List<Object> a33 = (List<Object> )a2.get('classifiers') ; 
        Map<String, Object> a444 =(Map<String, Object>)a33[0];
        List<Object> a555= (List<Object>)a444.get('classes');
        for(Object o :a555){
            Map<String, Object> classiObj =(Map<String, Object>)o;
            Classification cNew = new Classification(); 
            for(String ss : classiObj.keySet()){
                    cNew.classificaions = (String)classiObj.get(ss) ;
                    cNew.percentage = (Decimal)classiObj.get(ss) ;
        return classif;
    public class Classification {
        public String classificaions {get;set;}
        public Decimal percentage {get;set;}

Here is corresponding visualforce page code

 <div class="slds-scope">
        <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                <tr class="slds-text-title_caps" style="padding: 0.5rem; color: rgb(51, 135, 133);">
                    <th scope="col">
                        <div class="slds-truncate" title="Classification"><b>Classification</b></div>
                    <th scope="col">
                        <div class="slds-truncate" title="prediction %"><b>prediction %</b></div>
                </tr> </thead>
                <apex:repeat value="{!fetchClassifications}" var="cls">
                        <th scope="row" data-label="Classification">
                            <div class="slds-truncate" > {!cls.classificaions}</div>
                        <td data-label="prediction %">
                            <div class="slds-truncate">

Github Repo is here below