Skip to content

2
2023-029
Commit 647e69a9 authored by Janith Gamage's avatar Janith Gamage
Browse files
Options

Merge branch 'master' into feature/marks-calculator-updated-version

parents 14426ce0 27ec9906
Show whitespace changes
Inline Side-by-side
Showing with 681 additions and 481 deletions
Project/Backend/README.md
View file @ 647e69a9
# 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 @ 647e69a9
...@@ -17,12 +17,11 @@ import userProgressRoutes from "./routes/userProgress.routes.js"; ...@@ -17,12 +17,11 @@ import userProgressRoutes from "./routes/userProgress.routes.js";
dotenv.config(); dotenv.config();
const app = express(); const app = express();
// const corsOptions = { const corsOptions = {
// origin: 'http://localhost:3000', origin: 'http://localhost:3000',
// origin: 'http://localhost:3001', origin: 'http://localhost:3001',
// origin: 'http://localhost:3000', origin: '*',
// origin: 'http://172.28.144.1:3000' };
// };
app.use(bodyParser.json({ limit: "30mb", extended: true })); app.use(bodyParser.json({ limit: "30mb", extended: true }));
app.use(bodyParser.urlencoded({ limit: "30mb", extended: true })); app.use(bodyParser.urlencoded({ limit: "30mb", extended: true }));
......
Project/Backend/Server_Python/controllers/text_to_sign_language_controller.py 0 → 100644
View file @ 647e69a9
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 @ 647e69a9
...@@ -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 @ 647e69a9
...@@ -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 @ 647e69a9
{
"name": "Server_Python",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}
Project/Backend/Server_Python/package-lock.json 0 → 100644
View file @ 647e69a9
{
"name": "Server_Python",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}
Project/Frontend/SignConnectPlus/src/menu-items/application.tsx
View file @ 647e69a9
...@@ -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 @ 647e69a9
// 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 @ 647e69a9
...@@ -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 @ 647e69a9
...@@ -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 @ 647e69a9
...@@ -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 @ 647e69a9
...@@ -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