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

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

    <title>Speech Master</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" />

    <!--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" />

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

    <!-- SLEEK CSS -->
<!--    <link id="sleek-css" rel="stylesheet" href="assets/css/sleek.css" />-->

    <link href="https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css" rel="stylesheet" />

    <meta name="description"
        content="Responsive sidebar template with sliding effect and dropdown menu based on bootstrap 3" />
    <title>Sidebar</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>

    <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>

    <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>
   
</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>

            <nav id="navbar" class="navbar">
                <ul>
                    <li><a class="nav-link scrollto " href="Live Recorder.html">Record Live</a></li>
                    <li><a class="nav-link scrollto" href="reportFinal.html">Score</a></li>
                    <li><a class="nav-link scrollto" href="#">Feedbacks</a></li>
                    <li><a class="nav-link scrollto" href="#">Contribute</a></li>

                    <li><a class="nav-link scrollto" href="#contact">Contact</a></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="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 />

            </main>
            <h2 class="text-center">See your comments and suggestions!...</h2>
            <div class="bs-example d-flex justify-content-center">
                <!-- Button HTML (to Trigger Modal) -->
                <button type="button" class="btn btn-lg btn-outline-primary" data-toggle="modal" data-target="#myModal">
                    Emotions
                </button>
                <button type="button" class="btn btn-lg btn-outline-primary" data-toggle="modal"
                    data-target="#myModal1">
                    Content
                </button>
                <button type="button" class="btn btn-lg btn-outline-primary" data-toggle="modal"
                    data-target="#myModal2">
                    Flow of the speech
                </button>
                <button type="button" class="btn btn-lg btn-outline-primary" data-toggle="modal"
                    data-target="#myModal3">
                    Grammar
                </button>
                <button type="button" class="btn btn-lg btn-outline-primary" ng-click="webScraping()">
                    Web scraping
                </button>
                <button type="button" class="btn btn-lg btn-outline-primary" ng-click="suggestContent()">
                    Suggest content
                </button>

                <!-- Modal HTML -->
                <div id="myModal" class="modal fade" tabindex="-1">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Comments and Suggestions</h5>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col">
                                        <div class="card">
                                            <div class="card-header">
                                                <h1>Emotions</h1>
                                            </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>
                                                <h5 class="card-title-2">Emotion throughout the voice text</h5>
                                               
                                                <div>
                                                    <canvas id="myChart2"></canvas>
                                                </div>
                                                <hr>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">OK, Got it!</button>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Modal HTML -->
                <div id="myModal1" class="modal fade" tabindex="-1">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Comments and Suggestions</h5>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            <div class="modal-body">

                                <div class="row">
                                    <div class="col">
                                        <div class="card">
                                            <div class="card-header">
                                                <h1>Content </h1>
                                            </div>
                                            <div class="card-body">
                                                <br>
                                                <h2>Clearness</h2>
                                                <br>
                                                <h5 class="card-title">Identified over complex words</h5>
                                                
                                                <p class="card-text">{{clearnerssWordsResponse.message}}</p>
                                                <hr>

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

                                                <br>
                                                <h2>Introduction</h2>
                                                <br>
                                                <h5 class="card-title">Identified Introduction</h5>
                                                
                                                <p class="card-text">{{introductionFuncResponse.message}}</p>
                                                <hr>

                                                <h5 class="card-title">Identified best uses for introduction</h5>
                                                
                                                <p class="card-text">{{introductionBestUsesFuncResponse.message}}</p>
                                                
                                                <hr>

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

                                                <br>
                                                <h2>Conclusion</h2>
                                                <br>
                                                <h5 class="card-title">Identified conclusion</h5>
                                               
                                                <p class="card-text">{{conclusionResponse.message}}</p>
                                                <hr>

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

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

                                                <br>
                                                <h2>Other</h2>
                                                <br>
                                                <h5 class="card-title">Keywords in the speech</h5>
                                               
                                                <p class="card-text"><span
                                                        ng-repeat="comment in keywordExtractionResponse.message track by $index">{{comment}}</span>
                                                </p>
                                                <hr>

                                                <h5 class="card-title">Content relativity </h5>
                                               
                                                <p class="card-text">{{synonymsFunctionResponse.message}}</p>
                                                <hr>
                                                <h5 class="card-title">Quote </h5>
                                                <p class="card-text">Quote ({{quotesSentenceResponse.Quote >
                                                    quotesSentenceResponse.Normal ? 'Positive':'Negative'}})</p>
                                                <p class="card-text">{{quotesSentenceResponse.Quote}}</p>
                                                <hr>
                                                <h5 class="card-title">Normal </h5>
                                                <p class="card-text">Normal ({{quotesSentenceResponse.Normal >
                                                    quotesSentenceResponse.Quote ? 'Positive':'Negative'}})</p>
                                                <p class="card-text">{{quotesSentenceResponse.Normal}}</p>
                                                <hr>

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

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">OK, Got it!</button>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Modal HTML -->
                <div id="myModal2" class="modal fade" tabindex="-1">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Comments and Suggestions</h5>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            <div class="modal-body">
                                <div class="row mt-2">
                                    <div class="col">
                                        <div class="card">
                                            <div class="card-header">
                                                <h1>Flows of the speech</h1>
                                            </div>
                                            <div class="card-body">

                                                <h5 class="card-title">Double words</h5>
                                              
                                                <p class="card-text"><span
                                                        ng-repeat="comment in doubleWordsFuncResponse.message track by $index">{{comment}}</span>
                                                </p>

                                                
                                                <hr>

                                                <h5 class="card-title">Filler Words in your Speech</h5>
                                                <p class="card-text">{{fillerWordsFuncResponse.message}}</p>
                                                <hr>

                                                <h5 class="card-title">Scilence Count</h5>
                                               
                                                <p class="card-text">{{countPausesResponse.message}}</p>
                                                <hr>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">OK, Got it!</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal HTML -->
                <div id="myModal3" class="modal fade" tabindex="-1">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Comments and Suggestions</h5>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            <div class="modal-body">
                                <div class="row mt-2">
                                    <div class="col">
                                        <div class="card">
                                            <div class="card-header">
                                                <h1>Grammar</h1>
                                            </div>
                                            <div class="card-body">

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

                                                
                                                <h5> Grammatical Corrections</h5>
                                                <p class="card-title text-primary"> Correction | Action | Mistake</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>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">OK, Got it!</button>
                            </div>
                        </div>
                    </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 11 55488 55<br />
                            <strong>Email:</strong> Speechmaster@info.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 Community</h4>
                        <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">
                    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>

    <script>
        $("#myModal").on("show.bs.modal", function (event) {
            // Place the returned HTML into the selected element
            $(this).find(".modal-body").load("/examples/php/remote.php");
        });

    </script>


</body>

</html>