README.md

metadata

title: Interactive Edge Detection Demo
colorFrom: red
colorTo: yellow
sdk: streamlit
sdk_version: 1.39.0
app_file: app.py
pinned: false
license: mit

🔍 Interactive Edge Detection Demo

An educational demonstration of classical and advanced edge detection algorithms for graduate-level image analysis courses.

What You'll Learn

This interactive demo explores the computational foundations of edge detection:

• Classical Gradient-Based Methods: Sobel, Prewitt, Roberts Cross operators
• Second-Order Methods: Laplacian edge detection
• Optimal Edge Detection: The Canny algorithm and its multi-stage pipeline
• Comparative Analysis: Understanding trade-offs between different approaches
• Mathematical Foundations: Gradients, derivatives, and convolution kernels
• Practical Considerations: Pre-processing, parameter tuning, and method selection

Features

Interactive Edge Detection

• Five Detection Methods: Sobel, Prewitt, Roberts, Laplacian, and Canny
• Real-Time Visualization: See edges detected as you adjust parameters
• Gradient Analysis: Visualize gradient components (Gx, Gy) and directions
• Side-by-Side Comparison: Compare any method with Canny edge detection

Educational Content

• Four Educational Tabs: Comprehensive explanations of theory and practice
• Mathematical Formulations: Kernel definitions and gradient equations
• "Aha!" Moments: Key insights that make concepts click
• Practical Guidance: When to use each method and how to tune parameters

Customization

• Upload Your Images: Test algorithms on your own data
• Pre-processing Options: Apply Gaussian blur to reduce noise
• Method-Specific Parameters: Kernel sizes, thresholds, and more
• Gradient Visualizations: Color-coded direction and magnitude maps

Quick Start

Online Usage

Visit the Hugging Face Space (URL provided by your instructor) to use the demo directly in your browser.

Local Development

Setup

# Clone the repository
git clone <your-repo-url>
cd edge-detection

# Install dependencies
pip install -r requirements.txt

Run Locally

# Simple run
streamlit run app.py

# Or use the provided script
chmod +x run_simple.sh
./run_simple.sh

The app will be available at http://localhost:8501

Deployment to Hugging Face Spaces

This app is designed to be deployed to Hugging Face Spaces:

1. Create a new Space on Hugging Face
2. Choose "Streamlit" as the SDK
3. Push this repository to your Space

Or use the deployment script:

chmod +x deploy.sh
./deploy.sh

Educational Use

This demo is designed for:

• Graduate image analysis courses
• Computer vision fundamentals
• Digital image processing tutorials
• Self-paced learning about edge detection

Key Concepts Covered

• Image Gradients: First-order derivatives and directional information
• Convolution Kernels: How discrete filters approximate derivatives
• Multi-Scale Analysis: The role of smoothing in edge detection
• Optimal Edge Detection: Canny's three criteria and their implementation
• Practical Trade-offs: Speed vs. quality, simplicity vs. robustness

Suggested Learning Path

1. Start with Roberts: Understand the basic concept of gradient operators
2. Progress to Sobel/Prewitt: See how larger kernels improve robustness
3. Explore Laplacian: Learn about second-order derivatives
4. Master Canny: Understand the multi-stage optimal approach
5. Compare Methods: Use the comparison feature to see differences

Project Structure

edge-detection/
├── app.py                  # Main Streamlit application
├── requirements.txt        # Python dependencies
├── README.md              # This file
├── packages.txt           # System dependencies for HF Spaces
├── .python-version        # Python version specification
├── Dockerfile             # Docker deployment
├── setup.sh               # Setup script
├── run_simple.sh          # Local run script
└── deploy.sh              # Deployment helper script

Technical Details

Implemented Algorithms

Roberts Cross (1963)

• 2×2 diagonal gradient kernels
• Fastest, simplest method
• Good for sharp, diagonal edges

Prewitt (1970)

• 3×3 gradient kernels with equal weighting
• Incorporates smoothing perpendicular to gradient
• Good balance of simplicity and robustness

Sobel (1968)

• 3×3 gradient kernels with center weighting
• Most widely used first-order operator
• Better approximation of true gradient

Laplacian

• Second-order isotropic operator
• Detects zero-crossings
• Requires careful noise handling

Canny (1986)

• Five-stage optimal edge detector
• Combines smoothing, gradients, NMS, and hysteresis
• Industry standard for quality edge detection

License

MIT License - Free for educational and commercial use

Credits

Created for the Intro to Image Analysis course at the University of Bern. Inspired by interactive teaching tools for computer vision education.

References

• Canny, J. (1986). "A Computational Approach to Edge Detection." IEEE TPAMI.
• Gonzalez & Woods. "Digital Image Processing" (4th Edition).
• Szeliski, R. "Computer Vision: Algorithms and Applications."