My python code:
import streamlit as st
import streamlit.components.v1 as components
bootstrap 4 collapse example
custom_html = “”"
const partsData = {
“100,50”: “Headlights”,
“200,150”: “Taillights”,
“300,200”: “Grille”,
“400,250”: “Bumper”,
“500,300”: “Hood”,
“600,350”: “Fender”,
“200,350”: “Door”,
“150,200”: “Window”,
“400,100”: “Wheels”,
“450,150”: “Tires”,
“500,200”: “Side Mirror”,
“200,50”: “Roof”
};
document.getElementById('carImage').addEventListener('click', function(event) {
const x = event.offsetX;
const y = event.offsetY;
const coordinates = x + ',' + y;
const partName = partsData[coordinates];
if (partName) {
document.getElementById('partInfo').innerText = "You clicked on: " + partName;
speak(partName);
}
});
function speak(text) {
var utterance = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(utterance);
}
</script>
"""
st.components.v1.html(custom_html)
MY path directory:
