Code Editor for app.py

import streamlit as st
from PIL import Image, ImageDraw

# Set page config to make it wider
st.set_page_config(layout="wide")

# Create a canvas (grid background)
def create_grid_image(width=800, height=600, grid_size=20):
    # Create a white background
    image = Image.new('RGB', (width, height), 'white')
    draw = ImageDraw.Draw(image)
    
    # Draw vertical lines
    for x in range(0, width, grid_size):
        draw.line([(x, 0), (x, height)], fill='lightgray', width=1)
    
    # Draw horizontal lines
    for y in range(0, height, grid_size):
        draw.line([(0, y), (width, y)], fill='lightgray', width=1)
    
    return image, draw

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

# Draw shapes
# Green rectangle ("A first lens")
draw.rectangle([(600, 50), (700, 80)], outline='green', width=2)
draw.text((610, 60), "A first lens", fill='green')

# Red rectangle (2)
draw.rectangle([(600, 100), (620, 140)], outline='red', width=2)
draw.text((605, 115), "2", fill='red')

# Circle with 3
draw.ellipse([(400, 50), (440, 90)], outline='black', width=2)
draw.text((415, 65), "3", fill='black')

# Blue square (4)
draw.rectangle([(350, 120), (380, 150)], outline='blue', width=2)
draw.text((360, 130), "4", fill='blue')

# Circle with 5
draw.ellipse([(300, 50), (340, 90)], outline='black', width=2)
draw.text((315, 65), "5", fill='black')

# Black square (6)
draw.rectangle([(300, 120), (330, 150)], outline='black', width=2)
draw.text((310, 130), "6", fill='black')

# Display the image
st.image(image)