Streamlit: Images sometimes do not appear

[m-ad]

Summary

The site randomly shows "0" for images inserted via st.image() and MediaFileManager logs "Missing file".

More information

I have a couple of jpg images embedded with st.image() and randomly they will not render, instead there will just be a 0 shown instead. Reloading the page or rerunning the code fixes the problem. When I reload the page often enough one ore several of the images will break again and just show a 0.

In the terminal with --log_level error I receive

MediaFileManager: Missing file d8a7ff62725a8ab1609c9335ba2e85375f491027d91b3badb27a6ccd

In my complex multi-page streamlit app this happens very often, if I reload the page two or three times, one out of five images is likely broken. The simpler toy example below takes much longer to show the undesired behaviour, but it does so fairly consistently.

Steps to reproduce

Run this code (ideally with --log_level error):

import streamlit as st
if st.checkbox('checkbox'):
    st.image("foo.jpg")

Toggle that checkbox repeatedly (this method is quicker than reloading the page) and look at the console output. Maybe rerun the code once in a while. (Of course you need to put any jpg image named "foo.jpg" in the same folder).

Actual behaviour

Sooner or later (5-50 clicks) the image will not be shown. Instead, in its place a 0 appears. A "MediaFileManager: Missing file" error is shown in the terminal.

Expected behaviour

Images should always be shown.

Debug info

• Streamlit version: 0.57.1
• Python version: 3.6.9

[nthmost]

Hi @m-ad,

Thanks for the detailed report! This is a known issue with some changes we made in #415 and I have a fix already in flight.

I'll close this bug as soon as the fix is pushed into the next release. Thanks for your patience!

[danielvarga]

Hi @nthmost,

Is this bug fixed? It's causing a lot of trouble for me, and I'd love to upgrade if it's fixed. Unfortunately it's not trivial for me to check if it's fixed or not, because of two reasons:

• @m-ad's short example worksforme already in my 0.52.2 installation, even thought my real-life app breaks often. I tried to play around with bigger and smaller images to reproduce, to no avail.
• It's not trivial to upgrade my app from 0.52 to latest, because it's full of SessionState and such, and various hopefully-minor backward-incompatible changes break my code before I can even verify the "images sometimes do not appear" situation.

I'd rather not suffer with the upgrade unless it's worth it, so even a simple yes/no would be greatly helpful. (A timeline if no is the answer, even more so.)

[jrhone]

Hi @danielvarga ,

The fix was merged 5 days ago. It's available now on the nightly build.

SessionState should work fine with the current version of Streamlit. Have you tried with the updated gist?

[danielvarga]

Thanks! I haven't tried until you brought it to my attention, now I have. Indeed it seems to fix issue #1294, thanks a lot! But my code does not fully work with the new version, as it broke this hack by Tim Conkling: https://discuss.streamlit.io/t/show-more-items-functionality/1139/2 (Sorry for moving off topic. I'll stop discussing it here, and raise the issue there.)

[thomelane]

Still experiencing an issue with this one, even on nightly (v0.59.1.dev20200506).

Can see the issue with streamlit hello (Animation Demo) running on a web server. More of an issue over https, compared to http, but still get dropped frames either way.

Seeing these errors scattered in the console...

GET https://example.com/media/fc5c3cc4b370b667d407fa2ac2a808348815d93eae8229f04ba030a1.jpeg 404
GET https://example.com/media/e8c9d0a5997976f844e0886a2702f6f083647828c73e8354fcb64c06.jpeg 404
GET https://example.com/media/55c9e43090bd59da85388e171d1f5d558775f5aca80567b7d019ae53.jpeg 404
...

[JohnPaton]

I can confirm this is still an issue in 0.59.1.dev20200511 on Python 3.7.7

Edit: For people Googling, we "solved" this by downgrading to streamlit 0.55

[danielvarga]

Indeed, I was too quick to report that the issue is gone, sorry, it was probably just a statistical fluke. Frequency of occurrence might or might not have decreased, hard to tell.

[sabualkaz]

I am experiencing the same behaviour with matplotlib plot that the are generated with input from sliders. Is this covered under this issue or should I create a new one?

[emanoelbarreiros]

I have the same issue. I am trying to display two different pyplot charts on the same script, more often than not the first chart is not displayed.

[madpowah]

Same issue on my side with the version 0.61. It happens when displaying 2 pie chart created by the same function called twice. The first st.pyplot is not displayed.

Edit : adding a sleep(0.2) after the pyplot() seems work as workaround

[KyotoSunshine]

I have the same issue, when using streamlit==0.61.0. Images will randomly be displayed as 0s.
Adding sleep(0.2) after st.image() does not help.

[KyotoSunshine]

Tried it with the current streamlit-nightly==0.62.1.dev20200621 and the issue still appears there as well, though perhaps a bit less often.
Also, in my case, reloading (by pressing "r"), does not help to make the image appear.

