Unable to load .html file in streamlit app

🎈 Using Streamlit
1

I am generating a deepchecks report to visualize data drift. I am trying to load the .html file in a streamlit application, but Its not loading on the page.

Code snippet:

import streamlit as st

#Read the HTML file
with open("deepchecks_file.html", "r") as f: ##deepchecks: result.save_as_html("deepchecks_file")
    html_data = f.read()


st.header("Deepchecks")
st.components.v1.html(html_data)

When i run the code above, i get the following result:

image
image1427×626 6.58 KB

The deepchecks report does not load and i keep getting this blank page with no error message. Any tips on how to solve it? Thanks!

1 Like
2

Hi @Gabriel21,

Thanks for posting! Not sure why your get is not rendering but you could double-check your HTML code and make sure it’s not causing ay rendering issues.

Here’s an example I used with your code:

example_page.html 

<!DOCTYPE html>
<html>
<head>
	<title>Example HTML Page</title>
</head>
<body>
	<h1>Welcome to my HTML page</h1>
	<p>This is an example paragraph of text.</p>
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
	</ul>
</body>
</html>

app.py 

import streamlit as st

# Read the HTML file
with open("example_page.html", "r") as f:
    html_data = f.read()

st.header("Deepchecks")

st.write('---')

st.subheader('Using st.markdown')
st.code('''st.markdown(html_data, unsafe_allow_html=True)''', language='python')
st.markdown(html_data, unsafe_allow_html=True)

st.write('---')

st.subheader('Using st.markdown with iframe')
st.code('''st.markdown(f'<iframe srcdoc="{html_data}" width="1000" height="600"></iframe>', unsafe_allow_html=True)''', language='python')
st.markdown(f'<iframe srcdoc="{html_data}" width="1000" height="600"></iframe>', unsafe_allow_html=True)

st.write('---')

st.subheader('Using components.v1.html')
st.code('''st.components.v1.html(html_data)''', language='python')
st.components.v1.html(html_data)

Output

streamlit-app-2023-03-27-14-03-94

Let me know if any of these solves the issue.

3

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.