File size: 1,240 Bytes
7982e98
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cartoonize Image</title>
</head>
<body>
    <h1>Cartoonize Image</h1>
    <form action="/cartoonize/" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <button type="submit">Upload & Cartoonize</button>
    </form>
    <h2>Result:</h2>
    <img id="cartoonized_image" src="" alt="Cartoonized Image">
    
    <script>
        const form = document.querySelector('form');
        const img = document.getElementById('cartoonized_image');

        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const formData = new FormData(form);
            const response = await fetch('/cartoonize/', {
                method: 'POST',
                body: formData
            });
            
            if (response.ok) {
                const blob = await response.blob();
                const imgUrl = URL.createObjectURL(blob);
                img.src = imgUrl;
            } else {
                alert('Failed to cartoonize image.');
            }
        });
    </script>
</body>
</html>