🖼️ An image select component for Streamlit

Overview

streamlit-image-select 🖼️

PyPI

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
You might also like...

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

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

Native Base Select 🔽 This module includes a customizable multi-select and a single select component for Native Base. The package is both Android and

Jan 12, 2022

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

Annotator Annotator is a JavaScript library for building annotation applications in browsers. It provides a set of interoperable tools for annotating

Sep 12, 2022

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

Insect 🛠 Highly customisable, minimalistic input x select field for React. ⚡️ Features Tiny size (~4kb Gzip) 100% responsive. Highly customisable. Su

Sep 11, 2022

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

Custom-Dropdown-JS A custom select dropdown using basic JS fucntionality. This is something that is not too difficult to make. But it shows that you h

Mar 26, 2022

A fast, vanilla JS customisable select box/text input plugin for modern browsers ⚡

choices A fast, vanilla, lightweight (~16kb gzipped 🎉 ), configurable select plugin for modern browsers. Similar to Select2 and Selectize but without

Aug 9, 2022

Selectize is the hybrid of a textbox and select box

Selectize is the hybrid of a textbox and select box

Selectize is the hybrid of a textbox and select box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.

Sep 18, 2022

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support.

 The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support.

bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with

Sep 22, 2022

Select plugin alternative to Select2 Vanilla JS

NPM package link https://www.npmjs.com/package/selectra Selectra Vanilla JS Select2 replacement, no jQuery components just pure JS. A custom select in

Apr 5, 2022

A JavaScript library for creating "select-all" checkboxes

SelectAllCheckbox v1.0 See LICENSE for this software's licensing terms. SelectAllCheckbox is a JavaScript library which makes it easy to create "selec

Jul 27, 2021
Owner
Johannes Rieke
Product manager @streamlit
Johannes Rieke
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 13 Jul 1, 2022
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

vanillaSelectBox v1.0.0 vanillaSelectBox : v1.00 : Adding a package.json file New : Possibility to change the dropdown tree and change the remote sear

philippe MEYER 99 Sep 13, 2022
🖼️ Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.

Next.js Image Proxy Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component. ❔ Motivation This library makes it poss

Blazity 24 Sep 20, 2022
Animated Select Component (React)

Spring Chain We built a custom select component with a menu with animations and beautiful gradients and a glassy style, is called "Spring Chain" becau

Cecilia Benitez 7 Feb 6, 2022
A Javascript library that discourages and prevents image theft/download by preventing client ability to retrieve the image.

ProtectImage.js ProtectImage.js is a Javascript library that helps prevent image theft by disabling traditional user interactions to download/copy ima

null 4 Aug 18, 2022
Cloudinary Image component for Next.js

Cloudinary Next.js Component Get the best of Cloudinary in Next.js with the CldImage component! ?? EXPERIMENTAL: while this should be working pretty w

Colby Fayock 7 Sep 19, 2022
This simple project, show how work with async Fetch, function component and class component

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

DaliyaAsel 2 Feb 17, 2022
dynamic-component-app is an angular application for dynamic component template creation

MyApp This project was generated with Angular CLI version 14.1.0. Development server Run ng serve for a dev server. Navigate to http://localhost:4200/

Aniket Muruskar 7 Aug 26, 2022
Bootstrap5-tags - Replace select[multiple] with nices badges

Tags for Bootstrap 4/5 How to use An ES6 native replacement for select using standards Bootstrap 5 (and 4) styles. No additional CSS needed! Supports

Thomas Portelange 59 Sep 16, 2022