-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
168 lines (94 loc) · 4.06 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
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tuberclosis Analyzer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Ai powered web app to diagnose TB from chest x-rays.">
<!--CSS Stylesheets-->
<link rel="stylesheet" href="css/w3.css">
<link rel="stylesheet" href="css/tb.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}
</style>
</head>
<body class="bground-color">
<!-- 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 w3-white" id="home">
<!-- Top Bar -->
<div class='w3-center'>
<p class="space-letters-large w3-small 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/tb_image.jpg" height="250" alt="Image for analysis">
</div>
<!-- Button -->
<div id="btnn" class="w3-center">
<button class="w3-btn w3-deep-orange w3-hover-blue 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>tuberclosis Analyzer</b></button>
<!--<p class="w3-text-teal">jpeg or png</p>-->
</div>
<div class="w3-center">
<div class="progress-bar w3-text-teal space-letters">
<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>
<p>Model is loading...</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 class="w3-center w3-border add-margin side-margin w3-round w3-sand
text-color 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 text-color' id='prediction-list'></ol>
</div>
<!-- Bottom Bar -->
<div class='w3-center w3-padding-bottom'>
<p class="space-letters">
<a class="w3-small w3-hover-text-deep-orange text-color" href=#>
<b>ruto brian</b></a>
</p>
</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="<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>">
</script>-->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/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>