<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>File Uploader</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link
    href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
    rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">

  <!-- =======================================================
  * Template Name: OnePage - v4.3.0
  * Template URL: https://bootstrapmade.com/onepage-multipurpose-bootstrap-template/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
  <meta name="description"
    content="Responsive sidebar template with sliding effect and dropdown menu based on bootstrap 3" />
  <title>Sidebar template</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />
  <link rel="stylesheet" href="style-sideBar.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    .bs-example {
      margin: 20px;
    }

    .choose_file {
      margin: 20px;
    }

    #div3 {
      animation-timing-function: ease-in;
    }

    @keyframes mymove {
      from {
        left: 100px;
      }

      to {
        left: 400px;
      }
    }

    body {
      animation: transitionIn 2s;
    }

    @keyframes transitionIn {
      from {
        opacity: 0;
        transform: rotateX(-10deg);
      }

      to {
        opacity: 1;
        transform: rotateX(0);
      }
    }
  </style>
  <script>
    $(document).ready(function () {
      // Add minus icon for collapse element which is open by default
      $(".collapse.show").each(function () {
        $(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
      });

      // Toggle plus minus icon on show hide of collapse element
      $(".collapse").on('show.bs.collapse', function () {
        $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
      }).on('hide.bs.collapse', function () {
        $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
      });
    });
  </script>
  <style>
     @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', serif;
    /* background: #eee */
}

.content {
    width: 420px;
   
}

.ratings {
    /* background-color: #fff; */
    padding: 54px;
    /* border: 1px solid rgba(0, 0, 0, 0.1); */
    /* box-shadow: 0px 10px 10px #E0E0E0 */
}

.product-rating {
    font-size: 50px
}

.stars i {
    font-size: 18px;
    color: #28a745
}

