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 image2 from "../images/download2.jpeg";
import image3 from "../images/download3.jpeg";
import image3 from "../images/butterfly.jpeg";
import image4 from "../images/download4.jpeg";
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 = [
{
......@@ -38,17 +49,51 @@ export const WORDS = [
},
{
id:7,
name: "Mother",
imgurl: image4,
name: "Yellow",
imgurl: image7,
},
{
id:8,
name: "Father",
imgurl: image5,
name: "Water",
imgurl: image8,
},
{
id:9,
name: "Orange",
imgurl: image6,
name: "Sister",
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 { useRecordWebcam } from 'react-record-webcam';
import RestService from "../services/RestService";
......@@ -8,77 +8,74 @@ import '../styles/audioToSign.css';
const AudioToSign = () => {
const[isLogged, setIsLogged] = useState(sessionStorage.getItem("isLogged"));
const[token, setToken] = useState(sessionStorage.getItem("token"));
const[username, setUserName] = useState(sessionStorage.getItem("username"));
const[userId, setUserId] = useState(sessionStorage.getItem("userId"));
const[isLogged, setIsLogged] = useState(sessionStorage.getItem("isLogged"));
const[token, setToken] = useState(sessionStorage.getItem("token"));
const[username, setUserName] = useState(sessionStorage.getItem("username"));
const[userId, setUserId] = useState(sessionStorage.getItem("userId"));
//const [file, setFile] = useState(null);
const [file, setFile] = useState(null);
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 [url, setUrl] = useState("");
const [sinhalaValue, setSinhalaValue] = useState("");
const [videoFile, setVideoFile] = useState(null);
const [audioFile, setAudioFile] = useState([]);
const[audiotype,setAudiotype] = useState([]);
const handleVideoFileChange = (event) => {
setVideoFile(event.target.files[0]);
};
const handleAudioFileChange = (event) => {
setAudioFile(event.target.files[0]);
};
//Video to sign API
const handleVideoUpload = () => {
if (videoFile) {
const fileData = new FormData();
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 fileData = new FormData();
fileData.append('file', audioFile);
if(audioFile.type == "audio/wav")
{
RestService.audioToSign(token,fileData).then((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)=>{
console.log(err);
})
}
else
{
alert("File type is not supported")
}
};
return (
......@@ -86,7 +83,6 @@ const AudioToSign = () => {
<div className="content-title d-flex justify-content-center align-items-center">
<h2> - Yío mßj¾:lh -</h2>
</div>
<div className="row col-md-12 mt-5 " >
<div className="col-md-6" >
<div className="row custom-border p-4 d-flex align-items-center justify-content-center">
......@@ -102,22 +98,21 @@ const AudioToSign = () => {
</div>
<div className="col-md-6 ">
<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>
<hr className="line"></hr>
<div className="row col-md-12 ">
<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>
);
};
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() {
<div className="dashboardCrad">
{/* <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="/lesson/1" className="btn p-5 dashboardCrad" style={{color:'white'}} activeClassName="active-link"><h5 className="subheading">Learning Sign Language Letters</h5></NavLink> */}
</div>
<div className="dashboardCrad">
{/* <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="/lesson/2" className="btn p-5 dashboardCrad" style={{color:'white'}} activeClassName="active-link"><h5 className="subheading">Learning Sign Language Words</h5></NavLink> */}
</div>
<div className="dashboardCrad">
......@@ -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>
</div>
<div className="dashboardCrad">
<NavLink exact to="/mcq" className="cardheading" activeClassName="active-link"><h5 className="subheading">MCQ Session</h5></NavLink>
</div>
</div>
<div className="dashboard-col">
{/* <div className="dashboard-col"> */}
{/* <div className="col-heading">
<h5 className="headingname">Your Details</h5>
</div> */}
<div className="dashboardCrad">
{/* <h5 className="cardheading">Completed Lessons</h5> */}
{/* <div className="dashboardCrad">
<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> */}
<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>
</div>
</div> */}
<div className="dashboardCrad">
{/* <h5 className="cardheading">Your Account</h5> */}
{/* <div className="dashboardCrad">
<NavLink exact to="/lesson" className="cardheading" activeClassName="active-link"><h5 className="subheading">Your Account</h5></NavLink>
</div>
</div> */}
{/* </div> */}
</div>
</div>
</div>
......
Frontend/src/pages/Lesson.jsx
View file @ 048bb93a
......@@ -8,10 +8,10 @@ import { useParams } from "react-router-dom";
function Lesson() {
const[isLogged, setIsLogged] = useState(sessionStorage.getItem("isLogged"));
const[token, setToken] = useState(sessionStorage.getItem("token"));
const[username, setUserName] = useState(sessionStorage.getItem("username"));
const[userId, setUserId] = useState(sessionStorage.getItem("userId"));
const [isLogged, setIsLogged] = useState(sessionStorage.getItem("isLogged"));
const [token, setToken] = useState(sessionStorage.getItem("token"));
const [username, setUserName] = useState(sessionStorage.getItem("username"));
const [userId, setUserId] = useState(sessionStorage.getItem("userId"));
const { lessonId } = useParams()
......@@ -22,31 +22,31 @@ function Lesson() {
useEffect(() => {
RestService.getAllLessonsById(token,{lessonId:lessonId}).then(
RestService.getAllLessonsById(token, { lessonId: lessonId }).then(
(res) => {
setMax(res.data.lessons.length)
setSelectedLesson(res.data.lessons[page-1])
setSelectedLesson(res.data.lessons[page - 1])
setLessonList(res.data.lessons)
}
).catch(
(err)=>{
(err) => {
console.log(err)
}
)
}, []);
function handleNext(){
setPage(page+1);
function handleNext() {
setPage(page + 1);
}
function handleBack(){
setPage(page-1);
function handleBack() {
setPage(page - 1);
}
return (
return (
<div style={{ height: '100%' }}>
{/* Heading */}
<div className="content-title d-flex justify-content-center align-items-center">
......@@ -59,40 +59,29 @@ function Lesson() {
<div className="lessonContainer">
<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>
{/* Lesson Chapters Start here*/}
<div className="cardParagraph">
{/*
<div className="LessonParagraph">
<p className="lesson"> &bull; ඔබේ අත්ල පිටතට මුහුණලා ඔබේ අත අල්ලා ගන්න.</p>
<p className="lesson"> &bull; ඔබේ අනෙක් ඇඟිලි දිගු කර වෙන්ව තබාගෙන, ඔබේ රෝස ඇඟිල්ලට ඔබේ මාපටැඟිල්ල ස්පර්ශ කරන්න.</p>
<p className="lesson">මතක තබා ගන්න, ASL යනු දෘශ්‍ය භාෂාවක්, එබැවින් අත්සන් කිරීමේදී අත් හැඩතල, චලනයන් සහ මුහුණේ ඉරියව් කෙරෙහි අවධානය යොමු කිරීම වැදගත් වේ. ASL හි ප්‍රවීණයෙකු වීමට පුහුණුවීම ප්‍රධාන වේ.</p>
</div> */}
<h4 className="lessonsHeading"><b>සංඥා භාෂාවේ</b> <b>"{lessonList[page - 1] != null && lessonList[page - 1].content}"</b> <b>අකුරු නියෝජනය කරන්නේ කෙසේද? </b></h4>
<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 className="LessonNavBtn">
<button className="Lnavbtn" onClick={handleBack} disabled={(page==1)} >Previous</button>
{page}
<button className="Lnavbtn" onClick={handleNext} disabled={(page==max)} >Next</button>
<button className="Lnavbtn" onClick={handleBack} disabled={(page == 1)} >Previous</button>
<b>{page}</b>
<button className="Lnavbtn" onClick={handleNext} disabled={(page == max)} >Next</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
);
}
export default Lesson;
\ No newline at end of file
Frontend/src/pages/VocalTraining.jsx
View file @ 048bb93a
......@@ -138,7 +138,7 @@ function VocalTraining() {
<div>
<div className="modal-mini-card" >
<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 className="row col-md-12 d-flex justify-content-center align-items-center">
<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 {
margin-top: 20px;
......@@ -70,6 +83,7 @@
.LessonNavBtn {
margin-top: 15px;
display: flex;
justify-content: space-between;
padding-left: 20px;
......
Frontend/src/styles/lessonDashboard.css
View file @ 048bb93a
......@@ -45,8 +45,8 @@
.dashboardCrad {
width: 95%;
height: 120px;
margin-top: 37px;
height: 90px;
margin-top: 30px;
background-color: #af2c00;
border-radius: 20px;
border: 4px solid white;
......@@ -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);
cursor: pointer;
text-align: center;
padding-top: 40px;
padding-top: 25px;
/* margin-bottom: 30px; */
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