Upload 12 files

main.py

@@ -0,0 +1,137 @@
+import numpy as np
+import pandas as pd
+from flask import Flask, render_template, request
+from sklearn.feature_extraction.text import CountVectorizer
+from sklearn.metrics.pairwise import cosine_similarity
+import json
+import bs4 as bs
+import urllib.request
+import pickle
+import requests
+from datetime import date, datetime
+
+# load the nlp model and tfidf vectorizer from disk
+filename = 'nlp_model.pkl'
+clf = pickle.load(open(filename, 'rb'))
+vectorizer = pickle.load(open('tranform.pkl','rb'))
+    
+# converting list of string to list (eg. "["abc","def"]" to ["abc","def"])
+def convert_to_list(my_list):
+    my_list = my_list.split('","')
+    my_list[0] = my_list[0].replace('["','')
+    my_list[-1] = my_list[-1].replace('"]','')
+    return my_list
+
+# convert list of numbers to list (eg. "[1,2,3]" to [1,2,3])
+def convert_to_list_num(my_list):
+    my_list = my_list.split(',')
+    my_list[0] = my_list[0].replace("[","")
+    my_list[-1] = my_list[-1].replace("]","")
+    return my_list
+
+def get_suggestions():
+    data = pd.read_csv('main_data.csv')
+    return list(data['movie_title'].str.capitalize())
+
+app = Flask(__name__)
+
+@app.route("/")
+@app.route("/home")
+def home():
+    suggestions = get_suggestions()
+    return render_template('home.html',suggestions=suggestions)
+
+
+@app.route("/recommend",methods=["POST"])
+def recommend():
+    # getting data from AJAX request
+    title = request.form['title']
+    cast_ids = request.form['cast_ids']
+    cast_names = request.form['cast_names']
+    cast_chars = request.form['cast_chars']
+    cast_bdays = request.form['cast_bdays']
+    cast_bios = request.form['cast_bios']
+    cast_places = request.form['cast_places']
+    cast_profiles = request.form['cast_profiles']
+    imdb_id = request.form['imdb_id']
+    poster = request.form['poster']
+    genres = request.form['genres']
+    overview = request.form['overview']
+    vote_average = request.form['rating']
+    vote_count = request.form['vote_count']
+    rel_date = request.form['rel_date']
+    release_date = request.form['release_date']
+    runtime = request.form['runtime']
+    status = request.form['status']
+    rec_movies = request.form['rec_movies']
+    rec_posters = request.form['rec_posters']
+    rec_movies_org = request.form['rec_movies_org']
+    rec_year = request.form['rec_year']
+    rec_vote = request.form['rec_vote']
+
+    # get movie suggestions for auto complete
+    suggestions = get_suggestions()
+
+    # call the convert_to_list function for every string that needs to be converted to list
+    rec_movies_org = convert_to_list(rec_movies_org)
+    rec_movies = convert_to_list(rec_movies)
+    rec_posters = convert_to_list(rec_posters)
+    cast_names = convert_to_list(cast_names)
+    cast_chars = convert_to_list(cast_chars)
+    cast_profiles = convert_to_list(cast_profiles)
+    cast_bdays = convert_to_list(cast_bdays)
+    cast_bios = convert_to_list(cast_bios)
+    cast_places = convert_to_list(cast_places)
+    
+    # convert string to list (eg. "[1,2,3]" to [1,2,3])
+    cast_ids = convert_to_list_num(cast_ids)
+    rec_vote = convert_to_list_num(rec_vote)
+    rec_year = convert_to_list_num(rec_year)
+    
+    # rendering the string to python string
+    for i in range(len(cast_bios)):
+        cast_bios[i] = cast_bios[i].replace(r'\n', '\n').replace(r'\"','\"')
+
+    for i in range(len(cast_chars)):
+        cast_chars[i] = cast_chars[i].replace(r'\n', '\n').replace(r'\"','\"') 
+    
+    # combining multiple lists as a dictionary which can be passed to the html file so that it can be processed easily and the order of information will be preserved
+    movie_cards = {rec_posters[i]: [rec_movies[i],rec_movies_org[i],rec_vote[i],rec_year[i]] for i in range(len(rec_posters))}
+
+    casts = {cast_names[i]:[cast_ids[i], cast_chars[i], cast_profiles[i]] for i in range(len(cast_profiles))}
+
+    cast_details = {cast_names[i]:[cast_ids[i], cast_profiles[i], cast_bdays[i], cast_places[i], cast_bios[i]] for i in range(len(cast_places))}
+
+    # web scraping to get user reviews from IMDB site
+    sauce = urllib.request.urlopen('https://www.imdb.com/title/{}/reviews?ref_=tt_ov_rt'.format(imdb_id)).read()
+    soup = bs.BeautifulSoup(sauce,'lxml')
+    soup_result = soup.find_all("div",{"class":"text show-more__control"})
+
+    reviews_list = [] # list of reviews
+    reviews_status = [] # list of comments (good or bad)
+    for reviews in soup_result:
+        if reviews.string:
+            reviews_list.append(reviews.string)
+            # passing the review to our model
+            movie_review_list = np.array([reviews.string])
+            movie_vector = vectorizer.transform(movie_review_list)
+            pred = clf.predict(movie_vector)
+            reviews_status.append('Positive' if pred else 'Negative')
+
+    # getting current date
+    movie_rel_date = ""
+    curr_date = ""
+    if(rel_date):
+        today = str(date.today())
+        curr_date = datetime.strptime(today,'%Y-%m-%d')
+        movie_rel_date = datetime.strptime(rel_date, '%Y-%m-%d')
+
+    # combining reviews and comments into a dictionary
+    movie_reviews = {reviews_list[i]: reviews_status[i] for i in range(len(reviews_list))}     
+
+    # passing all the data to the html file
+    return render_template('recommend.html',title=title,poster=poster,overview=overview,vote_average=vote_average,
+        vote_count=vote_count,release_date=release_date,movie_rel_date=movie_rel_date,curr_date=curr_date,runtime=runtime,status=status,genres=genres,movie_cards=movie_cards,reviews=movie_reviews,casts=casts,cast_details=cast_details)
+
+if __name__ == '__main__':
+    app.run(debug=True)