[nthmost]

@KyotoSunshine -- is it possible you can share a snippet of code that causes the problem to occur?

[MauGal]

In my script that it shows 8 charts taken data by csv, with the version 0.56.0 was all ok (in local, in docker container local and in docker container on app engine (GCP)).
This issue started with version 0.59.0: the first 3 charts disappear.
With the version 0.62.0 in local and in docker container local the issue there isn't but on gcp i have the issue (more of 3 charts doesn't visualize) .

Other problem: with the latest version (0.62.0) the script is slower to execute

[jrhone]

Hi @MauGal, could you share sample code that we can copy/paste and run to reproduce the issue? I'll be sure to try it both locally and on GCP.

Also, could you give a bit more info on what you're seeing with regards to the script being slower to execute?

[MauGal]

Hi @jrhone .
I apologize if I haven't answered before.
About the longest time, in version 0.56.0 my script from when I see running appearing in the upper right corner to when it disappears takes 5 or 6 seconds.
In version 0.62.0 the same script takes 11 o 13 seconds.
But I thought it depended on the grace period (KEEP_DELAY = 5)

[jrhone]

Repro steps:

• Visit https://s4a-staging.streamlit.io/jrhone/simpleapp/master/streamlit_app.py/+/
• Open chrome dev tools.. Network tab.. Click 'disable cache'
• Toggle the checkbox really fast, for up to 20 seconds
• At least one image should fail in this time, from my experience (500 status code in Network tab and Missing file message in server logs)

[rbracco]

I'm also having this issue with Audio files. I am displaying 25 to a page and after listening to a certain number of them the page seems to break and I start getting errors like MediaFileManager: Missing file 26ca29fef4998238a36e8c8e1f7e3310c455844c1f8e4c031cce5798. At that point the only solution is to refresh the page.

[tvst]

Hey @rbracco , can you provide a toy example where this repros?
(@kmcgrady FYI)

[masolin]

I am not sure if it's related to this issue, but when I try the streamlit's video example.
I add some videos to my local folder.
When I open the example app in different tabs of a chrome at the same time, some of tabs can't show the videos in my local folder.
It also shows the error 14:30:09.132 MediaFileManager: Missing file 631c0f42e89b6eea44e7d3a130a8f8433cbca75af4c868f6b718d806

[kmcgrady]

@masolin @rbracco @MauGal @KyotoSunshine @madpowah @emanoelbarreiros @m-ad @danielvarga @JohnPaton @thomelane @sabualkaz

I've been working on the MediaFileManager missing file issues. I think I have a solution, but because this has been a tricky piece of code, I'm looking for some testers. Would you be willing to try it out with your use cases? I would greatly appreciate it. One thing I do recommend is if using pyplot, you supply a figure to st.pyplot See our documentation for this. It might save some headaches.

You can download the update from my dropbox.

https://www.dropbox.com/s/scqhnpo41ld8fla/streamlit-0.67.1-py2.py3-none-any.whl?dl=0

First you uninstall streamlit

$ pip uninstall streamlit

Then you install the package using the wheel package.

$ pip install wheel
$ pip install PATH/TO/streamlit-0.67.1-py2.py3-none-any.whl

Once you are done testing it, you can uninstall it just like any other version.

$ pip uninstall streamlit

Curious on the code? I used it to help implement Range Requests on the server https://github.com/streamlit/streamlit/pull/1967

I'm really hoping I cover all the issues you have found. 😊

[kmcgrady]

We've QAed a lot of scenarios and feel comfortable that the change is an improvement. The change has been merged, and it will be in the next release.

[rbracco]

@kmcgrady thank you so much for taking the time to address this and I'm sorry I wasn't more responsive earlier. I installed the changes from your dropbox and everything works great now. All the MediaFileManager issues have disappeared!

[chakra-ai]

Hi,
I am experiencing the same issue with my app. My app works fine in local but once deployed into azure server the image is not rendering properly. This happens random and even for static images as well for WordCloud images. Do we have a fix for that? I am using the latest version. 0.71.0

[kmcgrady]

Hi @chakra-ai !

