-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
153 lines (129 loc) · 7.42 KB
/
index.html
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-F2WKVJJBPQ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-F2WKVJJBPQ');
</script>
<title>SRPNet</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/materialize.min.css"/>
<link rel="stylesheet" href="css/custom_css.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>-->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.3.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nicolaspanel/numjs@0.15.1/dist/numjs.min.js"></script>
<script src="js/materialize.min.js"></script>
</head>
<body>
<nav class="white navbar-transition cool-navbar z-depth-0 text-darken-1" style="padding-right: 200px !important;">
<div class="nav-wrapper" style="color:black ! important;">
<!-- header and button class -->
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a onclick="modalInfo()">How to use it</a></li>
<li><a onclick="modalAbout()">About</a></li>
<li><a href="https://github.com/soilwater/srpnet">GitHub</a></li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li><a onclick="modalInfo()">How to use it</a></li>
<li><a onclick="modalAbout()">About</a></li>
<li><a href="https://github.com/soilwater/srpnet">GitHub</a></li>
<!-- <li><a class="btn-floating btn-large waves-effect waves-light" onclick="modalInfo()"><i class="material-icons ">info</i> info</a></li> -->
</ul>
<div class="header_wrapper center-align">
<div class="row">
<h1 id="heading" ><B>SRP</B>Net</h1>
<p class="job-view"> Web app for quantifying soil, residue, and plant cover using a convolutional neural network</p>
</div>
<div class = "row file-field input-field ">
<div id="upload_btn_wrapper_div" class = "btn center-align">
<span>Upload</span>
<input id="filePhoto" onchange="uploadImage(this)" type="file" onclick="gtag('event', 'click', {'event_category': 'button', 'event_label': 'uploads'});"/>
</div>
</div>
</div>
<div class="container">
<br><br>
<div id="result_values" class="result_values row" style="display: none !important;">
<div class="col l4 m4 s4" style="padding-right: 0px">
<div id="soil-box"> Soil: <span id="soil-value"></span>%</div>
</div>
<div class="col l4 m4 s4" style="padding-right: 0px">
<div id="residue-box"> Residue: <span id="residue-value"></span>%</div>
</div>
<div class="col l4 m4 s4" style="padding-right: 0px">
<div id="canopy-box"> Canopy: <span id="canopy-value"></span>%</div>
</div>
</div>
<div id="landing">
<img src="img/landing.png" style="width: 100%;">
</div>
<div id="result_images" class="row" style="display: none !important;">
<!-- original image colomn -->
<div class="col l6 m12 s12">
<img id="previewHolder" alt="Uploaded Image Preview Holder" width="512px" height="512px" style="display: none;" />
<a id="download_original_image" download="original_capture.png" href="data:image/png;base64,asdasd...">Download original image</a>
</div>
<!-- classified image coloumn-->
<div id="result_div" class="col l6 m12 s12">
<a id="download_predicted_image" download="prediction.png" href="data:image/png;base64,asdasd...">Download classified image</a>
</div>
</div>
</div> <!-- END div-container -->
</body>
<!-- Modal Structure -->
<div id="modal_info" class="modal">
<div class="modal-content">
<h4>Instructions</h4>
<p>Open the SRPNet web-app and either load an image located in your file system or
snap a photo using a mobile device.
</p>
<p>
Downward-facing images should be collected at about 1.0 to 1.5 meters (about 3 to 5 feet) from the ground and should
only contain bare soil, crop residue, and/or live vegetation. Avoid including in the image extraneous objects like
shoes, tripod legs, marking flags, etc.
</p>
<p>
The SRPNet will automatically classify and display the percentage of bare soil (brown), crop residue (yellow), and live vegetation (green).
During the classification process, the application converts the original and the classified images into a square 512 by 512 pixel resolution that can be downloaded for your records.
</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<!-- Modal Structure -->
<div id="modal_about" class="modal">
<div class="modal-content">
<h4>About</h4>
<p> SRPNet is a web application for digital image processing based on a convolutional deep neural network using the technique
of pixel-wise semantic segmentation. The research behind the SRPNet was conducted by the Soil Water Processes group located within the
Department of Agronomy at Kansas State University. Our goal is to provide a tool to characterize the land cover of agricutlural fields
to help conservation planners, farmers, ranchers, forest producers, and researchers making better decisions to improve soil health and
conserve soil and water resources. Accurately quantifying the proportion of each component covering the soil surface is an essential
step towards implementing improved management strategies for building soil health and improving soil and water conservation.
</p>
<h6><b>Team</b></h6>
<p>Dishan Nahitiya - Master student in the Department of Computer Science - Kansas State Universtiy</p>
<p>Mohammad Bisheh - Doctoral student in the Department of Industrial Engineering - Kansas State Universtiy</p>
<p>Andres Patrignani - Assistant Professor in Soil Water Processes - Department of Agronomy - Kansas State Universtiy</p>
<h6><b>Contact</b></h6>
For feedback or error reporting please contact andrespatrignani@ksu.edu
<h6><b>Support</b></h6>
This research was supported by the USDA NRCS Kansas Conservation Innovation Grant and NSF EPSCoR awards.
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<script src="./SRPNet.js"></script>