Code Editor for app.py

import streamlit as st
import numpy as np
from PIL import Image, ImageDraw

# Set page config
st.set_page_config(page_title="Drawing Canvas")

# Create a canvas area
canvas_width = 800
canvas_height = 600

# Initialize session state for storing drawn points
if 'points' not in st.session_state:
    st.session_state.points = []

# Create a blank image with grid
def create_grid_image():
    # Create a white background
    image = Image.new('RGB', (canvas_width, canvas_height), 'white')
    draw = ImageDraw.Draw(image)
    
    # Draw grid lines
    grid_spacing = 20
    # Vertical lines
    for x in range(0, canvas_width, grid_spacing):
        draw.line([(x, 0), (x, canvas_height)], fill='lightgray', width=1)
    # Horizontal lines
    for y in range(0, canvas_height, grid_spacing):
        draw.line([(0, y), (canvas_width, y)], fill='lightgray', width=1)
    
    return image, draw

# Create image and drawing object
image, draw = create_grid_image()

# Handle mouse events
def on_click():
    # Get mouse coordinates
    x = st.session_state.mouse_x
    y = st.session_state.mouse_y
    st.session_state.points.append((x, y))

# Clear canvas button
if st.button("Clear Canvas"):
    st.session_state.points = []
    image, draw = create_grid_image()

# Draw existing points and lines
if len(st.session_state.points) > 0:
    for i in range(len(st.session_state.points) - 1):
        draw.line([st.session_state.points[i], st.session_state.points[i + 1]], 
                 fill='black', width=2)

# Display the canvas
st.image(image, use_column_width=True)

# Mouse coordinate inputs (for demonstration)
col1, col2 = st.columns(2)
with col1:
    st.session_state.mouse_x = st.number_input("X coordinate", 0, canvas_width, 100)
with col2:
    st.session_state.mouse_y = st.number_input("Y coordinate", 0, canvas_height, 100)

if st.button("Add Point"):
    on_click()

# Display current points
st.write("Current Points:", st.session_state.points)