🖼️ An image select component for Streamlit

Last update: Jan 3, 2023

Overview

streamlit-image-select 🖼️

An image select component for Streamlit.

This custom component works just like st.selectbox but with images. It's a great option if you want to let the user select an example image, e.g. for a computer vision app!

🏃 Try out the demo app 🏃

Installation

pip install streamlit-image-select

Usage

from streamlit_image_select import image_select
img = image_select("Label", ["image1.png", "image2.png", "image3.png"])
st.write(img)

See the demo app for a detailed guide!

Development

Note: you only need to run these steps if you want to change this component or contribute to its development!

Setup

First, clone the repository:

git clone https://github.com/jrieke/streamlit-image-select.git
cd streamlit-image-select

Install the Python dependencies:

poetry install --dev

And install the frontend dependencies:

cd streamlit_image_select/frontend
npm install

Making changes

To make changes, first go to streamlit_image_select/__init__.py and make sure the variable _RELEASE is set to False. This will make the component use the local version of the frontend code, and not the built project.

Then, start one terminal and run:

cd streamlit_image_select/frontend
npm start

This starts the frontend code on port 3001.

Open another terminal and run:

cp demo/streamlit_app.py .
poetry shell
streamlit run streamlit_app.py

This copies the demo app to the root dir (so you have something to work with and see your changes!) and then starts it. Now you can make changes to the Python or Javascript code in streamlit_image_select and the demo app should update automatically!

Publishing on PyPI

Switch the variable _RELEASE in streamlit_image_select/__init__.py to True. Increment the version number in pyproject.toml. Make sure the copy of the demo app in the root dir is deleted or merged back into the demo app in demo/streamlit_app.py.

Build the frontend code with:

cd streamlit_image_select/frontend
npm run build

After this has finished, build and upload the package to PyPI:

cd ../..
poetry build
poetry publish

Piccloud is a full-stack (Angular & Spring Boot) online image clipboard that lets you share images over the internet by generating a unique URL. Others can access the image via this URL.

Piccloud Piccloud is a full-stack application built with Angular & Spring Boot. It is an online image clipboard that lets you share images over the in

Dec 15, 2022

Comments

Allow inital selected image to be specified

Thanks for making this super useful component.

I was wondering if it might be possible to specify the image that is selected when the app first loads. Perhaps this could default to None.

The regular streamlit select box makes use of a argument called index to perform this

opened by shimwell 2
Make images scrollable

Hi, thank you for this!

I have a little request, in case of a lot of images being passed to image_select, Is it possible to make them scrollable to the right or left? Right now everything seems to be listed at once

Thank you

opened by darwinharianto 0
Fix caption color of first render with dark theme

Move dark theme handling code lower, to affect caption variable. Otherwise on the first render of the app with dark theme, the caption color is almost not visible as it uses the light theme color.

opened by chrieke 0
Select multiple images

Being able to select multiple images would increase the applicability of streamlit-image-select. An example use would be to load up numerous images on a page, select a category from a dropdown menu (corresponding to a label), and then select all images matching the label. I'd then use a submit/form button, or other action to generate output data. This data, related to the image filename or index, would then be used for other tasks.

Again, great work!

opened by rnobalr 1

🖼️ An image select component for Streamlit

Related tags

Overview

streamlit-image-select 🖼️

🏃 Try out the demo app 🏃

Installation

Usage

Development

Setup

Making changes

Publishing on PyPI

You might also like...

Piccloud is a full-stack (Angular & Spring Boot) online image clipboard that lets you share images over the internet by generating a unique URL. Others can access the image via this URL.

Cloudinary Image component for Next.js

This simple project, show how work with async Fetch, function component and class component

dynamic-component-app is an angular application for dynamic component template creation

Bootstrap5-tags - Replace select[multiple] with nices badges

Select creates a dropdown list of items with the selected item in closed view.

Annotation tools for the web. Select text, images, or (nearly) anything else, and add your notes.

🛠 Highly customisable, minimalistic input x select field for React.

A custom select dropdown. This is something that is not too difficult to make.

Comments

Allow inital selected image to be specified

Make images scrollable

Fix caption color of first render with dark theme

Select multiple images

Owner

Johannes Rieke

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Kurs-repo för kursen Webbserver och Databaser

This project is a web application that allows the user to select a location on a map, display the selected region, and capture an image of that region. The captured image is then applied as a texture to a 3D cuboid using BabylonJS.

VanillaSelectBox - A dropdown menu with lots of features that takes a select tag and transforms it into a single or multi-select menu with 1 or 2 levels

optimize image & upload file to cloud as image bed with tiny image automic.

🖼️ Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.

Animated Select Component (React)

A Javascript library that discourages and prevents image theft/download by preventing client ability to retrieve the image.

Simple JavaScript Library to add parallax image to background-image