Как сделать изображение всплывающего окна с помощьюstreamlit и Javascript ⇐ Python

[Anonymous]

Я создал чат-бота черезstreamlit. Я использую просмотр прокрутки HTML для отображения моих изображений и использую JavaScript, чтобы иметь возможность отображать большое изображение, щелкая по нему, чтобы открыть всплывающее окно. Это мой код:

Код: Выделить всё

def get_image_tags(folder_path):
items = os.listdir(folder_path)
image_files = [item for item in items if item.endswith('.jpg')]

image_tags = ""
for image_file in image_files:
image_path = os.path.join(folder_path, image_file)
image_tags += f'
[img]https://ultralytics.com/images/bus.jpg[/img]
'

return image_tags
st.markdown(f"""


{image_tags}


""", unsafe_allow_html=True)
st.markdown("""

×
[img]https://code.jquery.com/jquery-3.6.1.js[/img]


// Get the popup
var popup = document.getElementById("popup");

// Get the image and insert it inside the popup
var popupImg = document.getElementById("popup-img");
var images = document.querySelectorAll(".scroll-item img");
images.forEach(image => {
image.onclick = function(){
popup.style.display = "block";
popupImg.src = this.src;
}
});

// Get the  element that closes the popup
var span = document.getElementsByClassName("close")[0];

// When the user clicks on  (x), close the popup
span.onclick = function() {
popup.style.display = "none";
}

// When the user clicks anywhere outside of the popup image, close it
popup.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
}
}



""", unsafe_allow_html=True)

Код работает хорошо, я имею в виду прокрутку, но когда я нажимаю на картинку, ничего не происходит, JavaScript не работает.
Любая помощь/предложение - очень ценю.

Подробнее здесь: https://stackoverflow.com/questions/786 ... javascript