Update app.py

app.py

@@ -1,30 +1,43 @@
 import streamlit as st
 
-if st.button("Click me"):
-    st.write("Clicked")
+# 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>
-    button {
+    .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;
-        padding: 0!important;
-        color: black !important;
+        color: black;
         text-decoration: none;
         cursor: pointer;
-        border: none !important;
-    }
-    button:hover {
+        font-size: 20px;
+        padding: 10px 20px;
+    }}
+    .button:hover {{
         text-decoration: none;
-        color: black !important;
-    }
-    button:focus {
-        outline: none !important;
-        box-shadow: none !important;
-        color: black !important;
-    }
+        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,
-)
+)