New Component: Streamlit Avatar

Custom Components
1

Hello Streamlit community.
This is a very tiny component, but I made it to contribute to the styling of Streamlit.

Github: ppspps824/streamlit_avatar (github.com)
PyPI: streamlit-avatar · PyPI

ScreenShot:

image
image883×788 64.5 KB

Installation instructions

pip install streamlit-avatar

Usage instructions

Simple Usage

import streamlit as st
from streamlit_avatar import avatar

result = avatar(
    [
        {
            "url": "https://picsum.photos/id/237/300/300",
            "size": 40,
            "title": "Sam",
            "caption": "hello",
            "key": "avatar1",
        },
        {
            "url": "https://picsum.photos/id/238/300/300",
            "size": 40,
            "title": "Bob",
            "caption": "happy",
            "key": "avatar2",
        },
        {
            "url": "https://picsum.photos/id/23/300/300",
            "size": 40,
            "title": "Rick",
            "caption": "Bye",
            "key": "avatar3",
        },
    ]
)
st.write(result)

""" Return
{
"title":"Sam"
"cption":"hello"
"key":"avatar1"
}
"""

Using Base64

import streamlit as st
from streamlit_avatar import avatar
import base64

def get_image_base64(image_path):
    with open(image_path, "rb") as image_file:
        return base64.b64encode(image_file.read()).decode("utf-8")

image_path = "assets/image.png"
image_base64 = get_image_base64(image_path)
image_url = f"data:image/png;base64,{image_base64}"

result = avatar(
    [
        {
            "url": image_url,
            "size": 40,
            "title": "Sam",
            "caption": "hello",
            "key": "avatar1",
        }
    ]
)
st.write(result)
3 Likes
2

A very simple and user-friendly component, please consider adding callback parameters.

1 Like
3

Hi! @lkdd-ao
Thanks for the feedback.

What parameters would be useful to return?
I am willing to do it.

1 Like
4

I personally think that key and title are useful. When multiple avatars exist, key serves as the unique identifier and title serves as the client response value. Thank you. :blush:

5

@lkdd-ao
I made a typo! I recreated it as streamlt_avatar.
And now it returns title and key.
I fixed the first post so check it out.

1 Like
6

Thank you very much. I will try to use it as a user avatar and user selection list. The minimalist design allows it to be quickly applied in my web application.