Skip to content

2
2023-191
Commit 7644473b authored by it20118068's avatar it20118068
Browse files
Options

Adjust css

parent b640ec9a
Hide whitespace changes
Inline Side-by-side
Showing with 288 additions and 176 deletions
Frontend/src/words.js → Frontend/src/Utils/words.js
View file @ 7644473b
import image1 from "./images/download1.jpeg";
import image2 from "./images/download2.jpeg";
import image3 from "./images/download3.jpeg";
import image4 from "./images/download4.jpeg";
import image5 from "./images/download5.png";
import image6 from "./images/download6.jpeg";
import image1 from "../images/download1.jpeg";
import image2 from "../images/download2.jpeg";
import image3 from "../images/download3.jpeg";
import image4 from "../images/download4.jpeg";
import image5 from "../images/download5.png";
import image6 from "../images/download6.jpeg";
export const WORDS = [
{
......
Frontend/src/components/SideNavBar.jsx
View file @ 7644473b
......@@ -25,13 +25,13 @@ function SideNavBar() {
<div className="" style={{height:'60%', backgroundColor:'',}}>
<div className="d-flex justify-content-center align-items-center" style={{marginLeft:'5%'}}>
<nav class="nav flex-column mt-5">
<nav className="nav flex-column mt-5">
{/* අධ්‍යයනය */}
<NavLink exact to="/" className="nav-link main-nav-link" activeClassName="active-link">wOHhkh</NavLink>
{/* සංඥා ශබ්දකෝෂය */}
<NavLink exact to="/about" className="nav-link main-nav-link" activeClassName="active-link">ix&#123;d YíofldaIh</NavLink>
{/* ශබ්ද පරිවර්ථකය */}
<NavLink exact to="/contact" className="nav-link main-nav-link" activeClassName="active-link">Yío mßj¾:lh</NavLink>
<NavLink exact to="/audio-to-sign" className="nav-link main-nav-link" activeClassName="active-link">Yío mßj¾:lh</NavLink>
{/* සංඥා හඳුනාගැනීම */}
<NavLink exact to="/sign-detection" className="nav-link main-nav-link " activeClassName="active-link">ix&#123;d y÷kd.ekSu</NavLink>
{/* වාචික පුහුණුව */}
......@@ -40,13 +40,13 @@ function SideNavBar() {
</div>
</div>
<div style={{height:'20%' }} className="d-flex justify-content-center align-items-center">
<div class="btn-group">
<button type="button" class=" nav-link user-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div className="btn-group">
<button type="button" className=" nav-link user-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{name}
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">View Profile</button>
<button class="dropdown-item" type="button" onClick={handleLogout}>Logout</button>
<div className="dropdown-menu dropdown-menu-right">
<button className="dropdown-item" type="button">View Profile</button>
<button className="dropdown-item" type="button" onClick={handleLogout}>Logout</button>
</div>
</div>
</div>
......
Frontend/src/components/VocalTrainingCard.jsx
View file @ 7644473b
......@@ -8,6 +8,7 @@ function VocalTrainingCard(props) {
const [audioBlob, setAudioBlob] = useState(null);
const [audioUrl, setAudioUrl] = useState(null);
const [selectedWord, setSelectedWord]=useState(props.data)
const [wordName, setWordName] = useState(props.data.name);
let mediaRecorder;
......@@ -70,49 +71,52 @@ function VocalTrainingCard(props) {
}
};
function test(){
alert(name)
}
return (
<>
<div className="card">
<div className="mini-card" data-toggle="modal" data-target="#exampleModalCenter">
<div className="word">
<button className="btn" data-toggle="modal" data-target="#exampleModalCenter">
<div className="row">
<img src={imgurl} />
<div className="label">
<p><b>{name}</b></p>
</div>
</button>
</div>
<div className="row mt-4">
<h4 >{name}</h4>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<div className="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div className="modal-dialog modal-dialog-centered modal-lg" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLongTitle">{name}</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div>
<button class ="btn" onClick={startRecording} disabled={isRecording}>
<button className ="btn" onClick={startRecording} disabled={isRecording}>
{isRecording ? "Recording..." : "Start Recording"}
</button>
<button class ="btn" onClick={playAudio} disabled={!audioUrl}>
<button className ="btn" onClick={playAudio} disabled={!audioUrl}>
Check Audio
</button>
<button class ="btn" onClick={sendAudioToBackend} disabled={!audioBlob}>
<button className ="btn" onClick={sendAudioToBackend} disabled={!audioBlob}>
Send Audio to Backend
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" onClick={test} className="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</>
);
}
......
Frontend/src/pages/AudioRecoder.js deleted 100644 → 0
View file @ b640ec9a
import React, { useState } from "react";
// import axios from "axios";
function AudioRecoder() {
const [isRecording, setIsRecording] = useState(false);
const [audioBlob, setAudioBlob] = useState(null);
const [audioUrl, setAudioUrl] = useState(null);
let mediaRecorder;
const startRecording = async () => {
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);
}
};
const playAudio = () => {
if (audioUrl) {
const audio = new Audio(audioUrl);
audio.play();
}
};
const sendAudioToBackend = async () => {
if (audioBlob) {
const formData = new FormData();
formData.append("audio", audioBlob);
// try {
// const response = await axios.post("/getText", formData, {
// headers: {
// "Content-Type": "multipart/form-data",
// },
// });
// console.log("Backend response:", response.data);
// } catch (error) {
// console.error("Backend error:", error);
// }
}
};
return (
<div>
<button onClick={startRecording} disabled={isRecording}>
{isRecording ? "Recording..." : "Start Recording"}
</button>
<button onClick={playAudio} disabled={!audioUrl}>
Check Audio
</button>
<button onClick={sendAudioToBackend} disabled={!audioBlob}>
Send Audio to Backend
</button>
</div>
);
}
export default AudioRecoder;
Frontend/src/pages/AudioToSign.jsx
View file @ 7644473b
......@@ -110,38 +110,36 @@ const AudioToSign = () => {
};
return (
<div className="col col-lg-12">
<div className='row'>
<h1>Upload Video</h1>
</div>
<div className='row'>
<input type="file" accept="video/*" onChange={handleVideoFileChange} />
{/* <button onClick={handleVideoUpload}>Upload Video</button> */}
<button className="btn video-btn" onClick={handleVideoUpload}>Upload Video</button>
</div>
<div className='row'>
<h1>Upload Audio</h1>
</div>
<div className='row'>
<input type="file" onChange={(e)=>setAudioFile(e.target.files[0])} />
{/* <button onClick={handleAudioUpload}>Upload Audio</button> */}
<button className="btn video-btn" onClick={handleAudioUpload}>Upload Audio</button>
</div>
<br/>
<div className="row">
<div className="col-6 col-sm-4">
<h3 className="mt-4" style={{fontFamily:'FMAbayaBld'}}>w¾:h ( </h3>
<h1 className="d-flex align-items-center justify-content-center" >ffffs</h1>
<div style={{height:'100%'}}>
<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">
<h3 style={{width:"100%"}}>Upload Video</h3>
<input type="file" accept="video/*" onChange={handleVideoFileChange} />
<button className="btn video-btn" onClick={handleVideoUpload}>Upload Video</button>
</div>
<div className="row mt-3 custom-border p-4 d-flex align-items-center justify-content-center">
<h3 style={{width:"100%"}}>Upload Audio</h3>
<input type="file" onChange={(e)=>setAudioFile(e.target.files[0])} />
<button className="btn video-btn" onClick={handleAudioUpload}>Upload Audio</button>
</div>
<div class="col-6 col-sm-4">
<video autoPlay muted className="video-box1"/>
</div>
<div className="col-md-6 ">
<div className="row d-flex align-items-center justify-content-center" >
<video autoPlay controls muted className="video-box1"/>
</div>
</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>
</div>
</div>
</div>
</div>
......
Frontend/src/pages/VocalTraining.jsx
View file @ 7644473b
import React, { useEffect, useRef, useState } from "react";
import {WORDS} from "../words";
import {WORDS} from "../Utils/words";
import '../styles/vocalTraining.css';
import VocalTrainingCard from "../components/VocalTrainingCard";
import axios from "axios";
function VocalTraining() {
const [isRecording, setIsRecording] = useState(false);
const [audioBlob, setAudioBlob] = useState(null);
const [audioUrl, setAudioUrl] = useState(null);
const [selectedWord, setSelectedWord]=useState([])
let mediaRecorder;
const startRecording = async () => {
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);
}
};
const playAudio = () => {
if (audioUrl) {
const audio = new Audio(audioUrl);
audio.play();
}
};
const sendAudioToBackend = async () => {
alert(selectedWord.name)
if (audioBlob) {
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);
}
}
};
return (
<div style={{ height: '100%' }}>
{/* <h2 className="content-title"> jdÑl mqyqKqj</h2> */}
<div className="content-title d-flex justify-content-center align-items-center">
<h2> - jdÑl mqyqKqj -</h2>
</div>
<div className="d-flex align-items-center" style={{ height: '92%' }}>
<div className="row">
<div className="col d-flex align-items-center">
</div>
<div className="col d-flex align-items-center">
<div className="maincard scroll">
<div className="words">
{" "}
{WORDS.map((word) =>
<VocalTrainingCard data ={word}/>)}</div>
<div className="d-flex justify-content-center align-items-center">
<div className="maincard ">
<div className="words">
{
WORDS.map(
word =>
<div className="mini-card" key={word.id} onClick={()=>setSelectedWord(word)} data-toggle="modal" data-target="#exampleModalCenter">
<div className="word">
<div className="row">
<img src={word.imgurl} />
</div>
<div className="row mt-4">
<h4 >{word.name}</h4>
</div>
</div>
</div>
)
}
</div>
</div>
</div>
<div className="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div className="modal-dialog modal-dialog-centered modal-lg" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLongTitle">{selectedWord.name}</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div>
<button className ="btn" onClick={startRecording} disabled={isRecording}>
{isRecording ? "Recording..." : "Start Recording"}
</button>
<button className ="btn" onClick={playAudio} disabled={!audioUrl}>
Check Audio
</button>
<button className ="btn" onClick={sendAudioToBackend} disabled={!audioBlob}>
Send Audio to Backend
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
......
Frontend/src/styles/audioToSign.css 0 → 100644
View file @ 7644473b
.video-box1 {
border-width: 3px;
border-color:#af2c00;
border-style: solid;
border-radius: 2vw;
/* 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 1px 10px 0 rgba(66, 66, 66, 0.336), 0 6px 20px 0 rgba(100, 100, 100, 0.082); */
/* width: 40vw; */
height: 45vh;
width: 65vh;
align-items: center;
background-color: black;
background-image: url('../images/Skulls.jpg');
}
.custom-border {
border-width: 2px;
border-color:#af2c00;
border-style: solid;
border-radius: 1vw;
}
.aa {
align-items: end;
}
.card {
align-items: end;
width: 100%;
background-color: transparent;
border-color: transparent;
}
section {
margin: 20px;
}
input::-webkit-file-upload-button {
position: absolute;
padding: 6px 15px;
background-color: rgb(230, 154, 78);
border: none;
border-radius: 5px;
color: white;
text-transform: uppercase;
box-shadow: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
transition: 100ms ease-out;
cursor: pointer;
}
input::-webkit-file-upload-button:hover {
background-color: #9e8160;
box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12)
}
\ No newline at end of file
Frontend/src/styles/vocalTraining.css
View file @ 7644473b
......@@ -52,29 +52,65 @@
object-fit: contain;
}
.maincard{
width: 900px;
width: 100%;
height: 400px;
border: 1px solid orangered;
border-radius: 5px;
overflow: hidden;
border-radius: 1vw;
overflow: scroll;
overflow-x: hidden;
padding:10px;
margin: 30px 20px;
background-color: white;
/* background-color: white; */
align-items: center;
object-fit: cover;
}
.scroll{
color: orangered;
overflow-y: scroll;
scrollbar-color:orange;
}
.btn{
.mini-card {
background-color: #af2c00;
margin: 5%;
border-radius: 10%;
cursor: pointer;
color: white;
border-width: 2px;
border-color:#ffffff;
border-style: solid;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.552), 0 10px 10px 0 rgba(0, 0, 0, 0.338);
}
.btn:hover{
color:orange;
.mini-card:hover {
/* background-color: transparent;
border-width: 2px;
border-color:#af2c00;
border-style: solid; */
background-color: #5e1700;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #af2c0071;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #af2c00;
}
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