Update app.py

app.py

@@ -1,23 +1,23 @@
 import streamlit as st
+from streamlit.components.v1 import html
 
-# Define the JavaScript to be embedded
+# Define JavaScript code as a single script
 javascript_code = """
 <script>
+    // Function to return a string
     function myJavaScriptFunction() {
-        // Function to return a string
         return "Hello from JavaScript!";
     }
 
-    // Function to be called on button click; uses window.alert to display the return value
+    // Function to call and send data back to Python
     function callAndCapture() {
         const result = myJavaScriptFunction();
-        // Use Streamlit's via the streamlit:component event to send data back to Python
-        window.parent.postMessage({isStreamlitMessage: true, type: 'streamlit:component', data: result}, '*');
+        window.parent.postMessage({ isStreamlitMessage: true, type: 'streamlit:js_return', data: result }, '*');
     }
 
-    // Add an event listener to handle messages from the iframe or parent window.
+    // Add event listener to handle messages from Streamlit
     window.addEventListener('message', function(event) {
-        if (event.data.type === 'streamlit:buttonClick') {
+        if (event.data && event.data.type === 'streamlit:buttonClick') {
             callAndCapture();
         }
     });
@@ -25,35 +25,30 @@ javascript_code = """
 <button onclick="callAndCapture()">Run JavaScript Function</button>
 """
 
-# Create a container for HTML/JS script
-html_container = st.empty()
-html_container.html(javascript_code + "<div id='returned_value'></div>", height=300)
+# Embed JavaScript into Streamlit app
+html_container = html(javascript_code, height=300)
 
-# Create a placeholder message
-message_placeholder = st.empty()
+# Placeholder for displaying results
+result_placeholder = st.empty()
 
-# Add a button in Streamlit to send a message to the iframe to call JavaScript
+# Add Streamlit button to trigger JavaScript function
 if st.button("Call JavaScript Function"):
-    js = """
+    trigger_js = """
     <script>
-    window.parent.postMessage({type: "streamlit:buttonClick"}, "*");
+    window.parent.postMessage({ type: 'streamlit:buttonClick' }, '*');
     </script>
     """
-    html_container.html(javascript_code + js + "<div id='returned_value'></div>", height=300)
+    html(trigger_js, height=0)
 
-# Future-proofing to listen for messages from the JavaScript side
-if "js_result" not in st.session_state:
-    st.session_state["js_result"] = ""
-
-# Handle messages from JavaScript
+# Listener for JavaScript messages
 st.markdown(
     """
     <script>
     window.addEventListener('message', (event) => {
-        if (event.data && event.data.isStreamlitMessage) {
+        if (event.data && event.data.type === 'streamlit:js_return') {
             const result = event.data.data;
-            // Reflect the result back to the Python script
-            window.parent.postMessage({type: 'streamlit:component_with_result', data: result}, '*');
+            // Reflect the result back to Streamlit
+            window.parent.postMessage({ type: 'streamlit:python_side', data: result }, '*');
         }
     });
     </script>
@@ -61,26 +56,27 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
-# Python-side listener to write the result to the placeholder
+# Handle the result sent from JavaScript
+if "js_result" not in st.session_state:
+    st.session_state["js_result"] = ""
+
 try:
-    import streamlit.components.v1 as components
-    messages = components.html(
+    received_result = html(
         """
         <script>
         window.addEventListener('message', (event) => {
-            if (event.data.type === 'streamlit:component_with_result') {
-                window.parent.postMessage(event.data.data, '*');
+            if (event.data && event.data.type === 'streamlit:python_side') {
+                const data = event.data.data;
+                document.dispatchEvent(new CustomEvent('StreamlitResult', { detail: data }));
             }
         });
         </script>
         """,
         height=0,
     )
-    if_messages_received = messages._deserialize()
-    if if_messages_received and if_messages_received != st.session_state["js_result"]:
-        st.session_state["js_result"] = if_messages_received
-        message_placeholder.markdown("_" + if_messages_received + "_")
-except:
-    pass
-
-st.session_state["js_result"]
+    # Capture and update the session state
+    if received_result != st.session_state["js_result"]:
+        st.session_state["js_result"] = received_result
+        result_placeholder.write(f"Result from JavaScript: {received_result}")
+except Exception as e:
+    st.error(f"An error occurred: {e}")