Hugging Face's logo

Spaces:
hpratapsingh
/
Movie_recommendor-2023
Sleeping

App Files Community
hpratapsingh commited on
Commit
637823e
•
1 Parent(s): aeeb58e

Upload 2 files

Browse files
Files changed (2) hide show
  1. templates/home.html +237 -2
  2. templates/movie.html +261 -0
templates/home.html CHANGED
@@ -1,2 +1,237 @@
1
- <>
2
- </>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+
7
+ <title>Movie Recommender</title>
8
+ <link rel="icon" type="image/x-icon" href="../static/media/favicon.png">
9
+
10
+
11
+
12
+ <meta name="description" content="">
13
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
14
+
15
+
16
+
17
+
18
+ <!-- Add font awasome -->
19
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
20
+
21
+
22
+ <!-- Add external css -->
23
+ <link rel="stylesheet" href='/static/style.css' />
24
+
25
+
26
+
27
+ <!-- ------- auto complete search bar ------ -->
28
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
29
+ <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
30
+ <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
31
+
32
+ </head>
33
+
34
+ <body onload="loading()">
35
+
36
+ <div id="preloader">
37
+ <img src="/static/media/pre3.gif" alt="Loading...">
38
+ </div>
39
+ <div class="backdrop"></div>
40
+
41
+ <navbar>
42
+
43
+ <div class="nav">
44
+
45
+ <a href="#Home" class="nav_link nav_active">
46
+ <i class="fa fa-home"></i>
47
+ <span class="nav_link_title" style="font-size: 13px;">Home</span>
48
+ </a>
49
+
50
+ <a href="#About" class="nav_link">
51
+ <i class="fa-sharp fa-solid fa-circle-info"></i>
52
+ <span class="nav_link_title" style="font-size: 13px;">About</span>
53
+ </a>
54
+
55
+
56
+ </div>
57
+
58
+
59
+
60
+ </navbar>
61
+
62
+
63
+
64
+
65
+
66
+ <section class="home section_padding" id="Home">
67
+
68
+ <div class="container">
69
+
70
+
71
+ <div class="row">
72
+
73
+
74
+ <div class="home_txt">
75
+
76
+ <h4 class="greetings">Hii</h4>
77
+
78
+ <span class="moving_txt"></span>
79
+ <h3>Welcome to the</h3>
80
+
81
+ <div class="title" id="text">
82
+ <h1>MOVIE<br>RECOMMENDER</h1>
83
+ </div>
84
+
85
+
86
+
87
+ <!-- ---------------- search bar ---------------------- -->
88
+
89
+
90
+ <form id="search-form" action="/" method="POST">
91
+ <input id="search-input" type="text" name="search" placeholder="Select or Type a Movie...">
92
+
93
+ <button id="search-button" type="submit"><i class="fa fa-search"></i></button>
94
+ </form>
95
+
96
+
97
+ </div>
98
+
99
+ <!-- ---------------- search bar ---------------------- -->
100
+
101
+
102
+
103
+
104
+ </div>
105
+
106
+
107
+
108
+ </div>
109
+
110
+
111
+ </section>
112
+
113
+
114
+
115
+
116
+ <!--! ---------------- About ---------------------- -->
117
+
118
+
119
+
120
+
121
+
122
+
123
+ <section class="about section_padding" id="About">
124
+
125
+ <div class="container">
126
+
127
+ <div class="section_title">
128
+ <h3 class="main_title">About</h3>
129
+ <h5 class="sub_title">Learn about this Project</h5>
130
+
131
+ </div>
132
+
133
+
134
+
135
+ <div class="row justify_content_cntr">
136
+
137
+ <div class="about_box">
138
+ <p>
139
+ This is the Movie Recommendation Website in which you can search for a movie(under data of 4800
140
+ approx. movies) and get the top 7 recommendations
141
+ based on your search.<span>See Available Movies for Search by </span>
142
+ <a href="/static/media/movies_title.txt" target="_blank"> Clicking Here.</a><br>*Enter the
143
+ Movie Name as it is in the list.<br><br>
144
+ Movie recommendation using <span>CountVectorizer</span> is a natural language processing (NLP)
145
+ approach for recommending movies to users based on their textual reviews or descriptions.
146
+ CountVectorizer is a method that converts text data into a numerical format that can be used by
147
+ machine learning algorithms.
148
+ In this approach, textual data from movie reviews are preprocessed and converted into a matrix
149
+ of
150
+ word counts using CountVectorizer.
151
+ Then, a similarity matrix is created to compare each movie's word count matrix with all other
152
+ movies. Finally,
153
+ the recommendation system recommends movies to the user based on the highest similarity score
154
+ with
155
+ their input text.
156
+ This approach is popular in movie recommendation systems due to its simplicity
157
+ and effectiveness.<br>
158
+ </p>
159
+ <p>
160
+ <br> The system is deployed using <span>Flask</span> framework, which enables users to interact
161
+ with the system
162
+ through a web interface.
163
+ The user can input their preferences and receive recommendations based on their input.
164
+ </p>
165
+ <div class="git_link">
166
+ <h4>View the Source code of this Project :
167
+ <a href="https://github.com/Raj-Gurjar/Movie-Recommender.git" target="_blank">
168
+ <i class="fa-brands fa-github"></i>
169
+ </a>
170
+ </h4>
171
+ </div>
172
+ </div>
173
+
174
+
175
+ <div class="gradient_design">
176
+
177
+ <div class="about_box_title">
178
+ <h3>
179
+ Meet The Creator
180
+ </h3>
181
+ </div>
182
+ <!-- ----------------------------- -->
183
+ <div class="about_box">
184
+
185
+ <!--? Item1 -s -->
186
+
187
+ <div class="cardx card0">
188
+ <div class="border">
189
+ <h3>Hemant Rajput</h3>
190
+ <h4>Data Science </h4>
191
+ <p>
192
+ Front End | AI | ML | C++
193
+ </p>
194
+ <div class="icons">
195
+ <a href="https://www.linkedin.com/in/hemantsinghrajput/" target="_blank">
196
+
197
+ <i class="fa fa-brands fa-linkedin"></i> </a>
198
+
199
+ <a href="https://github.com/hemantsinghrajput" target="_blank">
200
+ <i class="fa fa-brands fa-github" aria-hidden="true"></i></a>
201
+
202
+ <a href="https://www.instagram.com/hpratapsingh_47/" target="_blank"><i class="fa fa-brands fa-instagram"
203
+ aria-hidden="true"></i></a>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ </div>
209
+
210
+ </div>
211
+
212
+ </div>
213
+
214
+ </div>
215
+
216
+
217
+ </section>
218
+
219
+ <!--! ---------------- About ---------------------- -->
220
+
221
+
222
+
223
+
224
+
225
+
226
+ <!--!------ Add Js ------>
227
+
228
+ <!-- external js -->
229
+ <script src="/static/script.js" async defer></script>
230
+
231
+ <!-- Shifting Text -->
232
+ <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
233
+
234
+
235
+ </body>
236
+
237
+ </html>
templates/movie.html ADDED
@@ -0,0 +1,261 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+
7
+ <title>Movie Recommender</title>
8
+ <link rel="icon" type="image/x-icon" href="../static/media/favicon.png">
9
+
10
+
11
+ <meta name="description" content="">
12
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
13
+
14
+
15
+
16
+
17
+ <!-- Add font awasome -->
18
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
19
+
20
+
21
+ <!-- external css -->
22
+ <link rel="stylesheet" href='/static/style.css' />
23
+
24
+
25
+ <!-- ------- auto complete search bar ------ -->
26
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
27
+ <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
28
+ <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
29
+
30
+ </head>
31
+
32
+ <style>
33
+ .poster_back {
34
+ background: url("{{mp}}") no-repeat;
35
+ }
36
+ </style>
37
+
38
+ <body onload="loading()">
39
+ <div id="preloader">
40
+ <img src="/static/media/pre3.gif" alt="Loading....">
41
+ </div>
42
+ <div class="backdrop"></div>
43
+
44
+ <navbar>
45
+
46
+ <div class="nav">
47
+
48
+ <a href="{{ url_for('test')}}" class="nav_link">
49
+ <i class="fa fa-home"></i>
50
+ <!-- <i class="fa-sharp fa-solid fa-house-person-return "></i> -->
51
+ <span class="nav_link_title">Home</span>
52
+ </a>
53
+
54
+ <a href="#Movie" class="nav_link nav_active">
55
+ <i class="fa fa-clapperboard"></i>
56
+ <span class="nav_link_title">About Movie</span>
57
+ </a>
58
+
59
+ <a href="#Recmndr" class="nav_link">
60
+ <!-- <i class="fa fa-magic"></i> -->
61
+ <i class="fa-solid fa-wand-magic-sparkles"></i>
62
+ <span class="nav_link_title">Recommender</span>
63
+ </a>
64
+
65
+
66
+
67
+
68
+ </div>
69
+
70
+
71
+
72
+ </navbar>
73
+
74
+
75
+ <!--! --------------------------- Movie Desc. ---------------------------------------- -->
76
+
77
+ <section class="movie section_padding" id="Movie">
78
+
79
+
80
+
81
+ <div class="container">
82
+
83
+
84
+ <div class="section_title">
85
+ <h3 class="main_title">Movie Description</h3>
86
+ <h5 class="sub_title">Here is the Description of your searched Movie</h5>
87
+
88
+ </div>
89
+
90
+
91
+
92
+
93
+
94
+
95
+
96
+ <div class="row justify_content_cntr">
97
+
98
+
99
+
100
+ <div class="movie_card" id="glow">
101
+
102
+ <div class="info_section">
103
+
104
+ <div class="movie_header">
105
+ <img class="poster_img" alt="movie poster" src="{{mp}}" />
106
+ <h1>{{cur_m}}</h1>
107
+ <h4>Director : {{crew}}</h4>
108
+ <h5>Cast : {{cast}}</h5>
109
+
110
+ <span class="year minutes"><i class="fa fa-calendar"></i> {{raj[0]}}</span>
111
+ <span class="minutes"><i class="fa fa-clock"></i> {{rev}} min</span>
112
+
113
+ <span class="rating minutes"> <i class="fa fa-star"></i> {{vote}}/10</span>
114
+
115
+ <p class="genre"><i class="fa fa-masks-theater"></i> {{gen}}</p>
116
+
117
+
118
+
119
+
120
+ </div>
121
+ <div class="movie_desc">
122
+ <p class="text">
123
+ {{over}}
124
+ </p>
125
+
126
+
127
+ </div>
128
+
129
+ <div class="know_more">
130
+ <a href="{{homep}}" class="" target="_blank"> Know More...</a>
131
+ </div>
132
+ </div>
133
+ <div class="blur_back poster_back"></div>
134
+
135
+ </div>
136
+
137
+
138
+ </div>
139
+
140
+
141
+ <div class="container2">
142
+ <div class="arrow"></div>
143
+ <div class="arrow"></div>
144
+ <h6>Recommendations</h6>
145
+ <div class="arrow"></div>
146
+ </div>
147
+
148
+ </div>
149
+
150
+
151
+
152
+
153
+
154
+
155
+ </section>
156
+
157
+ <!--! --------------------------- Movie Desc.---------------------------------------- -->
158
+
159
+
160
+
161
+ <!--! ----------------------------- Recommender ------------------------------------- -->
162
+
163
+
164
+
165
+
166
+
167
+ <section class="recmndr section_padding" id="Recmndr">
168
+
169
+
170
+ <div class="container">
171
+
172
+
173
+
174
+ <div class="section_title">
175
+ <h3 class="main_title">Recommendations</h3>
176
+ <h5 class="sub_title">Here are some Recommendations related to <span> {{cur_m}}</span></h5>
177
+
178
+ </div>
179
+
180
+ <!-- --------------------------- -->
181
+
182
+ <div class="row justify_content_cntr">
183
+
184
+ <div class="rec_items">
185
+
186
+ {%for item in names%}
187
+ <!-- ------ card item s ------ -->
188
+ <div class="rec_card .ani1">
189
+ <div class="poster">
190
+ <img src="{{posters[loop.index0]}}" alt="">
191
+ </div>
192
+
193
+ <div class="details">
194
+ <h3 class="rec_mv_name">{{item}}</h3>
195
+
196
+
197
+
198
+ <div class="tags">
199
+ {%for i in rating[loop.index0][2]%}
200
+ <span>{{i}}</span>
201
+ {% endfor %}
202
+ </div>
203
+ <div class="extra_info">
204
+
205
+
206
+ <h4 class="mv_year">{{rating[loop.index0][1].split("-")[0]}}</h4>
207
+
208
+ <div class="rating">
209
+ <!-- <i class = "fa fa-star"></i> -->
210
+ <h4> <i class="fa fa-star"></i> {{rating[loop.index0][0]}}/10</h4>
211
+
212
+ </div>
213
+
214
+
215
+ </div>
216
+
217
+ <form action="{{ url_for('nest', movie=item) }}" method="POST" class="">
218
+ <button type="submit" class="btn">Know More</a></button>
219
+ </form>
220
+
221
+
222
+ </div>
223
+
224
+ </div>
225
+ {% endfor %}
226
+ <!-- ------ card item e ------ -->
227
+
228
+
229
+
230
+
231
+
232
+
233
+ </div>
234
+
235
+
236
+ </div>
237
+
238
+
239
+ </div>
240
+
241
+
242
+
243
+
244
+ </section>
245
+
246
+ <!--! ----------------------------------------------------- -->
247
+
248
+
249
+
250
+
251
+
252
+
253
+ <!--!------ Add Js ------>
254
+
255
+ <!-- external js -->
256
+ <script src="/static/script.js" async defer></script>
257
+
258
+
259
+ </body>
260
+
261
+ </html>