Skip to content

Commit

Permalink
removed commented code and unused imports
Browse files Browse the repository at this point in the history
  • Loading branch information
@robfrks
robfrks committed Jul 16, 2024
1 parent 4949963 commit 6ee3b69
Show file tree
Hide file tree
Showing 4 changed files with 2 additions and 267 deletions.
8 changes: 1 addition & 7 deletions src/components/NavItems/tools/Deepfake/Results/DeepfakeResultsImage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,10 @@ import {
AccordionDetails,
} from "@mui/material";
import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
import { LinearProgressWithLabel } from "../../../../Shared/LinearProgressWithLabel/LinearProgressWithLabel";
import { Close, Download, ExpandMore, Help } from "@mui/icons-material";
import { Close } from "@mui/icons-material";
import { useSelector } from "react-redux";
import { DetectionProgressBar } from "components/Shared/DetectionProgressBar/DetectionProgressBar";
import { getclientId } from "components/Shared/GoogleAnalytics/MatomoAnalytics";
import { useTrackEvent } from "Hooks/useAnalytics";
import GaugeChart from "react-gauge-chart";
import GaugeChartModalExplanation from "components/Shared/GaugeChartResults/GaugeChartModalExplanation";
import { exportReactElementAsJpg } from "components/Shared/Utils/htmlUtils";
import CustomAlertScore from "components/Shared/CustomAlertScore";
import GaugeChartResult from "components/Shared/GaugeChartResults/GaugeChartResult";