.rating-text {
    margin-top: 10px
}
.navbar-default{background:#3285D1;border-color: #3285D1;}
/* .navbar-default .navbar-nav > li > a{color:#FFF;}
.nav > li > a{margin:15px; font-size: 17px; color:#FFF;} */
.nav .open > a, .nav .open > a:hover, 
.nav .open > a:focus,
.nav > li > a:hover, .nav > li > a:focus{background-color:transparent !important;}

.navbar-brand{    
    margin: 15px !important;
    padding: 13px !important;
    /* color: #fff !important; */
    font-size: 2em !important;
    font-weight: bold !Important;
    }
    
.navbar-toggle{margin-top:20px !important;}
/* .dropdown-menu{background:#fff !important;} */
.navbar-login
{
    width: 350px;
    padding: 10px;
    padding-bottom: 0px;
}

.navbar-login-session
{
    padding: 10px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.icon-size
{
    font-size: 87px;
}
  </style>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <script src="js/angular/angular.js"></script>
  <script src="js/angular/angular-route.js"></script>
  <script src="application.js"></script>
</head>

<body ng-app="myApp" ng-controller="MainController">

  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top">
    <div class="container d-flex align-items-center justify-content-between">

      <h1 class="logo"><a href="index.html">SPEECH MASTER</a></h1>
      <!-- Uncomment below if you prefer to use an image logo -->
      <!-- <a href="index.html" class="logo"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->

      <nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto " href="score report.html">Score</a></li>
          <li><a class="nav-link scrollto" href="reportFinal.html">Reports</a></li>
          <li><a class="nav-link scrollto" href="#">Feedbacks</a></li>
          <li><a class="nav-link scrollto" href="#">Contribute</a></li>
          <!-- <li class="dropdown"><a href="#"><span>Customized Analysis</span> <i class="bi bi-chevron-down"></i></a>
            <ul>
              <li><a href="#">Content</a></li>
              <li><a href="#">Expressions</a></li>
              <li><a href="#">Grammar</a></li>
              <li><a href="#">Flow of the speech</a></li>
            </ul>
          </li> -->
          <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
          <!-- <li><a class="getstarted scrollto" href="#about">Get Started</a></li> -->
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-user"></span> 
                    <strong>User</strong>
                    <span class="glyphicon glyphicon-chevron-down"></span>
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <div class="navbar-login">
                            <div class="row">
                                <div class="col-lg-4">
                                    <p class="text-center">
                                        <span class="glyphicon glyphicon-user icon-size">
                                            
                                        </span>
                                    </p>
                                </div>
                                <div class="col-lg-8">
                                    <p class="text-left"><strong>User</strong></p>
                                    <p class="text-left small">justdemo@gmail.com</p>
                                    <p class="text-left">
                                        <a href="#" class="btn btn-primary btn-block btn-sm">Logout</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <div class="navbar-login navbar-login-session">
                            <div class="row">
                                <div class="col-lg-12">
                                    <p>
                                        <a href="#" class="btn btn-primary btn-block">My Profile</a>
                                        <a href="#" class="btn btn-danger btn-block">Change Password</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header><!-- End Header -->

  <div id="hero" class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <main class="page-content">
        <div class="container-fluid">
          <br><br><br><br><br>
          <h1 class="text-center">SPEECH MASTER</h1>
          <br>
          <div id="div1" style="position: relative;
                    animation: mymove 5s infinite;">
            <h5>Upload your speech here!</h5>
          </div>

          <div class="choose_file">
            <form>
              <div class="custom-file">
                <input type="file" class="custom-file-input" id="customFile" onchange="angular.element(this).scope().selectAudioFile(this)">
                <label class="custom-file-label" for="customFile">{{audioFile ? audioFile.name+' File chosen':'Choose audio file'}}</label>
              </div>
              <div class="custom-file">
                <input type="file" class="custom-file-input" id="customFile2" onchange="angular.element(this).scope().selectVideoFile(this)">
                <label class="custom-file-label" for="customFile2">{{audioFile ? audioFile.name+' File chosen':'Choose video file'}}</label>
              </div>
            </form>
          </div>
          <div class="d-flex justify-content-center pt-3 pb-3">

            <form id="labnol" method="get" action="http://www.labnol.org">
              <div class="speech">
                <input type="text" name="s" id="transcript" placeholder="Say the topic of speech" ng-model="topic" />
                <img onclick="startDictation()" src="https://i.imgur.com/cHidSVu.gif" />
              </div>
            </form>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="form-group">
              <label for="exampleFormControlTextarea1">Audio text</label>
              <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" ng-model="audioText"></textarea>
            </div>
          </div>
        </div>
        <div class="d-flex justify-content-center">
          <button type="button" class="btn btn-primary" ng-click="processTheSpeech()">
            Continue
            <div class="spinner-border text-center" role="status" ng-if="loading">
              <span class="sr-only">Loading...</span>
            </div>
          </button>
        </div>
        <hr />
        <div class="d-flex justify-content-center">
          <div class="content text-center">
              <div class="ratings"> <span class="product-rating">4.6</span><span>/5</span>
                  <div class="stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div>
                  <div class="rating-text"> <span>46 ratings & 15 reviews</span> </div>
              </div>
          </div>
      </div>
        <!-- <div class="bs-example">
                    <div class="accordion" id="accordionExample">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <h2 class="mb-0">
                                    <button type="button" class="btn btn-link" data-toggle="collapse"
                                        data-target="#collapseOne">1. What is Speech Master?</button>
                                </h2>
                            </div>
                            <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
                                data-parent="#accordionExample">
                                <div class="card-body">
                                    <p>HTML stands for HyperText Markup Language. HTML is the standard markup language
                                        for
                                        describing the structure of web pages. <a
                                            href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn
                                            more.</a></p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo">
                                <h2 class="mb-0">
                                    <button type="button" class="btn btn-link collapsed" data-toggle="collapse"
                                        data-target="#collapseTwo">2. Is this free?</button>
                                </h2>
                            </div>
                            <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
                                data-parent="#accordionExample">
                                <div class="card-body">
                                    <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and
                                        easier web development. It is a collection of CSS and HTML conventions. <a
                                            href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/"
                                            target="_blank">Learn more.</a></p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree">
                                <h2 class="mb-0">
                                    <button type="button" class="btn btn-link collapsed" data-toggle="collapse"
                                        data-target="#collapseThree">3. What are services we can get from here?</button>
                                </h2>
                            </div>
                            <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                data-parent="#accordionExample">
                                <div class="card-body">
                                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style
                                        properties for a given HTML element such as colors, backgrounds, fonts etc. <a
                                            href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn
                                            more.</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
      </main>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col">
        <div class="card">
          <div class="card-header">
            Emotion
          </div>
          <div class="card-body">

            <h5 class="card-title">Emotion throughout the video</h5>
            <p class="card-text">Score: {{emotionScore}}</p>
            <div>
              <canvas id="myChart"></canvas>
            </div>
            <hr>

          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <div class="card">
          <div class="card-header">
            Content Analyzing
          </div>
          <div class="card-body">

            <h5 class="card-title">Identify ocer complex words</h5>
            <p class="card-text">Score: {{clearnerssWordsResponse.score}}</p>
            <p class="card-text">{{clearnerssWordsResponse.message}}</p>
            <hr>

            <h5 class="card-title">Identify over complex sentences</h5>
            <p class="card-text">Score: {{clearnerssSentenceResponse.score}}</p>
            <p class="card-text">{{clearnerssSentenceResponse.message}}</p>
            <hr>

            <h5 class="card-title">Count the total number of characters in the speech</h5>
            <p class="card-text">Score: {{conclusionResponse.score}}</p>
            <p class="card-text">{{conclusionResponse.message}}</p>
            <hr>

            <h5 class="card-title">identify best uses for introduction</h5>
            <p class="card-text">Score: {{commentsResponse.score}}</p>
            <p class="card-text"><span ng-repeat="comment in commentsResponse.message track by $index">{{comment}}</span></p>
            <hr>

            <h5 class="card-title">Identify questions that user used in  introduction</h5>
            <p class="card-text">Score: {{questionsResponse.score}}</p>
            <p class="card-text"><span ng-repeat="comment in questionsResponse.message track by $index">{{comment}}</span></p>
            <hr>

            <h5 class="card-title">Count the total number of characters in the speech</h5>
            <p class="card-text">Score: {{introductionFuncResponse.score}}</p>
            <p class="card-text">{{introductionFuncResponse.message}}</p>
            <hr>

            <h5 class="card-title">identify best uses for introduction</h5>
            <p class="card-text">Score: {{introductionFuncResponse.score}}</p>
            <p class="card-text">{{introductionFuncResponse.message}}</p>
            <hr>

            <h5 class="card-title">Identify questions that user used in  introduction</h5>
            <p class="card-text">Score: {{introductionBestUsesFuncResponse.score}}</p>
            <p class="card-text"><span ng-repeat="comment in introductionBestUsesFuncResponse.message track by $index">{{comment}}</span></p>
            <hr>

            <h5 class="card-title">Keyword count</h5>
            <p class="card-text">Score: {{keywordExtractionResponse.score}}</p>
            <p class="card-text"><span ng-repeat="comment in keywordExtractionResponse.message track by $index">{{comment}}</span></p>
            <hr>

            <h5 class="card-title">Synonyms</h5>
            <p class="card-text">Score: {{synonymsFunctionResponse.score}}</p>
            <p class="card-text">{{synonymsFunctionResponse.message}}</p>
            <hr>

          </div>
        </div>
      </div>
    </div>

    <div class="row mt-2">
      <div class="col">
        <div class="card">
          <div class="card-header">
            Flows of the speech
          </div>
          <div class="card-body">

            <h5 class="card-title">Double words</h5>
            <p class="card-text">Score: {{doubleWordsFuncResponse.score}}</p>
            <p class="card-text">{{doubleWordsFuncResponse.message}}</p>
            <hr>

            <h5 class="card-title">Filler Word in your Speech</h5>
            <hr>

            <h5 class="card-title">Pause count</h5>
            <p class="card-text">Score: {{countPausesResponse.score}}</p>
            <p class="card-text">{{countPausesResponse.message}}</p>
            <hr>

            <h5 class="card-title">Filler words count</h5>
            <p class="card-text">Score: {{countFillerWordsResponse.score}}</p>
            <p class="card-text">{{countFillerWordsResponse.message}}</p>
            <hr>

          </div>
        </div>
      </div>
    </div>

    <div class="row mt-2">
      <div class="col">
        <div class="card">
          <div class="card-header">
            Grammar
          </div>
          <div class="card-body">

            <h5 class="card-title">Grammar</h5>
            <p class="card-text">Score: {{grammarFuncResponse.score}}</p>
            <p class="card-text"><span ng-repeat="comment in grammarFuncResponse.message track by $index">{{comment}}</span></p>
            <hr>

            <h5 class="card-title">GingerIt</h5>
            <h5 class="card-title text-primary">Corrections</h5>
            <p class="card-text">Score: {{gingerItParseResponse.score}}</p>
            <p class="card-text" ng-repeat="comment in gingerItParseResponse.message.corrections track by $index">{{comment.correct}} | {{comment.definition}} | {{comment.text}}</p>
            <p class="card-text">{{gingerItParseResponse.message.result}}</p>
            <p class="card-text">{{gingerItParseResponse.message.text}}</p>
            <hr>

          </div>
        </div>
      </div>
    </div>
  </div>




  <!-- ======= Footer ======= -->
  <footer id="footer">
    <div class="footer-top">
      <div class="container">
        <div class="row">
          <div class="col-lg-3 col-md-6 footer-contact">
            <h3>SPEECH MASTER</h3>
            <p>
              SLIIT Mabalbe<br />
              <br /><br />
              <strong>Phone:</strong> +94 705694853<br />
              <strong>Email:</strong> janithaalas@gmail.com<br />
            </p>
          </div>

          <div class="col-lg-2 col-md-6 footer-links">
            <h4>Useful Links</h4>
            <ul>
              <li>
                <i class="bx bx-chevron-right"></i> <a href="#">Home</a>
              </li>
              <li>
                <i class="bx bx-chevron-right"></i> <a href="#">About us</a>
              </li>
              <li>
                <i class="bx bx-chevron-right"></i> <a href="#">Services</a>
              </li>
              <li>
                <i class="bx bx-chevron-right"></i>
                <a href="#">Terms of service</a>
              </li>
              <li>
                <i class="bx bx-chevron-right"></i>
                <a href="#">Privacy policy</a>
              </li>
            </ul>
          </div>

          <div class="col-lg-3 col-md-6 footer-links">
            <h4>Our Services</h4>
            <ul>
              <li>
                <i class="bx bx-chevron-right"></i> <a href="#">Content Analyzing</a>
              </li>
              <li>
                <i class="bx bx-chevron-right"></i>
                <a href="#">Facial Expressions Analyzing</a>
              </li>
              <li>
                <i class="bx bx-chevron-right"></i>
                <a href="#">Grammer Checking</a>
              </li>
              <li>
                <i class="bx bx-chevron-right"></i> <a href="#">Filler Words Tracking</a>
              </li>
              <li>
                <i class="bx bx-chevron-right"></i>
                <a href="#">Customized Report</a>
              </li>
            </ul>
          </div>

          <div class="col-lg-4 col-md-6 footer-newsletter">
            <h4>Join Our Newsletter</h4>
            <p>
              Tamen quem nulla quae legam multos aute sint culpa legam noster
              magna
            </p>
            <form action="" method="post">
              <input type="email" name="email" /><input type="submit" value="Subscribe" />
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="container d-md-flex py-4">
      <div class="me-md-auto text-center text-md-start">
        <div class="copyright">
          &copy; Copyright <strong><span>SPEECH MASTER</span></strong>. All Rights Reserved
        </div>
        <div class="credits">
          <!-- All the links in the footer should remain intact. -->
          <!-- You can delete the links only if you purchased the pro version. -->
          <!-- Licensing information: https://bootstrapmade.com/license/ -->
          <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/onepage-multipurpose-bootstrap-template/ -->
          Designed by <a href="https://www.sliit.lk/">SLIIT 2017 Batch</a>
        </div>
      </div>
      <div class="social-links text-center text-md-right pt-3 pt-md-0">
        <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
        <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
        <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
        <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
        <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
      </div>
    </div>
  </footer>
  <!-- End Footer -->


  <div id="preloader"></div>
  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
      class="bi bi-arrow-up-short"></i></a>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>
  <script src="assets/vendor/purecounter/purecounter.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>

  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>

</body>

</html>
