Second page prototype #1

SharanRajani · Mar 20, 2019 · 7ea543a · 7ea543a
1 parent 98f4322
commit 7ea543a
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 35 deletions.
diff --git a/app.py b/app.py
@@ -14,15 +14,15 @@
 
 @app.route('/', methods = ['GET', 'POST'])
 def home():
-    session['filepath']=None
-    f = 'wav/landing_page.wav'
-    if request.method == 'POST':
-        f = request.files['file']
-        print(f.filename)
-        f.save('./static/wav/'+secure_filename(f.filename))
-        f = 'wav/'+f.filename
-        session['filepath'] = './static/' + f
-    return render_template('First.html', wav_file = f)
+	session['filepath']=None
+	f = 'wav/landing_page.wav'
+	if request.method == 'POST':
+		f = request.files['file']
+		print(f.filename)
+		f.save('./static/wav/'+secure_filename(f.filename))
+		f = 'wav/'+f.filename
+		session['filepath'] = './static/' + f
+	return render_template('First.html', wav_file = f)
 
 
 @app.route('/display_spec')
@@ -43,28 +43,28 @@ def display_spec():
 
 	spec_plot.plotstft(enhancedpath, "./static/images/enhanced_spectogram_html.png", "PuBuGn")
 	spec_plot.plotstft(filepath, "./static/images/original_spectogram_html.png", "PuBuGn")
-
+	filepath=filepath[9:]
 	return render_template('Second.html', wav_file = filepath)
 
 @app.route('/classify')
 def classify():
-    filename = "./static/images/enhanced_spectogram.png"
-    pred = cnn_testing.predict(filename)
-    pred = pred[0][1]
+	filename = "./static/images/enhanced_spectogram.png"
+	pred = cnn_testing.predict(filename)
+	pred = pred[0][1]
 
-    if(pred>0.75):
-        pred_label = "Excellent!"
-        pred_desc = "Congratuations! The quality of your weld is first-rate."
-        pred_img_path = "./static/images/positive_result.png"
-    elif(pred<0.25):
-        pred_label = "Defective"
-        pred_desc = "The quality of the weld is substandard."
-        pred_img_path = "./static/images/negative_result.png"
-    else:
-        pred_label = "Satisfactory"
-        pred_desc = "There is room for improvement. Please ensure weld quality does not deteriorate any further."
-        pred_img_path = "./static/images/neutral_result.png"
-    return render_template('Third.html', pred_label = pred_label, pred_desc = pred_desc, pred_img_path = pred_img_path)
+	if(pred>0.75):
+		pred_label = "Excellent!"
+		pred_desc = "Congratuations! The quality of your weld is first-rate."
+		pred_img_path = "./static/images/positive_result.png"
+	elif(pred<0.25):
+		pred_label = "Defective"
+		pred_desc = "The quality of the weld is substandard."
+		pred_img_path = "./static/images/negative_result.png"
+	else:
+		pred_label = "Satisfactory"
+		pred_desc = "There is room for improvement. Please ensure weld quality does not deteriorate any further."
+		pred_img_path = "./static/images/neutral_result.png"
+	return render_template('Third.html', pred_label = pred_label, pred_desc = pred_desc, pred_img_path = pred_img_path)
 
 if __name__ == '__main__':
 	app.run(debug=True, use_reloader=False)
diff --git a/templates/Second.html b/templates/Second.html
@@ -379,7 +379,7 @@
 
 #bloc1{
   /*position: absolute;*/
-  width:80vh;
+  width:64vh;
   /*height: 150vh;*/
  /* right: -1%;
   top:30%;*/
@@ -419,16 +419,45 @@
 
 #card{
   position: absolute;
-  right: -4%;
+  right: 2%;
   top: 20%;
   background-color: #0B353B;
-  padding: 10vh;
-  padding-bottom: 20vh;
-  border-radius:2vh;
+  padding: 7vh;
+  padding-top: 20vh;
+  border-radius:1.8vh;
   box-shadow: 1vh 1vh 3vh #0B353B;
 }
 
-.slider{width:100%;height:auto;padding:0;position:relative}.slider .right.image{position:absolute;z-index:1;top:0;left:0}.slider .left.image{position:relative;z-index:2;border-right:3px solid white;margin-right:-0.9vh;overflow:hidden}.slider }
+.audTitle{
+  font-family: 'Raleway', sans-serif;
+  font-size: 2.5vh;
+}
+
+#bloc6{
+  top: 46%;
+  left: 23%;
+}
+
+#bloc7{
+  top: 74%;
+  left: 23%;
+}
+
+#sliderTag{
+  top: 92%;
+  left: 9%;
+}
+
+#sliderTag2{
+  top: 92%;
+  left: 46%;
+}
+
+#sliderTag3{
+  top: 92%;
+  left: 81%;
+}
+.slider{width:100%;height:auto;padding:0;position:relative}.slider .right.image{position:absolute;z-index:1;top:0;left:0}.slider .left.image{position:relative;z-index:2;border-right:3px solid white;margin-right:0vh;overflow:hidden}.slider }
 
 </style>
 </head>
@@ -474,6 +503,12 @@
       </label>
     <!-- </form> -->
   </div>
+  <div class="bloc" id="bloc6">
+    <span class="audTitle">Original Sound File</span>
+  </div>
+  <div class="bloc" id="bloc7">
+    <span class="audTitle">Denoised Sound File</span>
+  </div>
   <div id="card">
     <div class="slider" id="bloc1">
      <div class="slider">
@@ -492,10 +527,10 @@
 
 
     </div>
-    <div style="font-size: 2vh; color:black">
-      <span >Original</span> <span style="margin-left:27%">Drag to Compare</span> <span  style="margin-left:29%">Clean<span>
-    </div>
   </div>
+  <div class="bloc" id="sliderTag"><span class="audTitle" style="color: white">Original</span></div>
+    <div class="bloc" id="sliderTag2"><span class="audTitle" style="color: white">Slider</span></div>
+    <div class="bloc" id="sliderTag3"><span class="audTitle" style="color: white">Denoised</span></div>    
 </div>
 </div>
 <!-- <i class="material-icons">add_circle_outline</i>-->
@@ -537,6 +572,7 @@
 });
 
 
+// wavesurfer2.load('{{ url_for('static', filename = 'wav/enhanced.wav') }}' );
 wavesurfer2.load('{{ url_for('static', filename = wav_file) }}' );
 
 function play2() {