app.py

import streamlit as st

# Load the image
image_path = "test.png"
image_url = f"data:image/png;base64,{st.file_uploader(image_path, type='png')}"

# HTML and CSS for the button overlaid on the image
st.markdown(
    f"""
    <style>
    .image-container {{
        position: relative;
        width: fit-content;
    }}
    .image {{
        display: block;
    }}
    .button {{
        position: absolute;
        top: 50%; /* Adjust to place the button */
        left: 50%; /* Adjust to place the button */
        transform: translate(-50%, -50%);
        background: none!important;
        border: none;
        color: black;
        text-decoration: none;
        cursor: pointer;
        font-size: 20px;
        padding: 10px 20px;
    }}
    .button:hover {{
        text-decoration: none;
        color: black;
        background: rgba(255, 255, 255, 0.5);
    }}
    </style>
    <div class="image-container">
        <img class="image" src="{image_url}" alt="Image with clickable button">
        <button class="button" onclick="window.alert('Button clicked!');">Click Me</button>
    </div>
    """,
    unsafe_allow_html=True,
)