evolving Streamlit in Snowflake: Branding your Native Apps

Welcome to the first part of our three-part series on taking your custom Snowflake Native App in Streamlit to the next level. Inspired by real-life problem-solving during our recent evolv Hackathon, this edition of “evolving Streamlit in Snowflake” will reveal a quick way to transform your app’s user experience by adding your brand to your app. Whether you’re a beginner or an expert, these techniques will elevate your app to new heights.

What is Streamlit?

Streamlit is an approachable open-source Python library that enables you to quickly build simple and robust data-centric applications. Streamlit has revolutionized data app development and sharing. Its simplicity, speed, and vibrant community have made it a game-changer for data professionals.

For those new to Streamlit, here’s a quick-start guide that will help you install and run your first app.

Brand It, and They Will Come

When developing a custom app, it is essential to explore branding and customization options to ensure a seamless user experience. By incorporating your logo into your Streamlit app, you establish authenticity and foster trust with users, ultimately enhancing their overall experience.

If you have attempted to show images in Streamlit, you are already aware that the Streamlit library offers a simple image function. This function allows you to display images or lists of images.

During our evolv Hackathon last month, we encountered a scenario where we wanted to display the evolv company logo at the top right corner of each presentation page. We quickly found that the simplest of solutions wasn’t the answer. Below is a snippet of the code using the base Streamlit image function.

Example:

import streamlit as st

cols = st.columns(5)

with cols[4]:
  img = 'data_evolved_logo.png'
  st.image(img)

To ensure that Streamlit can locate my image file, I have placed the image in the starting folder when calling Streamlit. In this case, my “Setup” folder. Then I test this code directly in Streamlit outside of the Snowflake platform by running this command in my terminal window:

streamlit run Setup/streamlit/Home.py

It displays the image as expected.

Now I deploy this same code to my Snowflake Native App package and create a Snowflake Native App from this package. When I run my app within Snowflake, it seems as if the image is not found.

To locate the images properly in Snowflake Native App packages, the images should be in the same stage location as the main file as defined in your Snowflake Native App setup.sql file.

Example:

CREATE STREAMLIT IF NOT EXISTS ux_schema.native_app_home
FROM '/streamlit'
MAIN_FILE = '/streamlit/Home.py';

Trust me, the image is there, but let me show you how I can make sure my Snowflake Native App package stage does include my image. I run the following command in a Snowsight worksheet to list the contents of the stage:

LIST @Native_App_Package.stage_content.Native_App_Package_stage/streamlit/;

Yep, the image is there and in the right location in the stage setup for my Snowflake Native App package.

So, it works in Streamlit, but not in Snowflake Native App. Huh?? 🤔

For those looking to enhance their apps with real-time collaboration, Snowflake’s sharing features are well worth exploring.

Let’s Do Something Else

That is ok, I will just go down another path. I am already using Plotly for other visual output so I will just use Plotly to present my image too. I just need to add a couple of other libraries and forge ahead. Here are the steps to enable this option:

• I use the Python Image Library to open the image from its location.
• I use NumPy to create an NDArray of the image.
• I use Plotly to present the NDArray of the image to the screen while disabling display labels, grids, etc on the Plotly chart.

Example:

import streamlit as st
import PIL.Image as image
import numpy as np
import plotly.express as px

cols = st.columns(5)

with cols[4]:
  img = 'data_evolved_logo.png'
  im_np = np.asarray(image.open(img))
  fig = px.imshow(im_np)
  fig.update_traces(hovertemplate = None,hoverinfo = "skip")
  fig.update_layout(width=300, height=150, margin=dict(l=0, r=0, b=0, t=0))
  fig.update_xaxes(showticklabels=False,showgrid=False,zeroline=False)
  fig.update_yaxes(showticklabels=False,showgrid=False,zeroline=False)
  st.plotly_chart(fig,config={'displayModeBar': False})

I run the local Streamlit version and make sure this still displays my image using the same command as before.

streamlit run Setup/streamlit/Home.py

Looks great! Now the real test. I will add this to my Snowflake Native App package and update my Snowflake Native App to make sure this solves my dilemma.

I go back into Snowsight and launch my data application and…

Now that’s what I am talking about! 🎉🎉

Edit: Shoutout to Dave Gibbon at Plotly for sharing!⭐That’s some great strategic partnership. 😉

Conclusion: Do Sweat the Small Stuff

With so many applications available today, it’s the little things that can make a big impact. It is about creating an immersive, unified experience for your users. Having your brand’s logo displayed on the interface of your Streamlit app makes a clear statement about your commitment to a polished and consistent brand image.

’Til Next Time!

I look forward to the next edition of evolving Streamlit as I continue to share tips and tricks, from basic to expert-level, for enhancing UX in Streamlit for your custom apps. Remember to keep experimenting, innovating, and sharing — as it is what makes our community so vibrant.

If you’re interested in how evolv can help you shape the future of Data, check out our last featured piece by Rose Ellison, “Join the AI Elite, Master the Untapped Power for GenAI,” or visit our blog. Feel free to drop your comments below and be a part of the conversation that is shaping the future of data apps.

###

evolv is a cloud-native consulting firm that brings a fresh perspective to help clients overcome #management and #technology challenges. We specialize in strategy, data & analytics, and digital transformations. Learn more at www.evolvconsulting.com.

For more about Chris Schneider, visit his profile or his Linked In.