Merge pull request #582 from AFP-Medialab/516-581

581

src/Hooks/useInput.jsx

@@ -25,12 +25,11 @@ export const useLoading = (action) => {
 export const loadImageSize = (resultData, cols) => {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
-      let height = 0;
       let colsWidth = 1180 / cols;
       if (Array.isArray(resultData) && resultData.length) {
-        var img = new Image();
+        let img = new Image();
         img.src = resultData[0];
-        height = (colsWidth * img.height) / img.width;
+        const height = (colsWidth * img.height) / img.width;
         if (img.width !== 0 && img.height !== 0) {
           resolve(height);
         }

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

@@ -9,6 +9,7 @@ import {
 } from "../../../../../redux/actions/tools/deepfakeVideoActions";
 import { setError } from "redux/reducers/errorReducer";
 import { isValidUrl } from "../../../../Shared/Utils/URLUtils";
+import { ROLES } from "../../../../../constants/roles";
 
 async function UseGetDeepfake(
   keyword,
@@ -37,7 +38,7 @@ async function UseGetDeepfake(
     modeURL = "videos/";
     // services = "deepfake_video,ftcn,face_reenact";
     services = "deepfake_video";
-    if (role.includes("EXTRA_FEATURE")) services += ",ftcn";
+    if (role.includes(ROLES.EXTRA_FEATURE)) services += ",ftcn";
   }
 
   if (!modeURL) {

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

@@ -23,7 +23,8 @@ const DeepfakeResultsVideo = (props) => {
 
   class DeepfakeResult {
     constructor(methodName, predictionScore) {
-      (this.methodName = methodName), (this.predictionScore = predictionScore);
+      this.methodName = methodName;
+      this.predictionScore = predictionScore;
     }
   }
 
@@ -93,8 +94,8 @@ const DeepfakeResultsVideo = (props) => {
   );
 
   useEffect(() => {
-    var prediction = results.deepfake_video_report.prediction;
-    var shot = -1;
+    const prediction = results.deepfake_video_report.prediction;
+    let shot = -1;
 
     if (
       !results ||
@@ -158,9 +159,9 @@ const DeepfakeResultsVideo = (props) => {
       );
     }
 
-    setDeepfakeScores(res);
-
     res = res.sort((a, b) => b.predictionScore - a.predictionScore);
+
+    setDeepfakeScores(res);
   }, [results]);
 
   //console.log("Rectangles: ", rectangles);
@@ -325,7 +326,7 @@ const DeepfakeResultsVideo = (props) => {
                     {keyword("deepfake_no_face_detection")}
                   </Typography>
                 )}
-                {deepfakeScores && deepfakeScores.length != 0 && (
+                {deepfakeScores && deepfakeScores.length !== 0 && (
                   <GaugeChartResult
                     keyword={keyword}
                     scores={deepfakeScores}
@@ -447,7 +448,7 @@ const DeepfakeResultsVideo = (props) => {
                             boxShadow:
                               "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)",
                             maxHeight: "60vh",
-                            maxWidth: "60vw",
+                            maxWidth: "100%",
                           }}
                         >
                           <source

src/components/NavItems/tools/Forensic/Results/ForensicResult.jsx

@@ -37,6 +37,7 @@ import { DetectionProgressBar } from "components/Shared/DetectionProgressBar/Det
 import ImageCanvas from "../components/imageCanvas/imageCanvas";
 import Fade from "@mui/material/Fade";
 import CardMedia from "@mui/material/CardMedia";
+import { ROLES } from "../../../../../constants/roles";
 
 function TabPanel(props) {
   const { children, value, index, ...other } = props;
@@ -185,9 +186,10 @@ const ForensicResults = (props) => {
   };
 
   //SHOULD BE REWRITE
-  const filtersProp = role.includes("EXTRA_FEATURE")
-    ? extraFeaturesFilterProps
-    : defaultFilterProps;
+  const filtersProp =
+    role.includes(ROLES.EXTRA_FEATURE) || role.includes(ROLES.EVALUATION)
+      ? extraFeaturesFilterProps
+      : defaultFilterProps;
 
   const filters = useRef(
     filtersProp.filtersIDs.map((value) => {

src/components/NavItems/tools/Loccus/loccusResults.jsx

@@ -40,6 +40,7 @@ import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 import { exportReactElementAsJpg } from "../../../Shared/Utils/htmlUtils";
 import GaugeChartModalExplanation from "../../../Shared/GaugeChartResults/GaugeChartModalExplanation";
+import { ROLES } from "../../../../constants/roles";
 
 const LoccusResults = (props) => {
   dayjs.extend(duration);
@@ -436,7 +437,7 @@ const LoccusResults = (props) => {
                 </Typography>
               </Stack>
 
-              {role.includes("EXTRA_FEATURE") && (
+              {role.includes(ROLES.EXTRA_FEATURE) && (
                 <>
                   <Divider />
                   <Box pb={4} pr={4}>

src/components/NavItems/tools/SyntheticImageDetection/SyntheticImageDetectionAlgorithms.jsx

@@ -21,81 +21,81 @@ export class SyntheticImageDetectionAlgorithm {
    * @param apiServiceName {string} The service parameter for the API call
    * @param name {string} The algorithm name key
    * @param description {string} The algorithm description key
-   * @param roleNeeded {?Roles} Role needed to get the detection results for the algorithm
+   * @param rolesNeeded {?[Roles]} Role needed to get the detection results for the algorithm. If more than one role specified, either roles are authorized.
    */
-  constructor(apiServiceName, name, description, roleNeeded) {
+  constructor(apiServiceName, name, description, rolesNeeded) {
     this.apiServiceName = apiServiceName;
     this.name = name;
     this.description = description;
-    this.roleNeeded = roleNeeded;
+    this.rolesNeeded = rolesNeeded;
   }
 }
 
 export const ganR50Mever = new SyntheticImageDetectionAlgorithm(
   "gan_r50_mever",
   "synthetic_image_detection_gan_name",
   "synthetic_image_detection_gan_description",
-  ROLES.BETA_TESTER,
+  [ROLES.BETA_TESTER],
 );
 
 export const proGanR50Grip = new SyntheticImageDetectionAlgorithm(
   "progan_r50_grip",
   "synthetic_image_detection_progan_name",
   "synthetic_image_detection_progan_description",
-  ROLES.BETA_TESTER,
+  [ROLES.BETA_TESTER],
 );
 
 export const ldmR50Grip = new SyntheticImageDetectionAlgorithm(
   "ldm_r50_grip",
   "synthetic_image_detection_diffusion_name",
   "synthetic_image_detection_diffusion_description",
-  ROLES.BETA_TESTER,
+  [ROLES.BETA_TESTER],
 );
 
 export const proGanWebpR50Grip = new SyntheticImageDetectionAlgorithm(
   "progan-webp_r50_grip",
   "synthetic_image_detection_progan-webp_r50_grip_name",
   "synthetic_image_detection_progan-webp_r50_grip_description",
-  ROLES.EXTRA_FEATURE,
+  [ROLES.EVALUATION, ROLES.EXTRA_FEATURE],
 );
 
 export const ldmWebpR50Grip = new SyntheticImageDetectionAlgorithm(
   "ldm-webp_r50_grip",
   "synthetic_image_detection_ldm-webp_r50_grip_name",
   "synthetic_image_detection_ldm-webp_r50_grip_description",
-  ROLES.EXTRA_FEATURE,
+  [ROLES.EVALUATION, ROLES.EXTRA_FEATURE],
 );
 
 export const gigaGanWebpR50Grip = new SyntheticImageDetectionAlgorithm(
   "gigagan-webp_r50_grip",
   "synthetic_image_detection_gigagan-webp_r50_grip_name",
   "synthetic_image_detection_gigagan-webp_r50_grip_description",
-  ROLES.EXTRA_FEATURE,
+  [ROLES.EVALUATION, ROLES.EXTRA_FEATURE],
 );
 
 export const admR50Grip = new SyntheticImageDetectionAlgorithm(
   "adm_r50_grip",
   "synthetic_image_detection_adm_name",
   "synthetic_image_detection_adm_description",
-  ROLES.EXTRA_FEATURE,
+  [ROLES.EVALUATION, ROLES.EXTRA_FEATURE],
 );
 export const proGanRineMever = new SyntheticImageDetectionAlgorithm(
   "progan_rine_mever",
   "synthetic_image_detection_progan_rine_mever_name",
   "synthetic_image_detection_progan_rine_mever_description",
-  ROLES.EXTRA_FEATURE,
+  [ROLES.EVALUATION, ROLES.EXTRA_FEATURE],
 );
 export const ldmRineMever = new SyntheticImageDetectionAlgorithm(
   "ldm_rine_mever",
   "synthetic_image_detection_ldm_rine_mever_name",
   "synthetic_image_detection_ldm_rine_mever_description",
-  ROLES.EXTRA_FEATURE,
+  [ROLES.EVALUATION, ROLES.EXTRA_FEATURE],
 );
 export const ldmR50Mever = new SyntheticImageDetectionAlgorithm(
   "ldm_r50_mever",
   "synthetic_image_detection_ldm_r50_mever_name",
   "synthetic_image_detection_ldm_r50_mever_description",
-  ROLES.EXTRA_FEATURE,
+  [ROLES.EVALUATION, ROLES.EXTRA_FEATURE],
 );
 
 /**
@@ -116,14 +116,24 @@ export const syntheticImageDetectionAlgorithms = [
   ldmRineMever,
 ];
 
+/**
+ *
+ * @param roles {?Array<ROLES>}
+ * @param algorithm {SyntheticImageDetectionAlgorithm}
+ * @returns {*}
+ */
+export const canUserDisplayAlgorithmResults = (roles, algorithm) => {
+  return roles.some((role) => algorithm.rolesNeeded.includes(role));
+};
+
 /**
  * Returns a list of algorithms that can be used by a user according to their roles
  * @param roles {?Array<ROLES>}
  * @returns {SyntheticImageDetectionAlgorithm[]}
  */
 export const getSyntheticImageDetectionAlgorithmsForRoles = (roles) => {
   return syntheticImageDetectionAlgorithms.filter((algorithm) =>
-    roles.includes(algorithm.roleNeeded),
+    roles.some((role) => algorithm.rolesNeeded.includes(role)),
   );
 };
 

src/components/NavItems/tools/SyntheticImageDetection/index.jsx

@@ -13,9 +13,9 @@ import {
   Box,
   Card,
   CardHeader,
-  Grid2,
   FormControlLabel,
   FormGroup,
+  Grid2,
   LinearProgress,
   Stack,
   Switch,
@@ -413,21 +413,22 @@ const SyntheticImageDetection = () => {
               />
             </form>
 
-            {role.includes(ROLES.EXTRA_FEATURE) && (
-              <FormGroup>
-                <FormControlLabel
-                  control={
-                    <Switch
-                      checked={autoResizeLocalFile}
-                      onChange={toggleAutoResizeLocalFile}
-                      size="small"
-                      disabled={isLoading}
-                    />
-                  }
-                  label="Auto-Resize"
-                />
-              </FormGroup>
-            )}
+            {role.includes(ROLES.EXTRA_FEATURE) ||
+              (role.includes(ROLES.EVALUATION) && (
+                <FormGroup>
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        checked={autoResizeLocalFile}
+                        onChange={toggleAutoResizeLocalFile}
+                        size="small"
+                        disabled={isLoading}
+                      />
+                    }
+                    label="Auto-Resize"
+                  />
+                </FormGroup>
+              ))}
 
             {isLoading && (
               <Box mt={3}>

src/components/NavItems/tools/SyntheticImageDetection/syntheticImageDetectionResults.jsx

@@ -24,6 +24,7 @@ import Tooltip from "@mui/material/Tooltip";
 import { exportReactElementAsJpg } from "../../../Shared/Utils/htmlUtils";
 import NddDatagrid from "./NddDatagrid";
 import {
+  canUserDisplayAlgorithmResults,
   DETECTION_THRESHOLDS,
   getSyntheticImageDetectionAlgorithmFromApiName,
   gigaGanWebpR50Grip,
@@ -129,7 +130,7 @@ const SyntheticImageDetectionResults = ({
         syntheticImageDetectionAlgorithm.apiServiceName,
         syntheticImageDetectionAlgorithm.name,
         syntheticImageDetectionAlgorithm.description,
-        syntheticImageDetectionAlgorithm.roleNeeded,
+        syntheticImageDetectionAlgorithm.rolesNeeded,
       );
       this.predictionScore = predictionScore;
       this.isError = isError;
@@ -153,12 +154,7 @@ const SyntheticImageDetectionResults = ({
     let res = [];
 
     for (const algorithm of syntheticImageDetectionAlgorithms) {
-      if (
-        !role.includes(algorithm.roleNeeded) &&
-        algorithm.roleNeeded.length > 0
-      ) {
-        continue;
-      }
+      if (!canUserDisplayAlgorithmResults(role, algorithm)) continue;
 
       const algorithmReport = results[algorithm.apiServiceName + "_report"];
 
@@ -302,9 +298,7 @@ const SyntheticImageDetectionResults = ({
         );
 
         // Display iff the user has the permissions to see the content
-        if (d.roleNeeded && !role.includes(d.roleNeeded)) {
-          continue;
-        }
+        if (!canUserDisplayAlgorithmResults(role, d)) continue;
 
         if (
           imageType &&

src/components/Shared/Utils/fileUtils.jsx

@@ -3,6 +3,7 @@ import {
   MAX_IMAGE_FILE_SIZE,
   MAX_VIDEO_FILE_SIZE,
 } from "../../../config";
+import { ROLES } from "../../../constants/roles";
 
 export const FILE_TYPES = {
   image: "image",
@@ -22,7 +23,7 @@ export const isImageFileTooLarge = (imageFile, userRole) => {
   }
 
   return (
-    (!userRole || !userRole.includes("EXTRA_FEATURE")) &&
+    (!userRole || !userRole.includes(ROLES.EXTRA_FEATURE)) &&
     imageFile.size >= MAX_IMAGE_FILE_SIZE
   );
 };
@@ -39,7 +40,7 @@ export const isVideoFileTooLarge = (videoFile, userRole) => {
   }
 
   return (
-    (!userRole || !userRole.includes("EXTRA_FEATURE")) &&
+    (!userRole || !userRole.includes(ROLES.EXTRA_FEATURE)) &&
     videoFile.size >= MAX_VIDEO_FILE_SIZE
   );
 };
@@ -56,7 +57,7 @@ export const isAudioFileTooLarge = (audioFile, userRole) => {
   }
 
   return (
-    (!userRole || !userRole.includes("EXTRA_FEATURE")) &&
+    (!userRole || !userRole.includes(ROLES.EXTRA_FEATURE)) &&
     audioFile.size >= MAX_AUDIO_FILE_SIZE
   );
 };

src/constants/roles.jsx

@@ -7,5 +7,6 @@ export const ROLES = {
   ARCHIVE: "ARCHIVE",
   BETA_TESTER: "BETA_TESTER",
   LOCK: "lock",
+  EVALUATION: "EVALUATION",
   EXTRA_FEATURE: "EXTRA_FEATURE",
 };