Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new landing page #33

Closed
wants to merge 7 commits into from
Closed

new landing page #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
271fb86
Added error message when feedback requested without selecting any movie
rishi2019194 Oct 15, 2023
cdfd28e
Merge branch 'master' of https://github.com/adipai/PopcornPicks
rishi2019194 Oct 16, 2023
b2deb02
new landing page
ananya173147 Oct 16, 2023
f34271c
Merge branch 'master' into new_page
rishi2019194 Oct 16, 2023
d447188
Added genre tags, imdb_link for predicted movies
rishi2019194 Oct 16, 2023
e866594
Added genre tags, imdb_link for predicted movies
rishi2019194 Oct 16, 2023
0760265
Added genre tags, imdb_link for predicted movies
rishi2019194 Oct 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/prediction_scripts/item_based.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,6 @@ def recommend_for_new_user(user_rating):
by="recommended", ascending=False, inplace=True
)

return list(join_movies_and_recommendations["title"][:201])
return list(join_movies_and_recommendations["title"][:201]), \
list(join_movies_and_recommendations["genres"][:201]), \
list(join_movies_and_recommendations["imdb_id"][:201])
26 changes: 21 additions & 5 deletions src/recommenderapp/app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
import json
import sys

from flask import Flask, jsonify, render_template, request
from flask import Flask, jsonify, redirect, render_template, request, url_for
from flask_cors import CORS
from search import Search
from utils import beautify_feedback_data, send_email_to_user
Expand All @@ -27,7 +27,23 @@ def landing_page():
"""
Renders the landing page.
"""
return render_template("landing_page.html")
return render_template("search_page.html")


@app.route("/get_started", methods=["POST"])
def get_started():
"""
Handle the Get Started button click and redirect to search_page.
"""
return redirect(url_for("search_page.html"))


@app.route("/search_page")
def search_page():
"""
Renders the search page.
"""
return render_template("search_page.html")


@app.route("/predict", methods=["POST"])
Expand All @@ -42,9 +58,9 @@ def predict():
movie_with_rating = {"title": movie, "rating": 5.0}
if movie_with_rating not in training_data:
training_data.append(movie_with_rating)
recommendations = recommend_for_new_user(training_data)
recommendations = recommendations[:10]
resp = {"recommendations": recommendations}
recommendations, genres, imdb_id = recommend_for_new_user(training_data)
recommendations, genres, imdb_id = recommendations[:10], genres[:10], imdb_id[:10]
resp = {"recommendations": recommendations, "genres": genres, "imdb_id":imdb_id}
return resp


Expand Down
Binary file added src/recommenderapp/static/image.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/recommenderapp/static/stylesheet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
.landing-page {
background-image: url("image.jpg");
background-size: cover;
color: azure !important;
}

