[Streamlit] link html file

Linking an external HTML file in a Streamlit application can be done in a few ways, depending on how you want to integrate the HTML content into your app. Streamlit provides several methods to display HTML content. Here are some common methods:

1. Using st.markdown with HTML:

If you have a small HTML file or HTML content that you want to render directly in your Streamlit app, you can read the HTML file as a string and use st.markdown with the unsafe_allow_html=True parameter to render it.

import streamlit as st

# Read HTML file
with open('path/to/your/file.html', 'r') as f:
    html_string = f.read()

# Display HTML content
st.markdown(html_string, unsafe_allow_html=True)

2. Using st.components.v1.html:

For more complex HTML, JavaScript, or CSS, you can use st.components.v1.html which allows for the rendering of custom HTML.

import streamlit as st
import streamlit.components.v1 as components

# Read HTML file
with open('path/to/your/file.html', 'r') as f:
    html_string = f.read()

# Display HTML content
components.html(html_string)

3. Using an IFrame:

If your HTML file is hosted and accessible via a URL, you can display it in an iframe using st.components.v1.iframe.

import streamlit.components.v1 as components

# URL of the HTML file (if hosted)
url = 'http://path/to/your/file.html'

# Display in an iframe
components.iframe(url)

4. Using Static File Path:

If you want to provide a link to the HTML file for users to download or view in their browser, you can serve static files using a workaround, as Streamlit doesn't natively support hosting static files. This involves setting up a local server to serve your static files or using a cloud service to host the files.

Important Notes:

• Security: Be cautious with unsafe_allow_html=True in st.markdown, as it can expose your app to security risks if you're rendering untrusted HTML.
• File Paths: Ensure that the path to your HTML file is correct and accessible from your Streamlit app's running directory.
• File Hosting: For serving static files, consider hosting them on a web server or a cloud storage service if they are not meant to be embedded directly into the app.

Each method has its use cases, so you can choose the one that best fits your needs. Remember to test the functionality to ensure it behaves as expected in your Streamlit app.