Are you using HTML in Markdown? Tell us why!

Custom Components
82

Hi @jwei,

I’m sorry to say that direct support for Folium is still an open issue, and when you try to display an HTML dump from Folium it will fail probably for the same reason that LIMEexplainer fails.

You can use the workaround that I posted above. So you’d do something like this:

import streamlit as st
import folium

STREAMLIT_STATIC_PATH = "/Users/nthmost/.local/share/virtualenvs/st_sandbox-D9fr_O3a/lib/python3.7/site-packages/streamlit/static/"

map_path = STREAMLIT_STATIC_PATH + 'map.html'

m = folium.Map([38.8934, -76.9470], tiles=’stamentoner’,   zoom_start=12)
open(map_path, 'wb').write(m.repr_html())

st.markdown('<iframe src="/map.html"> </iframe>')

Give that a try and see if it does the trick…!

83

Yes, it’s a solution for using on my end, but it won’t work if I want put this web in Cloud, for example, Heroku, is it?

84

@ jwei

import streamlit as st
import folium

m = folium.Map([38.8934, -76.9470], tiles=’stamentoner’, zoom_start=12)
st.markdown(m.repr_html(), unsafe_allow_html =True)

above code will start working .i were also facing same issue and not finding deck.gl as good as folium .

you need to insatll branca package of version 0.3.1
pip install branca==0.3.1

then restart your streamlit server . it would start working.

1 Like
85

Just a quick update: we’re making progress on Custom Components (i.e. plugins). This will unlock a lot of use-cases brought up in this thread — and we even have a little Folium plugin example working internally. Just give us time to finish this work and open up our beta :smiley:

If I were to venture a guess, I’d say we’re around 1.5 months away from the beta. But don’t quote me on that :shushing_face:

1 Like
86

Custom Components sounds awesome!

I had a go at building a third-party library to allow the primary accent colour to be changed in a way that plays nicely with streamlit (i.e. CSS only). It took quite a while to figure out all of the classes that needed to be overridden.

Unfortunately I hit a roadblock when it came to the BaseUI components. I couldn’t find a way to override those styles without changing the React variables and rebuilding the whole frontend (which requires more memory than is available on my humble dev VPS!).

Looking forward to official support for theming… I can at least see now why it’s a little way off!

87
88

Thanks Umesh_Kumar, it works well for me!

89

I’m also using HTML right now to support downloading of a data table.

def get_table_download_link(df, file_name):
    """Generates a link allowing the data in a given panda dataframe to be downloaded
    in:  dataframe
    out: href string
    """
    csv = df.to_csv(index=True)
    b64 = base64.b64encode(
        csv.encode()
    ).decode()  # some strings <-> bytes conversions necessary here
    href = f'<a href="data:file/csv;base64,{b64}">Download ' + file_name + "</a>"
    return href

That is the code block that I’ve been using recently.

1 Like
90

I am a Persian native speaker and some times I need to write in Persian. Persian is an RTL language. I use <p dir="rtl">some Persian text (یه کم متن فارسی)</p> to write Persian.

Arabic and Hebrew are also RTL languages like Persian.

Thank you for your awesome Streamlit.

3 Likes
91

I want to horizontally align a company logo using st.image and a team name in text. If anyone has anyone suggestions on how to do that then that would be very helpful!

92

I’d like to embed an interactive javascript 3d molecule viewer – see here

http://3dmol.csb.pitt.edu/index.html

1 Like
93

Thank you so much !

94

Hello,
I am trying to put two different coloured box around two different text in the same line. I know that currently a dedicated feature is not available. But as is visible in the twitter link you have attached she has somehow managed to do this. So could anyone please tell me how see was able to do that. I went through her git code but couldn’t figure out how:").
image

This is what I tried:
HTML_l = “”“

Total: {}
”""

HTML_r = “”“

Total: {}
”""

st.write((HTML_l.format(‘text1’),HTML_r.format(‘text2’)),unsafe_allow_html=True)
But didn’t work out

96

It vanished even second time:")

its this:
HTML_t = div style=“ovrflow-x:auto;color:white;border: 1px solid #e6e9ef; border-radius: 0.25rem;
padding: 0.5rem; background-color:#377ed4 ;margin-bottom: 1rem; width: 200px; float:left”>Total: {} div
HTML_r= div style=“ovrflow-x:auto;color:white;border: 1px solid #e6e9ef; border-radius: 0.25rem;
padding: 0.5rem; background-color:#257cd7 ;margin-bottom: 1rem; width: 200px; float:right”>Total: {} div

97

I am using HTML to format html data that comes from a json api.

98

I’d like to show the output of tk.keras.model_summary, which includes multiple spaces on each line to ensure the various elements align. st.write collapses contiguous whitespace chars to a single one, and this messes up the display. Example output is

Model: "single_layer_network"
Layer (type)                  Output Shape   Param #
__________________________________________________________________________________________
dense (Dense)                 (None, 1)      28
activation (Activation)       (None, 1)      0
__________________________________________________________________________________________
Total params: 28
Trainable params: 28
Non-trainable params: 0

If I surround each string with <pre>... </pre> and use the unsafe_allow_html=True option, this whitespace gets preserved, otherwise collapsing whitespaces creates an unreadable/misaligned output

99

I just realized I can just use st.text for “verbatim” text output that preserves whitespace, so for the above use case I don’t need html

2 Likes
101

Hey @rutvik! For this use-case I just released a little Streamlit Component called st-annotated-text: https://github.com/tvst/st-annotated-text

LMK what you think!

5 Likes
102

Woah! This is some amazing helpful work!:heart_eyes: Thanks a lot @thiago:D

103

Added your component to the tracker, since I saw this need pop multiple times on the forum :slight_smile: great component @thiago !

(I’m also tempted to try your jsbuilder lib to pass JS events from Python to React components :thinking:)

3 Likes