File size: 1,521 Bytes
11e369d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html>
<head>
    <title>Image Captioning</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

<style>
.heading{
    font-weight: 100;
    font-size: 4em;
    text-shadow: 1px 1px 5px black;
}

img{
    height: 90%;
    width: 100%;
}

.text{
    font-size: 32px;
    font-style: italic;
}
</style>
</head>
<body>
    <div class="container">
        <div class="jumbotron">
            <div class="container">
                <h1 class="heading">Image Captioning</h1>
                <p> Upload your image to generate a caption...</p>
            </div>
        </div>

        <form class="form-inline" method='POST' action="/" enctype="multipart/form-data">
            <label><b> Image : &nbsp;&nbsp; </b></label>
            <input class='form-control' type="file" name="userfile" placeholder="Your image">
            <button type="submit" class="btn btn-primary"> Submit</button>
        </form>

        {% if your_result %}
            <div class="row">
                <div class="col-sm-4">
                    <img src="{{your_result['image']}}">
                </div>
                <div class="col-sm-8">
                    <p class="text"> Generated Caption : </p>
                    <p><b> {{ your_result['caption'] }}</b></p>
                </div>
            </div>
        {% endif %}
    </div>
</body>
</html>