Hugging Face's logo

Spaces:
SudiptaKumar
/
object_detection
Paused

App Files Community
Sudipta Nayak commited on
Commit
e3a0233
·
1 Parent(s): 15767d8

Code changes for displaying BB thickness more + Loading icon

Browse files
Files changed (3) hide show
  1. app/templates/index.html +33 -1
  2. app/templates/result.html +34 -1
  3. app/utils/plots.py +1 -1
app/templates/index.html CHANGED
@@ -5,13 +5,45 @@
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Object Detection App</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
  <body>
10
  <h1>Object Detection App</h1>
11
- <form action="/detect/" method="post" enctype="multipart/form-data">
12
  <label for="file">Upload an Image or Video :</label>
13
  <input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .mp4" required>
14
  <button type="submit">Detect</button>
15
  </form>
 
16
  </body>
17
  </html>
 
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Object Detection App</title>
8
+ <style>
9
+ body {
10
+ display: flex;
11
+ flex-direction: column;
12
+ align-items: center;
13
+ justify-content: center;
14
+ height: 100vh;
15
+ margin: 0;
16
+ }
17
+
18
+ h1 {
19
+ margin-bottom: 20px;
20
+ }
21
+
22
+ #loading {
23
+ display: none;
24
+ }
25
+
26
+ #output {
27
+ max-width: 100%;
28
+ height: auto;
29
+ display: none; /* Initially hidden until loaded */
30
+ }
31
+ </style>
32
+ <script type="text/javascript">
33
+ document.getElementById("loading").style.display = "none"; // Hide the loading icon
34
+ // Function to show loading icon while waiting for response
35
+ function showLoading() {
36
+ document.getElementById("loading").style.display = "block";
37
+ }
38
+ </script>
39
  </head>
40
  <body>
41
  <h1>Object Detection App</h1>
42
+ <form action="/detect/" method="post" enctype="multipart/form-data" onsubmit="showLoading();">
43
  <label for="file">Upload an Image or Video :</label>
44
  <input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .mp4" required>
45
  <button type="submit">Detect</button>
46
  </form>
47
+ <div id="loading">Loading...</div>
48
  </body>
49
  </html>
app/templates/result.html CHANGED
@@ -5,20 +5,53 @@
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Object Detection Result</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  <script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
9
  <script type="text/javascript">
10
  function onOpenCvReady() {
11
  document.getElementById("output").src = "{{ output_image }}";
 
 
 
 
 
 
 
12
  }
13
  </script>
14
  </head>
15
  <body>
16
  <h1>Object Detection Result</h1>
17
- <form action="/detect/" method="post" enctype="multipart/form-data">
18
  <label for="file">Upload an Image or Video :</label>
19
  <input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .mp4" required>
20
  <button type="submit">Detect</button>
21
  </form>
 
 
22
  <img id="output"/>
23
  </body>
24
  </html>
 
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Object Detection Result</title>
8
+ <style>
9
+ body {
10
+ display: flex;
11
+ flex-direction: column;
12
+ align-items: center;
13
+ justify-content: center;
14
+ height: 100vh;
15
+ margin: 0;
16
+ }
17
+
18
+ h1 {
19
+ margin-bottom: 20px;
20
+ }
21
+
22
+ #loading {
23
+ display: none;
24
+ }
25
+
26
+ #output {
27
+ max-width: 100%;
28
+ height: auto;
29
+ display: none; /* Initially hidden until loaded */
30
+ }
31
+ </style>
32
  <script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
33
  <script type="text/javascript">
34
  function onOpenCvReady() {
35
  document.getElementById("output").src = "{{ output_image }}";
36
+ document.getElementById("loading").style.display = "none"; // Hide the loading icon
37
+ document.getElementById("output").style.display = "block"; // Show the output image
38
+ }
39
+
40
+ // Function to show loading icon while waiting for response
41
+ function showLoading() {
42
+ document.getElementById("loading").style.display = "block";
43
  }
44
  </script>
45
  </head>
46
  <body>
47
  <h1>Object Detection Result</h1>
48
+ <form action="/detect/" method="post" enctype="multipart/form-data" onsubmit="showLoading();">
49
  <label for="file">Upload an Image or Video :</label>
50
  <input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .mp4" required>
51
  <button type="submit">Detect</button>
52
  </form>
53
+ <br/>
54
+ <div id="loading">Loading...</div>
55
  <img id="output"/>
56
  </body>
57
  </html>
app/utils/plots.py CHANGED
@@ -486,4 +486,4 @@ def plot_skeleton_kpts(im, kpts, steps, orig_shape=None):
486
  continue
487
  if pos2[0] % 640 == 0 or pos2[1] % 640 == 0 or pos2[0]<0 or pos2[1]<0:
488
  continue
489
- cv2.line(im, pos1, pos2, (int(r), int(g), int(b)), thickness=2)
 
486
  continue
487
  if pos2[0] % 640 == 0 or pos2[1] % 640 == 0 or pos2[0]<0 or pos2[1]<0:
488
  continue
489
+ cv2.line(im, pos1, pos2, (int(r), int(g), int(b)), thickness=3)