diff --git a/backend/ml_models/temp_audio.wav b/backend/ml_models/temp_audio.wav index 4b2e852..fd21d0f 100644 Binary files a/backend/ml_models/temp_audio.wav and b/backend/ml_models/temp_audio.wav differ diff --git a/backend/models/User.model.js b/backend/models/User.model.js index a6a5c84..96fd45a 100644 --- a/backend/models/User.model.js +++ b/backend/models/User.model.js @@ -23,15 +23,15 @@ export const UserSchema = new mongoose.Schema({ profile: { type: String}, recommendation: { type: String}, - emotions: { - Monday: { Joy: Number, Surprise: Number, Anger: Number, Sad: Number, Happy: Number }, - Tuesday: { Joy: Number, Surprise: Number, Anger: Number, Sad: Number, Happy: Number }, - Wednesday: { Joy: Number, Surprise: Number, Anger: Number, Sad: Number, Happy: Number }, - Thursday: { Joy: Number, Surprise: Number, Anger: Number, Sad: Number, Happy: Number }, - Friday: { Joy: Number, Surprise: Number, Anger: Number, Sad: Number, Happy: Number }, - Saturday: { Joy: Number, Surprise: Number, Anger: Number, Sad: Number, Happy: Number }, - Sunday: { Joy: Number, Surprise: Number, Anger: Number, Sad: Number, Happy: Number }, - }, + // emotions: { + // Monday: { Joy: Number, Surprise: Number, Anger: Number, Sad: Number, Happy: Number }, + // Tuesday: { Joy: Number, Surprise: Number, Anger: Number, Sad: Number, Happy: Number }, + // Wednesday: { Joy: Number, Surprise: Number, Anger: Number, Sad: Number, Happy: Number }, + // Thursday: { Joy: Number, Surprise: Number, Anger: Number, Sad: Number, Happy: Number }, + // Friday: { Joy: Number, Surprise: Number, Anger: Number, Sad: Number, Happy: Number }, + // Saturday: { Joy: Number, Surprise: Number, Anger: Number, Sad: Number, Happy: Number }, + // Sunday: { Joy: Number, Surprise: Number, Anger: Number, Sad: Number, Happy: Number }, + // }, }); export default mongoose.model.Users || mongoose.model('User', UserSchema ); \ No newline at end of file diff --git a/frontend/src/components/chart.js b/frontend/src/components/chart.js index db181fd..0dd6ff3 100644 --- a/frontend/src/components/chart.js +++ b/frontend/src/components/chart.js @@ -3,7 +3,7 @@ import { Chart } from 'react-google-charts'; const EmotionLineChart = () => { const data = [ - ['Day', 'Joyful', 'Surprise', 'Anger', 'Sad', 'Happy'], + ['Day', 'Joy', 'Surprise', 'Anger', 'Sad', 'Happy'], ['Monday', 20, 15, 10, 5, 8], ['Tuesday', 18, 13, 11, 7, 10], ['Wednesday', 22, 17, 9, 4, 6], diff --git a/frontend/src/pages/YT_RecommendationView.js b/frontend/src/pages/YT_RecommendationView.js index 894f79f..8cccee4 100644 --- a/frontend/src/pages/YT_RecommendationView.js +++ b/frontend/src/pages/YT_RecommendationView.js @@ -4,6 +4,8 @@ import Footer from '../components/Footer'; import '../styles/YT_RecommendationView.scss'; import { Link } from 'react-router-dom'; import axios from 'axios'; +import { getUsername } from '../helper/helper' +import { getRecommendation } from '../helper/helper' // import 'dotenv/config'; // get_youtube_videos_from_preferences @@ -17,12 +19,159 @@ import axios from 'axios'; const YT_RecommendationView = () => { const [videoIds, setVideoIds] = useState([]); + const [emotion, setEmotion] = useState(''); // const [videoTrack, setVideoTrack] = useState([]); const [isReviewDialogVisible, setIsReviewDialogVisible] = useState(false); const [rating, setRating] = useState(0); + const [recommendations, setRecommendations] = useState(''); + + const emotionCategories = { + 'sadness': ['Music', 'Comedy', 'Entertainment', 'Classics', 'Family', 'Pets & Animals', 'People & Blogs'], + 'fear': ['Comedy', 'Entertainment', 'Drama', 'Action/Adventure', 'Gaming', 'Pets & Animals'], + 'joy': ['Autos & Vehicles', 'Film & Animation', 'Sports', 'Gaming', 'Entertainment', 'Comedy', 'Horror', 'Documentary', 'Videoblogging', 'Travel & Events', 'Science & Technology'], + 'surprise': ['Entertainment', 'Pets & Animals', 'Autos & Vehicles', 'Family', 'Sci-Fi/Fantasy', 'Action/Adventure', 'Sports', 'Foreign', 'Thriller', 'Trailers', 'Classics'], + 'love': ['Family', 'Pets & Animals', 'Sports', 'People & Blogs', 'Movies', 'Shows', 'Classics'], + 'anger': ['Music', 'Short Movies', 'Travel & Events', 'Gaming', 'Science & Technology', 'Entertainment', 'Classics'] + }; + + useEffect(() => { + getUsernameAndFetchData(); + // getRecommendation(apiData.username) + }, []); + + const getUsernameAndFetchData = async () => { + try { + // Fetch the username + // const userData = await getUsername(); + const { username } = await getUsername(); + // const fetchedUsername = userData.username; + // setUsername(fetchedUsername); // Update the username state + console.log(username) + + const emotionData = await getRecommendation({username}); + const emotion = emotionData.data; + setEmotion(emotion) + console.log(emotion) + + } catch (error) { + console.error('Error fetching username', error); + } + }; + + // // useEffect(() => { + const handleSubmit = (e) => { + console.log(emotion) + console.log("get the emotion done...") + + const categories = emotionCategories[emotion]; + console.log(categories) + categories.forEach(category=> { + getVideoIdsByCategory(category) + .then(videoIds => { + console.log(`Video IDs for category '${category}':`, videoIds); + videoIds.map((videoId) => { + console.log(videoId); + console.log(`https://www.youtube.com/embed/${videoId}`); + }); + }) + .catch(error => console.error(error)); + }); + // }) + } + +// }, [emotion]); + + // useEffect(() => { + // getUsernameAndFetchData(); + // }, []); + + // const getUsernameAndFetchData = async () => { + // try { + // // Fetch the username + // // const userData = await getUsername(); + // const { username } = await getUsername(); + // // const fetchedUsername = userData.username; + // // setUsername(fetchedUsername); // Update the username state + // console.log(username) + + // const emotionData = await getRecommendation({username}); + // const emotion = emotionData.data; + // setEmotion(emotion) + // console.log(emotion) + + // } catch (error) { + // console.error('Error fetching username', error); + // } + // }; + + // useEffect(() => { + // getVideoIdsByCategory('music') + // .then((videoIds) => { + // console.log("hi", videoIds); + // videoIds.map((videoId) => { + // console.log(videoId); + // console.log(`https://www.youtube.com/embed/${videoId}`); + + // }); + // }) + // .catch(error => console.error(error)); + // }, []); + + async function getVideoIdsByCategory(category) { + const baseUrl = "https://www.googleapis.com/youtube/v3/search"; + const API_KEY = "AIzaSyA3Yj4sKRset4eC-KWDDkiiFckWNdBXdaw"; + const videoIds = []; + + const params = { + part: 'snippet', + q: category, + type: 'video', + maxResults: 5, + key: API_KEY + }; + + try { + const response = await axios.get(baseUrl, { params: params }); + const data = response.data; + + if ('items' in data) { + for (const item of data.items) { + videoIds.push(item.id.videoId); + } + } else { + console.log(`No items found for category '${category}'.`); + } + } catch (error) { + console.error(`Error fetching videos for category '${category}': ${error}`); + } + setVideoIds(videoIds); + return videoIds; + } + const storedData = localStorage.getItem('selectedCategories'); + useEffect(() => { + // getVideoIdsByCategory(storedData) + const categories = JSON.parse(storedData); + console.log(categories); + + categories.forEach(category=> { + getVideoIdsByCategory(category) + .then(videoIds => { + console.log(`Video IDs for category '${category}':`, videoIds); + videoIds.map((videoId) => { + console.log(videoId); + console.log(`https://www.youtube.com/embed/${videoId}`); + }); + }) + }); + + // return videoIds; + + }, [storedData]) + + const handleRating = (selectedRating) => { setRating(selectedRating); console.log(selectedRating); @@ -43,27 +192,27 @@ const YT_RecommendationView = () => { localStorage.setItem('rating', rating); }, [rating]); - useEffect(() => { - const requestOptions = { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: storedData, - }; - axios - .post(`${process.env.REACT_APP_SERVER_ENDPOINT}/api/youtube_list`, storedData) - .then((response) => { - console.log(response); - // const parsedArray = JSON.parse(response.data.replace(/\n/g, '')); - // const videoIdsArray = response.data.split('\n').map(line => line.replace(/[[\]']/g, '')).filter(id => id !== 'undefined'); - // videoIdsArray = videoIdsArray.split(', '); - // var videoUrls = JSON.parse(response.data); - // console.log(videoIdsArray) - setVideoIds((response.data.result)); - }) - .catch((error) => { - console.log(error); - }); - }, [storedData]); + // useEffect(() => { + // const requestOptions = { + // method: 'POST', + // headers: { 'Content-Type': 'application/json' }, + // body: storedData, + // }; + // axios + // .post(`${process.env.REACT_APP_SERVER_ENDPOINT}/api/youtube_list`, storedData) + // .then((response) => { + // console.log(response.data.result); + // // const parsedArray = JSON.parse(response.data.replace(/\n/g, '')); + // // const videoIdsArray = response.data.split('\n').map(line => line.replace(/[[\]']/g, '')).filter(id => id !== 'undefined'); + // // videoIdsArray = videoIdsArray.split(', '); + // // var videoUrls = JSON.parse(response.data); + // // console.log(videoIdsArray) + // setVideoIds(JSON.parse(response.data.result)); + // }) + // .catch((error) => { + // console.log(error); + // }); + // }, [storedData]); // async function getYoutubeVideosFromPreferences(apiKey, categories, maxResults = 5) { @@ -113,7 +262,7 @@ const YT_RecommendationView = () => { // const listData = JSON.parse(videoIds.replace(/'/g, '"')); // console.log(listData); - console.log({videoIds}) + console.log(videoIds) // console.log('Loaded Ids ', typeof videoUrls); return ( @@ -128,13 +277,14 @@ const YT_RecommendationView = () => {
+ {/* console.log(videoIds); */}
{videoIds.map((videoId) => { return ( <>
-
+ {/*
-
+
*/}
); @@ -155,6 +305,7 @@ const YT_RecommendationView = () => {
+ Select Your New Preferences @@ -174,7 +325,7 @@ const YT_RecommendationView = () => { Rate the Recommendations
- {[...Array(5)].map((star, index) => { + {/* {[...Array(5)].map((star, index) => { return ( { {index < rating ? '★' : '☆'} ); - })} + })} */}
+