Cách khắc phục sự cố trả về JavaScript trong tích hợp Python Streamlit

Vượt qua các thách thức tích hợp JavaScript trong Streamlit

Streamlit là một công cụ mạnh mẽ để tạo các ứng dụng web dựa trên dữ liệu bằng Python nhưng tích hợp Hàm JavaScript đôi khi có thể đưa ra những thách thức bất ngờ. Các nhà phát triển thường gặp phải sự cố khi cố gắng thực thi mã JavaScript và truy xuất kết quả của nó trong Streamlit.

Một sự thất vọng phổ biến nảy sinh khi một Giá trị trả về của hàm JavaScript được hiển thị không chính xác thành 0, ngay cả khi bản thân hàm đó có vẻ hợp lý. Tình huống này có thể khiến các nhà phát triển bối rối, đặc biệt là những người quen thuộc với cả Python và JavaScript, dẫn đến việc khắc phục sự cố tốn thời gian.

Trong ví dụ được cung cấp, người dùng đang cố gắng gọi một hàm ẩn danh đơn giản trong JavaScript trả về giá trị 2. Tuy nhiên, thay vì nhận được kết quả như mong đợi, kết quả đầu ra luôn hiển thị 0, gây nhầm lẫn về điều gì có thể sai trong mã thi hành.

Bài viết này tìm hiểu các vấn đề tiềm ẩn có thể gây ra sự cố và cung cấp cú pháp chính xác để tích hợp JavaScript với Streamlit đúng cách. Chúng tôi sẽ chia nhỏ mã, xác định các cấu hình sai có thể xảy ra và đề xuất các phương pháp thay thế để đảm bảo rằng các hàm JavaScript trả về giá trị mong đợi.

Streamlit và JavaScript: Tìm hiểu quy trình tích hợp

Các ví dụ được cung cấp minh họa cách tích hợp Hàm JavaScript vào ứng dụng Streamlit dựa trên Python để nâng cao tính tương tác. Một trong những vấn đề chính được giải quyết là nhu cầu giao tiếp thích hợp giữa mã JavaScript giao diện người dùng và logic Python phụ trợ. Trong sự cố ban đầu, người dùng đang cố thực thi một hàm JS trong Streamlit nhưng nhận được kết quả không mong muốn. Vấn đề này đã được giải quyết bằng cách sử dụng các phương pháp mô đun và sử dụng giải pháp của Streamlit html() thành phần để nhúng các tập lệnh JavaScript trực tiếp vào ứng dụng.

Trong tập lệnh đầu tiên, một hàm JavaScript đơn giản được gọi để trả về một số cố định (2) và kết quả được ghi lại bằng cách sử dụng window.parent.postMessage(). Phương pháp này rất cần thiết vì nó đảm bảo rằng đầu ra từ hàm JavaScript có thể được gửi đến phần phụ trợ Python, khắc phục hạn chế của Streamlit không hỗ trợ trực tiếp việc thực thi JS với các giá trị trả về. Trình giữ chỗ được tạo bằng cách sử dụng st.empty() cho phép ứng dụng tự động cập nhật nội dung ngay khi nhận được phản hồi JavaScript, đảm bảo trải nghiệm người dùng mượt mà mà không cần tải lại trang.

Cách tiếp cận thứ hai dựa trên điều này bằng cách giới thiệu tính mô-đun và xử lý lỗi. Ở đây, trường nhập số được tạo bằng st.number_input() cho phép người dùng chuyển dữ liệu đến hàm JavaScript, sau đó thực hiện một phép tính đơn giản. Việc bao gồm các khối thử ngoại trừ đảm bảo rằng các đầu vào không hợp lệ được phát hiện sớm, ngăn ngừa sự cố ứng dụng. Cách tiếp cận mô-đun này giúp mã có thể tái sử dụng và thích ứng, cho phép các nhà phát triển mở rộng chức năng bằng cách sửa đổi logic JavaScript hoặc quy tắc xác thực đầu vào.

Phần cuối cùng của giải pháp liên quan đến việc viết bài kiểm tra đơn vị bằng cách sử dụng Python nhỏ nhất khuôn khổ. Các thử nghiệm này đảm bảo rằng cả thành phần Streamlit và JavaScript đều hoạt động chính xác trong các tình huống khác nhau. Việc sử dụng Phiên kiểm tra() cho phép mô phỏng tương tác của người dùng với ứng dụng, giúp nhà phát triển xác định các lỗi tiềm ẩn. Ngoài ra, các phương pháp như khẳng địnhRaises() xác thực việc xử lý các trường hợp ngoại lệ, đảm bảo rằng các lỗi được quản lý một cách khéo léo. Nhìn chung, sự kết hợp giữa Streamlit, JavaScript và các kỹ thuật kiểm tra phù hợp sẽ tạo ra một khuôn khổ mạnh mẽ để phát triển các ứng dụng web tương tác.