nlp_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d7f74f92a7c9fc61fc323aa41fc8485b5c76d5c6e6b5d6382eab91d3e2fa7629
+size 64953

requirements.txt

@@ -0,0 +1,17 @@
+Flask==1.1.1
+gunicorn==19.9.0
+Jinja2==2.10.1
+MarkupSafe==1.1.1
+Werkzeug==0.15.5
+numpy>=1.9.2
+scipy>=0.15.1
+nltk==3.5
+scikit-learn>=0.18
+pandas>=0.19
+beautifulsoup4==4.9.1
+jsonschema==3.2.0
+tmdbv3api==1.6.1
+lxml==4.6.2
+urllib3==1.25.9
+requests==2.23.0
+pickleshare==0.7.5

static/autocomplete.js

@@ -0,0 +1,36 @@
+new autoComplete({
+    data: {                              // Data src [Array, Function, Async] | (REQUIRED)
+      src: films,
+    },
+    selector: "#autoComplete",           // Input field selector              | (Optional)
+    threshold: 2,                        // Min. Chars length to start Engine | (Optional)
+    debounce: 100,                       // Post duration for engine to start | (Optional)
+    searchEngine: "strict",              // Search Engine type/mode           | (Optional)
+    resultsList: {                       // Rendered results list object      | (Optional)
+        render: true,
+        container: source => {
+            source.setAttribute("id", "food_list");
+        },
+        destination: document.querySelector("#autoComplete"),
+        position: "afterend",
+        element: "ul"
+    },
+    maxResults: 5,                         // Max. number of rendered results | (Optional)
+    highlight: true,                       // Highlight matching results      | (Optional)
+    resultItem: {                          // Rendered result item            | (Optional)
+        content: (data, source) => {
+            source.innerHTML = data.match;
+        },
+        element: "li"
+    },
+    noResults: () => {                     // Action script on noResults      | (Optional)
+        const result = document.createElement("li");
+        result.setAttribute("class", "no_result");
+        result.setAttribute("tabindex", "1");
+        result.innerHTML = "No Results";
+        document.querySelector("#autoComplete_list").appendChild(result);
+    },
+    onSelection: feedback => {             // Action script onSelection event | (Optional)
+        document.getElementById('autoComplete').value = feedback.selection.value;
+    }
+});

static/recommend.js

