Skip to content

2
2023-029
Commit 39585be5 authored by Sumudu-Himasha-Ranaweera's avatar Sumudu-Himasha-Ranaweera
Browse files
Options

Final Commit

parent 76b040a1
Show whitespace changes
Inline Side-by-side
Showing with 347 additions and 64 deletions
Project/Frontend/SignConnectPlus/src/pages/video-to-sign-language/TextTranslate/TextTranslate.tsx
View file @ 39585be5
...@@ -2,11 +2,19 @@ ...@@ -2,11 +2,19 @@
// material-ui // material-ui
import { import {
Button, Button,
Divider, // Divider,
Grid, Grid,
InputLabel, // InputLabel,
Stack, Stack,
TextField TextField,
InputAdornment,
Card,
CardHeader,
CardContent,
Box,
LinearProgress,
Typography,
IconButton
} from '@mui/material'; } from '@mui/material';
import { LocalizationProvider } from '@mui/x-date-pickers'; import { LocalizationProvider } from '@mui/x-date-pickers';
...@@ -18,10 +26,12 @@ import MainCard from 'components/MainCard'; ...@@ -18,10 +26,12 @@ import MainCard from 'components/MainCard';
import { Form, FormikProvider, useFormik } from 'formik'; import { Form, FormikProvider, useFormik } from 'formik';
import { useState } from 'react'; import { useState } from 'react';
import * as Yup from 'yup'; import * as Yup from 'yup';
import { EditOutlined, CopyOutlined, TranslationOutlined, PlayCircleFilled, CloseCircleFilled } from '@ant-design/icons';
// project imports // project imports
// assets // assets
import AvatarImage from 'assets/images/translate/avatar_2.png';
// types // types
...@@ -30,6 +40,8 @@ import * as Yup from 'yup'; ...@@ -30,6 +40,8 @@ import * as Yup from 'yup';
const TextTranslate = () => { const TextTranslate = () => {
const [showUnityWebGL, setShowUnityWebGL] = useState(false); const [showUnityWebGL, setShowUnityWebGL] = useState(false);
const [loading, setLoading] = useState(false);
const [showAvatarImage, setShowAvatarImage] = useState(true);
const FormSchema = Yup.object().shape({ const FormSchema = Yup.object().shape({
userInputText: Yup.string() userInputText: Yup.string()
...@@ -57,6 +69,8 @@ const TextTranslate = () => { ...@@ -57,6 +69,8 @@ const TextTranslate = () => {
enableReinitialize: true, enableReinitialize: true,
onSubmit: async (values, { setSubmitting, resetForm }) => { onSubmit: async (values, { setSubmitting, resetForm }) => {
try { try {
setLoading(true);
// API Call Here // API Call Here
const response = await axios.post("http://127.0.0.1:8000/rest_pyton/get_user_input_text", { const response = await axios.post("http://127.0.0.1:8000/rest_pyton/get_user_input_text", {
userInputText: values.userInputText, userInputText: values.userInputText,
...@@ -66,6 +80,7 @@ const TextTranslate = () => { ...@@ -66,6 +80,7 @@ const TextTranslate = () => {
if (response.status === 200) { if (response.status === 200) {
console.log("Success:", response.data); console.log("Success:", response.data);
setShowUnityWebGL(true) setShowUnityWebGL(true)
setShowAvatarImage(false);
} else { } else {
console.error("Request failed with status code:", response.status); console.error("Request failed with status code:", response.status);
} }
...@@ -74,10 +89,29 @@ const TextTranslate = () => { ...@@ -74,10 +89,29 @@ const TextTranslate = () => {
setSubmitting(false); setSubmitting(false);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally {
setLoading(false);
} }
} }
}); });
// Function to re-play the Unity WebGL build
const replayUnityWebGL = () => {
console.log('Re-play button clicked');
// Get the iframe element
const iframe = document.getElementById('unityWebGL') as HTMLIFrameElement | null;
if (iframe) {
// Reload the iframe's content by assigning the source URL again
iframe.src = "https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/";
}
};
// Function to cancel and hide the Unity WebGL build
const cancelUnityWebGL = () => {
setShowUnityWebGL(false);
};
const { errors, touched, handleSubmit, isSubmitting, getFieldProps } = formik; const { errors, touched, handleSubmit, isSubmitting, getFieldProps } = formik;
return ( return (
...@@ -86,12 +120,37 @@ const TextTranslate = () => { ...@@ -86,12 +120,37 @@ const TextTranslate = () => {
<LocalizationProvider dateAdapter={AdapterDateFns}> <LocalizationProvider dateAdapter={AdapterDateFns}>
<Form autoComplete="off" noValidate onSubmit={handleSubmit}> <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
<MainCard> <MainCard>
<Grid container spacing={3}>
<Grid item xs={4} md={4}> <Button
<Grid container spacing={3}> sx={{
<Grid item xs={12}> bgcolor: '#E5E4E2',
<Stack spacing={1.25}> width: '98%',
<InputLabel htmlFor="userInputText">Enter Text to Translate</InputLabel> height: '40px',
// padding: '10px 135px',
fontSize: '1.05rem',
'& .anticon': {
fontSize: '1.5rem',
},
color: '#000000', // Set font color to white
borderRadius: '20px', // Set border radius to 20px
marginTop: '15px', // Set margin top to 10px
marginLeft: '15px', // Set margin left to 10px
marginBottom: '25px',
fontWeight: 'bold',
}}
startIcon={<EditOutlined />}
// disabled // Disable the button
>
Let's Translate your Sinhala Text Here
</Button>
{/* Enter your text here */}
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Card sx={{ minHeight: '100%', marginBottom: '10px', marginLeft: '10px', padding: '35px 10px' }}>
<CardContent>
<CardHeader title="Enter Sinhala Text :" sx={{ marginLeft: '-10px' }} />
{/* <InputLabel htmlFor="userInputText">Enter Sinhala Text : </InputLabel> */}
<TextField <TextField
fullWidth fullWidth
id="userInputText" id="userInputText"
...@@ -99,39 +158,92 @@ const TextTranslate = () => { ...@@ -99,39 +158,92 @@ const TextTranslate = () => {
{...getFieldProps('userInputText')} {...getFieldProps('userInputText')}
error={Boolean(touched.userInputText && errors.userInputText)} error={Boolean(touched.userInputText && errors.userInputText)}
helperText={touched.userInputText && errors.userInputText} helperText={touched.userInputText && errors.userInputText}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<CopyOutlined />
</InputAdornment>
)
}}
/> />
</Stack> </CardContent>
</Grid>
<Grid item xs={12}> {/* Translate Button Here */}
<Divider /> <Box display="flex" justifyContent="flex-end" padding={2}>
</Grid> {/* <!-- Cancel button --> */}
<Grid item xs={12}>
<Grid container justifyContent="space-between" alignItems="center">
<Grid item>
</Grid>
<Grid item>
<Stack direction="row" spacing={2} alignItems="center">
<Button color="error" onClick={() => { setShowUnityWebGL(false) }}> <Button color="error" onClick={() => { setShowUnityWebGL(false) }}>
Cancel Cancel
</Button> </Button>
<Button type="submit" variant="contained" disabled={isSubmitting}> {/* <!-- Translate button --> */}
<Button
type="submit"
style={{
marginLeft: '10px'
}}
variant="contained" disabled={isSubmitting}
startIcon={<TranslationOutlined />}
>
TRANSLATE TRANSLATE
</Button> </Button>
</Stack> </Box>
</Grid> </Card>
</Grid>
</Grid>
</Grid> </Grid>
</Grid>
<Grid item xs={8} md={8}>
{showUnityWebGL ? <iframe {/* 3d avatar generate from here */}
// src="https://64f66d39fdef493229b2ddd9--lambent-unicorn-97396a.netlify.app/" <Grid item xs={12} md={6}>
<Card sx={{ minHeight: '100%', marginBottom: '10px', marginLeft: '10px', padding: '35px 10px' }}>
<Box display="grid" gap={5}>
<Stack spacing={2}>
{loading ? (
<Card>
<CardContent>
<LinearProgress />
<center>
<Typography variant="h5" component="div" sx={{ marginTop: 2 }}>
Loading...
</Typography>
</center>
</CardContent>
</Card>
) : (
<div>
{/* Conditionally render the Unity WebGL build */}
{showUnityWebGL && (
<Box display="flex" justifyContent="center" alignItems="center" minHeight="100%">
<iframe
id="unityWebGL"
src="https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/" src="https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/"
width="100%" width='90%'
height="700px" // Adjust the height as needed height="700px" // Adjust the height as needed
title="Unity WebGL" title="Unity WebGL"
style={{ border: 'none', overflow: 'hidden' }} style={{ border: 'none', overflow: 'hidden' }}
></iframe> : <>3D model Rendered Here...</>} ></iframe>
<div style={{ position: 'absolute', top: '110px', right: '60px', zIndex: 999 }}>
<IconButton onClick={replayUnityWebGL} style={{ backgroundColor: '#000000' }}>
<PlayCircleFilled style={{ color: 'white' }} />
</IconButton>
<IconButton onClick={cancelUnityWebGL} style={{ backgroundColor: '#000000', marginLeft: '10px' }}>
<CloseCircleFilled style={{ color: 'white' }} />
</IconButton>
</div>
</Box>
)}
</div>
)}
{showAvatarImage && !loading && (
<Box display="flex" justifyContent="center" alignItems="center" minHeight="50%">
<img src={AvatarImage} style={{ maxWidth: '50%' }} />
</Box>
)}
</Stack>
</Box>
</Card>
</Grid> </Grid>
</Grid> </Grid>
</MainCard> </MainCard>
......
Project/Frontend/SignConnectPlus/src/pages/video-to-sign-language/TextTranslate/TextTranslate.tsx.bkp 0 → 100644
View file @ 39585be5
// material-ui
import {
Button,
Divider,
Grid,
InputLabel,
Stack,
TextField
} from '@mui/material';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import axios from 'axios';
import MainCard from 'components/MainCard';
// third-party
import { Form, FormikProvider, useFormik } from 'formik';
import { useState } from 'react';
import * as Yup from 'yup';
// project imports
// assets
// types
// ==============================|| List ||============================== //
const TextTranslate = () => {
const [showUnityWebGL, setShowUnityWebGL] = useState(false);
const FormSchema = Yup.object().shape({
userInputText: Yup.string()
.required('Field is required')
.test('is-sinhala', 'Input must be in Sinhala', (value) => {
// You can use a regular expression or any custom logic to validate Sinhala text.
// Here's a basic example using a regular expression for Sinhala characters.
const sinhalaRegex = /^[\u0D80-\u0DFF\s]+$/; // Range for Sinhala Unicode characters
if (!value) {
// If the field is empty, it's valid as it's already being checked by 'required'
return true;
}
return sinhalaRegex.test(value);
})
.max(255, 'Input must be at most 255 characters long'),
});
const formik = useFormik({
initialValues: {
userInputText: "",
},
validationSchema: FormSchema,
enableReinitialize: true,
onSubmit: async (values, { setSubmitting, resetForm }) => {
try {
// API Call Here
const response = await axios.post("http://127.0.0.1:8000/rest_pyton/get_user_input_text", {
userInputText: values.userInputText,
});
// Check if the request was successful
if (response.status === 200) {
console.log("Success:", response.data);
setShowUnityWebGL(true)
} else {
console.error("Request failed with status code:", response.status);
}
resetForm()
setSubmitting(false);
} catch (error) {
console.error(error);
}
}
});
const { errors, touched, handleSubmit, isSubmitting, getFieldProps } = formik;
return (
<>
<FormikProvider value={formik}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Form autoComplete="off" noValidate onSubmit={handleSubmit}>
<MainCard>
<Grid container spacing={3}>
<Grid item xs={4} md={4}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Stack spacing={1.25}>
<InputLabel htmlFor="userInputText">Enter Text to Translate</InputLabel>
<TextField
fullWidth
id="userInputText"
placeholder="Enter Text Name"
{...getFieldProps('userInputText')}
error={Boolean(touched.userInputText && errors.userInputText)}
helperText={touched.userInputText && errors.userInputText}
/>
</Stack>
</Grid>
<Grid item xs={12}>
<Divider />
</Grid>
<Grid item xs={12}>
<Grid container justifyContent="space-between" alignItems="center">
<Grid item>
</Grid>
<Grid item>
<Stack direction="row" spacing={2} alignItems="center">
<Button color="error" onClick={() => { setShowUnityWebGL(false) }}>
Cancel
</Button>
<Button type="submit" variant="contained" disabled={isSubmitting}>
TRANSLATE
</Button>
</Stack>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={8} md={8}>
{showUnityWebGL ? <iframe
// src="https://64f66d39fdef493229b2ddd9--lambent-unicorn-97396a.netlify.app/"
src="https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/"
width="100%"
height="700px" // Adjust the height as needed
title="Unity WebGL"
style={{ border: 'none', overflow: 'hidden' }}
></iframe> : <>3D model Rendered Here...</>}
</Grid>
</Grid>
</MainCard>
</Form>
</LocalizationProvider>
</FormikProvider >
</>
);
};
export default TextTranslate;
\ No newline at end of file
Project/Frontend/SignConnectPlus/src/pages/video-to-sign-language/VideoTranslate/VideoTranslate.tsx
View file @ 39585be5
...@@ -18,24 +18,14 @@ import { ...@@ -18,24 +18,14 @@ import {
import MainCard from 'components/MainCard'; import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX'; import ScrollX from 'components/ScrollX';
import { CloudUploadOutlined, CopyOutlined, TranslationOutlined } from '@ant-design/icons'; import { CloudUploadOutlined, CopyOutlined, TranslationOutlined, PlayCircleFilled, CloseCircleFilled } from '@ant-design/icons';
// import { CloudUploadOutlined, CopyOutlined, HighlightOutlined, TranslationOutlined } from '@ant-design/icons';
import axios from 'axios'; import axios from 'axios';
import { MuiFileInput } from 'mui-file-input'; import { MuiFileInput } from 'mui-file-input';
import { useSnackbar } from 'notistack'; import { useSnackbar } from 'notistack';
import React, { useState } from 'react'; import React, { useState } from 'react';
// import Unity, { UnityContext } from "react-unity-webgl"; //asset
import AvatarImage from 'assets/images/translate/avatar.png';
// ---------- * Unity Application * ------------------------------
// const unityContext = new UnityContext ({
// loaderUrl: "build/myunityapp.loader.js",
// dataUrl: "build/myunityapp.data",
// frameworkUrl: "build/myunityapp.framework.js",
// codeUrl: "build/myunityapp.wasm",
// });
// ==============================|| List ||============================== // // ==============================|| List ||============================== //
...@@ -47,6 +37,7 @@ const VideoTranslate = () => { ...@@ -47,6 +37,7 @@ const VideoTranslate = () => {
const [translatedTextSi, setTranslatedTextSi] = useState(''); const [translatedTextSi, setTranslatedTextSi] = useState('');
const [translatedTextEn, setTranslatedTextEn] = useState(''); const [translatedTextEn, setTranslatedTextEn] = useState('');
const [showUnityWebGL, setShowUnityWebGL] = useState(false); const [showUnityWebGL, setShowUnityWebGL] = useState(false);
const [showAvatarImage, setShowAvatarImage] = useState(true);
const handleDropSingleFile = (files: any) => { const handleDropSingleFile = (files: any) => {
if (files) { if (files) {
...@@ -85,6 +76,9 @@ const VideoTranslate = () => { ...@@ -85,6 +76,9 @@ const VideoTranslate = () => {
setLoading(false) setLoading(false)
// Hide the AvatarImage after translation
setShowAvatarImage(false);
} catch (error) { } catch (error) {
console.error('Error:', error); console.error('Error:', error);
setLoading(false) setLoading(false)
...@@ -106,6 +100,23 @@ const VideoTranslate = () => { ...@@ -106,6 +100,23 @@ const VideoTranslate = () => {
} }
}; };
// Function to re-play the Unity WebGL build
const replayUnityWebGL = () => {
console.log('Re-play button clicked');
// Get the iframe element
const iframe = document.getElementById('unityWebGL') as HTMLIFrameElement | null;
if (iframe) {
// Reload the iframe's content by assigning the source URL again
iframe.src = "https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/";
}
};
// Function to cancel and hide the Unity WebGL build
const cancelUnityWebGL = () => {
setShowUnityWebGL(false);
};
return ( return (
<MainCard content={false}> <MainCard content={false}>
<ScrollX> <ScrollX>
...@@ -144,7 +155,7 @@ const VideoTranslate = () => { ...@@ -144,7 +155,7 @@ const VideoTranslate = () => {
<Card sx={{ minHeight: '100%', marginBottom: '10px', marginLeft: '10px', padding: '35px 10px' }}> <Card sx={{ minHeight: '100%', marginBottom: '10px', marginLeft: '10px', padding: '35px 10px' }}>
<CardContent> <CardContent>
{/* ! Important */} {/* ! Important */}
<CardHeader title="Select Your File : " sx={{ marginLeft: '-10px' }}/> <CardHeader title="Select Your File : " sx={{ marginLeft: '-10px' }} />
{/* @ts-ignore */} {/* @ts-ignore */}
<MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'video/*' }} sx={{ width: '100%' }} /> <MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'video/*' }} sx={{ width: '100%' }} />
...@@ -250,22 +261,37 @@ const VideoTranslate = () => { ...@@ -250,22 +261,37 @@ const VideoTranslate = () => {
{showUnityWebGL && ( {showUnityWebGL && (
<Box display="flex" justifyContent="center" alignItems="center" minHeight="100%"> <Box display="flex" justifyContent="center" alignItems="center" minHeight="100%">
<iframe <iframe
id="unityWebGL"
src="https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/" src="https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/"
width='90%' width='90%'
height="700px" // Adjust the height as needed height="700px" // Adjust the height as needed
title="Unity WebGL" title="Unity WebGL"
style={{ border: 'none', overflow: 'hidden' }} style={{ border: 'none', overflow: 'hidden' }}
></iframe> ></iframe>
<div style={{ position: 'absolute', top: '90px', right: '40px', zIndex: 999 }}>
<IconButton onClick={replayUnityWebGL} style={{ backgroundColor: '#000000' }}>
<PlayCircleFilled style={{ color: 'white' }}/>
</IconButton>
<IconButton onClick={cancelUnityWebGL} style={{ backgroundColor: '#000000', marginLeft: '10px' }}>
<CloseCircleFilled style={{ color: 'white' }}/>
</IconButton>
</div>
</Box> </Box>
)} )}
</div> </div>
)} )}
{showAvatarImage && !loading && (
<Box display="flex" justifyContent="center" alignItems="center" minHeight="50%">
<img src={AvatarImage} style={{ maxWidth: '50%' }} />
</Box>
)}
</Stack> </Stack>
</Box> </Box>
</Card> </Card>
</Grid> </Grid>
</Grid> </Grid>
</Card> </Card>
</Box> </Box>
......
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