How can I display this chunk of html output?

🎈 Using Streamlit
1

I need to display an output from ELI5 package which is a html table like this.

Screen Shot 2020-02-28 at 9.59.27 PM
Screen Shot 2020-02-28 at 9.59.27 PM1204×240 35.6 KB
The definition can be found in the line 132-133 of this source code.

I already tried extracting the code from the html output and render it using st.markdown(code, unsafe_allow_html=True)

However it’s just displaying the html like the chunk below instead of rendering it

 <table class="eli5-weights eli5-feature-importances" style="border-collapse: collapse; border: none; margin-top: 0em; table-layout: auto;">
<thead>
<tr style="border: none;">
    <th style="padding: 0 1em 0 0.5em; text-align: right; border: none;">Weight</th>
    <th style="padding: 0 0.5em 0 0.5em; text-align: left; border: none;">Feature</th>
</tr>
</thead>
<tbody>

    <tr style="background-color: hsl(120, 100.00%, 80.00%); border: none;">
        <td style="padding: 0 1em 0 0.5em; text-align: right; border: none;">
            0.4567

                &plusmn; 0.5815

        </td>
        <td style="padding: 0 0.5em 0 0.5em; text-align: left; border: none;">
            x3
        </td>
    </tr>

    <tr style="background-color: hsl(120, 100.00%, 81.40%); border: none;">
        <td style="padding: 0 1em 0 0.5em; text-align: right; border: none;">
            0.4116

                &plusmn; 0.5792

        </td>
        <td style="padding: 0 0.5em 0 0.5em; text-align: left; border: none;">
            x2
        </td>
    </tr>

    <tr style="background-color: hsl(120, 100.00%, 93.05%); border: none;">
        <td style="padding: 0 1em 0 0.5em; text-align: right; border: none;">
            0.1008

                &plusmn; 0.2772

        </td>
        <td style="padding: 0 0.5em 0 0.5em; text-align: left; border: none;">
            x0
        </td>
    </tr>

    <tr style="background-color: hsl(120, 100.00%, 96.96%); border: none;">
        <td style="padding: 0 1em 0 0.5em; text-align: right; border: none;">
            0.0309

                &plusmn; 0.0822

        </td>
        <td style="padding: 0 0.5em 0 0.5em; text-align: left; border: none;">
            x1
        </td>
    </tr>


</tbody>
```

The complete code to generate the html output above is:

import sklearn.datasets
from sklearn.model_selection import train_test_split
from sklearn.ensemble import RandomForestClassifier
import eli5
data = sklearn.datasets.load_iris()
train, test, labels_train, labels_test = train_test_split(
        data.data, data.target, train_size=0.80)
rf = RandomForestClassifier(n_estimators=500)
rf.fit(train, labels_train)
st.markdown(eli5.show_weights(rf).data, unsafe_allow_html=True)
2

Hello @yellowPanther,

Interestingly, when you remove most of the newlines in the HTML file, it works, at least on my Firefox :

import streamlit as st

html_code = """
<table class="eli5-weights eli5-feature-importances" style="border-collapse: collapse; border: none; margin-top: 0em; table-layout: auto;">
<thead>
<tr style="border: none;">
    <th style="padding: 0 1em 0 0.5em; text-align: right; border: none;">Weight</th>
    <th style="padding: 0 0.5em 0 0.5em; text-align: left; border: none;">Feature</th>
</tr>
</thead>
<tbody>
    <tr style="background-color: hsl(120, 100.00%, 80.00%); border: none;">
        <td style="padding: 0 1em 0 0.5em; text-align: right; border: none;">
            0.4567 &plusmn; 0.5815
        </td>
        <td style="padding: 0 0.5em 0 0.5em; text-align: left; border: none;">
            x3
        </td>
    </tr>
    <tr style="background-color: hsl(120, 100.00%, 81.40%); border: none;">
        <td style="padding: 0 1em 0 0.5em; text-align: right; border: none;">
            0.4116 &plusmn; 0.5792
        </td>
        <td style="padding: 0 0.5em 0 0.5em; text-align: left; border: none;">
            x2
        </td>
    </tr>
    <tr style="background-color: hsl(120, 100.00%, 93.05%); border: none;">
        <td style="padding: 0 1em 0 0.5em; text-align: right; border: none;">
            0.1008 &plusmn; 0.2772
        </td>
        <td style="padding: 0 0.5em 0 0.5em; text-align: left; border: none;">
            x0
        </td>
    </tr>
    <tr style="background-color: hsl(120, 100.00%, 96.96%); border: none;">
        <td style="padding: 0 1em 0 0.5em; text-align: right; border: none;">
            0.0309 &plusmn; 0.0822
        </td>
        <td style="padding: 0 0.5em 0 0.5em; text-align: left; border: none;">
            x1
        </td>
    </tr>
</tbody>
"""

st.markdown(html_code, unsafe_allow_html=True)

image

(well I’m not sure it finds the .eli5-weights .eli5-feature-importances CSS classes, you may need to import them using this snippet.)

2 Likes
3

@andfanilo Thanks, this is awesome! How did you even figure this out?

4

I wish I had a cool answer like “Went into the source code” or “Saw it in the logs”, but really it was just a hunch from my days in web scraping :sweat_smile:

You still get to do the HTML programmatic formatting work from eli5 into st.markdown to remove those pesky newlines, and when you do I’d be interested in the code snippet :slight_smile:

Cheers,
Fanilo