File size: 2,324 Bytes
844cbc5
 
 
 
 
2e11f0f
844cbc5
 
2e11f0f
63419ab
2e11f0f
a65c154
d5122cb
 
c994fc3
844cbc5
 
c994fc3
2e11f0f
 
 
844cbc5
c994fc3
 
 
 
2e11f0f
 
 
c994fc3
2e11f0f
c994fc3
4371ebd
c994fc3
 
 
 
 
58fd8ff
c994fc3
 
 
 
 
 
 
 
2e11f0f
c994fc3
2e11f0f
844cbc5
c994fc3
 
 
 
 
 
 
 
 
 
844cbc5
 
 
d5122cb
 
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
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Captioning</title>
</head>
<body>
    <h1>Image Captioning</h1>
    <form id="uploadForm" action="/predict/" method="post" enctype="multipart/form-data">
        <label for="image">Upload Image:</label><br>
        <input type="file" id="image" name="image" accept="image/*"><br>
        <label for="context">Question:</label><br>
        <input type="text" id="context" name="context"><br>
        <button type="submit" id="submitBtn">Submit</button>
    </form>

    <div id="result" style="display: none;">
        <h2>Result:</h2>
        <p id="caption"></p>
    </div>

    <div id="loading" style="display: none;">
        <p>Loading...</p>
    </div>

    <script>
        document.getElementById('uploadForm').addEventListener('submit', async function(event) {
            event.preventDefault();
            showLoadingIndicator();
            let formData = new FormData(this);
            try {
                let response = await fetch('/get_caption', {
                    method: 'POST',
                    body: formData
                });
                if (response.ok) {
                    let result = await response.json();
                    document.getElementById('caption').innerText = result.caption;
                    document.getElementById('result').style.display = 'block';
                    hideLoadingIndicator();
                } else {
                    alert('An error occurred while processing the request.');
                    hideLoadingIndicator();
                }
            } catch (error) {
                console.error('An error occurred:', error);
                alert('An error occurred while processing the request.');
                hideLoadingIndicator();
            }
        });

        function showLoadingIndicator() {
            document.getElementById('loading').style.display = 'block';
            document.getElementById('submitBtn').disabled = true;
        }

        function hideLoadingIndicator() {
            document.getElementById('loading').style.display = 'none';
            document.getElementById('submitBtn').disabled = false;
        }
    </script>
</body>
</html>