Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Face Swap App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <input type="file" id="fileInput" accept="image/*">
    <button id="uploadButton">Upload Image</button>
    <canvas id="canvas"></canvas>
    <script src="script.js"></script>
</body>
</html>
const fileInput = document.getElementById('fileInput');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

fileInput.addEventListener('change', handleUpload);

function handleUpload(event) {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = function(event) {
        const img = new Image();
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            sendData(canvas.toDataURL('image/jpeg'));
        };
        img.src = event.target.result;
    };

    reader.readAsDataURL(file);
}

function sendData(imageData) {
    fetch('/process_image', {
        method: 'POST',
        body: JSON.stringify({ image_data: imageData }),
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        // Display processed image
    })
    .catch(error => console.error('Error:', error));
}
from flask import Flask, request, jsonify
import cv2

app = Flask(__name__)

@app.route('/process_image', methods=['POST'])
def process_image():
    data = request.json
    image_data = data['image_data'].split(',')[1]
    nparr = np.frombuffer(base64.b64decode(image_data), np.uint8)
    img = cv2.imdecode(nparr, cv2.IMREAD_COLOR)

    # Perform face swapping using OpenCV (not implemented here)

    # Convert processed image back to base64 string
    _, img_encoded = cv2.imencode('.jpg', img)
    img_base64 = base64.b64encode(img_encoded).decode('utf-8')

    return jsonify({'processed_image': img_base64})

if __name__ == '__main__':
    app.run(debug=True)
body {
    font-family: Arial, sans-serif;
}

input[type="file"], button {
    margin: 10px;
}

canvas {
    border: 1px solid black;
    display: block;
    margin: 10px auto;
}
Editor is loading...