-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
205 lines (186 loc) · 7.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html>
<?php
header('Access-Control-Allow-Origins: *');
?>
<head>
<link rel="icon" href="images/film-spool.png" type="image/x-icon"/>
</head>
<title>Reel Ratings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Limelight">
<style>
body, h1, h2{font-family: "Raleway", sans-serif}
body, html {height: 100%}
p {line-height: 2}
.bgimg, .bgimg2 {
min-height: 100%;
background-position: center;
background-size: cover;
}
.bgimg {background-image: url("images/test.jpg")}
.bgimg2 {background-image: url("images/chairs.jpg")}
input {
width:100%
text-align: center
}
ul.b {
list-style-type: circle;
}
ul.a {
list-style-type: square;
}
</style>
<body>
<!-- Header / Home-->
<header class="w3-display-container w3-wide bgimg2 w3-grayscale-min" id="home">
<div class="w3-display-middle w3-text-white w3-center">
<h1 class="w3-jumbo" style="font-family: 'Limelight', cursive">Reel Ratings</h1></br>
<h2 id="output">Your Movie Rating Awaits</h2></br>
<input id="input"
type="text"
size="50"
onfocus="focusFuntion()"
value="Enter a movie Title"
class="w3-white w3-round w3-padding-large w3-large">
<p class="w3-center"><a onclick="getRating()" class="w3-button w3-black w3-round w3-padding-large w3-large">Get Rating</a></p>
</hr></br><p class="w3-center w3-round w3-padding-large w3-large" id="info" style="background: rgba(0,0,0,0.5)"></p>
</div>
</header>
</div>
</header>
<!-- Navbar (sticky bottom) -->
<div class="w3-bottom w3-hide-small">
<div class="w3-bar w3-white w3-center w3-padding w3-opacity-min w3-hover-opacity-off">
<a href="#home" style="width:25%" class="w3-bar-item w3-button">Home</a>
<a href="#us" style="width:25%" class="w3-bar-item w3-button">About Us</a>
<a href="#reel" style="width:25%" class="w3-bar-item w3-button">About Reel Ratings</a>
<a href="https://www.facebook.com/DataScienceUCSB/" style="width:25%" class="w3-bar-item w3-button w3-hover-black">UCSB Data Science</a>
</div>
</div>
<!-- About / US -->
<div class="w3-container w3-padding-64 w3-khaki w3-grayscale-min" id="us">
<div class="w3-content">
<h1 class="w3-center w3-text-black"><b>Reel Ratings Team</b></h1>
<img class="w3-round" src="images/ReelTeam.jpg" style="width:100%;margin:32px 0">
<p>Contributors: (Left to Right)</br>
<ul class="a">
<li>Danielle Robinson (Data Query)</li>
<li>Victoria Sneddon (Project Manager)</li>
<li>Brandon Tran (Data Query)</li>
<li>Jake Hickey (Statistical Analysis)</li>
<li>Ari Gilmore (Statistical Analysis)</li>
<li>Andrew Polk (Everything)</li>
<li>Ivy Tran (Statistical Analysis)</li></br></br>
<i>In September 2017, we joined forces under UCSB's Data Science Club with the ambitious idea of creating a website that would predict movie ratings. We are a small group of 3rd year UCSB students with majors ranging from Computer Engineering to Actuarial Science. </i>
</p><br>
<!-- <p class="w3-center"><a class="w3-button w3-black w3-round w3-padding-large w3-large">Details</a></p> -->
</div>
</div>
<!-- About / Reel Ratings -->
<div class="w3-container w3-padding-64 w3-black w3-grayscale-min" id="reel">
<div class="w3-content">
<h1 class="w3-center w3-text-white"><b>About Reel Ratings</b></h1>
<p>
</br>
The goal of this project is to predict the movie rating of a movie title entered by the user. Our prediction relies on IMDb and TMDb datasets, using our statistical model. We also implemented a rudimentary algorithm that allows the model to learn and improve from past predictions. </br></br>
<h3>Aspects</h3>
<ul class="a">
<li>TheMovieDb API -movie parameters (actors, directors, budget etc.)</li>
<li>IMDb dataset from AWS -ratings from previous movies</li>
<li>Data Algorithms (weighting actors vs. directors vs. budget…)</li>
<li>Query data about movie title or movie id to get parameters</li>
<li>Query previous ratings of rating parameters</li>
<li>Storing data to be accessed and used from different parts of the program</li>
<li>Statistical analysis on ratings (Data algorithms, linear recursion)</li>
<li>An interface/web app to take input and display results</li>
</ul></br>
<h3>Parameters in Use/Planned</h3>
<ul class="a">
<li>Average movie rating</li>
<li>Actor movie ratings</li>
<li>Directors</li>
<li>Producers</li>
<li>Studio</li>
<li>Writers</li>
<li>Genre</li>
</ul>
<ul class="b">
<li>Budget</li>
<li>Cinematographer</li>
<li>Music Composer</li>
<li>More to Come...</li>
</ul></br>
<!-- <img class="w3-round" src="MovieRatings.png" style="width:100%;margin:32px 0"> -->
</p><br>
<p class="w3-center"><a href="https://github.com/UCSB-dataScience-ProjectGroup/movie_rating_prediction" class="w3-button w3-white w3-round w3-padding-large w3-large">Visit the Repo</a></p>
</div>
</div>
<!-- Footer -->
<footer class="w3-center w3-black w3-padding-16">
<p>Powered by <a href="https://www.polklabs.com" title="PolkLabs.com" target="_blank" class="w3-hover-text-green">PolkLabs</a></p>
</footer>
<div class="w3-hide-small" style="margin-bottom:32px"> </div></br>
<script>
document.getElementById("input").onkeydown = function(event) {
if(event.keyCode == 13) {
getRating();
}
}
function focusFuntion() {
document.getElementById("input").value = "";
document.getElementById("input").style="w3-text-black";
}
var loading = false;
function getRating() {
var xhr = new XMLHttpRequest();
var input = document.getElementById("input").value;
document.getElementById("input").blur()
document.getElementById("input").value = "Enter another movie Title";
document.getElementById("info").innerHTML = "This can take a minute if you're the first one searching for '"+input+"'.</br>Please be patient!";
document.getElementById("input").style="w3-text-light-grey";
xhr.open('GET', host="https://pi1.polklabs.com"+"/find/"+input, true);
xhr.setRequestHeader("Access-Control-Allow-Origins", "*")
xhr.withCredentials = true;
document.getElementById("output").innerHTML="Computing '"+input+"'<i id='dotting'></i>";
loading = true;
xhr.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
var obj = JSON.parse(this.responseText);
document.getElementById("output").innerHTML=("<b>"+obj.Name+"</b> gets a <b>"+obj.Average+"/10</b>");
var rating = "unknown.</br>I don't have that movie in my database."
if (obj.Actual != "0" && obj.Id != -1) {
rating = obj.Actual+"/10, I was off by "+obj.Error+"%. </br>I'll do better next time";
}
if(obj.Id != -1){
if(obj.hasOwnProperty('Imdb_id')){
rating += "</br><a href='https://www.imdb.com/title/"+obj.Imdb_id+"/' title='www.imdb.com' target='_blank'>IMDB</a>";
}
rating += "</br><a href='https://www.themoviedb.org/movie/"+obj.Id+"' title='www.themoviedb.com' target='_blank'>The Movie Database</a>";
}
document.getElementById("info").innerHTML=("The actual rating of '"+obj.Name+"' is "+rating);
}
else if(this.status == 0) {
document.getElementById("output").innerHTML="Server Error: Please try again later.";
}
loading = false;
};
xhr.send();
}
var dots = window.setInterval( function() {
if(loading == true) {
var waiting = document.getElementById("dotting");
if(waiting.innerHTML == "..."){
waiting.innerHTML="";
}
else {
waiting.innerHTML+=".";
}
}
}, 250);
</script>
</body>
</html>