Once we have a trained model, we can use the Salesforce Lightning Component to provide a user interface to the end user accessing the Salesforce community, sales, or service cloud to upload the image, and we can use the model to automatically recognize the image.

We will be using Prediction with the image base64 String API (https://metamind.readme.io/docs/prediction-with-image-base64-string). The component can be dropped onto an App Builder or Community Builder, and it will require admins to input modelId.

The Lightning Component code can be found at https://github.com/PacktPublishing/Learning-Salesforce-Einstein/blob/master/Chapter6/SalesforceEinsteinVision/src/aura/EinsteinVisionImagePredictor/EinsteinVisionImagePredictor.cmp.

The backend Apex code can be found at https://github.com/PacktPublishing/Learning-Salesforce-Einstein/blob/master/Chapter6/SalesforceEinsteinVision/src/classes/EinsteinVisionImagePrediction.cls.

The component markup uses lighnting:input with type="file" shown as follows:

    <lightning:input type="file" label="Upload your broken device"
      name="file" multiple="false" accept="image/png,image/jpge,
      image/jpg" onchange="{! c.handleFilesChange }"/>

The controller calls the helper function, as shown here:

    ({
       init : function(component, event, helper) {
         var toggleText = component.find("spinner");
         $A.util.addClass(toggleText,'toggle');
         },
         handleFilesChange : function(component, event, helper) {
           helper.callImagePredictor(component, event);
         },
         showSpinner : function (component, event, helper) {
           var toggleText = component.find("spinner");
            $A.util.removeClass(toggleText,'toggle');
         },
         hideSpinner : function (component, event, helper) {
           var toggleText = component.find("spinner");
           $A.util.addClass(toggleText,'toggle');
         }
    })

The key here is that we send the base64 encoded string to the Apex. The helper JavaScript code for this is as follows:

    ({

        callImagePredictor : function(component, event, helper) {
          var files = event.getSource().get("v.files");
          var preview = document.querySelector('img');
          var file = files[0];
          var fr = new FileReader();
          var self = this;
          fr.onload = function() {
            var fileContents = fr.result;
            preview.src = fr.result;
            var base64Mark = 'base64,';
            var dataStart = fileContents.indexOf(base64Mark) +
               base64Mark.length;
            fileContents = fileContents.substring(dataStart);
            self.upload(component, file, fileContents);
          };
          fr.readAsDataURL(file); 
        },
        upload: function(component, file, fileContents) {
          var action = component.get("c.predict"); 
          action.setParams({
            fileName: file.name,
            base64Data: encodeURIComponent(fileContents), 
            contentType: file.type,
            modelId : component.get("v.modelId")
          });
          action.setCallback(this, function(response) {
             var result = response.getReturnValue();
             console.log(result);
             console.log(result.probabilities[0].label);
             component.set("v.imageName",
               result.probabilities[0].label);
          });
          $A.enqueueAction(action); 
        }
     })

The screenshot shows an example where the administrator has dropped the Smart Image Recognition Lightning Component on a customer community (a portal to request support and help) for end users to upload their broken asset, and the component is smart enough to recognize this image.

The functional Lightning Component, once an image is uploaded, can smart predict from the image the type of technician needed to address the issue: