Local file deepfake

public/manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
-  "name": "Fake news debunker by InVID & WeVerify - BETA",
+  "name": "Fake news debunker by InVID & WeVerify BETA",
   "version": "0.80",
-  "description": "InVID WeVerify extension - THIS EXTENSION IS FOR BÊTA TESTING",
+  "description": "InVID WeVerify extension THIS EXTENSION IS FOR BÊTA TESTING",
   "short_name": "Verification Plugin",
   "action": {
     "default_title": "InVID WeVerify",

src/components/NavItems/tools/Deepfake/DeepfakeImage.jsx

@@ -89,6 +89,7 @@ const Deepfake = () => {
   const handleClose = () => {
     setInput("");
     setImageFile(undefined);
+    setType("");
     dispatch(resetDeepfake());
   };
 
@@ -138,7 +139,7 @@ const Deepfake = () => {
                     fileInput={imageFile}
                     setFileInput={setImageFile}
                     handleSubmit={handleSubmit}
-                    fileInputTypesAccepted={"imageFile/*"}
+                    fileInputTypesAccepted={"image/*"}
                     handleCloseSelectedFile={handleClose}
                     preprocessLocalFile={preprocessImage}
                   />

src/components/NavItems/tools/Deepfake/DeepfakeVideo.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
 import LinearProgress from "@mui/material/LinearProgress";
 import Box from "@mui/material/Box";
 import useMyStyles from "../../../Shared/MaterialUiStyles/useMyStyles";
@@ -15,6 +13,9 @@ import DeepfakeResultsVideo from "./Results/DeepfakeResultsVideo";
 import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
 import Alert from "@mui/material/Alert";
 import { resetDeepfake } from "../../../../redux/actions/tools/deepfakeVideoActions";
+import { preprocessFileUpload } from "components/Shared/Utils/fileUtils";
+import { setError } from "redux/reducers/errorReducer";
+import StringFileUploadField from "components/Shared/StringFileUploadField";
 
 const Deepfake = () => {
   //const { url } = useParams();
@@ -30,6 +31,8 @@ const Deepfake = () => {
   const url = useSelector((state) => state.deepfakeVideo.url);
   const role = useSelector((state) => state.userSession.user.roles);
   const [input, setInput] = useState(url ? url : "");
+  const [type, setType] = useState("");
+  const [videoFile, setVideoFile] = useState(undefined);
   //Selecting mode
   //============================================================================================
   const [selectedMode, setSelectedMode] = useState("");
@@ -43,10 +46,6 @@ const Deepfake = () => {
 
   const dispatch = useDispatch();
 
-  const cleanup = () => {
-    dispatch(resetDeepfake());
-    setInput("");
-  };
   const submitUrl = () => {
     UseGetDeepfake(
       input,
@@ -55,8 +54,40 @@ const Deepfake = () => {
       dispatch,
       role,
       keywordWarning("error_invalid_url"),
+      type,
+      videoFile,
+    );
+  };
+
+  const preprocessingSuccess = (file) => {
+    setVideoFile(file);
+    setType("local");
+    return file;
+  };
+
+  const preprocessingError = () => {
+    dispatch(setError(keywordWarning("warning_file_too_big")));
+  };
+  const preprocessVideo = (file) => {
+    return preprocessFileUpload(
+      file,
+      role,
+      undefined,
+      preprocessingSuccess,
+      preprocessingError,
     );
   };
+  const handleSubmit = () => {
+    dispatch(resetDeepfake());
+    submitUrl();
+  };
+
+  const handleClose = () => {
+    setInput("");
+    setVideoFile(undefined);
+    setType("");
+    dispatch(resetDeepfake());
+  };
 
   return (
     <div>
@@ -91,66 +122,45 @@ const Deepfake = () => {
 
         <Box p={3}>
           {selectedMode !== "" && (
-            <form>
+            <div>
               <Box>
-                <Grid container direction="row" spacing={3} alignItems="center">
-                  <Grid item xs>
-                    <TextField
-                      id="standard-full-width"
-                      label={keyword("deepfake_video_link")}
-                      placeholder={keyword("deepfake_placeholder")}
-                      fullWidth
-                      type="url"
-                      value={input}
-                      variant="outlined"
-                      disabled={selectedMode === "" || isLoading}
-                      onChange={(e) => setInput(e.target.value)}
-                    />
-                  </Grid>
-
-                  <Grid item>
-                    {!result ? (
-                      <Button
-                        type="submit"
-                        variant="contained"
-                        color="primary"
-                        onClick={(e) => {
-                          e.preventDefault(), submitUrl();
-                        }}
-                        disabled={
-                          selectedMode === "" || input === "" || isLoading
-                        }
-                      >
-                        {"Submit"}
-                      </Button>
-                    ) : (
-                      <Button
-                        variant="contained"
-                        color="primary"
-                        onClick={(e) => {
-                          e.preventDefault(), cleanup();
-                        }}
-                      >
-                        {keyword("button_remove")}
-                      </Button>
-                    )}
-                  </Grid>
-                </Grid>
-
+                <form>
+                  <StringFileUploadField
+                    labelKeyword={keyword("deepfake_video_link")}
+                    placeholderKeyword={keyword("deepfake_placeholder")}
+                    submitButtonKeyword={keyword("submit_button")}
+                    localFileKeyword={keyword("button_localfile")}
+                    urlInput={input}
+                    setUrlInput={setInput}
+                    fileInput={videoFile}
+                    setFileInput={setVideoFile}
+                    handleSubmit={handleSubmit}
+                    fileInputTypesAccepted={"video/*"}
+                    handleCloseSelectedFile={handleClose}
+                    preprocessLocalFile={preprocessVideo}
+                  />
+                </form>
+                <Box m={2} />
                 {isLoading && (
                   <Box mt={3}>
                     <LinearProgress />
                   </Box>
                 )}
               </Box>
-            </form>
+            </div>
           )}
         </Box>
       </Card>
 
       <Box m={3} />
 
-      {result && <DeepfakeResultsVideo result={result} url={url} />}
+      {result && (
+        <DeepfakeResultsVideo
+          result={result}
+          url={url}
+          handleClose={handleClose}
+        />
+      )}
     </div>
   );
 };

src/components/NavItems/tools/Deepfake/Hooks/useGetDeepfake.jsx

@@ -18,9 +18,9 @@ async function UseGetDeepfake(
   role,
   errorMsg,
   type,
-  image,
+  mediaFile,
 ) {
-  if (!processURL || (!url && !image)) {
+  if (!processURL || (!url && !mediaFile)) {
     return;
   }
 
@@ -56,7 +56,7 @@ async function UseGetDeepfake(
     }
   };
 
-  if (!isValidUrl(url) && !image) {
+  if (!isValidUrl(url) && !mediaFile) {
     handleError(errorMsg);
     return;
   }
@@ -65,7 +65,7 @@ async function UseGetDeepfake(
     switch (type) {
       case "local":
         var bodyFormData = new FormData();
-        bodyFormData.append("file", image);
+        bodyFormData.append("file", mediaFile);
         res = await axios.post(baseURL + modeURL + "jobs", bodyFormData, {
           method: "post",
           params: { services: services },
@@ -97,7 +97,7 @@ async function UseGetDeepfake(
       if (mode === "IMAGE") {
         dispatch(
           setDeepfakeResultImage({
-            url: image ? URL.createObjectURL(image) : url,
+            url: mediaFile ? URL.createObjectURL(mediaFile) : url,
             result: response.data,
           }),
         );

src/components/NavItems/tools/Deepfake/Results/DeepfakeResultsImage.jsx

@@ -159,7 +159,6 @@ const DeepfakeResultsImage = (props) => {
 
   const handleClose = () => {
     props.handleClose();
-    dispatch(resetDeepfake());
   };
 
   return (
@@ -268,10 +267,11 @@ const DeepfakeResultsImage = (props) => {
                 deepfakeScore.predictionScore >= 70
               ) && (
                 <Typography variant="h5" sx={{ color: "red" }}>
-                  {keyword("deepfake_image_detection_alert") +
-                    DeepfakeImageDetectionMethodNames[deepfakeScore.methodName]
-                      .name +
-                    keyword("deepfake_image_detection_alert_2")}
+                  {`${keyword("deepfake_image_detection_alert")} ` +
+                    `${DeepfakeImageDetectionMethodNames[
+                      deepfakeScore.methodName
+                    ].name.toLowerCase()} ` +
+                    `${keyword("deepfake_image_detection_alert_2")}`}
                 </Typography>
               )}