@@ -0,0 +1,351 @@
+$(function() {
+  // Button will be disabled until we type something inside the input field
+  const source = document.getElementById('autoComplete');
+  const inputHandler = function(e) {
+    if(e.target.value==""){
+      $('.movie-button').attr('disabled', true);
+    }
+    else{
+      $('.movie-button').attr('disabled', false);
+    }
+  }
+  source.addEventListener('input', inputHandler);
+
+  $('.fa-arrow-up').click(function(){
+    $('html, body').animate({scrollTop:0}, 'slow');
+  });
+
+  $('.app-title').click(function(){
+    window.location.href = '/';
+  })
+
+  $('.movie-button').on('click',function(){
+    var my_api_key = '5492165c61b1a21c06eb3a3b578a6339';
+    var title = $('.movie').val();
+    if (title=="") {
+      $('.results').css('display','none');
+      $('.fail').css('display','block');
+    }
+
+    if (($('.fail').text() && ($('.footer').css('position') == 'absolute'))) {
+      $('.footer').css('position', 'fixed');
+    }
+
+    else{
+      load_details(my_api_key,title);
+    }
+  });
+});
+
+// will be invoked when clicking on the recommended movie cards
+function recommendcard(e){
+  $("#loader").fadeIn();
+  var my_api_key = '5492165c61b1a21c06eb3a3b578a6339';
+  var title = e.getAttribute('title'); 
+  load_details(my_api_key,title);
+}
+
+
+// get the details of the movie from the API (based on the name of the movie)
+function load_details(my_api_key,title){
+  $.ajax({
+    type: 'GET',
+    url:'https://api.themoviedb.org/3/search/movie?api_key='+my_api_key+'&query='+title,
+    async: false,
+    success: function(movie){
+      if(movie.results.length<1){
+        $('.fail').css('display','block');
+        $('.results').css('display','none');
+        $("#loader").delay(500).fadeOut();
+      }
+      else if(movie.results.length==1) {
+        $("#loader").fadeIn();
+        $('.fail').css('display','none');
+        $('.results').delay(1000).css('display','block');
+        var movie_id = movie.results[0].id;
+        var movie_title = movie.results[0].title;
+        var movie_title_org = movie.results[0].original_title;
+        get_movie_details(movie_id,my_api_key,movie_title,movie_title_org);
+      }
+      else{
+        var close_match = {};
+        var flag=0;
+        var movie_id="";
+        var movie_title="";
+        var movie_title_org="";
+        $("#loader").fadeIn();
+        $('.fail').css('display','none');
+        $('.results').delay(1000).css('display','block');
+        for(var count in movie.results){
+          if(title==movie.results[count].original_title){
+            flag = 1;
+            movie_id = movie.results[count].id;
+            movie_title = movie.results[count].title;
+            movie_title_org = movie.results[count].original_title;
+            break;
+          }
+          else{
+            close_match[movie.results[count].title] = similarity(title,  movie.results[count].title);
+          }
+        }
+        if(flag==0){
+          movie_title = Object.keys(close_match).reduce(function(a, b){ return close_match[a] > close_match[b] ? a : b });
+          var index = Object.keys(close_match).indexOf(movie_title)
+          movie_id = movie.results[index].id;
+          movie_title_org = movie.results[index].original_title;
+        }
+        get_movie_details(movie_id,my_api_key,movie_title,movie_title_org);
+      }
+    },
+    error: function(error){
+      alert('Invalid Request - '+error);
+      $("#loader").delay(500).fadeOut();
+    },
+  });
+}
+
+// getting closest match to the requested movie name using Levenshtein distance
+function similarity(s1, s2) {
+  var longer = s1;
+  var shorter = s2;
+  if (s1.length < s2.length) {
+    longer = s2;
+    shorter = s1;
+  }
+  var longerLength = longer.length;
+  if (longerLength == 0) {
+    return 1.0;
+  }
+  return (longerLength - editDistance(longer, shorter)) / parseFloat(longerLength);
+}
+
+function editDistance(s1, s2) {
+  s1 = s1.toLowerCase();
+  s2 = s2.toLowerCase();
+
+  var costs = new Array();
+  for (var i = 0; i <= s1.length; i++) {
+    var lastValue = i;
+    for (var j = 0; j <= s2.length; j++) {
+      if (i == 0)
+        costs[j] = j;
+      else {
+        if (j > 0) {
+          var newValue = costs[j - 1];
+          if (s1.charAt(i - 1) != s2.charAt(j - 1))
+            newValue = Math.min(Math.min(newValue, lastValue),
+              costs[j]) + 1;
+          costs[j - 1] = lastValue;
+          lastValue = newValue;
+        }
+      }
+    }
+    if (i > 0)
+      costs[s2.length] = lastValue;
+  }
+  return costs[s2.length];
+}
+
+// get all the details of the movie using the movie id.
+function get_movie_details(movie_id,my_api_key,movie_title,movie_title_org) {
+  $.ajax({
+    type:'GET',
+    url:'https://api.themoviedb.org/3/movie/'+movie_id+'?api_key='+my_api_key,
+    success: function(movie_details){
+      show_details(movie_details,movie_title,my_api_key,movie_id,movie_title_org);
+    },
+    error: function(error){
+      alert("API Error! - "+error);
+      $("#loader").delay(500).fadeOut();
+    },
+  });
+}
+
+// passing all the details to python's flask for displaying and scraping the movie reviews using imdb id
+function show_details(movie_details,movie_title,my_api_key,movie_id,movie_title_org){
+  var imdb_id = movie_details.imdb_id;
+  var poster;
+  if(movie_details.poster_path){
+    poster = 'https://image.tmdb.org/t/p/original'+movie_details.poster_path;
+  }
+  else {
+    poster = 'static/default.jpg';
+  }
+  var overview = movie_details.overview;
+  var genres = movie_details.genres;
+  var rating = movie_details.vote_average;
+  var vote_count = movie_details.vote_count;
+  var release_date = movie_details.release_date;
+  var runtime = parseInt(movie_details.runtime);
+  var status = movie_details.status;
+  var genre_list = []
+  for (var genre in genres){
+    genre_list.push(genres[genre].name);
+  }
+  var my_genre = genre_list.join(", ");
+  if(runtime%60==0){
+    runtime = Math.floor(runtime/60)+" hour(s)"
+  }
+  else {
+    runtime = Math.floor(runtime/60)+" hour(s) "+(runtime%60)+" min(s)"
+  }
+
+  // calling `get_movie_cast` to get the top cast for the queried movie
+  movie_cast = get_movie_cast(movie_id,my_api_key);
+  
+  // calling `get_individual_cast` to get the individual cast details
+  ind_cast = get_individual_cast(movie_cast,my_api_key);
+
+  // calling `get_recommendations` to get the recommended movies for the given movie id from the TMDB API
+  recommendations = get_recommendations(movie_id, my_api_key);
+  
+  details = {
+      'title':movie_title,
+      'cast_ids':JSON.stringify(movie_cast.cast_ids),
+      'cast_names':JSON.stringify(movie_cast.cast_names),
+      'cast_chars':JSON.stringify(movie_cast.cast_chars),
+      'cast_profiles':JSON.stringify(movie_cast.cast_profiles),
+      'cast_bdays':JSON.stringify(ind_cast.cast_bdays),
+      'cast_bios':JSON.stringify(ind_cast.cast_bios),
+      'cast_places':JSON.stringify(ind_cast.cast_places),
+      'imdb_id':imdb_id,
+      'poster':poster,
+      'genres':my_genre,
+      'overview':overview,
+      'rating':rating,
+      'vote_count':vote_count.toLocaleString(),
+      'rel_date':release_date,  
+      'release_date':new Date(release_date).toDateString().split(' ').slice(1).join(' '),
+      'runtime':runtime,
+      'status':status,
+      'rec_movies':JSON.stringify(recommendations.rec_movies),
+      'rec_posters':JSON.stringify(recommendations.rec_posters),
+      'rec_movies_org':JSON.stringify(recommendations.rec_movies_org),
+      'rec_year':JSON.stringify(recommendations.rec_year),
+      'rec_vote':JSON.stringify(recommendations.rec_vote)
+  }
+
+  $.ajax({
+    type:'POST',
+    data:details,
+    url:"/recommend",
+    dataType: 'html',
+    complete: function(){
+      $("#loader").delay(500).fadeOut();
+    },
+    success: function(response) {
+      $('.results').html(response);
+      $('#autoComplete').val('');
+      $('.footer').css('position','absolute');
+      if ($('.movie-content')) {
+        $('.movie-content').after('<div class="gototop"><i title="Go to Top" class="fa fa-arrow-up"></i></div>');
+      }
+      $(window).scrollTop(0);
+    }
+  });
+}
+
+// getting the details of individual cast
+function get_individual_cast(movie_cast,my_api_key) {
+    cast_bdays = [];
+    cast_bios = [];
+    cast_places = [];
+    for(var cast_id in movie_cast.cast_ids){
+      $.ajax({
+        type:'GET',
+        url:'https://api.themoviedb.org/3/person/'+movie_cast.cast_ids[cast_id]+'?api_key='+my_api_key,
+        async:false,
+        success: function(cast_details){
+          cast_bdays.push((new Date(cast_details.birthday)).toDateString().split(' ').slice(1).join(' '));
+          if(cast_details.biography){
+            cast_bios.push(cast_details.biography);
+          }
+          else {
+            cast_bios.push("Not Available");
+          }
+          if(cast_details.place_of_birth){
+            cast_places.push(cast_details.place_of_birth);
+          }
+          else {
+            cast_places.push("Not Available");
+          }
+        }
+      });
+    }
+    return {cast_bdays:cast_bdays,cast_bios:cast_bios,cast_places:cast_places};
+  }
+
+// getting the details of the cast for the requested movie
+function get_movie_cast(movie_id,my_api_key){
+    cast_ids= [];
+    cast_names = [];
+    cast_chars = [];
+    cast_profiles = [];
+    top_10 = [0,1,2,3,4,5,6,7,8,9];
+    $.ajax({
+      type:'GET',
+      url:"https://api.themoviedb.org/3/movie/"+movie_id+"/credits?api_key="+my_api_key,
+      async:false,
+      success: function(my_movie){
+        if(my_movie.cast.length>0){
+          if(my_movie.cast.length>=10){
+            top_cast = [0,1,2,3,4,5,6,7,8,9];
+          }
+          else {
+            top_cast = [0,1,2,3,4];
+          }
+          for(var my_cast in top_cast){
+            cast_ids.push(my_movie.cast[my_cast].id)
+            cast_names.push(my_movie.cast[my_cast].name);
+            cast_chars.push(my_movie.cast[my_cast].character);
+            if(my_movie.cast[my_cast].profile_path){
+              cast_profiles.push("https://image.tmdb.org/t/p/original"+my_movie.cast[my_cast].profile_path);
+            }
+            else {
+              cast_profiles.push("static/default.jpg");
+            }
+          }
+        }
+      },
+      error: function(error){
+        alert("Invalid Request! - "+error);
+        $("#loader").delay(500).fadeOut();
+      }
+    });
+
+    return {cast_ids:cast_ids,cast_names:cast_names,cast_chars:cast_chars,cast_profiles:cast_profiles};
+  }
+
+  // getting recommendations
+  function get_recommendations(movie_id, my_api_key) {
+    rec_movies = [];
+    rec_posters = [];
+    rec_movies_org = [];
+    rec_year = [];
+    rec_vote = [];
+    
+    $.ajax({
+      type: 'GET',
+      url: "https://api.themoviedb.org/3/movie/"+movie_id+"/recommendations?api_key="+my_api_key,
+      async: false,
+      success: function(recommend) {
+        for(var recs in recommend.results) {
+          rec_movies.push(recommend.results[recs].title);
+          rec_movies_org.push(recommend.results[recs].original_title);
+          rec_year.push(new Date(recommend.results[recs].release_date).getFullYear());
+          rec_vote.push(recommend.results[recs].vote_average);
+          if(recommend.results[recs].poster_path){
+            rec_posters.push("https://image.tmdb.org/t/p/original"+recommend.results[recs].poster_path);
+          }
+          else {
+            rec_posters.push("static/default.jpg");
+          }
+        }
+      },
+      error: function(error) {
+        alert("Invalid Request! - "+error);
+        $("#loader").delay(500).fadeOut();
+      }
+    });
+    return {rec_movies:rec_movies,rec_movies_org:rec_movies_org,rec_posters:rec_posters,rec_year:rec_year,rec_vote:rec_vote};
+  }

