From 0faa08fa123981f5289b8d1c940ab5dc1e42a3b5 Mon Sep 17 00:00:00 2001
From: Valentin Porcellini <valentin.porcellini@afp.com>
Date: Tue, 13 Aug 2024 10:30:30 +0200
Subject: [PATCH 1/2] Improved UI, added warning text for ndd, upgraded
 packages

---
 package-lock.json                             |   9 +-
 package.json                                  |   2 +-
 .../syntheticImageDetectionResults.jsx        | 107 ++++++++++--------
 3 files changed, 67 insertions(+), 51 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c8d930f5a..3e663fd55 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,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",
@@ -5012,9 +5012,10 @@
       "devOptional": true
     },
     "node_modules/axios": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
-      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz",
+      "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==",
+      "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
diff --git a/package.json b/package.json
index 1f65a0300..daf0b4084 100644
--- 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
index d83a5fb41..7088fa224 100644
--- 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>

From daf6797cd7aba92abecab6fc56b16ec1687694ec Mon Sep 17 00:00:00 2001
From: Valentin Porcellini <valentin.porcellini@afp.com>
Date: Tue, 13 Aug 2024 14:58:42 +0200
Subject: [PATCH 2/2] Improved webpack config and fixed error

---
 .../ReverseSearch/utils/openTabUtils.jsx      |  4 ++--
 webpack.config.js                             | 19 ++++++++-----------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/Shared/ReverseSearch/utils/openTabUtils.jsx b/src/components/Shared/ReverseSearch/utils/openTabUtils.jsx
index 95818403a..f7aec14f7 100644
--- 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
index d075f1bc7..9c79d429a 100644
--- 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"],
   },
-};
+};
\ No newline at end of file