Spaces:
Runtime error
Runtime error
| <html lang="en" > | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> | |
| <meta name="apple-mobile-web-app-title" content="CodePen"> | |
| <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> | |
| <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> | |
| <title>{{ appName }}</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> | |
| <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> | |
| <style> | |
| /*just bg and body style*/ | |
| body{ | |
| background-color:#1e2832; | |
| } | |
| .container{ | |
| background-color:#1E2832; | |
| padding-bottom:20px; | |
| margin-top:10px; | |
| border-radius:5px; | |
| } | |
| .center{ | |
| text-align:center; | |
| } | |
| #top{ | |
| margin-top:20px; | |
| } | |
| .btn-container{ | |
| background:#fff; | |
| border-radius:5px; | |
| padding-bottom:20px; | |
| margin-bottom:20px; | |
| } | |
| .white{ | |
| color:white; | |
| } | |
| .imgupload{ | |
| color:#1E2832; | |
| padding-top:40px; | |
| font-size:7em; | |
| } | |
| #namefile{ | |
| color:black; | |
| } | |
| h4>strong{ | |
| color:#ff3f3f | |
| } | |
| .btn-primary{ | |
| border-color: #ff3f3f ; | |
| color: #ffffff; | |
| text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); | |
| background-color: #ff3f3f ; | |
| border-color: #ff3f3f ; | |
| } | |
| /*these two are set to not display at start*/ | |
| .imgupload.ok{ | |
| display:none; | |
| color:green; | |
| } | |
| .imgupload.stop{ | |
| display:none; | |
| color:red; | |
| } | |
| /*this sets the actual file input to overlay our button*/ | |
| #fileup{ | |
| opacity: 0; | |
| -moz-opacity: 0; | |
| filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); | |
| width:200px; | |
| cursor: pointer; | |
| position:absolute; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| bottom: 40px; | |
| height: 50px; | |
| } | |
| /*switch between input and not active input*/ | |
| #submitbtn{ | |
| padding:5px 50px; | |
| display:none; | |
| } | |
| #fakebtn{ | |
| padding:5px 40px; | |
| } | |
| /*www.emilianocostanzo.com*/ | |
| #sign{ | |
| color:#1E2832; | |
| position:fixed; | |
| right:10px; | |
| bottom:10px; | |
| text-shadow:0px 0px 0px #1E2832; | |
| transition:all.3s; | |
| } | |
| #sign:hover{ | |
| color:#1E2832; | |
| text-shadow:0px 0px 5px #1E2832; | |
| } | |
| </style> | |
| <script> | |
| window.console = window.console || function(t) {}; | |
| </script> | |
| <script> | |
| if (document.location.search.match(/type=embed/gi)) { | |
| window.parent.postMessage("resize", "*"); | |
| } | |
| </script> | |
| </head> | |
| <body translate="no" > | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> | |
| <div class="container center"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <h1 class="white">{{ appName }}</h1> | |
| <p class="white">In this APP , submit is allowed only in case the user uploads a valid image file.</p> | |
| </div> | |
| </div> | |
| <form name="upload" method="post" action="predict" enctype="multipart/form-data" accept-charset="utf-8"> | |
| <div class="row"> | |
| <div class="col-md-6 col-md-offset-3 center"> | |
| <div class="btn-container"> | |
| <!--the three icons: default, ok file (img), error file (not an img)--> | |
| <h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1> | |
| <h1 class="imgupload ok"><i class="fa fa-check"></i></h1> | |
| <h1 class="imgupload stop"><i class="fa fa-times"></i></h1> | |
| <!--this field changes dinamically displaying the filename we are trying to upload--> | |
| <p id="namefile">Only pics allowed! (jpg,jpeg,bmp,png)</p> | |
| <!--our custom btn which which stays under the actual one--> | |
| <button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button> | |
| <!--this is the actual file input, is set with opacity=0 beacause we wanna see our custom one--> | |
| <input type="file" value="" name="fileup" id="fileup"> | |
| </div> | |
| </div> | |
| </div> | |
| <!--additional fields--> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <!--the defauld disabled btn and the actual one shown only if the three fields are valid--> | |
| <input type="submit" value="Submit!" class="btn btn-primary" id="submitbtn"> | |
| <button type="button" class="btn btn-default" disabled="disabled" id="fakebtn">Submit! <i class="fa fa-minus-circle"></i></button> | |
| </div> | |
| </div> | |
| </form> | |
| <br> | |
| <br> | |
| <br> | |
| <div class="col-md-6 col-md-offset-3 center"> | |
| <div class="btn-container"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <h1 class="white" style="color:darkred;">{{prediction}}</h1> | |
| <img src="{{ image }}"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> | |
| <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> | |
| <script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> | |
| <script id="rendered-js" > | |
| $('#fileup').change(function () { | |
| //here we take the file extension and set an array of valid extensions | |
| var res = $('#fileup').val(); | |
| var arr = res.split("\\"); | |
| var filename = arr.slice(-1)[0]; | |
| filextension = filename.split("."); | |
| filext = "." + filextension.slice(-1)[0]; | |
| valid = [".jpg", ".png", ".jpeg", ".bmp"]; | |
| //if file is not valid we show the error icon, the red alert, and hide the submit button | |
| if (valid.indexOf(filext.toLowerCase()) == -1) { | |
| $(".imgupload").hide("slow"); | |
| $(".imgupload.ok").hide("slow"); | |
| $(".imgupload.stop").show("slow"); | |
| $('#namefile').css({ "color": "red", "font-weight": 700 }); | |
| $('#namefile').html("File " + filename + " is not pic!"); | |
| $("#submitbtn").hide(); | |
| $("#fakebtn").show(); | |
| } else { | |
| //if file is valid we show the green alert and show the valid submit | |
| $(".imgupload").hide("slow"); | |
| $(".imgupload.stop").hide("slow"); | |
| $(".imgupload.ok").show("slow"); | |
| $('#namefile').css({ "color": "green", "font-weight": 700 }); | |
| $('#namefile').html(filename); | |
| $("#submitbtn").show(); | |
| $("#fakebtn").hide(); | |
| } | |
| }); | |
| //# sourceURL=pen.js | |
| </script> | |
| </body> | |
| </html> | |