feat : Translate sign language to text. Frontend integration

Project/Backend/Server_Python/main.py

@@ -19,6 +19,7 @@ app.include_router(translate_controler.router)
 origins = [
     "http://localhost",
     "http://localhost:8080",
+    "http://localhost:8004",
 ]
 
 app.add_middleware(CORSMiddleware,

Project/Frontend/Web_App/package-lock.json

@@ -32,11 +32,13 @@
         "amazon-cognito-identity-js": "^5.2.11",
         "apexcharts": "^3.36.0",
         "autosuggest-highlight": "^3.3.4",
-        "axios": "^1.1.2",
+        "axios": "^1.4.0",
         "change-case": "^4.1.2",
         "date-fns": "^2.29.3",
         "firebase": "^9.12.1",
+        "form-data": "^4.0.0",
         "framer-motion": "^7.5.3",
+        "fs": "^0.0.1-security",
         "highlight.js": "^11.6.0",
         "i18next": "^21.10.0",
         "i18next-browser-languagedetector": "^6.1.8",
@@ -2856,9 +2858,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.2.tgz",
-      "integrity": "sha512-bznQyETwElsXl2RK7HLLwb5GPpOLlycxHCtrpDR/4RqqBzjARaOTo3jz4IgtntWUYee7Ne4S8UHd92VCuzPaWA==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -4593,6 +4595,11 @@
         "tslib": "2.4.0"
       }
     },
+    "node_modules/fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -11022,9 +11029,9 @@
       "dev": true
     },
     "axios": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.2.tgz",
-      "integrity": "sha512-bznQyETwElsXl2RK7HLLwb5GPpOLlycxHCtrpDR/4RqqBzjARaOTo3jz4IgtntWUYee7Ne4S8UHd92VCuzPaWA==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
       "requires": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -12420,6 +12427,11 @@
         "tslib": "2.4.0"
       }
     },
+    "fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",

Project/Frontend/Web_App/package.json

@@ -42,11 +42,13 @@
     "amazon-cognito-identity-js": "^5.2.11",
     "apexcharts": "^3.36.0",
     "autosuggest-highlight": "^3.3.4",
-    "axios": "^1.1.2",
+    "axios": "^1.4.0",
     "change-case": "^4.1.2",
     "date-fns": "^2.29.3",
     "firebase": "^9.12.1",
+    "form-data": "^4.0.0",
     "framer-motion": "^7.5.3",
+    "fs": "^0.0.1-security",
     "highlight.js": "^11.6.0",
     "i18next": "^21.10.0",
     "i18next-browser-languagedetector": "^6.1.8",

Project/Frontend/Web_App/src/config.ts

@@ -3,7 +3,7 @@ import { PATH_DASHBOARD } from './routes/paths';
 
 // API
 // ----------------------------------------------------------------------
-
+export const BACKEND_URL = 'http://127.0.0.1:8000/';
 export const HOST_API_KEY = process.env.HOST_API_KEY || '';
 
 export const FIREBASE_API = {

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

@@ -41,6 +41,7 @@ import { useSnackbar } from 'notistack';
 import useCopyToClipboard from 'src/hooks/useCopyToClipboard';
 import Iconify from 'src/components/iconify/Iconify';
 import dynamic from 'next/dynamic';
+import SignLanguageToTextService from 'src/services/SignLanguageToText.js';
 
 const useReactMediaRecorder = () =>
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -57,7 +58,7 @@ export default function AboutPage() {
   const [isUploadFile, setIsUploadFile] = useState<boolean | string | null>(true);
   const [videoUrl, setVideoUrl] = useState('');
   const [loading, setLoading] = useState(false);
-  const [value, setValue] = useState('ආආආආආආආආආආආආආආආආ');
+  const [value, setValue] = useState('');
 
   const handleDropSingleFile = useCallback(async (acceptedFiles: File[]) => {
     const file = acceptedFiles[0];
@@ -105,6 +106,22 @@ export default function AboutPage() {
 
   // Video Upload
 
+  const translateSignLanguageToText = async () => {
+    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);
+    }
+  };
+
   return (
     <>
       <Head>
@@ -211,6 +228,9 @@ export default function AboutPage() {
                         mb: 3,
                       }}
                       disabled={loading}
+                      onClick={() => {
+                        translateSignLanguageToText();
+                      }}
                     >
                       Translate
                     </Button>

Project/Frontend/Web_App/src/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/Web_App/yarn.lock

@@ -1723,10 +1723,10 @@
   "resolved" "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz"
   "version" "4.3.5"
 
-"axios@^1.1.2":
-  "integrity" "sha512-bznQyETwElsXl2RK7HLLwb5GPpOLlycxHCtrpDR/4RqqBzjARaOTo3jz4IgtntWUYee7Ne4S8UHd92VCuzPaWA=="
-  "resolved" "https://registry.npmjs.org/axios/-/axios-1.1.2.tgz"
-  "version" "1.1.2"
+"axios@^1.4.0":
+  "integrity" "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA=="
+  "resolved" "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz"
+  "version" "1.4.0"
   dependencies:
     "follow-redirects" "^1.15.0"
     "form-data" "^4.0.0"
@@ -2802,6 +2802,11 @@
   "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
+"fs@^0.0.1-security":
+  "integrity" "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+  "resolved" "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz"
+  "version" "0.0.1-security"
+
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"