-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (92 loc) · 4.09 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
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Skin Lesion Analyzer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Use the power of Machine Learning to diagnose Skin Lesions.">
<!--CSS Stylesheets-->
<link rel="stylesheet" href="css/w3.css">
<link rel="stylesheet" href="css/skin.css">
<!--Link to Font Awesome icons-->
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.4.2/css/all.css' integrity='sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns' crossorigin='anonymous'>
<!--Link to fonts from google fonts-->
<link href="https://fonts.googleapis.com/css?family=Oswald:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="robotfavicon.png">
<style>
html,body,h2,h3,h4,p,h5,li {font-family: Roboto, sans-serif}
body {
background-image: url("./assets/777777774.svg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
</style>
</head>
<body class="bground-color" style="background-color: #9DF3C4;">
<!-- w3-content defines a container for fixed size centered content,
and is wrapped around the whole page content. -->
<div class="w3-content" style="max-width:960px">
<!-- 1. HOME PAGE -->
<div class="tabbed w3-animate-opacity" id="home">
<!-- Top Bar -->
<div class='w3-center'>
<p class="space-letters-large w3-medium w3-tag bground-color w3-text-teal w3-border w3-round">
<a class="change-size" href="faq.html"><b>About</b></a>
</div>
<!-- Front page image -->
<!-- This image will be replaced once the js code runs. -->
<div class="w3-center w3-padding-bottom">
<img id="selected-image" class="w3-round adjust-image" src="assets/samplepic.jpg" height="250" alt="Image for analysis">
</div>
<!-- Button -->
<div id="btnn" class="w3-center">
<button style="background-color: #62D2A2;" class="btn w3-btn w3-round w3-margin-bottom adjust-spacing btn-font w3-padding w3-space-letters w3-text-white" onclick="setTimeout(simulateClick.bind(null, 'image-selector'), 200)"><i class='fas fa-camera w3-padding-right' style='font-size:15px'></i>
<b>Skin Lesion Analyzer</b></button>
<!--<p class="w3-text-teal">jpeg or png</p>-->
</div>
<div class="w3-center">
<div class="progress-bar space-letters">
<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>
<p><b style="font-size: 25px;">Model is loading...</b></p></div>
</div>
<!-- Progress Bar
Just here for graphics.
The functionality was not implemented because it slows down the model download
and causes it to fail.-->
<div class="w3-light-grey side-margin w3-opacity">
<div id="myBar" class="w3-container w3-blue" style="height:5px;width:100%"></div>
</div>
<!-- Results Box -->
<div style="background-color: #1FAB89;" class="w3-center w3-border add-margin side-margin w3-round space-letters bottom-margin dont-break-out">
<p>Results</p>
<!-- Remember that an ordered or unordered list has tabs by default.
CSS is not styling the prediction outputs. The tabs you see are the default
tabs associated with lists.-->
<ol class='w3-left-align' style="background-color: #62D2A2;" id='prediction-list'></ol>
</div>
</div><!--END OF HOME PAGE-->
<!-- We simulate clicks on these two. -->
<div class="hide">
<button id='predict-button'>Predict</button>
</div>
<div class="hide">
<input id="image-selector" type="file" multiple>
</div>
<!--===================================-->
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Load TensorFlow.js
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.6.0/dist/tf.min.js">
</script>-->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.13.3/dist/tf.min.js">
</script>
<!-- Load the js files -->
<script src="jscript/target_classes.js"></script>
<script src="jscript/app_startup_code.js"></script>
<script src="jscript/app_batch_prediction_code.js"></script>
</div> <!-- w3-content -->
</body>
</html>