Add new pages

Frontend/src/pages/AudioToSign.jsx

@@ -58,55 +58,27 @@ const AudioToSign = () => {
 
 
   const handleVideoUpload = () => {
-
-
-
     if (videoFile) {
-      const formData = new FormData();
-      formData.append('video', videoFile);
+      const fileData = new FormData();
+      fileData.append('file', videoFile);
 
-      axios.post('http://127.0.0.1:5000/transcribe-audio', formData)
-        .then(response => {
-          console.log('Video uploaded successfully');
-        })
-        .catch(error => {
-          console.error('Error:', error);
-        });
+      RestService.videoToSign(token,fileData).then((res)=>{
+        console.log(res);
+      }).catch((err)=>{
+        console.log(err);
+      })
     }
   };
 
-
-  
-  
-  
-  
-
-
-
   const handleAudioUpload = () => {
-
-    console.log(audioFile)
       const fileData = new FormData();
-    //   formData.append('audio1', audioFile);
-
       fileData.append('file', audioFile);
 
-        RestService.audioToSing(token,fileData).then((res)=>{
-        //   setMeaning(res.data.signMap.value);
+        RestService.audioToSign(token,fileData).then((res)=>{
           console.log(res);
         }).catch((err)=>{
           console.log(err);
         })
-  
-    //   axios.post('http://127.0.0.1:5000/transcribe-audio', formData)
-    //     .then(response => {
-    //       console.log(response);
-    //       console.log('Audio uploaded successfully');
-    //     })
-    //     .catch(error => {
-    //       console.error('Error:', error);
-    //     });
-    
   };
 
   return (

Frontend/src/pages/LearningDashboard.jsx

+import React, { useEffect, useRef, useState } from "react";
+import { NavLink } from 'react-router-dom';
+import RestService from "../services/RestService";
+import bg from '../images/Wood.png';
+import '../styles/lessonDashboard.css';
+
+
+
+function LearningDashboard() {
+    return ( 
+        <div style={{ height: '100%' }}>
+            {/* Heading */}
+            {/* <div className="content-title d-flex justify-content-center align-items-center">
+                <h2> - nyqjrK m%Yak - </h2>
+            </div> */}
+            {/* Main Container start here*/}
+            <div className="dashboard-container">
+
+                <div className="dashboard-row"> 
+                  <div className="dashboard-col">
+
+                    {/* <div className="col-heading">
+                        <h5 className="headingname">Lesson Types</h5>
+                    </div> */}
+
+                    <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>
+                    </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>
+                    </div>
+
+                    <div className="dashboardCrad">
+                       {/* <h5 className="cardheading">Learning Sign Language Sentences</h5>  */}
+                       <NavLink exact to="/lessons/3" className="cardheading" activeClassName="active-link"><h5 className="subheading">Learning Sign Language Sentences</h5></NavLink>
+                    </div>
+
+                  </div>
+
+                  <div className="dashboard-col">
+
+                    {/* <div className="col-heading">
+                        <h5 className="headingname">Your Details</h5>
+                    </div> */}
+
+                    <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>
+                    </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>   */}
+                       <NavLink exact to="/mcq" className="cardheading" activeClassName="active-link"><h5 className="subheading">MCQ Session</h5></NavLink>
+                    </div>
+
+                    <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>
+                    </div>
+
+                  </div>
+                </div>
+
+            </div>
+        </div>
+     );
+}
+
+export default LearningDashboard;
\ No newline at end of file

Frontend/src/pages/Lesson.jsx

+import React, { useEffect, useRef, useState } from "react";
+import { useRecordWebcam } from 'react-record-webcam'
+import RestService from "../services/RestService";
+import bg from '../images/Wood.png'
+import '../styles/lesson.css';
+import hand1 from '../images/c.jpg';
+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 { lessonId } = useParams()
+
+    const [lessonList, setLessonList] = useState([]);
+    const [page, setPage] = useState(1);
+    const [selectedLesson, setSelectedLesson] = useState([]);
+    const [max, setMax] = useState(1);
+
+
+    useEffect(() => {
+        RestService.getAllLessonsById(token,{lessonId:lessonId}).then(
+            (res) => {
+                setMax(res.data.lessons.length)
+                setSelectedLesson(res.data.lessons[page-1])
+                setLessonList(res.data.lessons)
+            }
+        ).catch(
+            (err)=>{
+                console.log(err)
+            }
+        )
+    }, []);
+
+    function handleNext(){
+        setPage(page+1);
+        
+    }
+
+    function handleBack(){
+        setPage(page-1); 
+        
+    }
+    
+
+    return ( 
+        <div style={{ height: '100%' }}>
+            {/* Heading */}
+            <div className="content-title d-flex justify-content-center align-items-center">
+                <h2> - wOHhkh - </h2>
+            </div>
+            {/* Main Container start here*/}
+            <div className="main-container">
+
+                <div className="lessonCard">
+                    <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>
+                        </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> */}
+
+                            <div className="lessonImg">
+                                <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>
+                            </div>
+                            
+                        </div>
+
+                    </div>
+                </div>
+
+
+            
+            </div>
+
+        </div>
+     );
+}
+
+export default Lesson;
\ No newline at end of file

Frontend/src/pages/StartQuiz.jsx

+import React, { useEffect, useRef, useState } from "react";
+// import { useRecordWebcam } from 'react-record-webcam'
+// import RestService from "../services/RestService";
+import '../styles/startQuiz.css';
+import BackgroundQuiz from '../images/bubble.png';
+
+
+
+function StartQuiz() {
+    return (
+        <div className="Quiz" style={{ height: '100%' }}>
+           <div className="quizCard">
+               {/* <div className="smallRow">
+                    <h3 className="quizHeading">Start Quiz</h3>
+               </div>
+               <div className="bigRow">
+                  <img className="quizImag" src={BackgroundQuiz}/>
+               </div> */}
+           </div>
+        </div>
+    );
+}
+
+export default StartQuiz;
\ No newline at end of file

Frontend/src/pages/TextToSign.jsx

+import React from "react";
+import { useState } from "react";
+import RestService from "../services/RestService";
+import '../styles/textToSign.css';
+
+
+function TextToSign() {
+    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 [url, setUrl] = useState("");
+    const [inputText, setInputText] = useState("");
+
+    function getSignURL(){
+        RestService.getSignByText(token,{value:inputText}).then(res=>{
+            console.log(res)
+            if(res.data.success){
+                setUrl(res.data.url)
+            }
+        }).catch(err=>{
+            console.log(err)
+        })
+    }
+
+
+
+    return (
+
+        <div style={{ height: '100%' }}>
+            {/* Heading */}
+            <div className="content-title d-flex justify-content-center align-items-center">
+                <h2> - ix&#123;d YíofldaIh - </h2>
+            </div>
+
+            <div className="mt-4">
+                <div className="row align-items-center">
+                    <div className="col-md-10">
+                        <input type="text" className="form-control" onChange={(e) => setInputText(e.target.value)} />
+                    </div>
+                    <div className="col-md-2 ">
+                        <button className="btn video-btn " onClick={getSignURL} >Search</button>
+                    </div>
+                </div>
+            </div>
+ 
+
+            <div className="row_output" >
+
+                <div className="">
+                    <div className=" d-flex justify-content-center align-items-center">
+                        <img className="text-to-sign-img" src={url} style={{ width: '30%' }} />
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+            
+    );
+}
+
+export default TextToSign;
\ No newline at end of file

Frontend/src/pages/VocalTraining.jsx

 import React, { useEffect, useRef, useState } from "react";
 import {WORDS} from "../Utils/words";
-
 import '../styles/vocalTraining.css';
 import axios from "axios";
+import RestService from "../services/RestService";
+import vmsg from "vmsg";
+import playIcon from "../images/play.png";
+
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+
+const recorder = new vmsg.Recorder({
+  wasmURL: "https://unpkg.com/vmsg@0.3.0/vmsg.wasm"
+});
 
 
 function VocalTraining() {
-    const [isRecording, setIsRecording] = useState(false);
-    const [audioBlob, setAudioBlob] = useState(null);
-    const [audioUrl, setAudioUrl] = useState(null);
-    const [selectedWord, setSelectedWord]=useState([])
+    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"));
 
 
-    let mediaRecorder;
+    const [selectedWord, setSelectedWord] = useState([])
+    const [selectedFile, setSelectedFile] = useState([]);
+    const [url, setUrl] = useState([]);
 
-    const startRecording = async () => {
-        setIsRecording(true);
+    const [isRecording, setIsRecording] = useState(false);
 
+    async function start() {
+        setIsRecording(true)
         try {
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            mediaRecorder = new MediaRecorder(stream);
-            const chunks = [];
-
-            mediaRecorder.ondataavailable = (e) => {
-                if (e.data.size > 0) {
-                    chunks.push(e.data);
-                }
-            };
-
-            mediaRecorder.onstop = () => {
-                const blob = new Blob(chunks, { type: "audio/wav" });
-                setAudioBlob(blob);
-                setAudioUrl(URL.createObjectURL(blob));
-            };
-
-            mediaRecorder.start();
-            setTimeout(() => {
-                mediaRecorder.stop();
-                setIsRecording(false);
-            }, 5000); // Record for 5 seconds
-        } catch (error) {
-            console.error("Recording error:", error);
-            setIsRecording(false);
+            await recorder.initAudio();
+            await recorder.initWorker();
+            recorder.startRecording();
+        } catch (e) {
+            console.error(e);
+            setIsRecording(false)
         }
-    };
+    }
+
+    async function stop() {
+        setIsRecording(false)
+        const blob = await recorder.stopRecording();
+        setSelectedFile(new File([blob], 'Test.mp3', { type: blob.type }))
+        setUrl(URL.createObjectURL(blob))
 
-    const playAudio = () => {
-        if (audioUrl) {
-            const audio = new Audio(audioUrl);
-            audio.play();
+    }
+
+    async function play() {
+        if(url){
+            new Audio(url).play()
         }
-    };
 
-    const sendAudioToBackend = async () => {
-        alert(selectedWord.name)
-        if (audioBlob) {
+    }
+
+
+    function checkVoice(){
+        if (selectedFile) {
             const formData = new FormData();
-            formData.append("audio", audioBlob);
-            formData.append("label",selectedWord.name)
-
-             try {
-                 const response = await axios.post("http://127.0.0.1:5000/vocal-check", formData, {
-                     headers: {
-                         "Content-Type": "multipart/form-data",
-                     },
-                 });
-
-                 console.log("Backend response:", response.data);
-             } catch (error) {
-                 console.error("Backend error:", error);
-             }
-        }
-    };
 
 
+            formData.append('fileData', selectedFile);
+            formData.append("label", selectedWord.name)
+
+            RestService.checkVoice(formData).then((res) => {
+                if(res.data.isValid){
+                    toast.success('Voice Matched!!', {
+                        position: "top-center",
+                        autoClose: 5000,
+                        hideProgressBar: false,
+                        closeOnClick: true,
+                        pauseOnHover: true,
+                        draggable: true,
+                        progress: undefined,
+                        theme: "colored",
+                        });
+                }else{
+                    toast.error('Try Again!!', {
+                        position: "top-center",
+                        autoClose: 5000,
+                        hideProgressBar: false,
+                        closeOnClick: true,
+                        pauseOnHover: true,
+                        draggable: true,
+                        progress: undefined,
+                        theme: "colored",
+                        });
+                }
+            }).catch((err) => {
+                console.log(err);
+            })
+
+
+        }
+    }
+
 
     return ( 
         <div style={{ height: '100%' }}>
@@ -123,28 +145,36 @@ function VocalTraining() {
                                     </div>
                                 </div>
                                 <hr className="line"></hr>
-                                <div className="row col-md-12 d-flex justify-content-center align-items-center mt-4">
+                                {/* <div className="row col-md-12 d-flex justify-content-center align-items-center mt-4">
                                     <audio controls>
                                         <source src="horse.ogg" type="audio/ogg" />
                                         <source src="horse.mp3" type="audio/mpeg" />
                                         Your browser does not support the audio tag.
                                     </audio>
-                                </div>
+                                </div> */}
                                 <div className="row col-md-12 d-flex justify-content-center align-items-center mt-4">
                                     <div className="col-md-4">
-                                        <button className ="btn video-btn" style={{width:"100%"}} onClick={startRecording} disabled={isRecording}>
-                                            {isRecording ? "Recording..." : "Start Recording"}
-                                        </button>
+                                        {!isRecording ?
+                                            <button className="btn video-btn" onClick={start} style={{ width: "100%" }} >
+                                                Start
+                                            </button> :
+                                            <button className="btn video-btn" onClick={stop} style={{ width: "100%" }} >
+                                                Stop
+                                            </button>
+                                        }
                                     </div>
-                                    <div className="col-md-4">                                  
-                                        <button className ="btn video-btn" style={{width:"100%"}} onClick={playAudio} disabled={!audioUrl}>
+                                    <div className="col-md-4 d-flex justify-content-center align-items-center">                                  
+                                        {/* <button className ="btn video-btn" onClick={play} style={{width:"100%"}} >
                                             Listen
-                                        </button>
+                                        </button> */}
+                                        <img src={playIcon} onClick={play} style={{width:'60%', cursor:'pointer'}}/>  
                                     </div>
                                     <div className="col-md-4">
-                                        <button className ="btn video-btn" style={{width:"100%"}}  onClick={sendAudioToBackend} disabled={!audioBlob}>
+                                        <button className ="btn video-btn" style={{width:"100%"}}  onClick={checkVoice} >
                                             Match
-                                        </button>                                       
+                                        </button>
+
+                                                                            
                                     </div>
                                 </div>
                             </div>
@@ -153,6 +183,7 @@ function VocalTraining() {
                             {/* <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
                             <button type="button" className="btn btn-primary">Save changes</button> */}
                         </div>
+                        <ToastContainer />
                     </div>
                 </div>
             </div>