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 # 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,258 +109,166 @@ const VideoTranslate = () => { ...@@ -143,258 +109,166 @@ const VideoTranslate = () => {
return ( return (
<MainCard content={false}> <MainCard content={false}>
<ScrollX> <ScrollX>
{/* Content Here */}
<Container <Button
sx={{ sx={{
padding: 3, bgcolor: '#E5E4E2',
bgcolor: '#625D5D', width: '98%',
color: '#fafafb', height: '40px',
borderRadius: 6, // padding: '10px 135px',
// boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)' // Subtle box shadow 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 and Translate Video
{/* Double Button Here */} </Button>
<ButtonGroup
disableElevation
variant="contained" {/* Video uploading */}
aria-label="Customized buttons" <Box sx={{ flexGrow: 1 }}>
sx={{ <Card>
marginBottom: '20px',
backgroundColor: '#ff3c3c', // Change background color {/* uploade video from here */}
'& .MuiButton-root': { // Apply styles to individual buttons <Grid container spacing={2}>
color: 'white', // Text color <Grid item xs={12} md={6}>
'&:hover': { <Card sx={{ minHeight: '100%', marginBottom: '10px', marginLeft: '10px', padding: '35px 10px' }}>
backgroundColor: '#000000' // Change color on hover <CardContent>
} {/* ! Important */}
} <CardHeader title="Select Your File : " sx={{ marginLeft: '-10px' }}/>
}} {/* @ts-ignore */}
> <MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'video/*' }} sx={{ width: '100%' }} />
<Button <Paper style={{ padding: '20px', marginTop: '15px' }}>
sx={{ <Typography variant="h5" align="center" gutterBottom>
bgcolor: '#ff3c3c', Preview
padding: '10px 50px', </Typography>
fontSize: '1.05rem', // Larger font size <div style={{ marginTop: '20px', textAlign: 'center' }}>
'& .anticon': { {file ? <video src={videoUrl} width="400" controls /> : <p>No Video Selected ...</p>}
fontSize: '1.2rem', // Larger icon size </div>
}, </Paper>
}} </CardContent>
// variant={checkTranalationTypeForUpload()}
startIcon={<CloudUploadOutlined />} <div style={{ display: 'flex', justifyContent: 'center', marginTop: 5 }}>
// onClick={() => { <Button
// setIsUploadFile(true); variant="contained"
// }} style={{
> width: '180px',
Upload height: '50px',
</Button> fontSize: '20px',
}}
<Button sx={{
sx={{ mb: 3
bgcolor: '#ff3c3c', }}
padding: '10px 50px', disabled={loading}
fontSize: '1.05rem', // Larger font size onClick={uploadVideo}
'& .anticon': { endIcon={<TranslationOutlined />}
fontSize: '1.2rem', // Larger icon size >
}, Translate
}} </Button>
// variant={checkTranalationTypeForRecord()} </div>
startIcon={<HighlightOutlined />}
// onClick={() => { <div>
// setIsUploadFile(false); {translatedTextEn || translatedTextSi ? (
// }} <div>
> <Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
Text Sinhala Unicode
</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
</Typography> </Typography>
<div style={{ marginTop: '20px', textAlign: 'center' }}> <TextField
{file ? <video src={videoUrl} width="400" controls /> : <p>No Video Selected ...</p>} sx={{
</div> marginBottom: 2
</Paper> }}
</CardContent> fullWidth
</Card> value={translatedTextSi}
</Grid> onChange={handleChange}
<Grid item xs={12} md={6}> InputProps={{
<Card sx={{ p: 7, minHeight: 300, marginBottom: '10px', marginRight: '10px' }}> endAdornment: (
<Box display="grid" gap={5}> <InputAdornment position="end">
<Stack spacing={2}> <IconButton onClick={() => onCopy(value)}>
<Grid container spacing={1}> <CopyOutlined />
{/* <Grid item xs={12} md={6}> */} </IconButton>
{/* <h3>Set Sign Speed </h3> */} </InputAdornment>
)
{/* <Slider }}
defaultValue={30} />
getAriaValueText={valuetext}
valueLabelDisplay="auto" <Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
step={10} English Unicode
marks </Typography>
min={10} <TextField
max={110} fullWidth
/> */} value={translatedTextEn}
{/* <h4>Speed - {speed}</h4> */} onChange={handleChange}
{/* </Grid> */} InputProps={{
<Grid item xs={12} md={6} container direction="row" justifyContent="flex-start" alignItems="center"> endAdornment: (
<Button <InputAdornment position="end">
variant="contained" <IconButton onClick={() => onCopy(value)}>
style={{ width: '200px', height: '60px', fontSize: '20px' }} <CopyOutlined />
sx={{ </IconButton>
mb: 3 </InputAdornment>
}} )
disabled={loading} }}
onClick={uploadVideo} />
endIcon={<TranslationOutlined />} </div>
> ) : null}
Translate </div>
</Button> </Card>
</Grid>
{/* ... other JSX ... */}
{/* Conditionally render the Unity WebGL build */} {/* 3d avatar generate from here */}
{showUnityWebGL && ( <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 <iframe
// src="https://64f66d39fdef493229b2ddd9--lambent-unicorn-97396a.netlify.app/"
src="https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/" src="https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/"
width="700px" width='90%'
height="700px" // Adjust the height as needed height="700px" // Adjust the height as needed
title="Unity WebGL" title="Unity WebGL"
style={{ border: 'none', overflow: 'hidden' }} style={{ border: 'none', overflow: 'hidden' }}
></iframe> ></iframe>
)} </Box>
)}
{/* ... other JSX ... */}
{/* -------- Translated Sinhala Unicode ------------------------- */} </div>
<Typography variant="overline" sx={{ color: 'text.secondary', fontStyle: 'italic', marginBottom: 2 }}> )}
Sinhala Unicode </Stack>
</Typography> </Box>
</Card>
<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>
</Grid> </Grid>
</Card> </Grid>
</Box> </Card>
</Container> </Box>
</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)
...@@ -100,20 +76,27 @@ const VideoTranslate = () => { ...@@ -100,20 +76,27 @@ const VideoTranslate = () => {
headers: { headers: {
'Content-Type': 'multipart/form-data', 'Content-Type': 'multipart/form-data',
}, },
}); });
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 {/* <Button
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
sx={{ sx={{
bgcolor: '#ff3c3c', bgcolor: '#ff3c3c',
padding: '10px 50px', padding: '10px 50px',
...@@ -164,120 +119,238 @@ const VideoTranslate = () => { ...@@ -164,120 +119,238 @@ 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
// variant={checkTranalationTypeForRecord()} borderRadius: '20px', // Set border radius to 20px
startIcon={<HighlightOutlined />} marginTop: '15px', // Set margin top to 10px
// onClick={() => { marginLeft: '15px', // Set margin left to 10px
// setIsUploadFile(false); marginBottom: '25px',
// }} fontWeight: 'bold',
> }}
Text startIcon={<CloudUploadOutlined />}
</Button> // disabled // Disable the button
</ButtonGroup> >
Upload a video | Drag & Drop or Select File
{/* Video uploading */} </Button>
<Box sx={{ flexGrow: 1 }}>
<Card>
<CardHeader title="Upload a video | Drag & Drop or Select File" /> {/* Video uploading */}
<Grid container spacing={2}> <Box sx={{ flexGrow: 1 }}>
<Grid item xs={12} md={6}> <Card>
<Card sx={{ marginBottom: '20px', marginLeft: '10px', padding: '35px 10px' }}> {/* <CardHeader title="Upload a video | Drag & Drop or Select File" /> */}
<CardContent>
{/* ! Important */} {/* uploade video from here */}
<Grid container spacing={2}>
{/* @ts-ignore */} <Grid item xs={12} md={6}>
<MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'video/*' }} /> <Card sx={{ minHeight: '70%', marginBottom: '10px', marginLeft: '10px', padding: '35px 10px' }}>
<CardContent>
<Paper style={{ padding: '20px', marginTop: '15px' }}> {/* ! Important */}
<Typography variant="h5" align="center" gutterBottom>
Preview {/* @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> </Typography>
<div style={{ marginTop: '20px', textAlign: 'center' }}> <TextField
{file ? <video src={videoUrl} width="400" controls /> : <p>No Video Selected ...</p>} sx={{
</div> marginBottom: 2
</Paper> }}
</CardContent> fullWidth
</Card> value={translatedTextSi}
</Grid> onChange={handleChange}
<Grid item xs={12} md={6}> InputProps={{
<Card sx={{ p: 5, minHeight: 300, marginBottom: '10px', marginRight: '10px' }}> endAdornment: (
<Box display="grid" gap={5}> <InputAdornment position="end">
<Stack spacing={2}> <IconButton onClick={() => onCopy(value)}>
<Grid container spacing={1}> <CopyOutlined />
{/* <Grid item xs={12} md={6}> */} </IconButton>
{/* <h3>Set Sign Speed </h3> */} </InputAdornment>
)
{/* <Slider }}
defaultValue={30} />
getAriaValueText={valuetext}
valueLabelDisplay="auto" <Typography variant="overline" sx={{ p: 2, color: 'text.secondary', fontStyle: 'italic', margin: 1 }}>
step={10} English Unicode
marks </Typography>
min={10} <TextField
max={110} fullWidth
/> */} value={translatedTextEn}
{/* <h4>Speed - {speed}</h4> */} onChange={handleChange}
{/* </Grid> */} InputProps={{
<Grid item xs={12} md={6} container direction="row" justifyContent="flex-start" alignItems="center"> endAdornment: (
<Button <InputAdornment position="end">
variant="contained" <IconButton onClick={() => onCopy(value)}>
style={{ width: '200px', height: '60px', fontSize: '20px' }} <CopyOutlined />
sx={{ </IconButton>
mb: 3 </InputAdornment>
}} )
disabled={loading} }}
onClick={uploadVideo} />
endIcon={<TranslationOutlined />} </div>
> ) : null
Translate )}
</Button>
</Grid> </Card>
</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>
<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 ------------------------- */} {/* 3d avatar generate from here */}
<Typography variant="overline" sx={{ color: 'text.secondary', fontStyle: 'italic', marginBottom: 2 }}> <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 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,17 +390,16 @@ const VideoTranslate = () => { ...@@ -317,17 +390,16 @@ const VideoTranslate = () => {
</InputAdornment> </InputAdornment>
) )
}} }}
/> /> */}
</div> </div>
)} )}
</Stack> </Stack>
</Box> </Box>
</Card> </Card>
</Grid>
</Grid> </Grid>
</Card> </Grid>
</Box> </Card>
</Container> </Box>
</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