Skip to content

2
2023-029
Commit d9272568 authored by supundileepa00's avatar supundileepa00
Browse files
Options

feat: Initial UI development with main functionalities

parent 5b04c61f
Hide whitespace changes
Inline Side-by-side
Showing with 252 additions and 147 deletions
Project/Frontend/Web_App/src/pages/translate-page.tsx
View file @ d9272568
......@@ -16,6 +16,7 @@ import {
InputAdornment,
Stack,
Tooltip,
Container,
} from '@mui/material';
// layouts
import MainLayout from '../layouts/main';
......@@ -99,142 +100,156 @@ export default function AboutPage() {
<Head>
<title>Translate SSL to Text</title>
</Head>
<ButtonGroup disableElevation variant="contained" aria-label="Disabled elevation buttons">
<Button
variant={checkTranalationTypeForUpload()}
startIcon={<UploadIcon />}
onClick={() => {
setIsUploadFile(true);
}}
>
Upload
</Button>
<Button
variant={checkTranalationTypeForRecord()}
endIcon={<EmergencyRecordingIcon />}
onClick={() => {
setIsUploadFile(false);
}}
>
Record
</Button>
</ButtonGroup>
{isUploadFile ? (
<Box sx={{ flexGrow: 1 }}>
<Card>
<CardHeader title="Upload a video containing Sign Language" />
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Card>
<CardContent>
<Upload
file={file}
onDrop={handleDropSingleFile}
onDelete={() => setFile(null)}
/>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card sx={{ p: 5 }}>
<Box
display="grid"
gridTemplateColumns={{ xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
gap={5}
>
<Stack spacing={2}>
<Typography variant="overline" sx={{ color: 'text.secondary' }}>
on Change
</Typography>
<TextField
fullWidth
value={value}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Tooltip title="Copy">
<IconButton onClick={() => onCopy(value)}>
<Iconify icon="eva:copy-fill" width={24} />
</IconButton>
</Tooltip>
</InputAdornment>
),
}}
<Container maxWidth="l">
<ButtonGroup disableElevation variant="contained" aria-label="Disabled elevation buttons">
<Button
variant={checkTranalationTypeForUpload()}
startIcon={<UploadIcon />}
onClick={() => {
setIsUploadFile(true);
}}
>
Upload
</Button>
<Button
variant={checkTranalationTypeForRecord()}
startIcon={<EmergencyRecordingIcon />}
onClick={() => {
setIsUploadFile(false);
}}
>
Record
</Button>
</ButtonGroup>
{isUploadFile ? (
<Box sx={{ flexGrow: 1 }}>
<Card>
<CardHeader title="Upload a video containing Sign Language" />
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Card>
<CardContent>
<Upload
file={file}
onDrop={handleDropSingleFile}
onDelete={() => setFile(null)}
/>
</Stack>
</Box>
</Card>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card sx={{ p: 5 }}>
<Box
display="grid"
gridTemplateColumns={{ xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
gap={5}
>
<Stack spacing={2}>
<Typography variant="overline" sx={{ color: 'text.secondary' }}>
on Change
</Typography>
<TextField
fullWidth
value={value}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Tooltip title="Copy">
<IconButton onClick={() => onCopy(value)}>
<Iconify icon="eva:copy-fill" width={24} />
</IconButton>
</Tooltip>
</InputAdornment>
),
}}
/>
</Stack>
</Box>
</Card>
</Grid>
<Grid item xs={12} md={12}>
<center>
<Button
variant="contained"
style={{ width: '200px', height: '60px', fontSize: '20px' }}
sx={{
mb: 3,
}}
>
Translate
</Button>
</center>
</Grid>
</Grid>
</Grid>
</Card>
</Box>
) : (
// Video Capture
<Box sx={{ flexGrow: 1 }}>
<Card>
<CardHeader title="Upload a video containing Sign Language" />
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Card>
<CardContent>
<WebcamStreamCapture />
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card sx={{ p: 5 }}>
<Box
display="grid"
gridTemplateColumns={{ xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
gap={5}
>
<Stack spacing={2}>
<Typography variant="overline" sx={{ color: 'text.secondary' }}>
on Change
</Typography>
<TextField
fullWidth
value={value}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Tooltip title="Copy">
<IconButton onClick={() => onCopy(value)}>
<Iconify icon="eva:copy-fill" width={24} />
</IconButton>
</Tooltip>
</InputAdornment>
),
}}
/>
</Stack>
</Box>
</Card>
</Card>
</Box>
) : (
// Video Capture
<Box sx={{ flexGrow: 1 }}>
<Card>
<CardHeader title="Upload a video containing Sign Language" />
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Card>
<CardContent>
<WebcamStreamCapture />
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card sx={{ p: 5 }}>
<Box
display="grid"
gridTemplateColumns={{ xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
gap={5}
>
<Stack spacing={2}>
<Typography variant="overline" sx={{ color: 'text.secondary' }}>
on Change
</Typography>
<TextField
fullWidth
value={value}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Tooltip title="Copy">
<IconButton onClick={() => onCopy(value)}>
<Iconify icon="eva:copy-fill" width={24} />
</IconButton>
</Tooltip>
</InputAdornment>
),
}}
/>
</Stack>
</Box>
</Card>
</Grid>
<Grid item xs={12} md={12}>
<center>
<Button
variant="contained"
style={{ width: '200px', height: '60px', fontSize: '20px' }}
sx={{
mb: 3,
}}
>
Translate
</Button>
</center>
</Grid>
</Grid>
</Grid>
</Card>
</Box>
// <RecordView />
)}
</Card>
</Box>
)}
</Container>
</>
);
}
const RecordView = () => {
const { status, startRecording, stopRecording, mediaBlobUrl } = useReactMediaRecorder({
video: true,
});
return (
<div>
<p>{status}</p>
<button onClick={startRecording}>Start Recording</button>
<button onClick={stopRecording}>Stop Recording</button>
<video src={mediaBlobUrl} controls autoPlay loop />
</div>
);
};
Project/Frontend/Web_App/src/sections/slToText/WebcamStreamCapture.module.css 0 → 100644
View file @ d9272568
.videoContainer {
position: relative;
width: 50%;
padding-top: 56.25%; /* 16:9 aspect ratio */
}
.futuristicVideo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background-color: black;
opacity: 0.8;
filter: blur(4px);
transition: opacity 0.5s, filter 0.5s;
}
.futuristicVideo:hover {
opacity: 1;
filter: blur(0);
}
Project/Frontend/Web_App/src/sections/slToText/WebcamStreamCapture.tsx
View file @ d9272568
import React from 'react';
import React, { useEffect, useState } from 'react';
import Webcam from 'react-webcam';
import { Box, Button } from '@mui/material';
import { Box, Button, Container, Grid, Stack } from '@mui/material';
import StopIcon from '@mui/icons-material/Stop';
import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
import styles from './WebcamStreamCapture.module.css';
const WebcamStreamCapture = () => {
const webcamRef = React.useRef(null);
const mediaRecorderRef = React.useRef(null);
......@@ -10,7 +12,10 @@ const WebcamStreamCapture = () => {
const [mediaBlobUrl, setMediaBlobUrl] = React.useState([]);
const handleStartCaptureClick = React.useCallback(() => {
setRecordedChunks([]);
setMediaBlobUrl([]);
setCapturing(true);
mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
mimeType: 'video/webm',
});
......@@ -27,8 +32,18 @@ const WebcamStreamCapture = () => {
[setRecordedChunks]
);
const handleStopCaptureClick = React.useCallback(() => {
const handleStopCaptureClick = React.useCallback(async () => {
mediaRecorderRef.current.stop();
const blob = new Blob(recordedChunks, {
type: 'video/mp4',
});
const url = await URL.createObjectURL(blob);
console.log(url);
await setMediaBlobUrl(url);
setCapturing(false);
}, [mediaRecorderRef, webcamRef, setCapturing]);
......@@ -49,20 +64,71 @@ const WebcamStreamCapture = () => {
}
}, [recordedChunks]);
// Styles for camera
const [width, setWidth] = useState(window.innerWidth);
const handleResize = () => {
setWidth(window.innerWidth);
};
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return (
<>
<Webcam audio={false} ref={webcamRef} />
{capturing ? (
<Button onClick={handleStopCaptureClick}>Stop Capture</Button>
) : (
<Button onClick={handleStartCaptureClick}>Start Capture</Button>
)}
{recordedChunks.length > 0 && <Button onClick={handleDownload}>Download</Button>}
<video src={mediaBlobUrl} controls autoPlay loop />
<Grid container spacing={2}>
<Grid item xs={12}>
<center>
<Webcam audio={false} ref={webcamRef} style={{ width: '100%', maxWidth: '500px' }} />
</center>
</Grid>
<Grid item xs={12}>
<center>
{capturing ? (
<Button
onClick={handleStopCaptureClick}
startIcon={<StopIcon />}
color="error"
variant="contained"
>
Stop Capture
</Button>
) : (
<Button
onClick={handleStartCaptureClick}
startIcon={<RadioButtonCheckedIcon />}
color="error"
variant="contained"
>
Start Capture
</Button>
)}
{recordedChunks.length > 0 && (
<Button
onClick={handleDownload}
variant="contained"
sx={{
ml: 1,
}}
>
Download
</Button>
)}
</center>
</Grid>
<Grid item xs={12}>
<center>
<video src={mediaBlobUrl} controls autoPlay />
</center>
{/* <div className={styles.videoContainer}>
<video className={styles.futuristicVideo} src={mediaBlobUrl} controls autoPlay />
</div> */}
</Grid>
</Grid>
</>
);
};
export default WebcamStreamCapture;
// https://www.npmjs.com/package/react-webcam
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