Peltarion

# Create a no-code AI app

Build a simple app based on your trained Peltarion Platform model.

What do you do once you’ve built an AI model? If you’ve ever wondered what comes next and how to deploy an AI project in an app, this tutorial is for you.
Build an app that can use your Peltarion Platform AI model to classify an image.

With this type of app, you can deploy a model you’ve built on the platform and use it in an app.
If you don’t yet have a model to deploy you can use ours (or build your own by starting with one of our tutorials). Everything will be done on the Bubble platform without a single line of code.

- This tutorial requires no prior app-building or coding knowledge.
- This will take about 20 minutes to build if you already have a finished model.

## Use our deployed AI model or create your own

Use our model
If you use our model, you will get a URL and a Token later in this tutorial. Our model has been trained to detect the type of car damage in a picture of a car. It is based on a case we did with an insurance company where they used to have to go through thousands of images manually, now it is handled by the AI model we built with them.

Build and deploy your own model
If you want to use your own model, you’ll have to start by building an image classification model on the Peltairon Platform. One idea is to do our car damage tutorial or plant disease tutorial, these tutorials will show you how to build and deploy an image classification model.

## Create a new app with Bubble

1. Create an account on bubble.io.

2. When you get in, you’ll be taken through a tutorial to get you started. You can do the intro now if you want, but you don’t have to since we have detailed instructions below for this particular app.

Note: The Bubble interface may change, but the functionality should be the same. So bare with us if our description differs a bit from what you see on your screen.

## Add the Peltarion plugin to Bubble

1. Go to the Plugins tab, and then click Add plugins.

2. Search for Peltarion.

3. Click Install to install our plugin.

4. Click Done.

## Design the app

Go to the Design tab.

• One Picture Uploader input form at the top on the canvas.

• Two Text elements next to each other beneath the picture uploader.

• One Button element at the bottom.

2. Double-click the left text element and change the name to TextClass (from Text A).
Note: This is the title of the text element, located at the top of the dialog, just above the field that says …edit me….

3. Double-click the right text element and change the name to TextValue in the same way.

4. Double-click the button and change the name to Classify damage.
Click …​edit me…​ and change the text to Classify damage.

## Create the workflow

Select the Classify damage-button and click the Start/Edit workflow button in the Property Editor. Now, the Workflow tab opens.

Under the bar, there’s a label Click here to add an action…​. Click it, and select Plugins and then Peltarion.

### Call the Peltarion model

This is the dialog where you’ll need the url, token and parameters - either from your own model in the Peltarion platform, or from our pre-trained model, which we have posted the keys for here.

url
https://a.gcp-eu-west-1.platform.peltarion.com/deployment/a6272d59-55d4-4942-9cb9-873dee459bd3/forward
(Note: this URL will not take you to a website - it is only to be used in the app to call the model)

token:
378b2218-ef97-4fe0-b600-2996b7b49c34

Key/Value/Type
There is a list of key/value/type combinations, numbered for each possible input. For the car damage case, we only have one input (the image) so we’ll only add values to Key 1, Value 1 and Type 1:

• Key 1: This is the name of our input variable, as named on the Peltarion platform.
We trained our model with the input named image, so we’ll set this value to image.
Note: If you are building an app with a different model, it is very important to check that this value has the same name as your input. It’s case-sensitive. The name of your input can be found on the deployment page of the Peltarion Platform under parameters.

• Value 1: This is the Bubble element that holds the data we want to classify.
We want to send the image that we upload using the picture uploader. This is a dynamic value, meaning it changes depending on what we upload.
Click this field and select Picture Upload A from the dropdown list. Now, click More…​ which appears in the input for Value 1 and select 's value from the dropdown. This means we will now send the content of our uploaded image to our classifier.

• Type 1: Select image from the dropdown.

When done, close the dialog.

## Extract data from the AI model

We want to extract two things from the model. The first thing is the class, which in this case is the type of damage. The second is the value of how strong a prediction the model makes for the most probable class in the range from 0-1. The closer to 1 the stronger prediction.

### Extract the class from the plugin:

1. There’s a Step 1 in our workflow. Click the label next to it to add another action.

2. From the dropdown, select Element Actions and then Set state.

3. From the dialog that appears, select your text element TextClass.

4. From Custom state, select Create new custom state with name Key and state type text.

5. Click Create.

6. Click the field next to Value and select Result of Step 1 (Peltarion) and then 's key.

7. Close the dialog.

### Extract the value from the plugin:

1. Click the next step in the workflow to add another action.

2. From the dropdown, select Element Actions and then the Set state element.

3. From the dialog that appears, select your text element, TextValue.

4. From Custom state, select Create new custom state with name Value and state type number.

5. Click Create.

6. Click the field next to Value and select Result of Step 1 (Peltarion) and then 's val.

7. Close the dialog.

## Use predictions in app

Now, we want to display the result in our text labels.

1. Go to the Design tab.

2. Double-click on TextClass text element and click the text area where it currently says …​edit me…​.
Select Insert dynamic data then select TextClass and then 's Key.

3. Double-click on TextValue text element and click the text area where it currently says …​edit me…​.
Select Insert dynamic data then select TextValue and then 's Value.

## Test the app

Now, we’re done and it’s time to test our app! Click the Preview button to open your app in a new tab.

Upload an image and click Classify damage button. The app now displays what kind of car damage the image shows and how certain the model is. The higher the value the better.

## Ideas for next steps

We suggest that you browse some other Peltarion tutorials. There are plenty of tutorials that can be adjusted to fit a new use case and then made into an app:

## What you’ve learned

Today you built a web app that calls an AI model from the Peltarion Platform. Awesome work!