Cat オブジェクトへの画像認識の追加

このステップでは、Cat (猫) オブジェクトに画像認識機能を追加します。

Lightning コンポーネントを作成する

  1. ギア (設定ギア) をクリックして、[Developer Console (開発者コンソール)] を選択します。
  2. [File (ファイル)] > [New (新規)] > [Lightning Component (Lightning コンポーネント)] をクリックします。
  3. コンポーネントに「EinsteinVision_Cat_Uploader」と名前を付けます。
  4. [Submit (実行)] をクリックします。
  5. コンポーネントの内容を次のコードで置き換えます。
    <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. 右のコンポーネントパレットで [CONTROLLER (コントローラ)] ボタンをクリックして、内容を次のコードで置き換えます。
    ({
        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. 次に、パレットで [HELPER (ヘルパー)] ボタンをクリックして、内容を次のコードで置き換えます。
    ({
        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. [File (ファイル)] > [Save All (すべて保存)] をクリックします。
  9. 開発者コンソールを閉じます。

Cat レイアウトに Lightning コンポーネントを追加する

  1. アプリケーションランチャー (アプリケーションランチャー) で、[Cat Rescue] を見つけて選択します。
  2. [Cats (猫)] タブをクリックして、[Amanda] を選択します。
  3. ギア (設定ギア) をクリックし、[Edit Page (編集ページ)] を選択して Lightning アプリケーションビルダーを開きます。
  4. EinsteinVision_Cat_Uploader コンポーネントをページにドラッグします。
  5. [Save (保存)] をクリックし、[Activate (有効化)] をクリックします。
  6. [Assign as Org Default (組織のデフォルトとして割り当て)] をクリックし、[Next (次へ)] をクリックしてから、[Save (保存)] をクリックします。
  7. [Back (戻る)] 戻るボタン をクリックして Cat (猫) レコードに戻ります。

猫の画像を分類する

猫の画像でテストを行い、分類が正常に行われるかどうかを確認してみましょう。次のステップで使用するこちらのファイルをダウンロードします。 

  1. [Upload Files (ファイルをアップロード)] をクリックして、ダウンロードした猫の画像ファイルを選択するか、その領域にファイルをドロップします。
  2. 画像をアップロードすると、レコードが更新され、[Cat Breed (猫の品種)] 項目に入力されます。
無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる