Merge pull request #536 from AFP-Medialab/syntetic_detector_0.81

Syntetic detector 0.81
AFP-Medialab · Jun 13, 2024 · c6ade2f · c6ade2f
2 parents eb7791d + 18d3ca8
commit c6ade2f
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 55 deletions.
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
@@ -113,6 +113,17 @@ function a11yProps(index) {
     "aria-controls": `scrollable-force-tabpanel-${index}`,
   };
 }
+export const TOOLS_CATEGORIES = {
+  VIDEO: "navbar_category_video",
+  IMAGE: "navbar_category_image",
+  AUDIO: "navbar_category_audio",
+  SEARCH: "navbar_category_search",
+  DATA_ANALYSIS: "navbar_category_data",
+  OTHER: "navbar_category_other",
+
+  // Used to display the home page
+  ALL: "navbar_category_general",
+};
 
 const NavBar = () => {
   const classes = useMyStyles();
@@ -215,17 +226,6 @@ const NavBar = () => {
    * Represents the categories to which the tools belong
    *
    */
-  const TOOLS_CATEGORIES = {
-    VIDEO: keyword("navbar_category_video"),
-    IMAGE: keyword("navbar_category_image"),
-    AUDIO: keyword("navbar_category_audio"),
-    SEARCH: keyword("navbar_category_search"),
-    DATA_ANALYSIS: keyword("navbar_category_data"),
-    OTHER: keyword("navbar_category_other"),
-
-    // Used to display the home page
-    ALL: keyword("navbar_category_general"),
-  };
 
   /**
    * Represents the possible temporary states of the tools:

diff --git a/src/components/NavItems/Assistant/AssistantIntroduction.jsx b/src/components/NavItems/Assistant/AssistantIntroduction.jsx
@@ -5,7 +5,8 @@ import { Box, CardHeader } from "@mui/material";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import Grid from "@mui/material/Grid";
-import HelpDialog from "../../Shared/HelpDialog/HelpDialog";
+import Tooltip from "@mui/material/Tooltip";
+import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
 import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
 import LinkIcon from "@mui/icons-material/Link";
 import Typography from "@mui/material/Typography";
@@ -89,19 +90,25 @@ const AssistantIntroduction = (props) => {
             </Typography>
           }
           action={
-            <div style={{ display: "flex", marginTop: 10 }}>
-              {
-                <HelpDialog
-                  title={"assistant_help_title"}
-                  paragraphs={[
-                    "assistant_help_1",
-                    "assistant_help_2",
-                    "assistant_help_3",
-                    "assistant_help_4",
-                  ]}
+            <Tooltip
+              interactive={"true"}
+              title={
+                <div
+                  className={"content"}
+                  dangerouslySetInnerHTML={{
+                    __html:
+                      keyword("assistant_help_title") +
+                      keyword("assistant_help_1") +
+                      keyword("assistant_help_2") +
+                      keyword("assistant_help_3") +
+                      keyword("assistant_help_4"),
+                  }}
                 />
               }
-            </div>
+              classes={{ tooltip: classes.assistantTooltip }}
+            >
+              <HelpOutlineOutlinedIcon className={classes.toolTipIcon} />
+            </Tooltip>
           }
         />
 

diff --git a/src/components/NavItems/tools/Alltools/MainContentMenu.jsx b/src/components/NavItems/tools/Alltools/MainContentMenu.jsx
@@ -30,7 +30,7 @@ import { useNavigate } from "react-router-dom";
 import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
 import { Audiotrack } from "@mui/icons-material";
 import Typography from "@mui/material/Typography";
-
+import { TOOLS_CATEGORIES } from "components/NavBar/NavBar";
 function TabPanel(props) {
   const { children, value, index, ...other } = props;
 
@@ -105,7 +105,8 @@ const MainContentMenu = (props) => {
 
   const categories = [
     {
-      type: keywordNavbar("navbar_category_video"),
+      type: TOOLS_CATEGORIES.VIDEO,
+      name: keywordNavbar(TOOLS_CATEGORIES.VIDEO),
       value: toolsVideo,
       icon: (
         <SvgIcon
@@ -118,7 +119,8 @@ const MainContentMenu = (props) => {
       ),
     },
     {
-      type: keywordNavbar("navbar_category_image"),
+      type: TOOLS_CATEGORIES.IMAGE,
+      name: keywordNavbar(TOOLS_CATEGORIES.IMAGE),
       value: toolsImages,
       icon: (
         <SvgIcon
@@ -131,12 +133,14 @@ const MainContentMenu = (props) => {
       ),
     },
     {
-      type: keywordNavbar("navbar_category_audio"),
+      type: TOOLS_CATEGORIES.AUDIO,
+      name: keywordNavbar(TOOLS_CATEGORIES.AUDIO),
       value: toolsAudio,
       icon: <Audiotrack width="40px" height="40px" />,
     },
     {
-      type: keywordNavbar("navbar_category_search"),
+      type: TOOLS_CATEGORIES.SEARCH,
+      name: keywordNavbar(TOOLS_CATEGORIES.SEARCH),
       value: toolsSearch,
       icon: (
         <SvgIcon
@@ -149,7 +153,8 @@ const MainContentMenu = (props) => {
       ),
     },
     {
-      type: keywordNavbar("navbar_category_data"),
+      type: TOOLS_CATEGORIES.DATA_ANALYSIS,
+      name: keywordNavbar(TOOLS_CATEGORIES.DATA_ANALYSIS),
       value: toolsData,
       icon: (
         <SvgIcon
@@ -162,34 +167,35 @@ const MainContentMenu = (props) => {
       ),
     },
     {
-      type: keywordNavbar("navbar_category_other"),
+      type: TOOLS_CATEGORIES.OTHER,
+      name: keywordNavbar(TOOLS_CATEGORIES.OTHER),
       value: otherTools,
       icon: <MoreHorizIcon width="40px" height="40px" />,
     },
   ];
 
   tools.forEach((value) => {
-    if (value.type === keywordNavbar("navbar_category_video")) {
+    if (value.type === TOOLS_CATEGORIES.VIDEO) {
       toolsVideo.push(value);
     }
 
-    if (value.type === keywordNavbar("navbar_category_image")) {
+    if (value.type === TOOLS_CATEGORIES.IMAGE) {
       toolsImages.push(value);
     }
 
-    if (value.type === keywordNavbar("navbar_category_audio")) {
+    if (value.type === TOOLS_CATEGORIES.AUDIO) {
       toolsAudio.push(value);
     }
 
-    if (value.type === keywordNavbar("navbar_category_search")) {
+    if (value.type === TOOLS_CATEGORIES.SEARCH) {
       toolsSearch.push(value);
     }
 
-    if (value.type === keywordNavbar("navbar_category_data")) {
+    if (value.type === TOOLS_CATEGORIES.DATA_ANALYSIS) {
       toolsData.push(value);
     }
 
-    if (value.type === keywordNavbar("navbar_category_other")) {
+    if (value.type === TOOLS_CATEGORIES.OTHER) {
       otherTools.push(value);
     }
   });
@@ -250,7 +256,7 @@ const MainContentMenu = (props) => {
                       textTransform: "capitalize",
                     }}
                   >
-                    {category.type}
+                    {category.name}
                   </Typography>
                 }
               />

diff --git a/src/components/NavItems/tools/Deepfake/Hooks/useGetDeepfake.jsx b/src/components/NavItems/tools/Deepfake/Hooks/useGetDeepfake.jsx
@@ -31,7 +31,7 @@ async function UseGetDeepfake(
   if (mode === "IMAGE") {
     dispatch(setDeepfakeLoadingImage(true));
     modeURL = "images/";
-    services = "faceswap";
+    services = "faceswap_ens_mever";
   } else if (mode === "VIDEO") {
     dispatch(setDeepfakeLoadingVideo(true));
     modeURL = "videos/";

diff --git a/src/components/NavItems/tools/Deepfake/Results/DeepfakeResultsImage.jsx b/src/components/NavItems/tools/Deepfake/Results/DeepfakeResultsImage.jsx
@@ -7,17 +7,14 @@ import { Grid, Typography, Stack, IconButton, Tooltip } from "@mui/material";
 import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
 import { LinearProgressWithLabel } from "../../../../Shared/LinearProgressWithLabel/LinearProgressWithLabel";
 import { Close, Help } from "@mui/icons-material";
-import { resetDeepfake } from "redux/actions/tools/deepfakeImageActions";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { DetectionProgressBar } from "components/Shared/DetectionProgressBar/DetectionProgressBar";
 import { getclientId } from "components/Shared/GoogleAnalytics/MatomoAnalytics";
 import { useTrackEvent } from "Hooks/useAnalytics";
 
 const DeepfakeResultsImage = (props) => {
   const classes = useMyStyles();
   const keyword = i18nLoadNamespace("components/NavItems/tools/Deepfake");
-
-  const dispatch = useDispatch();
   class DeepfakeResult {
     constructor(methodName, predictionScore) {
       (this.methodName = methodName), (this.predictionScore = predictionScore);
@@ -43,21 +40,24 @@ const DeepfakeResultsImage = (props) => {
   const [deepfakeScore, setDeepfakeScores] = useState(undefined);
 
   useEffect(() => {
-    if (!results || !results.faceswap_report) {
+    if (!results || !results.faceswap_ens_mever_report) {
       return;
     }
 
     let faceswapScore;
 
-    if (!results.faceswap_report || !results.faceswap_report.prediction) {
+    if (
+      !results.faceswap_ens_mever_report ||
+      !results.faceswap_ens_mever_report.prediction
+    ) {
       faceswapScore = new DeepfakeResult(
         Object.keys(DeepfakeImageDetectionMethodNames)[0],
         0,
       );
     } else {
       faceswapScore = new DeepfakeResult(
         Object.keys(DeepfakeImageDetectionMethodNames)[0],
-        results.faceswap_report.prediction * 100,
+        results.faceswap_ens_mever_report.prediction * 100,
       );
     }
 
@@ -88,11 +88,15 @@ const DeepfakeResultsImage = (props) => {
 
     const rectanglesTemp = [];
 
-    if (!results || !results.faceswap_report || !results.faceswap_report.info) {
+    if (
+      !results ||
+      !results.faceswap_ens_mever_report ||
+      !results.faceswap_ens_mever_report.info
+    ) {
       return;
     }
 
-    results.faceswap_report.info.forEach((element) => {
+    results.faceswap_ens_mever_report.info.forEach((element) => {
       const rectangleAtributes = element.bbox;
 
       const elementTop = Math.round(rectangleAtributes.top * imgHeight);

diff --git a/src/components/NavItems/tools/Keyframes/Hooks/useKeyframeWrapper.jsx b/src/components/NavItems/tools/Keyframes/Hooks/useKeyframeWrapper.jsx
@@ -97,7 +97,10 @@ export const useKeyframeWrapper = (url, keyword) => {
             response.data.video_id,
           );
         })
-        .catch((errors) => handleError(errors));
+        .catch((errors) => {
+          const error_code = errors.code ? errors.code : "default";
+          handleError("keyframes_error_" + error_code);
+        });
     };
 
     if (url === undefined || url === "") return;

diff --git a/src/components/NavItems/tools/Keyframes/Hooks/useVideoSimilarity.jsx b/src/components/NavItems/tools/Keyframes/Hooks/useVideoSimilarity.jsx
@@ -26,7 +26,7 @@ export const useVideoSimilarity = (url, keyword) => {
         })
         .catch((error) => {
           //handleError("keyframes_error_VIDEO_SIMILARITY");
-          console.error(error);
+          //console.error(error);
           dispatch(setKeyframesSimilarityLoading(false));
         });
     };

diff --git a/src/components/NavItems/tools/SyntheticImageDetection/index.jsx b/src/components/NavItems/tools/SyntheticImageDetection/index.jsx
@@ -70,7 +70,7 @@ const SyntheticImageDetection = () => {
     dispatch(setSyntheticImageDetectionLoading(true));
     const modeURL = "images/";
     const services =
-      "gan,unina,progan_r50_grip,adm_r50_grip,progan_rine_mever,ldm_rine_mever";
+      "gan_r50_mever,ldm_r50_grip,progan_r50_grip,adm_r50_grip,ldm_r50_mever,progan_rine_mever,ldm_rine_mever";
 
     const baseURL = process.env.REACT_APP_CAA_DEEPFAKE_URL;
 

diff --git a/src/components/NavItems/tools/SyntheticImageDetection/syntheticImageDetectionResults.jsx b/src/components/NavItems/tools/SyntheticImageDetection/syntheticImageDetectionResults.jsx
@@ -97,16 +97,20 @@ const SyntheticImageDetectionResults = (props) => {
     setResultsHaveErrors(false);
 
     const diffusionScore = new SyntheticImageDetectionAlgorithmResult(
+      //previously unina_report
       Object.keys(DeepfakeImageDetectionMethodNames)[1],
-      !results.unina_report.prediction
+      !results.ldm_r50_grip_report.prediction
         ? 0
-        : results.unina_report.prediction * 100,
-      !results.unina_report.prediction,
+        : results.ldm_r50_grip_report.prediction * 100,
+      !results.ldm_r50_grip_report.prediction,
     );
     const ganScore = new SyntheticImageDetectionAlgorithmResult(
+      //previously gan_report
       Object.keys(DeepfakeImageDetectionMethodNames)[0],
-      !results.gan_report.prediction ? 0 : results.gan_report.prediction * 100,
-      !results.gan_report.prediction,
+      !results.gan_r50_mever_report.prediction
+        ? 0
+        : results.gan_r50_mever_report.prediction * 100,
+      !results.gan_r50_mever_report.prediction,
     );
 
     const proganScore = new SyntheticImageDetectionAlgorithmResult(