YouSee-Sketch is a web-based coloring book application that allows users to select from a variety of images, color them using intuitive tools, and save or share their creations. Built with Flask for the backend and custom web components for the frontend, YouSee-Sketch offers a seamless and interactive experience for users when coloring or editing.
- Secure file upload handling with extension validation
- Filename sanitization to prevent path traversal attacks
- CSRF protection through Flask's built-in security
- Input validation and sanitization
- Secure file storage with unique timestamped filenames
- XSS protection through content security policies
- Features
- Usage
- Project Structure
- Technologies Used
- Configuration
- Running the Application
- Security Considerations
- Performance Optimizations
- Browser Support
- Production Deployment
- Contributing
- License
- Contact
- Image Selection: Choose from a variety of predefined images to color
- Drawing Tools: Utilize different colors and brush sizes to create your masterpiece
- Real-time Saving: Automatic saving of work in progress
- Share & Save: Export your creations with secure server-side storage
- Paginated Gallery: View saved artwork with efficient loading
- Responsive Design: Works on desktop and mobile devices
- Touch Support: Full touch-screen compatibility
- Offline Support: Local storage for work in progress
-
Select an Image
- Browse through the thumbnails at the top of the page
- Click on a thumbnail to select it for coloring
-
Coloring
- Choose your desired color from the palette
- Adjust the brush size using the slider
- Click and drag on the image to apply color
-
Save Your Work
- Click the Save button to download your colored image locally
- Your work is also automatically saved in your browser's local storage
-
Share Your Creation
- Click the Share button to upload your colored image to the server
- Your creation will be saved in the gallery
- You can find shared images in the gallery section below
-
View Saved Images
- Scroll down to the Saved Images section to view all saved creations as thumbnails
YouSee-Sketch/
├── app.py # Main Flask application
├── requirements.txt # Python dependencies
├── static/
│ ├── css/
│ │ └── style.css # Main stylesheet
│ ├── images/ # Original coloring book images
│ │ └── test-page.png # Test image
│ ├── js/
│ │ └── jl-coloringBook.js # Coloring book component
│ └── saved/ # User-saved colored images
└── templates/
└── index.html # Main application template
- Flask: Web application framework
- Werkzeug: WSGI utilities and file handling
- HTML5/CSS3
- JavaScript/jQuery
- Material Icons
The application can be configured by modifying the following:
- Port Configuration: Modify the port in
app.py
(default: 5000) - Image Storage: Saved images are stored in
static/saved/
- New Images: Add new coloring pages to
static/images/
- PDF Conversion: Use tools in
static/convert/
to convert PDFs to PNGs
When you start the application, you'll see output similar to this:
$ python app.py
* Serving Flask app 'app'
* Debug mode: on
* Running on http://0.0.0.0:5000 (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: xxx-xxx-xxx
This indicates the application is running and accessible at the specified addresses on port 5000.
- Always run in production with HTTPS enabled
- Configure proper CORS headers in production
- Set up proper file permissions for upload directories
- Implement user authentication for production use
- Regular security updates for dependencies
- Monitor server logs for suspicious activity
- Image compression for uploads
- Client-side caching
- Lazy loading of gallery images
- Paginated data loading
- Optimized DOM updates
- Debounced save operations
- Efficient canvas rendering
- Chrome/Edge (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- Mobile browsers with touch support
- Use a production WSGI server (e.g., Gunicorn)
- Enable HTTPS using a reverse proxy
- Configure proper CORS headers
- Set up server monitoring
- Implement proper logging
- Configure backup systems
- Set up CDN for static assets
- File upload validation (size and type)
- Unique timestamped filenames
- XSS protection via Content Security Policy
- CSRF protection through Flask
- Input sanitization and validation
- Secure file storage practices
-
Frontend Components
- Custom Web Component:
jl-coloringBook.js
- Real-time drawing with canvas
- Touch and mouse input support
- Local storage for work in progress
- Material Design icons integration
- AJAX-based gallery updates
- Custom Web Component:
-
Backend Services
- Flask web framework
- File handling and validation
- Image storage management
- Pagination system
- Error handling and logging
- Security middleware
-
Data Flow
User Input → Canvas → Local Storage
↓
Server Upload → Validation → Storage
↓
Gallery Update → Pagination → Display
- File Processing
- Maximum file size: 16MB
- Supported formats: PNG, JPG, JPEG, GIF
- Automatic timestamp prefixing
- Secure filename sanitization
- Path traversal prevention
Endpoint | Method | Description | Response |
---|---|---|---|
/ |
GET | Main application | HTML |
/images/<filename> |
GET | Serve source images | Image |
/saved/<filename> |
GET | Serve saved images | Image |
/upload-image |
POST | Handle uploads | JSON |
/saved-images |
GET | Paginated gallery | JSON |
{
'status': 'success|fail',
'message': 'Descriptive message',
'filename': 'For successful uploads'
}
Status Codes:
- 200: Success
- 400: Bad Request
- 404: Not Found
- 413: File Too Large
- 500: Server Error
- Create virtual environment:
python -m venv venv
source venv/bin/activate
- Install dependencies:
pip install -r requirements.txt
- Run the application:
python app.py
The application will be available at http://localhost:5000
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
This project is licensed under the MIT License.
echo@dla.network [oZark oRChes✝ra✝'d]