Update app.py

app.py

@@ -1,19 +1,86 @@
 import streamlit as st
-import streamlit.components.v1 as components
-
-# Define the JavaScript code
-js_code = """
-function myFunction() {
-    // Perform your desired operation here
-    var result = "This is the result from JavaScript";
-    return result;
-}
+
+# Define the JavaScript to be embedded
+javascript_code = """
+<script>
+    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 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}, '*');
+    }
+
+    // Add an event listener to handle messages from the iframe or parent window.
+    window.addEventListener('message', function(event) {
+        if (event.data.type === 'streamlit:buttonClick') {
+            callAndCapture();
+        }
+    });
+</script>
+<button onclick="callAndCapture()">Run JavaScript Function</button>
 """
 
-# Create a custom component with the JavaScript code
-mycomponent = components.declare_component("mycomponent", js_code)
+# Create a container for HTML/JS script
+html_container = st.empty()
+html_container.html(javascript_code + "<div id='returned_value'></div>", height=300)
+
+# Create a placeholder message
+message_placeholder = st.empty()
+
+# Add a button in Streamlit to send a message to the iframe to call JavaScript
+if st.button("Call JavaScript Function"):
+    js = """
+    <script>
+    window.parent.postMessage({type: "streamlit:buttonClick"}, "*");
+    </script>
+    """
+    html_container.html(javascript_code + js + "<div id='returned_value'></div>", height=300)
+
+# 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
+st.markdown(
+    """
+    <script>
+    window.addEventListener('message', (event) => {
+        if (event.data && event.data.isStreamlitMessage) {
+            const result = event.data.data;
+            // Reflect the result back to the Python script
+            window.parent.postMessage({type: 'streamlit:component_with_result', data: result}, '*');
+        }
+    });
+    </script>
+    """,
+    unsafe_allow_html=True,
+)
+
+# Python-side listener to write the result to the placeholder
+try:
+    import streamlit.components.v1 as components
+    messages = components.html(
+        """
+        <script>
+        window.addEventListener('message', (event) => {
+            if (event.data.type === 'streamlit:component_with_result') {
+                window.parent.postMessage(event.data.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
 
-# Add a button to trigger the JavaScript function
-if st.button("Run JavaScript Function"):
-    result = mycomponent()
-    st.markdown(f"The result is: {result}")
+st.session_state["js_result"]