Skip to content

2
2023-029
Commit 27ec9906 authored by Gamage B.G.J's avatar Gamage B.G.J
Browse files
Options

Merge branch 'IT20251000' into 'master' 

It20251000

See merge request !33
parents ca34fdfb 76b040a1
Hide whitespace changes
Inline Side-by-side
Showing with 677 additions and 475 deletions
Project/Backend/README.md
View file @ 27ec9906
# TMP-23-029
SLIIT Final Year Project
\ No newline at end of file
BackEnd Server
\ No newline at end of file
Project/Backend/Server_Node/server.js
View file @ 27ec9906
......@@ -26,6 +26,7 @@ const app = express();
const corsOptions = {
origin: 'http://localhost:3000',
origin: 'http://localhost:3001',
origin: '*',
};
app.use(bodyParser.json({ limit: "30mb", extended: true }));
......
Project/Backend/Server_Python/controllers/text_to_sign_language_controller.py 0 → 100644
View file @ 27ec9906
from datetime import datetime
import requests
from fastapi import APIRouter, FastAPI, HTTPException, Query, Request
from fastapi.responses import JSONResponse
from pymongo.mongo_client import MongoClient
# Replace with your MongoDB Atlas credentials
username = "admin"
password = "JppbU6MZeHfOj7sp"
uri = f"mongodb+srv://{username}:{password}@researchmanagement-appl.vzhn4.mongodb.net/?retryWrites=true&w=majority"
client = MongoClient(uri)
db = client["test"]
items_collection = db["translated_items"]
items_collection_log = db["translated_items_log"]
router = APIRouter()
# Your unicode_to_int_mapping dictionary
unicode_to_int_mapping = {
"මම": 1,
"හෙට": 2,
"යනවා": 3,
"මං": 4,
"ගුඩ්": 5,
"මෝනිං": 6,
"උඹ": 7,
"ආවේ": 8,
"ඇයි": 9,
}
@router.post("/rest_pyton/get_user_input_text")
async def get_user_input_text(request_data: dict):
user_input_text = request_data.get("userInputText")
if user_input_text is None:
raise HTTPException(status_code=400, detail="Invalid JSON data. Missing 'userInputText' field.")
result = convert_text_to_numbers(user_input_text)
# Send translated integer to MongoDB
send_to_mongodb(result)
# Perform any processing you need on the number_array
response = {"message": f"Received user input text: {user_input_text}", "translated_integers_string": result}
return response
def send_to_mongodb(translated_integer_si):
translated_item_data = {
"translated_integer_si": translated_integer_si,
"timestamp": datetime.utcnow(),
}
# Save the previous record to the log before updating
existing_record = items_collection.find_one()
if existing_record:
items_collection_log = db["translated_items_log"]
# Exclude the _id field to allow MongoDB to generate a new one
existing_record.pop("_id", None)
items_collection_log.insert_one(existing_record)
# Update the existing record or create a new one
result = items_collection.replace_one({}, translated_item_data, upsert=True)
if result.matched_count == 0 and result.modified_count == 0:
raise HTTPException(
status_code=500, detail="Failed to update or create translated item"
)
def convert_text_to_numbers(user_input_text):
words = user_input_text.split()
numbers = [unicode_to_int_mapping.get(word, -1) for word in words] # -1 if word not found
number_string = ' '.join([str(num) for num in numbers if num != -1])
return number_string
\ No newline at end of file
Project/Backend/Server_Python/controllers/video_to_sign_language_controller.py
View file @ 27ec9906
......@@ -68,7 +68,7 @@ async def uploaded_video(file: UploadFile = File(...)):
str(unicode_to_int_mapping.get(word, "0"))
for word in translated_text_si.split()
)
print("Translated Integer (Si):", translated_integer_si)
print("Translated Integer (Si) from Video:", translated_integer_si)
# Send translated integer to MongoDB
send_to_mongodb(translated_integer_si)
......@@ -146,6 +146,7 @@ def send_to_mongodb(translated_integer_si):
existing_record = items_collection.find_one()
if existing_record:
items_collection_log = db["translated_items_log"]
# Exclude the _id field to allow MongoDB to generate a new one
existing_record.pop("_id", None)
items_collection_log.insert_one(existing_record)
......
Project/Backend/Server_Python/main.py
View file @ 27ec9906
......@@ -4,7 +4,8 @@ from controllers import (
users_controller,
video_to_sign_language_controller,
audio_detect_controler,
video_detect_controler
video_detect_controler,
text_to_sign_language_controller
)
from fastapi.responses import RedirectResponse
from fastapi.middleware.cors import CORSMiddleware
......@@ -46,6 +47,7 @@ app.include_router(translate_controler.router)
app.include_router(video_to_sign_language_controller.router)
app.include_router(audio_detect_controler.router)
app.include_router(video_detect_controler.router)
app.include_router(text_to_sign_language_controller.router)
# Add cores middleware
......
Project/Backend/Server_Python/node_modules/.package-lock.json 0 → 100644
View file @ 27ec9906
{
"name": "Server_Python",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}
Project/Backend/Server_Python/package-lock.json 0 → 100644
View file @ 27ec9906
{
"name": "Server_Python",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}
Project/Frontend/SignConnectPlus/src/menu-items/application.tsx
View file @ 27ec9906
......@@ -17,6 +17,7 @@ import {
TranslationOutlined,
UserOutlined,
VideoCameraOutlined,
HighlightOutlined,
} from '@ant-design/icons';
// type
......@@ -37,7 +38,8 @@ const icons = {
FastForwardOutlined,
RedditOutlined,
AudioOutlined,
VideoCameraOutlined
VideoCameraOutlined,
HighlightOutlined
};
// ==============================|| MENU ITEMS - SUPPORT ||============================== //
......@@ -93,6 +95,14 @@ const application: NavItemType = {
title: <FormattedMessage id="video-translate" />,
type: 'item',
url: '/video-to-sign-language/VideoTranslate',
// icon: icons.VideoCameraOutlined,
},
{
id: 'text-translate',
title: <FormattedMessage id="text-translate" />,
type: 'item',
url: '/video-to-sign-language/text-translation',
// icon: icons.HighlightOutlined,
}
]
},
......
Project/Frontend/SignConnectPlus/src/pages/video-to-sign-language/TextTranslate/TextTranslate.tsx 0 → 100644
View file @ 27ec9906
// 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 @ 27ec9906
......@@ -2,11 +2,9 @@
import {
Box,
Button,
ButtonGroup,
Card,
CardContent,
CardHeader,
Container,
Grid,
IconButton,
InputAdornment,
......@@ -20,7 +18,8 @@ import {
import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX';
import { CloudUploadOutlined, CopyOutlined, HighlightOutlined, TranslationOutlined } from '@ant-design/icons';
import { CloudUploadOutlined, CopyOutlined, TranslationOutlined } from '@ant-design/icons';
// import { CloudUploadOutlined, CopyOutlined, HighlightOutlined, TranslationOutlined } from '@ant-design/icons';
import axios from 'axios';
import { MuiFileInput } from 'mui-file-input';
import { useSnackbar } from 'notistack';
......@@ -65,42 +64,6 @@ const VideoTranslate = () => {
setValue(event.target.value);
};
// ----------------- Video Upload ------------------------------------------------
// const TranslateVideoToSignLanguage = async () => {
// if (file) {
// setLoading(true);
// const formData = new FormData();
// //@ts-ignore
// formData.append('video', file, file.name);
// try {
// const response = await VideoToSignLanguageService.videoTranslation(formData);
// const { translated_text_si, translated_text_en } = response.data;
// setTranslatedTextSi(translated_text_si);
// setTranslatedTextEn(translated_text_en);
// if (response.status == 200) {
// console.log(response.data);
// // setValue(response.data.predictions);
// } else {
// enqueueSnackbar('Something went Wrong!', { variant: 'error' });
// }
// // setLoading(false);
// } catch (error) {
// console.log(error);
// setLoading(false);
// enqueueSnackbar('Something went Wrong!', { variant: 'error' });
// }
// } else {
// enqueueSnackbar('Please select a file.', { variant: 'warning' });
// }
// };
async function uploadVideo() {
setLoading(true)
......@@ -125,12 +88,15 @@ const VideoTranslate = () => {
} catch (error) {
console.error('Error:', error);
setLoading(false)
enqueueSnackbar('Something went Wrong!', { variant: 'error' });
}
} else {
console.error('No file selected.');
setLoading(false)
enqueueSnackbar('Please select a file.', { variant: 'warning' });
}
}
const { enqueueSnackbar } = useSnackbar();
const onCopy = (text: string) => {
......@@ -143,258 +109,166 @@ const VideoTranslate = () => {
return (
<MainCard content={false}>
<ScrollX>
{/* Content Here */}
<Container
<Button
sx={{
padding: 3,
bgcolor: '#625D5D',
color: '#fafafb',
borderRadius: 6,
// boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)' // Subtle box shadow
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={<CloudUploadOutlined />}
// disabled // Disable the button
>
{/* Double Button Here */}
<ButtonGroup
disableElevation
variant="contained"
aria-label="Customized buttons"
sx={{
marginBottom: '20px',
backgroundColor: '#ff3c3c', // Change background color
'& .MuiButton-root': { // Apply styles to individual buttons
color: 'white', // Text color
'&:hover': {
backgroundColor: '#000000' // Change color on hover
}
}
}}
>
<Button
sx={{
bgcolor: '#ff3c3c',
padding: '10px 50px',
fontSize: '1.05rem', // Larger font size
'& .anticon': {
fontSize: '1.2rem', // Larger icon size
},
}}
// variant={checkTranalationTypeForUpload()}
startIcon={<CloudUploadOutlined />}
// onClick={() => {
// setIsUploadFile(true);
// }}
>
Upload
</Button>
<Button
sx={{
bgcolor: '#ff3c3c',
padding: '10px 50px',
fontSize: '1.05rem', // Larger font size
'& .anticon': {
fontSize: '1.2rem', // Larger icon size
},
}}
// variant={checkTranalationTypeForRecord()}
startIcon={<HighlightOutlined />}
// onClick={() => {
// setIsUploadFile(false);
// }}
>
Text
</Button>
</ButtonGroup>
{/* Video uploading */}
<Box sx={{ flexGrow: 1 }}>
<Card>
<CardHeader title="Upload a video | Drag & Drop or Select File" />
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Card sx={{ marginBottom: '20px', marginLeft: '10px', padding: '35px 10px' }}>
<CardContent>
{/* ! Important */}
{/* @ts-ignore */}
<MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'video/*' }} />
<Paper style={{ padding: '20px', marginTop: '15px' }}>
<Typography variant="h5" align="center" gutterBottom>
Preview
Upload and Translate Video
</Button>
{/* Video uploading */}
<Box sx={{ flexGrow: 1 }}>
<Card>
{/* uploade video from here */}
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Card sx={{ minHeight: '100%', marginBottom: '10px', marginLeft: '10px', padding: '35px 10px' }}>
<CardContent>
{/* ! Important */}
<CardHeader title="Select Your File : " sx={{ marginLeft: '-10px' }}/>
{/* @ts-ignore */}
<MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'video/*' }} sx={{ width: '100%' }} />
<Paper style={{ padding: '20px', marginTop: '15px' }}>
<Typography variant="h5" align="center" gutterBottom>
Preview
</Typography>
<div style={{ marginTop: '20px', textAlign: 'center' }}>
{file ? <video src={videoUrl} width="400" controls /> : <p>No Video Selected ...</p>}
</div>
</Paper>
</CardContent>
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 5 }}>
<Button
variant="contained"
style={{
width: '180px',
height: '50px',
fontSize: '20px',
}}
sx={{
mb: 3
}}
disabled={loading}
onClick={uploadVideo}
endIcon={<TranslationOutlined />}
>
Translate
</Button>
</div>
<div>
{translatedTextEn || translatedTextSi ? (
<div>
<Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
Sinhala Unicode
</Typography>
<div style={{ marginTop: '20px', textAlign: 'center' }}>
{file ? <video src={videoUrl} width="400" controls /> : <p>No Video Selected ...</p>}
</div>
</Paper>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card sx={{ p: 7, minHeight: 300, marginBottom: '10px', marginRight: '10px' }}>
<Box display="grid" gap={5}>
<Stack spacing={2}>
<Grid container spacing={1}>
{/* <Grid item xs={12} md={6}> */}
{/* <h3>Set Sign Speed </h3> */}
{/* <Slider
defaultValue={30}
getAriaValueText={valuetext}
valueLabelDisplay="auto"
step={10}
marks
min={10}
max={110}
/> */}
{/* <h4>Speed - {speed}</h4> */}
{/* </Grid> */}
<Grid item xs={12} md={6} container direction="row" justifyContent="flex-start" alignItems="center">
<Button
variant="contained"
style={{ width: '200px', height: '60px', fontSize: '20px' }}
sx={{
mb: 3
}}
disabled={loading}
onClick={uploadVideo}
endIcon={<TranslationOutlined />}
>
Translate
</Button>
{/* ... other JSX ... */}
{/* Conditionally render the Unity WebGL build */}
{showUnityWebGL && (
<TextField
sx={{
marginBottom: 2
}}
fullWidth
value={translatedTextSi}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => onCopy(value)}>
<CopyOutlined />
</IconButton>
</InputAdornment>
)
}}
/>
<Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
English Unicode
</Typography>
<TextField
fullWidth
value={translatedTextEn}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => onCopy(value)}>
<CopyOutlined />
</IconButton>
</InputAdornment>
)
}}
/>
</div>
) : null}
</div>
</Card>
</Grid>
{/* 3d avatar generate from here */}
<Grid item xs={12} md={6}>
{/* <Card sx={{ p: 7, minHeight: '50%', marginBottom: '10px', marginRight: '10px' }}> */}
<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
// src="https://64f66d39fdef493229b2ddd9--lambent-unicorn-97396a.netlify.app/"
src="https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/"
width="700px"
width='90%'
height="700px" // Adjust the height as needed
title="Unity WebGL"
style={{ border: 'none', overflow: 'hidden' }}
></iframe>
)}
{/* ... other JSX ... */}
{/* -------- Translated Sinhala Unicode ------------------------- */}
<Typography variant="overline" sx={{ color: 'text.secondary', fontStyle: 'italic', marginBottom: 2 }}>
Sinhala Unicode
</Typography>
<TextField
sx={{
marginBottom: 2
}}
fullWidth
value={translatedTextSi}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => onCopy(value)}>
<CopyOutlined />
</IconButton>
</InputAdornment>
)
}}
/>
{/* -------- Translated English Unicode ------------------------- */}
<Typography variant="overline" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>
English Unicode
</Typography>
<TextField
fullWidth
value={translatedTextEn}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => onCopy(value)}>
<CopyOutlined />
</IconButton>
</InputAdornment>
)
}}
/>
{/* ----------------------------- */}
</Grid>
</Grid>
{loading ? (
<Card>
<CardContent>
<LinearProgress />
<center>
<Typography variant="h5" component="div" sx={{ marginTop: 2 }}>
Loading...
</Typography>
</center>
</CardContent>
</Card>
) : (
<div>
{/* -------- Translated Sinhala Unicode ------------------------- */}
{/* <Typography variant="overline" sx={{ color: 'text.secondary', fontStyle: 'italic', marginBottom: 2 }}>
Sinhala Unicode
</Typography>
<TextField
sx={{
marginBottom: 2
}}
fullWidth
value={translatedTextSi}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => onCopy(value)}>
<CopyOutlined />
</IconButton>
</InputAdornment>
)
}}
/> */}
{/* -------- Translated English Unicode ------------------------- */}
{/* <Typography variant="overline" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>
English Unicode
</Typography>
<TextField
fullWidth
value={translatedTextEn}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => onCopy(value)}>
<CopyOutlined />
</IconButton>
</InputAdornment>
)
}}
/> */}
</div>
)}
</Stack>
</Box>
</Card>
</Grid>
</Box>
)}
</div>
)}
</Stack>
</Box>
</Card>
</Grid>
</Card>
</Box>
</Container>
</Grid>
</Card>
</Box>
</ScrollX>
</MainCard>
);
......
Project/Frontend/SignConnectPlus/src/pages/video-to-sign-language/VideoTranslate/VideoTranslate.tsx.bkp
View file @ 27ec9906
......@@ -2,11 +2,9 @@
import {
Box,
Button,
ButtonGroup,
Card,
CardContent,
CardHeader,
Container,
// CardHeader,
Grid,
IconButton,
InputAdornment,
......@@ -20,11 +18,24 @@ import {
import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX';
import { CloudUploadOutlined, CopyOutlined, HighlightOutlined, TranslationOutlined } from '@ant-design/icons';
import { CloudUploadOutlined, CopyOutlined, TranslationOutlined } from '@ant-design/icons';
// import { CloudUploadOutlined, CopyOutlined, HighlightOutlined, TranslationOutlined } from '@ant-design/icons';
import axios from 'axios';
import { MuiFileInput } from 'mui-file-input';
import { useSnackbar } from 'notistack';
import { useState } from 'react';
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",
// });
// ==============================|| List ||============================== //
......@@ -35,6 +46,7 @@ const VideoTranslate = () => {
const [value, setValue] = useState('');
const [translatedTextSi, setTranslatedTextSi] = useState('');
const [translatedTextEn, setTranslatedTextEn] = useState('');
const [showUnityWebGL, setShowUnityWebGL] = useState(false);
const handleDropSingleFile = (files: any) => {
if (files) {
......@@ -52,42 +64,6 @@ const VideoTranslate = () => {
setValue(event.target.value);
};
// ----------------- Video Upload ------------------------------------------------
// const TranslateVideoToSignLanguage = async () => {
// if (file) {
// setLoading(true);
// const formData = new FormData();
// //@ts-ignore
// formData.append('video', file, file.name);
// try {
// const response = await VideoToSignLanguageService.videoTranslation(formData);
// const { translated_text_si, translated_text_en } = response.data;
// setTranslatedTextSi(translated_text_si);
// setTranslatedTextEn(translated_text_en);
// if (response.status == 200) {
// console.log(response.data);
// // setValue(response.data.predictions);
// } else {
// enqueueSnackbar('Something went Wrong!', { variant: 'error' });
// }
// // setLoading(false);
// } catch (error) {
// console.log(error);
// setLoading(false);
// enqueueSnackbar('Something went Wrong!', { variant: 'error' });
// }
// } else {
// enqueueSnackbar('Please select a file.', { variant: 'warning' });
// }
// };
async function uploadVideo() {
setLoading(true)
......@@ -100,20 +76,27 @@ const VideoTranslate = () => {
headers: {
'Content-Type': 'multipart/form-data',
},
});
});
setTranslatedTextEn(response.data.translated_text_en)
setTranslatedTextSi(response.data.translated_text_si)
// Show the Unity WebGL build
setShowUnityWebGL(true);
setLoading(false)
} catch (error) {
console.error('Error:', error);
setLoading(false)
enqueueSnackbar('Something went Wrong!', { variant: 'error' });
}
} else {
console.error('No file selected.');
setLoading(false)
enqueueSnackbar('Please select a file.', { variant: 'warning' });
}
}
const { enqueueSnackbar } = useSnackbar();
const onCopy = (text: string) => {
......@@ -126,36 +109,8 @@ const VideoTranslate = () => {
return (
<MainCard content={false}>
<ScrollX>
{/* Content Here */}
<Container
sx={{
padding: 3,
bgcolor: '#625D5D',
color: '#fafafb',
borderRadius: 6,
// boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)' // Subtle box shadow
}}
>
{/* Double Button Here */}
<ButtonGroup
disableElevation
variant="contained"
aria-label="Customized buttons"
sx={{
marginBottom: '20px',
backgroundColor: '#ff3c3c', // Change background color
'& .MuiButton-root': { // Apply styles to individual buttons
color: 'white', // Text color
'&:hover': {
backgroundColor: '#000000' // Change color on hover
}
}
}}
>
<Button
{/* <Button
sx={{
bgcolor: '#ff3c3c',
padding: '10px 50px',
......@@ -164,120 +119,238 @@ const VideoTranslate = () => {
fontSize: '1.2rem', // Larger icon size
},
}}
// variant={checkTranalationTypeForUpload()}
startIcon={<CloudUploadOutlined />}
// onClick={() => {
// setIsUploadFile(true);
// }}
>
Upload
</Button>
</Button> */}
<Button
sx={{
bgcolor: '#ff3c3c',
padding: '10px 50px',
fontSize: '1.05rem', // Larger font size
'& .anticon': {
fontSize: '1.2rem', // Larger icon size
},
}}
// variant={checkTranalationTypeForRecord()}
startIcon={<HighlightOutlined />}
// onClick={() => {
// setIsUploadFile(false);
// }}
>
Text
</Button>
</ButtonGroup>
{/* Video uploading */}
<Box sx={{ flexGrow: 1 }}>
<Card>
<CardHeader title="Upload a video | Drag & Drop or Select File" />
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Card sx={{ marginBottom: '20px', marginLeft: '10px', padding: '35px 10px' }}>
<CardContent>
{/* ! Important */}
{/* @ts-ignore */}
<MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'video/*' }} />
<Paper style={{ padding: '20px', marginTop: '15px' }}>
<Typography variant="h5" align="center" gutterBottom>
Preview
<Button
sx={{
bgcolor: '#E5E4E2',
padding: '10px 520px',
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={<CloudUploadOutlined />}
// disabled // Disable the button
>
Upload a video | Drag & Drop or Select File
</Button>
{/* Video uploading */}
<Box sx={{ flexGrow: 1 }}>
<Card>
{/* <CardHeader title="Upload a video | Drag & Drop or Select File" /> */}
{/* uploade video from here */}
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Card sx={{ minHeight: '70%', marginBottom: '10px', marginLeft: '10px', padding: '35px 10px' }}>
<CardContent>
{/* ! Important */}
{/* @ts-ignore */}
<MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'video/*' }} sx={{ width: '100%' }} />
<Paper style={{ padding: '20px', marginTop: '15px' }}>
<Typography variant="h5" align="center" gutterBottom>
Preview
</Typography>
<div style={{ marginTop: '20px', textAlign: 'center' }}>
{file ? <video src={videoUrl} width="400" controls /> : <p>No Video Selected ...</p>}
</div>
</Paper>
</CardContent>
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 5 }}>
<Button
variant="contained"
style={{
width: '180px',
height: '50px',
fontSize: '20px',
}}
sx={{
mb: 3
}}
disabled={loading}
onClick={uploadVideo}
endIcon={<TranslationOutlined />}
>
Translate
</Button>
</div>
{loading ? (
<Card>
<CardContent>
<LinearProgress />
<center>
<Typography variant="h5" component="div" sx={{ marginTop: 2 }}>
Loading...
</Typography>
</center>
</CardContent>
</Card>
) : (
translatedTextEn || translatedTextSi ? (
<div>
<Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
Sinhala Unicode
</Typography>
<div style={{ marginTop: '20px', textAlign: 'center' }}>
{file ? <video src={videoUrl} width="400" controls /> : <p>No Video Selected ...</p>}
</div>
</Paper>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card sx={{ p: 5, minHeight: 300, marginBottom: '10px', marginRight: '10px' }}>
<Box display="grid" gap={5}>
<Stack spacing={2}>
<Grid container spacing={1}>
{/* <Grid item xs={12} md={6}> */}
{/* <h3>Set Sign Speed </h3> */}
{/* <Slider
defaultValue={30}
getAriaValueText={valuetext}
valueLabelDisplay="auto"
step={10}
marks
min={10}
max={110}
/> */}
{/* <h4>Speed - {speed}</h4> */}
{/* </Grid> */}
<Grid item xs={12} md={6} container direction="row" justifyContent="flex-start" alignItems="center">
<Button
variant="contained"
style={{ width: '200px', height: '60px', fontSize: '20px' }}
sx={{
mb: 3
}}
disabled={loading}
onClick={uploadVideo}
endIcon={<TranslationOutlined />}
>
Translate
</Button>
</Grid>
</Grid>
{loading ? (
<Card>
<CardContent>
<LinearProgress />
<center>
<Typography variant="h5" component="div" sx={{ marginTop: 2 }}>
Loading...
</Typography>
</center>
</CardContent>
</Card>
) : (
<div>
{/* -------- Translated Avatar ------------------------- */}
<Typography variant="overline" sx={{ color: 'text.secondary', marginBottom: 2 }}>
Translated Avatar
</Typography>
<TextField
sx={{
marginBottom: 2
}}
fullWidth
value={translatedTextSi}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => onCopy(value)}>
<CopyOutlined />
</IconButton>
</InputAdornment>
)
}}
/>
<Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
English Unicode
</Typography>
<TextField
fullWidth
value={translatedTextEn}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => onCopy(value)}>
<CopyOutlined />
</IconButton>
</InputAdornment>
)
}}
/>
</div>
) : null
)}
</Card>
</Grid>
<Paper elevation={3} sx={{ p: 2, maxWidth: 600, margin: '0 auto', marginBottom: 3 }}>
<video controls width="100%" height="auto">
{/* <source src="your-video-url.mp4" type="video/mp4" /> */}
Your browser does not support the video tag.
</video>
</Paper>
{/* -------- Translated Sinhala Unicode ------------------------- */}
<Typography variant="overline" sx={{ color: 'text.secondary', fontStyle: 'italic', marginBottom: 2 }}>
{/* 3d avatar generate from here */}
<Grid item xs={12} md={6}>
{/* <Card sx={{ p: 7, minHeight: '50%', marginBottom: '10px', marginRight: '10px' }}> */}
<Card sx={{ minHeight: '50%', marginBottom: '10px', marginLeft: '10px', padding: '35px 10px' }}>
<Box display="grid" gap={5}>
<Stack spacing={2}>
<Grid container spacing={1}>
<Grid item xs={12} md={6} container direction="row" justifyContent="flex-start" alignItems="center">
{/* <Button
variant="contained"
style={{ width: '200px', height: '60px', fontSize: '20px' }}
sx={{
mb: 3
}}
disabled={loading}
onClick={uploadVideo}
endIcon={<TranslationOutlined />}
>
Translate
</Button> */}
{/* ... other JSX ... */}
{/* Conditionally render the Unity WebGL build */}
{showUnityWebGL && (
<iframe
// src="https://64f66d39fdef493229b2ddd9--lambent-unicorn-97396a.netlify.app/"
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>
)}
{/* ... other JSX ... */}
{/* -------- Translated Sinhala Unicode ------------------------- */}
{/* <Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
Sinhala Unicode
</Typography>
<TextField
sx={{
marginBottom: 2
}}
fullWidth
value={translatedTextSi}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => onCopy(value)}>
<CopyOutlined />
</IconButton>
</InputAdornment>
)
}}
/> */}
{/* -------- Translated English Unicode ------------------------- */}
{/* <Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
English Unicode
</Typography>
<TextField
fullWidth
value={translatedTextEn}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => onCopy(value)}>
<CopyOutlined />
</IconButton>
</InputAdornment>
)
}}
/> */}
{/* ----------------------------- */}
</Grid>
</Grid>
{loading ? (
<Card>
<CardContent>
<LinearProgress />
<center>
<Typography variant="h5" component="div" sx={{ marginTop: 2 }}>
Loading...
</Typography>
</center>
</CardContent>
</Card>
) : (
<div>
{/* -------- Translated Sinhala Unicode ------------------------- */}
{/* <Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
Sinhala Unicode
</Typography>
......@@ -297,10 +370,10 @@ const VideoTranslate = () => {
</InputAdornment>
)
}}
/>
/> */}
{/* -------- Translated English Unicode ------------------------- */}
<Typography variant="overline" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>
{/* -------- Translated English Unicode ------------------------- */}
{/* <Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
English Unicode
</Typography>
......@@ -317,17 +390,16 @@ const VideoTranslate = () => {
</InputAdornment>
)
}}
/>
</div>
)}
</Stack>
</Box>
</Card>
</Grid>
/> */}
</div>
)}
</Stack>
</Box>
</Card>
</Grid>
</Card>
</Box>
</Container>
</Grid>
</Card>
</Box>
</ScrollX>
</MainCard>
);
......
Project/Frontend/SignConnectPlus/src/routes/MainRoutes.tsx
View file @ 27ec9906
......@@ -49,6 +49,8 @@ const TutorialManagementList = Loadable(lazy(() => import('pages/parameter/tutor
// render - Video to Sign Language page
const VideoTranslation = Loadable(lazy(() => import('pages/video-to-sign-language/VideoTranslate/VideoTranslate')));
// render - Text to Sign Language page
const TextTranslation = Loadable(lazy(() => import('pages/video-to-sign-language/TextTranslate/TextTranslate')));
// render - audio-detection page
const AudioDetection = Loadable(lazy(() => import('pages/emotion-detection/emotion-audio-detection/list/list')));
......@@ -128,9 +130,14 @@ const MainRoutes = {
{
path: 'VideoTranslate',
element: <VideoTranslation />
},
{
path: 'text-translation',
element: <TextTranslation />
}
]
},
{
path: 'learning-management',
children: [
......
Project/Frontend/SignConnectPlus/src/utils/locales/en.json
View file @ 27ec9906
......@@ -168,5 +168,6 @@
"learning-dashboard": "Dashboard",
"learning-curriculums-subscribed-tutorial": "Tutorial",
"video-to-sign-language": "Sign Language Translate",
"video-translate": "Video Translator"
"video-translate": "Video Translation",
"text-translate": "Text Translation"
}
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