Streamlit doubled st.write and st.expander

Using Streamlit
1

When app waiting to load I have doubled (greyed) parts with st.write and st.expander.
Cannot figure out why this is happening (screenshot is important as I cannot explain).

  1. Are you running your app locally or is it deployed?
    locally and deployed

  2. If your app is deployed:
    a. Is it deployed on Community Cloud or another hosting platform?
    AWS EC2 + Lambda

    b. Share the link to the public deployed app.
    Cannot give a login

  3. Share the link to your app’s public GitHub repository (including a requirements file).
    Private

  4. Share the full text of the error message (not a screenshot).
    Not an error message

  5. Share the Streamlit and Python versions.
    streamlit==1.28.0
    streamlit-authenticator==0.2.2
    streamlit-webrtc==0.47.1

Screenshot 2024-01-18 at 11-50-09 Dokumentacja zdjeciowa
Screenshot 2024-01-18 at 11-50-09 Dokumentacja zdjeciowa1799×843 27.9 KB

    def info():
        st.write(_('1. Nakieruj kamerę na pojazd'))
        st.write(_('2. Zdjęcia zostaną automatycznie wykonane po wykryciu kadru'))
        st.write(_('3. Zanim naciśniesz START wybierz tylną kamerę ---> SELECT DEVICE'))
        st.write('')
        with st.expander(_('Zdjęcia do wykonania - 5. Rozwiń...'), expanded=False):  #, st.session_state.subtract_value)
            st.markdown(_('- Prawy skos ( przód / bok kierowcy )'))
            st.image('https://wellcam-lambda.s3.eu-central-1.amazonaws.com/wellcam-instruction/prz%C3%B3d.webp', width=285)
            st.write('')
            st.markdown(_('- Lewy skos ( tył / bok pasażera )'))
            st.image('https://wellcam-lambda.s3.eu-central-1.amazonaws.com/wellcam-instruction/ty%C5%82.webp', width=285)
            st.write('')
            st.markdown(_('- VIN ( na stałym elemencie )'))
            st.image('https://wellcam-lambda.s3.eu-central-1.amazonaws.com/wellcam-instruction/vin.webp', width=285)
            st.write('')
            # st.markdown(_('- Wnętrze od strony kierowcy'))
            # st.image('https://wellcam-lambda.s3.eu-central-1.amazonaws.com/wellcam-instruction/wn%C4%99trze.webp', width=285)
            # st.write('')
            st.markdown(_('- Zegary z przebiegiem'))
            st.image('https://wellcam-lambda.s3.eu-central-1.amazonaws.com/wellcam-instruction/zegary.webp', width=285)
            st.write('')
            # st.markdown(_('- Dowód rejestracyjny'))
            # st.image('https://wellcam-lambda.s3.eu-central-1.amazonaws.com/wellcam-instruction/dow_rej.webp', width=285)
            # st.write('')
            st.markdown(_('- Kluczyk(i)'))
            st.image('https://wellcam-lambda.s3.eu-central-1.amazonaws.com/wellcam-instruction/kluczyki.webp', width=285)

    info()
2 Likes
2

I cannot reproduce the issue with your code in Streamlit v1.29.0. Note that I had to change the code and add missing parts to make it work so your actual code will be different.

2 Likes
3

Try add

time.sleep(50)

after info()

And note that

_(...)

is used for translation gettext, not relevant here.

4

Still unable to reproduce.

5

A bit of context;

if authentication_status:
    # ph = st.empty()
    def info():
        st.write(_('1. Nakieruj kamerę na pojazd'))
        st.write(_('2. Zdjęcia zostaną automatycznie wykonane po wykryciu kadru'))
        st.write(_('3. Zanim naciśniesz START wybierz tylną kamerę ---> SELECT DEVICE'))
        st.write('')
        with st.expander(_('Zdjęcia do wykonania - 5. Rozwiń...'), expanded=False):  #, st.session_state.subtract_value)
            st.markdown(_('- Prawy skos ( przód / bok kierowcy )'))
            st.image('https://wellcam-lambda.s3.eu-central-1.amazonaws.com/wellcam-instruction/prz%C3%B3d.webp', width=285)
            st.write('')
            st.markdown(_('- Lewy skos ( tył / bok pasażera )'))
            st.image('https://wellcam-lambda.s3.eu-central-1.amazonaws.com/wellcam-instruction/ty%C5%82.webp', width=285)
            st.write('')
            st.markdown(_('- VIN ( na stałym elemencie )'))
            st.image('https://wellcam-lambda.s3.eu-central-1.amazonaws.com/wellcam-instruction/vin.webp', width=285)
            st.write('')
            # st.markdown(_('- Wnętrze od strony kierowcy'))
            # st.image('https://wellcam-lambda.s3.eu-central-1.amazonaws.com/wellcam-instruction/wn%C4%99trze.webp', width=285)
            # st.write('')
            st.markdown(_('- Zegary z przebiegiem'))
            st.image('https://wellcam-lambda.s3.eu-central-1.amazonaws.com/wellcam-instruction/zegary.webp', width=285)
            st.write('')
            # st.markdown(_('- Dowód rejestracyjny'))
            # st.image('https://wellcam-lambda.s3.eu-central-1.amazonaws.com/wellcam-instruction/dow_rej.webp', width=285)
            # st.write('')
            st.markdown(_('- Kluczyk(i)'))
            st.image('https://wellcam-lambda.s3.eu-central-1.amazonaws.com/wellcam-instruction/kluczyki.webp', width=285)

    info()
    time.sleep(50)

    endpoint = '...'  # HTTP API
    headers = {
        'Content-Type': 'application/json',
        'Connection': 'keep-alive'
    }
    requests.post(endpoint, headers=headers)

So; requests.post(endpoint, headers=headers) is used to make a single request to Lambda in order to wake it up. I can reproduce this adding; time.sleep(50) before.

While waiting for Lambda this behavior from screenshot occurs.

6

Can you reproduce the issue without posting to your API?

7

I’m going to check… NO

So authentication part is causing the problem…probably;

import time
import streamlit as st
import streamlit_authenticator as stauth


# ----User Auth -----

credentials = {
    'credentials': {
        'usernames': {
            'user': {
                'name': 'user',
                'password': '$2b$12$cOyquTvi52nzwDbny4z9Iu2ca0f/psvEWVyaQLY2bvDmOaI3pBU36'
            }
        }
    },
    'cookie': {
        'name': 'random_cookie_name',
        'key': 'random_signature_key',
    }
}
authenticator = stauth.Authenticate(
    credentials['credentials'],
    credentials['cookie']['name'],
    credentials['cookie']['key']
)

name, authentication_status, username = authenticator.login('Documentation', 'main')


if authentication_status == False:
    st.write('')
    st.error('Wrong number')

if authentication_status is None:
    st.warning('Usually here and there')

if authentication_status:
    def info():
        st.write('1. info')
        st.write('2. another info')
        st.write('')
        with st.expander('photo', expanded=False):
            st.markdown('keys')
        st.write('3. start')

    info()
    time.sleep(8)  # API call <-----

    authenticator.logout('Logout', 'main')
8

I confirm, with authentication time.sleep(int) reproduces the problem.

9

Hello,

I managed to make a minimal reproducible example… edited last post with code.

10

What is the password?

11

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.