Công cụ filter giống với flask P2 cực nhanh với website làm đẹp

Mục Lục

Công cụ filter giống với flask P2 Giờ hãy thêm nhiều phép transform hơn và các bộ lọc

Công cụ filter giống với flask P2 Chúng ta có thể thêm nhiều phép biến đổi (transformation) và bộ lọc (filter) để tăng khả năng xử lý hình ảnh. Albumentations hỗ trợ nhiều loại phép biến đổi và bộ lọc như Blur, Sharpen, BrightnessContrast, và GaussianNoise. Chúng ta sẽ thêm các tùy chọn mới cho phép người dùng áp dụng nhiều biến đổi cùng lúc.

Dưới đây là các bước để cập nhật:

Thêm các phép biến đổi và bộ lọc như:Blur: Làm mờ hình ảnh.Sharpen: Làm sắc nét hình ảnh.BrightnessContrast: Điều chỉnh độ sáng và độ tương phản.GaussianNoise: Thêm nhiễu Gaussian vào hình ảnh.Rotate với độ tùy chỉnh.
Blur: Làm mờ hình ảnh.
Sharpen: Làm sắc nét hình ảnh.
BrightnessContrast: Điều chỉnh độ sáng và độ tương phản.
GaussianNoise: Thêm nhiễu Gaussian vào hình ảnh.
Rotate với độ tùy chỉnh.
Cập nhật giao diện để hiển thị thêm các tùy chọn này và điều chỉnh các tham số liên quan.

Thêm các phép biến đổi và bộ lọc như:

Blur: Làm mờ hình ảnh.
Sharpen: Làm sắc nét hình ảnh.
BrightnessContrast: Điều chỉnh độ sáng và độ tương phản.
GaussianNoise: Thêm nhiễu Gaussian vào hình ảnh.
Rotate với độ tùy chỉnh.

Cập nhật giao diện để hiển thị thêm các tùy chọn này và điều chỉnh các tham số liên quan.

Giao diện và script cập nhật:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Transformations</title>
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        img {
            margin-top: 20px;
            border: 2px solid #ddd;
        }

        .params {
            margin: 20px 0;
        }

        label {
            margin-right: 10px;
        }

        input[type="range"] {
            width: 200px;
        }

        button {
            margin-top: 10px;
            padding: 10px 20px;
            cursor: pointer;
        }

        .output {
            font-weight: bold;
            margin-left: 10px;
        }
    </style>
    <script>
        // Hàm debounce để hạn chế gọi API liên tục
        function debounce(func, wait) {
            let timeout;
            return function(...args) {
                const context = this;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), wait);
            };
        }

        // Hàm để upload ảnh
        function uploadImage() {
            const fileInput = document.getElementById('fileInput');
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);

            fetch('/api/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.image_path) {
                    // Hiển thị ảnh sau khi upload thành công
                    document.getElementById('image').src = data.image_path;
                    document.getElementById('imagePath').value = data.image_path;
                } else {
                    console.error(data.error);
                }
            })
            .catch(error => console.error('Error:', error));
        }

        // Hàm để áp dụng transform ảnh với debounce
        const applyTransform = debounce(function() {
            const imagePath = document.getElementById('imagePath').value;
            const p = parseFloat(document.getElementById('probability').value);
            const limit = parseInt(document.getElementById('limit').value);
            const blur = parseInt(document.getElementById('blur').value);
            const sharpen = parseInt(document.getElementById('sharpen').value);
            const brightness = parseFloat(document.getElementById('brightness').value);
            const contrast = parseFloat(document.getElementById('contrast').value);
            const noise = parseInt(document.getElementById('noise').value);
            const transformType = document.querySelector('input[name="transform"]:checked').value;

            if (!imagePath) {
                console.error('Image path is not set');
                return;
            }

            fetch('/api/transform', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    transform: transformType,
                    image_path: imagePath,
                    params: {
                        "p": p,
                        "limit": limit,
                        "blur": blur,
                        "sharpen": sharpen,
                        "brightness": brightness,
                        "contrast": contrast,
                        "noise": noise
                    }
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.processed_image_path) {
                    // Thêm chuỗi ngẫu nhiên vào URL để tránh cache
                    const randomParam = `?t=${new Date().getTime()}`;
                    // Hiển thị ảnh sau khi biến đổi
                    document.getElementById('image').src = data.processed_image_path + randomParam;
                } else {
                    console.error(data.error);
                }
            })
            .catch(error => console.error('Error:', error));
        }, 500);  // Debounce time set to 500ms

        // Cập nhật giá trị hiển thị khi thay đổi range
        function updateValue(id, value) {
            document.getElementById(id).innerText = value;
            applyTransform();  // Gọi lại hàm debounce khi giá trị thay đổi
        }
    </script>
