Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Assistant add Gauge UI to machine generated text #686

Open
wants to merge 8 commits into
base: beta-master
Choose a base branch
from
+161 −151
Open

Assistant add Gauge UI to machine generated text #686

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1a73104
adding gaudechartresult
rosannamilner Dec 9, 2024
87340e2
fixed arcLengths
rosannamilner Dec 9, 2024
91681c8
removed console.log
rosannamilner Dec 9, 2024
b5bb278
correct arclengths to arcsLength
rosannamilner Dec 10, 2024
3ab9f14
added new detectionType
rosannamilner Dec 10, 2024
f3f6965
added Grid2 to allow for align=start
rosannamilner Dec 10, 2024
a7be0a8
display minimal GaugeChartResults for machien generated text
rosannamilner Dec 17, 2024
51db8ed
Merge branch 'beta-master' into assistant/mgt-add-gauge-ui
rosannamilner Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 51 additions & 75 deletions src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx
View file
Open in desktop
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";

const renderEntityKeys = (entities, keyword) => {
// translate array into readable string
Expand Down Expand Up @@ -101,63 +102,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 @@ -198,6 +142,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 All @@ -219,22 +194,6 @@ const AssistantCredSignals = () => {
__html:
keyword("credibility_signals_tooltip") +
"<br><br><b>" +
// keyword("news_framing") +
// "</b><br>" +
// keyword("news_framing_tooltip") +
// "<br><br><b>" +
// keyword("news_genre") +
// "</b><br>" +
// keyword("news_genre_tooltip") +
// "<br><br><b>" +
// keyword("persuasion_techniques") +
// "</b><br>" +
// keyword("persuasion_techniques_tooltip") +
// "<br><br><b>" +
// keyword("subjectivity") +
// "</b><br>" +
// keyword("subjectivity_tooltip") +
// "<br><br><b>" +
keyword("previous_fact_checks_title") +
"</b><br>" +
keyword("previous_fact_checks_tooltip") +
Expand Down Expand Up @@ -399,7 +358,7 @@ const AssistantCredSignals = () => {
disabled={
machineGeneratedTextLoading ||
machineGeneratedTextFail ||
machineGeneratedTextDone ||
//machineGeneratedTextDone ||
!role.includes(ROLES.BETA_TESTER)
}
//disableGutters
Expand All @@ -408,7 +367,7 @@ const AssistantCredSignals = () => {
expandIcon={getExpandIcon(
machineGeneratedTextLoading,
machineGeneratedTextFail,
machineGeneratedTextDone,
null,
role,
)}
>
Expand Down Expand Up @@ -465,6 +424,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
Open in desktop
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
25 changes: 15 additions & 10 deletions src/components/Shared/GaugeChartResults/GaugeChartResult.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const GaugeChartResult = ({
scores,
methodNames,
detectionThresholds,
arcsLength,
resultsHaveErrors,
sanitizeDetectionPercentage,
gaugeExplanation,
Expand Down Expand Up @@ -144,16 +145,20 @@ const GaugeChartResult = ({
animate={false}
nrOfLevels={4}
textColor={"black"}
arcsLength={[
(100 - detectionThresholds.THRESHOLD_1) / 100,
(detectionThresholds.THRESHOLD_2 -
detectionThresholds.THRESHOLD_1) /
100,
(detectionThresholds.THRESHOLD_3 -
detectionThresholds.THRESHOLD_2) /
100,
(100 - detectionThresholds.THRESHOLD_3) / 100,
]}
arcsLength={
arcsLength
? arcsLength
: [
(100 - detectionThresholds.THRESHOLD_1) / 100,
(detectionThresholds.THRESHOLD_2 -
detectionThresholds.THRESHOLD_1) /
100,
(detectionThresholds.THRESHOLD_3 -
detectionThresholds.THRESHOLD_2) /
100,
(100 - detectionThresholds.THRESHOLD_3) / 100,
]
}
percent={scores ? maxScore / 100 : 0}
style={{
minWidth: "250px",
Expand Down
Loading