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
Show whitespace changes
Inline Side-by-side
Showing with 677 additions and 475 deletions
Project/Backend/README.md
View file @ 27ec9906
# TMP-23-029 # TMP-23-029
SLIIT Final Year Project BackEnd Server
\ No newline at end of file \ No newline at end of file
Project/Backend/Server_Node/server.js
View file @ 27ec9906
...@@ -26,6 +26,7 @@ const app = express(); ...@@ -26,6 +26,7 @@ const app = express();
const corsOptions = { const corsOptions = {
origin: 'http://localhost:3000', origin: 'http://localhost:3000',
origin: 'http://localhost:3001', origin: 'http://localhost:3001',
origin: '*',
}; };
app.use(bodyParser.json({ limit: "30mb", extended: true })); 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(...)): ...@@ -68,7 +68,7 @@ async def uploaded_video(file: UploadFile = File(...)):
str(unicode_to_int_mapping.get(word, "0")) str(unicode_to_int_mapping.get(word, "0"))
for word in translated_text_si.split() 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 translated integer to MongoDB
send_to_mongodb(translated_integer_si) send_to_mongodb(translated_integer_si)
...@@ -146,6 +146,7 @@ def send_to_mongodb(translated_integer_si): ...@@ -146,6 +146,7 @@ def send_to_mongodb(translated_integer_si):
existing_record = items_collection.find_one() existing_record = items_collection.find_one()
if existing_record: if existing_record:
items_collection_log = db["translated_items_log"] items_collection_log = db["translated_items_log"]
# Exclude the _id field to allow MongoDB to generate a new one # Exclude the _id field to allow MongoDB to generate a new one
existing_record.pop("_id", None) existing_record.pop("_id", None)
items_collection_log.insert_one(existing_record) items_collection_log.insert_one(existing_record)
......
Project/Backend/Server_Python/main.py
View file @ 27ec9906
...@@ -4,7 +4,8 @@ from controllers import ( ...@@ -4,7 +4,8 @@ from controllers import (
users_controller, users_controller,
video_to_sign_language_controller, video_to_sign_language_controller,
audio_detect_controler, audio_detect_controler,
video_detect_controler video_detect_controler,
text_to_sign_language_controller
) )
from fastapi.responses import RedirectResponse from fastapi.responses import RedirectResponse
from fastapi.middleware.cors import CORSMiddleware from fastapi.middleware.cors import CORSMiddleware
...@@ -46,6 +47,7 @@ app.include_router(translate_controler.router) ...@@ -46,6 +47,7 @@ app.include_router(translate_controler.router)
app.include_router(video_to_sign_language_controller.router) app.include_router(video_to_sign_language_controller.router)
app.include_router(audio_detect_controler.router) app.include_router(audio_detect_controler.router)
app.include_router(video_detect_controler.router) app.include_router(video_detect_controler.router)
app.include_router(text_to_sign_language_controller.router)
# Add cores middleware # 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 { ...@@ -17,6 +17,7 @@ import {
TranslationOutlined, TranslationOutlined,
UserOutlined, UserOutlined,
VideoCameraOutlined, VideoCameraOutlined,
HighlightOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
// type // type
...@@ -37,7 +38,8 @@ const icons = { ...@@ -37,7 +38,8 @@ const icons = {
FastForwardOutlined, FastForwardOutlined,
RedditOutlined, RedditOutlined,
AudioOutlined, AudioOutlined,
VideoCameraOutlined VideoCameraOutlined,
HighlightOutlined
}; };
// ==============================|| MENU ITEMS - SUPPORT ||============================== // // ==============================|| MENU ITEMS - SUPPORT ||============================== //
...@@ -93,6 +95,14 @@ const application: NavItemType = { ...@@ -93,6 +95,14 @@ const application: NavItemType = {
title: <FormattedMessage id="video-translate" />, title: <FormattedMessage id="video-translate" />,
type: 'item', type: 'item',
url: '/video-to-sign-language/VideoTranslate', 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 @@ ...@@ -2,11 +2,9 @@
import { import {
Box, Box,
Button, Button,
ButtonGroup,
Card, Card,
CardContent, CardContent,
CardHeader, CardHeader,
Container,
Grid, Grid,
IconButton, IconButton,
InputAdornment, InputAdornment,
...@@ -20,7 +18,8 @@ import { ...@@ -20,7 +18,8 @@ import {
import MainCard from 'components/MainCard'; import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX'; 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 axios from 'axios';
import { MuiFileInput } from 'mui-file-input'; import { MuiFileInput } from 'mui-file-input';
import { useSnackbar } from 'notistack'; import { useSnackbar } from 'notistack';
...@@ -65,42 +64,6 @@ const VideoTranslate = () => { ...@@ -65,42 +64,6 @@ const VideoTranslate = () => {
setValue(event.target.value); 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() { async function uploadVideo() {
setLoading(true) setLoading(true)
...@@ -125,12 +88,15 @@ const VideoTranslate = () => { ...@@ -125,12 +88,15 @@ const VideoTranslate = () => {
} catch (error) { } catch (error) {
console.error('Error:', error); console.error('Error:', error);
setLoading(false) setLoading(false)
enqueueSnackbar('Something went Wrong!', { variant: 'error' });
} }
} else { } else {
console.error('No file selected.'); console.error('No file selected.');
setLoading(false) setLoading(false)
enqueueSnackbar('Please select a file.', { variant: 'warning' });
} }
} }
const { enqueueSnackbar } = useSnackbar(); const { enqueueSnackbar } = useSnackbar();
const onCopy = (text: string) => { const onCopy = (text: string) => {
...@@ -143,84 +109,44 @@ const VideoTranslate = () => { ...@@ -143,84 +109,44 @@ const VideoTranslate = () => {
return ( return (
<MainCard content={false}> <MainCard content={false}>
<ScrollX> <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={{ sx={{
bgcolor: '#ff3c3c', bgcolor: '#E5E4E2',
padding: '10px 50px', width: '98%',
fontSize: '1.05rem', // Larger font size height: '40px',
// padding: '10px 135px',
fontSize: '1.05rem',
'& .anticon': { '& .anticon': {
fontSize: '1.2rem', // Larger icon size 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',
}} }}
// variant={checkTranalationTypeForUpload()}
startIcon={<CloudUploadOutlined />} startIcon={<CloudUploadOutlined />}
// onClick={() => { // disabled // Disable the button
// setIsUploadFile(true);
// }}
> >
Upload Upload and Translate Video
</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 */} {/* Video uploading */}
<Box sx={{ flexGrow: 1 }}> <Box sx={{ flexGrow: 1 }}>
<Card> <Card>
<CardHeader title="Upload a video | Drag & Drop or Select File" />
{/* uploade video from here */}
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Card sx={{ marginBottom: '20px', 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' }}/>
{/* @ts-ignore */} {/* @ts-ignore */}
<MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'video/*' }} /> <MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'video/*' }} sx={{ width: '100%' }} />
<Paper style={{ padding: '20px', marginTop: '15px' }}> <Paper style={{ padding: '20px', marginTop: '15px' }}>
<Typography variant="h5" align="center" gutterBottom> <Typography variant="h5" align="center" gutterBottom>
...@@ -231,31 +157,15 @@ const VideoTranslate = () => { ...@@ -231,31 +157,15 @@ const VideoTranslate = () => {
</div> </div>
</Paper> </Paper>
</CardContent> </CardContent>
</Card>
</Grid> <div style={{ display: 'flex', justifyContent: 'center', marginTop: 5 }}>
<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 <Button
variant="contained" variant="contained"
style={{ width: '200px', height: '60px', fontSize: '20px' }} style={{
width: '180px',
height: '50px',
fontSize: '20px',
}}
sx={{ sx={{
mb: 3 mb: 3
}} }}
...@@ -265,28 +175,14 @@ const VideoTranslate = () => { ...@@ -265,28 +175,14 @@ const VideoTranslate = () => {
> >
Translate Translate
</Button> </Button>
</div>
{/* ... other JSX ... */} <div>
{translatedTextEn || translatedTextSi ? (
{/* Conditionally render the Unity WebGL build */} <div>
{showUnityWebGL && ( <Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
<iframe
// src="https://64f66d39fdef493229b2ddd9--lambent-unicorn-97396a.netlify.app/"
src="https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/"
width="700px"
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 Sinhala Unicode
</Typography> </Typography>
<TextField <TextField
sx={{ sx={{
marginBottom: 2 marginBottom: 2
...@@ -305,11 +201,9 @@ const VideoTranslate = () => { ...@@ -305,11 +201,9 @@ const VideoTranslate = () => {
}} }}
/> />
{/* -------- Translated English Unicode ------------------------- */} <Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
<Typography variant="overline" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>
English Unicode English Unicode
</Typography> </Typography>
<TextField <TextField
fullWidth fullWidth
value={translatedTextEn} value={translatedTextEn}
...@@ -324,11 +218,20 @@ const VideoTranslate = () => { ...@@ -324,11 +218,20 @@ const VideoTranslate = () => {
) )
}} }}
/> />
</div>
) : null}
</div>
</Card>
</Grid>
{/* ----------------------------- */}
</Grid> {/* 3d avatar generate from here */}
</Grid> <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 ? ( {loading ? (
<Card> <Card>
<CardContent> <CardContent>
...@@ -343,48 +246,20 @@ const VideoTranslate = () => { ...@@ -343,48 +246,20 @@ const VideoTranslate = () => {
) : ( ) : (
<div> <div>
{/* -------- Translated Sinhala Unicode ------------------------- */} {/* Conditionally render the Unity WebGL build */}
{/* <Typography variant="overline" sx={{ color: 'text.secondary', fontStyle: 'italic', marginBottom: 2 }}> {showUnityWebGL && (
Sinhala Unicode <Box display="flex" justifyContent="center" alignItems="center" minHeight="100%">
</Typography> <iframe
src="https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/"
<TextField width='90%'
sx={{ height="700px" // Adjust the height as needed
marginBottom: 2 title="Unity WebGL"
}} style={{ border: 'none', overflow: 'hidden' }}
fullWidth ></iframe>
value={translatedTextSi} </Box>
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> </div>
)} )}
</Stack> </Stack>
...@@ -394,7 +269,6 @@ const VideoTranslate = () => { ...@@ -394,7 +269,6 @@ const VideoTranslate = () => {
</Grid> </Grid>
</Card> </Card>
</Box> </Box>
</Container>
</ScrollX> </ScrollX>
</MainCard> </MainCard>
); );
......
Project/Frontend/SignConnectPlus/src/pages/video-to-sign-language/VideoTranslate/VideoTranslate.tsx.bkp
View file @ 27ec9906
...@@ -2,11 +2,9 @@ ...@@ -2,11 +2,9 @@
import { import {
Box, Box,
Button, Button,
ButtonGroup,
Card, Card,
CardContent, CardContent,
CardHeader, // CardHeader,
Container,
Grid, Grid,
IconButton, IconButton,
InputAdornment, InputAdornment,
...@@ -20,11 +18,24 @@ import { ...@@ -20,11 +18,24 @@ import {
import MainCard from 'components/MainCard'; import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX'; 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 axios from 'axios';
import { MuiFileInput } from 'mui-file-input'; import { MuiFileInput } from 'mui-file-input';
import { useSnackbar } from 'notistack'; 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 ||============================== // // ==============================|| List ||============================== //
...@@ -35,6 +46,7 @@ const VideoTranslate = () => { ...@@ -35,6 +46,7 @@ const VideoTranslate = () => {
const [value, setValue] = useState(''); const [value, setValue] = useState('');
const [translatedTextSi, setTranslatedTextSi] = useState(''); const [translatedTextSi, setTranslatedTextSi] = useState('');
const [translatedTextEn, setTranslatedTextEn] = useState(''); const [translatedTextEn, setTranslatedTextEn] = useState('');
const [showUnityWebGL, setShowUnityWebGL] = useState(false);
const handleDropSingleFile = (files: any) => { const handleDropSingleFile = (files: any) => {
if (files) { if (files) {
...@@ -52,42 +64,6 @@ const VideoTranslate = () => { ...@@ -52,42 +64,6 @@ const VideoTranslate = () => {
setValue(event.target.value); 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() { async function uploadVideo() {
setLoading(true) setLoading(true)
...@@ -103,17 +79,24 @@ const VideoTranslate = () => { ...@@ -103,17 +79,24 @@ const VideoTranslate = () => {
}); });
setTranslatedTextEn(response.data.translated_text_en) setTranslatedTextEn(response.data.translated_text_en)
setTranslatedTextSi(response.data.translated_text_si) setTranslatedTextSi(response.data.translated_text_si)
// Show the Unity WebGL build
setShowUnityWebGL(true);
setLoading(false) setLoading(false)
} catch (error) { } catch (error) {
console.error('Error:', error); console.error('Error:', error);
setLoading(false) setLoading(false)
enqueueSnackbar('Something went Wrong!', { variant: 'error' });
} }
} else { } else {
console.error('No file selected.'); console.error('No file selected.');
setLoading(false) setLoading(false)
enqueueSnackbar('Please select a file.', { variant: 'warning' });
} }
} }
const { enqueueSnackbar } = useSnackbar(); const { enqueueSnackbar } = useSnackbar();
const onCopy = (text: string) => { const onCopy = (text: string) => {
...@@ -126,36 +109,8 @@ const VideoTranslate = () => { ...@@ -126,36 +109,8 @@ const VideoTranslate = () => {
return ( return (
<MainCard content={false}> <MainCard content={false}>
<ScrollX> <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 */} {/* <Button
<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={{ sx={{
bgcolor: '#ff3c3c', bgcolor: '#ff3c3c',
padding: '10px 50px', padding: '10px 50px',
...@@ -164,46 +119,47 @@ const VideoTranslate = () => { ...@@ -164,46 +119,47 @@ const VideoTranslate = () => {
fontSize: '1.2rem', // Larger icon size fontSize: '1.2rem', // Larger icon size
}, },
}} }}
// variant={checkTranalationTypeForUpload()}
startIcon={<CloudUploadOutlined />} startIcon={<CloudUploadOutlined />}
// onClick={() => {
// setIsUploadFile(true);
// }}
> >
Upload Upload
</Button> </Button> */}
<Button <Button
sx={{ sx={{
bgcolor: '#ff3c3c', bgcolor: '#E5E4E2',
padding: '10px 50px', padding: '10px 520px',
fontSize: '1.05rem', // Larger font size fontSize: '1.05rem',
'& .anticon': { '& .anticon': {
fontSize: '1.2rem', // Larger icon size 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',
}} }}
// variant={checkTranalationTypeForRecord()} startIcon={<CloudUploadOutlined />}
startIcon={<HighlightOutlined />} // disabled // Disable the button
// onClick={() => {
// setIsUploadFile(false);
// }}
> >
Text Upload a video | Drag & Drop or Select File
</Button> </Button>
</ButtonGroup>
{/* Video uploading */} {/* Video uploading */}
<Box sx={{ flexGrow: 1 }}> <Box sx={{ flexGrow: 1 }}>
<Card> <Card>
<CardHeader title="Upload a video | Drag & Drop or Select File" /> {/* <CardHeader title="Upload a video | Drag & Drop or Select File" /> */}
{/* uploade video from here */}
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Card sx={{ marginBottom: '20px', marginLeft: '10px', padding: '35px 10px' }}> <Card sx={{ minHeight: '70%', marginBottom: '10px', marginLeft: '10px', padding: '35px 10px' }}>
<CardContent> <CardContent>
{/* ! Important */} {/* ! Important */}
{/* @ts-ignore */} {/* @ts-ignore */}
<MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'video/*' }} /> <MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'video/*' }} sx={{ width: '100%' }} />
<Paper style={{ padding: '20px', marginTop: '15px' }}> <Paper style={{ padding: '20px', marginTop: '15px' }}>
<Typography variant="h5" align="center" gutterBottom> <Typography variant="h5" align="center" gutterBottom>
...@@ -214,29 +170,96 @@ const VideoTranslate = () => { ...@@ -214,29 +170,96 @@ const VideoTranslate = () => {
</div> </div>
</Paper> </Paper>
</CardContent> </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>
<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> </Card>
</Grid> </Grid>
{/* 3d avatar generate from here */}
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Card sx={{ p: 5, minHeight: 300, marginBottom: '10px', marginRight: '10px' }}> {/* <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}> <Box display="grid" gap={5}>
<Stack spacing={2}> <Stack spacing={2}>
<Grid container spacing={1}> <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"> <Grid item xs={12} md={6} container direction="row" justifyContent="flex-start" alignItems="center">
<Button {/* <Button
variant="contained" variant="contained"
style={{ width: '200px', height: '60px', fontSize: '20px' }} style={{ width: '200px', height: '60px', fontSize: '20px' }}
sx={{ sx={{
...@@ -247,7 +270,69 @@ const VideoTranslate = () => { ...@@ -247,7 +270,69 @@ const VideoTranslate = () => {
endIcon={<TranslationOutlined />} endIcon={<TranslationOutlined />}
> >
Translate Translate
</Button> </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>
</Grid> </Grid>
{loading ? ( {loading ? (
...@@ -264,20 +349,8 @@ const VideoTranslate = () => { ...@@ -264,20 +349,8 @@ const VideoTranslate = () => {
) : ( ) : (
<div> <div>
{/* -------- Translated Avatar ------------------------- */}
<Typography variant="overline" sx={{ color: 'text.secondary', marginBottom: 2 }}>
Translated Avatar
</Typography>
<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 ------------------------- */} {/* -------- Translated Sinhala Unicode ------------------------- */}
<Typography variant="overline" sx={{ color: 'text.secondary', fontStyle: 'italic', marginBottom: 2 }}> {/* <Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
Sinhala Unicode Sinhala Unicode
</Typography> </Typography>
...@@ -297,10 +370,10 @@ const VideoTranslate = () => { ...@@ -297,10 +370,10 @@ const VideoTranslate = () => {
</InputAdornment> </InputAdornment>
) )
}} }}
/> /> */}
{/* -------- Translated English Unicode ------------------------- */} {/* -------- Translated English Unicode ------------------------- */}
<Typography variant="overline" sx={{ color: 'text.secondary', fontStyle: 'italic' }}> {/* <Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
English Unicode English Unicode
</Typography> </Typography>
...@@ -317,7 +390,7 @@ const VideoTranslate = () => { ...@@ -317,7 +390,7 @@ const VideoTranslate = () => {
</InputAdornment> </InputAdornment>
) )
}} }}
/> /> */}
</div> </div>
)} )}
</Stack> </Stack>
...@@ -327,7 +400,6 @@ const VideoTranslate = () => { ...@@ -327,7 +400,6 @@ const VideoTranslate = () => {
</Grid> </Grid>
</Card> </Card>
</Box> </Box>
</Container>
</ScrollX> </ScrollX>
</MainCard> </MainCard>
); );
......
Project/Frontend/SignConnectPlus/src/routes/MainRoutes.tsx
View file @ 27ec9906
...@@ -49,6 +49,8 @@ const TutorialManagementList = Loadable(lazy(() => import('pages/parameter/tutor ...@@ -49,6 +49,8 @@ const TutorialManagementList = Loadable(lazy(() => import('pages/parameter/tutor
// render - Video to Sign Language page // render - Video to Sign Language page
const VideoTranslation = Loadable(lazy(() => import('pages/video-to-sign-language/VideoTranslate/VideoTranslate'))); 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 // render - audio-detection page
const AudioDetection = Loadable(lazy(() => import('pages/emotion-detection/emotion-audio-detection/list/list'))); const AudioDetection = Loadable(lazy(() => import('pages/emotion-detection/emotion-audio-detection/list/list')));
...@@ -128,9 +130,14 @@ const MainRoutes = { ...@@ -128,9 +130,14 @@ const MainRoutes = {
{ {
path: 'VideoTranslate', path: 'VideoTranslate',
element: <VideoTranslation /> element: <VideoTranslation />
},
{
path: 'text-translation',
element: <TextTranslation />
} }
] ]
}, },
{ {
path: 'learning-management', path: 'learning-management',
children: [ children: [
......
Project/Frontend/SignConnectPlus/src/utils/locales/en.json
View file @ 27ec9906
...@@ -168,5 +168,6 @@ ...@@ -168,5 +168,6 @@
"learning-dashboard": "Dashboard", "learning-dashboard": "Dashboard",
"learning-curriculums-subscribed-tutorial": "Tutorial", "learning-curriculums-subscribed-tutorial": "Tutorial",
"video-to-sign-language": "Sign Language Translate", "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