search

binh-vu / streamlit-bridge

Streamlit components that allow client side (javascript) to send data to the server side (python) and render HTML content without being processed by Markdown.
MIT License
26 stars 7 forks source link

Streamlit-bridge seems unresponsive in Streamlit cloud #7

Open maxuser74 opened 9 months ago

maxuser74 commented 9 months ago

Hello, even if it seems i could import streamlit-bridge in Streamlit cloud application, it keeps me giving error "Uncaught ReferenceError: stBridges is not defined" Locally it functions without problems Any idea ?

binh-vu commented 9 months ago

Can you share some code to help reproduce the problem on my side?

Without it, I guess the error you had is in the frontend, right? My code try to set the variable stBridges to the window variable (to make it global) so that we can call it from difference places. So I guess the problem is that this component was inside multiple iframe - see this file

maxuser74 commented 9 months ago

Hello and thanks for the reply. I have cut down the code for simplicity and tried to reproduce the error. The following sample code isn't functioning in Streamlit Cloud but it is locally:

import streamlit as st
from st_bridge import bridge, html

st.set_page_config(
    page_title="Python Chess Explorer",
    layout="wide"
)

data = bridge("my-bridge", default="")

st.markdown("""
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">""",
            unsafe_allow_html=True)

html("""
 <button type="button" class="btn btn-primary" onClick="stBridges.send('my-bridge', 
 'prev')"> Prev </button>
 <button type="button" class="btn btn-primary" onClick="stBridges.send('my-bridge', 
 'next')">Next  </button>

""")

if data:
    st.text(data)

This is the browser (Chrome) error:

Uncaught ReferenceError: stBridges is not defined at HTMLButtonElement.onclick

kyleliang919 commented 1 month ago

I hit similar issue when hosting on huggingface space, locally everything works perfectly, but once uploaded it hits this issue:

Your app is having trouble loading the st_bridge.bridge.bridge component.

If this is an installed component that works locally, the app may be having trouble accessing the component frontend assets due to network latency or proxy settings in your app deployment.

For more troubleshooting help, please see the [Streamlit Component docs](https://docs.streamlit.io/develop/concepts/custom-components) or visit our [forums](https://discuss.streamlit.io/).

image

The source code can be found here: https://huggingface.co/spaces/kz919/Can-You-Beat-405B-in-Chess/tree/main