Update app.py

app.py

@@ -1,86 +1,19 @@
 import streamlit as st
-
-# 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>
+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;
+}
 """
 
-# 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
+# Create a custom component with the JavaScript code
+mycomponent = components.declare_component("mycomponent", js_code)
 
-st.session_state["js_result"]
+# Add a button to trigger the JavaScript function
+if st.button("Run JavaScript Function"):
+    result = mycomponent()
+    st.markdown(f"The result is: {result}")