As a Python developer, I had a hard time building a streamlined UI that was ready to be used in demos or customer presentations. I found Streamlit (now part of Snowflake) and was ecstatic with its pure Python approach and simple interface to build a complex UI.
Streamlit is an open-source Python library that simplifies the creation and deployment of interactive data applications. It allows developers to build visually appealing web apps directly from Python scripts, combining data visualization, machine learning models, and interactive widgets. Streamlit’s react-based model ensures a smooth user experience by automatically updating the UI based on user interactions or data changes.
In this blog post, we’ll discuss how to build and launch components for the Cloudinary Upload widget, Media Library widget, Product Gallery widget, and Video Player.
Streamlit components allow you to extend a platform’s functionality. However, there were no components for Cloudinary, so during Cloudinary’s hackathon, I built the following Streamlit components:
| Use Case | Component | GitHub Home | PyPi Link |
| Uploading assets | streamlit_cld_upload_widget | https://github.com/akshayranganath/streamlit_cld_upload_widget | https://pypi.org/project/streamlit-cld-upload-widget/ |
| Media Library integration | cld_media_library | https://github.com/akshayranganath/cld_media_library | https://pypi.org/project/cld-media-library/ |
| Video Player | streamlit_cld_video_player | https://github.com/akshayranganath/streamlit_cld_video_player | https://pypi.org/project/streamlit-cld-video-player/ |
| Product Gallery widget | streamlit_cld_product_gallery_widget | https://github.com/akshayranganath/streamlit_cld_product_gallery_widget | https://pypi.org/project/streamlit-cld-product-gallery-widget/ |
To use any of the components, follow these two steps:
Find the right PyPi name and install as:
pip install component-nameTo include and use within your code, please do the following:
import streamlit as st
from <<library>> import <<cld-widget>>
value = <<cld-widget>>(initialization params)
st.write(value)Code language: JavaScript (javascript)Read on for more information about the four components.
The Upload Widget component for Streamlit implements the Upload widget. Using this widget, you should be able to set up uploading of resources from users to Cloudinary. The widget supports a lot of customizations, a few of which have been implemented in this first version and documented here.
To set this up, you’ll need to use your product environment name and an unsigned upload preset.
This widget is useful when you want your users to upload assets directly to Cloudinary. Additionally, you can enhance the upload preset to use our Add-ons for moderation purposes. This widget is useful for uploading user-generated content (UGC) or accepting content from vendors, partners or agencies.
Cloudinary’s DAM offers a view of all your media as an asset library. You can embed this same view within your Streamlit app using the media library component, which is based on the Media Library widget.
The integration allows your users to choose and insert an asset into your workflow. Users can also build transformations and insert this transformed asset.
The Cloudinary’s Video Player offers an easy way to embed videos in your web application. Additionally, the player includes complex controls, chapters, playlists, and more. The streamlit component exposes a subset of player customizations so you can easily embed and play videos hosted on Cloudinary through a Streamlit app.
If you’re showcasing or building an e-commerce application, use the Product Gallery widget to easily build this experience. The widget allows you to control transformations and UI. The product gallery streamlit component implements this widget so you can create similar experiences within a Streamlit application.
I hope that you’ll love these integrations. If you run into any issues, please feel free to open an issue in Github and I’d be happy to solve it.
