Add Flask and FastAPI workshops with YOLOv8 object detection

[Copilot]

Adds two self-contained workshop examples demonstrating web framework integration with YOLOv8 for object detection in educational contexts.

Structure

Flask Workshop (workshops/flask_yolo_detection/)

• Traditional web app with server-side rendering
• 5 routes: upload form, detection handler, results display, image serving
• Drag-drop file upload, bounding box visualization, confidence scores

FastAPI Workshop (workshops/fastapi_yolo_detection/)

• REST API with async/await patterns
• 7 endpoints including /api/detect, health checks, object class listing
• Auto-generated Swagger/ReDoc documentation
• JavaScript frontend with async file upload

Implementation

Both workshops share core architecture:

# YOLO detection pipeline
results = model(image)
detections = [{
    'class': model.names[int(box.cls[0])],
    'confidence': float(box.conf[0]),
    'bbox': {'x1': int(x1), 'y1': int(y1), 'x2': int(x2), 'y2': int(y2)}
} for box in results[0].boxes]

Flask uses Jinja2 templates with server-side rendering; FastAPI returns JSON with client-side visualization.

Security

• Updated dependencies to patched versions (Pillow 10.2.0, Werkzeug 3.0.3, FastAPI 0.109.1, python-multipart 0.0.18)
• Environment variable control for Flask debug mode (FLASK_DEBUG)
• File validation (type, size, secure filenames)
• Production deployment guidance in READMEs

Documentation

Each workshop includes comprehensive README with:

• Installation/setup (virtual env, dependencies)
• API documentation (for FastAPI) with curl/Python examples
• Configuration options (model selection, file limits)
• Troubleshooting section
• Security considerations for production

Total: ~2,700 lines (575 Python, 1,082 HTML, 456 CSS, 833 documentation)

Original prompt

Add Flask and FastAPI Workshop Examples with YOLO Object Detection

Create two separate workshop examples demonstrating web frameworks with YOLO object detection:

Workshop 1: Flask + YOLO Object Detection

Create a folder workshops/flask_yolo_detection/ with:

1. app.py - Flask application with:

   • Route for homepage with file upload form
   • Route to handle file upload and perform YOLO object detection
   • Route to display results with bounding boxes
   • Proper error handling

2. templates/index.html - HTML template with:

   • File upload form
   • Display area for original and detected images
   • List of detected objects with confidence scores

3. templates/results.html - Results template showing:

   • Processed image with bounding boxes
   • List of detected objects with labels and confidence scores

4. requirements.txt - Dependencies including:

   • Flask
   • ultralytics (YOLO)
   • opencv-python
   • Pillow
   • numpy

5. README.md - Documentation with:

   • Project description
   • Installation instructions
   • How to run the application
   • Example usage
   • Screenshots or descriptions of functionality

Workshop 2: FastAPI + YOLO Object Detection

Create a folder workshops/fastapi_yolo_detection/ with:

1. main.py - FastAPI application with:

   • Endpoint for serving the upload page
   • POST endpoint for file upload and YOLO detection
   • Endpoint to serve processed images
   • Proper async/await patterns
   • API documentation with Swagger

2. static/index.html - Frontend with:

   • File upload form
   • JavaScript to handle async uploads
   • Display area for results
   • Bootstrap or simple CSS styling

3. static/style.css - Basic styling for the interface

4. requirements.txt - Dependencies including:

   • fastapi
   • uvicorn
   • python-multipart
   • ultralytics (YOLO)
   • opencv-python
   • Pillow
   • numpy

5. README.md - Documentation with:

   • Project description
   • Installation instructions
   • How to run the application (using uvicorn)
   • API endpoints documentation
   • Example usage with curl or requests

Implementation Requirements

Both examples should:

• Use YOLOv8 (latest from ultralytics package)
• Accept image uploads (jpg, png, jpeg)
• Perform object detection and draw bounding boxes
• Return/display detected objects with confidence scores
• Handle errors gracefully (invalid files, no objects detected, etc.)
• Save uploaded and processed images temporarily
• Include clear comments explaining the code
• Be suitable as teaching materials for Python workshops

Code Structure

Each workshop should be self-contained and runnable independently with clear separation of concerns:

• Model loading and initialization
• File handling and validation
• Image processing
• Detection logic
• Response formatting

Make the code beginner-friendly with explanatory comments, as these are teaching examples.

This pull request was created as a result of the following prompt from Copilot chat.

Add Flask and FastAPI Workshop Examples with YOLO Object Detection

Create two separate workshop examples demonstrating web frameworks with YOLO object detection:

Workshop 1: Flask + YOLO Object Detection

Create a folder workshops/flask_yolo_detection/ with:

1. app.py - Flask application with:

   • Route for homepage with file upload form
   • Route to handle file upload and perform YOLO object detection
   • Route to display results with bounding boxes
   • Proper error handling

2. templates/index.html - HTML template with:

   • File upload form
   • Display area for original and detected images
   • List of detected objects with confidence scores

3. templates/results.html - Results template showing:

   • Processed image with bounding boxes
   • List of detected objects with labels and confidence scores

4. requirements.txt - Dependencies including:

   • Flask
   • ultralytics (YOLO)
   • opencv-python
   • Pillow
   • numpy

5. README.md - Documentation with:

   • Project description
   • Installation instructions
   • How to run the application
   • Example usage
   • Screenshots or descriptions of functionality

Workshop 2: FastAPI + YOLO Object Detection

Create a folder workshops/fastapi_yolo_detection/ with:

1. main.py - FastAPI application with:

   • Endpoint for serving the upload page
   • POST endpoint for file upload and YOLO detection
   • Endpoint to serve processed images
   • Proper async/await patterns
   • API documentation with Swagger

2. static/index.html - Frontend with:

   • File upload form
   • JavaScript to handle async uploads
   • Display area for results
   • Bootstrap or simple CSS styling

3. static/style.css - Basic styling for the interface

4. requirements.txt - Dependencies including:

   • fastapi
   • uvicorn
   • python-multipart
   • ultralytics (YOLO)
   • opencv-python
   • Pillow
   • numpy

5. README.md - Documentation with:

   • Project description
   • Installation instructions
   • How to run the application (using uvicorn)
   • API endpoints documentation
   • Example usage with curl or requests

Implementation Requirements

Both examples should:

• Use YOLOv8 (latest from ultralytics package)
• Accept image uploads (jpg, png, jpeg)
• Perform object detection and draw bounding boxes
• Return/display detected objects with confidence scores
• Handle errors gracefully (invalid files, no objects detected, etc.)
• Save uploaded and processed images temporarily
• Include clear comments explaining the code
• Be suitable as teaching materials for Python workshops

Code Structure

Each workshop should be self-contained and runnable independently with clear separation of concerns:

• Model loading and initialization
• File handling and validation
• Image processing
• Detection logic
• Response formatting

Make the code beginner-friendly with explanatory comments, as these are teaching examples.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.