Skip to content

Commit

Permalink
Merge pull request #686 from AFP-Medialab/assistant/mgt-add-gauge-ui
Browse files Browse the repository at this point in the history 
Assistant add Gauge UI to machine generated text
  • Loading branch information
@Sallaa
Sallaa authored Jan 16, 2025
2 parents 88270e9 + 51db8ed commit 1147c50
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 151 deletions.
110 changes: 51 additions & 59 deletions src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace
import useMyStyles from "../../../Shared/MaterialUiStyles/useMyStyles";
import { getLanguageName } from "../../../Shared/Utils/languageUtils";
import TextFooter, { TextFooterPrevFactChecks } from "./TextFooter.jsx";
import GaugeChartResult from "components/Shared/GaugeChartResults/GaugeChartResult.jsx";
import {
TransCredibilitySignalsLink,
TransHtmlDoubleLinkBreak,
Expand Down Expand Up @@ -107,63 +108,6 @@ const AssistantCredSignals = () => {
},
}));

// assistant media states
const text = useSelector((state) => state.assistant.urlText);
const textLang = useSelector((state) => state.assistant.textLang);
const textHtmlMap = useSelector((state) => state.assistant.urlTextHtmlMap);

// news framing (topic)
const newsFramingTitle = keyword("news_framing_title");
const newsFramingResult = useSelector(
(state) => state.assistant.newsFramingResult,
);
const newsFramingLoading = useSelector(
(state) => state.assistant.newsFramingLoading,
);
const newsFramingDone = useSelector(
(state) => state.assistant.newsFramingDone,
);
const newsFramingFail = useSelector(
(state) => state.assistant.newsFramingFail,
);

// news genre
const newsGenreTitle = keyword("news_genre_title");
const newsGenreResult = useSelector(
(state) => state.assistant.newsGenreResult,
);
const newsGenreLoading = useSelector(
(state) => state.assistant.newsGenreLoading,
);
const newsGenreDone = useSelector((state) => state.assistant.newsGenreDone);
const newsGenreFail = useSelector((state) => state.assistant.newsGenreFail);

// persuasion techniques
const persuasionTitle = keyword("persuasion_techniques_title");
const persuasionResult = useSelector(
(state) => state.assistant.persuasionResult,
);
const persuasionLoading = useSelector(
(state) => state.assistant.persuasionLoading,
);
const persuasionDone = useSelector((state) => state.assistant.persuasionDone);
const persuasionFail = useSelector((state) => state.assistant.persuasionFail);

// subjectivity
const subjectivityTitle = keyword("subjectivity_title");
const subjectivityResult = useSelector(
(state) => state.assistant.subjectivityResult,
);
const subjectivityLoading = useSelector(
(state) => state.assistant.subjectivityLoading,
);
const subjectivityDone = useSelector(
(state) => state.assistant.subjectivityDone,
);
const subjectivityFail = useSelector(
(state) => state.assistant.subjectivityFail,
);

