Update app.py

app.py

@@ -1,7 +1,7 @@
 import streamlit as st
 from streamlit.components.v1 import html
 
-# Define JavaScript code as a single script
+# Define JavaScript code
 javascript_code = """
 <script>
     // Function to return a string
@@ -26,13 +26,14 @@ javascript_code = """
 """
 
 # Embed JavaScript into Streamlit app
-html_container = html(javascript_code, height=300)
+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' }, '*');
@@ -44,13 +45,20 @@ if st.button("Call JavaScript Function"):
 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;
-            // Reflect the result back to Streamlit
-            window.parent.postMessage({ type: 'streamlit:python_side', data: result }, '*');
+            // 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,
@@ -60,23 +68,11 @@ st.markdown(
 if "js_result" not in st.session_state:
     st.session_state["js_result"] = ""
 
+# Update session state and display the result
 try:
-    received_result = html(
-        """
-        <script>
-        window.addEventListener('message', (event) => {
-            if (event.data && event.data.type === 'streamlit:python_side') {
-                const data = event.data.data;
-                document.dispatchEvent(new CustomEvent('StreamlitResult', { detail: data }));
-            }
-        });
-        </script>
-        """,
-        height=0,
-    )
-    # Capture and update the session state
-    if received_result != st.session_state["js_result"]:
-        st.session_state["js_result"] = received_result
+    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}")