Merge pull request #568 from AFP-Medialab/ndd-enhancements

Ndd enhancements
AFP-Medialab · Aug 27, 2024 · 21a288e · 21a288e
2 parents f982c06 + daf6797
commit 21a288e
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 64 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "@reduxjs/toolkit": "^1.9.7",
     "@types/chrome": "^0.0.266",
     "@wavesurfer/react": "^1.0.4",
-    "axios": "^1.5.1",
+    "axios": "^1.7.3",
     "chart.js": "^4.4.3",
     "chartjs-adapter-dayjs-4": "^1.0.4",
     "clsx": "^2.1.1",

diff --git a/src/components/NavItems/tools/SyntheticImageDetection/syntheticImageDetectionResults.jsx b/src/components/NavItems/tools/SyntheticImageDetection/syntheticImageDetectionResults.jsx
@@ -389,27 +389,29 @@ const SyntheticImageDetectionResults = ({
                     maxWidth: "100%",
                   }}
                 >
-                  <img
-                    src={url}
-                    alt={"Displays the results of the deepfake topMenuItem"}
-                    style={{
-                      maxWidth: "100%",
-                      maxHeight: "60vh",
-                      borderRadius: "10px",
-                    }}
-                    crossOrigin={"anonymous"}
-                    ref={imgElement}
-                  />
-                  <List dense={true}>
-                    <ListItem>
-                      <ListItemText
-                        primary={keyword(
-                          "synthetic_image_detection_image_type",
-                        )}
-                        secondary={imageType}
-                      />
-                    </ListItem>
-                  </List>
+                  <Stack direction="column">
+                    <img
+                      src={url}
+                      alt={"Displays the results of the deepfake topMenuItem"}
+                      style={{
+                        maxWidth: "100%",
+                        maxHeight: "60vh",
+                        borderRadius: "10px",
+                      }}
+                      crossOrigin={"anonymous"}
+                      ref={imgElement}
+                    />
+                    <List dense={true}>
+                      <ListItem>
+                        <ListItemText
+                          primary={keyword(
+                            "synthetic_image_detection_image_type",
+                          )}
+                          secondary={imageType}
+                        />
+                      </ListItem>
+                    </List>
+                  </Stack>
                 </Grid>
               </Box>
             </Grid>
@@ -453,6 +455,19 @@ const SyntheticImageDetectionResults = ({
                         )}
                       </Typography>
                     )}
+
+                    {nd && nd.similar_media && nd.similar_media.length > 0 && (
+                      <Typography
+                        variant="h5"
+                        align="center"
+                        alignSelf="center"
+                        sx={{ color: "red" }}
+                      >
+                        {keyword(
+                          "synthetic_image_detection_generic_detection_text_ndd",
+                        )}
+                      </Typography>
+                    )}
                     <Stack
                       direction="column"
                       justifyContent="center"
@@ -569,9 +584,31 @@ const SyntheticImageDetectionResults = ({
               </Stack>
             )}
           </Grid>
-          <Grid item container xs={12}>
-            <Grid item p={4}>
-              <Box sx={{ width: "100%" }}>
+          <Grid item container xs={12} spacing={4}>
+            {nd && nd.similar_media && nd.similar_media.length > 0 && (
+              <Grid
+                item
+                sx={{
+                  width: "100%",
+                }}
+              >
+                <Box pl={4} pr={4}>
+                  <Accordion defaultExpanded onChange={handleNddDetailsChange}>
+                    <AccordionSummary expandIcon={<ExpandMore />}>
+                      <Typography>{keyword(nddDetailsPanelMessage)}</Typography>
+                    </AccordionSummary>
+                    <AccordionDetails>
+                      <Stack direction={"column"} spacing={4}>
+                        <NddDatagrid rows={getNddRows(nd.similar_media)} />
+                      </Stack>
+                    </AccordionDetails>
+                  </Accordion>
+                </Box>
+              </Grid>
+            )}
+
+            <Grid item sx={{ width: "100%" }}>
+              <Box pl={4} pr={4}>
                 <Accordion
                   defaultExpanded={false}
                   onChange={handleDetailsChange}
@@ -671,28 +708,6 @@ const SyntheticImageDetectionResults = ({
                 </Accordion>
               </Box>
             </Grid>
-
-            {nd && nd.similar_media && nd.similar_media.length > 0 && (
-              <Grid
-                item
-                p={4}
-                sx={{
-                  width: "100%",
-                  maxWidth: "100% !important",
-                }}
-              >
-                <Accordion defaultExpanded onChange={handleNddDetailsChange}>
-                  <AccordionSummary expandIcon={<ExpandMore />}>
-                    <Typography>{keyword(nddDetailsPanelMessage)}</Typography>
-                  </AccordionSummary>
-                  <AccordionDetails>
-                    <Stack direction={"column"} spacing={4}>
-                      <NddDatagrid rows={getNddRows(nd.similar_media)} />
-                    </Stack>
-                  </AccordionDetails>
-                </Accordion>
-              </Grid>
-            )}
           </Grid>
         </Grid>
       </CardContent>

diff --git a/src/components/Shared/ReverseSearch/utils/openTabUtils.jsx b/src/components/Shared/ReverseSearch/utils/openTabUtils.jsx
@@ -61,6 +61,6 @@ const openTabsSearch = (url) => {
 };
 
 function ns(url) {
-  let domain = new URL(url);
-  return domain.hostname.replace("www.", "");
+  if (!url || typeof url !== "string") return;
+  return new URL(url).hostname.replace("www.", "");
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -13,7 +13,6 @@ module.exports = {
     path: path.resolve(__dirname, "build"),
     filename: "[name].js",
     iife: false,
-
   },
   // optimization: {
   //   runtimeChunk: 'single',
@@ -25,8 +24,7 @@ module.exports = {
     rules: [
       {
         test: /\.(js|jsx)$/,
-        //include: path.resolve(__dirname, 'src'),
-        exclude: "/node/node_modules",
+        exclude: /node_modules/,
         use: {
           loader: "babel-loader",
           options: {
@@ -44,17 +42,11 @@ module.exports = {
       },
       {
         test: /\.css$/i,
-        //include: path.resolve(__dirname, 'src'),
-        exclude: "/node_modules/",
         use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
       {
         test: /\.(png|jpe?g|gif|tsv)$/i,
-        use: [
-          {
-            loader: "file-loader",
-          },
-        ],
+        type: "asset/resource",
       },
       {
         test: /\.svg$/i,
@@ -78,6 +70,11 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: "./src/popup.html",
       filename: "popup.html",
+      chunks: ["popup"],
+    }),
+    new HtmlWebpackPlugin({
+      filename: "background.html",
+      chunks: ["background"],
     }),
     new CopyPlugin({
       patterns: [{ from: "public" }],
@@ -92,4 +89,4 @@ module.exports = {
     extensions: [".js", ".jsx"],
     modules: ["node_modules", "src"],
   },
-};
+};