Once you have built your AI App, including creating Steps, Pages, Sections, and Elements, you’ll need to put on the finishing touches. This includes adding a Title, Cover Image, and Description for your App, which will display on the Virtualitics AI Platform (VAIP) Home Page, finalizing all of your Steps, and finally tying all of the Steps together.

Adding a Home Page Description and Cover Image

With your AI App built, users will access it on the VAIP Home Page. Users will see the App name, a brief description, and a Cover Image, as shown below.

Home Page Cover Image

App Home Page Cover Images can be added via including a stock URL image or by including a locally-saved image.

Note: The recommended size of an App Home Page Cover Image is 400x800px.

Depending on your choice of using a URL image or a locally-saved image, insert the code below:

Using a URL:

from virtualitics_sdk import App

EXAMPLE_URL = "https://blogs.3ds.com/biovia/wp-content/uploads/sites/27/2020/07/shutterstock_1141709903-scaled.jpg"
app = App(name="New App Title",description="New App Description", image_path=EXAMPLE_URL)

Using a Local Image:

from virtualitics_sdk import App
from projects.image_helpers import get_img_base64

# Store your images in a folder.
# In this example we store the image in the 'project_images' folder.
img = get_img_base64("project_images/image_name.jpeg")
app = App(name="New App Title",description="New App Description", image_path=img)

What to Expect

With a Cover Image, App name, and description, the code will look like (this example is from the Hello World Tutorial App):

# Instantiate app and and assign cover image
image_link = (
    "https://predict-tutorials.s3-us-gov-west-1.amazonaws.com/hello_world_tile.jpeg"
)
hello_world_app = App(
    name="Hello World!",
    description= "A basic introduction to the design and function of flows.",
    image_path=flow_image_link,
)

Once your App is deployed, this is what your App will look like on the VAIP Home Page:

Finalizing Steps

Once you have created all of the Steps that are planned to run in the App, you’ll need to finalize them. For more on the initial creation of Steps, see this article.

To finalize, or build, your Steps, ensure you include this code (this example is from the Hello World App):

# Build data upload step
data_upload_section = Section("", [])
data_upload_page = Page(
    "Getting Data Into the Platform", [data_upload_section]
)
data_upload_step = DataUpload(
    title="Data Upload",
    description="Upload the S&P 500 data.",
    parent="Inputs",
    type=StepType.INPUT,
    page=data_upload_page,
)

# Build query step
data_query_section = Section("", [])
data_query_page = Page(
    "Additional Inputs and Parameters", [data_query_section]
)
data_query_step = DataQuery(
    title="Additional Inputs",
    description="Build data query.",
    parent="Inputs",
    type=StepType.INPUT,
    page=data_query_page,
)

# Build data visualization step
data_visualization_content = Section("", [])
data_visualization_page = Page(
    "Displaying Analytics through Page Elements",

    [data_visualization_content],
)
data_visualization_step = DataVisualization(
    title="Displaying Analytics through Page Elements",
    description="Show time-series of Dataset and perform preprocessing steps.",
    parent="Analytics and Page Elements",
    type=StepType.RESULTS,
    page=data_visualization_page,
)

# Build additional elements step
additional_elements_content = Section("", [])
additional_elements_page = Page(
    "Displaying Analytics through Page Elements",

[data_visualization_content],
)
additional_elements_step = CreateAdditionalElements(
title="Additional Elements and Events",
    description="Create additional elements for demonstration.",
    parent="Analytics and Page Elements",
    type=StepType.RESULTS,
    page=additional_elements_page,
)

# Build asset saving step
save_assets_content = Section("", [])
save_assets_page = Page("Saving Assets", [save_assets_content])
save_assets_step = SaveAssets(
    title="Saving Assets",
    description="Read data from prior step and save as asset.",
    parent="Analytics and Page Elements",
    type=StepType.INPUT,
    page=save_assets_page,
)

Chaining Steps Together

First, confirm you’ve correctly built all of your Steps. Ensure you’ve included the code necessary to incorporate all elements of each Step as well as the code to build the Step itself. For more information about creating Steps, see this article.

If your App contains multiple Steps, you’ll need to chain them together so the user can go through your App Flow the intended order.

To do so, include this code, using the .chain function (this example is from the Hello World App):

# Chain together steps of flow
hello_world_app.chain(
    [
        data_upload_step,
        data_query_step,
        data_visualization_step,
        additional_elements_step,
        save_assets_step,
    ]
)

This will result in your App displaying multiple Steps (shown below) and will allow the user to go through the multiple Steps in the order that you’ve defined.

Once you’ve added your App Name, Description, and Cover Image, and finalized and connected your Steps, you’ll deploy your App using the Command Line Interface (CLI). For more on deploying your App, see this article.