Showing a pyLDAvis html

Using Streamlit
1

Hello there! May i ask on streamlit, is it possible to render a pyLDAvis HTML on the streamlit app itself?

I have tried importing the html file as a string and st.write with it, but it doesn’t show anything. And from what i understand on the HTML issue that was posted on github, JS is still not enabled yet.

The next alternative I have to show this html is to insert it as a hyperlink like this
image

However, it is not able to open up the HTML file that I have locally, with a 404: Not Found error. Clicking the redirect link brings me to http://10.12.200.18:8501/website/assets/overall_100_topics_enhanced.html, as my html file is under the folder website/assets.

Is there anyconfiguration that I can make to Streamlit (currently using v50.2) to make either rendering JS / redirect link in markdown for pyLDAvis to show up?

Thank you!

2

Hi @lyqht - Streamlit doesn’t currently support embedding HTML/js, but we’re thinking about ways to implement this safely and sanely. (There’s a ticket we just opened to track one particular way this might be done, using iframes, here.)

Re: your link to another HTML file - out of the box, Streamlit does not (currently) support serving files from your filesystem. This functionality is also under consideration, but in the meantime you have a few options:

  • Host your static files via a second webserver. For example, you could use Python’s built-in http.server to accomplish this. Note that this server will have to run on a different port from Streamlit, so your links to website/assets will have to include the port that you start the separate server from (e.g. http://10.12.200.18:8000/website/assets/..., if you run the server on port 8000.)
  • Modify the Streamlit code to support serving static files. There’s a Gist that demonstrates this and a feature request for supporting file serving directly in Streamlit, if you’re interested in following progress on that.
2 Likes
3

Hi @tim, I want to open an index.html file that contains Js code for d3.js visualization. When I used streamlit locally, I started http server and with webbrower.open_new_tab(http://localhost:8000/index.html), I was able to open the visualization. However when I deployed the app on share streamlit, I couldnt do that. When I click on the button, no new tab appears. Could you please explain to me more how to fix that, I am barely new to deployement :slight_smile:. I would really appreciate it.

4

Hey @ghass002 - Streamlit sharing doesn’t do any direct hosting of HTML files, so this approach won’t work. However, Streamlit now has the ability to embed HTML directly into an app:

import streamlit as st

html_string = ... # load your HTML from disk here
st.html(html_string)
5

this HTML file contain JS coding. Will that also work? thank you @tim

6

Yep, JavaScript will work. (The HTML will be loaded into an iframe, and it can do basically anything it wants in there.)

7

I don’t know whether this is still an issue, but I have been dealing with this on the last 2 projects I have made, and I think I finally cracked it.

html_string = pyLDAvis.prepared_data_to_html(prepared_pyLDAvis_data)
from streamlit import components
components.v1.html(diplo_string, width=1300, height=800, scrolling=True)

Hope this helps!

2 Likes
8

Hey Gotticketsto360tour. I am running to the same issue with Streamlit.
here is my current code. Any idea on how I can display it in Streamlit app?
lda_model = gensim.models.ldamodel.LdaModel(corpus=corpus, id2word=id2word, num_topics=5, random_state=1, update_every=1, chunksize=100, passes=10, alpha=‘auto’, per_word_topics=True)
import pyLDAvis
import pyLDAvis.gensim_models as gensimvis
vis = gensimvis.prepare(lda_model, corpus, id2word)

9

Hi Max,
Have you tried:

html_string = pyLDAvis.prepared_data_to_html(vis)
from streamlit import components
​components.v1.html(html_string, width=1300, height=800)
2 Likes