Skip to content

2
2023-191
Commit 048bb93a authored by it20118068's avatar it20118068
Browse files
Options

Update frontend

parent dbab536c
Hide whitespace changes
Inline Side-by-side
Showing with 163 additions and 114 deletions
Frontend/src/Utils/words.js
View file @ 048bb93a
import image1 from "../images/download1.jpeg"; import image1 from "../images/download1.jpeg";
import image2 from "../images/download2.jpeg"; import image2 from "../images/download2.jpeg";
import image3 from "../images/download3.jpeg"; import image3 from "../images/butterfly.jpeg";
import image4 from "../images/download4.jpeg"; import image4 from "../images/download4.jpeg";
import image5 from "../images/download5.png"; import image5 from "../images/download5.png";
import image6 from "../images/download6.jpeg"; import image6 from "../images/orange.jpeg";
import image7 from "../images/yellow1.png";
import image8 from "../images/water.png";
import image9 from "../images/sister.jpg";
import image10 from "../images/cat.jpg";
import image11 from "../images/speak.jpg";
import image12 from "../images/playground.jpg";
import image13 from "../images/eat.png";
import image14 from "../images/teacher.png";
import image15 from "../images/sorry.jpg";
import image16 from "../images/drink.jpg";
export const WORDS = [ export const WORDS = [
{ {
...@@ -38,17 +49,51 @@ export const WORDS = [ ...@@ -38,17 +49,51 @@ export const WORDS = [
}, },
{ {
id:7, id:7,
name: "Mother", name: "Yellow",
imgurl: image4, imgurl: image7,
}, },
{ {
id:8, id:8,
name: "Father", name: "Water",
imgurl: image5, imgurl: image8,
}, },
{ {
id:9, id:9,
name: "Orange", name: "Sister",
imgurl: image6, imgurl: image9,
},{
id:10,
name: "Cat",
imgurl: image10,
},
{
id:11,
name: "Speak",
imgurl: image11,
},
{
id:12,
name: "Play Ground",
imgurl: image12,
},
{
id:13,
name: "Eat",
imgurl: image13,
},
{
id:14,
name: "Teacher",
imgurl: image14,
},
{
id:15,
name: "Sorry",
imgurl: image15,
},
{
id:16,
name: "Drink",
imgurl: image16,
}, },
] ]
\ No newline at end of file
Frontend/src/pages/AudioToSign.jsx
View file @ 048bb93a
import React, { useState } from 'react'; import React, { useEffect, useState } from 'react';
import axios from 'axios'; import axios from 'axios';
import { useRecordWebcam } from 'react-record-webcam'; import { useRecordWebcam } from 'react-record-webcam';
import RestService from "../services/RestService"; import RestService from "../services/RestService";
...@@ -8,77 +8,74 @@ import '../styles/audioToSign.css'; ...@@ -8,77 +8,74 @@ import '../styles/audioToSign.css';
const AudioToSign = () => { const AudioToSign = () => {
const[isLogged, setIsLogged] = useState(sessionStorage.getItem("isLogged")); const[isLogged, setIsLogged] = useState(sessionStorage.getItem("isLogged"));
const[token, setToken] = useState(sessionStorage.getItem("token")); const[token, setToken] = useState(sessionStorage.getItem("token"));
const[username, setUserName] = useState(sessionStorage.getItem("username")); const[username, setUserName] = useState(sessionStorage.getItem("username"));
const[userId, setUserId] = useState(sessionStorage.getItem("userId")); const[userId, setUserId] = useState(sessionStorage.getItem("userId"));
//const [file, setFile] = useState(null);
const [file, setFile] = useState(null); const [url, setUrl] = useState("");
const [sinhalaValue, setSinhalaValue] = useState("");
const handleFileChange = (event) => {
const selectedFile = event.target.files[0];
setFile(selectedFile);
};
// const handleUpload = () => {
// if (file) {
// try {
// const formData = new FormData();
// formData.append('audio1', file);
// axios.post('http://127.0.0.1:5000/uploadaudio', formData, {
// //axios.get('http://localhost:9000/', formData, {
// headers: {
// 'Content-Type': 'multipart/form-data',
// },
// });
// console.log('File uploaded successfully!');
// } catch (error) {
// console.error('Error uploading file:', error);
// }
// }
// };
//*************************************************** */
const [videoFile, setVideoFile] = useState(null); const [videoFile, setVideoFile] = useState(null);
const [audioFile, setAudioFile] = useState([]); const [audioFile, setAudioFile] = useState([]);
const[audiotype,setAudiotype] = useState([]);
const handleVideoFileChange = (event) => { const handleVideoFileChange = (event) => {
setVideoFile(event.target.files[0]); setVideoFile(event.target.files[0]);
}; };
const handleAudioFileChange = (event) => {
setAudioFile(event.target.files[0]);
};
//Video to sign API
const handleVideoUpload = () => { const handleVideoUpload = () => {
if (videoFile) { if (videoFile) {
const fileData = new FormData(); const fileData = new FormData();
fileData.append('file', videoFile); fileData.append('file', videoFile);
if(videoFile.type == "video/mp4")
{
RestService.videoToSign(token,fileData).then((res)=>{
console.log(res);
setUrl(res.data.signMap.imgUrl)
setSinhalaValue(res.data.signMap.value)
const videoElement = document.getElementById('videoElement');
if (videoElement) {
videoElement.load(); // This reloads the video
}
}).catch((err)=>{
console.log(err);
})
}
else
{
alert("File type is not supported")
}
RestService.videoToSign(token,fileData).then((res)=>{
console.log(res);
}).catch((err)=>{
console.log(err);
})
} }
}; };
//Audio to sign API
const handleAudioUpload = () => { const handleAudioUpload = () => {
const fileData = new FormData(); const fileData = new FormData();
fileData.append('file', audioFile); fileData.append('file', audioFile);
if(audioFile.type == "audio/wav")
{
RestService.audioToSign(token,fileData).then((res)=>{ RestService.audioToSign(token,fileData).then((res)=>{
console.log(res); console.log(res);
setUrl(res.data.signMap.imgUrl)
console.log(res.data.signMap.imgUrl)
setSinhalaValue(res.data.signMap.value)
const videoElement = document.getElementById('videoElement');
if (videoElement) {
videoElement.load(); // This reloads the video
}
}).catch((err)=>{ }).catch((err)=>{
console.log(err); console.log(err);
}) })
}
else
{
alert("File type is not supported")
}
}; };
return ( return (
...@@ -86,7 +83,6 @@ const AudioToSign = () => { ...@@ -86,7 +83,6 @@ const AudioToSign = () => {
<div className="content-title d-flex justify-content-center align-items-center"> <div className="content-title d-flex justify-content-center align-items-center">
<h2> - Yío mßj¾:lh -</h2> <h2> - Yío mßj¾:lh -</h2>
</div> </div>
<div className="row col-md-12 mt-5 " > <div className="row col-md-12 mt-5 " >
<div className="col-md-6" > <div className="col-md-6" >
<div className="row custom-border p-4 d-flex align-items-center justify-content-center"> <div className="row custom-border p-4 d-flex align-items-center justify-content-center">
...@@ -102,22 +98,21 @@ const AudioToSign = () => { ...@@ -102,22 +98,21 @@ const AudioToSign = () => {
</div> </div>
<div className="col-md-6 "> <div className="col-md-6 ">
<div className="row d-flex align-items-center justify-content-center" > <div className="row d-flex align-items-center justify-content-center" >
<video autoPlay controls muted className="video-box1"/> <video autoPlay controls muted className="video-box1" id="videoElement" >
<source src={url} type="video/mp4" />
<source src={url} type="video/ogg" />
Your browser does not support the video tag.
</video>
</div> </div>
<hr className="line"></hr> <hr className="line"></hr>
<div className="row col-md-12 "> <div className="row col-md-12 ">
<h3 className="mt-2" style={{fontFamily:'FMAbayaBld',width:"100%"}}>w¾:h ( </h3> <h3 className="mt-2" style={{fontFamily:'FMAbayaBld',width:"100%"}}>w¾:h ( </h3>
<h1 className="d-flex align-items-center justify-content-center" >ffffs</h1> <h1 className="d-flex align-items-center justify-content-center" >{sinhalaValue}</h1>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );
}; };
export default AudioToSign; export default AudioToSign;
\ No newline at end of file
Frontend/src/pages/LearningDashboard.jsx
View file @ 048bb93a
...@@ -26,11 +26,13 @@ function LearningDashboard() { ...@@ -26,11 +26,13 @@ function LearningDashboard() {
<div className="dashboardCrad"> <div className="dashboardCrad">
{/* <h5 className="cardheading">Learning Sign Language Letters</h5> */} {/* <h5 className="cardheading">Learning Sign Language Letters</h5> */}
<NavLink exact to="/lessons/1" className="cardheading" activeClassName="active-link"><h5 className="subheading">Learning Sign Language Letters</h5></NavLink> <NavLink exact to="/lessons/1" className="cardheading" activeClassName="active-link"><h5 className="subheading">Learning Sign Language Letters</h5></NavLink>
{/* <NavLink exact to="/lesson/1" className="btn p-5 dashboardCrad" style={{color:'white'}} activeClassName="active-link"><h5 className="subheading">Learning Sign Language Letters</h5></NavLink> */}
</div> </div>
<div className="dashboardCrad"> <div className="dashboardCrad">
{/* <h5 className="cardheading">Learning Sign Language Words</h5> */} {/* <h5 className="cardheading">Learning Sign Language Words</h5> */}
<NavLink exact to="/lessons/2" className="cardheading" activeClassName="active-link"><h5 className="subheading">Learning Sign Language Words</h5></NavLink> <NavLink exact to="/lessons/2" className="cardheading" activeClassName="active-link"><h5 className="subheading">Learning Sign Language Words</h5></NavLink>
{/* <NavLink exact to="/lesson/2" className="btn p-5 dashboardCrad" style={{color:'white'}} activeClassName="active-link"><h5 className="subheading">Learning Sign Language Words</h5></NavLink> */}
</div> </div>
<div className="dashboardCrad"> <div className="dashboardCrad">
...@@ -38,30 +40,34 @@ function LearningDashboard() { ...@@ -38,30 +40,34 @@ function LearningDashboard() {
<NavLink exact to="/lessons/3" className="cardheading" activeClassName="active-link"><h5 className="subheading">Learning Sign Language Sentences</h5></NavLink> <NavLink exact to="/lessons/3" className="cardheading" activeClassName="active-link"><h5 className="subheading">Learning Sign Language Sentences</h5></NavLink>
</div> </div>
<div className="dashboardCrad">
<NavLink exact to="/mcq" className="cardheading" activeClassName="active-link"><h5 className="subheading">MCQ Session</h5></NavLink>
</div>
</div> </div>
<div className="dashboard-col"> {/* <div className="dashboard-col"> */}
{/* <div className="col-heading"> {/* <div className="col-heading">
<h5 className="headingname">Your Details</h5> <h5 className="headingname">Your Details</h5>
</div> */} </div> */}
<div className="dashboardCrad"> {/* <div className="dashboardCrad">
{/* <h5 className="cardheading">Completed Lessons</h5> */}
<NavLink exact to="/lesson" className="cardheading" activeClassName="active-link"><h5 className="subheading">Completed Lessons</h5></NavLink> <NavLink exact to="/lesson" className="cardheading" activeClassName="active-link"><h5 className="subheading">Completed Lessons</h5></NavLink>
</div> </div> */}
{/* <NavLink exact to="/lesson" className="btn p-5 dashboardCrad" style={{color:'white'}} activeClassName="active-link"><h5 className="subheading">Completed Lessons</h5></NavLink> */} {/* <NavLink exact to="/lesson" className="btn p-5 dashboardCrad" style={{color:'white'}} activeClassName="active-link"><h5 className="subheading">Completed Lessons</h5></NavLink> */}
<div className="dashboardCrad">
{/* <h5 className="cardheading">MCQ Session</h5> */} {/* <div className="dashboardCrad">
<NavLink exact to="/mcq" className="cardheading" activeClassName="active-link"><h5 className="subheading">MCQ Session</h5></NavLink> <NavLink exact to="/mcq" className="cardheading" activeClassName="active-link"><h5 className="subheading">MCQ Session</h5></NavLink>
</div> </div> */}
<div className="dashboardCrad"> {/* <div className="dashboardCrad">
{/* <h5 className="cardheading">Your Account</h5> */}
<NavLink exact to="/lesson" className="cardheading" activeClassName="active-link"><h5 className="subheading">Your Account</h5></NavLink> <NavLink exact to="/lesson" className="cardheading" activeClassName="active-link"><h5 className="subheading">Your Account</h5></NavLink>
</div> </div> */}
{/* </div> */}
</div>
</div> </div>
</div> </div>
......
Frontend/src/pages/Lesson.jsx
View file @ 048bb93a
...@@ -8,10 +8,10 @@ import { useParams } from "react-router-dom"; ...@@ -8,10 +8,10 @@ import { useParams } from "react-router-dom";
function Lesson() { function Lesson() {
const[isLogged, setIsLogged] = useState(sessionStorage.getItem("isLogged")); const [isLogged, setIsLogged] = useState(sessionStorage.getItem("isLogged"));
const[token, setToken] = useState(sessionStorage.getItem("token")); const [token, setToken] = useState(sessionStorage.getItem("token"));
const[username, setUserName] = useState(sessionStorage.getItem("username")); const [username, setUserName] = useState(sessionStorage.getItem("username"));
const[userId, setUserId] = useState(sessionStorage.getItem("userId")); const [userId, setUserId] = useState(sessionStorage.getItem("userId"));
const { lessonId } = useParams() const { lessonId } = useParams()
...@@ -22,31 +22,31 @@ function Lesson() { ...@@ -22,31 +22,31 @@ function Lesson() {
useEffect(() => { useEffect(() => {
RestService.getAllLessonsById(token,{lessonId:lessonId}).then( RestService.getAllLessonsById(token, { lessonId: lessonId }).then(
(res) => { (res) => {
setMax(res.data.lessons.length) setMax(res.data.lessons.length)
setSelectedLesson(res.data.lessons[page-1]) setSelectedLesson(res.data.lessons[page - 1])
setLessonList(res.data.lessons) setLessonList(res.data.lessons)
} }
).catch( ).catch(
(err)=>{ (err) => {
console.log(err) console.log(err)
} }
) )
}, []); }, []);
function handleNext(){ function handleNext() {
setPage(page+1); setPage(page + 1);
} }
function handleBack(){ function handleBack() {
setPage(page-1); setPage(page - 1);
} }
return (
return (
<div style={{ height: '100%' }}> <div style={{ height: '100%' }}>
{/* Heading */} {/* Heading */}
<div className="content-title d-flex justify-content-center align-items-center"> <div className="content-title d-flex justify-content-center align-items-center">
...@@ -59,40 +59,29 @@ function Lesson() { ...@@ -59,40 +59,29 @@ function Lesson() {
<div className="lessonContainer"> <div className="lessonContainer">
<div className="headingLesson"> <div className="headingLesson">
<h4 className="Lheading">Chapter 01 : How to Represent the Sign Language Letter "{lessonList[page-1] != null && lessonList[page-1].content }"</h4> <h4 className="Lheading"><b>පරිච්ඡේදය : 01</b></h4>
{/* How to Represent the Sign Language Letter "{lessonList[page-1] != null && lessonList[page-1].content }" */}
</div> </div>
{/* Lesson Chapters Start here*/} {/* Lesson Chapters Start here*/}
<div className="cardParagraph"> <div className="cardParagraph">
{/* <h4 className="lessonsHeading"><b>සංඥා භාෂාවේ</b> <b>"{lessonList[page - 1] != null && lessonList[page - 1].content}"</b> <b>අකුරු නියෝජනය කරන්නේ කෙසේද? </b></h4>
<div className="LessonParagraph">
<p className="lesson"> &bull; ඔබේ අත්ල පිටතට මුහුණලා ඔබේ අත අල්ලා ගන්න.</p>
<p className="lesson"> &bull; ඔබේ අනෙක් ඇඟිලි දිගු කර වෙන්ව තබාගෙන, ඔබේ රෝස ඇඟිල්ලට ඔබේ මාපටැඟිල්ල ස්පර්ශ කරන්න.</p>
<p className="lesson">මතක තබා ගන්න, ASL යනු දෘශ්‍ය භාෂාවක්, එබැවින් අත්සන් කිරීමේදී අත් හැඩතල, චලනයන් සහ මුහුණේ ඉරියව් කෙරෙහි අවධානය යොමු කිරීම වැදගත් වේ. ASL හි ප්‍රවීණයෙකු වීමට පුහුණුවීම ප්‍රධාන වේ.</p>
</div> */}
<div className="lessonImg"> <div className="lessonImg">
<img className="LImage" src={lessonList[page-1] != null && lessonList[page-1].img_url}/> <img className="LImage" src={lessonList[page - 1] != null && lessonList[page - 1].img_url} />
</div> </div>
<div className="LessonNavBtn"> <div className="LessonNavBtn">
<button className="Lnavbtn" onClick={handleBack} disabled={(page==1)} >Previous</button> <button className="Lnavbtn" onClick={handleBack} disabled={(page == 1)} >Previous</button>
{page} <b>{page}</b>
<button className="Lnavbtn" onClick={handleNext} disabled={(page==max)} >Next</button> <button className="Lnavbtn" onClick={handleNext} disabled={(page == max)} >Next</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );
} }
export default Lesson; export default Lesson;
\ No newline at end of file
Frontend/src/pages/VocalTraining.jsx
View file @ 048bb93a
...@@ -138,7 +138,7 @@ function VocalTraining() { ...@@ -138,7 +138,7 @@ function VocalTraining() {
<div> <div>
<div className="modal-mini-card" > <div className="modal-mini-card" >
<div className="row col-md-12 d-flex justify-content-center align-items-center"> <div className="row col-md-12 d-flex justify-content-center align-items-center">
<img src={selectedWord.imgurl} alt="" /> <img src={selectedWord.imgurl} style={{width:'150px'}} alt="" />
</div> </div>
<div className="row col-md-12 d-flex justify-content-center align-items-center"> <div className="row col-md-12 d-flex justify-content-center align-items-center">
<h1 style={{fontSize:'3rem'}}>{selectedWord.name}</h1> <h1 style={{fontSize:'3rem'}}>{selectedWord.name}</h1>
......
Frontend/src/styles/lesson.css
View file @ 048bb93a
.lessonsHeading {
padding-top: 30px;
margin-left: 30px;
padding-bottom: 50px;
}
.Lheading {
margin-left: 25px;
}
.lessonContainer { .lessonContainer {
margin-top: 20px; margin-top: 20px;
...@@ -70,6 +83,7 @@ ...@@ -70,6 +83,7 @@
.LessonNavBtn { .LessonNavBtn {
margin-top: 15px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-left: 20px; padding-left: 20px;
......
Frontend/src/styles/lessonDashboard.css
View file @ 048bb93a
...@@ -45,8 +45,8 @@ ...@@ -45,8 +45,8 @@
.dashboardCrad { .dashboardCrad {
width: 95%; width: 95%;
height: 120px; height: 90px;
margin-top: 37px; margin-top: 30px;
background-color: #af2c00; background-color: #af2c00;
border-radius: 20px; border-radius: 20px;
border: 4px solid white; border: 4px solid white;
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.552), 0 10px 10px 0 rgba(0, 0, 0, 0.338); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.552), 0 10px 10px 0 rgba(0, 0, 0, 0.338);
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
padding-top: 40px; padding-top: 25px;
/* margin-bottom: 30px; */ /* margin-bottom: 30px; */
text-decoration: none; text-decoration: none;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment