Custom Markdown radio-button

[SE-Magellan]

Hey guys,
Unfortunately I was unable to find an answer here on the forum that could guide me.

I can create custom “Markdown HTML”, but I cannot capture the selection change.
The images are .png files of American and Brazilian flags, transformed into base64 to function as icons.
Please, can you tell me some way to achieve my goal?

Follow my code.

import streamlit as st
import base64

st.set_page_config(page_title="Data Analisys Dashboard", page_icon=":chart:")


@st.cache_data
def get_img_as_b64(img_file):
    with open(img_file, "rb") as f:
        data = f.read()
    return base64.b64encode(data).decode()

en_img = get_img_as_b64("en.png")
pt_br_img = get_img_as_b64("pt-br.png")

def initialize_page():
    st.sidebar.markdown(
        f"""
        <div id="language-selector" style="width: 224px; padding-bottom: 8px;">
            <label>
                <div>
                    <p>Language/Idioma</p>
                </div>
            </label>
            <div style="display: flex">
                <label style="flex: 1; display: flex; align-items: center;">
                    <input name="language" id="english" tabindex="0" type="radio" value="0" checked="" style="margin-right: 5px;">
                    <div>
                        <img src="data:image/png;base64,{en_img}" alt="English" style="width: 20px; height: 20px;">
                    </div>
                </label>
                <label style="flex: 1; display: flex; align-items: center;">
                    <input name="language" id="portuguese" tabindex="-1" type="radio" value="1" style="margin-right: 5px;">
                    <div>
                        <img src="data:image/png;base64,{pt_br_img}" alt="Português" style="width: 20px; height: 20px;">
                    </div>
                </label>
            </div>
        </div>
        
        """,
        unsafe_allow_html=True
    )
      


# create navigation page menu
    
def create_navigation_menu(pages):
   
    page = st.sidebar.selectbox("Ir para...", tuple(pages.keys()))
    return pages[page]```

Thanks

[Shawn_Pereira]

Hi, you could try one of the following alternate options:

1. Libraries on pypi Eg. emoji-country-flag · PyPI
2. https://image-select.streamlit.app/
3. Custom component to display clickable images

Cheers

[SE-Magellan]

Thanks for the directions.
But I had already read each of them and was unable to obtain or make adjustments to any of them in my code (which would produce the desired effect).
In the case of the ‘flags’ lib (which would ‘come closer to what is desired’) the icons relating to the ‘US’ and ‘BR’ flags, when rendered, appear only as strings and in the case of ‘GBENG’ a small black flag appears.
In this code example, the smiley icon that appears on the label was the type of effect I would like for radio buttons

import flag

st.radio('Test flag icon :smile:', (flag.flag('BR'), flag.flag('US'), flag.flag('GBENG') ))

Maybe I wasn’t able to correctly convey my objective in the initial post.

I would like to have just one flag icon (related to the dashboard’s language options) next to each radio button.
The ‘Mardown’ HTML that I created partially fulfills this proposal. I just can’t somehow detect the selection change.
(I even tried using js script and checked other posts here on the forum. They don’t seem to work within Streamlit)

[blackary]

Could you just use emojis, like this?

language_options = {
    '🇺🇸': 'American English',
    '🇬🇧': 'British English',
    '🇧🇷': 'Portugese',
}

selected_language = st.radio('Select a language:', options=language_options)

st.write(f'Selected language: {language_options[selected_language]}')

[SE-Magellan]

Hi @blackary

I just saw something strange around here…
When I view this post on my smartphone the flags appear exactly as expected.
But on my computer the browser doesn’t display it the same way (it just shows string instead of the flag image).
The worst thing is that I tested it on 2 different browsers, Chrome Version 120.0.6099.225 (Official Build) 64-bit and MS Edge Version 120.0.2210.144 (Official Build) (64-bit)

[dataprofessor]

Hi @SE-Magellan

The app shown above was implemented via st-lite and displayed in an iframe of the above forum post, and it seems to be causing issue for your access in a Chrome browser. However, have you tried to deploy the app and access it via your browsers.

I’ve tested by deploying the app and it seems to be working for me on the Chrome browser.

[SE-Magellan]

Hi @dataprofessor
Thanks for the tip, but as it’s still under development I haven’t deployed it yet.
As soon as I can I will try to deploy and see what happens.

[SE-Magellan]

That’s weird thing…
Print screen from smartphone

[SE-Magellan]

I don’t know if it’s a valid deploy…
I did it by Streamlit/Github and get the same result as localhost

This is a print from a 3rd browser (Opera) in my desktop

As we can see I included the same code @blackary suggested together with mine and worked, except by no rendered flag icon

Any other suggestion?

[SE-Magellan]

Hi

Things still running weird.
I got this from shareable link, from @blackary st-lite test:

This is the result I get in my desktop Win 11 with any browser

But if run the same shareable link in a Virtual Linux machine, running chromium browser I get this:

Buy the way, with Ubuntu VM and Firefox I got a ‘Security error’ and no rendering result for st-lite sandbox:

That’s it

Edited

Running VM Ubuntu Chromium in my account https://share.streamlit.io/ I got the same problem like Win 11

[blackary]

Does it work any differently if you use the :emoji-name: syntax?

language_options = {
    ':flag-us:': 'American English',
    ':flag-gb:': 'British English',
    ':flag-br:': 'Portugese'
}

[SE-Magellan]

Hi @blackary ,

The suggestion did not cause change, still the same… Does not render in laptop but it’s fine on smartphone

Laptop:

Thanks.

[dataprofessor]

Hi @SE-Magellan

Have you tried installing the emoji fonts on your Ubuntu:

sudo apt install fonts-noto-color-emoji

Have you also tried using other computer/browsers and different versions of browsers. Perhaps you could also try updating your browser?

[SE-Magellan]

Hi @dataprofessor ,

I’m going to show you the scenario of the tests I conducted. On my Win 11/23H2 laptop with the following browsers: Chrome, EDGE, Opera (all updated)

In the 3 browsers I performed the tests with the following links:
shared by @blackary
From My Github

In none of them was there a correct display.

From my laptop, with a virtual machine using Ubuntu 22.04.3 LTS, with an updated version of Firefox before installing the indicated font, it was possible to see in the stLite editor (shared by @blackary), but it did not render in the panel on the side (mentioned earlier with a ‘security’ error detected by Firefox)

After installing the suggestion on the Ubuntu virtual machine, firefox stopped displaying the flags in the editor. Removing the suggestion went back to what it was before

On the Samsung S20FE/Andoid smartphone it continues to work normally with any of the above links.

Thanks anyway for the suggestion.

[dataprofessor]

Hi @SE-Magellan

Thanks for investigating further. It seems that the smartphone is the working option from the devices that you’ve tried. Could it be a proxy/internet connectivity issue? Can you try using your phone to share internet connection to your other device that you’ve tried previously to see if that changes anything.

[SE-Magellan]

Hi @dataprofessor ,
Thanks for your time and suggestion, but still the same no matter what connection used.

I tried the connection by 5G smartphone and nothing changed.

But there is a point, on Linux systems always works fine (no matter if 5G smartphone or broadband connection).

It seems to me a S.O problem (at least for Windows 11) since Linux/Android works fine with the same code.

By the way, I’ve installed Linux Mint dual boot with Windows 11 and sharing the same hardware, internet connection but just Linux works.

[dataprofessor]

Hi @SE-Magellan

So it turns out to be an issue with Windows 11 not support flag emojis:

https://www.reddit.com/r/windows/comments/10vttal/why_flag_emoji_are_still_broken_in_windows_11/?rdt=33150

[SE-Magellan]

Thank you again @dataprofessor

It seems to me that I’ll give-up from this design approach…