Updated the UI to make it look nicer. Added a training page in antici…

…pation of adding features to allow client-side training of models
liunick · Sep 17, 2017 · af76e99 · af76e99
1 parent bd98a42
commit af76e99
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 25 deletions.
diff --git a/app.py b/app.py
@@ -40,6 +40,20 @@ def clarifai_data(model, filename):
 def index():
 	return render_template('index.html')
 
+@app.route('/trainer', methods=['GET'])
+def trainer():
+	return render_template('trainer.html')
+
+@app.route('/train', methods=['GET', 'POST'])
+def trainModel():
+	if request.method == 'POST':
+		fileObj = request.files['file']
+		if fileObj and allowed_file(fileObj.filename):
+			safeFile = secure_filename(fileObj.filename)
+			local_filename = os.path.join(app.config['UPLOAD_FOLDER'], safeFile)
+			fileObj.save(local_filename)
+
+
 @app.route('/upload', methods=['GET', 'POST'])
 def uploadFile():
 	if request.method == 'POST':

diff --git a/static/css/custom.css b/static/css/custom.css
@@ -0,0 +1,24 @@
+@import url('http://getbootstrap.com/dist/css/bootstrap.css');
+ html, body, .container-table {
+    height: 100%;
+}
+.center {
+    position: static;
+    align: center;
+    padding-top: 15%;
+
+}
+.after {
+	position: static;
+	align: center;
+}
+
+.spacing {
+	margin-top: 25px;
+	margin-bottom: 5px;
+}
+
+.titling {
+	text-align: right;
+	align: right;
+}
diff --git a/static/js/custom.js b/static/js/custom.js
@@ -0,0 +1,27 @@
+$(function() {
+
+  // We can attach the `fileselect` event to all file inputs on the page
+  $(document).on('change', ':file', function() {
+    var input = $(this),
+        numFiles = input.get(0).files ? input.get(0).files.length : 1,
+        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+    input.trigger('fileselect', [numFiles, label]);
+  });
+
+  // We can watch for our custom `fileselect` event like this
+  $(document).ready( function() {
+      $(':file').on('fileselect', function(event, numFiles, label) {
+
+          var input = $(this).parents('.input-group').find(':text'),
+              log = numFiles > 1 ? numFiles + ' files selected' : label;
+
+          if( input.length ) {
+              input.val(log);
+          } else {
+              if( log ) alert(log);
+          }
+
+      });
+  });
+
+});
diff --git a/templates/index.html b/templates/index.html
@@ -1,28 +1,55 @@
 <!DOCTYPE html>
+
+
 <html lang="en">
-    <head>
-        <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
-          rel="stylesheet">
-  </head>
-  <body>
-    <div class="container">
-      <div class="header">
-        <h3 class="text-muted">How To Upload a File</h3>
-      </div>
-      <hr/>
-      <div>
-
-      <form action="upload" method="post" enctype="multipart/form-data">
-        <input type="file" name="file"><br /><br />
-        <input type="submit" value="Upload">
-      </form>
-	  	<img style="height:480px;max-width:500px;width:" src={{imgSrc}} />
-      	{% if data==True %} 
-      		It is Neil!!  
-		{% else %}
-			It is not Neil :(
-  		{% endif %}
-      </div>
-    </div>
-  </body>
+<head>
+	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
+	rel="stylesheet">
+	<link href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation-float.css' rel='stylesheet'>
+	<link href='../static/css/custom.css' rel='stylesheet'>
+	<script
+	  src="https://code.jquery.com/jquery-3.2.1.min.js"
+	  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+	  crossorigin="anonymous"></script>
+	<script type="text/javascript" src='../static/js/custom.js'></script>
+
+</head>
+<body>
+	<!--<div class="jumbotron">-->
+	<div class='container center'>
+		<center>
+		<h3 class="text-muted">Neil or Not Neil</h3>
+		<p class='text-muted'>Upload a photo of anything to find out if it contains Neil! </p></center>
+	</div>
+
+	<div class='container after spacing'>			
+		<form action="upload" method="post" enctype="multipart/form-data">
+			<div class="input-group ">
+                <div class='col-sm-offset-2 col-xs-1'>
+                	<label class="input-group-btn">
+	                    <span class=" btn btn-primary btn-file">
+	                        Browse <input type="file" name='file' style="display: none;">
+	                    </span>
+                	</label>	
+                </div>
+                <div class='col-xs-7'>
+                	<input type="text" class="" readonly>	
+                </div>
+        	</div>
+			<div class="col-sm-offset-4 col-sm-4 ">
+				<label class='btn btn-block btn-success'>
+				Submit <input type='submit' value='Upload' hidden>
+				</label>	
+			</div>
+		</form>
+	</div>
+
+	<img style="height:px;max-width:500px;width:" src={{imgSrc}} />
+		{% if data==True %} 
+		It is Neil!!  
+		{% elif data == False %}
+		It is not Neil :(
+		{% endif %}		
+
+</body>
 </html>
diff --git a/templates/trainer.html b/templates/trainer.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
+	rel="stylesheet">
+	<link href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation-float.css' rel='stylesheet'>
+</head>
+<body>
+	<div class="container">
+		<div class="header">
+			<h3 class="text-muted">Train Data</h3>
+		</div>
+		<hr/>
+		<div>
+
+			<form action="train" method="post" enctype="multipart/form-data">
+				<input type='file' name='file'><br />
+				Model Name: 
+				<input type="text" name="modelName"><br /><br />
+				<input type="submit" value="Upload">
+			</form>			
+		</div>
+	</div>
+</body>
+</html>