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:
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
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
Let me know if any of these solves the issue.