</head>
<body>
    <div class="container">
        <h1>Upload and Transform Image</h1>

        <!-- Form để tải lên ảnh -->
        <input type="file" id="fileInput" accept="image/*">
        <button onclick="uploadImage()">Upload</button>

        <!-- Ẩn đường dẫn ảnh -->
        <input type="hidden" id="imagePath" value="">

        <!-- Các tham số cho biến đổi -->
        <div class="params">
            <label for="probability">Probability (p):</label>
            <input type="range" id="probability" min="0" max="1" step="0.1" value="1.0" oninput="updateValue('probabilityValue', this.value)">
            <span id="probabilityValue" class="output">1.0</span>
        </div>

        <div class="params">
            <label for="limit">Limit (Degrees):</label>
            <input type="range" id="limit" min="0" max="360" step="1" value="90" oninput="updateValue('limitValue', this.value)">
            <span id="limitValue" class="output">90</span>
        </div>

        <div class="params">
            <label for="blur">Blur:</label>
            <input type="range" id="blur" min="0" max="10" step="1" value="0" oninput="updateValue('blurValue', this.value)">
            <span id="blurValue" class="output">0</span>
        </div>

        <div class="params">
            <label for="sharpen">Sharpen:</label>
            <input type="range" id="sharpen" min="0" max="10" step="1" value="0" oninput="updateValue('sharpenValue', this.value)">
            <span id="sharpenValue" class="output">0</span>
        </div>

        <div class="params">
            <label for="brightness">Brightness:</label>
            <input type="range" id="brightness" min="0" max="2" step="0.1" value="1.0" oninput="updateValue('brightnessValue', this.value)">
            <span id="brightnessValue" class="output">1.0</span>
        </div>

        <div class="params">
            <label for="contrast">Contrast:</label>
            <input type="range" id="contrast" min="0" max="2" step="0.1" value="1.0" oninput="updateValue('contrastValue', this.value)">
            <span id="contrastValue" class="output">1.0</span>
        </div>

        <div class="params">
            <label for="noise">Gaussian Noise:</label>
            <input type="range" id="noise" min="0" max="100" step="5" value="0" oninput="updateValue('noiseValue', this.value)">
            <span id="noiseValue" class="output">0</span>
        </div>

        <!-- Các nút transform với radio buttons để chọn -->
        <div class="params">
            <label for="transform">Transformation:</label>
            <label><input type="radio" name="transform" value="horizontal_flip" checked> Horizontal Flip</label>
            <label><input type="radio" name="transform" value="vertical_flip"> Vertical Flip</label>
            <label><input type="radio" name="transform" value="rotate_90"> Rotate</label>
        </div>

        <!-- Hiển thị ảnh -->
        <div>
            <img id="image" src="https://placehold.co/600x400" alt="Image will appear here" style="max-width: 100%; height: auto;">
        </div>
    </div>
</body>
</html>

Giải thích các thay đổi:

