Skip to content

Commit 2ca1614

Browse files
Shree987Shree987
committed
Improved UI
1 parent bc8d8b9 commit 2ca1614

10 files changed

+119
-58
lines changed

‎app.py

+18-8
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
MODEL = 'densenet'
99

1010
app = Flask(__name__)
11+
app.secret_key = b'_5ef8t202w@$Trz\n\xec]/'
1112
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
1213

1314

@@ -32,19 +33,28 @@ def upload_file():
3233

3334
# Input and Output filenames
3435
input_filename = './static/input.png'
35-
output_filename = './static/output.png'
3636

37-
# Run inference.py
38-
script_command = f'python3 inference.py -d {input_filename} -o {output_filename} -be {MODEL}'
39-
os.system(script_command)
37+
38+
models = request.form.getlist('model')
39+
if models == []:
40+
flash('No ML model selected')
41+
return redirect(request.url)
42+
43+
MODELS = ['resnet18', 'resnet34', 'resnet50', 'resnet101', 'resnet152', 'densenet']
44+
model_dict = {}
45+
for MODEL in MODELS:
46+
if MODEL in models:
47+
model_dict[MODEL] = True
48+
# Run inference.py
49+
script_command = f'python3 inference.py -d {input_filename} -o ./static/output_{MODEL}.png -be {MODEL}'
50+
os.system(script_command)
51+
else:
52+
model_dict[MODEL] = False
4053

4154
# Add dummy values to image path to avoid HTML Image caching
4255
suffix = "?" + datetime.now().strftime("%m/%d/%Y, %H:%M:%S")
43-
print("Suffix = ", suffix, type(suffix))
44-
input_filename += suffix
45-
output_filename += suffix
4656

47-
return render_template('display.html', inputImage = input_filename, outputImage = output_filename)
57+
return render_template('display.html', suffix = suffix, model_dict = model_dict)
4858
return render_template('home.html')
4959

5060

‎static/input.png

310 KB
Loading

‎static/output_densenet.jpeg

152 KB
Loading

‎static/output_resnet101.jpeg

453 KB
Loading

‎static/output_resnet152.jpeg

174 KB
Loading

‎static/output_resnet18.jpeg

152 KB
Loading

‎static/output_resnet34.jpeg

129 KB
Loading

‎static/output_resnet50.jpeg

113 KB
Loading

‎templates/display.html

+65-38
Original file line numberDiff line numberDiff line change
@@ -11,62 +11,89 @@
1111
}
1212
body {
1313
background-image: url('./static/bg_image.jpeg');
14+
background-repeat: repeat;
1415
}
16+
.checkboxes label {
17+
display: block;
18+
padding-right: 10px;
19+
padding-left: 22px;
20+
text-indent: -22px;
21+
}
22+
.checkboxes input {
23+
vertical-align: middle;
24+
}
25+
.checkboxes label span {
26+
vertical-align: middle;
27+
}
1528
</style>
1629

1730
<!-- Bootstrap CSS -->
1831
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
19-
32+
<br>
2033
<title>Human Parsing Representation Extractor</title>
2134
</head>
2235
<body>
2336
<br>
2437
<h2 style="text-align:center">Upload Successful!</h2><br><br>
2538

