Spaces:
Sleeping
Sleeping
File size: 2,441 Bytes
9d6ac78 3a17f78 5967551 b30a75c 5967551 3a17f78 5967551 3a17f78 5967551 3a17f78 5967551 3a17f78 5967551 3a17f78 5967551 9d6ac78 3a17f78 b30a75c 5967551 3a17f78 5967551 3a17f78 5967551 b30a75c 3a17f78 5967551 3a17f78 5967551 3a17f78 5967551 3a17f78 5967551 b30a75c 5967551 3a17f78 5967551 b30a75c 5967551 b30a75c 5967551 3a17f78 b30a75c 5967551 b30a75c 3a17f78 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
import streamlit as st
from streamlit.components.v1 import html
# Define JavaScript code
javascript_code = """
<script>
// Function to return a string
function myJavaScriptFunction() {
return "Hello from JavaScript!";
}
// Function to call and send data back to Python
function callAndCapture() {
const result = myJavaScriptFunction();
window.parent.postMessage({ isStreamlitMessage: true, type: 'streamlit:js_return', data: result }, '*');
}
// Add event listener to handle messages from Streamlit
window.addEventListener('message', function(event) {
if (event.data && event.data.type === 'streamlit:buttonClick') {
callAndCapture();
}
});
</script>
<button onclick="callAndCapture()">Run JavaScript Function</button>
"""
# Embed JavaScript into Streamlit app
html(javascript_code, height=300)
# Placeholder for displaying results
result_placeholder = st.empty()
# Add Streamlit button to trigger JavaScript function
if st.button("Call JavaScript Function"):
st.write("Waiting for JavaScript response...")
trigger_js = """
<script>
window.parent.postMessage({ type: 'streamlit:buttonClick' }, '*');
</script>
"""
html(trigger_js, height=0)
# Listener for JavaScript messages
st.markdown(
"""
<script>
// Function to listen for messages from JavaScript
window.addEventListener('message', (event) => {
if (event.data && event.data.type === 'streamlit:js_return') {
const result = event.data.data;
// Send the result to Streamlit via a custom event
document.dispatchEvent(new CustomEvent('StreamlitResult', { detail: result }));
}
});
// Dispatch result to Streamlit when received
document.addEventListener('StreamlitResult', (e) => {
const data = e.detail;
window.parent.postMessage({ type: 'streamlit:result', data: data }, '*');
});
</script>
""",
unsafe_allow_html=True,
)
# Handle the result sent from JavaScript
if "js_result" not in st.session_state:
st.session_state["js_result"] = ""
# Update session state and display the result
try:
received_result = st.session_state["js_result"]
# Only display if we have new data
if received_result:
result_placeholder.write(f"Result from JavaScript: {received_result}")
except Exception as e:
st.error(f"An error occurred: {e}")
|