Update demo

.gitignore

@@ -0,0 +1,37 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# Virtual environments
+venv/
+env/
+ENV/
+
+# Streamlit
+.streamlit/
+
+# Distribution / packaging
+*.egg-info/
+dist/
+build/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# pytest
+.pytest_cache/
+
+# mypy
+.mypy_cache/

.python-version

@@ -0,0 +1 @@
+3.11

CONTRIBUTING.md

@@ -0,0 +1,134 @@
+# Contributing to Edge Detection Demo
+
+Thank you for your interest in contributing! This educational tool is designed for teaching edge detection concepts.
+
+## How to Contribute
+
+### Reporting Issues
+
+If you find bugs or have suggestions:
+1. Check if the issue already exists in the GitHub Issues
+2. Create a new issue with:
+   - Clear description of the problem
+   - Steps to reproduce (if it's a bug)
+   - Expected vs actual behavior
+   - Screenshots if applicable
+
+### Suggesting Enhancements
+
+We welcome ideas for educational improvements:
+- Additional edge detection algorithms (e.g., Deriche, Shen-Castan)
+- New visualization methods (e.g., 3D surface plots)
+- Better explanations of existing concepts
+- Interactive exercises or quizzes
+- Multi-scale edge detection demonstrations
+
+### Code Contributions
+
+1. **Fork the repository**
+
+2. **Create a feature branch:**
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+3. **Make your changes:**
+   - Follow the existing code style
+   - Add comments for complex logic
+   - Update documentation if needed
+
+4. **Test your changes:**
+   ```bash
+   streamlit run app.py
+   ```
+   - Test all interactive features
+   - Verify algorithms are correct
+   - Check edge cases
+
+5. **Commit your changes:**
+   ```bash
+   git add .
+   git commit -m "Add: Brief description of your changes"
+   ```
+
+6. **Push and create a Pull Request:**
+   ```bash
+   git push origin feature/your-feature-name
+   ```
+   Then create a PR on GitHub with a clear description.
+
+## Code Style Guidelines
+
+### Python Code
+
+- Follow PEP 8 style guide
+- Use meaningful variable names
+- Add docstrings to functions:
+  ```python
+  def function_name(param):
+      """
+      Brief description.
+      
+      Args:
+          param: Description
+      
+      Returns:
+          Description of return value
+      """
+  ```
+
+### Streamlit UI
+
+- Keep UI simple and intuitive
+- Use consistent markdown formatting
+- Add helpful tooltips (help parameter in widgets)
+- Organize content in logical sections
+
+### Documentation
+
+- Update README.md for major features
+- Keep QUICKSTART.md up to date
+- Add inline comments for complex algorithms
+- Include references to academic sources
+
+## Educational Content Guidelines
+
+This is an educational tool, so clarity is paramount:
+
+1. **Explanations should be:**
+   - Accurate and technically correct
+   - Easy to understand for graduate students
+   - Progressive (simple concepts first)
+   - Include visual examples
+
+2. **Interactive elements should:**
+   - Provide immediate feedback
+   - Show clear cause-and-effect
+   - Include reasonable default values
+   - Have helpful tooltips
+
+3. **Mathematical content should:**
+   - Use proper LaTeX notation
+   - Define all symbols
+   - Provide intuitive interpretations
+   - Include both equations and words
+
+## Testing
+
+Before submitting a PR, please verify:
+
+- [ ] App runs without errors
+- [ ] All sliders and controls work correctly
+- [ ] Edge detection algorithms produce correct results
+- [ ] Images display properly
+- [ ] Gradient visualizations are accurate
+- [ ] Educational content is clear and accurate
+- [ ] No typos in text
+
+## Questions?
+
+Feel free to open an issue for discussion before starting major work.
+
+## License
+
+By contributing, you agree that your contributions will be licensed under the MIT License.

Dockerfile

@@ -0,0 +1,30 @@
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    libgl1 \
+    libglib2.0-0 \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY app.py .
+COPY README.md .
+
+# Expose Streamlit port
+EXPOSE 8501
+
+# Health check
+HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health || exit 1
+
+# Run the application
+ENTRYPOINT ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0"]

GETTING_STARTED.md

@@ -0,0 +1,353 @@
+# 📖 Getting Started with the Edge Detection Demo
+
+## Prerequisites
+
+- **Python 3.11+** (Python 3.9+ should also work)
+- **Git** (for cloning the repository)
+- **pip** (usually comes with Python)
+- **5-10 minutes** of your time
+
+Optional:
+- **Make** (for convenient commands)
+- **Docker** (for containerized deployment)
+
+## ⚡️ Quick Start (30 seconds)
+
+The absolute fastest way to get started:
+
+```bash
+# 1. Navigate to the project directory
+cd edge-detection
+
+# 2. Run the setup script
+./setup.sh
+
+# 3. Run the app
+./run_simple.sh
+```
+
+That's it! Your browser should open to `http://localhost:8501`
+
+---
+
+## 📚 Detailed Installation
+
+### Step 1: Clone the Repository (if needed)
+
+```bash
+git clone <repository-url>
+cd edge-detection
+```
+
+### Step 2: Choose Your Setup Method
+
+#### Option A: Automated Setup Script (Recommended)
+
+```bash
+chmod +x setup.sh
+./setup.sh
+```
+
+This will:
+- Check Python version
+- Create a virtual environment
+- Install all dependencies
+
+#### Option B: Manual Setup
+
+```bash
+# Create virtual environment
+python3 -m venv venv
+
+# Activate virtual environment
+source venv/bin/activate  # On macOS/Linux
+# OR
+venv\Scripts\activate     # On Windows
+
+# Upgrade pip
+pip install --upgrade pip
+
+# Install dependencies
+pip install -r requirements.txt
+```
+
+#### Option C: Using Make
+
+```bash
+make setup
+```
+
+### Step 3: Run the Application
+
+#### Option A: Quick Run Script
+
+```bash
+chmod +x run_simple.sh
+./run_simple.sh
+```
+
+#### Option B: Manual Run
+
+```bash
+source venv/bin/activate  # Activate virtual environment
+streamlit run app.py
+```
+
+#### Option C: Using Make
+
+```bash
+make run
+```
+
+### Step 4: Open in Browser
+
+The app should automatically open in your default browser at:
+```
+http://localhost:8501
+```
+
+If it doesn't open automatically, manually navigate to that URL.
+
+---
+
+## 🎓 First Steps in the Demo
+
+Once the app is running:
+
+1. **Upload an Image** (optional)
+   - Look in the sidebar
+   - Click "Upload your own image"
+   - Or use the default generated image
+
+2. **Try Different Methods**
+   - Select "Sobel" from the dropdown
+   - Observe the edge detection results
+   - Try adjusting the kernel size
+   - Enable "Show Gradient Components"
+
+3. **Explore Prewitt and Roberts**
+   - Switch methods and compare results
+   - Notice differences in edge quality and noise sensitivity
+
+4. **Experiment with Laplacian**
+   - Observe the isotropic response
+   - See why pre-smoothing is important
+   - Try different kernel sizes
+
+5. **Master Canny**
+   - Adjust low and high thresholds
+   - Observe edge connectivity
+   - Compare with simpler methods using comparison mode
+
+6. **Read Educational Content**
+   - Click on the four tabs at the bottom
+   - Read the explanations
+   - Understand the mathematical foundations
+
+---
+
+## 🔧 Troubleshooting
+
+### Problem: "Python not found"
+
+**Solution:**
+```bash
+# Check if Python is installed
+python3 --version
+
+# If not, install Python 3.11+ from python.org
+```
+
+### Problem: "Permission denied" when running scripts
+
+**Solution:**
+```bash
+chmod +x *.sh
+```
+
+### Problem: Import errors when running
+
+**Solution:**
+```bash
+# Make sure you're in the virtual environment
+source venv/bin/activate
+
+# Reinstall requirements
+pip install --force-reinstall -r requirements.txt
+```
+
+### Problem: "Port 8501 already in use"
+
+**Solution:**
+```bash
+# Find and kill the process using the port
+lsof -ti:8501 | xargs kill
+
+# Or run on a different port
+streamlit run app.py --server.port 8502
+```
+
+### Problem: Images not displaying
+
+**Solution:**
+- Check internet connection (for HuggingFace download)
+- The app will automatically fall back to a generated image
+- Try uploading your own image via the sidebar
+
+### Problem: Slow performance
+
+**Solution:**
+- Use smaller images (app auto-resizes to 512px)
+- Close other applications
+- Try simpler methods (Roberts, Sobel) instead of Canny
+
+---
+
+## 🎯 Next Steps
+
+### For Students
+- Work through the educational tabs systematically
+- Try uploading different types of images (portraits, landscapes, text)
+- Compare all five methods on the same image
+- Answer the discussion questions in PROJECT_SUMMARY.md
+
+### For Instructors
+- Review QUICKSTART.md for teaching tips
+- Customize the app (see CONTRIBUTING.md)
+- Deploy to Hugging Face Spaces (see below)
+- Share with your class
+
+### For Developers
+- Read CONTRIBUTING.md for development guidelines
+- Check out PROJECT_SUMMARY.md for technical details
+- Consider adding new features (multi-scale, learning-based methods)
+
+---
+
+## 🚀 Deploying to Hugging Face Spaces
+
+Want to share this with others online?
+
+### Step 1: Create a Hugging Face Account
+- Go to https://huggingface.co/join
+- Sign up for free
+
+### Step 2: Create a New Space
+- Go to https://huggingface.co/new-space
+- Choose "Streamlit" as the SDK
+- Make it public (for educational use)
+
+### Step 3: Deploy
+
+```bash
+chmod +x deploy.sh
+./deploy.sh
+```
+
+Follow the prompts and enter your Space name (e.g., "username/edge-detection-demo").
+
+Your demo will be live at: `https://huggingface.co/spaces/username/edge-detection-demo`
+
+---
+
+## 🐳 Docker Deployment (Advanced)
+
+If you prefer Docker:
+
+```bash
+# Build the image
+docker build -t edge-detection .
+
+# Run the container
+docker run -p 8501:8501 edge-detection
+
+# Access at http://localhost:8501
+```
+
+---
+
+## 📝 Common Commands Reference
+
+```bash
+# Setup and installation
+./setup.sh              # Initial setup
+make setup             # Alternative using make
+
+# Running the app
+./run_simple.sh        # Quick run
+make run               # Alternative using make
+streamlit run app.py   # Direct run
+
+# Testing
+python test_setup.py   # Verify installation
+make test             # Alternative using make
+
+# Deployment
+./deploy.sh            # Deploy to HuggingFace
+make deploy           # Alternative using make
+
+# Cleanup
+make clean            # Remove virtual environment
+```
+
+---
+
+## 💡 Tips for Best Experience
+
+1. **Image Selection**: Use images with clear edges (buildings, objects, text)
+2. **Pre-processing**: Enable Gaussian blur for noisy images
+3. **Parameter Tuning**: Start with default values, then experiment
+4. **Comparison**: Use comparison mode to understand differences
+5. **Educational Content**: Read tabs in order (What Are Edges? → Gradient Methods → Canny → Practical)
+
+---
+
+## 📖 Learning Path
+
+**Beginner** (1-2 hours):
+1. Read "What Are Edges?" tab
+2. Try Roberts and Sobel
+3. Compare results on sample image
+4. Upload your own image
+
+**Intermediate** (2-4 hours):
+1. Study gradient-based methods tab
+2. Experiment with all five methods
+3. Enable gradient visualizations
+4. Try different kernel sizes
+5. Read Canny algorithm tab
+
+**Advanced** (4+ hours):
+1. Study practical considerations tab
+2. Tune Canny parameters systematically
+3. Compare methods quantitatively
+4. Test on domain-specific images
+5. Consider implementing improvements
+
+---
+
+## 🆘 Getting Help
+
+- **Documentation**: Check README.md, QUICKSTART.md, PROJECT_SUMMARY.md
+- **GitHub Issues**: Report bugs or request features
+- **Discussion Board**: Ask questions about edge detection concepts
+
+---
+
+## ✅ Verification
+
+To verify everything is working correctly:
+
+```bash
+python test_setup.py
+```
+
+This will check:
+- All dependencies are installed
+- App structure is correct
+- Edge detection functions work
+- Visualizations render properly
+
+---
+
+**Ready to explore edge detection?** Run `./run_simple.sh` and start learning! 🚀

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Uni Bern Intro to Image Analysis Course
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Makefile

@@ -0,0 +1,55 @@
+.PHONY: help setup install run clean deploy test
+
+help:
+	@echo "🔍 Edge Detection Demo - Available Commands:"
+	@echo ""
+	@echo "  make setup    - Set up virtual environment and install dependencies"
+	@echo "  make install  - Install/update dependencies only"
+	@echo "  make run      - Run the Streamlit app locally"
+	@echo "  make clean    - Remove virtual environment and cache files"
+	@echo "  make deploy   - Deploy to Hugging Face Spaces"
+	@echo "  make test     - Run basic tests"
+	@echo ""
+
+setup:
+	@echo "🔧 Setting up environment..."
+	@./setup.sh
+
+install:
+	@echo "📥 Installing dependencies..."
+	@if [ ! -d "venv" ]; then \
+		echo "❌ Virtual environment not found. Run 'make setup' first."; \
+		exit 1; \
+	fi
+	@. venv/bin/activate && pip install -r requirements.txt
+	@echo "✅ Dependencies installed"
+
+run:
+	@echo "🚀 Starting Streamlit app..."
+	@if [ ! -d "venv" ]; then \
+		echo "❌ Virtual environment not found. Run 'make setup' first."; \
+		exit 1; \
+	fi
+	@. venv/bin/activate && streamlit run app.py
+
+clean:
+	@echo "🧹 Cleaning up..."
+	@rm -rf venv
+	@rm -rf __pycache__
+	@rm -rf .streamlit
+	@find . -type d -name "*.egg-info" -exec rm -rf {} + 2>/dev/null || true
+	@find . -type f -name "*.pyc" -delete
+	@echo "✅ Cleanup complete"
+
+deploy:
+	@echo "🚀 Deploying to Hugging Face Spaces..."
+	@./deploy.sh
+
+test:
+	@echo "🧪 Running basic import tests..."
+	@if [ ! -d "venv" ]; then \
+		echo "❌ Virtual environment not found. Run 'make setup' first."; \
+		exit 1; \
+	fi
+	@. venv/bin/activate && python -c "import app; print('✅ App imports successfully')"
+	@echo "✅ Basic tests passed"

PROJECT_SUMMARY.md

@@ -0,0 +1,333 @@
+# 🔍 Edge Detection Demo - Project Summary
+
+## Overview
+
+This interactive educational demo teaches computational approaches to edge detection in digital images, a fundamental operation in computer vision. The application is designed for graduate-level image analysis courses and demonstrates:
+
+- **Classical Gradient-Based Methods**: Roberts Cross, Prewitt, and Sobel operators
+- **Second-Order Methods**: Laplacian edge detection
+- **Optimal Edge Detection**: The Canny multi-stage algorithm
+- **Comparative Analysis**: Side-by-side method comparisons
+- **Educational Theory**: Comprehensive explanations with mathematical foundations
+
+## Key Features
+
+### Interactive Edge Detection
+- **Five Detection Methods**: Switch between Sobel, Prewitt, Roberts, Laplacian, and Canny
+- **Real-Time Processing**: See edge detection results as you adjust parameters
+- **Method-Specific Controls**: Kernel sizes, thresholds, and algorithm parameters
+- **Pre-processing Options**: Gaussian blur for noise reduction
+
+### Advanced Visualizations
+- **Gradient Components**: View Gx and Gy separately (horizontal and vertical gradients)
+- **Gradient Direction**: Color-coded visualization showing edge orientation and strength
+- **Edge Statistics**: Quantitative metrics (edge pixel count, percentages)
+- **Comparison Mode**: Side-by-side comparison with Canny edge detection
+
+### Comprehensive Educational Content
+- **Four Educational Tabs**:
+  1. **What Are Edges?**: Foundational concepts and significance
+  2. **Gradient-Based Methods**: Detailed explanations of Roberts, Prewitt, Sobel, Laplacian
+  3. **Canny Algorithm**: Complete breakdown of the five-stage optimal approach
+  4. **Practical Considerations**: Real-world application guidance
+- **Mathematical Formulations**: Kernel definitions, gradient equations (LaTeX formatted)
+- **"Aha!" Moments**: Key insights that crystallize understanding
+- **Historical Context**: Evolution of edge detection from 1963 to present
+
+## Educational Objectives
+
+Students will learn:
+
+1. **Mathematical Foundations**: How convolution kernels approximate derivatives
+2. **First-Order vs. Second-Order**: Differences between gradient and Laplacian operators
+3. **Optimal Edge Detection**: Canny's three criteria and their implementation
+4. **Parameter Sensitivity**: How thresholds and kernel sizes affect results
+5. **Comparative Analysis**: Strengths and weaknesses of different methods
+6. **Practical Skills**: When to use each method in real applications
+
+## Project Structure
+
+```
+edge-detection/
+├── app.py                  # Main Streamlit application (1000+ lines)
+├── requirements.txt        # Python dependencies
+├── README.md              # Main documentation
+├── QUICKSTART.md          # Getting started guide
+├── CONTRIBUTING.md        # Contribution guidelines
+├── LICENSE                # MIT License
+│
+├── Configuration Files:
+├── packages.txt           # System dependencies for HF Spaces
+├── .python-version        # Python 3.11
+├── .gitignore            # Git ignore rules
+├── pyproject.toml        # Project metadata
+├── Dockerfile            # Docker deployment
+├── Makefile              # Convenient make commands
+│
+└── Scripts:
+    ├── setup.sh           # Initial setup with venv
+    ├── run_simple.sh      # Quick local run
+    └── deploy.sh          # Deploy to HuggingFace
+```
+
+## Technical Implementation
+
+### Algorithms Implemented
+
+#### Roberts Cross Operator (1963)
+- 2×2 diagonal gradient kernels
+- Simplest gradient operator
+- Computational complexity: O(N²)
+- Best for: Sharp diagonal edges, computational constraints
+
+#### Prewitt Operator (1970)
+- 3×3 gradient kernels with uniform weighting
+- Incorporates smoothing perpendicular to gradient
+- Separable: can be computed as two 1D convolutions
+- Best for: General-purpose edge detection, educational demonstrations
+
+#### Sobel Operator (1968)
+- 3×3 gradient kernels with center weighting (2:1)
+- Better approximation of true gradient than Prewitt
+- Industry-standard first-order operator
+- Variable kernel sizes: 1×1, 3×3, 5×5, 7×7
+- Best for: Most applications requiring gradient information
+
+#### Laplacian Operator
+- Second-order isotropic operator
+- Detects zero-crossings (rapid intensity changes)
+- Highly sensitive to noise (requires pre-smoothing)
+- Often combined with Gaussian → Laplacian of Gaussian (LoG)
+- Best for: Precise edge localization, blob detection
+
+#### Canny Edge Detector (1986)
+- Multi-stage optimal algorithm:
+  1. Gaussian smoothing (noise reduction)
+  2. Gradient calculation (Sobel)
+  3. Non-maximum suppression (edge thinning)
+  4. Double thresholding (strong/weak edges)
+  5. Hysteresis edge tracking (connectivity)
+- Parameters: low/high thresholds, aperture size, L2 gradient
+- Best for: High-quality edge detection, when computational cost is acceptable
+
+### Features Highlights
+
+**Gradient Visualization:**
+- Displays Gx and Gy components separately
+- Shows which edges each component detects (vertical vs. horizontal)
+- Helps students understand gradient decomposition
+
+**Direction Visualization:**
+- HSV color mapping: Hue = direction, Value = magnitude
+- Intuitive understanding of edge orientation
+- Beautiful visualization of gradient fields
+
+**Comparison Mode:**
+- Compare any method with Canny
+- Adjustable Canny parameters for fair comparison
+- Quantitative metrics for both methods
+
+## Quick Start
+
+### For Users (Simplest)
+```bash
+chmod +x run_simple.sh
+./run_simple.sh
+```
+
+### Using Make
+```bash
+make setup    # First time only
+make run      # Start the app
+```
+
+### Manual Setup
+```bash
+python3 -m venv venv
+source venv/bin/activate
+pip install -r requirements.txt
+streamlit run app.py
+```
+
+## Deployment Options
+
+### 1. Hugging Face Spaces (Recommended)
+```bash
+chmod +x deploy.sh
+./deploy.sh
+```
+- Free hosting
+- Automatic builds
+- Share with students via URL
+- No server maintenance
+
+### 2. Docker
+```bash
+docker build -t edge-detection .
+docker run -p 8501:8501 edge-detection
+```
+
+### 3. Local Server
+```bash
+streamlit run app.py --server.port 8501
+```
+
+## Teaching with This Demo
+
+### Suggested Lesson Plan
+
+**Part 1: Introduction to Edges (15 minutes)**
+1. Start with the "What Are Edges?" tab
+2. Discuss why edges matter in computer vision
+3. Show original image and various edge detection results
+4. Emphasize: edges = local intensity changes
+
+**Part 2: Gradient-Based Methods (30 minutes)**
+1. **Roberts Cross**: Introduce the gradient concept
+   - Show 2×2 kernels
+   - Demonstrate on sample image
+   - Discuss limitations (noise sensitivity)
+   
+2. **Prewitt**: Introduce smoothing
+   - Compare with Roberts
+   - Show how 3×3 kernel reduces noise
+   
+3. **Sobel**: Weighted averaging
+   - Compare with Prewitt
+   - Show gradient components (Gx, Gy)
+   - Demonstrate gradient direction visualization
+   - Let students experiment with kernel sizes
+   
+4. **Laplacian**: Second-order derivatives
+   - Explain zero-crossings
+   - Show double-edge effect
+   - Demonstrate noise sensitivity
+   - Discuss why pre-smoothing is essential
+
+**Part 3: Canny Algorithm (25 minutes)**
+1. Introduce Canny's three criteria
+2. Walk through each stage:
+   - Gaussian smoothing
+   - Gradient calculation
+   - Non-maximum suppression (show edge thinning)
+   - Double thresholding (show strong/weak classification)
+   - Hysteresis (explain edge connectivity)
+3. Demonstrate parameter effects:
+   - Vary low/high thresholds
+   - Show how ratio affects edge continuity
+4. Compare Canny with Sobel using comparison mode
+
+**Part 4: Practical Considerations (20 minutes)**
+1. Discuss when to use each method
+2. Show effect of pre-processing (Gaussian blur)
+3. Demonstrate parameter tuning strategies
+4. Discuss computational trade-offs
+5. Show real-world application examples
+
+**Part 5: Interactive Exploration (10 minutes)**
+1. Let students upload their own images
+2. Challenge: Find optimal parameters for different image types
+3. Compare results across methods
+
+### Discussion Questions
+
+1. **Conceptual:**
+   - Why are edges important in computer vision?
+   - How do derivatives relate to edges?
+   - What makes an edge detector "optimal"?
+   
+2. **Analytical:**
+   - Why does Sobel weight the center row/column more heavily?
+   - Why is the Laplacian isotropic while Sobel is directional?
+   - How does non-maximum suppression achieve single-pixel-wide edges?
+   
+3. **Practical:**
+   - When would you prefer Sobel over Canny?
+   - How do you choose Canny's threshold values?
+   - Why pre-smooth before applying Laplacian?
+
+### Assignments
+
+1. **Comparative Analysis**: Compare all five methods on the same image. Discuss strengths/weaknesses.
+2. **Parameter Exploration**: Find optimal Canny thresholds for three different image types.
+3. **Gradient Analysis**: Analyze gradient direction patterns in natural vs. man-made scenes.
+4. **Noise Robustness**: Compare methods on images with different noise levels.
+5. **Computational Efficiency**: Measure and compare execution times of different methods.
+
+## Performance
+
+- **Load Time**: < 2 seconds on first load (with caching)
+- **Interactive Response**: Real-time (< 100ms per parameter change)
+- **Memory Usage**: ~150-250 MB (depends on image size)
+- **Supported Image Sizes**: Up to 4K (auto-resized to 512px for demo)
+
+## Known Limitations
+
+1. Very large images (>10MB) may be slow - auto-resized to 512px
+2. Gradient direction visualization requires some color vision
+3. Mathematical content assumes calculus background
+4. Advanced topics (multi-scale, learning-based) not covered
+
+## Educational Resources
+
+### Foundational Papers
+- Canny, J. (1986). "A Computational Approach to Edge Detection." IEEE TPAMI.
+- Marr, D., & Hildreth, E. (1980). "Theory of Edge Detection." Proc. Royal Society of London B.
+
+### Textbooks
+- Gonzalez & Woods. "Digital Image Processing" (4th Edition).
+- Szeliski, R. "Computer Vision: Algorithms and Applications."
+- Forsyth & Ponce. "Computer Vision: A Modern Approach."
+
+### Online Resources
+- [OpenCV Edge Detection Tutorial](https://docs.opencv.org/master/da/d22/tutorial_py_canny.html)
+- [Stanford CS231n: Convolutional Neural Networks](http://cs231n.stanford.edu/)
+
+## Future Enhancements
+
+Potential additions for future versions:
+- **Multi-Scale Detection**: Edge detection at multiple scales
+- **Learning-Based Methods**: Structured forests, HED (CNN-based)
+- **Oriented Filters**: Gabor filters, steerable pyramids
+- **Performance Benchmarks**: Quantitative evaluation with ground truth
+- **3D Visualization**: Surface plots of gradient fields
+- **Video Processing**: Edge detection on video streams
+
+## Contributing
+
+We welcome contributions! See `CONTRIBUTING.md` for:
+- Bug reports
+- Feature requests
+- Code contributions
+- Documentation improvements
+- Educational content enhancements
+
+## License
+
+MIT License - Free for educational and commercial use
+
+## Acknowledgments
+
+- Inspired by classical computer vision courses at leading universities
+- Built with Streamlit for rapid prototyping and deployment
+- OpenCV for efficient image processing
+- HuggingFace for free hosting
+
+## Support
+
+- **Issues**: GitHub Issues for bugs and features
+- **Questions**: Discussion board for educational questions
+- **Documentation**: See README.md, QUICKSTART.md, CONTRIBUTING.md
+
+## Success Stories
+
+Perfect for:
+- Graduate image analysis courses
+- Computer vision fundamentals
+- Self-paced online learning
+- Workshop demonstrations
+- Research group tutorials
+
+---
+
+**Ready to start?** Run `./run_simple.sh` and explore computational edge detection!

QUICKSTART.md

@@ -0,0 +1,123 @@
+# Quick Start Guide
+
+## For Students/Users
+
+### Online Usage
+Simply visit the Hugging Face Space URL (provided by your instructor) to use the demo directly in your browser. No installation needed!
+
+### Local Usage
+
+1. **Clone the repository:**
+   ```bash
+   git clone <repository-url>
+   cd edge-detection
+   ```
+
+2. **Run the setup script:**
+   ```bash
+   chmod +x setup.sh
+   ./setup.sh
+   ```
+
+3. **Start the demo:**
+   ```bash
+   chmod +x run_simple.sh
+   ./run_simple.sh
+   ```
+
+4. **Open your browser** to `http://localhost:8501`
+
+---
+
+## For Instructors/Developers
+
+### Customizing the Demo
+
+The main application is in `app.py`. Key functions you can modify:
+
+- `generate_sample_image()`: Customize the default sample image
+- `apply_sobel_filter()`, `apply_prewitt_filter()`, etc.: Modify filter implementations
+- `main_loop()`: Change the UI layout and educational content
+
+### Using Your Own Images
+
+You have two options:
+
+1. **Upload at runtime**: Users can upload images via the sidebar
+2. **Default image**: Modify the `load_sample_image()` function to load from a URL or local path
+
+To use images from your own HuggingFace dataset:
+
+```python
+image_path = hf_hub_download(
+    repo_id="your-username/your-dataset",
+    filename="your-image.jpg",
+    repo_type="dataset",
+)
+```
+
+### Deploying to Hugging Face Spaces
+
+1. **Create a Space:**
+   - Go to https://huggingface.co/new-space
+   - Choose a name (e.g., "edge-detection-demo")
+   - Select "Streamlit" as the SDK
+   - Choose "Public" for educational use
+
+2. **Deploy:**
+   ```bash
+   chmod +x deploy.sh
+   ./deploy.sh
+   ```
+
+3. **Enter your Space name** when prompted (e.g., "username/edge-detection-demo")
+
+### Troubleshooting
+
+**"Import errors" when running locally:**
+- Make sure you ran `setup.sh` first
+- Activate the virtual environment: `source venv/bin/activate`
+- Reinstall requirements: `pip install -r requirements.txt`
+
+**App not loading on HuggingFace:**
+- Check the "Logs" tab in your Space
+- Verify `packages.txt` includes all system dependencies
+- Ensure Python version in `.python-version` is supported
+
+**Images not displaying:**
+- Check if the HuggingFace dataset is public
+- Verify the repo_id and filename in `load_sample_image()`
+- The app will fall back to a generated image if download fails
+
+---
+
+## Educational Tips
+
+### For Teaching
+
+1. **Start Simple**: Begin with Roberts Cross to introduce the gradient concept
+2. **Progress Gradually**: Move to Sobel/Prewitt, then Laplacian
+3. **Culminate with Canny**: Show how optimal edge detection builds on simpler methods
+4. **Use Comparisons**: Enable side-by-side comparisons to highlight differences
+
+### Discussion Points
+
+- **Gradient Operators**: Why do we need 2D convolution kernels?
+- **First vs. Second Order**: When is Laplacian better than Sobel?
+- **Canny's Criteria**: What makes an edge detector "optimal"?
+- **Trade-offs**: Speed vs. quality, simplicity vs. robustness
+
+### Suggested Exercises
+
+1. Compare edge detection on images with different noise levels
+2. Find optimal Canny thresholds for different types of images
+3. Analyze how kernel size affects edge localization
+4. Examine gradient direction patterns in natural images
+5. Compare computational complexity of different methods
+
+## Resources
+
+- [OpenCV Edge Detection Tutorial](https://docs.opencv.org/master/da/d22/tutorial_py_canny.html)
+- [Canny's Original Paper (1986)](https://ieeexplore.ieee.org/document/4767851)
+- [Digital Image Processing (Gonzalez & Woods)](http://www.imageprocessingplace.com/)
+- [Computer Vision: Algorithms and Applications (Szeliski)](http://szeliski.org/Book/)

README.md

@@ -0,0 +1,174 @@
+---
+title: Interactive Edge Detection Demo
+colorFrom: red
+colorTo: orange
+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."

app.py

@@ -0,0 +1,997 @@
+"""
+Interactive Edge Detection Demo
+An educational tool for graduate-level image analysis courses
+
+This demo explores computational approaches to edge detection, focusing on:
+- Classical gradient-based filters (Sobel, Prewitt, Roberts, Laplacian)
+- Advanced Canny edge detection
+- Comparative analysis of different methods
+"""
+
+import io
+import numpy as np
+import cv2 as cv
+import streamlit as st
+from PIL import Image
+from huggingface_hub import hf_hub_download
+
+
+@st.cache_resource
+def load_sample_image():
+    """Load a sample image for the demo. Falls back to generated image if download fails."""
+    try:
+        # Try to download from HuggingFace
+        image_path = hf_hub_download(
+            repo_id="amithjkamath/exampleimages",
+            filename="sample-image.jpg",
+            repo_type="dataset",
+        )
+        img = cv.imread(image_path)
+        img = cv.cvtColor(img, cv.COLOR_BGR2RGB)
+    except Exception:
+        # Generate a sample image with edges
+        img = generate_sample_image()
+    
+    return img
+
+
+def generate_sample_image(size=512):
+    """Generate a sample image with interesting edge features for demonstration."""
+    img = np.zeros((size, size, 3), dtype=np.uint8)
+    
+    # Create a gradient background (soft edges)
+    for i in range(size):
+        img[i, :, :] = int(100 * i / size)
+    
+    # Add geometric shapes with different edge characteristics
+    # Circle with smooth edges
+    cv.circle(img, (size//4, size//4), size//8, (255, 255, 255), -1)
+    
+    # Rectangle with sharp corners
+    cv.rectangle(img, (size//2, size//2), (3*size//4, 3*size//4), (200, 50, 50), -1)
+    
+    # Triangle (sharp edges at different orientations)
+    pts = np.array([[3*size//4, size//4], [size-50, size//4 + size//8], 
+                    [3*size//4 + size//16, 50]], np.int32)
+    cv.fillPoly(img, [pts], (50, 200, 200))
+    
+    # Add some thin lines (challenging for edge detection)
+    cv.line(img, (50, 3*size//4), (size//3, 3*size//4), (255, 255, 255), 2)
+    
+    # Add text (multiple edge orientations)
+    cv.putText(img, "EDGES", (size//8, size-80), 
+               cv.FONT_HERSHEY_SIMPLEX, 1.5, (255, 255, 255), 3)
+    
+    return img
+
+
+def apply_sobel_filter(img, ksize=3):
+    """
+    Apply Sobel edge detection filter.
+    
+    Sobel computes the gradient using separable kernels:
+    - Gx: horizontal gradient (vertical edges)
+    - Gy: vertical gradient (horizontal edges)
+    - Magnitude: sqrt(Gx² + Gy²)
+    
+    Args:
+        img: Input grayscale image
+        ksize: Kernel size (1, 3, 5, 7)
+    
+    Returns:
+        edges: Edge magnitude image
+        gx, gy: Gradient components
+    """
+    # Compute gradients in both directions
+    gx = cv.Sobel(img, cv.CV_64F, 1, 0, ksize=ksize)
+    gy = cv.Sobel(img, cv.CV_64F, 0, 1, ksize=ksize)
+    
+    # Compute magnitude
+    magnitude = np.sqrt(gx**2 + gy**2)
+    
+    # Normalize to 0-255 range
+    magnitude = np.uint8(255 * magnitude / np.max(magnitude)) if np.max(magnitude) > 0 else magnitude.astype(np.uint8)
+    
+    return magnitude, gx, gy
+
+
+def apply_prewitt_filter(img):
+    """
+    Apply Prewitt edge detection filter.
+    
+    Prewitt is similar to Sobel but uses simpler kernels:
+    Gx = [[-1, 0, 1],      Gy = [[-1, -1, -1],
+          [-1, 0, 1],            [ 0,  0,  0],
+          [-1, 0, 1]]            [ 1,  1,  1]]
+    
+    Args:
+        img: Input grayscale image
+    
+    Returns:
+        edges: Edge magnitude image
+        gx, gy: Gradient components
+    """
+    # Define Prewitt kernels
+    kernel_x = np.array([[-1, 0, 1],
+                         [-1, 0, 1],
+                         [-1, 0, 1]], dtype=np.float32)
+    
+    kernel_y = np.array([[-1, -1, -1],
+                         [ 0,  0,  0],
+                         [ 1,  1,  1]], dtype=np.float32)
+    
+    # Apply convolution
+    gx = cv.filter2D(img, cv.CV_64F, kernel_x)
+    gy = cv.filter2D(img, cv.CV_64F, kernel_y)
+    
+    # Compute magnitude
+    magnitude = np.sqrt(gx**2 + gy**2)
+    
+    # Normalize to 0-255 range
+    magnitude = np.uint8(255 * magnitude / np.max(magnitude)) if np.max(magnitude) > 0 else magnitude.astype(np.uint8)
+    
+    return magnitude, gx, gy
+
+
+def apply_roberts_filter(img):
+    """
+    Apply Roberts Cross edge detection filter.
+    
+    Roberts uses 2x2 diagonal gradient kernels:
+    Gx = [[ 1,  0],      Gy = [[ 0,  1],
+          [ 0, -1]]            [-1,  0]]
+    
+    This is the simplest gradient operator, sensitive to diagonal edges.
+    
+    Args:
+        img: Input grayscale image
+    
+    Returns:
+        edges: Edge magnitude image
+        gx, gy: Gradient components
+    """
+    # Define Roberts Cross kernels
+    kernel_x = np.array([[ 1,  0],
+                         [ 0, -1]], dtype=np.float32)
+    
+    kernel_y = np.array([[ 0,  1],
+                         [-1,  0]], dtype=np.float32)
+    
+    # Apply convolution
+    gx = cv.filter2D(img, cv.CV_64F, kernel_x)
+    gy = cv.filter2D(img, cv.CV_64F, kernel_y)
+    
+    # Compute magnitude
+    magnitude = np.sqrt(gx**2 + gy**2)
+    
+    # Normalize to 0-255 range
+    magnitude = np.uint8(255 * magnitude / np.max(magnitude)) if np.max(magnitude) > 0 else magnitude.astype(np.uint8)
+    
+    return magnitude, gx, gy
+
+
+def apply_laplacian_filter(img, ksize=3):
+    """
+    Apply Laplacian edge detection filter.
+    
+    The Laplacian is a second-order derivative operator that detects
+    regions of rapid intensity change. Unlike gradient-based methods,
+    it's isotropic (rotation-invariant) but more sensitive to noise.
+    
+    Common kernel (ksize=3):
+    [[ 0,  1,  0],
+     [ 1, -4,  1],
+     [ 0,  1,  0]]
+    
+    Args:
+        img: Input grayscale image
+        ksize: Kernel size (1, 3, 5, 7)
+    
+    Returns:
+        edges: Edge response image
+    """
+    # Apply Laplacian
+    laplacian = cv.Laplacian(img, cv.CV_64F, ksize=ksize)
+    
+    # Take absolute value (edges can be positive or negative)
+    laplacian = np.abs(laplacian)
+    
+    # Normalize to 0-255 range
+    laplacian = np.uint8(255 * laplacian / np.max(laplacian)) if np.max(laplacian) > 0 else laplacian.astype(np.uint8)
+    
+    return laplacian
+
+
+def apply_canny_edge_detector(img, low_threshold=50, high_threshold=150, aperture_size=3, use_l2=True):
+    """
+    Apply Canny edge detection algorithm.
+    
+    The Canny edge detector is a multi-stage algorithm:
+    1. Noise reduction (Gaussian blur)
+    2. Gradient calculation (Sobel)
+    3. Non-maximum suppression (thin edges)
+    4. Double thresholding (strong and weak edges)
+    5. Edge tracking by hysteresis (connect weak edges to strong ones)
+    
+    Args:
+        img: Input grayscale image
+        low_threshold: Lower threshold for hysteresis
+        high_threshold: Upper threshold for hysteresis
+        aperture_size: Sobel kernel size (3, 5, 7)
+        use_l2: Use L2 norm for gradient magnitude (more accurate but slower)
+    
+    Returns:
+        edges: Binary edge map
+    """
+    edges = cv.Canny(img, low_threshold, high_threshold, 
+                     apertureSize=aperture_size, L2gradient=use_l2)
+    
+    return edges
+
+
+def compute_gradient_direction(gx, gy):
+    """
+    Compute gradient direction from gradient components.
+    
+    Args:
+        gx, gy: Gradient components in x and y directions
+    
+    Returns:
+        direction: Gradient direction in degrees (0-360)
+    """
+    direction = np.arctan2(gy, gx) * 180 / np.pi
+    direction = (direction + 360) % 360  # Ensure positive angles
+    
+    return direction
+
+
+def create_gradient_visualization(gx, gy):
+    """
+    Create a color-coded visualization of gradient direction.
+    
+    Uses HSV color space where:
+    - Hue represents direction
+    - Saturation is constant
+    - Value represents magnitude
+    
+    Args:
+        gx, gy: Gradient components
+    
+    Returns:
+        RGB image showing gradient direction and magnitude
+    """
+    # Compute magnitude and direction
+    magnitude = np.sqrt(gx**2 + gy**2)
+    direction = np.arctan2(gy, gx)
+    
+    # Normalize magnitude
+    magnitude_norm = magnitude / np.max(magnitude) if np.max(magnitude) > 0 else magnitude
+    
+    # Create HSV image
+    hsv = np.zeros((*gx.shape, 3), dtype=np.uint8)
+    hsv[..., 0] = ((direction + np.pi) / (2 * np.pi) * 180).astype(np.uint8)  # Hue: 0-180
+    hsv[..., 1] = 255  # Saturation: full
+    hsv[..., 2] = (magnitude_norm * 255).astype(np.uint8)  # Value: magnitude
+    
+    # Convert to RGB
+    rgb = cv.cvtColor(hsv, cv.COLOR_HSV2RGB)
+    
+    return rgb
+
+
+def main_loop():
+    """Main application loop."""
+    st.set_page_config(layout="wide", page_title="Edge Detection Demo")
+    
+    st.title("🔍 Interactive Edge Detection Demo")
+    st.markdown("""
+    Welcome to an educational exploration of edge detection in digital image processing.
+    This demo demonstrates how computational methods identify boundaries and discontinuities in images—
+    a fundamental task in computer vision with applications from medical imaging to autonomous systems.
+    """)
+    
+    # Load sample image
+    sample_img = load_sample_image()
+    
+    # Sidebar: Image input
+    st.sidebar.header("Image Input")
+    uploaded_file = st.sidebar.file_uploader("Upload your own image (optional)", 
+                                             type=['png', 'jpg', 'jpeg'])
+    
+    if uploaded_file is not None:
+        # Use uploaded image
+        file_bytes = np.asarray(bytearray(uploaded_file.read()), dtype=np.uint8)
+        img = cv.imdecode(file_bytes, cv.IMREAD_COLOR)
+        img = cv.cvtColor(img, cv.COLOR_BGR2RGB)
+        
+        # Resize if too large
+        max_size = 512
+        h, w = img.shape[:2]
+        if max(h, w) > max_size:
+            scale = max_size / max(h, w)
+            new_w, new_h = int(w * scale), int(h * scale)
+            img = cv.resize(img, (new_w, new_h), interpolation=cv.INTER_AREA)
+    else:
+        img = sample_img
+    
+    # Convert to grayscale for edge detection
+    gray = cv.cvtColor(img, cv.COLOR_RGB2GRAY)
+    
+    # Sidebar: Pre-processing options
+    st.sidebar.header("Pre-processing")
+    
+    apply_blur = st.sidebar.checkbox("Apply Gaussian Blur", value=False, 
+                                     help="Reduces noise before edge detection")
+    
+    if apply_blur:
+        blur_ksize = st.sidebar.slider("Blur Kernel Size", 
+                                       min_value=3, max_value=15, value=5, step=2,
+                                       help="Larger kernels = more smoothing")
+        gray = cv.GaussianBlur(gray, (blur_ksize, blur_ksize), 0)
+    
+    # Sidebar: Select edge detection method
+    st.sidebar.header("Edge Detection Method")
+    
+    method = st.sidebar.selectbox(
+        "Select Method",
+        ["Sobel", "Prewitt", "Roberts", "Laplacian", "Canny"],
+        help="Choose which edge detection algorithm to apply"
+    )
+    
+    # Method-specific parameters
+    st.sidebar.subheader("Method Parameters")
+    
+    if method == "Sobel":
+        sobel_ksize = st.sidebar.select_slider(
+            "Sobel Kernel Size",
+            options=[1, 3, 5, 7],
+            value=3,
+            help="Larger kernels detect coarser edges"
+        )
+        edges, gx, gy = apply_sobel_filter(gray, ksize=sobel_ksize)
+        show_gradients = st.sidebar.checkbox("Show Gradient Components", value=False)
+        show_direction = st.sidebar.checkbox("Show Gradient Direction", value=False)
+        
+    elif method == "Prewitt":
+        edges, gx, gy = apply_prewitt_filter(gray)
+        show_gradients = st.sidebar.checkbox("Show Gradient Components", value=False)
+        show_direction = st.sidebar.checkbox("Show Gradient Direction", value=False)
+        
+    elif method == "Roberts":
+        edges, gx, gy = apply_roberts_filter(gray)
+        show_gradients = st.sidebar.checkbox("Show Gradient Components", value=False)
+        show_direction = st.sidebar.checkbox("Show Gradient Direction", value=False)
+        
+    elif method == "Laplacian":
+        laplacian_ksize = st.sidebar.select_slider(
+            "Laplacian Kernel Size",
+            options=[1, 3, 5, 7],
+            value=3,
+            help="Larger kernels = smoother response"
+        )
+        edges = apply_laplacian_filter(gray, ksize=laplacian_ksize)
+        show_gradients = False
+        show_direction = False
+        
+    elif method == "Canny":
+        st.sidebar.markdown("**Threshold Values**")
+        low_threshold = st.sidebar.slider(
+            "Low Threshold",
+            min_value=0, max_value=255, value=50,
+            help="Pixels below this are definitely not edges"
+        )
+        high_threshold = st.sidebar.slider(
+            "High Threshold",
+            min_value=0, max_value=255, value=150,
+            help="Pixels above this are definitely edges"
+        )
+        aperture_size = st.sidebar.select_slider(
+            "Sobel Kernel Size",
+            options=[3, 5, 7],
+            value=3,
+            help="Kernel size for internal gradient computation"
+        )
+        use_l2 = st.sidebar.checkbox("Use L2 Gradient", value=True,
+                                     help="More accurate but slower magnitude calculation")
+        
+        edges = apply_canny_edge_detector(gray, low_threshold, high_threshold, 
+                                         aperture_size, use_l2)
+        show_gradients = False
+        show_direction = False
+    
+    # Display: Original and detected edges
+    st.markdown("---")
+    st.markdown("## Visual Results")
+    
+    col1, col2 = st.columns(2)
+    
+    with col1:
+        st.markdown("### Original Image")
+        st.image(img, use_column_width=True, caption="Input image")
+        st.caption(f"Size: {img.shape[1]}×{img.shape[0]} pixels")
+    
+    with col2:
+        st.markdown(f"### {method} Edge Detection")
+        if method == "Canny":
+            # Canny produces binary edges, display with inverted colormap for visibility
+            st.image(edges, use_column_width=True, caption=f"{method} edges", clamp=True)
+        else:
+            st.image(edges, use_column_width=True, caption=f"{method} edge magnitude", clamp=True)
+        
+        # Show edge statistics
+        edge_pixels = np.sum(edges > 0)
+        total_pixels = edges.shape[0] * edges.shape[1]
+        edge_percentage = (edge_pixels / total_pixels) * 100
+        st.caption(f"Edge pixels: {edge_pixels:,} ({edge_percentage:.2f}%)")
+    
+    # Display gradient components if requested
+    if show_gradients and method in ["Sobel", "Prewitt", "Roberts"]:
+        st.markdown("---")
+        st.markdown("### Gradient Components")
+        st.markdown("""
+        The gradient has two components:
+        - **Gx** (horizontal gradient): responds to vertical edges
+        - **Gy** (vertical gradient): responds to horizontal edges
+        """)
+        
+        col1, col2 = st.columns(2)
+        
+        with col1:
+            st.markdown("**Gx: Horizontal Gradient**")
+            gx_display = np.abs(gx)
+            gx_display = np.uint8(255 * gx_display / np.max(gx_display)) if np.max(gx_display) > 0 else gx_display.astype(np.uint8)
+            st.image(gx_display, use_column_width=True, caption="Vertical edges", clamp=True)
+        
+        with col2:
+            st.markdown("**Gy: Vertical Gradient**")
+            gy_display = np.abs(gy)
+            gy_display = np.uint8(255 * gy_display / np.max(gy_display)) if np.max(gy_display) > 0 else gy_display.astype(np.uint8)
+            st.image(gy_display, use_column_width=True, caption="Horizontal edges", clamp=True)
+    
+    # Display gradient direction if requested
+    if show_direction and method in ["Sobel", "Prewitt", "Roberts"]:
+        st.markdown("---")
+        st.markdown("### Gradient Direction Visualization")
+        st.markdown("""
+        This color-coded visualization shows:
+        - **Hue (color)**: Direction of the gradient (edge orientation)
+        - **Brightness**: Magnitude of the gradient (edge strength)
+        """)
+        
+        gradient_viz = create_gradient_visualization(gx, gy)
+        st.image(gradient_viz, use_column_width=True, caption="Gradient direction and magnitude")
+        
+        # Add color legend
+        st.markdown("""
+        **Color Legend:**
+        - 🔴 Red: Rightward gradient
+        - 🟡 Yellow: Upward-right gradient
+        - 🟢 Green: Upward gradient
+        - 🔵 Cyan: Upward-left gradient
+        - 🟣 Blue: Leftward gradient
+        - 🟣 Magenta: Downward-left gradient
+        """)
+    
+    # Comparison with Canny
+    if method != "Canny":
+        st.sidebar.markdown("---")
+        st.sidebar.header("Compare with Canny")
+        show_comparison = st.sidebar.checkbox("Show Canny Comparison", value=False)
+        
+        if show_comparison:
+            st.markdown("---")
+            st.markdown(f"## Comparison: {method} vs. Canny")
+            
+            col1, col2 = st.columns(2)
+            
+            # Default Canny parameters for comparison
+            canny_low = st.sidebar.slider("Canny Low Threshold (Comparison)", 
+                                         min_value=0, max_value=255, value=50)
+            canny_high = st.sidebar.slider("Canny High Threshold (Comparison)", 
+                                          min_value=0, max_value=255, value=150)
+            
+            canny_edges = apply_canny_edge_detector(gray, canny_low, canny_high)
+            
+            with col1:
+                st.markdown(f"### {method}")
+                st.image(edges, use_column_width=True, clamp=True)
+                edge_pixels_method = np.sum(edges > 0)
+                st.caption(f"Edge pixels: {edge_pixels_method:,}")
+            
+            with col2:
+                st.markdown("### Canny")
+                st.image(canny_edges, use_column_width=True, clamp=True)
+                edge_pixels_canny = np.sum(canny_edges > 0)
+                st.caption(f"Edge pixels: {edge_pixels_canny:,}")
+    
+    # Educational content
+    st.markdown("---")
+    st.markdown("## 📚 Educational Insights")
+    
+    tab1, tab2, tab3, tab4 = st.tabs([
+        "What Are Edges?", 
+        "Gradient-Based Methods", 
+        "Canny Algorithm", 
+        "Practical Considerations"
+    ])
+    
+    with tab1:
+        st.markdown("""
+        ### What Are Edges in Digital Images?
+        
+        **Definition:**
+        Edges correspond to significant local changes in image intensity. They typically occur at:
+        - **Object boundaries**: Where one object ends and another begins
+        - **Surface orientation changes**: Corners, creases, and ridges
+        - **Material property changes**: Reflectance, color, or texture discontinuities
+        - **Illumination boundaries**: Shadows and highlights
+        
+        **Why Edge Detection Matters:**
+        Edge detection is foundational to computer vision because edges:
+        - Reduce data dimensionality while preserving structural information
+        - Are relatively invariant to illumination changes
+        - Enable higher-level tasks: object recognition, segmentation, tracking
+        - Form the basis for feature extraction in many applications
+        
+        **The Computational Challenge:**
+        Distinguishing true edges from noise requires balancing:
+        - **Sensitivity**: Detecting all significant edges
+        - **Specificity**: Avoiding false positives from noise
+        - **Localization**: Accurately positioning detected edges
+        
+        **The "Aha!" Moment:**
+        Edges are fundamentally about **derivatives**. Just as derivatives in calculus identify rates of change,
+        image gradients identify spatial rates of intensity change. This mathematical insight transforms
+        a perceptual concept (edges) into a computational operation (differentiation).
+        """)
+    
+    with tab2:
+        st.markdown("""
+        ### Gradient-Based Edge Detection Methods
+        
+        **Fundamental Principle:**
+        All gradient-based methods approximate the first derivative of image intensity.
+        The gradient is a vector pointing in the direction of greatest intensity increase:
+        
+        $$\\nabla I = \\begin{bmatrix} \\frac{\\partial I}{\\partial x} \\\\ \\frac{\\partial I}{\\partial y} \\end{bmatrix} = \\begin{bmatrix} G_x \\\\ G_y \\end{bmatrix}$$
+        
+        The **edge magnitude** is: $|\\nabla I| = \\sqrt{G_x^2 + G_y^2}$
+        
+        The **edge direction** is: $\\theta = \\arctan\\left(\\frac{G_y}{G_x}\\right)$
+        
+        ---
+        
+        #### Roberts Cross Operator (1963)
+        
+        **Kernels (2×2):**
+        $$G_x = \\begin{bmatrix} +1 & 0 \\\\ 0 & -1 \\end{bmatrix}, \\quad 
+          G_y = \\begin{bmatrix} 0 & +1 \\\\ -1 & 0 \\end{bmatrix}$$
+        
+        **Characteristics:**
+        - Simplest gradient operator, computationally efficient
+        - Computes diagonal differences (45° rotated gradients)
+        - Sensitive to noise due to small kernel
+        - Good for images with sharp, diagonal features
+        - Historical significance: one of the earliest edge detectors
+        
+        **The "Aha!" Moment:**
+        Roberts showed that a simple 2×2 difference operation could capture edges—
+        proving that edge detection doesn't require complex computation.
+        
+        ---
+        
+        #### Prewitt Operator (1970)
+        
+        **Kernels (3×3):**
+        $$G_x = \\begin{bmatrix} -1 & 0 & +1 \\\\ -1 & 0 & +1 \\\\ -1 & 0 & +1 \\end{bmatrix}, \\quad 
+          G_y = \\begin{bmatrix} -1 & -1 & -1 \\\\ 0 & 0 & 0 \\\\ +1 & +1 & +1 \\end{bmatrix}$$
+        
+        **Characteristics:**
+        - Uses 3×3 neighborhood for gradient estimation
+        - Incorporates implicit averaging (smoothing) perpendicular to gradient direction
+        - More robust to noise than Roberts
+        - Equal weighting of all pixels in each row/column
+        - Separable: can be computed as two 1D convolutions
+        
+        **Key Insight:**
+        Prewitt demonstrates the value of **spatial averaging**—smoothing in one direction
+        while differentiating in the other reduces noise sensitivity.
+        
+        ---
+        
+        #### Sobel Operator (1968)
+        
+        **Kernels (3×3):**
+        $$G_x = \\begin{bmatrix} -1 & 0 & +1 \\\\ -2 & 0 & +2 \\\\ -1 & 0 & +1 \\end{bmatrix}, \\quad 
+          G_y = \\begin{bmatrix} -1 & -2 & -1 \\\\ 0 & 0 & 0 \\\\ +1 & +2 & +1 \\end{bmatrix}$$
+        
+        **Characteristics:**
+        - Similar to Prewitt but with **weighted averaging** (2:1 center weight)
+        - Better approximation of the true gradient
+        - More isotropic response (similar sensitivity to all edge orientations)
+        - Most widely used first-order edge detector
+        - Can extend to larger kernel sizes (5×5, 7×7) for coarser features
+        
+        **The "Aha!" Moment:**
+        Sobel's weighting scheme approximates a Gaussian smoothing perpendicular to the gradient.
+        This is an early recognition that optimal edge detection combines **smoothing and differentiation**—
+        a principle later formalized by Canny.
+        
+        ---
+        
+        #### Laplacian Operator (Second-Order)
+        
+        **Mathematical Form:**
+        $$\\nabla^2 I = \\frac{\\partial^2 I}{\\partial x^2} + \\frac{\\partial^2 I}{\\partial y^2}$$
+        
+        **Common Kernel (3×3):**
+        $$\\nabla^2 = \\begin{bmatrix} 0 & 1 & 0 \\\\ 1 & -4 & 1 \\\\ 0 & 1 & 0 \\end{bmatrix}$$
+        
+        **Characteristics:**
+        - Second-order derivative: detects zero-crossings (rapid intensity changes)
+        - **Isotropic**: rotationally invariant, no directional bias
+        - Produces double edges (both sides of intensity transitions)
+        - Very sensitive to noise (second derivative amplifies high frequencies)
+        - Often combined with Gaussian smoothing → **Laplacian of Gaussian (LoG)**
+        
+        **Key Insight:**
+        The Laplacian identifies edge locations as zero-crossings—where the second derivative
+        changes sign. This gives **precise localization** but at the cost of noise sensitivity.
+        
+        ---
+        
+        #### Comparison Summary
+        
+        | Method | Kernel Size | Order | Noise Sensitivity | Directionality | Computational Cost |
+        |--------|-------------|-------|-------------------|----------------|-------------------|
+        | Roberts | 2×2 | 1st | High | Diagonal | Very Low |
+        | Prewitt | 3×3 | 1st | Medium | Separable (H/V) | Low |
+        | Sobel | 3×3+ | 1st | Medium-Low | Separable (H/V) | Low |
+        | Laplacian | 3×3+ | 2nd | Very High | Isotropic | Low |
+        
+        **Practical Recommendation:**
+        - **Sobel**: Best general-purpose gradient operator
+        - **Roberts**: When speed is critical and images are low-noise
+        - **Prewitt**: Similar to Sobel, historical interest
+        - **Laplacian**: When precise localization matters, always pre-smooth
+        """)
+        
+        if method in ["Sobel", "Prewitt", "Roberts"]:
+            st.info(f"""
+            **Current Method: {method}**
+            
+            You're currently using the {method} operator. Notice how it responds to different edge orientations
+            in your image. Try toggling "Show Gradient Components" to see how Gx and Gy separately capture
+            vertical and horizontal edges.
+            """)
+    
+    with tab3:
+        st.markdown("""
+        ### The Canny Edge Detector: Optimal Edge Detection
+        
+        **Historical Context:**
+        In 1986, John Canny published a landmark paper deriving an "optimal" edge detector
+        from first principles. He defined three criteria for good edge detection:
+        
+        1. **Good Detection**: Minimize false positives and false negatives
+        2. **Good Localization**: Detected edges should be close to true edges
+        3. **Single Response**: One detector response per edge (no double edges)
+        
+        **The Canny Algorithm: A Multi-Stage Pipeline**
+        
+        ---
+        
+        #### Stage 1: Noise Reduction (Gaussian Smoothing)
+        
+        $$G(x, y) = \\frac{1}{2\\pi\\sigma^2} e^{-\\frac{x^2 + y^2}{2\\sigma^2}}$$
+        
+        - Convolve image with Gaussian filter to reduce noise
+        - $\\sigma$ controls smoothing scale
+        - Trade-off: larger $\\sigma$ removes more noise but also blurs edges
+        
+        **Insight:** Canny recognized that edge detection and noise suppression are inherently coupled.
+        The Gaussian is optimal for smoothing while preserving edge localization.
+        
+        ---
+        
+        #### Stage 2: Gradient Calculation
+        
+        - Apply Sobel operator (or similar) to compute $G_x$ and $G_y$
+        - Calculate magnitude: $M = \\sqrt{G_x^2 + G_y^2}$
+        - Calculate direction: $\\theta = \\arctan(G_y / G_x)$
+        
+        ---
+        
+        #### Stage 3: Non-Maximum Suppression (Edge Thinning)
+        
+        **The Problem:** Gradient operators produce thick edges (multiple pixels respond to a single edge).
+        
+        **The Solution:**
+        - For each pixel, examine magnitude along gradient direction
+        - Suppress pixel if either neighbor along gradient direction has higher magnitude
+        - Result: edges thinned to single-pixel width
+        
+        **The "Aha!" Moment:**
+        This stage enforces the "single response" criterion. By suppressing non-maxima perpendicular
+        to the edge direction, Canny achieves sub-pixel localization accuracy.
+        
+        ---
+        
+        #### Stage 4: Double Thresholding
+        
+        Use two thresholds to classify edge pixels:
+        - **Strong edges**: $M > T_{high}$ — definitely edges
+        - **Weak edges**: $T_{low} < M < T_{high}$ — potential edges
+        - **Non-edges**: $M < T_{low}$ — definitely not edges
+        
+        **Rationale:**
+        - Single threshold is too binary: either misses edges or includes noise
+        - Double threshold creates a "confidence gradient"
+        
+        ---
+        
+        #### Stage 5: Edge Tracking by Hysteresis
+        
+        **The Final Step:**
+        - Keep all strong edges
+        - Keep weak edges only if connected to strong edges
+        - Discard isolated weak edges
+        
+        **The "Aha!" Moment:**
+        Hysteresis exploits **edge continuity**. Real edges are extended structures; noise is isolated.
+        By requiring weak edges to connect to strong edges, Canny achieves robustness without
+        sacrificing sensitivity.
+        
+        ---
+        
+        ### Why Canny Is "Optimal"
+        
+        Canny proved that, under certain assumptions (Gaussian noise, linear filters), his algorithm
+        achieves optimal trade-offs among his three criteria. Specifically:
+        
+        - The **optimal filter** for edge detection is approximately the derivative of a Gaussian
+        - The multi-scale nature (controlled by $\\sigma$) allows detection of edges at different scales
+        - Non-maximum suppression and hysteresis address fundamental ambiguities in edge detection
+        
+        ---
+        
+        ### Limitations and Practical Considerations
+        
+        **When Canny Struggles:**
+        - **Texture**: Dense texture can trigger many weak edges
+        - **Low contrast**: Subtle edges may fall below threshold
+        - **Computational cost**: More expensive than simple gradient operators
+        
+        **Parameter Tuning:**
+        - **$T_{low}$ and $T_{high}$**: Typical ratio is 1:2 or 1:3
+          - Too high: miss edges
+          - Too low: include noise
+        - **$\\sigma$ (implicit in aperture size)**: Larger for coarse edges, smaller for fine details
+        
+        **Modern Context:**
+        Despite being nearly 40 years old, Canny remains widely used. Its principles influenced:
+        - Multi-scale edge detection (e.g., Canny-Deriche)
+        - Learning-based edge detection (e.g., structured forests, CNNs)
+        - Active contours and level sets
+        
+        ---
+        
+        ### Interactive Exploration
+        
+        **Try This:**
+        1. Set low_threshold = 50, high_threshold = 150 (default)
+        2. Gradually increase both thresholds → edges disappear
+        3. Gradually decrease both → more edges, including noise
+        4. Compare Canny to Sobel with the comparison feature
+        
+        **Question to Ponder:**
+        Can you find threshold values where Canny detects edges that Sobel misses,
+        and vice versa? What does this reveal about their different approaches?
+        """)
+        
+        if method == "Canny":
+            st.info(f"""
+            **Current Parameters:**
+            - Low Threshold: {low_threshold}
+            - High Threshold: {high_threshold}
+            - Ratio: 1:{high_threshold/low_threshold:.2f}
+            
+            **Interpretation:**
+            - Pixels with magnitude > {high_threshold} are **strong edges** (white)
+            - Pixels with magnitude between {low_threshold} and {high_threshold} are kept only if connected to strong edges
+            - All other pixels are **non-edges** (black)
+            """)
+    
+    with tab4:
+        st.markdown("""
+        ### Practical Considerations in Edge Detection
+        
+        ---
+        
+        #### 1. Pre-processing: The Critical First Step
+        
+        **Gaussian Smoothing:**
+        - Almost always beneficial, especially for Laplacian
+        - Suppresses noise while preserving edge structure
+        - $\\sigma$ controls scale: larger $\\sigma$ for coarser edges
+        
+        **Histogram Equalization:**
+        - Enhances contrast in low-contrast images
+        - Can make subtle edges detectable
+        - May amplify noise in uniform regions
+        
+        **Morphological Operations:**
+        - Closing: Connect nearby edge segments
+        - Opening: Remove isolated noise pixels
+        - Applied after edge detection, not before
+        
+        ---
+        
+        #### 2. Choosing the Right Method
+        
+        **Sobel** when:
+        - You need directional gradient information
+        - Computational efficiency matters
+        - Image is reasonably clean
+        - You're building a pipeline for further processing (e.g., Hough transform)
+        
+        **Canny** when:
+        - You need thin, connected edges
+        - You can afford the computational cost
+        - You need robustness to noise
+        - Output will be used for segmentation or shape analysis
+        
+        **Laplacian** when:
+        - You need isotropic response
+        - You're detecting blob-like features (LoG)
+        - Combined with Gaussian (LoG): excellent for multi-scale analysis
+        
+        **Roberts** when:
+        - Extreme computational constraints
+        - Diagonal edges are prominent
+        - Historical comparison or educational purposes
+        
+        ---
+        
+        #### 3. Common Pitfalls and Solutions
+        
+        **Problem: Too many edges detected**
+        - **Cause:** Low threshold, high noise, texture
+        - **Solution:**
+          - Increase threshold (Canny)
+          - Pre-smooth more aggressively
+          - Use morphological opening to remove small responses
+        
+        **Problem: Missing important edges**
+        - **Cause:** High threshold, low contrast, blurred image
+        - **Solution:**
+          - Decrease threshold
+          - Apply histogram equalization
+          - Try multi-scale detection (multiple $\\sigma$ values)
+        
+        **Problem: Thick, messy edges**
+        - **Cause:** Not using non-maximum suppression
+        - **Solution:**
+          - Use Canny instead of raw gradient magnitude
+          - Implement custom NMS if using Sobel/Prewitt
+        
+        **Problem: Disconnected edge segments**
+        - **Cause:** Threshold too high, gaps in actual edges
+        - **Solution:**
+          - Lower threshold (especially Canny's low threshold)
+          - Apply morphological closing
+          - Use probabilistic Hough transform to connect segments
+        
+        ---
+        
+        #### 4. Domain-Specific Considerations
+        
+        **Medical Imaging:**
+        - Often low contrast, high noise
+        - Canny with careful threshold tuning
+        - Multi-scale approaches (LoG pyramids)
+        - Consider anisotropic diffusion for pre-processing
+        
+        **Natural Images (Photography):**
+        - Complex scenes, varied lighting
+        - Canny generally works well
+        - May need semantic segmentation to identify "important" edges
+        
+        **Document Analysis:**
+        - High contrast, sharp edges
+        - Simple methods (Sobel, Roberts) often sufficient
+        - Adaptive thresholding for varying illumination
+        
+        **Industrial Inspection:**
+        - Controlled environment, consistent lighting
+        - Fast methods preferred (Sobel)
+        - Template matching often combined with edges
+        
+        **Autonomous Driving:**
+        - Real-time requirements
+        - Lane detection: focused edge detection in ROI
+        - Modern systems use CNN-based edge detection
+        
+        ---
+        
+        #### 5. Computational Performance
+        
+        **Runtime Complexity (for N×N image):**
+        - Roberts, Prewitt, Sobel: O(N²) — single-pass convolution
+        - Laplacian: O(N²) — single-pass convolution
+        - Canny: O(N²) but with higher constant factor due to multi-stage pipeline
+        
+        **Memory Considerations:**
+        - Gradient methods: 2-3× image memory (for Gx, Gy, magnitude)
+        - Canny: 3-4× image memory (gradients + intermediate stages)
+        
+        **Optimization Strategies:**
+        - Use separable filters when possible (Sobel, Prewitt)
+        - Implement on GPU for real-time applications
+        - Consider approximate methods for very large images
+        - Use integral images for multi-scale LoG
+        
+        ---
+        
+        #### 6. Beyond Classical Methods
+        
+        **Learning-Based Edge Detection:**
+        - Structured Edge Detection (SED): Random forests on local patches
+        - Holistically-Nested Edge Detection (HED): Deep CNN
+        - Advantages: Context-aware, learns from data
+        - Disadvantages: Requires training data, computationally intensive
+        
+        **Multi-Scale Approaches:**
+        - Canny at multiple scales, combine results
+        - Laplacian of Gaussian pyramid
+        - Scale-space theory (Lindeberg)
+        
+        **Oriented Edge Detection:**
+        - Steerable filters: efficient computation of gradients at multiple orientations
+        - Gabor filters: detect edges at specific scales and orientations
+        - Useful for texture analysis and orientation-dependent tasks
+        
+        ---
+        
+        #### 7. Evaluation Metrics
+        
+        **Quantitative Evaluation (when ground truth available):**
+        - **Precision**: fraction of detected edges that are true edges
+        - **Recall**: fraction of true edges that are detected
+        - **F-measure**: harmonic mean of precision and recall
+        - **Localization error**: distance between detected and true edge pixels
+        
+        **Qualitative Evaluation:**
+        - Visual inspection: Are important edges detected?
+        - Downstream task performance: Does edge quality improve final result?
+        
+        ---
+        
+        ### Take-Home Messages
+        
+        1. **No Universal Best Method**: Choice depends on application requirements
+        2. **Pre-processing Matters**: Clean input → clean edges
+        3. **Thresholds Are Critical**: Tune based on your specific images
+        4. **Computational Complexity**: Simple doesn't mean inferior
+        5. **Edge Detection Is a Means, Not an End**: Always consider the downstream task
+        
+        **The Ultimate "Aha!" Moment:**
+        Edge detection transforms high-dimensional pixel data into sparse, interpretable structures.
+        This dimensionality reduction—from millions of pixels to thousands of edge points—is what makes
+        computer vision computationally tractable. Understanding edges is understanding how machines
+        "see" structure in the visual world.
+        """)
+    
+    # Footer
+    st.markdown("---")
+    st.markdown("""
+    <small>
+    Educational Demo for Image Analysis Courses | 
+    Built with Streamlit and OpenCV | 
+    <a href="https://github.com/ubern-image-analysis/edge-detection" target="_blank">View Source</a>
+    </small>
+    """, unsafe_allow_html=True)
+
+
+if __name__ == "__main__":
+    main_loop()

deploy.sh

@@ -0,0 +1,67 @@
+#!/bin/bash
+
+# Deployment script for Hugging Face Spaces
+
+set -e
+
+echo "🚀 Deploying Edge Detection Demo to Hugging Face Spaces"
+echo "========================================================"
+echo ""
+
+# Check if git is initialized
+if [ ! -d ".git" ]; then
+    echo "📦 Initializing git repository..."
+    git init
+    git add .
+    git commit -m "Initial commit: Edge Detection Demo"
+fi
+
+# Get Space information
+echo "Please provide your Hugging Face Space details:"
+echo ""
+read -p "📝 Space name (e.g., username/edge-detection-demo): " SPACE_NAME
+
+if [ -z "$SPACE_NAME" ]; then
+    echo "❌ Space name cannot be empty"
+    exit 1
+fi
+
+SPACE_URL="https://huggingface.co/spaces/$SPACE_NAME"
+
+echo ""
+echo "🔗 Space URL: $SPACE_URL"
+echo ""
+
+# Check if remote already exists
+if git remote | grep -q "hf"; then
+    echo "📝 Remote 'hf' already exists, updating URL..."
+    git remote set-url hf "$SPACE_URL"
+else
+    echo "📝 Adding Hugging Face remote..."
+    git remote add hf "$SPACE_URL"
+fi
+
+echo ""
+echo "📦 Committing changes..."
+
+# Add all files
+git add .
+
+# Check if there are changes to commit
+if git diff --staged --quiet; then
+    echo "ℹ️  No changes to commit."
+else
+    read -p "💬 Enter commit message (default: 'Update demo'): " COMMIT_MSG
+    COMMIT_MSG=${COMMIT_MSG:-"Update demo"}
+    git commit -m "$COMMIT_MSG"
+fi
+
+echo ""
+echo "🚀 Pushing to Hugging Face Spaces..."
+git push hf main
+
+echo ""
+echo "✅ Deployment complete!"
+echo "🌐 Your Space will be available at: $SPACE_URL"
+echo ""
+echo "⏱️  Note: It may take a few minutes for the Space to build and start."

packages.txt

@@ -0,0 +1,2 @@
+libgl1
+libglib2.0-0

pyproject.toml

@@ -0,0 +1,35 @@
+[build-system]
+requires = ["setuptools>=45", "wheel"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "edge-detection-demo"
+version = "1.0.0"
+description = "Interactive educational demo for edge detection algorithms"
+readme = "README.md"
+requires-python = ">=3.11"
+license = {text = "MIT"}
+authors = [
+    {name = "Uni Bern Intro to Image Analysis Course"}
+]
+keywords = ["edge-detection", "computer-vision", "image-processing", "education", "streamlit"]
+classifiers = [
+    "Development Status :: 4 - Beta",
+    "Intended Audience :: Education",
+    "License :: OSI Approved :: MIT License",
+    "Programming Language :: Python :: 3",
+    "Programming Language :: Python :: 3.11",
+    "Topic :: Scientific/Engineering :: Image Processing",
+]
+
+dependencies = [
+    "numpy>=1.24.0",
+    "opencv-python-headless>=4.8.0",
+    "streamlit>=1.39.0",
+    "Pillow>=10.0.0",
+    "huggingface-hub>=0.19.0",
+]
+
+[project.urls]
+Homepage = "https://github.com/ubern-image-analysis/edge-detection"
+Repository = "https://github.com/ubern-image-analysis/edge-detection"

requirements.txt

@@ -0,0 +1,5 @@
+numpy>=1.24.0
+opencv-python-headless>=4.8.0
+streamlit>=1.39.0
+Pillow>=10.0.0
+huggingface-hub>=0.19.0

run_simple.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+
+# Simple script to run the Streamlit app locally
+
+echo "🔍 Starting Edge Detection Demo..."
+echo ""
+
+# Check if virtual environment exists
+if [ ! -d "venv" ]; then
+    echo "📦 No virtual environment found. Creating one..."
+    python3 -m venv venv
+fi
+
+# Activate virtual environment
+echo "🔧 Activating virtual environment..."
+source venv/bin/activate
+
+# Install requirements if needed
+if [ ! -f "venv/.requirements_installed" ]; then
+    echo "📥 Installing dependencies..."
+    pip install -r requirements.txt
+    touch venv/.requirements_installed
+else
+    echo "✅ Dependencies already installed"
+fi
+
+# Run the app
+echo ""
+echo "🚀 Launching Streamlit app..."
+echo "   Open your browser to http://localhost:8501"
+echo ""
+streamlit run app.py

setup.sh

@@ -0,0 +1,60 @@
+#!/bin/bash
+
+# Setup script for local development
+
+set -e
+
+echo "🔧 Setting up Edge Detection Demo"
+echo "=================================="
+echo ""
+
+# Check Python version
+echo "🐍 Checking Python version..."
+PYTHON_VERSION=$(python3 --version 2>&1 | awk '{print $2}')
+echo "   Found Python $PYTHON_VERSION"
+
+REQUIRED_VERSION="3.11"
+if [ "$(printf '%s\n' "$REQUIRED_VERSION" "$PYTHON_VERSION" | sort -V | head -n1)" != "$REQUIRED_VERSION" ]; then
+    echo "⚠️  Warning: Python $REQUIRED_VERSION or higher is recommended."
+fi
+
+echo ""
+
+# Create virtual environment
+if [ -d "venv" ]; then
+    echo "📦 Virtual environment already exists."
+    read -p "   Do you want to recreate it? (y/N): " RECREATE
+    if [ "$RECREATE" = "y" ] || [ "$RECREATE" = "Y" ]; then
+        echo "   Removing old virtual environment..."
+        rm -rf venv
+        echo "   Creating new virtual environment..."
+        python3 -m venv venv
+    fi
+else
+    echo "📦 Creating virtual environment..."
+    python3 -m venv venv
+fi
+
+# Activate virtual environment
+echo "🔧 Activating virtual environment..."
+source venv/bin/activate
+
+# Upgrade pip
+echo "⬆️  Upgrading pip..."
+pip install --upgrade pip > /dev/null 2>&1
+
+# Install requirements
+echo "📥 Installing requirements..."
+pip install -r requirements.txt
+
+echo ""
+echo "✅ Setup complete!"
+echo ""
+echo "📚 Next steps:"
+echo "   1. Run './run_simple.sh' to start the demo locally"
+echo "   2. Or activate the environment: 'source venv/bin/activate'"
+echo "   3. Then run: 'streamlit run app.py'"
+echo ""
+echo "🚀 To deploy to Hugging Face Spaces:"
+echo "   1. Create a Space at https://huggingface.co/new-space"
+echo "   2. Run './deploy.sh' and follow the prompts"

test_setup.py

@@ -0,0 +1,159 @@
+#!/usr/bin/env python3
+"""
+Quick test script to verify the edge detection demo setup
+"""
+
+import sys
+
+def test_imports():
+    """Test that all required packages can be imported."""
+    print("🧪 Testing package imports...")
+    
+    packages = [
+        ('numpy', 'NumPy'),
+        ('cv2', 'OpenCV'),
+        ('streamlit', 'Streamlit'),
+        ('PIL', 'Pillow'),
+        ('huggingface_hub', 'HuggingFace Hub'),
+    ]
+    
+    failed = []
+    for module, name in packages:
+        try:
+            __import__(module)
+            print(f"  ✅ {name}")
+        except ImportError as e:
+            print(f"  ❌ {name}: {e}")
+            failed.append(name)
+    
+    return len(failed) == 0, failed
+
+
+def test_app_structure():
+    """Test that app.py has the expected structure."""
+    print("\n📁 Testing app structure...")
+    
+    try:
+        import app
+        
+        # Check for key functions
+        functions = [
+            'load_sample_image',
+            'generate_sample_image',
+            'apply_sobel_filter',
+            'apply_prewitt_filter',
+            'apply_roberts_filter',
+            'apply_laplacian_filter',
+            'apply_canny_edge_detector',
+            'compute_gradient_direction',
+            'create_gradient_visualization',
+            'main_loop',
+        ]
+        
+        failed = []
+        for func in functions:
+            if hasattr(app, func):
+                print(f"  ✅ Function '{func}' found")
+            else:
+                print(f"  ❌ Function '{func}' missing")
+                failed.append(func)
+        
+        return len(failed) == 0, failed
+    
+    except Exception as e:
+        print(f"  ❌ Error loading app: {e}")
+        return False, [str(e)]
+
+
+def test_edge_detection():
+    """Test basic edge detection functions."""
+    print("\n⚙️  Testing edge detection...")
+    
+    try:
+        import app
+        import numpy as np
+        
+        # Create a simple test image
+        test_img = np.random.randint(0, 256, (128, 128), dtype=np.uint8)
+        
+        # Test Sobel
+        edges, gx, gy = app.apply_sobel_filter(test_img, ksize=3)
+        assert edges.shape == test_img.shape, "Sobel output shape mismatch"
+        print(f"  ✅ Sobel filter works")
+        
+        # Test Prewitt
+        edges, gx, gy = app.apply_prewitt_filter(test_img)
+        assert edges.shape == test_img.shape, "Prewitt output shape mismatch"
+        print(f"  ✅ Prewitt filter works")
+        
+        # Test Roberts
+        edges, gx, gy = app.apply_roberts_filter(test_img)
+        print(f"  ✅ Roberts filter works")
+        
+        # Test Laplacian
+        edges = app.apply_laplacian_filter(test_img, ksize=3)
+        assert edges.shape == test_img.shape, "Laplacian output shape mismatch"
+        print(f"  ✅ Laplacian filter works")
+        
+        # Test Canny
+        edges = app.apply_canny_edge_detector(test_img, 50, 150)
+        assert edges.shape == test_img.shape, "Canny output shape mismatch"
+        print(f"  ✅ Canny edge detector works")
+        
+        # Test gradient visualization
+        viz = app.create_gradient_visualization(gx, gy)
+        print(f"  ✅ Gradient visualization works")
+        
+        return True, []
+    
+    except Exception as e:
+        print(f"  ❌ Error: {e}")
+        import traceback
+        traceback.print_exc()
+        return False, [str(e)]
+
+
+def main():
+    """Run all tests."""
+    print("=" * 60)
+    print("🔍 Edge Detection Demo - Test Suite")
+    print("=" * 60)
+    
+    all_passed = True
+    
+    # Test 1: Imports
+    passed, failed = test_imports()
+    if not passed:
+        print(f"\n❌ Import test failed. Missing packages: {', '.join(failed)}")
+        print("\n💡 Run: pip install -r requirements.txt")
+        all_passed = False
+    
+    # Test 2: App structure
+    if passed:  # Only run if imports work
+        passed, failed = test_app_structure()
+        if not passed:
+            print(f"\n❌ App structure test failed.")
+            all_passed = False
+    
+    # Test 3: Edge detection
+    if passed:
+        passed, failed = test_edge_detection()
+        if not passed:
+            print(f"\n❌ Edge detection test failed.")
+            all_passed = False
+    
+    # Summary
+    print("\n" + "=" * 60)
+    if all_passed:
+        print("✅ All tests passed! Ready to run the demo.")
+        print("\n🚀 Start with: ./run_simple.sh")
+        print("   Or: make run")
+        print("   Or: streamlit run app.py")
+        return 0
+    else:
+        print("❌ Some tests failed. Please fix the issues above.")
+        return 1
+
+
+if __name__ == "__main__":
+    sys.exit(main())