import streamlit as st  
from streamlit.components.v1 import html  

# Approach 1: Simple JS function to return a value  
def js_code():  
    return """  
    <script>   
        function returnNumber() {  
            return 2;  
        }  
        const result = returnNumber();  
        window.parent.postMessage(result, "*");  
    </script>   
    """  

# Displaying HTML + JS in Streamlit and capturing response  
response = st.empty()  
html(js_code(), height=0)  

# Using JavaScript listener to capture the returned value  
st.write("Waiting for JavaScript response...")  

# Listening for the message event from JavaScript  
@st.cache_data  
def listen_for_js_message(data):  
    response.write(f"JavaScript returned: {data}")  

import streamlit as st  
from streamlit.components.v1 import html  
import json  

# JS function wrapped in modular code  
def js_function(value):  
    return f"""  
    <script>  
        function calculateDouble(input) {{  
            return input * 2;  
        }}  
        const result = calculateDouble({value});  
        window.parent.postMessage(result, "*");  
    </script>  
    """  

# Input validation and error handling  
try:  
    user_input = st.number_input("Enter a number", min_value=0)  
    if user_input:  
        html(js_function(user_input), height=0)  
except ValueError as e:  
    st.error(f"Invalid input: {e}")  

# JavaScript response handling  
def handle_js_response(data):  
    try:  
        result = json.loads(data)  
        st.success(f"JavaScript returned: {result}")  
    except Exception as e:  
        st.error(f"Failed to parse response: {e}")  

import unittest  
from streamlit.testing import TestSession  

# Unit test for JavaScript output  
class TestJavaScriptIntegration(unittest.TestCase):  
    def test_js_output(self):  
        session = TestSession()  
        response = session.run(js_function(5))  
        self.assertEqual(response, 10, "Expected 10 as the JS function result.")  

# Unit test for Streamlit input handling  
    def test_invalid_input(self):  
        with self.assertRaises(ValueError):  
            js_function("invalid")  

# Execute the tests  
if __name__ == "__main__":  
    unittest.main()  

Tận dụng giao tiếp hai chiều với JavaScript và Streamlit

Khi làm việc với Tinh giản, một khía cạnh mạnh mẽ nhưng thường ít được sử dụng là thiết lập giao tiếp hai chiều giữa giao diện người dùng (JavaScript) và chương trình phụ trợ (Python). Trong khi nhiều nhà phát triển sử dụng JavaScript cho các phần tử trực quan đơn giản, việc tích hợp sâu hơn có thể cho phép cập nhật động và nhiều ứng dụng web tương tác hơn. Vấn đề được thảo luận trước đó, trong đó hàm JavaScript trả về 0 thay vì giá trị mong đợi, chỉ ra thiếu cầu nối giao tiếp giữa hai công nghệ.

Một phương pháp để vượt qua thử thách này là sử dụng JavaScript để kích hoạt các hàm Python và ngược lại, tạo ra luồng dữ liệu liền mạch. Điều này có thể đạt được bằng cách nhúng JavaScript trực tiếp vào Streamlit bằng cách sử dụng html() chức năng và sử dụng các trình lắng nghe sự kiện như window.parent.postMessage(). Điều quan trọng là đảm bảo mô hình giao tiếp cha-con được thiết lập đúng cách, với phía Python sẵn sàng nắm bắt các sự kiện này và phản hồi tương ứng. Xử lý lỗi thích hợp ở cả hai đầu đảm bảo rằng các đầu vào không mong muốn không làm gián đoạn luồng giao tiếp.

Một công cụ hữu ích khác để khám phá là việc sử dụng ẩn HTML biểu mẫu trong mã JavaScript, có thể lưu trữ dữ liệu tạm thời hoặc kích hoạt lệnh gọi phụ trợ mà không cần tải lại trang. Điều này cho phép người dùng tương tác nhanh hơn. Ngoài ra, việc tích hợp các thư viện JavaScript (như D3.js để trực quan hóa) vào Streamlit có thể mở khóa các tính năng nâng cao vượt xa các biểu đồ cơ bản. Cách tiếp cận này có thể biến một ứng dụng Python đơn giản thành một giao diện rất năng động, giống như một ứng dụng một trang hiện đại.