Image Filter Application

html code : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Filter Application</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-900 min-h-screen flex items-center justify-center"> <div class="container mx-auto p-6 max-w-4xl"> <h1 class="text-3xl font-bold text-white text-center mb-6">Image Filter Application</h1> <div class="bg-gray-800 rounded-lg shadow-lg p-6"> <div class＝"flex flex-col sm:flex-row gap-4 mb-6"> <label class="bg-blue-600 text-white px-4 py-2 rounded-md cursor-pointer hover:bg-blue-700 transition"> Browse Image <input type="file" id="imageInput" accept="image/*" class="hidden"> </label> <select id="filterSelect" class="bg-gray-700 text-white px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> <option value="" disabled selected>Select a filter</option> <option value="Add noise">Add Noise</option> <option value="Remove noise">Remove Noise</option> <option value="Mean filter">Mean Filter</option> <option value="Median filter">Median Filter</option> <option value="Gaussian filter">Gaussian Filter</option> <option value="Gaussian noise">Gaussian Noise</option> <option value="Erosion">Erosion</option> <option value="Dilation">Dilation</option> <option value="Opening">Opening</option> <option value="Closing">Closing</option> <option value="Boundary extraction">Boundary Extraction</option> <option value="Region filling">Region Filling</option> <option value="Global threshold">Global Threshold</option> <option value="Adaptive threshold">Adaptive Threshold</option> <option value="Otsu threshold">Otsu Threshold</option> <option value="Hough">Hough Transform</option> <option value="Watershed">Watershed</option> </select> </div> <div class="flex flex-col sm:flex-row gap-6"> <div class="flex-1"> <h2 class="text-xl text-white mb-2">Original Image</h2> <canvas id="originalCanvas" class="w-full h-auto border-2 border-gray-600 rounded-md"></canvas> </div> <div class="flex-1"> <h2 class="text-xl text-white mb-2">Filtered Image</h2> <canvas id="filteredCanvas" class="w-full h-auto border-2 border-gray-600 rounded-md"></canvas> <p id="filterMessage" class="text-gray-400 mt-2"></p> </div> </div> </div> </div> <script> const imageInput = document.getElementById('imageInput'); const filterSelect = document.getElementById('filterSelect'); const originalCanvas = document.getElementById('originalCanvas'); const filteredCanvas = document.getElementById('filteredCanvas'); const filterMessage = document.getElementById('filterMessage'); let originalImage = null; let imageFile = null; imageInput.addEventListener('change', (e) => { imageFile = e.target.files[0]; if (imageFile) { const reader = new FileReader(); reader.onload = (event) => { originalImage = new Image(); originalImage.onload = () => { originalCanvas.width = originalImage.width; originalCanvas.height = originalImage.height; filteredCanvas.width = originalImage.width; filteredCanvas.height = originalImage.height; const ctx = originalCanvas.getContext('2d'); ctx.drawImage(originalImage, 0, 0); filteredCanvas.getContext('2d').clearRect(0, 0, filteredCanvas.width, filteredCanvas.height); filterMessage.textContent = 'Select a filter to apply.'; }; originalImage.src = event.target.result; }; reader.readAsDataURL(imageFile); } }); filterSelect.addEventListener('change', async () => { const filter = filterSelect.value; if (filter && imageFile) { filterMessage.textContent = `Applying ${filter}...`; try { const formData = new FormData(); formData.append('file', imageFile); formData.append('filter_name', filter); const response = await fetch('http://localhost:8001/apply_filter', { method: 'POST', body: formData }); if (!response.ok) { throw new Error('Failed to apply filter'); } const data = await response.json(); const filteredImage = new Image(); filteredImage.onload = () => { filteredCanvas.width = filteredImage.width; filteredCanvas.height = filteredImage.height; const ctx = filteredCanvas.getContext('2d'); ctx.drawImage(filteredImage, 0, 0); filterMessage.textContent = `${filter} applied successfully!`; }; filteredImage.src = data.filtered_image; } catch (error) { filterMessage.textContent = `Error applying ${filter}: ${error.message}`; } } else if (!imageFile) { filterMessage.textContent = 'Please upload an image first.'; } }); </script> </body> </html> filters code : import cv2 import numpy as np def apply_filter(img, filter_name): """ تطبيق فلاتر متنوعة على الصورة المدخلة. img: صورة بتنسيق BGR (كما يتوقعها OpenCV). filter_name: اسم الفلتر المطلوب تطبيقه. """ try: if filter_name == "Add noise": noise = np.random.normal(0, 25, img.shape).astype(np.uint8) return cv2.add(img, noise) elif filter_name == "Remove noise": return cv2.fastNlMeansDenoisingColored(img, None, 10, 10, 7, 21) elif filter_name == "Mean filter": return cv2.blur(img, (5, 5)) elif filter_name == "Median filter": return cv2.medianBlur(img, 5) elif filter_name == "Gaussian filter": return cv2.GaussianBlur(img, (5, 5), 0) elif filter_name == "Gaussian noise": gauss = np.random.normal(0, 20, img.shape).astype(np.uint8) return cv2.add(img, gauss) elif filter_name == "Erosion": kernel = np.ones((5, 5), np.uint8) return cv2.erode(img, kernel, iterations=1) elif filter_name == "Dilation": kernel = np.ones((5, 5), np.uint8) return cv2.dilate(img, kernel, iterations=1) elif filter_name == "Opening": kernel = np.ones((5, 5), np.uint8) return cv2.morphologyEx(img, cv2.MORPH_OPEN, kernel) elif filter_name == "Closing": kernel = np.ones((5, 5), np.uint8) return cv2.morphologyEx(img, cv2.MORPH_CLOSE, kernel) elif filter_name == "Boundary extraction": kernel = np.ones((3, 3), np.uint8) eroded = cv2.erode(img, kernel, iterations=1) return cv2.absdiff(img, eroded) elif filter_name == "Region filling": gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) _, th = cv2.threshold(gray, 127, 255, cv2.THRESH_BINARY_INV) h, w = th.shape[:2] mask = np.zeros((h + 2, w + 2), np.uint8) filled = th.copy() cv2.floodFill(filled, mask, (0, 0), 255) inv = cv2.bitwise_not(filled) result = cv2.bitwise_or(th, inv) return cv2.cvtColor(result, cv2.COLOR_GRAY2BGR) elif filter_name == "Global threshold": gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) _, threshed = cv2.threshold(gray, 127, 255, cv2.THRESH_BINARY) return cv2.cvtColor(threshed, cv2.COLOR_GRAY2BGR) elif filter_name == "Adaptive threshold": gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) th = cv2.adaptiveThreshold(gray, 255, cv2.ADAPTIVE_THRESH_MEAN_C, cv2.THRESH_BINARY, 11, 2) return cv2.cvtColor(th, cv2.COLOR_GRAY2BGR) elif filter_name == "Otsu threshold": gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) _, th = cv2.threshold(gray, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU) return cv2.cvtColor(th, cv2.COLOR_GRAY2BGR) elif filter_name == "Hough": gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) edges = cv2.Canny(gray, 50, 150, apertureSize=3) lines = cv2.HoughLinesP(edges, 1, np.pi / 180, 100, minLineLength=30, maxLineGap=10) hough_img = img.copy() if lines is not None: for line in lines: x1, y1, x2, y2 = line[0] cv2.line(hough_img, (x1, y1), (x2, y2), (0, 255, 0), 2) return hough_img elif filter_name == "Watershed": gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) _, binary = cv2.threshold(gray, 0, 255, cv2.THRESH_BINARY_INV + cv2.THRESH_OTSU) kernel = np.ones((3, 3), np.uint8) opening = cv2.morphologyEx(binary, cv2.MORPH_OPEN, kernel, iterations=2) sure_bg = cv2.dilate(opening, kernel, iterations=3) dist_transform = cv2.distanceTransform(opening, cv2.DIST_L2, 5) _, sure_fg = cv2.threshold(dist_transform, 0.7 * dist_transform.max(), 255, 0) sure_fg = np.uint8(sure_fg) unknown = cv2.subtract(sure_bg, sure_fg) _, markers = cv2.connectedComponents(sure_fg) markers = markers + 1 markers[unknown == 255] = 0 img_copy = img.copy() markers = cv2.watershed(img_copy, markers) img_copy[markers == -1] = [255, 0, 0] return img_copy else: return img except Exception as e: raise Exception(f"Error in filter {filter_name}: {str(e)}") deploy it

Deployment Instructions

To deploy this application, you'll need to:

Set up the environment:

Install Node.js and Python on your server
Install the required Python packages: pip install opencv-python numpy
Install the required Node.js packages: npm install python-shell uuid

Create the directory structure:

Make sure to create a python directory in your project root
Create a temp directory for temporary file storage

Deploy to a platform:

Option 1: Deploy to Vercel

Vercel doesn't support Python execution directly, so you'll need to modify the application to use a serverless function or a separate Python API service.
You can deploy the frontend to Vercel and set up a separate Python backend on a platform like Heroku, Railway, or a custom server.

Option 2: Deploy to a VPS or dedicated server

Upload the code to your server
Install Node.js, npm, and Python
Install dependencies: npm install and pip install opencv-python numpy
Start the application: npm run start

Option 3: Deploy with Docker

Create a Dockerfile that includes both Node.js and Python
Build and run the Docker container

Modifications for Production

For a production environment, consider these improvements:

Add proper error handling and logging

Implement rate limiting to prevent abuse

Add authentication if needed

Set up CORS properly if your frontend and backend are on different domains

Optimize image processing for performance

Add caching for processed images

Implement proper cleanup of temporary files