ObjectRecognition in Lightning Web Component

ObjectRecognition.css

.lgc-bg {
    background-color: rgb(242, 242, 242);
}

.slds-spinner_container {
    top: 50% !important;
    bottom: 50% !important;
}

ObjectRecognition.html

<template>
    <lightning-card title="Object Identification in Image" icon-name="action:record">
        <div class="slds-m-around_large">
            <div if:false={isLoaded} class="slds-is-relative">
                <div class="slds-spinner_container slds-align_absolute-center">
                    <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand">
                      <span class="slds-assistive-text">Loading</span>
                      <div class="slds-spinner__dot-a"></div>
                      <div class="slds-spinner__dot-b"></div>
                    </div>
                  </div>
            </div>
            <lightning-layout vertical-align="slds-grid_vertical-align-start">
                <lightning-layout-item size="6" flexibility="auto" padding="around-small">
                    <lightning-combobox
                    name="progress"
                    label="Cases"
                    value={selectedCase}
                    options={selectOptions}
                    onchange={handleCaseChange}></lightning-combobox>

                </lightning-layout-item>
                <lightning-layout-item size="8" flexibility="auto">
                </lightning-layout-item>
            </lightning-layout>
            <lightning-layout vertical-align="center" horizontal-align="spread">
                    <lightning-layout-item size="6" flexibility="auto" padding="around-small">
                        <iframe src={imageUrl} width="500px" height="400px"></iframe>           
                    </lightning-layout-item>
                    <lightning-layout-item size="1">
                            <div class="slds-p-around_medium lgc-bg-inverse">
                                <lightning-button-icon icon-name="standard:macros" size="medium" onclick={getObjectDetail} ></lightning-button-icon>
                        </div>
                    </lightning-layout-item>
                    <lightning-layout-item size="5"> 
                        <div style="height: 300px;">
                            <lightning-datatable
                                    key-field="id"
                                    data={data}
                                    columns={columns}>
                            </lightning-datatable>
                        </div> 
                    </lightning-layout-item>
            </lightning-layout>
        </div>
           
    </lightning-card>
</template>

ObjectRecognition.js

import { LightningElement,wire,track,api } from 'lwc';
import getImage from '@salesforce/apex/ObjectRecognizer.getImage';
import getObjectInformation from '@salesforce/apex/ObjectRecognizer.getObjectInformation';
import getObjectCases from '@salesforce/apex/ObjectRecognizer.getObjectCases';

const columns = [
    { label: 'Object Name', fieldName: 'ObjectName' },
    { label: 'Accuracy Score', fieldName: 'Score'}
];

export default class ObjectRecognition extends LightningElement {
    @api isLoaded = false;
    @api recordId;
    imageUrl;
    downloadUrl;
    data = [];;
    error;  
    selectOptions=[];
    columns=columns;
    @track selectedCase;

    @wire(getObjectCases)
    lists({ error, data }) {
        if (data) {
            for(const list of data){
                const option = {
                    label: list.Id,
                    value: list.Id
                };
                this.selectOptions = [ ...this.selectOptions, option ];
            }
        } else if (error) {
            console.error(error);
        }
        this.isLoaded=true;
    }
    handleCaseChange(e)
    {
        this.isLoaded=false;
        this.recordId=e.detail.value;
        getImage({id: e.detail.value})
        .then((data,error) => {
            if (data) {
                this.imageUrl=data.PublicUrl;
                this.downloadUrl=data.DownloadableUrl;
                this.error = undefined;
                this.isLoaded=true;
            } else if (error) {
                this.error = error;
                console.log('Error:'+ JSON.stringify(error));
                this.isLoaded=true;
            }
        });
    }
    getObjectDetail(event)
    {
        this.isLoaded=false;
        getObjectInformation({ record: this.recordId})
        .then((data,error) => {
           if (data) {
                this.data=data;
            } else {
                this.error = error;
            }
            this.isLoaded=true;
        })
        .catch(error => {
            this.error = error;
            this.isLoaded=true;
        });
    }
}

ObjectRecognition.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
    </targets>    
</LightningComponentBundle>