body {
background-image: url("224299.jpg");
background-size: cover;
Expand Down
82 changes: 18 additions & 64 deletions src/recommenderapp/templates/landing_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<!-- Include stylesheets and scripts -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheet.css') }}">
<title>PopcornPicks🍿</title>
<script src="{{ url_for('static', filename='script.js') }}"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<body class="landing-page">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark topNavBar fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">PopcornPicks🍿</a>
Expand All @@ -21,73 +21,27 @@
</button>
</div>
</nav>

<div class="container" style="margin-top: 60px;">
<div class="heading1">
<!-- Heading for picking a movie -->
<h2><center>🎬 Pick a Movie! 🎬</center></h2>
</div>
<h2><center>🎬 PopcornPicks: Pick a Movie! 🎬</center></h2>
<p style="text-align: center; color: azure; font-size: 18px;"><br>
Discover personalized movie recommendations by selecting up to 5 of your favorite films.
<br>
Create a watchlist and have it conveniently sent to your email.
<br>
Enjoy movies at your own pace, on your terms.
</p>
<a href="search_page.html" class="btn btn-primary mx-auto">Get Started!</a>


<div class="row" style="margin-top: 25px;">
<div class="col-md-6">
<!-- Left Column (Selected Movie(s) and Search) -->
<div class="row">
<div class="col-md-10">
<!-- Selected Movie(s) section -->
<h2>Selected Movie(s):</h2>
<input class="form-control mr-sm-2" type="search" placeholder="Search for a Movie" aria-label="Search" id="searchBox" />
<ul class="list-group" id="selectedMovies"></ul>
</div>
<div class="col-md-2">
<!-- Predict button -->
<input type="button" class="btn btn-primary" name="predict" id="predict" value="Predict" style="margin-top: 47.5px;" />
</div>
</div>
</div>
<div class="col-md-1">
<!-- Empty column for spacing -->
</div>
<div class="col-md-5">
<!-- Right Column (Recommended Movies) -->
<div class="row">
<div class="col-md-12">
<!-- Recommended Movies section -->
<h2>Recommended Movies:</h2>
<form class="recos" id="recos">
<ul class="list-group" id="predictedMovies"></ul>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- Feedback button (modal) -->
<input type="button" class="btn btn-primary" name="feedback" data-toggle="modal" id="feedback" value="Give Feedback" data-target="#exampleModalCenter">
</div>
</div>
</div>
</div>
</div>
<div class="container" style="margin-top: 20px;">
<div class="row">
<div class="col-md-12">
<!-- Checkbox section -->
<input class="c-checkbox" type="checkbox" id="checkbox" />
</div>
</div>
</div>
<div class="container" style="margin-top: 20px;">
<div class="row">
<div class="col-md-8">
<!-- Data collected section -->
<div id="dataCollected" style="display: none;">
<h1>Thanks!! Your response was stored.</h1>
<input type="button" id="refreshPage" class="btn btn-danger" name="refreshPage" value="Take another attempt" />
</div>
</div>
<p style="text-align: center; color: azure; font-size: 16px;"><br><br><br><br><br><br><br><br>
Made with ❤️ by <a href="https://github.com/adipai/PopcornPicks" target="_blank">PopcornPicks</a><br>
<a href="https://github.com/adipai/PopcornPicks/blob/master/LICENSE.md" target="_blank">MIT License Copyright (c) 2023 PopcornPicks</a>
</div>
</div>
<br /><br /><br />

</body>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='script.js') }}"></script>
Expand Down
94 changes: 94 additions & 0 deletions src/recommenderapp/templates/search_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<!-- Include stylesheets and scripts -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheet.css') }}">
<title>PopcornPicks🍿</title>
<script src="{{ url_for('static', filename='script.js') }}"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width device-width, initial-scale=1" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark topNavBar fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">PopcornPicks🍿</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class="container" style="margin-top: 60px;">
<div class="heading1">
<!-- Heading for picking a movie -->
<h2><center>🎬 Pick a Movie! 🎬</center></h2>
</div>


<div class="row" style="margin-top: 25px;">
<div class="col-md-6">
<!-- Left Column (Selected Movie(s) and Search) -->
<div class="row">
<div class="col-md-10">
<!-- Selected Movie(s) section -->
<h2>Selected Movie(s):</h2>
<input class="form-control mr-sm-2" type="search" placeholder="Search for a Movie" aria-label="Search" id="searchBox" />
<ul class="list-group" id="selectedMovies"></ul>
</div>
<div class="col-md-2">
<!-- Predict button -->
<input type="button" class="btn btn-primary" name="predict" id="predict" value="Predict" style="margin-top: 47.5px;" />
</div>
</div>
</div>
<div class="col-md-1">
<!-- Empty column for spacing -->
</div>
<div class="col-md-5">
<!-- Right Column (Recommended Movies) -->
<div class="row">
<div class="col-md-12">
<!-- Recommended Movies section -->
<h2>Recommended Movies:</h2>
<form class="recos" id="recos">
<ul class="list-group" id="predictedMovies"></ul>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- Feedback button (modal) -->
<input type="button" class="btn btn-primary" name="feedback" data-toggle="modal" id="feedback" value="Give Feedback" data-target="#exampleModalCenter">
</div>
</div>
</div>
</div>
</div>
<div class="container" style="margin-top: 20px;">
<div class="row">
<div class="col-md-12">
<!-- Checkbox section -->
<input class="c-checkbox" type="checkbox" id="checkbox" />
</div>
</div>
</div>
<div class="container" style="margin-top: 20px;">
<div class="row">
<div class="col-md-8">
<!-- Data collected section -->
<div id="dataCollected" style="display: none;">
<h1>Thanks!! Your response was stored.</h1>
<input type="button" id="refreshPage" class="btn btn-danger" name="refreshPage" value="Take another attempt" />
</div>
</div>
</div>
</div>
<br /><br /><br />
</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</html>
Loading