🎨 DoodlePic - Image to Sketch Converter

Transform your digital images into beautiful artistic sketches with just one click!

DoodlePic is a modern web application that converts your photos into stunning pencil sketches using advanced computer vision algorithms. Built with Flask and OpenCV, it provides a seamless, responsive experience across all devices.

🎬 Watch Demo Video

---

📋 Table of Contents

• Features
• Demo
• Installation
• Usage
• Architecture
• Algorithm Details
• Contributing
• License

---

✨ Features

• 🖼️ Instant Image-to-Sketch Conversion - Transform any image into artistic pencil sketch
• 📱 Fully Responsive Design - Works seamlessly on all devices
• ⚡ Real-time Processing - Fast image processing with optimized algorithms
• 🗂️ Smart File Management - Automatic cleanup prevents storage accumulation
• 💾 One-Click Download - Download sketches in high quality PNG format
• 🎯 File Validation - Supports PNG, JPG, JPEG, GIF formats (5MB limit)
• 🛡️ Error Handling - Robust error handling for smooth user experience

---

🎯 Demo

Live Application Flow

graph TB
    A[User Visits Homepage] --> B[Upload Image]
    B --> C{File Validation}
    C -->|Valid| D[Image Processing]
    C -->|Invalid| E[Error Message]
    D --> F[Sketch Generation]
    F --> G[Display Result]
    G --> H[Download Sketch]
    G --> I[Create New Sketch]
    I --> A
    H --> J[File Cleanup]

Loading

---

🏗️ Architecture

System Architecture

graph TB
    subgraph "Frontend Layer"
        A[HTML Templates]
        B[CSS Styling]
        C[JavaScript]
    end

    subgraph "Backend Layer"
        D[Flask Application]
        E[Route Handlers]
        F[File Management]
    end

    subgraph "Processing Layer"
        G[OpenCV Engine]
        H[Image Processing]
        I[Pygame Renderer]
    end

    subgraph "Storage Layer"
        J[Upload Directory]
        K[Output Directory]
        L[Static Assets]
    end

    A --> D
    B --> D
    C --> D
    D --> E
    E --> F
    E --> G
    G --> H
    H --> I
    F --> J
    F --> K
    D --> L

Loading

Data Flow Diagram

sequenceDiagram
    participant U as User
    participant F as Frontend
    participant B as Backend
    participant P as Processing
    participant S as Storage

    U->>F: Upload Image
    F->>B: POST /upload
    B->>B: Validate File
    B->>S: Save Upload
    B->>P: Process Image
    P->>P: Apply Sketch Algorithm
    P->>S: Save Sketch
    B->>S: Cleanup Upload
    B->>F: Redirect to Output
    F->>U: Display Sketch
    U->>F: Download Request
    F->>B: GET /static/output/sketch.png
    B->>S: Retrieve File
    S->>B: Return File
    B->>F: Serve File
    F->>U: Download Sketch

Loading

---

🚀 Installation

Prerequisites

• Python 3.8+ - Download Python
• Git - Download Git

Quick Start

1. Clone the Repository

   git clone https://github.com/yourusername/DoodlePic-project.git
   cd DoodlePic-project

2. Create Virtual Environment (Recommended)

   # Windows
   python -m venv venv
   venv\Scripts\activate
   
   # macOS/Linux
   python3 -m venv venv
   source venv/bin/activate

3. Install Dependencies

   pip install -r requirements.txt

4. Run the Application

   python app.py

5. Access the Application

   • Open your browser: http://localhost:5000
   • Start converting your images!

---

💻 Usage

1. Upload Image: Click upload area or drag & drop (PNG, JPG, JPEG, GIF - max 5MB)
2. Processing: Application automatically processes your image (2-5 seconds)
3. Download: View generated sketch and click "Download Sketch" to save

Supported Formats

Format	Extension	Max Size	Notes
PNG	.png	5MB	Recommended
JPEG	.jpg, .jpeg	5MB	Most common
GIF	.gif	5MB	First frame only

---

📡 API Documentation

Main Endpoints

