st.py

import streamlit as st
import os
from PIL import Image
import random
import string

def generate_access_code():
    """Generate a random access code consisting of 3 characters."""
    return ''.join(random.choices(string.ascii_uppercase + string.digits, k=3))

def check_access_code(input_code):
    """Check if the entered access code matches the generated access code."""
    return input_code == st.session_state.access_code

def initialize_session_state():
    """Initialize session state variables."""
    if 'coordinates' not in st.session_state:
        st.session_state.coordinates = []
    if 'image' not in st.session_state:
        st.session_state.image = None
    if 'access_code' not in st.session_state:
        st.session_state.access_code = generate_access_code()

def render_canvas(image_width, image_height):
    """Render the HTML canvas for recording mouse coordinates."""
    canvas_html = f"""
    <script>
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let coordinates = [];

    canvas.addEventListener('mousedown', function(event) {{
        let rect = canvas.getBoundingClientRect();
        let x = event.clientX - rect.left;
        let y = event.clientY - rect.top;
        coordinates.push({{x: x, y: y}});
        updateCoordinates();
        ctx.fillStyle = "red";
        ctx.fillRect(x - 2, y - 2, 4, 4);
    }});

    function updateCoordinates() {{
        let coordsDiv = document.getElementById('coordinates');
        coordsDiv.innerHTML = '';
        coordinates.forEach((coord, index) => {{
            coordsDiv.innerHTML += `<li>${{index + 1}}. X: ${{coord.x}}, Y: ${{coord.y}}</li>`;
        }});
    }}

    function clearCoordinates() {{
        coordinates = [];
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        updateCoordinates();
    }}

    window.clearCoordinates = clearCoordinates;
    </script>
    """
    st.markdown(f"""
    <canvas id="canvas" width="{image_width}" height="{image_height}" style="border:1px solid #000000;"></canvas>
    {canvas_html}
    <button onclick="window.clearCoordinates()">Clear Coordinates</button>
    """, unsafe_allow_html=True)

def main():
    """Main function to run the Streamlit app."""
    st.title("Record XY Mouse Coordinates on an Uploaded Image")

    # Initialize session state variables
    initialize_session_state()

    # Image upload section
    uploaded_file = st.file_uploader("Upload an image (Max 500 KB):", type=["jpg", "jpeg", "png"])

    # Access code section
    st.write("To prevent automated submissions, an Access Code has been implemented for this tool.")
    st.image(f"https://dummyimage.com/60x30/000/fff&text={st.session_state.access_code}", caption="Access Code")
    access_code_input = st.text_input("Enter Access Code:")
    if st.button("Validate Access Code"):
        if check_access_code(access_code_input):
            st.success("Access Code is correct.")
        else:
            st.error("Access Code is incorrect.")

    # Display canvas if image is uploaded and access code is correct
    if uploaded_file and check_access_code(access_code_input):
        st.session_state.image = Image.open(uploaded_file)
        st.image(st.session_state.image, caption="Uploaded Image")

        # Display the canvas for coordinate recording
        render_canvas(st.session_state.image.width, st.session_state.image.height)

        # Display coordinates list
        st.markdown("<h3>Recorded Coordinates:</h3>", unsafe_allow_html=True)
        st.markdown("<ul id='coordinates'></ul>", unsafe_allow_html=True)

        # Show image details
        st.write(f"Image width = {st.session_state.image.width} px")
        st.write(f"Image height = {st.session_state.image.height} px")
        st.write(f"Number of coordinates = {len(st.session_state.coordinates)}")

    # Add, Change, and Delete coordinates sections
    st.markdown("<h3>Modify Coordinates:</h3>", unsafe_allow_html=True)
    x_val = st.number_input("X-coord:", min_value=0, max_value=st.session_state.image.width if st.session_state.image else 0)
    y_val = st.number_input("Y-coord:", min_value=0, max_value=st.session_state.image.height if st.session_state.image else 0)
    action = st.selectbox("Action:", ["Add", "Change", "Delete"])
    if st.button("Execute"):
        if action == "Add":
            st.session_state.coordinates.append((x_val, y_val))
        elif action == "Change":
            if len(st.session_state.coordinates) > 0:
                st.session_state.coordinates[-1] = (x_val, y_val)
        elif action == "Delete":
            if len(st.session_state.coordinates) > 0:
                st.session_state.coordinates.pop()
        st.experimental_rerun()

if __name__ == "__main__":
    main()