Added templates

ff26cfe9 · Ranathunge R. A. D. O · 227141d8 · ff26cfe9 · ff26cfe9 · ff26cfe9
Commit ff26cfe9 authored Nov 21, 2021 by Ranathunge R. A. D. O
4 changed files
--- a/stress-detection/templates/emotion-table.html
+++ b/stress-detection/templates/emotion-table.html
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="UTF-8">
+    <title>Timbre - Emotion Detection</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <script src="https://use.fontawesome.com/33f079f2f4.js"></script>
+    <link type="text/css" rel="stylesheet" href="../assets/materialize-assets/css/materialize.min.css">
+    <link type="text/css" rel="stylesheet" href="../assets/js/plugins/OwlCarousel/owl-carousel/owl.carousel.css">
+    <link type="text/css" rel="stylesheet" href="../assets/js/plugins/OwlCarousel/owl-carousel/owl.theme.css">
+    <link type="text/css" rel="stylesheet" href="../assets/js/plugins/OwlCarousel/owl-carousel/">
+    <link type="text/css" rel="stylesheet" href="../assets/js/plugins/lightbox2-master/dist/css/lightbox.min.css">
+    <link type="text/css" rel="stylesheet" href="../assets/css/main.css">
+
+
+</head>
+<body>
+<style>
+
+   
+    #parallax {
+            background-size: cover;
+            background-attachment: fixed;
+            background-position: center;
+        }
+ h2{
+    font-size: xx-large;
+ }
+ .btn-primary{
+    height: 50px;
+    border-radius: unset;
+    font-weight: 600;
+    border-radius: 30px;
+    padding: 9px;
+    width: 150px;
+}
+ img {
+    width: 175px;
+ 
+    margin-top: 25px;
+
+}
+@media screen and (max-width: 480px){
+        
+        h2{
+            font-size: x-large;
+    }
+    
+    img {
+    width: 130px;
+    margin-top: 14px;
+}
+    #custom-button
+    {
+        font-size: small;
+    }
+            }
+</style>
+
+ <!-- Preloader -->
+
+
+ <div class="preloader">
+    <h2>Timbre<span>.</span></h2>
+    <div class="preloader-wrapper big active">
+        <div class="spinner-layer spinner-blue">
+            <div class="circle-clipper left">
+                <div class="circle"></div>
+            </div>
+            <div class="gap-patch">
+                <div class="circle"></div>
+            </div>
+            <div class="circle-clipper right">
+                <div class="circle"></div>
+            </div>
+        </div>
+
+        <div class="spinner-layer spinner-red">
+            <div class="circle-clipper left">
+                <div class="circle"></div>
+            </div>
+            <div class="gap-patch">
+                <div class="circle"></div>
+            </div>
+            <div class="circle-clipper right">
+                <div class="circle"></div>
+            </div>
+        </div>
+
+        <div class="spinner-layer spinner-yellow">
+            <div class="circle-clipper left">
+                <div class="circle"></div>
+            </div>
+            <div class="gap-patch">
+                <div class="circle"></div>
+            </div>
+            <div class="circle-clipper right">
+                <div class="circle"></div>
+            </div>
+        </div>
+
+        <div class="spinner-layer spinner-green">
+            <div class="circle-clipper left">
+                <div class="circle"></div>
+            </div>
+            <div class="gap-patch">
+                <div class="circle"></div>
+            </div>
+            <div class="circle-clipper right">
+                <div class="circle"></div>
+            </div>
+        </div>
+    </div>
+</div>
+ <!-- Navigation -->
+
+
+ <header>
+    <nav>
+        <div class="container">
+            <div class="nav-wrapper">
+               
+                <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons" style="color: black;">menu</i></a>
+                <!-- Side Nav Links -->
+                <ul class="side-nav" id="mobile-demo">
+                    <li><a href="../home.html" style="height: 100px;">
+                        <img src="../assets/img/logo.png" >     
+                            </a></li><br>
+        
+                    <li><a href="emotion-detect.html" class="page-scroll">Emotion Detection</a></li>
+                    <li><a href="../stress-detection/stress-detect.html" class="page-scroll">Stress Detection</a></li>
+                    <li><a href="#portfolio" class="page-scroll">Fluency Analysis</a></li>
+                    <li><a href="identification.html" class="page-scroll">Agent Identification</a></li>
+              
+                </ul>
+            </div>
+        </div>
+    </nav>
+</header>
+
+<div id="parallax" class="full-screen">
+    <div class="hero-caption">
+        
+        <div class="hero-text">
+            <h2>Emotion of Call Agent</h2><br><br>
+            <div class="table-responsive container" style="width: 40%;">
+                <table class="table">
+                  <thead>
+                      <tr>
+                        <th scope="col">Agent Name</th>
+                        <!-- <th scope="col">Label</th> -->
+                        <th scope="col">Accuracy</th>
+                      </tr>
+                    </thead>
+                    <tbody id="response_body">
+                    </tbody>
+                </table>
+              </div><br><br>
+              <div><b>Average Emotion: </b><span id="avg_emotion"></span></div>
+              <br><br><br><br>
+              <a href="emotion-detect.html">
+              <button type="button"class="btn btn-primary" >BACK</button></a>
+              <br><br>
+        </div>
+      
+    </div>
+</div>
+
+
+
+
+ <!--Import jQuery before materialize.js-->
+ <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+ <script type="text/javascript" src="../assets/materialize-assets/js/materialize.min.js"></script>
+ <!-- jQuery Plugins -->
+ <script type="text/javascript" src="../assets/js/plugins/jquery.easing.min.js"></script>
+ <script type=text/javascript src="../assets/js/plugins/OwlCarousel/owl-carousel/owl.carousel.min.js"></script>
+ <script type="text/javascript" src="../assets/js/plugins/lightbox2-master/dist/js/lightbox.min.js"></script>
+ <script type="text/javascript" src="../assets/js/plugins/jquery.mixitup.min.js"></script>
+ <script type="text/javascript" src="../assets/js/plugins/inview/jquery.inview.min.js"></script>
+ <script type="text/javascript" src="../assets/js/plugins/countTo/jquery.countTo.js"></script>
+ <script src="https://maps.googleapis.com/maps/api/js"></script>
+
+ <script type="text/javascript" src="../assets/js/custom.js"></script>
+
+ <script>
+        const queryString = window.location.search;
+        const urlParams = new URLSearchParams(queryString);
+        const response = urlParams.get('val')
+        const response_json = JSON.parse(response);
+        console.log(response_json.results);
+        res_body = "";
+        const emotions = [];
+        for(const result in response_json.results) {
+            console.log(response_json.results[result]);
+            console.log(response_json.results[result].emotion);
+            console.log(response_json.results[result].file_path);
+            var emot = response_json.results[result].emotion;
+            var emot = emot.replace('[\'','');
+            emot = emot.replace('\']','');
+            emot = emot.replace('_',' ');
+            emot = toTitleCase(emot);
+            emotions.push(emot);
+            res_body += '<tr><th scope="row"></th><td>'+emot+'</td><td>';
+            res_body += '<audio id="player" controls> <source id="audio_src" src="../../'+response_json.results[result].file_path+'" type="'+response_json.results[result].file_type+'"> </audio></td></tr>';
+        }
+        document.getElementById('response_body').innerHTML = res_body;
+        document.getElementById('avg_emotion').innerHTML = mode(emotions);
+
+        function toTitleCase(str) {
+            return str.replace(/\w\S*/g, function(txt){
+                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+            });
+        }
+
+        function mode(array){
+            if(array.length == 0)
+                return null;
+            var modeMap = {};
+            var maxEl = array[0], maxCount = 1;
+            for(var i = 0; i < array.length; i++)
+            {
+                var el = array[i];
+                if(modeMap[el] == null)
+                    modeMap[el] = 1;
+                else
+                    modeMap[el]++;  
+                if(modeMap[el] > maxCount)
+                {
+                    maxEl = el;
+                    maxCount = modeMap[el];
+                }
+            }
+            return maxEl;
+        }
+ </script>
+</body>
+</html>
\ No newline at end of file
--- a/stress-detection/templates/stress.html
+++ b/stress-detection/templates/stress.html
+<!DOCTYPE html>
+<html>
+<head>
+    <!-- ==============================================
+    Title and Meta Tags
+    =============================================== -->
+    <meta charset="UTF-8">
+    <title>Timbre - Stress Detection</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- ==============================================
+    CSS Files
+    =============================================== -->
+    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <script src="https://use.fontawesome.com/33f079f2f4.js"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='materialize-assets/css/materialize.min.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='materialize-assets/css/materialize.min.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='js/plugins/OwlCarousel/owl-carousel/owl.carousel.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='js/plugins/OwlCarousel/owl-carousel/owl.theme.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='js/plugins/lightbox2-master/dist/css/lightbox.min.css') }}">
+</head>
+
+<body>
+    <style>
+        #parallax {
+            background-size: cover;
+            background-attachment: fixed;
+            background-position: center;
+        }
+        h2{
+            font-size: xx-large;
+            text-align: center;
+        }
+        .btn-primary{
+            height: 50px;
+            border-radius: unset;
+            font-weight: 600;
+            border-radius: 30px;
+            padding: 9px;
+            width: 150px;
+        }
+       
+        #custom-text {
+        margin-left: 10px;
+        font-family: sans-serif;
+        color: #aaa;
+        margin-inline-end: 25px;
+        }
+        img {
+            width: 175px;
+        
+            margin-top: 25px;
+
+        }
+        @media screen and (max-width: 480px){
+                
+        img {
+            width: 130px;
+            margin-top: 14px;
+        }
+        #custom-button
+        {
+            font-size: small;
+        }
+        .uploadbtn{
+        margin-top: 30px;
+                }
+            }
+            
+            input[type="file"] {
+                color: rgb(76, 129, 129);
+                -moz-box-align: center;
+                -ms-text-size-adjust: right;
+                border: 1px solid #ccc;
+                display: inline-block;
+                cursor: pointer;
+                 }
+    </style> 
+    
+    <!-- Preloader -->
+    <div class="preloader">
+        <h2>Timbre<span>.</span></h2>
+        <div class="preloader-wrapper big active">
+            <div class="spinner-layer spinner-blue">
+                <div class="circle-clipper left">
+                    <div class="circle"></div>
+                </div>
+                <div class="gap-patch">
+                    <div class="circle"></div>
+                </div>
+                <div class="circle-clipper right">
+                    <div class="circle"></div>
+                </div>
+            </div>
+
+            <div class="spinner-layer spinner-red">
+                <div class="circle-clipper left">
+                    <div class="circle"></div>
+                </div>
+                <div class="gap-patch">
+                    <div class="circle"></div>
+                </div>
+                <div class="circle-clipper right">
+                    <div class="circle"></div>
+                </div>
+            </div>
+
+            <div class="spinner-layer spinner-yellow">
+                <div class="circle-clipper left">
+                    <div class="circle"></div>
+                </div>
+                <div class="gap-patch">
+                    <div class="circle"></div>
+                </div>
+                <div class="circle-clipper right">
+                    <div class="circle"></div>
+                </div>
+            </div>
+
+            <div class="spinner-layer spinner-green">
+                <div class="circle-clipper left">
+                    <div class="circle"></div>
+                </div>
+                <div class="gap-patch">
+                    <div class="circle"></div>
+                </div>
+                <div class="circle-clipper right">
+                    <div class="circle"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+<!-- Navigation -->
+
+<!--Header-->
+<header>
+    <nav>
+        <!-- Side Nav Links -->
+        <div class="container">
+            <div class="nav-wrapper">
+
+                <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons" style="color: black;">menu</i></a>
+                
+                <ul class="side-nav" id="mobile-demo">
+                    <li><a href="../home.html" style="height: 100px;">
+                        <img src="{{ url_for('static', filename='img/logo.png') }}" >     
+                            </a></li><br>
+        
+                    <li><a href="../emotion-detection/emotion-detect.html" class="page-scroll">Emotion Detection</a></li>
+                    <li><a href="stress-detect.html" class="page-scroll">Stress Detection</a></li>
+                    <li><a href="#portfolio" class="page-scroll">Fluency Analysis</a></li>
+                    <li><a href="identification.html" class="page-scroll">Agent Identification</a></li>
+              
+                </ul>
+            </div>
+        </div>
+    </nav>
+</header>
+<!--header-->
+
+<!--Stress detector-->
+<div id="parallax" class="full-screen">
+    <h2>Stress Detection for Call Agent</h2><br>
+  <div class="hero-caption">
+    <div class="hero-text">
+          <div class="container">
+          <form action="http://127.0.0.1:5000/upload" method="post" enctype="multipart/form-data" ">
+            <!--label for="file">Choose a file</label-->
+          <input type="file" name="file"  style="width:300px" /><br><br>
+          <input type="submit"  class="btn btn-info"  value="Upload" id="custom-button"/>
+          </form>
+          <br>
+        
+         <!--upload file-->
+            
+         <!--upload stress file-->
+          <form action="http://127.0.0.1:5000/detection" method="post" class="inline" >
+            <h3>{{upload_status}}</h3>
+            <br>
+            <input type="submit"  class="btn btn-info"  value="Stress Detection " />
+          </form>
+        <!--upload stress file-->
+
+        <!--upload emotion file-->
+          <br>
+          <!--form action="http://127.0.0.1:5000/emotion_detection" method="post" class="inline" style="margin-left: 31%;">
+            <h3>{{upload_status}}</h3>
+            <br>
+            <input type="submit"  class="btn btn-primary"  value="Emotion Recognize" style="margin-left: 147px;" />
+          </form-->
+        <!--upload emotion file-->
+    
+    </div>
+      </div> 
+    </div>
+  </div>
+
+  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+  <script type="text/javascript" src="{{ url_for('static', filename='materialize-assets/js/materialize.min.js') }}"></script>
+  <script type="text/javascript" src="{{ url_for('static', filename='js/plugins/jquery.easing.min.js') }}"></script>
+  <script type=text/javascript src="{{ url_for('static', filename='js/plugins/OwlCarousel/owl-carousel/owl.carousel.min.js') }}"></script>
+  <script type="text/javascript" src="{{ url_for('static', filename='js/plugins/lightbox2-master/dist/js/lightbox.min.js') }}"></script>
+  <script type="text/javascript" src="{{ url_for('static', filename='js/plugins/jquery.mixitup.min.js') }}"></script>
+  <script type="text/javascript" src="{{ url_for('static', filename='js/plugins/inview/jquery.inview.min.js') }}"></script>
+  <script type="text/javascript" src="{{ url_for('static', filename='js/plugins/countTo/jquery.countTo.js') }}"></script>
+  <script src="https://maps.googleapis.com/maps/api/js"></script>
+  <script type="text/javascript" src="{{ url_for('static', filename='js/custom.js') }}"></script>
+
+   <script>
+      const realFileBtn = document.getElementById("real-file");
+      const customBtn = document.getElementById("custom-button");
+      const customTxt = document.getElementById("custom-text");
+
+      customBtn.addEventListener("click", function() {
+      realFileBtn.click();
+      });
+
+      realFileBtn.addEventListener("change", function() {
+      if (realFileBtn.value) {
+          customTxt.innerHTML = realFileBtn.value.match(
+          /[\/\\]([\w\d\s\.\-\(\)]+)$/
+          )[1];
+      } else {
+          customTxt.innerHTML = "No file chosen, yet.";
+      }
+      });
+
+    </script>
+</body>
+</html>
\ No newline at end of file
--- a/stress-detection/templates/stress_table.html
+++ b/stress-detection/templates/stress_table.html
+<!DOCTYPE html>
+<html>
+<title>Stress Detection</title>
+<body>
+<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
+
+<!-- Optional theme -->
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
+
+<!-- Latest compiled and minified JavaScript -->
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
+
+
+<style>
+
+    .container {
+
+        padding: 80px;
+    }
+    p{
+        text-align: center;
+    font-size: x-large;
+    font-weight: bold;
+    padding-top: 90px;
+    }
+
+    
+</style>
+
+<p>Stress Details</p>
+
+<div class="table-responsive container">
+  <table class="table">
+    <thead>
+        <tr>
+          
+          <th scope="col">Label</th>
+          <th scope="col">Accuracy</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">{{label}}</th>
+          <td>{{acc}}%</td>
+        </tr>
+      </tbody>
+  </table>
+  <div>
+  <a href="../templates/stress">
+    <button type="button"class="btn btn-primary" >BACK</button></a>
+  </div>
+</div>
+
+
+</body>
+</html>
\ No newline at end of file
--- a/stress-detection/templates/upload.html
+++ b/stress-detection/templates/upload.html
+<!DOCTYPE html>
+<html>
+
+<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
+
+<!-- Optional theme -->
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
+
+<!-- Latest compiled and minified JavaScript -->
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
+
+<title>Upload</title>
+<body>
+    <style>
+
+        .container {
+    
+            padding: 100px;
+            margin-left: 360px;
+        }
+        p{
+          
+            
+            text-align: inherit;
+            font-size: x-large;
+            font-weight: bold;
+            padding-top: 90px;
+        }
+    
+        
+    </style>
+
+    <div class="container">
+    <p>Insert your name{{training}}</p> <br><br>
+
+    <form action="http://127.0.0.1:5000/upload" method="post" enctype="multipart/form-data"  class="inline"  style="margin-left: 31%;">
+        <input type="file" name="file"  />
+        <input type="submit"  class="btn btn-primary btn-lg active "  value="Upload"  style="margin-top: -38px; margin-left: 205px;"/>
+    </form><br>
+
+    <div>
+
+</body>
+</html>
\ No newline at end of file