• GET / - Homepage with upload interface
• POST /upload - Upload and process image
• GET /output/<filename> - Display processed sketch
• GET /static/output/<filename> - Serve sketch file
• POST /cleanup - Manual file cleanup

---

🛠️ Technologies

Backend: Flask 3.0.3, OpenCV 4.10.0, NumPy 1.26.4, Pygame 2.5.2
Frontend: HTML5, CSS3, Vanilla JavaScript
Processing: Computer Vision algorithms with OpenCV

---

🧮 Algorithm Details

Sketch Generation Process

The sketch generation uses a sophisticated computer vision algorithm:

flowchart TD
    A[Original Image] --> B[Convert to Grayscale]
    B --> C[Invert Grayscale]
    C --> D[Apply Gaussian Blur]
    D --> E[Invert Blurred Image]
    E --> F[Blend with Original]
    F --> G[Generate Sketch]
    G --> H[Render with Pygame]
    H --> I[Save as PNG]

Loading

Technical Implementation

1. Grayscale Conversion

   gray_image = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)

2. Image Inversion

   inverted_gray = 255 - gray_image

3. Gaussian Blur Application

   blurred = cv2.GaussianBlur(inverted_gray, (21, 21), 0)

4. Blend Operation

   sketch = cv2.divide(gray_image, 255 - blurred, scale=256.0)

Performance Optimizations

• Memory Management: Automatic cleanup of temporary files
• Processing Speed: Optimized OpenCV operations
• File Handling: Efficient I/O operations
• Background Tasks: Periodic cleanup threading

---

📊 Performance

Benchmarks

Image Size	Processing Time	Memory Usage
1MP (1024x768)	~2 seconds	~50MB
2MP (1920x1080)	~3 seconds	~80MB
5MP (2560x1920)	~5 seconds	~150MB

System Requirements

• Minimum: 2GB RAM, 1GB storage
• Recommended: 4GB RAM, 2GB storage
• CPU: Any modern processor (2+ cores recommended)

---

🤝 Contributing

We welcome contributions! Here's how you can help:

Development Setup

1. Fork the Repository
2. Create Feature Branch

   git checkout -b feature/amazing-feature

3. Make Changes
4. Run Tests

   python -m pytest tests/

5. Commit Changes

   git commit -m "Add amazing feature"

6. Push to Branch

   git push origin feature/amazing-feature

7. Open Pull Request

Contribution Guidelines

• Code Style: Follow PEP 8 guidelines
• Documentation: Update README for new features
• Testing: Add tests for new functionality
• Performance: Consider performance implications

Areas for Contribution

• 🎨 UI/UX Improvements
• 📱 Mobile Optimization
• 🚀 Performance Enhancements
• 🧪 Additional Image Effects
• 🔧 Code Optimization
• 📝 Documentation

---

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License Summary

• ✅ Commercial use
• ✅ Modification
• ✅ Distribution
• ✅ Private use
• ❌ Liability
• ❌ Warranty

---

🆘 Support

Getting Help

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues

Troubleshooting

Common Issues

1. Import Error: No module named 'cv2'

   pip install opencv-python

2. Permission Denied Error

   # Windows
   Run as Administrator
   
   # macOS/Linux
   sudo pip install -r requirements.txt

3. Port Already in Use

   # Kill process on port 5000
   lsof -ti:5000 | xargs kill -9

System-Specific Notes

• Windows: Ensure Visual C++ redistributables are installed
• macOS: May require Xcode command line tools
• Linux: Install python3-dev and build-essential

---

🙏 Acknowledgments

Special thanks to:

• OpenCV Community - For the amazing computer vision library
• Flask Team - For the lightweight and powerful web framework
• Pygame Developers - For the graphics rendering capabilities
• Contributors - Everyone who has contributed to this project

---

Version History

• v1.0.0 - Initial release with basic sketch functionality
• v1.1.0 - Added file cleanup and responsive design
• v1.2.0 - Performance optimizations and error handling

---

Made with ❤️ by Melwyn Titus

⭐ Star this repo | 🍴 Fork it | 📝 Report Bug