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

Image search with Streamlit in Snowflake (3 Part Series)

1 Image search with Streamlit in Snowflake (SiS) Part 1 – Creating an image gallery app –
2 Image search with Streamlit in Snowflake (SiS) Part 2 – Automatically generate image captions –
3 Image search with Streamlit in Snowflake (SiS) Part 3 – Add vector search function for images –

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 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.

Uploading an image to the SiS app’s internal stage

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

<span>import</span> <span>streamlit</span> <span>as</span> <span>st</span>
<span>from</span> <span>snowflake.snowpark.context</span> <span>import</span> <span>get_active_session</span>
<span># Get Snowflake session </span><span>session</span> <span>=</span> <span>get_active_session</span><span>()</span>
<span># Display the image </span><span>st</span><span>.</span><span>image</span><span>(</span><span>'</span><span>test_image.jpg</span><span>'</span><span>)</span>
<span>import</span> <span>streamlit</span> <span>as</span> <span>st</span>
<span>from</span> <span>snowflake.snowpark.context</span> <span>import</span> <span>get_active_session</span>

<span># Get Snowflake session </span><span>session</span> <span>=</span> <span>get_active_session</span><span>()</span>

<span># Display the image </span><span>st</span><span>.</span><span>image</span><span>(</span><span>'</span><span>test_image.jpg</span><span>'</span><span>)</span>


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

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.

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.

Setting internal stage properties

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

<span>import</span> <span>streamlit</span> <span>as</span> <span>st</span>
<span>from</span> <span>snowflake.snowpark.context</span> <span>import</span> <span>get_active_session</span>
<span># Get Snowflake session </span><span>session</span> <span>=</span> <span>get_active_session</span><span>()</span>
<span># Generate signed URL </span><span>img_df</span> <span>=</span> <span>session</span><span>.</span><span>sql</span><span>(</span><span>f</span><span>"""</span><span> SELECT RELATIVE_PATH AS FILE_NAME, GET_PRESIGNED_URL(@IMAGE, RELATIVE_PATH) AS IMG_URL FROM DIRECTORY(@IMAGE) </span><span>"""</span>
<span>).</span><span>collect</span><span>()</span>
<span># Display the image </span><span>st</span><span>.</span><span>image</span><span>(</span><span>img_df</span><span>[</span><span>0</span><span>][</span><span>"</span><span>IMG_URL</span><span>"</span><span>])</span>
<span>import</span> <span>streamlit</span> <span>as</span> <span>st</span>
<span>from</span> <span>snowflake.snowpark.context</span> <span>import</span> <span>get_active_session</span>

<span># Get Snowflake session </span><span>session</span> <span>=</span> <span>get_active_session</span><span>()</span>

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

<span># Display the image </span><span>st</span><span>.</span><span>image</span><span>(</span><span>img_df</span><span>[</span><span>0</span><span>][</span><span>"</span><span>IMG_URL</span><span>"</span><span>])</span>


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>
https://(omitted)/streamlit-apps/<DB_NAME>.<SCHEMA_NAME>.<STREAMLIT_OBJECT_NAME>


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.

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:

<p><span>import</span> <span>streamlit</span> <span>as</span> <span>st</span><br> <span>import</span> <span>os</span><br> <span>from</span> <span>snowflake.snowpark.context</span> <span>import</span> <span>get_active_session</span></p>
<p><span># Get Snowflake session<br> </span><span>session</span> <span>=</span> <span>get_active_session</span><span>()</span></p>
<p><span># Streamlit page configuration<br> </span><span>st</span><span>.</span><span>set_page_config</span><span>(</span><span>layout</span><span>=</span><span>"</span><span>wide</span><span>"</span><span>,</span> <span>page_title</span><span>=</span><span>"</span><span>Image Gallery</span><span>"</span><span>)</span></p>
<p><span># Application title<br> </span><span>st</span><span>.</span><span>title</span><span>(</span><span>"</span><span>Image Gallery</span><span>"</span><span>)</span></p>
<p><span># Image folder path<br> </span><span>IMAGE_FOLDER</span> <span>=</span> <span>"</span><span>image</span><span>"</span></p>
<p><span># Function to get image data<br> </span><span>@st.cache_data</span><br> <span>def</span> <span>get_image_data</span><span>():</span><br> <span>image_files</span> <span>=</span> <span>[</span><span>f</span> <span>for</span> <span>f</span> <span>in</span> <span>os</span><span>.</span><span>listdir</span><span>(</span><span>IMAGE_FOLDER</span><span>)</span> <span>if</span> <span>f</span><span>.</span><span>lower</span><span>().</span><span>endswith</span><span>((</span><span>'</span><span>.png</span><span>'</span><span>,</span> <span>'</span><span>.jpg</span><span>'</span><span>,</span> <span>'</span><span>.jpeg</span><span>'</span><span>,</span> <span>'</span><span>.gif</span><span>'</span><span>))]</span><br> <span>return</span> <span>[{</span><span>"</span><span>FILE_NAME</span><span>"</span><span>:</span> <span>f</span><span>,</span> <span>"</span><span>IMG_PATH</span><span>"</span><span>:</span> <span>os</span><span>.</span><span>path</span><span>.</span><span>join</span><span>(</span><span>IMAGE_FOLDER</span><span>,</span> <span>f</span><span>)}</span> <span>for</span> <span>f</span> <span>in</span> <span>image_files</span><span>]</span></p>
<p><span># Select number of columns<br> </span><span>num_columns</span> <span>=</span> <span>st</span><span>.</span><span>slider</span><span>(</span><span>"</span><span>Width:</span><span>"</span><span>,</span> <span>min_value</span><span>=</span><span>1</span><span>,</span> <span>max_value</span><span>=</span><span>5</span><span>,</span> <span>value</span><span>=</span><span>4</span><span>)</span></p>
<p><span># Display gallery<br> </span><span>img_df</span> <span>=</span> <span>get_image_data</span><span>()</span><br> <span>cols</span> <span>=</span> <span>st</span><span>.</span><span>columns</span><span>(</span><span>num_columns</span><span>)</span><br> <span>for</span> <span>i</span><span>,</span> <span>img</span> <span>in</span> <span>enumerate</span><span>(</span><span>img_df</span><span>):</span><br> <span>with</span> <span>cols</span><span>[</span><span>i</span> <span>%</span> <span>num_columns</span><span>]:</span><br> <span>st</span><span>.</span><span>image</span><span>(</span><span>img</span><span>[</span><span>"</span><span>IMG_PATH</span><span>"</span><span>],</span> <span>caption</span><span>=</span><span>None</span><span>,</span> <span>use_column_width</span><span>=</span><span>True</span><span>)</span></p>
<p><span>import</span> <span>streamlit</span> <span>as</span> <span>st</span><br> <span>import</span> <span>os</span><br> <span>from</span> <span>snowflake.snowpark.context</span> <span>import</span> <span>get_active_session</span></p>

<p><span># Get Snowflake session<br> </span><span>session</span> <span>=</span> <span>get_active_session</span><span>()</span></p>

<p><span># Streamlit page configuration<br> </span><span>st</span><span>.</span><span>set_page_config</span><span>(</span><span>layout</span><span>=</span><span>"</span><span>wide</span><span>"</span><span>,</span> <span>page_title</span><span>=</span><span>"</span><span>Image Gallery</span><span>"</span><span>)</span></p>

<p><span># Application title<br> </span><span>st</span><span>.</span><span>title</span><span>(</span><span>"</span><span>Image Gallery</span><span>"</span><span>)</span></p>

<p><span># Image folder path<br> </span><span>IMAGE_FOLDER</span> <span>=</span> <span>"</span><span>image</span><span>"</span></p>

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

<p><span># Select number of columns<br> </span><span>num_columns</span> <span>=</span> <span>st</span><span>.</span><span>slider</span><span>(</span><span>"</span><span>Width:</span><span>"</span><span>,</span> <span>min_value</span><span>=</span><span>1</span><span>,</span> <span>max_value</span><span>=</span><span>5</span><span>,</span> <span>value</span><span>=</span><span>4</span><span>)</span></p>

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


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

Image search with Streamlit in Snowflake (3 Part Series)

1 Image search with Streamlit in Snowflake (SiS) Part 1 – Creating an image gallery app –
2 Image search with Streamlit in Snowflake (SiS) Part 2 – Automatically generate image captions –
3 Image search with Streamlit in Snowflake (SiS) Part 3 – Add vector search function for images –

原文链接：Image search with Streamlit in Snowflake (SiS) Part 1 – Creating an image gallery app –