Streamlit Python Entegrasyonunda JavaScript Dönüş Sorunları Nasıl Düzeltilir

Streamlit'te JavaScript Entegrasyon Zorluklarının Üstesinden Gelmek

Streamlit, Python kullanarak veriye dayalı web uygulamaları oluşturmaya yönelik güçlü bir araçtır ancak JavaScript işlevleri bazen beklenmedik zorluklar ortaya çıkarabilir. Geliştiriciler, Streamlit'te JavaScript kodunu çalıştırmaya ve sonuçlarını almaya çalışırken sıklıkla sorunlarla karşılaşırlar.

Ortak bir hayal kırıklığı ortaya çıktığında JavaScript fonksiyonunun dönüş değeri işlevin kendisi mantıksal olarak doğru görünse bile hatalı bir şekilde 0 olarak dönüştürülür. Bu durum geliştiricilerin, özellikle de hem Python hem de JavaScript'e aşina olanların kafasını karıştırabilir ve zaman alıcı sorun giderme işlemlerine yol açabilir.

Sağlanan örnekte kullanıcı, JavaScript'te 2 değeri döndüren basit bir anonim işlevi çağırmaya çalışıyor. Ancak beklenen sonucu almak yerine çıktı her zaman 0 gösteriyor ve bu da kodda neyin yanlış gittiği konusunda kafa karışıklığına neden oluyor uygulamak.

Bu makale, soruna neden olabilecek temel sorunları araştırıyor ve JavaScript'i Streamlit ile doğru şekilde entegre etmek için doğru sözdizimini sağlıyor. Kodu parçalara ayıracağız, olası yanlış yapılandırmaları belirleyeceğiz ve JavaScript işlevlerinin beklenen değerleri döndürmesini sağlamak için alternatif yaklaşımlar önereceğiz.

Streamlit ve JavaScript: Entegrasyon Sürecini Anlamak

Verilen örnekler nasıl entegre edileceğini göstermektedir JavaScript işlevleri etkileşimi geliştirmek için Python tabanlı bir Streamlit uygulamasına dönüştürün. Ele alınan temel sorunlardan biri, ön uç JavaScript kodu ile arka uç Python mantığı arasında doğru iletişime duyulan ihtiyaçtır. Orijinal problemde kullanıcı Streamlit içerisinde bir JS fonksiyonu çalıştırmaya çalışıyordu ancak beklenmeyen bir sonuç alıyordu. Bu sorun, modüler yöntemler kullanılarak ve Streamlit'in HTML() JavaScript komut dosyalarını doğrudan uygulamaya gömmek için kullanılan bileşen.

İlk komut dosyasında, sabit bir sayıyı (2) döndürmek için basit bir JavaScript işlevi çağrılır ve sonuç, kullanılarak yakalanır. window.parent.postMessage(). Bu yöntem önemlidir çünkü JavaScript işlevinden gelen çıktının Python arka ucuna gönderilebilmesini sağlar ve Streamlit'in dönüş değerleriyle JS yürütmesini doğrudan desteklememe sınırlamasının üstesinden gelir. Kullanılarak oluşturulan yer tutucu st.empty() Uygulamanın, JavaScript yanıtı alınır alınmaz içeriği dinamik olarak güncellemesine olanak tanır ve sayfanın yeniden yüklenmesine gerek kalmadan sorunsuz bir kullanıcı deneyimi sağlar.

İkinci yaklaşım, modülerlik ve hata yönetimini tanıtarak bunun üzerine kuruludur. Burada, ile oluşturulan sayısal bir giriş alanı st.number_input() kullanıcıların verileri JavaScript işlevine aktarmalarına olanak tanır ve bu işlev daha sonra basit bir hesaplama gerçekleştirir. Try-hariç blokların dahil edilmesi, geçersiz girişlerin erken yakalanmasını sağlayarak uygulamanın çökmesini önler. Bu modüler yaklaşım, kodu yeniden kullanılabilir ve uyarlanabilir hale getirerek geliştiricilerin yalnızca JavaScript mantığını veya giriş doğrulama kurallarını değiştirerek işlevselliği genişletmesine olanak tanır.

Çözümün son kısmı Python'u kullanarak birim testleri yazmayı içerir. birim test çerçeve. Bu testler, hem Streamlit hem de JavaScript bileşenlerinin farklı senaryolarda doğru şekilde çalışmasını sağlar. Kullanımı TestSession() Uygulamayla kullanıcı etkileşimlerinin simülasyonuna olanak tanıyarak geliştiricilerin potansiyel hataları belirlemesine yardımcı olur. Ayrıca aşağıdaki gibi yöntemler iddiaRaises() İstisnaların ele alınmasını doğrulayarak hataların düzgün bir şekilde yönetilmesini sağlayın. Genel olarak Streamlit, JavaScript ve uygun test tekniklerinin birleşimi, etkileşimli web uygulamaları geliştirmek için sağlam bir çerçeve oluşturur.

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()  

JavaScript ve Streamlit ile Çift Yönlü İletişimden Yararlanma

İle çalışırken KolaylaştırılmışGüçlü ancak sıklıkla yeterince kullanılmayan yönlerden biri, ön uç (JavaScript) ve arka uç (Python) arasında çift yönlü iletişim kurmaktır. Birçok geliştirici basit görsel öğeler için JavaScript kullanırken, daha derin bir entegrasyon dinamik güncellemelere ve daha etkileşimli web uygulamalarına olanak sağlayabilir. Daha önce tartışılan, JavaScript işlevinin beklenen değer yerine 0 değerini döndürmesi sorunu, iki teknoloji arasında eksik bir iletişim köprüsüne işaret ediyor.

Bu zorluğun üstesinden gelmenin bir yöntemi, Python işlevlerini tetiklemek için JavaScript kullanmak ve bunun tersini yaparak kesintisiz bir veri akışı oluşturmaktır. Bu, JavaScript'i doğrudan Streamlit'e yerleştirerek başarılabilir. HTML() işlevi ve olay dinleyicilerini kullanma gibi window.parent.postMessage(). Önemli olan ebeveyn-çocuk iletişim modelinin Python tarafının bu olayları yakalamaya ve buna göre yanıt vermeye hazır olacak şekilde düzgün şekilde kurulmasını sağlamaktır. Her iki uçta da doğru hata yönetimi, beklenmeyen girişlerin iletişim akışını kesintiye uğratmamasını sağlar.

Keşfedilecek başka bir yararlı araç da gizli kullanımıdır. HTML Verileri geçici olarak saklayabilen veya sayfayı yeniden yüklemeden arka uç çağrılarını tetikleyebilen, JavaScript kodundaki formlar. Bu, daha duyarlı kullanıcı etkileşimlerine olanak tanır. Ek olarak, JavaScript kitaplıklarının (görselleştirme için D3.js gibi) Streamlit'e entegre edilmesi, temel grafiklerin ötesine geçen gelişmiş özelliklerin kilidini açabilir. Bu yaklaşım, basit bir Python uygulamasını, modern tek sayfalı bir uygulama hissi veren son derece dinamik bir arayüze dönüştürebilir.