Skip to content

Commit

Permalink
Merge branch 'main' into dashborad-BE
Browse files Browse the repository at this point in the history
  • Loading branch information
@tharoosha
tharoosha authored Oct 30, 2023
2 parents 06d2811 + e8fa2b7 commit d98057a
Show file tree
Hide file tree
Showing 8 changed files with 19,646 additions and 139 deletions.
Binary file added frontend/src/images/ai-loader-new.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/src/images/ai-loader.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/src/images/recording.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
93 changes: 46 additions & 47 deletions frontend/src/pages/AI_Assistant.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import Header from '../components/Header';
import Footer from '../components/Footer';
import '../styles/AI.scss';
import profileImg from '../images/chat-user.svg';
import aiLoader from '../images/ai-loader.gif';
import aiLoaderNew from '../images/ai-loader-new.gif';
import recordingGif from '../images/recording.gif';
import logo from '../images/depresio-logo-bg-removed.jpeg';
import { BsFillMicFill, BsSendCheck } from 'react-icons/bs';
import useFetch from '../hooks/fetch.hook';
Expand All @@ -24,22 +27,19 @@ const AI_Assistant = () => {
const [chatLog, setChatLog] = useState([]);
const [emotion, setEmotion] = useState('');
const [recommendations, setRecommendations] = useState('');
const [loading, setLoading] = useState(false);
const [recording, setRecording] = useState(false);

const chatContainerRef = useRef(null);

const [isRecording, setIsRecording] = useState(false);
// const [mediaRecorder, setMediaRecorder] = useState(null);
const mediaRecorderRef = useRef(null);

// const stream = navigator.mediaDevices.getUserMedia({ audio: true });

//Scroll to the bottom of the chat container whenever a new message is added
useEffect(() => {
if (chatContainerRef.current) {
chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
}
}, [response]);


// useEffect(() => {
// axios.get('${process.env.SERVER_ENDPOINT}/api/spotify_recommend', { mood: emotion })
// .then((response) => {
Expand All @@ -49,38 +49,33 @@ const AI_Assistant = () => {
// .catch((error) => console.error(error))
// }, [emotion]);


const startRecording = async () => {
if (isRecording) {
if (recording) {
if (mediaRecorderRef.current) {
mediaRecorderRef.current.stop();
setIsRecording(false);
setRecording(false);
}
return;
}

try {
if (mediaRecorderRef.current === null) {
await register(await connect());
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorderRef.current = new MediaRecorder(stream, { mimeType: 'audio/wav' });
}
const audioChunks = [];

mediaRecorderRef.current.ondataavailable = function (ev) {
audioChunks.push(ev.data);
};

mediaRecorderRef.current.onstop = async () => {
console.log('data available after MediaRecorder.stop() called.');
const audioBlob = new Blob(audioChunks);
const formData = new FormData();
const audioFile = new File([audioBlob], 'userVoice.wav', { type: 'audio/wav' });
formData.append('audio', audioFile);

const audio = formData.get('audio');
console.log(audio);

// Send the audio data to the Node.js backend
setLoading(true);
setRecording(false); // Set recording to false when audio is sent
axios
.post(`${process.env.REACT_APP_SERVER_ENDPOINT}/api/voice-input`, formData)
.then((response) => {
Expand All @@ -89,12 +84,7 @@ const AI_Assistant = () => {
data = String(data);
const updatedChatLogWithVoice = [...chatLog, { user: 'User', message: data }];
setChatLog(updatedChatLogWithVoice);
// setMessage(response.data.result);

const voice_message = response.data.result;

// console.log(chatLog)
// Make an HTTP request to the backend API to analyze user input using axios
axios
.post(`${process.env.REACT_APP_SERVER_ENDPOINT}/api/analyze`, { message: voice_message })
.then((response) => {
Expand All @@ -103,24 +93,21 @@ const AI_Assistant = () => {
setResponse(response.data.result);
})
.catch((error) => console.error(error));

axios
.post(`${process.env.REACT_APP_SERVER_ENDPOINT}/api/emotion_analyze`, { message: voice_message })
.then((response) => {
setEmotion(response.data.emotion);
// console.log(response.data.emotion)
})
.catch((error) => console.error(error));
// console.log(chatLog);
console.log(emotion);
setLoading(false);
})
.catch((error) => console.error(error));
.catch((error) => {
console.error(error);
setLoading(false);
});
};

setIsRecording(true);
setRecording(true);
mediaRecorderRef.current.start();
// console.log(mediaRecorder.state);
// setMediaRecorder(recorder);
} catch (error) {
console.error('Error accessing the microphone:', error);
}
Expand All @@ -134,28 +121,32 @@ const AI_Assistant = () => {



// Make an HTTP request to the backend API to analyze user input using axios
setLoading(true);

axios
.post(`${process.env.REACT_APP_SERVER_ENDPOINT}/api/analyze`, { message: message })
.then((response) => {
const updatedChatLogWithAI = [...updatedChatLog, { user: 'AI_Consultant', message: response.data.result }];
setChatLog(updatedChatLogWithAI);
setResponse(response.data.result);
// console.log(response.data.result)
setLoading(false);
})
.catch((error) => console.error(error));
.catch((error) => {
console.error(error);
setLoading(false);
});

axios
.post(`${process.env.REACT_APP_SERVER_ENDPOINT}/api/emotion_analyze`, { message: message })
.then((response) => {
setEmotion(response.data.emotion);

console.log(emotion)

})
.catch((error) => console.error(error));
// Clear the input field after submitting

setMessage('');
// console.log(chatLog);
// console.log(emotion);
};

return (
Expand All @@ -178,7 +169,6 @@ const AI_Assistant = () => {
<img src={chat.user === 'AI_Consultant' ? logo : profileImg} alt={chat.user} />
<div className="chat--item--meta">
<label>{chat.user === 'AI_Consultant' ? 'Depresio Assistant' : 'You'}</label>
{/* <label>Timestamp logic here</label> */}
</div>
</div>
</div>
Expand All @@ -187,23 +177,32 @@ const AI_Assistant = () => {
</div>
))}
</div>
{loading && (
<div className="loader ai-loader">
<img src={aiLoaderNew} alt="Loading..." />
</div>
)}
<div className="AI__wrapper__inner__2__footer">
<div className="flex">
<form onSubmit={handleSubmit}>
<div className="AI__wrapper__inner__2__footer__left">
<textarea placeholder="You can ask me anything! I am here to help 🙂" value={message} onChange={(e) => setMessage(e.target.value)}></textarea>
</div>
<div className="btn-flex-container">
<div className="AI__wrapper__inner__2__footer__right">
<button type="submit" className="submit-button">
<BsSendCheck />
</button>
</div>
<div className="AI__wrapper__inner__2__footer__right-2">
<button type="button" className="record_button" onClick={startRecording}>
<div className="btn-flex-container assistant-main-btns">
<button type="submit" className="submit-button">
<BsSendCheck />
</button>
<button type="button" className="record_button" onClick={startRecording}>
{recording ? (
<div class="wave">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
) : (
<BsFillMicFill />
</button>
</div>
)}
</button>
</div>
</form>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/MusicTherapy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ const MusicTherapy = () => {
<div className="mt-main-container mt--24 mb--48">
<div className="mt-second-col">
<div>
<h2 className="mb--16">Music Recommendations for You!</h2>
<h2 className="mb--16">Music recommended for you based on your emotions.</h2>
<div className="music-flex-cont">
{trackData.length > 0 ? (
trackData.map((track, index) => (
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/YT_RecommendationView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const YT_RecommendationView = () => {
<div className="AI__wrapper">
<div className=" AI__wrapper__inner__2">
<div className="AI__wrapper__inner__2__header">
<p>Videos recommended for you based on your preferences.</p>
<h2>Videos recommended for you based on your preferences.</h2>
</div>

<div className="">
Expand Down
50 changes: 50 additions & 0 deletions frontend/src/styles/AI.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,25 @@
gap: 24px;
min-height: 82vh;

.ai-loader {
display: flex;
justify-content: center;
}

.assistant-main-btns {
button {
display: flex;
align-items: center;
background-color: #141c16;
width: 35%;
padding: 10px 20px;
justify-content: center;
border: 1px solid #474747;
cursor: pointer;
color: #fff;
}
}

.AI__wrapper__inner {
background-color: #0d0f10;
border-radius: 5px;
Expand Down Expand Up @@ -439,6 +458,30 @@
}
}

.wave {
display: flex;
justify-content: center;
}

.dot {
width: 10px;
height: 10px;
background-color: red; /* Change the color as needed */
border-radius: 50%;
margin: 0 10px; /* Adjust the margin to control spacing between dots */
animation: wave 1s ease-in-out infinite; /* Adjust animation duration as needed */
}

@keyframes wave {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(20px); /* Adjust the distance for the wave effect */
}
}

@media (max-width: 600px) {
.btn-flex-container {
flex-direction: column !important;
Expand All @@ -449,4 +492,11 @@
flex-direction: column;
}
}

.assistant-main-btns {
button {
width: 90% !important;
margin: auto;
}
}
}
Loading

0 comments on commit d98057a

Please sign in to comment.