Hugging Face's logo

Spaces:
Anwarkh1
/
Anwarkh1-Skin_Cancer-Image_Classification
Sleeping

App Files Community
Anwarkh1 commited on
Commit
5cb5f0b
•
1 Parent(s): fcb967a

Upload index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +230 -0
templates/index.html ADDED
@@ -0,0 +1,230 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" >
3
+
4
+ <head>
5
+
6
+ <meta charset="UTF-8">
7
+
8
+ <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
9
+ <meta name="apple-mobile-web-app-title" content="CodePen">
10
+
11
+ <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
12
+
13
+ <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
14
+
15
+
16
+ <title>{{ appName }}</title>
17
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
18
+
19
+
20
+
21
+ <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
22
+
23
+ <style>
24
+ /*just bg and body style*/
25
+ body{
26
+ background-color:#1e2832;
27
+ }
28
+ .container{
29
+ background-color:#1E2832;
30
+ padding-bottom:20px;
31
+ margin-top:10px;
32
+ border-radius:5px;
33
+ }
34
+ .center{
35
+ text-align:center;
36
+ }
37
+ #top{
38
+ margin-top:20px;
39
+ }
40
+ .btn-container{
41
+ background:#fff;
42
+ border-radius:5px;
43
+ padding-bottom:20px;
44
+ margin-bottom:20px;
45
+ }
46
+ .white{
47
+ color:white;
48
+ }
49
+ .imgupload{
50
+ color:#1E2832;
51
+ padding-top:40px;
52
+ font-size:7em;
53
+ }
54
+ #namefile{
55
+ color:black;
56
+ }
57
+ h4>strong{
58
+ color:#ff3f3f
59
+ }
60
+ .btn-primary{
61
+ border-color: #ff3f3f !important;
62
+ color: #ffffff;
63
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
64
+ background-color: #ff3f3f !important;
65
+ border-color: #ff3f3f !important;
66
+ }
67
+
68
+ /*these two are set to not display at start*/
69
+ .imgupload.ok{
70
+ display:none;
71
+ color:green;
72
+ }
73
+ .imgupload.stop{
74
+ display:none;
75
+ color:red;
76
+ }
77
+
78
+
79
+ /*this sets the actual file input to overlay our button*/
80
+ #fileup{
81
+ opacity: 0;
82
+ -moz-opacity: 0;
83
+ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
84
+ width:200px;
85
+ cursor: pointer;
86
+ position:absolute;
87
+ left: 50%;
88
+ transform: translateX(-50%);
89
+ bottom: 40px;
90
+ height: 50px;
91
+ }
92
+
93
+ /*switch between input and not active input*/
94
+ #submitbtn{
95
+ padding:5px 50px;
96
+ display:none;
97
+ }
98
+ #fakebtn{
99
+ padding:5px 40px;
100
+ }
101
+
102
+
103
+ /*www.emilianocostanzo.com*/
104
+ #sign{
105
+ color:#1E2832;
106
+ position:fixed;
107
+ right:10px;
108
+ bottom:10px;
109
+ text-shadow:0px 0px 0px #1E2832;
110
+ transition:all.3s;
111
+ }
112
+ #sign:hover{
113
+ color:#1E2832;
114
+ text-shadow:0px 0px 5px #1E2832;
115
+ }
116
+ </style>
117
+
118
+ <script>
119
+ window.console = window.console || function(t) {};
120
+ </script>
121
+
122
+
123
+
124
+ <script>
125
+ if (document.location.search.match(/type=embed/gi)) {
126
+ window.parent.postMessage("resize", "*");
127
+ }
128
+ </script>
129
+
130
+
131
+ </head>
132
+
133
+ <body translate="no" >
134
+ <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
135
+
136
+ <div class="container center">
137
+ <div class="row">
138
+ <div class="col-md-12">
139
+ <h1 class="white">{{ appName }}</h1>
140
+ <p class="white">In this APP , submit is allowed only in case the user uploads a valid image file.</p>
141
+ </div>
142
+ </div>
143
+
144
+ <form name="upload" method="post" action="predict" enctype="multipart/form-data" accept-charset="utf-8">
145
+ <div class="row">
146
+ <div class="col-md-6 col-md-offset-3 center">
147
+ <div class="btn-container">
148
+ <!--the three icons: default, ok file (img), error file (not an img)-->
149
+ <h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1>
150
+ <h1 class="imgupload ok"><i class="fa fa-check"></i></h1>
151
+ <h1 class="imgupload stop"><i class="fa fa-times"></i></h1>
152
+ <!--this field changes dinamically displaying the filename we are trying to upload-->
153
+ <p id="namefile">Only pics allowed! (jpg,jpeg,bmp,png)</p>
154
+ <!--our custom btn which which stays under the actual one-->
155
+ <button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button>
156
+ <!--this is the actual file input, is set with opacity=0 beacause we wanna see our custom one-->
157
+ <input type="file" value="" name="fileup" id="fileup">
158
+ </div>
159
+ </div>
160
+ </div>
161
+ <!--additional fields-->
162
+ <div class="row">
163
+ <div class="col-md-12">
164
+ <!--the defauld disabled btn and the actual one shown only if the three fields are valid-->
165
+ <input type="submit" value="Submit!" class="btn btn-primary" id="submitbtn">
166
+ <button type="button" class="btn btn-default" disabled="disabled" id="fakebtn">Submit! <i class="fa fa-minus-circle"></i></button>
167
+ </div>
168
+ </div>
169
+ </form>
170
+ <br>
171
+ <br>
172
+ <br>
173
+ <div class="col-md-6 col-md-offset-3 center">
174
+ <div class="btn-container">
175
+ <div class="row">
176
+ <div class="col-md-12">
177
+ <h1 class="white" style="color:darkred;">{{prediction}}</h1>
178
+ <img src="{{ image }}">
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+
184
+ </div>
185
+ <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
186
+
187
+ <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
188
+ <script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
189
+ <script id="rendered-js" >
190
+ $('#fileup').change(function () {
191
+ //here we take the file extension and set an array of valid extensions
192
+ var res = $('#fileup').val();
193
+ var arr = res.split("\\");
194
+ var filename = arr.slice(-1)[0];
195
+ filextension = filename.split(".");
196
+ filext = "." + filextension.slice(-1)[0];
197
+ valid = [".jpg", ".png", ".jpeg", ".bmp"];
198
+ //if file is not valid we show the error icon, the red alert, and hide the submit button
199
+ if (valid.indexOf(filext.toLowerCase()) == -1) {
200
+ $(".imgupload").hide("slow");
201
+ $(".imgupload.ok").hide("slow");
202
+ $(".imgupload.stop").show("slow");
203
+
204
+ $('#namefile').css({ "color": "red", "font-weight": 700 });
205
+ $('#namefile').html("File " + filename + " is not pic!");
206
+
207
+ $("#submitbtn").hide();
208
+ $("#fakebtn").show();
209
+ } else {
210
+ //if file is valid we show the green alert and show the valid submit
211
+ $(".imgupload").hide("slow");
212
+ $(".imgupload.stop").hide("slow");
213
+ $(".imgupload.ok").show("slow");
214
+
215
+ $('#namefile').css({ "color": "green", "font-weight": 700 });
216
+ $('#namefile').html(filename);
217
+
218
+ $("#submitbtn").show();
219
+ $("#fakebtn").hide();
220
+ }
221
+ });
222
+ //# sourceURL=pen.js
223
+ </script>
224
+
225
+
226
+
227
+ </body>
228
+
229
+ </html>
230
+