// previous fact checks
const prevFactChecksTitle = keyword("previous_fact_checks_title");
const prevFactChecksResult = useSelector(
Expand Down Expand Up @@ -204,6 +148,37 @@ const AssistantCredSignals = () => {
(state) => state.assistant.machineGeneratedTextFail,
);

const DETECTION_THRESHOLDS = {
THRESHOLD_1: 5.0,
THRESHOLD_2: 50.0,
THRESHOLD_3: 95.0,
};

const arcsLength = [0.05, 0.45, 0.45, 0.05];

const keywords = [
"gauge_scale_modal_explanation_rating_1",
"gauge_scale_modal_explanation_rating_2",
"gauge_scale_modal_explanation_rating_3",
"gauge_scale_modal_explanation_rating_4",
];
const colors = ["#00FF00", "#AAFF03", "#FFA903", "#FF0000"];

// methodName = "machinegeneratedtext"
const MachineGeneratedTextMethodNames = {
machinegeneratedtext: {
name: keyword("machine_generated_text_title"),
description: keyword("machine_generated_text_tooltip"),
},
};

const MachineGeneratedTextMethodNamesResults = {
methodName: "machinegeneratedtext",
predictionScore: machineGeneratedTextResult
? machineGeneratedTextResult.score * 100.0
: null,
};

return (
<Card>
<CardHeader
Expand Down Expand Up @@ -409,7 +384,7 @@ const AssistantCredSignals = () => {
disabled={
machineGeneratedTextLoading ||
machineGeneratedTextFail ||
machineGeneratedTextDone ||
//machineGeneratedTextDone ||
!role.includes(ROLES.BETA_TESTER)
}
//disableGutters
Expand All @@ -418,7 +393,7 @@ const AssistantCredSignals = () => {
expandIcon={getExpandIcon(
machineGeneratedTextLoading,
machineGeneratedTextFail,
machineGeneratedTextDone,
null,
role,
)}
>
Expand Down Expand Up @@ -475,6 +450,23 @@ const AssistantCredSignals = () => {
</Grid2>
</Grid2>
</AccordionSummary>

<AccordionDetails>
{machineGeneratedTextResult ? (
<GaugeChartResult
keyword={keyword}
scores={[MachineGeneratedTextMethodNamesResults]}
methodNames={MachineGeneratedTextMethodNames}
detectionThresholds={DETECTION_THRESHOLDS}
arcsLength={arcsLength}
resultsHaveErrors={false}
sanitizeDetectionPercentage={(n) => Math.round(n)}
gaugeExplanation={{ colors: colors, keywords: keywords }}
toolName="Assistant" // this points to the correct translatons .tsv file
detectionType={"machine_generated_text"}
/>
) : null}
</AccordionDetails>
</StyledAccordion>
</CardContent>
</Card>
Expand Down
23 changes: 17 additions & 6 deletions src/components/Shared/CustomAlertScore/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import { Alert } from "@mui/material";
import { Alert, Grid2 } from "@mui/material";
import CopyButton from "../CopyButton";
import { i18nLoadNamespace } from "../Languages/i18nLoadNamespace";
import Typography from "@mui/material/Typography";
Expand Down Expand Up @@ -33,6 +33,7 @@ const CustomAlertScore = ({
VOICE_RECORDING: "replay",
IMAGE: "image",
VIDEO: "video",
MACHINE_GENERATED_TEXT: "machine_generated_text",
};

const toolNameSnakeCase = toolName
Expand Down Expand Up @@ -65,6 +66,8 @@ const CustomAlertScore = ({
return "_image";
} else if (detectionType === DETECTION_TYPES.VIDEO) {
return "_video";
} else if (detectionType === DETECTION_TYPES.MACHINE_GENERATED_TEXT) {
return "_machine_generated_text";
} else return "";
}
};
Expand All @@ -82,31 +85,35 @@ const CustomAlertScore = ({
!detectionType ||
detectionType === DETECTION_TYPES.VOICE_CLONING ||
detectionType === DETECTION_TYPES.VIDEO ||
detectionType === DETECTION_TYPES.IMAGE
detectionType === DETECTION_TYPES.IMAGE ||
detectionType === DETECTION_TYPES.MACHINE_GENERATED_TEXT
? keyword(`${toolNameSnakeCase}${detectionTranslation}_rating_4`)
: keyword(`loccus_voice_recording_detection_rating_4`);
} else if (score >= DETECTION_THRESHOLD_2) {
displayText +=
!detectionType ||
detectionType === DETECTION_TYPES.VOICE_CLONING ||
detectionType === DETECTION_TYPES.VIDEO ||
detectionType === DETECTION_TYPES.IMAGE
detectionType === DETECTION_TYPES.IMAGE ||
detectionType === DETECTION_TYPES.MACHINE_GENERATED_TEXT
? keyword(`${toolNameSnakeCase}${detectionTranslation}_rating_3`)
: keyword(`loccus_voice_recording_detection_rating_3`);
} else if (score >= DETECTION_THRESHOLD_1) {
displayText +=
!detectionType ||
detectionType === DETECTION_TYPES.VOICE_CLONING ||
detectionType === DETECTION_TYPES.VIDEO ||
detectionType === DETECTION_TYPES.IMAGE
detectionType === DETECTION_TYPES.IMAGE ||
detectionType === DETECTION_TYPES.MACHINE_GENERATED_TEXT
? keyword(`${toolNameSnakeCase}${detectionTranslation}_rating_2`)
: keyword(`loccus_voice_recording_detection_rating_2`);
} else {
displayText +=
!detectionType ||
detectionType === DETECTION_TYPES.VOICE_CLONING ||
detectionType === DETECTION_TYPES.VIDEO ||
detectionType === DETECTION_TYPES.IMAGE
detectionType === DETECTION_TYPES.IMAGE ||
detectionType === DETECTION_TYPES.MACHINE_GENERATED_TEXT
? keyword(`${toolNameSnakeCase}${detectionTranslation}_rating_1`)
: keyword(`loccus_voice_recording_detection_rating_1`);
}
Expand All @@ -133,7 +140,11 @@ const CustomAlertScore = ({
/>
}
>
<Typography variant="body1">{alertSettings.displayText}</Typography>
<Grid2 container>
<Grid2 size={{ xs: 12 }} align="start">
<Typography variant="body1">{alertSettings.displayText}</Typography>
</Grid2>
</Grid2>
</Alert>
);
};
Expand Down
Loading

0 comments on commit 1147c50

Please sign in to comment.