It will be really difficult to debug without being able to run the code, so if you are able to share your code (or better, provide a toy example that illustrates the problem simply, that would make life a lot easier.

Here are a couple thoughts that might help us solve the problem.

The MediaFileManager manages all the media in memory. At the end of the script run, all media that was not used in that run, is deleted (to conserve memory). Based on this, we should ensure everything working though I’m curious with race cases (for example, is this an issue with multiple people requesting the website, perhaps that causes a problem)? Does this occur standalone when one user interacts with it?

MatPlotlib is unfortunately not thread safe. So, one should not use st.pyplot with no figure. Even more protection is needed and matplotlib offers a locking mechanism, In another application, I wrote:

import matplotlib
from matplotlib.figure import Figure

matplotlib.use("agg")

_lock = RendererAgg.lock

# ...code...

with _lock:
    fig = Figure()
    ax = fig.subplots()
    # ...perform work on ax
    st.pyplot(fig)

You can see it in action here: https://github.com/kmcgrady/book_reco/blob/master/books.py#L16

Hopefully that helps with a solution. If not and you can provide a simple example that causes the problem, please let me know.

[chakra-ai]

Hi @kmcgrady , Thanks for the quick reply.

The issue of image rendering I am facing is mostly after I deploy to azure machine. In local its working. I have 2 parts to it.

1. Static Image (Logo) - sometimes it render but sometimes just the broken image icon. if I right click on the image and do a reload the image loads as it should be.
   

1. I am plotting a Word Cloud here. wordcloud

def TextWordCloud(app_name):
    default_inputs = st.selectbox("", 
    [
            "Choose your data",
            "Sample Document : I recently joined Cloudera after working in ...",
            "Upload your own file"

    ])
    if (default_inputs == "Sample Document : I recently joined Cloudera after working in ..."):
        with open('input/Sample_1_WordCloud.txt','r') as f:
            text = f.read()
            st.text_area("Sample Document - Text Preview",text, height=200, key='dsta1')
            if st.button("Run>", key='wc_b_1'):
                doc_wc_str_data = [{"text":text}]
                response = get_response(build_response(doc_wc_str_data),app_name)
                word_dict, noun_dict = get_word_cloud_array(response)
                wc = WordCloud(background_color ='white', margin=2,min_font_size=6).fit_words(word_dict)
                nc = WordCloud(background_color ='white', margin=2,min_font_size=6).fit_words(noun_dict)
                time.sleep(2)
                col1, col2 = st.beta_columns(2)
                col1.markdown("#### Word Cloud ")
                col1.image(wc.to_array(),use_column_width=True)
                col2.markdown("#### Noun Cloud ")
                col2.image(nc.to_array(),use_column_width=True) 
    elif (default_inputs == "Upload your own file"):
        st.markdown('###### * Uploaded file with atleast 50 words!')
        wc_uploaded_file = st.file_uploader("", type="txt", key='wc-up1')
        print(wc_uploaded_file)
        if wc_uploaded_file is not None:
            #print(wc_uploaded_file)
            bytes_data = wc_uploaded_file.read()
            wc_str_data = bytes_data.decode("utf-8")
            wc_text = st.text_area("Document Text Preview",wc_str_data, height=200, key='wcta1')
            if st.button("Run>", key='wc_b_2'):
                doc_wc_str_data = [{"text":wc_str_data}]
                response = get_response(build_response(doc_wc_str_data),app_name)
                word_dict, noun_dict = get_word_cloud_array(response)
                wc = WordCloud(background_color ='white', margin=2,min_font_size=6).fit_words(word_dict)
                nc = WordCloud(background_color ='white', margin=2,min_font_size=6).fit_words(noun_dict)
                time.sleep(2)
                col1, col2 = st.beta_columns(2)
                col1.markdown("#### Word Cloud ")
                col1.image(wc.to_array(),use_column_width=True)
                col2.markdown("#### Noun Cloud ")
                col2.image(nc.to_array(),use_column_width=True)   
    else:
        st.write("** Select data from the above dropdown")

And the image rendering happens like shown below;

It would be great if you can help on this. Thanks.

[chakra-ai]

Adding to the above issue; while I inspect the application on the browser for the image component, the image url generated as;
https://<Application URL>/media/1b25254261af69495b4fc9a637472aacad81157493ba5f698288e9da.png

In the console I see;

GET https:///media/1b25254261af69495b4fc9a637472aacad81157493ba5f698288e9da.png 404 status. for the broken image.

[kmcgrady]

@chakra-ai hmmmmm. I wonder if you can get logs from the server or perhaps run it in debug logging mode? I wonder if there's some caching layer in Azure that's breaking. The sidebar logo, should _not_ be a problem at the very least, so I'd target that as a trivial example to see if we can deduce _why_ that image cannot appear.

Alternatively, I wonder if you deploy the application on Streamlit Share, does the issue still occur?

[tylerjrichards]

hey @kmcgrady, i'm having this issue on Streamlit Share with my books app (https://share.streamlit.io/tylerjrichards/book_reco/books.py)
I've tried switching over to the newest Streamlit release (0.73), I have '_lock = RendererAgg.lock
' in my code already, and I always use st.pyplot() with an explicit figure, but I keep getting a broken image and the 'MediaFileManager: Missing file' error.

this only happens on Streamlit sharing, but doesn't happen when I run the app locally. Any ideas?

[kmcgrady]

@tylerjrichards I'll take a look and see if I can figure out the problem. It will be a couple weeks due to the holidays. I'll put something on my calendar in my new year to follow up.