static/style.css

@@ -0,0 +1,310 @@
+/* width */
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+ 
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #e50914; 
+  border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #b30000; 
+}
+
+.movie {
+	color: #fff;
+	margin-left: auto;
+	margin-right: auto;
+	resize: none;
+}
+
+.movie-content {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content:center;
+}
+
+.movie-content > div {
+    margin:20px;
+}
+
+.btn-block{
+	width: 15%;
+	text-align: center;
+	margin-left: auto;
+	margin-right: auto;
+	color: #e4e0e0;
+}
+
+#content {
+	background-image: url("../static/image.jpg");
+	background-color: #181818;
+	font-family: 'Noto Sans JP', sans-serif;
+}
+
+#details {
+	margin-left: 50px;
+}
+
+.body-content {
+	position: relative;
+  	min-height: 100%;
+}
+
+.footer {
+	color: #e4e0e0;
+	background-color: #e50914d1;
+	text-align:center;
+	position: fixed;
+	bottom: 0;
+ 	width: 100%;
+}
+
+.social-icons {
+	margin-left: 15px;
+}
+
+h1 {
+    font-family: 'Netflix Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    color: #e50914;
+    font-weight: bold;
+    margin-top: 30px;
+    text-shadow: #000000 0px 0px 13px;
+ }
+
+.github-corner:hover .octo-arm {
+  	animation: octocat-wave 560ms ease-in-out;
+}
+
+.fa-arrow-up {
+	font-size: 1.5em;
+	color: #ffffff;
+    background: #e50914;
+    padding: 10px;
+	border-radius: 50%;
+	float: right;
+    bottom: 25px;
+    position: relative;
+}
+
+.fa-arrow-up:hover {
+	cursor: pointer;
+}
+
+.app-title:hover {
+	cursor: pointer;
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0)
+  }
+
+  20%,
+  60% {
+    transform: rotate(-25deg)
+  }
+
+  40%,
+  80% {
+    transform: rotate(10deg)
+  }
+}
+
+#autoComplete {
+  background-position: 98% ;
+}
+
+#name {
+	color: white;
+	padding: 1px;
+}
+
+h6 {
+    margin-bottom: 20px;  
+}
+
+@media only screen and (max-width: 650px) {
+    #mcontent {
+      display: block;
+    }
+    .poster-lg {
+      display: none;
+    }
+    #details {
+		margin-left: 30px;
+	}
+    #loader {
+		display: none;
+		position: fixed;
+		z-index: 100;
+		left: 0;
+		top:0;
+		width: 100%;
+		height: 100%;
+		background-image: url("../static/loader.gif");
+		background-size: 40%;
+		background-position: 50% 50%;
+		background-color: rgba(255, 255, 255, 1);
+		background-repeat: no-repeat;
+		-webkit-transition: background-image 0.2s ease-in-out;
+		transition: background-image 0.2s ease-in-out;
+	}
+
+	#loader-text {
+		vertical-align: middle;
+		color:white;
+	}
+
+	#autoComplete {
+	  background-position: 97% ;
+	}
+	
+	svg[data-toggle=tooltip] {
+		width: 50px;
+		height: 50px;
+	}
+
+	.fa-arrow-up{
+		font-size: 1em;
+		color: #ffffff;
+		background: #e50914;
+		padding: 10px;
+		border-radius: 50%;
+		float: right;
+		bottom: 10px;
+		position: relative;
+	}
+}
+
+@media only screen and (max-width: 991px) {
+	.modal-body{
+		display: block;
+	}
+	.profile-pic {
+		margin-left: auto;
+		margin-right: auto;
+		display: block;
+		margin-bottom: 20px;
+	}
+}
+@media only screen and (min-width: 992px) {
+	.modal-body {
+		display: flex;
+	}
+}
+
+@media only screen and (min-width: 651px) {
+  .poster-sm {
+    display: none;
+   }
+
+	#mcontent {
+		display: flex;
+		flex-wrap: nowrap;
+	}
+
+	#loader {
+		display: none;
+		position: fixed;
+		z-index: 100;
+		left: 0;
+		top:0;
+		width: 100%;
+		height: 100%;
+		background-image: url("../static/loader.gif");
+		background-size: 20%;
+		background-position: 50% 50%;
+		background-color: rgba(255, 255, 255, 1);
+		background-repeat: no-repeat;
+		-webkit-transition: background-image 0.2s ease-in-out;
+		transition: background-image 0.2s ease-in-out;
+	}
+
+	#loader-text {
+		vertical-align: middle;
+		color:white;
+	}
+
+}
+
+.poster{
+    -webkit-box-shadow: 0px 1px 15px 4px rgba(250,250,250,1);
+    -moz-box-shadow: 0px 1px 15px 4px rgba(250,250,250,1);
+    box-shadow: 0px 1px 15px 4px rgba(250,250,250,1);
+}
+
+.card:hover {
+	cursor: pointer;
+}
+
+.castcard:hover {
+    cursor: pointer;
+}
+
+.cast-img {
+	filter: brightness(100%);
+	-moz-transition: all 0.75s ease;
+    -webkit-transition: all 0.75s ease;
+	transition: all 0.75s ease;
+}
+
+
+.cast-img:hover {
+	filter: brightness(50%);
+	-moz-transition: all 0.75s ease;
+    -webkit-transition: all 0.75s ease;
+    transition: all 0.75s ease;
+}
+
+.fig {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	backdrop-filter: brightness(50%);
+	position: absolute;
+	bottom: 0px;
+	top: 0px;
+	right: 0px;
+	left: 0px;
+	opacity: 0;
+	-moz-transition: all 0.75s ease;
+    -webkit-transition: all 0.75s ease;
+    transition: all 0.75s ease;
+}
+
+.fig:hover {
+	opacity: 1;
+	backdrop-filter:br;
+	-moz-transition: all 0.75s ease;
+    -webkit-transition: all 0.75s ease;
+    transition: all 0.75s ease;
+}
+
+.card-btn {
+	border-radius: 20px;
+}
+
+.imghvr {
+	position: relative;
+}
+
+.table td {
+    border-color: white;
+    border-style:solid; 
+    border-width:1px;
+}
+
+.fail {
+	display: none;
+	color: white;
+}

