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
Expand all 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.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