Build Simple App For Deep Learning Inference Using App Designer

Use Prebuilt App

This example shows how to build an app from scratch. To view a prebuilt version of the app, you can either open the app in App Designer by opening the imagePredictor supporting file or run the app by calling imagePredictor in the Command Window. To access the supporting files, you must open this example in MATLAB®. You must also run this example first, before using the app. To use the app, click the Import Image button and select sherlock.jpg. Then click Classify Image to classify the image with the network.

The next steps show how to create this app.

Save Pretrained Network

Load the pretrained SqueezeNet image classification network. This network can classify RGB images into 1000 different classes. Save the network and class names to a MAT file.

[net, classNames] = imagePretrainedNetwork("squeezenet");
save("TrainedNetwork.mat","net","classNames");

Build App

App Designer is an interactive development environment for designing an app layout and programming its behavior. You can use App Designer to interactively create, edit, and share apps.

Open App Designer. In the MATLAB toolstrip, select Home > New > App. Alternatively, in the MATLAB Command Window, type appdesigner.

App Designer has two views for creating an app:

You can switch between the two views using the toggle buttons in the upper-right corner of App Designer.

Load Network Into App

To perform inference, the app needs access to the trained network. In this example, load the network from a file into a property of the app.

In App Designer, switch to Code View.

In the Toolstrip, select Property > Private Property to create a new private property. Rename the property Network. Add another private property ClassNames to store the names of the classes that the network has been trained on.

To add a new startup function, in the App Designer toolstrip, click Callback. To use the default startup function, click Add Callback. The startup function callback runs when a user first opens the app. Use the startupFcn callback to load your trained network into the app.

Replace the contents of the startupFcn function with the following code. This function loads the trained network and class names into the Network and ClassNames properties. The load function loads the variables in a structure array where each variable is in a field. You can access data in a field using dot notation of the form structName.fieldName.

function startupFcn(app)
  savedData = load("TrainedNetwork.mat");
  app.Network = savedData.net;
  app.ClassNames = savedData.classNames;
end

Add Controls

To use the app for inference, add controls that allow a user to import an image from a file and classify it. In App Designer, switch to Design View.

Define Data Code

The next step is to define the code behind each of the controls. Click the Code View button above the canvas to edit your app code. Program your app behavior using callback functions. A callback function is a function that executes when the app user performs a specific interaction, such as clicking the Load Image button.

First, add a new private property to store the loaded data. Click Property > Private Property. Name this property Data. Next, right-click app.ImportImageButton in the Component Browser and select Callbacks > Add ButtonPushedFcn.

Replace the contents of the your callback function with the following code. This function:

function ImportImageButtonPushed(app, event)
% Read a PNG or JPEG image in from a file selection dialog box
[file, location] = uigetfile({'*.jpg'; '*.jpeg'; '*.png'; });
% Check for file
if isempty(file)
    return
end

% Store the image and display it
app.Data = imread(fullfile(location, file));
app.Image.ImageSource = app.Data;
app.ImportanimagetoclassifyLabel.Text = "To see network prediction, click Classify Image.";
end

Define Inference Code

Add code to perform inference with the network. Right-click app.ClassifyImageButton in the Component Browser and click Callbacks > Add ButtonPushedFcn. Replace the contents of the your callback function with the following code. This function:

function ClassifyImageButtonPushed(app, event)
% Preprocess data
inputSize =  app.Network.Layers(1).InputSize;
X = single(imresize(app.Data,inputSize(1:2)));

% Perform inference
scores = predict(app.Network, X);
[label, topScore] = scores2label(scores, app.ClassNames);
% Display result
app.ImportanimagetoclassifyLabel.Text = sprintf("Class: %s \nScore: %.2f", label, topScore);
end

The app is now ready to use.

Use App

To save and run the app, click Run. Alternatively, call the name of the app in the Command Window. To use the app, click the Import Image button and select sherlock.jpg. Then click Classify Image to classify the image with the network.

The focus of this example is using deep neural networks for image classification, but you can extend the app by adapting the components and code from this example. For example, if you are performing classification of signal data, you can use an Axes component to display your signal data. Or, if you want to classify many images, then you can add the ability to import many images at once or to import an imageDatastore object.