const DeepfakeResultsImage = (props) => {
Expand Down
3 changes: 0 additions & 3 deletions src/components/NavItems/tools/Deepfake/Results/DeepfakeResultsVideo.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,6 @@ import {
} from "@mui/material";
import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
import CloseIcon from "@mui/icons-material/Close";
import Help from "@mui/icons-material/Help";
import { LinearProgressWithLabel } from "../../../../Shared/LinearProgressWithLabel/LinearProgressWithLabel";
import { DetectionProgressBar } from "components/Shared/DetectionProgressBar/DetectionProgressBar";
import { getclientId } from "components/Shared/GoogleAnalytics/MatomoAnalytics";
import { useSelector } from "react-redux";
import { useTrackEvent } from "Hooks/useAnalytics";
Expand Down
245 changes: 1 addition & 244 deletions src/components/NavItems/tools/SyntheticImageDetection/syntheticImageDetectionResults.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,18 @@
import React, { useEffect, useRef, useState } from "react";
import {
Accordion,
AccordionDetails,
AccordionSummary,
Alert,
Box,
Card,
CardHeader,
Chip,
Divider,
Grid,
IconButton,
Stack,
Typography,
} from "@mui/material";
import { Close, Download, ExpandMore } from "@mui/icons-material";
import { Close } from "@mui/icons-material";
import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
import { useSelector } from "react-redux";
import { useTrackEvent } from "Hooks/useAnalytics";
import { getclientId } from "components/Shared/GoogleAnalytics/MatomoAnalytics";
import CustomAlertScore from "../../../Shared/CustomAlertScore";
import GaugeChart from "react-gauge-chart";
import Tooltip from "@mui/material/Tooltip";
import { exportReactElementAsJpg } from "../../../Shared/Utils/htmlUtils";
import GaugeChartModalExplanation from "../../../Shared/GaugeChartResults/GaugeChartModalExplanation";
import GaugeChartResult from "components/Shared/GaugeChartResults/GaugeChartResult";

const SyntheticImageDetectionResults = (props) => {
Expand Down Expand Up @@ -313,238 +302,6 @@ const SyntheticImageDetectionResults = (props) => {
</Grid>
<Grid item sm={12} md={6}>
{syntheticImageScores.length > 0 ? (
/* <Stack
direction="column"
p={4}
justifyContent="flex-start"
alignItems="flex-start"
spacing={4}
width="100%"
sx={{ boxSizing: "border-box" }}
position="relative"
>
<Stack
direction={{ sm: "column", md: "row" }}
alignItems={{ sm: "start", md: "center" }}
justifyContent="center"
width="100%"
>
<Box m={2}></Box>
<Stack
direction="column"
justifyContent="center"
alignItems="center"
spacing={2}
ref={gaugeChartRef}
p={2}
>
{maxScore > DETECTION_THRESHOLDS.THRESHOLD_2 && (
<Typography
variant="h5"
align="center"
alignSelf="center"
sx={{ color: "red" }}
>
{keyword(
"synthetic_image_detection_generic_detection_text",
)}
</Typography>
)}
<Stack
direction="column"
justifyContent="center"
alignItems="center"
>
<GaugeChart
id={"gauge-chart"}
animate={false}
nrOfLevels={4}
textColor={"black"}
arcsLength={[
(100 - DETECTION_THRESHOLDS.THRESHOLD_1) / 100,
(DETECTION_THRESHOLDS.THRESHOLD_2 -
DETECTION_THRESHOLDS.THRESHOLD_1) /
100,
(DETECTION_THRESHOLDS.THRESHOLD_3 -
DETECTION_THRESHOLDS.THRESHOLD_2) /
100,
(100 - DETECTION_THRESHOLDS.THRESHOLD_3) / 100,
]}
percent={syntheticImageScores ? maxScore / 100 : 0}
style={{
minWidth: "250px",
width: "50%",
maxWidth: "500px",
}}
/>
<Stack
direction="row"
justifyContent="center"
alignItems="center"
spacing={10}
>
<Typography variant="subtitle2">
{keyword(
"synthetic_image_detection_gauge_no_detection",
)}
</Typography>
<Typography variant="subtitle2">
{keyword("synthetic_image_detection_gauge_detection")}
</Typography>
</Stack>
</Stack>
</Stack>
<Box alignSelf={{ sm: "flex-start", md: "flex-end" }}>
<Tooltip
title={keyword(
"synthetic_image_detection_download_gauge_button",
)}
>
<IconButton
color="primary"
aria-label="download chart"
onClick={async () =>
await exportReactElementAsJpg(
gaugeChartRef,
"gauge_chart",
)
}
>
<Download />
</IconButton>
</Tooltip>
</Box>
</Stack>
<GaugeChartModalExplanation
keyword={keyword}
keywordsArr={keywords}
keywordLink={
"synthetic_image_detection_scale_explanation_link"
}
keywordModalTitle={
"synthetic_image_detection_scale_modal_explanation_title"
}
colors={colors}
/>
<CustomAlertScore
score={syntheticImageScores ? maxScore : 0}
detectionType={undefined}
toolName={"SyntheticImageDetection"}
thresholds={DETECTION_THRESHOLDS}
/>
{resultsHaveErrors && (
<Alert severity="error">
{keyword("synthetic_image_detection_algorithms_errors")}
</Alert>
)}
<Box sx={{ width: "100%" }}>
<Accordion defaultExpanded onChange={handleDetailsChange}>
<AccordionSummary expandIcon={<ExpandMore />}>
<Typography>{keyword(detailsPanelMessage)}</Typography>
</AccordionSummary>
<AccordionDetails>
<Stack direction={"column"} spacing={4}>
{syntheticImageScores.map((item, key) => {
let predictionScore;
if (item.predictionScore) {
predictionScore = sanitizeDetectionPercentage(
item.predictionScore,
);
}
return (
<Stack direction="column" spacing={4} key={key}>
<Stack direction="column" spacing={2}>
<Stack
direction="row"
alignItems="flex-start"
justifyContent="space-between"
>
<Box>
<Typography
variant={"h6"}
sx={{ fontWeight: "bold" }}
>
{
DeepfakeImageDetectionMethodNames[
item.methodName
].name
}
</Typography>
<Stack
direction={{ lg: "row", md: "column" }}
spacing={2}
alignItems="center"
>
<Stack direction="row" spacing={1}>
{item.isError ? (
<Alert severity="error">
{keyword(
"synthetic_image_detection_error_generic",
)}
</Alert>
) : (
<>
<Typography>
{keyword(
"synthetic_image_detection_probability_text",
)}{" "}
</Typography>
<Typography
sx={{
color:
getPercentageColorCode(
predictionScore,
),
}}
>
{predictionScore}%
</Typography>
</>
)}
</Stack>
{!item.isError && (
<Chip
label={getAlertLabel(predictionScore)}
color={getAlertColor(predictionScore)}
/>
)}
</Stack>
</Box>
<Stack>
// removed troublesome comment
</Stack>
</Stack>
<Box
p={2}
sx={{ backgroundColor: "#FAFAFA" }}
mb={2}
>
<Typography>
{
DeepfakeImageDetectionMethodNames[
item.methodName
].description
}
</Typography>
</Box>
</Stack>
{syntheticImageScores.length > key + 1 && (
<Divider />
)}
</Stack>
);
})}
</Stack>
</AccordionDetails>
</Accordion>
</Box>
</Stack> */
<GaugeChartResult
keyword={keyword}
scores={syntheticImageScores}
Expand Down
13 changes: 0 additions & 13 deletions src/components/Shared/GaugeChartResults/GaugeChartResult.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,19 +276,6 @@ const GaugeChartResult = ({
)}
</Stack>
</Box>
<Stack>
{/*<Button*/}
{/* href={*/}
{/* DeepfakeImageDetectionMethodNames[*/}
{/* item.methodName*/}
{/* ].modelCardUrl*/}
{/* }*/}
{/*>*/}
{/* {keyword(*/}
{/* "synthetic_image_detection_model_card",*/}
{/* )}*/}
{/*</Button>*/}
</Stack>
</Stack>

<Box p={2} sx={{ backgroundColor: "#FAFAFA" }} mb={2}>
Expand Down

0 comments on commit 6ee3b69

Please sign in to comment.