Display images without "Fade" transition!

Using Streamlit
#1

Hi friends,

I was wondering, what’s the speediest way to display 2D/image data using streamlit?
I have a 3D Ultrasound image that I traverse through the frames using a slider, however the image display between frames have this “fade transition”. Is there anyway to avoid the fade transition and show the frames faster while you traverse between frames?

Thank you. :pray:

#2

Hi,

The best way around this is to wrap image retrieval in a caching function. The initial retrieval will be slow (if the image is large or obtained over a network) and the previous image will grey out before it is replaced. Once the images have been cached then subsequent displays will be fast.

Here’s a program that simulates this:

import time

import streamlit as st

IMAGES = [
    "https://unsplash.com/photos/GJ8ZQV7eGmU/download?force=true&w=1920",
    "https://unsplash.com/photos/eHlVZcSrjfg/download?force=true&w=1920",
    "https://unsplash.com/photos/zVhYcSjd7-Q/download?force=true&w=1920",
    "https://unsplash.com/photos/S5uIITJDq8Y/download?force=true&w=1920",
    "https://unsplash.com/photos/E4bmf8BtIBE/download?force=true&w=1920",
]

# set ttl to None if you don't want to refresh the cache
@st.experimental_memo(ttl=60, show_spinner=True)
def get_cached_image(slide_collection_key, index):
    # slide_collection_key is used by st cache functions
    # sleep simulates a slow network so we can see the st.image ghosting effect
    time.sleep(2)
    return IMAGES[index]

def slideshow(images):
    # Generate a session state key based on images.
    slide_collection_key = f"slideshow_{str(images).encode().hex()}"

    # Initialize the default slideshow index.
    if 'index' not in st.session_state:
        st.session_state['index'] = 0

    # Get the current slideshow index.
    def _index_change_cb(value):
        index = abs((st.session_state['index'] + value) % len(images))
        st.session_state['index'] = index

    index = st.session_state['index']
    st.image(get_cached_image(slide_collection_key, index))
    st.caption(f'{index}')

    c1, c2, _c3 = st.columns([1,1,6])

    c1.button('Previous', on_click=_index_change_cb, args=(-1,))
    c2.button('Next', on_click=_index_change_cb, args=(1,))

st.title("Streamlit Slideshow")
slideshow(IMAGES)
#3

Thank you @asehmi, however it didn’t help.

The images are in local folder but the fade effect is still there.

#4

@sulaimanvesal, if that happens even with the cache, then the images must be very large.