Thêm các phép biến đổi mới:Blur: Thanh trượt để điều chỉnh độ mờ của ảnh (từ 0 đến 10).Sharpen: Điều chỉnh độ sắc nét (từ 0 đến 10).Brightness & Contrast: Điều chỉnh độ sáng và tương phản (từ 0 đến 2).Gaussian Noise: Thêm nhiễu Gaussian vào ảnh (từ 0 đến 100).
Blur: Thanh trượt để điều chỉnh độ mờ của ảnh (từ 0 đến 10).
Sharpen: Điều chỉnh độ sắc nét (từ 0 đến 10).
Brightness & Contrast: Điều chỉnh độ sáng và tương phản (từ 0 đến 2).
Gaussian Noise: Thêm nhiễu Gaussian vào ảnh (từ 0 đến 100).
Cập nhật API:Phần params của request bây giờ chứa thêm các tham số blur, sharpen, brightness, contrast, và noise.
Phần params của request bây giờ chứa thêm các tham số blur, sharpen, brightness, contrast, và noise.
Hiển thị giá trị thanh trượt:Giá trị hiện tại của thanh trượt được hiển thị ngay bên cạnh thanh, giúp người dùng dễ theo dõi.
Giá trị hiện tại của thanh trượt được hiển thị ngay bên cạnh thanh, giúp người dùng dễ theo dõi.

Thêm các phép biến đổi mới:

Blur: Thanh trượt để điều chỉnh độ mờ của ảnh (từ 0 đến 10).
Sharpen: Điều chỉnh độ sắc nét (từ 0 đến 10).
Brightness & Contrast: Điều chỉnh độ sáng và tương phản (từ 0 đến 2).
Gaussian Noise: Thêm nhiễu Gaussian vào ảnh (từ 0 đến 100).

Cập nhật API:

Phần params của request bây giờ chứa thêm các tham số blur, sharpen, brightness, contrast, và noise.

Hiển thị giá trị thanh trượt:

Giá trị hiện tại của thanh trượt được hiển thị ngay bên cạnh thanh, giúp người dùng dễ theo dõi.

Với những thay đổi này, bạn đã mở rộng khả năng chỉnh sửa hình ảnh với nhiều loại biến đổi và bộ lọc đa dạng.

Giờ hãy thêm code vào hàm này cho phù hợp với giao diện

Để cập nhật hàm transform_image sao cho nó phù hợp với giao diện mới, ta cần xử lý các phép biến đổi và bộ lọc bổ sung từ các tham số trong payload. Dưới đây là cách điều chỉnh hàm này để áp dụng các phép biến đổi và bộ lọc được người dùng chọn:

Thêm các biến đổi và bộ lọc mới như Blur, Sharpen, BrightnessContrast, và GaussianNoise.
Sử dụng các tham số từ payload để cấu hình các phép biến đổi và bộ lọc.

Dưới đây là mã code cập nhật cho hàm transform_image:

from flask import request, jsonify
import os
import cv2
import matplotlib.pyplot as plt
import albumentations as A
import numpy as np

@main.route('/api/transform', methods=['POST'])
def transform_image():
    # Lấy toàn bộ payload từ yêu cầu
    data = request.json

    # Xử lý các thông tin cơ bản
    transform_type = data.get('transform')
    image_path = data.get('image_path')
    params = data.get('params', {})

    if not image_path or not os.path.exists(image_path):
        return jsonify({"error": "Invalid image path"}), 400

    # Lấy giá trị từ params
    p = params.get('p', 1.0)
    limit = params.get('limit', 90)
    blur = params.get('blur', 0)
    sharpen = params.get('sharpen', 0)
    brightness = params.get('brightness', 1.0)
    contrast = params.get('contrast', 1.0)
    noise = params.get('noise', 0)

    # Đọc và xử lý ảnh
    image = cv2.imread(image_path)
    image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)

    # Tạo danh sách các phép biến đổi
    transforms = []

    if transform_type == 'horizontal_flip':
        transforms.append(A.HorizontalFlip(p=p))
    elif transform_type == 'vertical_flip':
        transforms.append(A.VerticalFlip(p=p))
    elif transform_type == 'rotate_90':
        transforms.append(A.Rotate(limit=(limit, limit), p=p))
    
    # Thêm các bộ lọc và biến đổi bổ sung
    if blur > 0:
        transforms.append(A.GaussianBlur(blur_limit=blur, p=1.0))
    if sharpen > 0:
        transforms.append(A.Sharpen(p=1.0))
    if brightness != 1.0 or contrast != 1.0:
        transforms.append(A.RandomBrightnessContrast(brightness_limit=(brightness-1, brightness-1), contrast_limit=(contrast-1, contrast-1), p=1.0))
    if noise > 0:
        transforms.append(A.GaussNoise(var_limit=(noise, noise), p=1.0))

    # Áp dụng tất cả các phép biến đổi
    if transforms:
        transform = A.Compose(transforms)
        augmented = transform(image=image)
        image = augmented['image']

    # Lưu ảnh đã xử lý vào thư mục processed_images
    processed_image_path = os.path.join(PROCESSED_FOLDER, 'processed_image.jpg')
    plt.imsave(processed_image_path, image)

    return jsonify({"message": "Image transformed successfully", "processed_image_path": processed_image_path}), 200

