Spaces:
Runtime error
Runtime error
| 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 | |
| ```bash | |
| # Clone the repository | |
| git clone <your-repo-url> | |
| cd edge-detection | |
| # Install dependencies | |
| pip install -r requirements.txt | |
| ``` | |
| #### Run Locally | |
| ```bash | |
| # 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](https://huggingface.co/spaces) | |
| 2. Choose "Streamlit" as the SDK | |
| 3. Push this repository to your Space | |
| Or use the deployment script: | |
| ```bash | |
| 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." | |