templates/home.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Movie Recommendation System</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
+
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+  <!-- Bootstrap -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+  <!-- jQuery -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+
+  <!-- Auto Complete -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@7.2.0/dist/css/autoComplete.min.css">
+
+  <!-- External CSS -->
+  <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='style.css') }}">
+
+  <script type="text/javascript">
+    var films = {{suggestions|tojson}};
+    $(document).ready(function(){
+      $("#myModal").modal('show');
+    });
+  </script>
+
+</head>
+
+<body id="content" style="font-family: 'Noto Sans JP', sans-serif;">
+<div class="body-content">
+	<div class="ml-container" style="display: block;">
+		<a href="https://github.com/ArchitSharma21/Movie-Recommendation-System-With-Deployment-Using-Heroku" target="_blank" class="github-corner" title="View source on GitHub">
+		      <svg data-toggle="tooltip"
+		      data-placement="left" width="80" height="80" viewBox="0 0 250 250"
+			style="fill:#e50914; color:#fff; position: fixed;z-index:100; top: 0; border: 0; right: 0;" aria-hidden="true">
+			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+			<path
+			  d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+			  fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+			<path
+			  d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+			  fill="currentColor" class="octo-body"></path>
+		      </svg>
+		    </a>
+    <center><h1 class="app-title">Movie Recommendation System</h1></center>
+    <div class="form-group shadow-textarea" style="margin-top: 30px;text-align: center;color: white;">
+        <input type="text" name="movie" class="movie form-control" id="autoComplete" autocomplete="off" placeholder="Enter the Movie Name" style="background-color: #ffffff;border-color:#ffffff;width: 60%;color: #181818" required="required" />
+        <br>
+    </div>
+
+    <div class="form-group" style="text-align: center;">
+      <button class="btn btn-primary btn-block movie-button" style="background-color: #e50914;text-align: center;border-color: #e50914;width:120px;" disabled="true" >Enter</button><br><br>
+    </div>
+	</div>
+
+  <div id="loader" class="text-center">
+  </div>
+  
+  <div class="fail">
+    <center><h3>Sorry! The movie you requested is not in our database. 
+    Please check the spelling or try with other movies!</h3></center>
+  </div>
+
+	<div class="results">
+    <center>
+      <h2 id="name" class="text-uppercase"></h2>
+    </center>
+	</div>
+	
+	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3" aria-hidden="true">
+    <div class="modal-dialog modal-md" role="document">
+      <div class="modal-content">
+        <div class="modal-header" style="background-color: #e50914;color: white;">
+          <h5 class="modal-title" id="exampleModalLabel3">Hey there!</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true" style="color: white">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p>Don't worry if the movie that you are looking for is not auto-suggested while typing. Just type the movie name and click on "enter". You will be good to go even though if you made some typo errors.</p>
+        </div>
+        <div class="modal-footer" style="text-align: center;">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Let's go!</button>
+        </div>
+      </div>
+    </div>
+  </div>
+	
+	<footer class="footer">
+    <br/> 
+    <div class="social" style="margin-bottom: 8px">
+    <a class="social-icons" href="https://github.com/ArchitSharma21" target="_blank"><i class="fa fa-github-alt" style="font-size:24px;color: #e4e0e0"></i></a>
+  </div>
+  </footer>
+	</div>
+	
+	<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@7.2.0/dist/js/autoComplete.min.js"></script>
+  <script type="text/javascript" src="{{url_for('static', filename='autocomplete.js')}}"></script>
+
+  <script type="text/javascript" src="{{url_for('static', filename='recommend.js')}}"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+</body>
+</html>