Giải thích các thay đổi:

Thay đổi cách xử lý biến đổi:Chúng ta xây dựng một danh sách các phép biến đổi (transforms) và áp dụng chúng đồng thời nếu có.
Chúng ta xây dựng một danh sách các phép biến đổi (transforms) và áp dụng chúng đồng thời nếu có.
Thêm các bộ lọc:Blur: Thêm phép biến đổi GaussianBlur nếu giá trị blur lớn hơn 0.Sharpen: Thêm phép biến đổi Sharpen nếu giá trị sharpen lớn hơn 0.Brightness & Contrast: Sử dụng RandomBrightnessContrast để thay đổi độ sáng và độ tương phản.Gaussian Noise: Thêm phép biến đổi GaussNoise nếu giá trị noise lớn hơn 0.
Blur: Thêm phép biến đổi GaussianBlur nếu giá trị blur lớn hơn 0.
Sharpen: Thêm phép biến đổi Sharpen nếu giá trị sharpen lớn hơn 0.
Brightness & Contrast: Sử dụng RandomBrightnessContrast để thay đổi độ sáng và độ tương phản.
Gaussian Noise: Thêm phép biến đổi GaussNoise nếu giá trị noise lớn hơn 0.
Áp dụng các biến đổi:Sử dụng A.Compose để kết hợp tất cả các biến đổi trong danh sách và áp dụng chúng vào hình ảnh.
Sử dụng A.Compose để kết hợp tất cả các biến đổi trong danh sách và áp dụng chúng vào hình ảnh.

Thay đổi cách xử lý biến đổi:

Chúng ta xây dựng một danh sách các phép biến đổi (transforms) và áp dụng chúng đồng thời nếu có.

Thêm các bộ lọc:

Blur: Thêm phép biến đổi GaussianBlur nếu giá trị blur lớn hơn 0.
Sharpen: Thêm phép biến đổi Sharpen nếu giá trị sharpen lớn hơn 0.
Brightness & Contrast: Sử dụng RandomBrightnessContrast để thay đổi độ sáng và độ tương phản.
Gaussian Noise: Thêm phép biến đổi GaussNoise nếu giá trị noise lớn hơn 0.

Áp dụng các biến đổi:

Sử dụng A.Compose để kết hợp tất cả các biến đổi trong danh sách và áp dụng chúng vào hình ảnh.

Với những thay đổi này, hàm transform_image giờ có thể xử lý nhiều phép biến đổi và bộ lọc khác nhau dựa trên các tham số từ payload.

Value error, Blur limit must be 0 or odd. Got: (0, 8)

Lỗi này xảy ra vì GaussianBlur trong Albumentations yêu cầu giá trị của blur_limit phải là số lẻ hoặc bằng 0. Khi bạn chỉ định một giá trị như (0, 8), có thể một số giá trị trong khoảng đó không phải là số lẻ, hoặc giá trị là 0 mà vẫn không hợp lệ trong một số trường hợp.

Để khắc phục lỗi này, bạn cần đảm bảo rằng giá trị blur_limit luôn là số lẻ hoặc 0. Dưới đây là cách chỉnh sửa để đảm bảo điều đó:

Chuyển giá trị blur thành số lẻ:Nếu giá trị blur là số chẵn và khác 0, ta có thể làm tròn nó thành số lẻ gần nhất.
Nếu giá trị blur là số chẵn và khác 0, ta có thể làm tròn nó thành số lẻ gần nhất.
Thay đổi mã nguồn để xử lý các giá trị của blur_limit đúng cách.

Chuyển giá trị blur thành số lẻ:

