DEV Community

Tsubasa Kanno
Tsubasa Kanno

Posted on • Updated on

Image search with Streamlit in Snowflake (SiS) Part 1 - Creating an image gallery app -

Introduction

The world is full of unstructured data such as documents, images, videos, and audio files. In the realm of data utilization, these unstructured data are rarely used as-is. Instead, they are often transformed into structured data by extracting metadata before being put to use.

In this article, we'll explore how to implement image search using Streamlit in Snowflake. As a first step, we'll create an image gallery app to demonstrate how easily image data can be utilized with Streamlit in Snowflake.

Note: This article represents my personal views and not those of Snowflake.

Feature Overview

Goals

  • *Display image data using Streamlit in Snowflake
  • Add descriptions to images using Streamlit in Snowflake
  • Generate vector data based on image descriptions
  • Perform image search using Streamlit in Snowflake

*: Scope for Part 1

Final Result for Part 1

Image Gallery Preview
Image gallery using personal photos

Prerequisites

  • A Snowflake account

Basic Concepts

Options for Displaying Images in Streamlit in Snowflake

There are mainly five options for displaying images in Streamlit in Snowflake:

  1. Use Streamlit in Snowflake's default internal stage
  2. Use another internal stage
  3. Use an external stage
  4. Save images as text data in a table
  5. Reference images from external sites

We'll cover methods 1 and 2 in this article. (Methods 3-5 will be omitted)

1. Using Streamlit in Snowflake's Default Internal Stage

This is the simplest method. The Streamlit in Snowflake code is also straightforward, so we'll implement this method in this article.

When you create a Streamlit in Snowflake application, an internal stage is automatically created. I uploaded an image file named test_image.jpg to this internal stage.

Upload Image to SiS App Internal Stage
Uploading an image to the SiS app's internal stage

Here's the minimal Streamlit in Snowflake source code to display this image:



import streamlit as st
from snowflake.snowpark.context import get_active_session

# Get Snowflake session
session = get_active_session()

# Display the image
st.image('test_image.jpg')


Enter fullscreen mode Exit fullscreen mode

The result looks like this:

Execution Result
Execution result

2. Using Another Internal Stage

While Streamlit in Snowflake's default internal stage is convenient, it's limited to a single application. For image data that needs to be shared across multiple applications, it's useful to create a separate internal stage for storing images.

In Snowsight, select a schema, then choose Create > Stage > Managed by Snowflake.

Create Internal Stage in Snowsight
Creating an internal stage from Snowsight

Enter a stage name, enable the directory table, check server-side encryption, and click create. Always enable server-side encryption as we'll be using signed URLs for access.

Set Internal Stage Properties
Setting internal stage properties

Here's the minimal Streamlit in Snowflake source code to display this image:



import streamlit as st
from snowflake.snowpark.context import get_active_session

# Get Snowflake session
session = get_active_session()

# Generate signed URL
img_df = session.sql(f"""
SELECT
RELATIVE_PATH AS FILE_NAME,
GET_PRESIGNED_URL(@IMAGE, RELATIVE_PATH) AS IMG_URL
FROM DIRECTORY(@IMAGE)
"""
).collect()

# Display the image
st.image(img_df[0]["IMG_URL"])


Enter fullscreen mode Exit fullscreen mode

The execution result is similar to method 1, so it's omitted.

Steps

Create a New Streamlit in Snowflake App

Click on "Streamlit" in the left pane of Snowsight, then click the "+ Streamlit" button to create a SiS app.

Once the SiS app is launched, check the URL displayed in the browser. The end of the URL will be:



https://(omitted)/streamlit-apps/<DB_NAME>.<SCHEMA_NAME>.<STREAMLIT_OBJECT_NAME>


Enter fullscreen mode Exit fullscreen mode

Note down the Streamlit object name.

Upload Images to the Default Internal Stage

Upload images to the internal stage automatically created when you create a Streamlit in Snowflake app. The internal stage name is the Streamlit object name you noted earlier. In this case, I created a /image prefix (folder) and uploaded 26 photos into it.

Upload Images to /image
Uploading images under /image

Run the Streamlit in Snowflake App

Copy and paste the following code into the Streamlit in Snowflake app's edit screen:



import streamlit as st
import os
from snowflake.snowpark.context import get_active_session

# Get Snowflake session
session = get_active_session()

# Streamlit page configuration
st.set_page_config(layout="wide", page_title="Image Gallery")

# Application title
st.title("Image Gallery")

# Image folder path
IMAGE_FOLDER = "image"

# Function to get image data
@st.cache_data
def get_image_data():
image_files = [f for f in os.listdir(IMAGE_FOLDER) if f.lower().endswith(('.png', '.jpg', '.jpeg', '.gif'))]
return [{"FILE_NAME": f, "IMG_PATH": os.path.join(IMAGE_FOLDER, f)} for f in image_files]

# Select number of columns
num_columns = st.slider("Width:", min_value=1, max_value=5, value=4)

# Display gallery
img_df = get_image_data()
cols = st.columns(num_columns)
for i, img in enumerate(img_df):
with cols[i % num_columns]:
st.image(img["IMG_PATH"], caption=None, use_column_width=True)

Enter fullscreen mode Exit fullscreen mode




Conclusion

I hope you found it relatively easy to create an image gallery. However, we haven't yet fully utilized the image data. In the next article, we'll add structured data to the images and demonstrate the potential for image utilization.

Next Article

https://dev.to/tsubasa_tech/image-search-with-streamlit-in-snowflake-sis-part-2-automatically-generate-image-captions--2go5

Promotion

Snowflake What's New Updates on X

I'm sharing updates on Snowflake's What's New on X. I'd be happy if you could follow:

English Version

Snowflake What's New Bot (English Version)

Japanese Version

Snowflake's What's New Bot (Japanese Version)

Change Log

(20240922) Initial post

Original Japanese Article

https://zenn.dev/tsubasa_tech/articles/1e6dd562777481

Top comments (0)