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
Hide 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 @@
// material-ui
import {
Button,
Divider,
// Divider,
Grid,
InputLabel,
// InputLabel,
Stack,
TextField
TextField,
InputAdornment,
Card,
CardHeader,
CardContent,
Box,
LinearProgress,
Typography,
IconButton
} from '@mui/material';
import { LocalizationProvider } from '@mui/x-date-pickers';
......@@ -18,10 +26,12 @@ import MainCard from 'components/MainCard';
import { Form, FormikProvider, useFormik } from 'formik';
import { useState } from 'react';
import * as Yup from 'yup';
import { EditOutlined, CopyOutlined, TranslationOutlined, PlayCircleFilled, CloseCircleFilled } from '@ant-design/icons';
// project imports
// assets
import AvatarImage from 'assets/images/translate/avatar_2.png';
// types
......@@ -30,6 +40,8 @@ import * as Yup from 'yup';
const TextTranslate = () => {
const [showUnityWebGL, setShowUnityWebGL] = useState(false);
const [loading, setLoading] = useState(false);
const [showAvatarImage, setShowAvatarImage] = useState(true);
const FormSchema = Yup.object().shape({
userInputText: Yup.string()
......@@ -57,6 +69,8 @@ const TextTranslate = () => {
enableReinitialize: true,
onSubmit: async (values, { setSubmitting, resetForm }) => {
try {
setLoading(true);
// API Call Here
const response = await axios.post("http://127.0.0.1:8000/rest_pyton/get_user_input_text", {
userInputText: values.userInputText,
......@@ -66,6 +80,7 @@ const TextTranslate = () => {
if (response.status === 200) {
console.log("Success:", response.data);
setShowUnityWebGL(true)
setShowAvatarImage(false);
} else {
console.error("Request failed with status code:", response.status);
}
......@@ -74,10 +89,29 @@ const TextTranslate = () => {
setSubmitting(false);
} catch (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;
return (
......@@ -86,52 +120,130 @@ const TextTranslate = () => {
<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>
<Button
sx={{
bgcolor: '#E5E4E2',
width: '98%',
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
fullWidth
id="userInputText"
placeholder="Enter Text Name"
{...getFieldProps('userInputText')}
error={Boolean(touched.userInputText && errors.userInputText)}
helperText={touched.userInputText && errors.userInputText}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<CopyOutlined />
</InputAdornment>
)
}}
/>
</CardContent>
{/* Translate Button Here */}
<Box display="flex" justifyContent="flex-end" padding={2}>
{/* <!-- Cancel button --> */}
<Button color="error" onClick={() => { setShowUnityWebGL(false) }}>
Cancel
</Button>
{/* <!-- Translate button --> */}
<Button
type="submit"
style={{
marginLeft: '10px'
}}
variant="contained" disabled={isSubmitting}
startIcon={<TranslationOutlined />}
>
TRANSLATE
</Button>
</Box>
</Card>
</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...</>}
{/* 3d avatar generate from here */}
<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/"
width='90%'
height="700px" // Adjust the height as needed
title="Unity WebGL"
style={{ border: 'none', overflow: 'hidden' }}
></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>
</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 {
import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX';
import { CloudUploadOutlined, CopyOutlined, TranslationOutlined } from '@ant-design/icons';
// import { CloudUploadOutlined, CopyOutlined, HighlightOutlined, TranslationOutlined } from '@ant-design/icons';
import { CloudUploadOutlined, CopyOutlined, TranslationOutlined, PlayCircleFilled, CloseCircleFilled } from '@ant-design/icons';
import axios from 'axios';
import { MuiFileInput } from 'mui-file-input';
import { useSnackbar } from 'notistack';
import React, { useState } from 'react';
// import Unity, { UnityContext } from "react-unity-webgl";
// ---------- * Unity Application * ------------------------------
// const unityContext = new UnityContext ({
// loaderUrl: "build/myunityapp.loader.js",
// dataUrl: "build/myunityapp.data",
// frameworkUrl: "build/myunityapp.framework.js",
// codeUrl: "build/myunityapp.wasm",
// });
//asset
import AvatarImage from 'assets/images/translate/avatar.png';
// ==============================|| List ||============================== //
......@@ -47,6 +37,7 @@ const VideoTranslate = () => {
const [translatedTextSi, setTranslatedTextSi] = useState('');
const [translatedTextEn, setTranslatedTextEn] = useState('');
const [showUnityWebGL, setShowUnityWebGL] = useState(false);
const [showAvatarImage, setShowAvatarImage] = useState(true);
const handleDropSingleFile = (files: any) => {
if (files) {
......@@ -85,6 +76,9 @@ const VideoTranslate = () => {
setLoading(false)
// Hide the AvatarImage after translation
setShowAvatarImage(false);
} catch (error) {
console.error('Error:', error);
setLoading(false)
......@@ -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 (
<MainCard content={false}>
<ScrollX>
......@@ -144,7 +155,7 @@ const VideoTranslate = () => {
<Card sx={{ minHeight: '100%', marginBottom: '10px', marginLeft: '10px', padding: '35px 10px' }}>
<CardContent>
{/* ! Important */}
<CardHeader title="Select Your File : " sx={{ marginLeft: '-10px' }}/>
<CardHeader title="Select Your File : " sx={{ marginLeft: '-10px' }} />
{/* @ts-ignore */}
<MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'video/*' }} sx={{ width: '100%' }} />
......@@ -250,22 +261,37 @@ const VideoTranslate = () => {
{showUnityWebGL && (
<Box display="flex" justifyContent="center" alignItems="center" minHeight="100%">
<iframe
id="unityWebGL"
src="https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/"
width='90%'
height="700px" // Adjust the height as needed
title="Unity WebGL"
style={{ border: 'none', overflow: 'hidden' }}
></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>
)}
</div>
)}
{showAvatarImage && !loading && (
<Box display="flex" justifyContent="center" alignItems="center" minHeight="50%">
<img src={AvatarImage} style={{ maxWidth: '50%' }} />
</Box>
)}
</Stack>
</Box>
</Card>
</Grid>
</Grid>
</Card>
</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