How to display a list of images in groups of 10/50/100?

Using Streamlit
,
1

Hi everyone, I am a beginner in using Streamlit. I have a list of images which I need to show, and beside each image is a checkbox saying whether it has been mislabelled and text to type in if it’s really mislabelled. So for example, if I have 124 images, I want to show images in groups of 10, how can I do it?
Thank you very much.

2

Here’s a basic example. I just grabbed something from Kaggle and am using images with all the same label (that is hardcoded) for the purposes of focusing on the relevant part of your question.

import streamlit as st
from os import listdir
from math import ceil
import pandas as pd

directory = r'images\bike'
files = listdir(directory)

def initialize():    
    df = pd.DataFrame({'file':files,
                    'incorrect':[False]*len(files),
                    'label':['']*len(files)})
    df.set_index('file', inplace=True)
    return df

if 'df' not in st.session_state:
    df = initialize()
    st.session_state.df = df
else:
    df = st.session_state.df 


controls = st.columns(3)
with controls[0]:
    batch_size = st.select_slider("Batch size:",range(10,110,10))
with controls[1]:
    row_size = st.select_slider("Row size:", range(1,6), value = 5)
num_batches = ceil(len(files)/batch_size)
with controls[2]:
    page = st.selectbox("Page", range(1,num_batches+1))


def update (image, col): 
    df.at[image,col] = st.session_state[f'{col}_{image}']
    if st.session_state[f'incorrect_{image}'] == False:
       st.session_state[f'label_{image}'] = ''
       df.at[image,'label'] = ''

batch = files[(page-1)*batch_size : page*batch_size]

grid = st.columns(row_size)
col = 0
for image in batch:
    with grid[col]:
        st.image(f'{directory}\{image}', caption='bike')
        st.checkbox("Incorrect", key=f'incorrect_{image}', 
                    value = df.at[image,'incorrect'], 
                    on_change=update, args=(image,'incorrect'))
        if df.at[image,'incorrect']:
            st.text_input('New label:', key=f'label_{image}', 
                          value = df.at[image,'label'],
                          on_change=update, args=(image,'label'))
        else:
            st.write('##')
            st.write('##')
            st.write('###')
    col = (col + 1) % row_size

st.write('## Corrections')
df[df['incorrect']==True]

image
image759×820 106 KB

2 Likes
3

Hi mathcatsand. Thanks a lot for your code, it works really well for my case. However, I would like to be able to show a zoomed and enlarged version of the image once I click on it. Do you know how to do it ? Thanks a lot.

4

Out of the box, you should be able to expand the image with a button in the upper right corner when you hover over an image. Does that work for you? It would take a little css finagling to make that expansion available from a click anywhere on the image.

5

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