The Virtualitics AI Platform (VAIP) has internal support for generating plots, infographics, and dashboards to create a more visually appealing representation of a User’s data. Additionally, it may be helpful to include images as part of that visual support.
In addition to adding images, while the VAIP natively supports Plotly plots to help provide visuals and interaction, you may want to generate your own plots using Python libraries such as seaborn or matplotlib.
Getting Images into an App
For both external URL images and seaborn / matplotlib plots, you will need to add the following import statement into your App code:
from virtualitics_sdk import Image, ...
from PIL import Image as PILImage
from io import BytesIO
import requests # external images only!
External URL Images
In order to display an image from an external URL in your App, you will need to add import requests to the top of the file, as shown above.
From here, in the part of the Step where you would like to display the image, add the following lines:
url = 'https://virtualitics.com/wp-content/uploads/2022/03/genericblogpost.png'
response = requests.get(url)
img = PILImage.open(BytesIO(response.content))
my_image_element = Image(content=img, title="Virtualitics Header",
description="External URL Image.")
Seaborn/Matplotlib
At the top of your App's Python file, add the following convenience function:
def fig2img(fig):
"""Convert a Matplotlib figure to a PIL Image and return it"""
buf = io.BytesIO()
fig.savefig(buf)
buf.seek(0)
img = PILImage.open(buf)
return img
Display the Plot
Inside of the Step where you would like to display the Plot, add the following lines:
# Most likely you aren't using clustermap but it should work the same for other plot types
g = sns.clustermap(data, method='ward', figsize=(12, 8))
plot_as_bytes = fig2img(g.fig)
my_image_element = Image(content=plot_as_bytes, title="My Title Here",
description="Describe the content.")
What to Expect
The image will be displayed in your App, as shown below.