Nếu giá trị blur là số chẵn và khác 0, ta có thể làm tròn nó thành số lẻ gần nhất.

Thay đổi mã nguồn để xử lý các giá trị của blur_limit đúng cách.

Dưới đây là mã nguồn cập nhật cho hàm transform_image:

from flask import request, jsonify
import os
import cv2
import matplotlib.pyplot as plt
import albumentations as A
import numpy as np

@main.route('/api/transform', methods=['POST'])
def transform_image():
    # Lấy toàn bộ payload từ yêu cầu
    data = request.json

    # Xử lý các thông tin cơ bản
    transform_type = data.get('transform')
    image_path = data.get('image_path')
    params = data.get('params', {})

    if not image_path or not os.path.exists(image_path):
        return jsonify({"error": "Invalid image path"}), 400

    # Lấy giá trị từ params
    p = params.get('p', 1.0)
    limit = params.get('limit', 90)
    blur = params.get('blur', 0)
    sharpen = params.get('sharpen', 0)
    brightness = params.get('brightness', 1.0)
    contrast = params.get('contrast', 1.0)
    noise = params.get('noise', 0)

    # Đọc và xử lý ảnh
    image = cv2.imread(image_path)
    image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)

    # Tạo danh sách các phép biến đổi
    transforms = []

    if transform_type == 'horizontal_flip':
        transforms.append(A.HorizontalFlip(p=p))
    elif transform_type == 'vertical_flip':
        transforms.append(A.VerticalFlip(p=p))
    elif transform_type == 'rotate_90':
        transforms.append(A.Rotate(limit=(limit, limit), p=p))
    
    # Thêm các bộ lọc và biến đổi bổ sung
    if blur > 0:
        # Đảm bảo blur_limit luôn là số lẻ hoặc 0
        blur_limit = (blur, blur) if blur % 2 == 1 else (blur - 1, blur - 1)
        transforms.append(A.GaussianBlur(blur_limit=blur_limit, p=1.0))
    if sharpen > 0:
        transforms.append(A.Sharpen(p=1.0))
    if brightness != 1.0 or contrast != 1.0:
        transforms.append(A.RandomBrightnessContrast(brightness_limit=(brightness-1, brightness-1), contrast_limit=(contrast-1, contrast-1), p=1.0))
    if noise > 0:
        transforms.append(A.GaussNoise(var_limit=(noise, noise), p=1.0))

    # Áp dụng tất cả các phép biến đổi
    if transforms:
        transform = A.Compose(transforms)
        augmented = transform(image=image)
        image = augmented['image']

    # Lưu ảnh đã xử lý vào thư mục processed_images
    processed_image_path = os.path.join(PROCESSED_FOLDER, 'processed_image.jpg')
    plt.imsave(processed_image_path, image)

    return jsonify({"message": "Image transformed successfully", "processed_image_path": processed_image_path}), 200

Giải thích:

Chỉnh sửa blur_limit:Nếu blur là số chẵn và khác 0, ta giảm nó đi 1 để đảm bảo blur_limit là số lẻ. Ví dụ: nếu blur là 8, nó sẽ được chuyển thành (7, 7).
Nếu blur là số chẵn và khác 0, ta giảm nó đi 1 để đảm bảo blur_limit là số lẻ. Ví dụ: nếu blur là 8, nó sẽ được chuyển thành (7, 7).
Áp dụng các biến đổi và bộ lọc:Các phần khác của mã nguồn vẫn như cũ, đảm bảo rằng các phép biến đổi được áp dụng đúng cách.
Các phần khác của mã nguồn vẫn như cũ, đảm bảo rằng các phép biến đổi được áp dụng đúng cách.

Chỉnh sửa blur_limit:

Nếu blur là số chẵn và khác 0, ta giảm nó đi 1 để đảm bảo blur_limit là số lẻ. Ví dụ: nếu blur là 8, nó sẽ được chuyển thành (7, 7).

Áp dụng các biến đổi và bộ lọc:

Các phần khác của mã nguồn vẫn như cũ, đảm bảo rằng các phép biến đổi được áp dụng đúng cách.

Với thay đổi này, bạn sẽ tránh được lỗi liên quan đến giá trị không hợp lệ của blur_limit.