Hi All,
Created a new streamlit component streamlit-imagegrid to produce selectable image/video grids. The component supports grids that are hetrogeneous and takes tag metadata as well. Check it out.
4 Likes
Hi Midhun,
Really cool project/plugin!
I had emailed you and also wanted to add those comments here:
Here were some of the issues I’m seeing when trying to add unique metadata + tags for each asset: (If I’m looking at this incorrectly, please let me know)
def imagegrid_test():
# List of image and video URLs
urls_01 = [
{
“src”: “http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4”,
“metadata”: {‘title’:‘video’},
“tags”: {“type”: “video”, “duration”: “1m45s”}
},
{
“src”: ‘https://images.freeimages.com/images/large-previews/56d/peacock-1169961.jpg’,
“metadata”: {‘title’:‘image1’},
“tags”: {“type”: “image”, “duration”: “0”}
},
{
“src”: ‘https://images.freeimages.com/images/large-previews/bc4/curious-bird-1-1374322.jpg’,
“metadata”: {‘title’:‘image2’},
“tags”: {“type”: “image”, “duration”: “0”}
},
{
“src”: ‘https://images.freeimages.com/images/large-previews/9f9/selfridges-2-1470748.jpg’,
“metadata”: {‘title’:‘image3’},
“tags”: {“type”: “image”, “duration”: “0”}
},
{
“src”: ‘http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4’,
“metadata”: {‘title’:‘image4’},
“tags”: {“type”: “image”, “duration”: “0”}
}
] * 2
selected = streamlit_imagegrid("visualization1", urls_01, 3, key='foo')
st.write(f"Selected item: {selected}")
- When this is done 2 times, there is a large gap between the 1st row and the 2nd row. My goal was to have each video/image have their own metadata and tags without any separation.
- The Tags information does not display when rendered
- I also wanted to have a 4x4 grid where each of the items were unique with their own metadata & tags.(16 unique assets) The 1st cell in each of the rows would be a video and the the other cells (in each row) would either be text or images. Is this possible?
- Also, when changing the number of columns (3rd attribute) of selected = streamlit_imagegrid(“visualization1”, urls_01, 3, key=‘foo’) does not seem to do anything. How is this supposed to work?
Thanks,
Neil
Hi Neil3,
Thank you for using Streamlit-imagegrid.
For your particular case you can try the following.
{
"src": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
"Title" : "Video",
"type": "Video",
"duration": "1m45s"
},
{
"src": "https://images.freeimages.com/images/large-previews/56d/peacock-1169961.jpg",
"Title" : "Video",
"type": "Video",
"duration": "1m45s"
},
{
"src": "https://images.freeimages.com/images/large-previews/bc4/curious-bird-1-1374322.jpg",
"Title" : "Video",
"type": "Video",
"duration": "1m45s"
},
{
"src": "https://images.freeimages.com/images/large-previews/9f9/selfridges-2-1470748.jpg",
"Title" : "Video",
"type": "Video",
"duration": "1m45s"
},
{
"src": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
"Title" : "Video",
"type": "Video",
"duration": "1m45s"
}
All tags other than “src” are displayed as tags. You may manipulate the keys and values.
The above setting gives your something like this
If you have more specific requirements please add a feature request on the github page.