fix : UI issues & flow issues

Project/Frontend/Web_App/src/pages/translate-page.tsx

@@ -107,18 +107,27 @@ export default function AboutPage() {
   // Video Upload
 
   const translateSignLanguageToText = async () => {
-    setLoading(true);
-    const formData = new FormData();
-    formData.append('video_request', file, 'test_video.mp4');
+    if (file) {
+      setLoading(true);
+      const formData = new FormData();
+      formData.append('video_request', file, 'test_video.mp4');
 
-    try {
-      const response = await SignLanguageToTextService.predictSignLanguageVideo(10, formData);
-      console.log(response.data);
-      setValue(response.data.predictions);
-      setLoading(false);
-    } catch (error) {
-      console.log(error);
-      setLoading(false);
+      try {
+        const response = await SignLanguageToTextService.predictSignLanguageVideo(10, formData);
+        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' });
     }
   };
 
@@ -251,7 +260,7 @@ export default function AboutPage() {
 
           <Box sx={{ flexGrow: 1 }}>
             <Card>
-              <CardHeader title="Upload a video containing Sign Language" />
+              <CardHeader title="Capture a video containing Sign Language" />
               <Grid container spacing={2}>
                 <Grid item xs={12} md={6}>
                   <Card>