8000 Update homepage.html · signalarun/python-docs-samples@fe25152 · GitHub
[go: up one dir, main page]
Skip to content

Commit fe25152

Browse files
signalarunsignalarun
authored
Update homepage.html
Added bootstrap support support, upload file size limit.
1 parent efe5e78 commit fe25152

File tree

1 file changed

+116
-15
lines changed

1 file changed

+116
-15
lines changed

‎codelabs/flex_and_vision/templates/homepage.html

Lines changed: 116 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,121 @@
1-
<h1>Google Cloud Platform - Face Detection Sample</h1>
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<!-- Required meta tags -->
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
27

3-
<p>This Python Flask application demonstrates App Engine Flexible, Google Cloud
4-
Storage, Datastore, and the Cloud Vision API.</p>
8+
<!-- Bootstrap CSS -->
9+
<link rel="stylesheet" href="/static/bootstrap.min.css">
10+
11+
<title>Google Cloud Platform - Face Detection Sample</title>
12+
</head>
13+
<body>
14+
15+
16+
<div class="pos-f-t sticky-top">
17+
<div class="collapse" id="navbarToggleExternalContent">
18+
<div class="bg-light p-4">
19+
<h5 class="text-dark h4">Happiness Level</h5>
20+
<h1 class="text-muted">Google Cloud Platform - Face Detection Sample</h1>
21+
<p class="text-muted">This Python Flask application demonstrates App Engine Flexible, Google Cloud
22+
Storage, Datastore, and the Cloud Vision API.</p>
23+
<span class="text-muted">This webapp predicts happiness level of face from the uploaded photo.Enjoy predicting!</span>
24+
</div>
25+
</div>
26+
<nav class="navbar sticky-top navbar-dark bg-primary">
27+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
28+
<span class="navbar-toggler-icon"></span>
29+
</button>
30+
<span class="navbar-brand mb-0 h1">Happiness Level</span>
31+
32+
</nav>
33+
</div>
34+
35+
36+
37+
38+
<!--
39+
<nav class="navbar sticky-top navbar-dark bg-primary">
40+
<row>
41+
<div class="mx-auto" style="width: 200px;">
42+
<span class="navbar-brand mb-0 h1">Happiness Level</span>
43+
</div>
44+
</row>
45+
</nav> -->
46+
<!-- <h4>This Python Flask application demonstrates App Engine Flexible, Google Cloud
47+
Storage, Datastore, and the Cloud Vision API.</h4> -->
548

649
<br>
750

8-
<html>
9-
<body>
10-
<form action="upload_photo" method="POST" enctype="multipart/form-data">
11-
Upload File: <input type="file" name="file"><br>
12-
<input type="submit" name="submit" value="Submit">
13-
</form>
14-
{% for image_entity in image_entities %}
15-
<img src="{{image_entity['image_public_url']}}" width=200 height=200>
16-
<p>{{image_entity['blob_name']}} was uploaded {{image_entity['timestamp']}}.</p>
17-
<p>Joy Likelihood for Face: {{image_entity['joy']}}</p>
18-
{% endfor %}
51+
52+
<div class="container">
53+
54+
55+
<div class="row border border-primary m-1">
56+
<div class="col ">
57+
<form class="p-1" action="upload_photo" method="POST" enctype="multipart/form-data">
58+
<div class="form-group">
59+
Upload Photo: <input id="file" type="file" accept="image/*" name="file" onchange="Filevalidation()"><br>
60+
</div>
61+
62+
<!-- <input type="file" accept="image/*" class="btn btn-primary mb-2" name="submit" value="Submit"> -->
63+
<button id="upload_button" type="submit" class="btn btn-primary mb-2">Confirm identity</button>
64+
</form>
65+
</div>
66+
</div>
67+
68+
<br>
69+
70+
{% for image_entity in image_entities %}
71+
<div class="row m-2">
72+
<div class="card">
73+
<img class="card-img-top img-thumbnail" src="{{image_entity['image_public_url']}}" alt="Card image cap">
74+
<div class="card-body">
75+
<h5 class="card-title">Joy Likelihood</h5>
76+
<p class="card-text badge badge-success"> {{image_entity['joy']}}</p>
77+
</div>
78+
<div class="card-footer">
79+
<small class="text-muted">{{image_entity['blob_name']}} was uploaded {{image_entity['timestamp']}}</small>
80+
</div>
81+
</div>
82+
</div>
83+
84+
{% endfor %}
85+
86+
</div>
87+
88+
<script>
89+
Filevalidation = () => {
90+
const fi = document.getElementById('file');
91+
const uploadButton = document.getElementById("upload_button");
92+
// Check if any file is selected.
93+
if (fi.files.length > 0) {
94+
for (const i = 0; i <= fi.files.length - 1; i++) {
95+
96+
const fsize = fi.files.item(i).size;
97+
const file = Math.round((fsize / 1024));
98+
// The size of the file.
99+
if (file >= 4096) {
100+
alert("File too Big, please select a file less than 4mb");
101+
uploadButton.disabled = true;
102+
} /*else if (file < 2048) {
103+
alert(
104+
"File too small, please select a file greater than 2mb");
105+
uploadButton.disabled = true
106+
} */else {
107+
uploadButton.disabled = false;
108+
document.getElementById('size').innerHTML = '<b>'
109+
+ file + '</b> KB';
110+
}
111+
}
112+
}
113+
}
114+
</script>
115+
<!-- Optional JavaScript -->
116+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
117+
<script src="/static/jquery-3.2.1.slim.min.js"></script>
118+
<script src="/static/popper.min.js"></script>
119+
<script src="/static/bootstrap.min.js"></script>
19120
</body>
20-
</html>
121+
</html>

0 commit comments

Comments
 (0)
8C
0