Update app.py

app.py

@@ -1,43 +1,48 @@
 import streamlit as st
+from PIL import Image
+
+# Title of the Streamlit App
+st.title("Interactive Image App")
 
 # Load the image
 image_path = "test.png"
-image_url = f"data:image/png;base64,{st.file_uploader(image_path, type='png')}"
+image = Image.open(image_path)
+
+# Display the image
+st.image(image, caption="Interactive Image", use_column_width=True)
+
+# Create a clickable area
+st.markdown("""
+<style>
+.clickable {
+    position: absolute;
+    top: 20%; /* Adjust position to where text should appear on the image */
+    left: 50%; /* Adjust position to where text should appear on the image */
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 24px;
+    font-weight: bold;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    z-index: 2;
+}
+</style>
+<div class="clickable" onClick="window.open('#form', '_self')">
+    Click me
+</div>
+""", unsafe_allow_html=True)
+
+# Anchor for form
+st.markdown('<a name="form"></a>', unsafe_allow_html=True)
 
-# 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,
-)
+# If clicked, show a form
+if st.button("Click me"):
+    with st.form("form", clear_on_submit=True):
+        st.write("Fill out this form:")
+        name = st.text_input("Name")
+        email = st.text_input("Email")
+        submitted = st.form_submit_button("Submit")
+        if submitted:
+            st.success(f"Form submitted! Name: {name}, Email: {email}")