templates/recommend.html

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>NEW</title>
+
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+	<!-- Google Fonts -->
+	<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Rowdies:wght@300&display=swap" rel="stylesheet">
+
+	<!-- Font Awesome -->
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+	<!-- Bootstrap -->
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+	<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='style.css') }}">
+
+</head>
+
+<body id="content">
+
+	<div class="results">
+	    <center>
+	      <h2 id="name" class="text-uppercase" style="font-family: 'Rowdies', cursive;">{{title}}</h2>
+	    </center>
+	</div>
+	<br/>
+
+  <div id="mycontent">
+    <div id="mcontent">
+      <div class="poster-lg">
+        <img class="poster" style="border-radius: 40px;margin-left: 90px;" height="400" width="250" src={{poster}}>
+      </div>
+      <div class="poster-sm text-center">
+        <img class="poster" style="border-radius: 40px;margin-bottom: 5%;" height="400" width="250" src={{poster}}>
+      </div>
+      <div id="details">
+        <br/>
+        <h6 id="title" style="color:white;">TITLE: &nbsp;{{title}}</h6>
+        <h6 id="overview" style="color:white;max-width: 85%">OVERVIEW: <br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{overview}}</h6>
+        <h6 id="vote_average" style="color:white;">RATING: &nbsp;{{vote_average}}/10 ({{vote_count}} votes)</h6>
+        <h6 id="genres" style="color:white;">GENRE: &nbsp;{{genres}}</h6>
+        <h6 id="date" style="color:white;">RELEASE DATE: &nbsp;{{release_date}}</h6>
+        <h6 id="runtime" style="color:white;">RUNTIME: &nbsp;{{runtime}}</h6>
+        <h6 id="status" style="color:white;">STATUS: &nbsp;{{status}}</h6>
+      </div>
+    </div>
+  </div>  
+  <br/>
+	
+{% for name, details in cast_details.items() if not cast_details.hidden %}
+  <div class="modal fade" id="{{details[0]}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+        <div class="modal-header" style="background-color: #e50914;color: white;">
+          <h5 class="modal-title" id="exampleModalLabel3">{{name}}</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true" style="color: white">&times;</span>
+          </button>
+        </div>
+
+        <div class="modal-body">
+          <img class="profile-pic" src="{{details[1]}}" alt="{{name}} - profile" style="width: 250px;height:400px;border-radius: 10px;" />
+          <div style="margin-left: 20px">
+            <p><strong>Birthday:</strong> {{details[2]}} </p>
+            <p><strong>Place of Birth:</strong> {{details[3]}} </p>
+            <p> 
+              <p><strong>Biography:</strong><p>
+              {{details[4]}}
+            </p>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+
+  <div class="container"> 
+
+    {% if casts|length > 1 %}
+      <div class="movie" style="color: #E8E8E8;">
+        <center>
+          <h2 style="font-family: 'Rowdies', cursive;">TOP CAST</h2>
+          <h5>(Click on the cast to know more)</h5>
+        </center>
+      </div>
+
+    
+      <div class="movie-content">
+        {% for name, details in casts.items() if not casts.hidden %}
+          <div class="castcard card" style="width: 14rem;" title="Click to know more about {{name}}" data-toggle="modal" data-target="#{{details[0]}}">
+            <div class="imghvr">
+              <img class="card-img-top cast-img" id="{{details[0]}}" height="360" width="240" alt="{{name}} - profile" src="{{details[2]}}">
+              <figcaption class="fig">
+                <button class="card-btn btn btn-danger"> Know More </button>
+              </figcaption>
+            </div>
+            <div class="card-body" style="font-family: 'Rowdies', cursive;font-size: 18px;">
+              <h5 class="card-title">{{name|upper}}</h5>
+              <h5 class="card-title" style="font-size: 18px"><span style="color:#756969;font-size: 18px;">AS {{details[1]|upper}}</span></h5>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    {% endif %}
+    <br/>
+
+  <center>
+    {% if reviews %}
+    <h2 style="font-family: 'Rowdies', cursive;color:white">USER REVIEWS</h2>
+     <div class="col-md-12" style="margin: 0 auto; margin-top:25px;">
+        <table class="table table-bordered" bordercolor="white" style="color:white">
+            <thead>
+                <tr>
+                  <th class="text-center" scope="col" style="width: 75%">Comments</th>
+                  <th class="text-center" scope="col">Sentiments</th>
+                </tr>
+            </thead>
+    
+          <tbody>
+	    {% for review, status in reviews.items() if not reviews.hidden %}
+    	        <tr style="background-color:#e5091485;">
+                <td>{{review}}</td>
+                <td>
+                  <center>
+                    {{status}} : 
+                    {% if status =='Positive' %}
+                      &#128515;
+                    {% else %}
+                      &#128534;
+                    {% endif %}
+                  </center>
+                </td>
+            	</tr>
+      	    {% endfor %}
+    		  </tbody>
+ 		    </table>
+     </div>
+
+    {% if (curr_date) and (movie_rel_date) %}
+      {% elif curr_date < movie_rel_date %}
+      <div style="color:white;">
+        <h1 style="color:white"> This movie is not released yet. Stay tuned! </h1>
+      </div>
+      {% else %}
+      <div style="color:white;">
+        <h1 style="color:white"> Sorry, the reviews for this movie are not available! :( </h1>
+      </div>
+      {% endif %}
+    {% else %}
+      <div style="color:white;">
+        <h1 style="color:white"> Sorry, the reviews for this movie are not available! :( </h1>
+      </div>
+    {% endif %}
+  </center>
+  <br/>
+   
+ 
+    {% if movie_cards|length > 1 %}
+
+      <div class="movie" style="color: #E8E8E8;">
+        <center><h2 style="font-family: 'Rowdies', cursive;">RECOMMENDED MOVIES FOR YOU</h2><h5>(Click any of the movies to get recommendation)</h5></center>
+      </div>
+
+      <div class="movie-content">
+        {% for poster, details in movie_cards.items() if not movie_cards.hidden %}
+          <div class="card" style="width: 14rem;" title="{{details[1]}}" onclick="recommendcard(this)">
+            <div class="imghvr">
+              <img class="card-img-top" height="360" width="240" alt="{{details[0]}} - poster" src={{poster}}>
+              <div class="card-img-overlay" >
+                <span class="card-text" style="font-size:15px;background: #000000b8;color:white;padding:2px 5px;border-radius: 10px;"><span class="fa fa-star checked">&nbsp; {{details[2]}}/10</span></span>
+              </div>
+              <div class=".card-img-overlay" style="position: relative;">
+                <span class="card-text" style="font-size:15px;position:absolute;bottom:20px;left:15px;background: #000000b8;color:white;padding: 5px;border-radius: 10px;">{{details[3]}}</span>
+              </div>
+              <figcaption class="fig">
+                <button class="card-btn btn btn-danger"> Click Me </button>
+              </figcaption>
+            </div>
+            <div class="card-body">
+              <h5 class="card-title" style="font-family: 'Rowdies', cursive;font-size: 17px;">{{details[0]|upper}}</h5>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    {% endif %}
+<br/><br/><br/><br/>
+  </div>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  <script type="text/javascript" src="{{url_for('static', filename='recommend.js')}}"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+</body>
+</html>

tranform.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:60040ccfcec04b8e9f6b763fad7166f688ae4451a9e13e058ee40193c1e3b628
+size 58563