- {
-
+ classes={{ tooltip: classes.assistantTooltip }}
+ >
+
- {roleCategories.map((category, index) => {
+ {categoriesAllowedForUser.map((category, index) => {
const tools = category.value;
//if(tools.length !==0){
return (
@@ -276,7 +289,7 @@ const AllTools = (props) => {
handleClick(value.path, value.toolRestrictions)
}
>
- {
);
};
-export default AllTools;
+export default MainContentMenu;
diff --git a/src/components/NavItems/tools/Alltools/ToolCard.jsx b/src/components/NavItems/tools/Alltools/MainContentMenuItem.jsx
similarity index 92%
rename from src/components/NavItems/tools/Alltools/ToolCard.jsx
rename to src/components/NavItems/tools/Alltools/MainContentMenuItem.jsx
index 8eae8cd69..779570d1d 100644
--- a/src/components/NavItems/tools/Alltools/ToolCard.jsx
+++ b/src/components/NavItems/tools/Alltools/MainContentMenuItem.jsx
@@ -7,7 +7,7 @@ import AuthenticationIcon from "./AdvancedTools/AuthenticationIcon";
import ImprovedIcon from "../../../NavBar/images/SVG/Improved.svg";
import ScienceIcon from "@mui/icons-material/Science";
-export class ToolCard extends Component {
+export class MainContentMenuItem extends Component {
constructor(props) {
super(props);
this.state = {
@@ -24,10 +24,10 @@ export class ToolCard extends Component {
};
render() {
- var showNew = false;
- var showRedesign = false;
- var showLock = false;
- var showExperimental = false;
+ let showNew = false;
+ let showRedesign = false;
+ let showLock = false;
+ let showExperimental = false;
//console.log(this.props);
@@ -79,7 +79,7 @@ export class ToolCard extends Component {
- {this.props.name}
+ {this.props.name}
{showRedesign && (
@@ -125,4 +125,4 @@ export class ToolCard extends Component {
}
}
-export default ToolCard;
+export default MainContentMenuItem;
diff --git a/src/components/NavItems/tools/Deepfake/Hooks/useGetDeepfake.jsx b/src/components/NavItems/tools/Deepfake/Hooks/useGetDeepfake.jsx
index 0d3e15c05..1112ad592 100644
--- 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
index 773146a2e..715d2ba8e 100644
--- a/src/components/NavItems/tools/Deepfake/Results/DeepfakeResultsImage.jsx
+++ b/src/components/NavItems/tools/Deepfake/Results/DeepfakeResultsImage.jsx
@@ -7,8 +7,7 @@ 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";
@@ -16,8 +15,6 @@ 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,13 +40,16 @@ 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,
@@ -57,7 +57,7 @@ const DeepfakeResultsImage = (props) => {
} 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/Gif/AnimatedGif.jsx b/src/components/NavItems/tools/Gif/AnimatedGif.jsx
index 224b1faf5..f4a3d5986 100644
--- a/src/components/NavItems/tools/Gif/AnimatedGif.jsx
+++ b/src/components/NavItems/tools/Gif/AnimatedGif.jsx
@@ -265,7 +265,7 @@ const AnimatedGif = ({
{
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
index e0b11d1ff..cf581ede5 100644
--- 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/Loccus/index.jsx b/src/components/NavItems/tools/Loccus/index.jsx
index 65f8d66a2..310656ef0 100644
--- a/src/components/NavItems/tools/Loccus/index.jsx
+++ b/src/components/NavItems/tools/Loccus/index.jsx
@@ -47,6 +47,7 @@ const Loccus = () => {
);
const result = useSelector((state) => state.syntheticAudioDetection.result);
const url = useSelector((state) => state.syntheticAudioDetection.url);
+ const chunks = useSelector((state) => state.syntheticAudioDetection.chunks);
const authenticatedRequest = useAuthenticatedRequest();
const [input, setInput] = useState(url ? url : "");
const [audioFile, setAudioFile] = useState(AUDIO_FILE_DEFAULT_STATE);
@@ -159,10 +160,29 @@ const Loccus = () => {
return;
}
+ const config3 = {
+ method: "get",
+ maxBodyLength: Infinity,
+ ///verifications/authenticity
+ url:
+ process.env.REACT_APP_LOCCUS_URL +
+ `/detection/${res2.data.handle}/chunks?page-size=1000`,
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ data: data2,
+ timeout: 180000,
+ signal: AbortSignal.timeout(180000),
+ };
+
+ const res3 = await authenticatedRequest(config3);
+
dispatch(
setLoccusResult({
url: audioFile ? URL.createObjectURL(audioFile) : url,
result: res2.data,
+ chunks: res3.data,
}),
);
} catch (error) {
@@ -184,17 +204,27 @@ const Loccus = () => {
const preprocessLoccusUpload = async (file) => {
if (!(file instanceof File)) {
dispatch(setError(keyword("error_invalid_file")));
- return Error(keyword("error_invalid_file"));
+ return new Error(keyword("error_invalid_file"));
}
if (!file.type.includes("audio")) {
dispatch(setError(keyword("error_invalid_media_file")));
- return Error(keyword("error_invalid_media_file"));
+ return new Error(keyword("error_invalid_media_file"));
}
+ const isChromium = !!window.chrome;
+
// TODO: Use ffmpeg to convert the m4a files if possible
- if (file.type.includes("m4a")) {
+ if (
+ isChromium &&
+ (file.type.includes("m4a") ||
+ file.type.includes("basic") ||
+ file.type.includes("aiff"))
+ ) {
dispatch(setError(keyword("error_invalid_audio_file")));
+
+ handleClose();
+
return Error(keyword("error_invalid_audio_file"));
}
@@ -222,8 +252,16 @@ const Loccus = () => {
},
);
};
+ }).catch((error) => {
+ console.log(error);
+ dispatch(setError(keyword("loccus_error_unable_to_read_file")));
+ return Error(error);
});
+ if (!(audioBuffer instanceof AudioBuffer)) {
+ return audioBuffer;
+ }
+
const durationInSeconds = audioBuffer.duration;
if (durationInSeconds >= 300) {
@@ -324,7 +362,12 @@ const Loccus = () => {
);
diff --git a/src/components/NavItems/tools/Loccus/loccusResults.jsx b/src/components/NavItems/tools/Loccus/loccusResults.jsx
index 1c7f02ef1..90848c36a 100644
--- a/src/components/NavItems/tools/Loccus/loccusResults.jsx
+++ b/src/components/NavItems/tools/Loccus/loccusResults.jsx
@@ -10,9 +10,10 @@ import {
Grid,
IconButton,
Stack,
+ Tooltip,
Typography,
} from "@mui/material";
-import { Close, ExpandMore } from "@mui/icons-material";
+import { Close, Download, ExpandMore } from "@mui/icons-material";
import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
import { useSelector } from "react-redux";
import { useTrackEvent } from "Hooks/useAnalytics";
@@ -21,9 +22,33 @@ import GaugeChart from "react-gauge-chart";
import { useWavesurfer } from "@wavesurfer/react";
import CustomAlertScore from "../../../Shared/CustomAlertScore";
+import {
+ CategoryScale,
+ Chart as ChartJS,
+ Legend,
+ LinearScale,
+ LineController,
+ LineElement,
+ PointElement,
+ TimeSeriesScale,
+ Title,
+ Tooltip as ChartTooltip,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import "chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm";
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+import { exportReactElementAsJpg } from "../../../Shared/Utils/htmlUtils";
+import GaugeChartModalExplanation from "../../../Shared/GaugeChartModalExplanation";
+
const LoccusResults = (props) => {
+ dayjs.extend(duration);
+
const keyword = i18nLoadNamespace("components/NavItems/tools/Loccus");
+ const currentLang = useSelector((state) => state.language);
+ const isCurrentLanguageLeftToRight = currentLang !== "ar";
+
const role = useSelector((state) => state.userSession.user.roles);
const result = props.result;
@@ -32,6 +57,9 @@ const LoccusResults = (props) => {
const [voiceCloningScore, setVoiceCloningScore] = useState(null);
const [voiceRecordingScore, setVoiceRecordingScore] = useState(null);
+ const gaugeChartRef = useRef(null);
+ const chunksChartRef = useRef(null);
+
const DETECTION_TYPES = {
VOICE_CLONING: "synthetic",
VOICE_RECORDING: "replay",
@@ -42,6 +70,153 @@ const LoccusResults = (props) => {
THRESHOLD_3: 60,
};
+ /**
+ * Reformats a duration to prevent modulo operations done by dayjs when formatting duration values
+ * i.e. print 61 minutes instead of 1 hour 61 minutes
+ * @param duration {number} The duration in milliseconds
+ */
+ const printDurationInMinutesWithoutModulo = (duration) => {
+ const minutes = Math.floor(duration / 60000).toString();
+ const seconds = Math.floor((duration - minutes * 60000) / 1000).toString();
+
+ return `${minutes}m ${seconds}s`;
+ };
+
+ ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineController,
+ LineElement,
+ Title,
+ ChartTooltip,
+ Legend,
+ TimeSeriesScale,
+ );
+
+ const chartConfig = {
+ type: "line",
+ responsive: true,
+ maintainAspectRatio: false,
+
+ interaction: {
+ intersect: false,
+ axis: "x",
+ },
+
+ plugins: {
+ legend: {
+ position: "bottom",
+ display: false,
+ },
+ title: {
+ display: true,
+ text: keyword("loccus_chart_title"),
+ },
+ tooltip: {
+ callbacks: {
+ label: function (context) {
+ return context.formattedValue + "%";
+ },
+ title: function (context) {
+ return printDurationInMinutesWithoutModulo(context[0].parsed.x);
+ },
+ },
+ },
+ },
+ scales: {
+ x: {
+ type: "time",
+ time: {
+ unit: "second",
+ },
+
+ ticks: {
+ callback: function (val) {
+ return printDurationInMinutesWithoutModulo(val);
+ },
+ },
+ reverse: !isCurrentLanguageLeftToRight,
+ },
+ y: {
+ beginAtZero: true,
+ min: 0,
+ max: 100,
+ ticks: {
+ callback: function (value) {
+ return value + "%";
+ },
+ },
+ position: isCurrentLanguageLeftToRight ? "left" : "right",
+ },
+ },
+ };
+
+ let width, height, gradient;
+
+ /**
+ * Returns a CanvasGradient to stylize the chart with the given scale
+ * @param {CanvasRenderingContext2D} ctx
+ * @param chartArea
+ * @returns {CanvasGradient}
+ */
+ const getChartGradient = (ctx, chartArea) => {
+ const chartWidth = chartArea.right - chartArea.left;
+ const chartHeight = chartArea.bottom - chartArea.top;
+ if (!gradient || width !== chartWidth || height !== chartHeight) {
+ // Create the gradient because this is either the first render
+ // or the size of the chart has changed
+ width = chartWidth;
+ height = chartHeight;
+ gradient = ctx.createLinearGradient(
+ 0,
+ chartArea.bottom,
+ 0,
+ chartArea.top,
+ );
+ gradient.addColorStop(0, "#00FF00");
+ gradient.addColorStop(DETECTION_THRESHOLDS.THRESHOLD_1 / 100, "#82FF82");
+ gradient.addColorStop(DETECTION_THRESHOLDS.THRESHOLD_2 / 100, "#FFB800");
+ gradient.addColorStop(DETECTION_THRESHOLDS.THRESHOLD_3 / 100, "#FF0000");
+ }
+
+ return gradient;
+ };
+
+ const getChartDataFromChunks = (chunks) => {
+ let labels = [];
+ const datasetData = [];
+
+ for (const chunk of chunks) {
+ labels.push(dayjs.duration(chunk.startTime));
+ labels.push(dayjs.duration(chunk.endTime));
+
+ datasetData.push((1 - chunk.subscores.synthesis) * 100);
+ datasetData.push((1 - chunk.subscores.synthesis) * 100);
+ }
+
+ return {
+ labels: labels,
+ datasets: [
+ {
+ data: datasetData,
+ fill: false,
+ borderColor: (context) => {
+ const chart = context.chart;
+ const { ctx, chartArea } = chart;
+
+ // Initial chart load
+ if (!chartArea) return;
+
+ return getChartGradient(ctx, chartArea);
+ },
+ stepped: true,
+ tension: 0,
+ },
+ ],
+ };
+ };
+
useEffect(() => {
if (!result) {
return;
@@ -63,8 +238,13 @@ const LoccusResults = (props) => {
// TODO: Error handling
}
- setVoiceCloningScore((1 - result.subscores.synthesis) * 100);
- setVoiceRecordingScore((1 - result.subscores.replay) * 100);
+ const newVoiceCloningScore = (1 - result.subscores.synthesis) * 100;
+ if (voiceCloningScore !== newVoiceCloningScore)
+ setVoiceCloningScore(newVoiceCloningScore);
+
+ const newVoiceRecordingScore = (1 - result.subscores.replay) * 100;
+ if (voiceRecordingScore !== newVoiceRecordingScore)
+ setVoiceRecordingScore(newVoiceRecordingScore);
}, [result]);
const client_id = getclientId();
@@ -95,6 +275,14 @@ const LoccusResults = (props) => {
dragToSeek: true,
});
+ const keywords = [
+ "loccus_scale_modal_explanation_rating_1",
+ "loccus_scale_modal_explanation_rating_2",
+ "loccus_scale_modal_explanation_rating_3",
+ "loccus_scale_modal_explanation_rating_4",
+ ];
+ const colors = ["#00FF00", "#AAFF03", "#FFA903", "#FF0000"];
+
return (
-
+
{provideBy}
{linkLabel.constructor === Array && link.constructor === Array ? (
link.map((element, index) => {
@@ -125,4 +138,3 @@ const Footer = (props) => {
);
};
-export default Footer;
diff --git a/src/components/Shared/GaugeChartModalExplanation/index.jsx b/src/components/Shared/GaugeChartModalExplanation/index.jsx
new file mode 100644
index 000000000..8c0d7b013
--- /dev/null
+++ b/src/components/Shared/GaugeChartModalExplanation/index.jsx
@@ -0,0 +1,134 @@
+import React, { useState } from "react";
+import {
+ Backdrop,
+ Box,
+ Fade,
+ IconButton,
+ Link,
+ Modal,
+ Stack,
+ Typography,
+} from "@mui/material";
+import { Close, Square } from "@mui/icons-material";
+
+/**
+ *
+ * @param keyword The translation i18n function
+ * @param keywordsArr {Array