Hugging Face's logo

Spaces:
Timmyafolami
/
Weed-Detection-App
Runtime error

App Files Community
Timmyafolami commited on
Commit
8c5ab59
·
verified ·
1 Parent(s): 15c7eff

Upload 6 files

Browse files
Files changed (6) hide show
  1. static/app.html +25 -0
  2. static/index.html +40 -0
  3. static/scripts/app.js +63 -0
  4. static/scripts/index.js +39 -0
  5. static/styles/app.css +110 -0
  6. static/styles/index.css +86 -0
static/app.html ADDED
@@ -0,0 +1,25 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Weed Detection</title>
7
+ <link rel="stylesheet" href="/static/styles/app.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
9
+ </head>
10
+ <body>
11
+ <div class="container">
12
+ <h1>Weed Detection and Shapefile Creation</h1>
13
+ <div class="file-upload">
14
+ <input type="file" id="fileInput" accept=".tif">
15
+ <label for="fileInput" class="file-label"><i class="fas fa-upload"></i> Choose a GeoTIFF file</label>
16
+ </div>
17
+ <button class="button" id="uploadButton">Upload and Detect</button>
18
+ <div class="progress" id="uploadProgress">
19
+ <div class="progress-bar" id="uploadProgressBar">0%</div>
20
+ </div>
21
+ <div id="message"></div>
22
+ </div>
23
+ <script src="/static/scripts/app.js"></script>
24
+ </body>
25
+ </html>
static/index.html ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Weed Detection Registration</title>
7
+ <link rel="stylesheet" href="/static/styles/index.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
9
+ </head>
10
+ <body>
11
+ <div class="container">
12
+ <h1>Register to Use Weed Detection</h1>
13
+ <form id="registrationForm">
14
+ <div class="input-group">
15
+ <i class="fas fa-user"></i>
16
+ <input type="text" id="name" name="name" placeholder="Name" required>
17
+ </div>
18
+
19
+ <div class="input-group">
20
+ <i class="fas fa-envelope"></i>
21
+ <input type="email" id="email" name="email" placeholder="Email" required>
22
+ </div>
23
+
24
+ <div class="input-group">
25
+ <i class="fas fa-phone"></i>
26
+ <input type="tel" id="phone" name="phone" placeholder="Phone Number" required>
27
+ </div>
28
+
29
+ <div class="input-group">
30
+ <i class="fas fa-home"></i>
31
+ <input type="text" id="address" name="address" placeholder="Address" required>
32
+ </div>
33
+
34
+ <button type="submit" class="button">Register</button>
35
+ </form>
36
+ <div id="message"></div>
37
+ </div>
38
+ <script src="/static/scripts/index.js"></script>
39
+ </body>
40
+ </html>
static/scripts/app.js ADDED
@@ -0,0 +1,63 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', () => {
2
+ const ws = new WebSocket('ws://127.0.0.1:8000/ws');
3
+
4
+ ws.onmessage = (event) => {
5
+ const messageDiv = document.getElementById('message');
6
+ messageDiv.innerHTML += `<p>${event.data}</p>`;
7
+ };
8
+
9
+ document.getElementById('uploadButton').addEventListener('click', async () => {
10
+ const fileInput = document.getElementById('fileInput');
11
+ if (fileInput.files.length === 0) {
12
+ alert('Please select a file to upload.');
13
+ return;
14
+ }
15
+
16
+ const file = fileInput.files[0];
17
+ const formData = new FormData();
18
+ formData.append('file', file);
19
+
20
+ const progressBar = document.getElementById('uploadProgressBar');
21
+ const progressContainer = document.getElementById('uploadProgress');
22
+ const messageDiv = document.getElementById('message');
23
+
24
+ progressContainer.style.display = 'block';
25
+ progressBar.style.width = '0%';
26
+ progressBar.textContent = '0%';
27
+ messageDiv.innerHTML = '';
28
+
29
+ try {
30
+ const response = await fetch('http://127.0.0.1:8000/upload_geotiff/', {
31
+ method: 'POST',
32
+ body: formData,
33
+ headers: {
34
+ 'Accept': 'application/json',
35
+ }
36
+ });
37
+
38
+ if (response.ok) {
39
+ progressBar.style.width = '50%';
40
+ progressBar.textContent = '50%';
41
+
42
+ const blob = await response.blob();
43
+ const url = window.URL.createObjectURL(blob);
44
+ const a = document.createElement('a');
45
+ a.style.display = 'none';
46
+ a.href = url;
47
+ a.download = 'weed_detections.zip';
48
+ document.body.appendChild(a);
49
+ a.click();
50
+ window.URL.revokeObjectURL(url);
51
+
52
+ progressBar.style.width = '100%';
53
+ progressBar.textContent = '100%';
54
+ messageDiv.innerHTML = '<p>Weed detection complete. <a href="' + url + '" download="weed_detections.zip">Download the shapefile ZIP</a></p>';
55
+ } else {
56
+ messageDiv.innerHTML = '<p>Error uploading file: ' + response.statusText + '</p>';
57
+ }
58
+ } catch (error) {
59
+ console.error('Error:', error);
60
+ messageDiv.innerHTML = '<p>Error: ' + error.message + '</p>';
61
+ }
62
+ });
63
+ });
static/scripts/index.js ADDED
@@ -0,0 +1,39 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', () => {
2
+ const registrationForm = document.getElementById('registrationForm');
3
+ if (registrationForm) {
4
+ registrationForm.addEventListener('submit', async (e) => {
5
+ e.preventDefault();
6
+
7
+ const name = document.getElementById('name').value;
8
+ const email = document.getElementById('email').value;
9
+ const phone = document.getElementById('phone').value;
10
+ const address = document.getElementById('address').value;
11
+
12
+ const userInfo = {
13
+ "Name": name,
14
+ "Email": email,
15
+ "Address": address,
16
+ "Phone Number": phone
17
+ };
18
+
19
+ const response = await fetch('/register', {
20
+ method: 'POST',
21
+ headers: {
22
+ 'Content-Type': 'application/json',
23
+ },
24
+ body: JSON.stringify(userInfo),
25
+ });
26
+
27
+ const messageDiv = document.getElementById('message');
28
+ if (response.ok) {
29
+ messageDiv.textContent = 'Registration successful! Redirecting to the application page...';
30
+ setTimeout(() => {
31
+ window.location.href = '/app';
32
+ }, 2000); // Redirects after 2 seconds
33
+ } else {
34
+ const error = await response.json();
35
+ messageDiv.textContent = `Registration failed: ${error.detail}`;
36
+ }
37
+ });
38
+ }
39
+ });
static/styles/app.css ADDED
@@ -0,0 +1,110 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: Arial, sans-serif;
3
+ margin: 0;
4
+ padding: 20px;
5
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
6
+ display: flex;
7
+ justify-content: center;
8
+ align-items: center;
9
+ height: 100vh;
10
+ color: #fff;
11
+ }
12
+
13
+ .container {
14
+ background: rgba(255, 255, 255, 0.1);
15
+ padding: 40px;
16
+ border-radius: 10px;
17
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
18
+ text-align: center;
19
+ width: 400px;
20
+ }
21
+
22
+ h1 {
23
+ margin-bottom: 20px;
24
+ color: #fff;
25
+ font-size: 24px;
26
+ }
27
+
28
+ .file-upload {
29
+ position: relative;
30
+ margin-bottom: 20px;
31
+ }
32
+
33
+ .file-upload input[type="file"] {
34
+ display: none;
35
+ }
36
+
37
+ .file-label {
38
+ display: inline-block;
39
+ padding: 10px 20px;
40
+ font-size: 16px;
41
+ cursor: pointer;
42
+ text-align: center;
43
+ text-decoration: none;
44
+ outline: none;
45
+ color: #fff;
46
+ background-color: #4CAF50;
47
+ border: none;
48
+ border-radius: 5px;
49
+ box-shadow: 0 5px #999;
50
+ transition: background-color 0.3s, box-shadow 0.3s;
51
+ }
52
+
53
+ .file-label:hover {
54
+ background-color: #3e8e41;
55
+ }
56
+
57
+ .file-label:active {
58
+ background-color: #3e8e41;
59
+ box-shadow: 0 3px #666;
60
+ transform: translateY(2px);
61
+ }
62
+
63
+ .button {
64
+ display: inline-block;
65
+ padding: 10px 20px;
66
+ font-size: 16px;
67
+ cursor: pointer;
68
+ text-align: center;
69
+ text-decoration: none;
70
+ outline: none;
71
+ color: #fff;
72
+ background-color: #4CAF50;
73
+ border: none;
74
+ border-radius: 5px;
75
+ box-shadow: 0 5px #999;
76
+ margin-top: 20px;
77
+ transition: background-color 0.3s, box-shadow 0.3s;
78
+ }
79
+
80
+ .button:hover {
81
+ background-color: #3e8e41;
82
+ }
83
+
84
+ .button:active {
85
+ background-color: #3e8e41;
86
+ box-shadow: 0 3px #666;
87
+ transform: translateY(2px);
88
+ }
89
+
90
+ .progress {
91
+ display: none;
92
+ width: 100%;
93
+ background-color: rgba(255, 255, 255, 0.2);
94
+ border-radius: 8px;
95
+ margin-top: 20px;
96
+ }
97
+
98
+ .progress-bar {
99
+ width: 0%;
100
+ height: 20px;
101
+ background-color: #4caf50;
102
+ border-radius: 8px;
103
+ text-align: center;
104
+ color: white;
105
+ }
106
+
107
+ #message {
108
+ margin-top: 20px;
109
+ color: #fff;
110
+ }
static/styles/index.css ADDED
@@ -0,0 +1,86 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: Arial, sans-serif;
3
+ margin: 0;
4
+ padding: 0;
5
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
6
+ display: flex;
7
+ justify-content: center;
8
+ align-items: center;
9
+ height: 100vh;
10
+ color: #fff;
11
+ }
12
+
13
+ .container {
14
+ background: rgba(255, 255, 255, 0.1);
15
+ padding: 40px;
16
+ border-radius: 10px;
17
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
18
+ text-align: center;
19
+ width: 400px;
20
+ }
21
+
22
+ h1 {
23
+ margin-bottom: 20px;
24
+ color: #fff;
25
+ font-size: 24px;
26
+ }
27
+
28
+ .input-group {
29
+ display: flex;
30
+ align-items: center;
31
+ margin-bottom: 20px;
32
+ border: 1px solid #ddd;
33
+ border-radius: 5px;
34
+ padding: 10px;
35
+ background-color: rgba(255, 255, 255, 0.2);
36
+ }
37
+
38
+ .input-group i {
39
+ margin-right: 10px;
40
+ color: #fff;
41
+ }
42
+
43
+ input {
44
+ border: none;
45
+ outline: none;
46
+ width: 100%;
47
+ padding: 10px;
48
+ background: none;
49
+ color: #fff;
50
+ font-size: 16px;
51
+ }
52
+
53
+ input::placeholder {
54
+ color: #ddd;
55
+ }
56
+
57
+ .button {
58
+ display: inline-block;
59
+ padding: 10px 20px;
60
+ font-size: 16px;
61
+ cursor: pointer;
62
+ text-align: center;
63
+ text-decoration: none;
64
+ outline: none;
65
+ color: #fff;
66
+ background-color: #4CAF50;
67
+ border: none;
68
+ border-radius: 5px;
69
+ box-shadow: 0 5px #999;
70
+ margin-top: 20px;
71
+ transition: background-color 0.3s, box-shadow 0.3s;
72
+ }
73
+
74
+ .button:hover {
75
+ background-color: #3e8e41;
76
+ }
77
+
78
+ .button:active {
79
+ background-color: #3e8e41;
80
+ box-shadow: 0 3px #666;
81
+ transform: translateY(2px);
82
+ }
83
+
84
+ #message {
85
+ margin-top: 20px;
86
+ }