Image not loading on streamlit (works fine on local)

[tjyana]

I have an image loading issue on my Streamlit app.

The app is designed to take some user inputs and output an image via an image generator.
The weird thing is, when run locally, the generator spits out a legitimate url that shows an image. When run on Streamlit, the generator spits out a url as well, but it doesn’t contain an image and only shows this error:

• detail: “File not found: /tmp/gradio/55f35a9c592632688ff60e6565b8fb76a7ece988535097d65233ac71719075b9/image.webp.” *

Another weird thing is that both the streamlit and local versions were working fine until yesterday.

example of url from local version (not sure if image expires, but as of this posting it shows an image): https://bytedance-sdxl-lightning.hf.space/file=/tmp/gradio/1c9a84b8212c74f3151a025b8d039855b324136f/image.webp

example from streamlit version: https://bytedance-sdxl-lightning.hf.space/file=/tmp/gradio/55f35a9c592632688ff60e6565b8fb76a7ece988535097d65233ac71719075b9/image.webp

The URL also seems to be returning a 404 code.

heres the code to generate the image url (i’ve left all the debugging code in. sleep is also in there to test something out):

def image_generator(answer):
    '''
    Generate images for recipe.
    '''

    with st.spinner('Initializing model...'):
        client = Client("ByteDance/SDXL-Lightning")

    with st.spinner('Generating image...'):
        result = client.predict(
                answer, # str  in 'Enter your prompt (English)' Textbox component
                "1-Step",   # Literal['1-Step', '2-Step', '4-Step', '8-Step']  in 'Select inference steps' Dropdown component
                api_name="/generate_image_1"
        )

    url = 'https://bytedance-sdxl-lightning.hf.space/file=' + result

    st.write('full output from client: ', result)
    st.write('output appended to create url: ', url)


    time.sleep(2)

    return url

here is the function that displays the image (towards bottom in try/except block)

def main():
    # Title
    st.sidebar.title("What do you wanna eat?")
    st.sidebar.write("Please tell me your preferences:")

    # Input fields
    favorite_foods = st.sidebar.text_input("Favorite foods")
    favorite_flavors = st.sidebar.text_input("Favorite flavors or cuisines")
    dislikes = st.sidebar.text_input("Want to avoid (dislikes, allergies, recent meals)")
    others = st.sidebar.text_input("Other considerations (optional)")

    # Submit button
    if st.sidebar.button("Submit"):
        # Process the inputs
        st.session_state.favorite_foods = favorite_foods
        st.session_state.favorite_flavors = favorite_flavors
        st.session_state.dislikes = dislikes
        st.session_state.others = others

        st.header(random_title)
        print('generating food...')
        output = suggest_food(favorite_foods, favorite_flavors, dislikes, others)

        food = output.split("$PL!T")[0]
        analysis = output.split("$PL!T")[-1]
        st.header(food)

        try:
            url = image_generator(food)

            check_url(url)

            st.image(url, use_column_width=True)

        except Exception as e:
            st.warning("[Could not generate image. Please imagine something really really good!]")
            print(f"Error generating image: {e}")

        st.write(analysis)

full repo here: GitHub - tjyana/what-do-you-wanna-eat: No fighting!

any help would be appreciated!! been working on this for a day and a half and i have no idea

[tjyana]

ok now my app won’t load at all and is forever stuck on this screen…

i thought it was something with the image generator API but now i have no idea what it could be anymore. any help would be appreciated

[blackary]

I’m not sure what’s going on with the “forever stuck” screen, but you might try rebooting the app, or deleting and redeploying.

In the case of why the image isn’t generating – the way that API appears to work is that it generates the image and saves it to your machine, so the return value is just the image path, and you can just pass that to st.image.

Here’s a simplified app that works fine:

import streamlit as st
from gradio_client import Client


def image_generator(answer):
    """
    Generate images for recipe.
    """

    with st.spinner("Initializing model..."):
        client = Client("ByteDance/SDXL-Lightning")

    with st.spinner("Generating image..."):
        result = client.predict(
            answer,  # str  in 'Enter your prompt (English)' Textbox component
            "1-Step",  # Literal['1-Step', '2-Step', '4-Step', '8-Step']  in 'Select inference steps' Dropdown component
            api_name="/generate_image_1",
        )

    return result


with st.sidebar:
    st.title("What do you wanna eat?")
    st.write("Please tell me your preferences:")

    # Input fields
    favorite_foods = st.text_input("Favorite foods")
    submit = st.button("Submit")

# Submit button
if submit:
    file_path = image_generator(favorite_foods)

    st.image(file_path, use_column_width=True)

[tjyana]

omg, it worked! thank you!!!
I thought I needed to append the client output onto the http part in order to form a proper URL, but apparently that was unnecessary!

i cut out this code snippet and just fed the output directly to st.image() like you suggested and it works fine on both local and streamlit now:

file_path = result.split(‘gradio’)[1]
url = ‘https://bytedance-sdxl-lightning.hf.space/file=/tmp/gradio’ + file_path
(strangely enough this code works on local so not sure what’s going, but as long as the streamlit is working i’m happy)

thanks so much~