Merge branch 'IT20251000' of http://gitlab.sliit.lk/tmp-23-029/2023-029 into IT20251000

Project/Backend/Server_Node/server.js

@@ -25,6 +25,7 @@ const app = express();
 
 const corsOptions = {
   origin: 'http://localhost:3000',
+  origin: 'http://localhost:3001',
 };
 
 app.use(bodyParser.json({ limit: "30mb", extended: true }));

Project/Backend/Server_Python/controllers/video_detect_controler.py

@@ -37,7 +37,7 @@ async def upload_video(video: UploadFile = File(...)):
         with open(file_location, "wb") as file:
             file.write(video.file.read())
 
-        return {"text": "OK2"}
+        return {"text": "Video Upload Successfully"}
     except Exception as e:
         logger.info(f"Failed to upload file. {e}")
         raise HTTPException(

Project/Backend/Server_Python/services/video_detection_service.py

@@ -24,6 +24,7 @@ emotion_model.load_weights("../ML_Models/Emotion_Detection_Model/emotion_model.h
 class EmotionPredictionService:
     def __init__(self, model):
         self.model = model
+        self.current_emotion = None
 
     def predict_emotion_detection_video(video_request: UploadFile) -> Dict[str, str]:
         try:
@@ -85,7 +86,26 @@ class EmotionPredictionService:
                     break
 
                 emotions = predict_emotion_from_frame(frame)
-                predicted_emotions.extend(emotions)
+                if emotions:
+                    new_emotion = emotions[0]  # Assuming you only process one face at a time
+                    cv2.putText(frame, f"Emotion: {new_emotion}", (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2)
+                    if new_emotion != self.current_emotion:
+                        self.current_emotion = new_emotion
+                        predicted_emotions.append(new_emotion)
+
+                        # Display the frame with emotion prediction
+                        cv2.imshow('Emotion Detection', frame)
+
+                        if cv2.waitKey(1) & 0xFF == ord('q'):
+                            break
+
+            # while True:
+            #     ret, frame = cap.read()
+            #     if not ret:
+            #         break
+
+            #     emotions = predict_emotion_from_frame(frame)
+            #     predicted_emotions.extend(emotions)
 
             cap.release()
             os.remove(video_location)

Project/Frontend/SignConnectPlus/src/pages/emotion-detection/emotion-audio-detection/list/list.tsx

@@ -6,11 +6,37 @@ import Button from '@mui/material/Button';
 import UploadOutlined from '@ant-design/icons/lib/icons/UploadOutlined';
 import AudioOutlined from '@ant-design/icons/lib/icons/AudioOutlined';
 
+import { Link } from 'react-router-dom';
+import { Box, Stack, } from '@mui/material';
+import { APP_DEFAULT_PATH } from 'config';
+import construction from 'assets/images/maintenance/under-construction.svg';
+
+import {CardContent,IconButton,InputAdornment,Paper,TextField,Typography} from '@mui/material';
+import CopyOutlined from '@ant-design/icons/lib/icons/CopyOutlined';
+import AudioEmotionDetectService from '../../../../services/AudioEmotionDetection.js';
+import { MuiFileInput } from 'mui-file-input';
+import { useSnackbar } from 'notistack';
+
 const List = () => {
     const [audioBlob, setAudioBlob] = useState<Blob | undefined>(undefined);
     const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | undefined>(undefined);
     const [isRecording, setIsRecording] = useState<boolean>(false);
     const [audioUrl, setAudioUrl] = useState<string | undefined>(undefined);
+    const [value, setValue] = useState('');
+    const [file, setFile] = useState<File | string | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [isUploadFile, setIsUploadFile] = useState<boolean | string | null>(true);
+
+    const handleDropSingleFile = (files: any) => {
+        if (files) {
+          setFile(
+            Object.assign(files, {
+              preview: URL.createObjectURL(files)
+            })
+          );
+          setAudioUrl(URL.createObjectURL(files));
+        }
+      };
 
     const handleRecordStart = async () => {
         // Clear the uploaded audio state when recording starts
@@ -54,6 +80,53 @@ const List = () => {
             // Handle case where uploaded file is not an audio file
         }
     };
+    const { enqueueSnackbar } = useSnackbar();
+    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setValue(event.target.value);
+      };
+    const onCopy = (text: string) => {
+        if (text) {
+          navigator.clipboard.writeText(text);
+          enqueueSnackbar('Copied!', { variant: 'success' });
+        }
+      };
+
+      // Audio Upload
+    const predictEmotionFromAudio = async () => {
+        console.log("OK75")
+        console.log(file);
+        if (file) {
+        setLoading(true);
+        const formData = new FormData();
+
+        //@ts-ignore
+        formData.append('audio_request', file, file.name);
+
+        try {
+            const response = await AudioEmotionDetectService.predictEmotionAudio(formData);
+            if (response.status == 200) {
+            console.log(response.data);
+            setValue(response.data.predicted_emotion);
+            } 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' });
+        }
+    };
+    const checkEmotionUpload = () => {
+        if (isUploadFile) {
+          return 'contained';
+        } else {
+          return 'outlined';
+        }
+      };
 
     return (
         <MainCard content={false}>
@@ -65,17 +138,20 @@ const List = () => {
                             <div style={{ textAlign: 'center' }}>
                                 <input
                                     type="file"
-                                    accept="audio/*"
                                     onChange={handleUpload}
                                     style={{ display: 'none' }}
                                     id="audio-upload"
                                 />
                                 <label htmlFor="audio-upload">
                                     <Button
-                                        variant="contained"
+                                        // variant="contained"
+                                        variant={checkEmotionUpload()}
                                         color="primary"
                                         component="span"
                                         startIcon={<UploadOutlined />}
+                                        onClick={() => {
+                                            setIsUploadFile(true);
+                                          }}
                                     >
                                         Upload
                                     </Button>
@@ -88,6 +164,49 @@ const List = () => {
                                 >
                                     {isRecording ? 'Stop Recording' : 'Record'}
                                 </Button>
+                                <Button
+                                variant="contained"
+                                disabled={loading}
+                                onClick={() => {
+                                    predictEmotionFromAudio();
+                                  }}
+                                >
+                                  Prediction
+                                </Button>
+                                <div>
+                                <Typography variant="overline" sx={{ color: 'text.secondary' }}>
+                                  Predict Emotion
+                                </Typography>
+
+                                <TextField
+                                  fullWidth
+                                  value={value}
+                                  onChange={handleChange}
+                                  InputProps={{
+                                    endAdornment: (
+                                      <InputAdornment position="end">
+                                        <IconButton onClick={() => onCopy(value)}>
+                                          <CopyOutlined />
+                                        </IconButton>
+                                      </InputAdornment>
+                                    )
+                                  }}
+                                />
+                              </div>
+                              <CardContent>
+                          {/* ! Important */}
+
+                          {/* @ts-ignore */}
+                          <MuiFileInput value={file} onChange={handleDropSingleFile} inputProps={{ accept: 'audio/*' }} />
+                          <Paper style={{ padding: '20px', marginTop: '15px' }}>
+                            <Typography variant="h5" align="center" gutterBottom>
+                              Preview
+                            </Typography>
+                            <div style={{ marginTop: '20px', textAlign: 'center' }}>
+                              {file ? <video src={audioUrl} width="400" controls /> : <p>No Audio Selected ...</p>}
+                            </div>
+                          </Paper>
+                        </CardContent>
                                 {audioBlob && (
                                     <audio controls>
                                         <source src={URL.createObjectURL(audioBlob)} type="audio/wav" />
@@ -104,12 +223,30 @@ const List = () => {
                         </MainCard>
                     </Grid>
                     <Grid item xs={12} md={6}>
-                        <h2>3D Avatar</h2>
-                        <MainCard>
-                            {/* Content of the second card */}
-                            {/* You can put your 3D avatar components here */}
-                        </MainCard>
+                    <h2>3D Avatar</h2>
+                    <MainCard>
+                    <Grid container spacing={4} direction="column" alignItems="center" justifyContent="center" sx={{ minHeight: '100vh', py: 2 }}>
+                      <Grid item xs={12}>
+                        <Box sx={{ width: { xs: 300, sm: 480 } }}>
+                          <img src={construction} alt="mantis" style={{ width: '100%', height: 'auto' }} />
+                        </Box>
+                      </Grid>
+                      <Grid item xs={12}>
+                        <Stack spacing={2} justifyContent="center" alignItems="center">
+                          <Typography align="center" variant="h1">
+                            Under Construction
+                          </Typography>
+                          <Typography color="textSecondary" align="center" sx={{ width: '85%' }}>
+                            Hey! Please check out this site later. We are doing some maintenance on it right now.
+                          </Typography>
+                          <Button component={Link} to={APP_DEFAULT_PATH} variant="contained">
+                            Back To Home
+                          </Button>
+                        </Stack>
+                      </Grid>
                     </Grid>
+                    </MainCard>
+                  </Grid>
                 </Grid>
             </ScrollX>
         </MainCard>

Project/Frontend/SignConnectPlus/src/pages/learning-management/learning-feedback/list/list.tsx

 
 // material-ui
+import { Grid, Rating, Typography } from '@mui/material';
 
 // third-party
+import Slider from 'react-slick';
 
-// project import
+// project import 
+import Avatar from 'components/@extended/Avatar';
 import MainCard from 'components/MainCard';
-import ScrollX from 'components/ScrollX';
-
 
 // assets
+import imgfeature1 from 'assets/images/landing/img-user1.svg';
 
 //types
 
+// ================================|| TESTIMONIAL - ITEMS ||================================ //
+
+interface Props {
+    item: { image: string; title: string; review: string; rating: number; client: string };
+}
+
+const Item = ({ item }: Props) => (
+    <MainCard sx={{ mx: 2 }} contentSX={{ p: 3 }}>
+        <Grid container spacing={1}>
+            <Grid item>
+                <Avatar src={item.image} alt="feature" />
+            </Grid>
+            <Grid item sm zeroMinWidth>
+                <Grid container spacing={1}>
+                    <Grid item xs={12}>
+                        <Typography variant="h5" sx={{ fontWeight: 600 }}>
+                            {item.title}
+                        </Typography>
+                        <Rating name="read-only" readOnly value={item.rating} size="small" precision={0.5} />
+                    </Grid>
+                    <Grid item xs={12}>
+                        <Typography variant="body1" color="secondary">
+                            {item.review}
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={12}>
+                        <Typography variant="subtitle2">{item.client}</Typography>
+                    </Grid>
+                </Grid>
+            </Grid>
+        </Grid>
+    </MainCard>
+);
+
 // ==============================|| List ||============================== //
 
 const List = () => {
+
+    const settings = {
+        autoplay: true,
+        arrows: false,
+        dots: false,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1
+    };
+
+    const items = [
+        {
+            image: imgfeature1,
+            title: 'Design Quality',
+            review:
+                'One of the better themes Ive used. Beautiful and clean design. Also included a NextJS project which is pretty rare in what Ive seen on MUI templates. Ultimately it didnt work out for my specific use case, but this is a well organized theme. Definitely keeping it in mind for future projects.',
+            rating: 5,
+            client: 'William S.'
+        },
+        {
+            image: imgfeature1,
+            title: 'Customizability',
+            review:
+                'Excellent design, you can use in a new project or include in your current project. Multiple components for any use. Good code quality. Great customer service and support.',
+            rating: 5,
+            client: 'Rodrigo J.'
+        },
+        {
+            image: imgfeature1,
+            title: 'Design Quality',
+            review: 'there is no mistake, great design and organized code, thank you ...',
+            rating: 4,
+            client: 'Yang Z.'
+        },
+        {
+            image: imgfeature1,
+            title: 'Code Quality',
+            review:
+                'Fantastic design and good code quality. Its a great starting point for any new project. They provide plenty of premade components, page views, and authentication options. Definitely the best Ive found for Material UI in Typescript',
+            rating: 5,
+            client: 'Felipe F.'
+        },
+        {
+            image: imgfeature1,
+            title: 'Code Quality ',
+            review:
+                'Great template. Very well written code and good structure. Very customizable and tons of nice components. Good documentation. Team is very responsive too.',
+            rating: 5,
+            client: 'Besart M.'
+        },
+        {
+            image: imgfeature1,
+            title: 'Code Quality',
+            review:
+                'We are just getting started with this new theme, but we liked it enough that we decided to import our application into this codebase rather than the other way around. Impressive number of custom components and original work VS some other themes that seem to just be repackaged versions of Material UI.',
+            rating: 5,
+            client: 'Oxbird'
+        }
+    ];
+
     return (
-        <MainCard content={false}>
-            <ScrollX> 
-            </ScrollX>
-        </MainCard>
+        <Grid container spacing={2}>
+            <Grid item lg={12} md={12} xs={12} sx={{ '& .slick-list': { overflow: 'visible' } }}>
+                <Slider {...settings}>
+                    {items.map((item, index) => (
+                        <Item key={index} item={item} />
+                    ))}
+                </Slider>
+            </Grid>
+            <Grid item md={12}>
+                
+            </Grid>
+        </Grid>
     )
 }
 

Project/Frontend/SignConnectPlus/src/pages/services/SignLanguageToText.js

-import axios from 'axios';
-
-class SignLanguageToTextService {
-  predictSignLanguageVideo(speed, data) {
-    return axios.post(
-      `http://127.0.0.1:8000/predict-sign-language/video/speed_levels?speed=${speed}`,
-      data
-    );
-  }
-}
-
-export default new SignLanguageToTextService();

Project/Frontend/SignConnectPlus/src/pages/services/VideoToSignLanguage.js

-import axios from 'axios';
-
-class VideoToSignLanguage {
-  videoTranslation(data) {
-    return axios.post(
-      // @ts-ignore
-      `http://127.0.0.1:8000/translated_items/`,
-      data
-    ); 
-  }
-}
-
-export default new VideoToSignLanguage();

Project/Frontend/SignConnectPlus/src/routes/MainRoutes.tsx

@@ -38,7 +38,7 @@ const LearningCurriculums = Loadable(lazy(() => import('pages/learning-managemen
 const LearningCurriculumsSubscribed = Loadable(lazy(() => import('pages/learning-management/learning-curriculums-subscribed/list/list')));
 const LearningCurriculumsSubscribedTutorial = Loadable(lazy(() => import('pages/learning-management/learning-curriculums-subscribed/tutorial/tutorial')));
 // const LearningLeadBoard = Loadable(lazy(() => import('pages/learning-management/learning-lead-board/list/list')));
-// const LearningFeedBack = Loadable(lazy(() => import('pages/learning-management/learning-feedback/list/list')));
+const LearningFeedBack = Loadable(lazy(() => import('pages/learning-management/learning-feedback/list/list')));
 
 // render - parameter curriculum management page
 const CurriculumManagementList = Loadable(lazy(() => import('pages/parameter/curriculum-management/list/list')));
@@ -173,7 +173,7 @@ const MainRoutes = {
             },
             {
               path: 'feedback',
-              element: <MaintenanceUnderConstruction />
+              element: <LearningFeedBack />
             }
           ]
         },