26-
<div id="available" style="display:none">
39+
<div id="available" style="display:block">
2740
<h3 style="text-align:center">Input Image</h2>
2841
<div align="center">
29-
<img src="{{ inputImage }}" height="400" width="400" alt="User Input image"></div><br><br><br>
30-
<h3 style="text-align:center">Output Image</h2>
31-
<div align="center">
32-
<img src="{{ outputImage }}" height="400" width="400" alt="Final Predicted image"><br>
33-
34-
<br><br><br>
35-
<h3>Colour Classes</h3>
36-
<p><!-- List all classes with corresponding colour--></p>
37-
</div>
38-
<div id="unavailable" style="display:none">
39-
<p style="text-align:center">
40-
Some error ocurred. Kindly try again!
41-
</p>
42+
<img src="./static/input.png{{ suffix }}" height="400" width="400" alt="User Input image"></div><br><br><br>
43+
<h3 style="text-align:center">Output Images</h2><br>
44+
<div align="center">
45+
{% if model_dict['resnet18'] %}
46+
<div class="container">
47+
<h4> ResNet18 prediction<h4>
48+
<img src="./static/output_resnet18.jpeg{{ suffix }}" height="200" width="200" alt="Final Predicted image"><br><br>
49+
</div>
50+
{% endif %}
51+
52+
53+
{% if model_dict['resnet34'] %}
54+
<div class="container">
55+
<h4> ResNet34 prediction<h4>
56+
<img src="./static/output_resnet34.jpeg{{ suffix }}" height="200" width="200" alt="Final Predicted image"><br><br>
57+
</div>
58+
{% endif %}
59+
60+
61+
{% if model_dict['resnet50'] %}
62+
<div class="container">
63+
<h4> ResNet50 prediction<h4>
64+
<img src="./static/output_resnet50.jpeg{{ suffix }}" height="200" width="200" alt="Final Predicted image"><br><br>
65+
</div>
66+
{% endif %}
67+
68+
69+
{% if model_dict['resnet101'] %}
70+
<div class="container">
71+
<h4> ResNet101 prediction<h4>
72+
<img src="./static/output_resnet101.jpeg{{ suffix }}" height="200" width="200" alt="Final Predicted image"><br><br>
73+
</div>
74+
{% endif %}
75+
76+
77+
{% if model_dict['resnet152'] %}
78+
<div class="container">
79+
<h4> ResNet152 prediction<h4>
80+
<img src="./static/output_resnet152.jpeg{{ suffix }}" height="200" width="200" alt="Final Predicted image"><br><br>
81+
</div>
82+
{% endif %}
83+
84+
85+
{% if model_dict['densenet'] %}
86+
<div class="container">
87+
<h4> DenseNet prediction<h4>
88+
<img src="./static/output_densenet.jpeg{{ suffix }}" height="200" width="200" alt="Final Predicted image"><br><br>
89+
</div>
90+
{% endif %}
4291
</div>
92+
4393
<br>
4494
<div class="text-center">
4595
<a class="btn btn-primary text-center" href="/" role="button">Go back</a><br><br>
4696
</div>
47-
<script type="text/javascript">
48-
fetch('./static/output.png', { method: 'HEAD' })
49-
.then(res => {
50-
if (res.ok) {
51-
fetch('./static/input.png', { method: 'HEAD' })
52-
.then(res => {
53-
if (res.ok) {
54-
document.getElementById('available').style.display = "block";
55-
document.getElementById('unavailable').style.display = "none";
56-
} else {
57-
alert("Input image is unavailable!")
58-
document.getElementById('unavailable').style.display = "block";
59-
document.getElementById('available').style.display = "none";
60-
}
61-
}).catch(err => alert('Error:', err));
62-
} else {
63-
alert("Output image is unavailable!")
64-
document.getElementById('unavailable').style.display = "block";
65-
document.getElementById('available').style.display = "none";
66-
}
67-
}).catch(err => alert('Error:', err));
68-
</script>
69-
7097

7198
<!-- Option 1: Bootstrap Bundle with Popper -->
7299
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

‎templates/home.html

+36-12
Original file line numberDiff line numberDiff line change
@@ -11,35 +11,59 @@
1111
}
1212
body {
1313
background-image: url('./static/bg_image.jpeg');
14+
background-repeat: repeat;
1415
}
1516
</style>
16-
1717
<!-- Bootstrap CSS -->
1818
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
1919

20+
{% with messages = get_flashed_messages() %}
21+
{% if messages %}
22+
<br><br><br>
23+
<div class="container">
24+
{% for message in messages %}
25+
<div class="alert alert-warning alert-dismissible" align="center">
26+
<strong>Warning! </strong> {{message}}!
27+
<a href="/" class="close" data-dismiss="alert" aria-label="close">&times;</a>
28+
</div>
29+
{% endfor %}
30+
</div>
31+
{% endif %}
32+
{% endwith %}
33+
34+
2035
<title>Human Parsing Representation Extractor</title>
2136
</head>
2237
<body>
2338
<h2 style="text-align:center">Human Parsing Representation Extractor WebApp</h2><br><br><br><br><br>
2439
<div class="text-center">
25-
<h4>Upload new File</h4>
26-
<div class="container" align="center">
27-
<form method=post enctype=multipart/form-data>
28-
<div class="upload" align="center">
40+
<form class="inputForm" method=post enctype=multipart/form-data>
41+
<h4>Upload new File</h4><br>
42+
<div class="container" align="center">
43+
<div class="upload" align="center">
2944
<input class="form-control" id="formFileLg" type=file name=file required><br>
30-
<input class="btn btn-primary btn-lg" type="submit" value="Upload">
31-
</div>
32-
</form>
33-
</div>
34-
</div>
45+
</div></div><br><br><br>
46+
3547

36-
48+
<h4>Select one or more ML models for prediction</h4>
49+
<div class="container" align="center">
50+
<div class="Models required" align="center" style="font-size: 20px;">
51+
<input type=checkbox name=model value='resnet18'> ResNet - 18 <br/>
52+
<input type=checkbox name=model value='resnet34'> ResNet - 34 <br/>
53+
<input type=checkbox name=model value='resnet50'> ResNet - 50 <br/>
54+
<input type=checkbox name=model value='resnet101'> ResNet - 101 <br/>
55+
<input type=checkbox name=model value='resnet154'> ResNet - 154 <br/>
56+
<input type=checkbox name=model value='densenet'> DenseNet <br/>
57+
</div><br><br><br>
58+
<input class="btn btn-primary btn-lg" type="submit" value="Upload and Submit">
59+
</form>
60+
</div>
61+
3762

3863
<!-- Optional JavaScript; choose one of the two! -->
3964

4065
<!-- Option 1: Bootstrap Bundle with Popper -->
4166
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
42-
4367
<!-- Option 2: Separate Popper and Bootstrap JS -->
4468
<!--
4569
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>

0 commit comments

Comments
 (0)