Start tracking your progress
Trailhead Home
Trailhead Home

Add Image Recognition to the Cat Object

In this step, we add image recognition capabilities to the cat object.

Create a Lightning Component

  1. Click the gear ( Setup Gear), then select Developer Console.
  2. Click File > New > Lightning Component.
  3. Name the component EinsteinVision_Cat_Uploader.
  4. Click Submit.
  5. Replace the contents of the component with this code.
    <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" access="global" controller="EinsteinVision_Admin">
        <aura:attribute name="files" type="Object[]"/>
        <aura:attribute name="spinnerWaiting" type="Boolean" default="false"/>
        <aura:attribute name="image" type="String" />
        <aura:attribute name="recordId" type="Id" />
        <aura:handler name="init" value="{!this}" action="{!c.onGetImageUrl}" />
        <div class="slds-card">
            <div class="slds-p-left_medium slds-p-right_medium">
                <lightning:input aura:id="fileInput" type="file" name="file" multiple="false" accept="image/*;capture=camera" files="{!v.files}" onchange="{! c.onReadImage }"
                             label="Upload a cat image:"/>
                <img src="{!v.image}"/>
                <aura:if isTrue="{! v.spinnerWaiting }">
                    <lightning:spinner size="medium"/>
                </aura:if>
            </div>
        </div>
    </aura:component>
  6. Click the Controller button in the component palette on the right and replace the contents with this code.
    ({
        onReadImage: function(component, event, helper) {
            var files = component.get("v.files");
            if (files && files.length > 0) {
                var file = files[0][0];
                if (!file.type.match(/(image.*)/)) {
                    return alert('Image file not supported');
                }
                var reader = new FileReader();
                reader.onloadend = function() {
                    var dataURL = reader.result;
                    component.set("v.image", dataURL);
                    helper.onUploadImage(component, file, dataURL.match(/,(.*)$/)[1]);
                };
                reader.readAsDataURL(file);
            }
        },
        onGetImageUrl: function(component, event, helper) {
            helper.onGetImageUrl(component);
        },
    })
  7. Now click the Helper button in the palette and replace the contents with this code.
    ({
        onUploadImage: function(component, file, base64Data) {
            var action = component.get("c.getCatPrediction");
            var catId = component.get("v.recordId");
            action.setParams({
                catId: catId,
                fileName: file.name,
                base64: base64Data
            });
            action.setCallback(this, function(a) {
                component.set("v.spinnerWaiting", false);
                var state = a.getState();
                if (state === 'ERROR') {
                    console.log(a.getError());
                    alert("An error has occurred");
                } else {
                   $A.get('e.force:refreshView').fire();
                }
            });
            component.set("v.spinnerWaiting", true);
            $A.enqueueAction(action);
        },
        onGetImageUrl: function(component, file, base64Data) {
            var action = component.get("c.getImageUrlFromAttachment");
            var catId = component.get("v.recordId");
            action.setParams({
                catId: catId
            });
            action.setCallback(this, function(a) {
                var state = a.getState();
                if (state === 'ERROR') {
                    console.log(a.getError());
                    alert("An error has occurred");
                } else {
                    if (!a.getReturnValue()=='') {
                        component.set("v.image", "/servlet/servlet.FileDownload?file=" + a.getReturnValue());
                    }
                }
            });
            $A.enqueueAction(action);
        }
    })
  8. Click File > Save All.
  9. Close the Developer Console.

Add the Lightning Component to the Cat Layout

  1. From the App Launcher (App Launcher), find and select Cat Rescue.
  2. Click the Cats tab and select Amanda.
  3. Click the gear ( Setup Gear), then select Edit Page to open the Lightning App Builder.
  4. Drag the EinsteinVision_Cat_Uploader component onto the page.
  5. Click Save, then click Activate.
  6. Click Assign as Org Default, then click Next and Save.
  7. Click Back to return to the cat record.

Classify a Cat Image

Let’s see if the classification works by testing it with a cat image. Download this file to use in the next steps. 

  1. Click Upload Files and select the cat image file you downloaded, or drop the file on that area.
  2. After you upload the image, the record refreshes and populates the cat breed field.