Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>Emotion Music Recommendation</title> | |
| <style> | |
| img { | |
| padding: 20px; | |
| display: inline-block; | |
| margin: auto; | |
| width: 85%; | |
| } | |
| </style> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" | |
| integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" /> | |
| <link href="https://fonts.googleapis.com/css2?family=Bigelow+Rules&display=swap" rel="stylesheet"> | |
| <link type="text/css" href="{{ url_for('static', filename='/css/style.css') }}" rel="stylesheet" /> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | |
| integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" | |
| crossorigin="anonymous"></script> | |
| </head> | |
| <body style = "margin: 0; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | |
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | |
| sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| background: #eff0f4"> | |
| <div id="body"> | |
| <div> | |
| <h1 align="center" style=" | |
| font-family: 'Bigelow Rules'; | |
| font-size: 72px; | |
| color: #0ccac4;"> | |
| Mood Music Recommender | |
| </h1> | |
| </div> | |
| <div style=" | |
| width: 50%; | |
| float: left; | |
| height: 100%%; | |
| margin: auto; | |
| padding-bottom:25px; | |
| text-align: center; | |
| "> | |
| <h2 align="center" style=" | |
| font-family: 'Bigelow Rules'; | |
| font-size: 36px; | |
| color: #0ccac4;">Emotion Detector | |
| </h2> | |
| <div style=" | |
| margin: 10px; | |
| text-align: center; | |
| width: 51%%; | |
| "> | |
| <img class ="outer-shadow" id="bg" class="center img-fluid" src="{{ url_for('video_feed') }}" /> | |
| </div> | |
| </div> | |
| <div style=" | |
| width: 50%; | |
| float: left; | |
| height: 100%%; | |
| margin: auto; | |
| text-align: center; | |
| "> | |
| <h2 align="center" style=" | |
| font-family: 'Bigelow Rules'; | |
| font-size: 36px; | |
| color: #0ccac4;">Song Recommendations | |
| </h2> | |
| </div> | |
| <div class ="outer-shadow" id="ResultArea" style=" | |
| padding: 15px; | |
| width: 49%; | |
| float: left; | |
| height: 100%%; | |
| margin: auto; | |
| text-align: center; | |
| margin-bottom:15px; | |
| "> | |
| </div> | |
| </div> | |
| </body> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script type=text/javascript> | |
| // Constantly Update Table | |
| setInterval(function() { | |
| $.getJSON('/t', function(data) { | |
| CreateHtmlTable(data); | |
| console.log(data,"DATA"); | |
| }); | |
| return false; | |
| }, 100); | |
| function CreateHtmlTable(data) { | |
| //Clear result div | |
| $("#ResultArea").html(""); | |
| //Crate table html tag | |
| var table = $("<table class = 'table table-striped table-light table-bordered table-hover table-sm table-responsive' id=DynamicTable></table>").appendTo("#ResultArea"); | |
| //Create table header row | |
| var rowHeader = | |
| $("<tr></tr>").appendTo(table); | |
| $("<td></td>").text("Name").appendTo(rowHeader); | |
| $("<td></td").text("Album").appendTo(rowHeader); | |
| $("<td></td>").text("Artist").appendTo(rowHeader) | |
| //Get JSON data by calling action method in controller | |
| $.each(data, function (i, value) { | |
| //Create new row for each record | |
| var row = | |
| $("<tr></tr>").appendTo(table); | |
| $("<td></td>").text(value.Name).appendTo(row); | |
| $("<td></td>").text(value.Album).appendTo(row); | |
| $("<td></td>").text(value.Artist).appendTo(row); | |
| }); | |
| } | |
| </script> | |
| </html> |