img_classifier_fastapi_docker/index.html at master · mz2300/img_classifier_fastapi_docker · GitHub

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Classifier</title>
</head>

<body>
    <input type = 'file' id = 'imageInput' accept="image/*">
    <br><br>
    <img id="preview" src="#" alt="Image Preview" style="max-width: 300px; display: none;">
    <br><br>
    <button onclick="uploadImage()">Classify</button>
    <p id = 'predictionResults'></p>

    <script type = 'text/javascript'>
        <!-- A change event listener on the file input that reads the selected file and sets it as the image's src using FileReader. -->
        document.getElementById('imageInput').addEventListener('change', function(event) {
                    const file = event.target.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const preview = document.getElementById('preview');
                            preview.src = e.target.result;
                            preview.style.display = 'block';
                        };
                        reader.readAsDataURL(file);

                        document.getElementById('predictionResults').textContent = '';
                    }
                });

        async function uploadImage() {
            const input = document.getElementById('imageInput');
            if (!input.files[0]){
                alert('Please select an image file first!');
                return;
            }

            const file = input.files[0]
            const formData = new FormData();
            formData.append('file', file);

            try {
                const response = await fetch('http://localhost:8080/predict-image/', {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();
                console.log(result)
                document.getElementById('predictionResults').innerHTML = `Prediction:<br>${result.predictions}`;
            } catch (error) {
                console.error('Error:', error);
                alert('FAILED');

            }
        }
    </script>

</body>
</html>