Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • branche-TP-de-Tom
  • front-bilel
  • goodpaths
  • master
  • movie-page
  • octofront
  • vieille-branche
7 results

Target

Select target project
  • octolel/cacaocritics
1 result
Select Git revision
  • branche-TP-de-Tom
  • front-bilel
  • goodpaths
  • master
  • movie-page
  • octofront
  • vieille-branche
7 results
Show changes

Commits on Source 9

...@@ -5,6 +5,7 @@ stages: ...@@ -5,6 +5,7 @@ stages:
.eslint: .eslint:
image: node:16.14.0-alpine image: node:16.14.0-alpine
stage: lint stage: lint
allow_failure: true
script: script:
- cd $CONTEXT - cd $CONTEXT
# install packages # install packages
......
...@@ -10,5 +10,8 @@ ...@@ -10,5 +10,8 @@
}, },
"[javascript][vue]": { "[javascript][vue]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint" "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
} }
} }
...@@ -36,6 +36,29 @@ def movieDbToDf(): ...@@ -36,6 +36,29 @@ def movieDbToDf():
return df return df
def userDbToDf():
'''
This function convert a movie DataBase from mongoDB into a pandas DataFrame
'''
#load DB
client = MongoClient("mongodb://group3:GJF6cQqM4RLxBfNb@cs2022.lmichelin.fr:27017/group3?ssl=true")
db = client.group3
collection = db.users
#projection on useful data
cursor = collection.find({},{"_id":1, "liked_movies": 1, "update":1})
df=pd.DataFrame(list(cursor))
return df
def loadRecDB():
#load DB
client = MongoClient("mongodb://group3:GJF6cQqM4RLxBfNb@cs2022.lmichelin.fr:27017/group3?ssl=true")
db = client.group3
collection = db['recommendations']
return collection
def preFiltering(df,percent=90): def preFiltering(df,percent=90):
''' '''
This function removes movies who do not have enough votes to be evaluated This function removes movies who do not have enough votes to be evaluated
...@@ -103,7 +126,6 @@ def index_from_id(df,id): ...@@ -103,7 +126,6 @@ def index_from_id(df,id):
''' '''
return df[df['_id']==id].index.values[0] return df[df['_id']==id].index.values[0]
def recommendations(original_title, df, number_of_recommendations): def recommendations(original_title, df, number_of_recommendations):
#prefilter the dataframe #prefilter the dataframe
...@@ -130,6 +152,10 @@ def recommendations(original_title, df, number_of_recommendations): ...@@ -130,6 +152,10 @@ def recommendations(original_title, df, number_of_recommendations):
return df['original_title'].iloc[recommendations_indices] return df['original_title'].iloc[recommendations_indices]
def formatingFeatures(df_row): def formatingFeatures(df_row):
"""
This function creates a new column "features" in the df
used to calculate similarities between users_profiles et movies
"""
g = [] g = []
genres = [] genres = []
k=[] k=[]
...@@ -150,21 +176,6 @@ def formatingFeatures(df_row): ...@@ -150,21 +176,6 @@ def formatingFeatures(df_row):
return ' '.join([genres]*w_genres)+' '+' '.join([keywords]*w_keywords)+' '+' '.join([str(df_row['main_actor'])]*w_actor)+' '+' '.join([str(df_row['director'])]*w_director)+' '+' '.join([str(df_row['release_date'])]*w_release_date) return ' '.join([genres]*w_genres)+' '+' '.join([keywords]*w_keywords)+' '+' '.join([str(df_row['main_actor'])]*w_actor)+' '+' '.join([str(df_row['director'])]*w_director)+' '+' '.join([str(df_row['release_date'])]*w_release_date)
def userDbToDf():
'''
This function convert a movie DataBase from mongoDB into a pandas DataFrame
'''
#load DB
client = MongoClient("mongodb://group3:GJF6cQqM4RLxBfNb@cs2022.lmichelin.fr:27017/group3?ssl=true")
db = client.group3
collection = db.users
#projection on useful data
cursor = collection.find({},{"_id":1, "liked_movies": 1, "update":1})
df=pd.DataFrame(list(cursor))
return df
def user_profile( user_index, moviesdf, usersdf, vectMatrix ): def user_profile( user_index, moviesdf, usersdf, vectMatrix ):
""" """
This function creates a user profile based on the likef movies of the user This function creates a user profile based on the likef movies of the user
...@@ -200,15 +211,11 @@ def user_profile( user_index, moviesdf, usersdf, vectMatrix ): ...@@ -200,15 +211,11 @@ def user_profile( user_index, moviesdf, usersdf, vectMatrix ):
else: else:
return [i for i in range(100)] return [i for i in range(100)]
def loadRecDB():
#load DB
client = MongoClient("mongodb://group3:GJF6cQqM4RLxBfNb@cs2022.lmichelin.fr:27017/group3?ssl=true")
db = client.group3
collection = db['recommendations']
return collection
def updateDB(): def updateDB():
"""
This function update the recommandation DB based on the likes of thes users
"""
#loadDB #loadDB
moviesdf = movieDbToDf() moviesdf = movieDbToDf()
......
...@@ -4,17 +4,14 @@ const router = express.Router(); ...@@ -4,17 +4,14 @@ const router = express.Router();
module.exports = router; module.exports = router;
// router.get("/popular/:number", async function (req, res) { router.get("/", async function (req, res) {
// try { try {
// const filmNumber = await req.params["number"]; const getGenres = await GenreModel.find({});
// const getGenres = await GenreModel.find({}) res.send(getGenres);
// .sort({ popularity: "desc" }) } catch (error) {
// .limit(filmNumber); console.log(error);
// res.send(getGenres); }
// } catch (error) { });
// console.log(error);
// }
// });
router.get("/genre/id/:id", async function (req, res) { router.get("/genre/id/:id", async function (req, res) {
try { try {
......
...@@ -4,17 +4,18 @@ const router = express.Router(); ...@@ -4,17 +4,18 @@ const router = express.Router();
module.exports = router; module.exports = router;
// router.get("/popular/:number", async function (req, res) { router.get("/popular/:number", async function (req, res) {
// try { try {
// const filmNumber = await req.params["number"]; console.log('yo')
// const getMovies = await MovieModel.find({}) const filmNumber = await req.params["number"];
// .sort({ popularity: "desc" }) const getMovies = await MovieModel.find({})
// .limit(filmNumber); .sort({ popularity: "desc" })
// res.send(getMovies); .limit(filmNumber);
// } catch (error) { res.send(getMovies);
// console.log(error); } catch (error) {
// } console.log(error);
// }); }
});
router.get("/movie/id/:id", async function (req, res) { router.get("/movie/id/:id", async function (req, res) {
try { try {
......
<template> <template>
<div class="box"> <div class="box">
<h1>Genre</h1> <h1>Genre</h1>
<div class="liste-genre">
<li v-for="genre in genres" :key="genre.id" style="list-style-type:none;">
<div class="check"> <div class="check">
<input type="checkbox" id="action" value="Action" v-model="genre"> <input type="checkbox" id="genre.id" value="genre" >
<label for="Action">Action</label> <label for="genre"> {{ genre.name }} </label>
</div> </div>
<div class="check"> </li>
<input type="checkbox" id="horreur" value="Horreur" v-model="genre">
<label for="horreur">Horreur</label>
</div>
<div class="check">
<input type="checkbox" id="fantastique" value="Fantastique" v-model="genre">
<label for="fantastique">Fantastique</label>
</div> </div>
<br>
</div> </div>
</template> </template>
<script> <script>
import axios from "axios";
const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
export default {
data: function () {
return {
genrename: "",
genres: [],
genresLoadingError: "",
};
},
methods: {
fetchGenres: function () {
axios
.get(
backendURL + "/genres",
)
.then((response) => {
this.genres = response.data;
})
.catch((error) => {
this.genresLoadingError = "An error occured while e ing genres.";
console.error(error);
});
},
},
created() {
this.fetchGenres();
},
};
</script> </script>
<style scoped> <style scoped>
......
...@@ -3,6 +3,7 @@ import Home from "../views/Home.vue"; ...@@ -3,6 +3,7 @@ import Home from "../views/Home.vue";
import Connexion from "../views/Connexion.vue"; import Connexion from "../views/Connexion.vue";
import Users from "../views/Users.vue"; import Users from "../views/Users.vue";
import AddUser from "../views/AddUsers.vue"; import AddUser from "../views/AddUsers.vue";
import MoviePage from "../views/MoviePage.vue";
const routes = [ const routes = [
{ {
...@@ -25,6 +26,11 @@ const routes = [ ...@@ -25,6 +26,11 @@ const routes = [
name: "AddUsers", name: "AddUsers",
component: AddUser, component: AddUser,
}, },
{
path: "/movie/:id",
name: "MoviePage",
component: MoviePage,
},
]; ];
const router = createRouter({ const router = createRouter({
......
...@@ -3,11 +3,13 @@ ...@@ -3,11 +3,13 @@
<div class="carousel"> <div class="carousel">
<carousel :items-to-show="5.5" autoplay=1300> <carousel :items-to-show="5.5" autoplay=1300>
<slide v-for="movie in movies" :key="movie.id" autoplay='True' transition="100" > <slide v-for="movie in movies" :key="movie.id" autoplay='True' transition="100" >
<router-link :to="'/movie/'+ movie.id">
<img <img
:src="'https://image.tmdb.org/t/p/original/' + movie.poster_path" :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
withd="100" withd="100"
height="300" height="300"
/> />
</router-link>
</slide> </slide>
<template #addons> <template #addons>
<navigation /> <navigation />
...@@ -20,27 +22,33 @@ ...@@ -20,27 +22,33 @@
<div class="type"> <div class="type">
<MovieType /> <MovieType />
</div> </div>
<div class="movie-affichage">
<li v-for="movie in movies" :key="movie.id"> <li v-for="movie in movies" :key="movie.id">
<p class="movie-title"> <p class="name">
{{ movie.title }} <h5> {{ movie.title }}</h5>
</p> </p>
<p class="film"> <p class="film">
<router-link :to="'/movie/'+ movie.id">
<img <img
:src="'https://image.tmdb.org/t/p/original/' + movie.poster_path" :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
withd="100" withd="100"
height="300" height="300"
/> />
</router-link>
</p> </p>
</li> </li>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import axios from "axios"; import axios from "axios";
import 'vue3-carousel/dist/carousel.css'; import "vue3-carousel/dist/carousel.css";
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'; import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
import MovieType from "../components/MovieType.vue"; import MovieType from "../components/MovieType.vue";
const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
export default { export default {
name: "Home", name: "Home",
...@@ -62,26 +70,41 @@ export default { ...@@ -62,26 +70,41 @@ export default {
fetchMovies: function () { fetchMovies: function () {
axios axios
.get( .get(
`https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a` backendURL + "/movies/popular/20",
) )
.then((response) => { .then((response) => {
this.movies = response.data.results; this.movies = response.data;
console.log(response.data)
}) })
.catch((error) => { .catch((error) => {
this.moviesLoadingError = "An error occured while e ing movies."; this.moviesLoadingError = "An error occured while e ing movies.";
console.error(error); console.error(error);
}); });
},
fetchGenres: function () {
axios
.get(
backendURL + "/genres",
)
.then((response) => {
this.genres = response.data;
console.log(response.data)
})
.catch((error) => {
this.genresLoadingError = "An error occured while e ing genres.";
console.error(error);
});
}, },
}, },
created() { created() {
this.fetchMovies(); this.fetchMovies();
this.fetchGenres();
}, },
}; };
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style scoped>
.logo { .logo {
max-width: 100px; max-width: 100px;
} }
...@@ -108,4 +131,13 @@ li { ...@@ -108,4 +131,13 @@ li {
display: flex; display: flex;
align-self: center; align-self: center;
} }
.name {
max-width: 200px;
justify-content: center;
align-items: center;
background-color: #eaf2ef;
}
.corps {
display: flex;
}
</style> </style>