From 1a731043c6ebe6e35565e7a812c70857b56c576c Mon Sep 17 00:00:00 2001 From: Rosanna Milner Date: Mon, 9 Dec 2024 15:09:58 +0000 Subject: [PATCH 1/7] adding gaudechartresult --- .../AssistantCredibilitySignals.jsx | 48 ++++++++++++++++++- .../GaugeChartResults/GaugeChartResult.jsx | 6 +++ 2 files changed, 53 insertions(+), 1 deletion(-) diff --git a/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx b/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx index 6c4126987..2eee62bd5 100644 --- a/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx +++ b/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx @@ -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 @@ -198,6 +199,35 @@ const AssistantCredSignals = () => { (state) => state.assistant.machineGeneratedTextFail, ); + const DETECTION_THRESHOLDS = { + THRESHOLD_1: 5.0, + THRESHOLD_2: 50.0, + THRESHOLD_3: 95.0, + }; + + 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"]; + + //const 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 + : null, + }; + return ( { disabled={ machineGeneratedTextLoading || machineGeneratedTextFail || - machineGeneratedTextDone || + //machineGeneratedTextDone || !role.includes(ROLES.BETA_TESTER) } //disableGutters @@ -465,6 +495,22 @@ const AssistantCredSignals = () => { + + + {machineGeneratedTextResult ? ( + Math.round(n * 100.0)} + gaugeExplanation={{ colors: colors, keywords: keywords }} + toolName={keyword("machine_generated_text_title")} + detectionType={"text"} + /> + ) : null} + diff --git a/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx b/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx index 0db093522..6dbf1eb86 100644 --- a/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx +++ b/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx @@ -217,6 +217,9 @@ const GaugeChartResult = ({ {scores.map((item, key) => { + { + console.log(scores); + } let predictionScore; if (item.predictionScore) { @@ -238,6 +241,9 @@ const GaugeChartResult = ({ variant={"h6"} sx={{ fontWeight: "bold" }} > + {console.log(methodNames)} + {console.log(item)} + {console.log(item.methodName)} {methodNames[item.methodName].name} Date: Mon, 9 Dec 2024 15:54:57 +0000 Subject: [PATCH 2/7] fixed arcLengths --- .../AssistantCredibilitySignals.jsx | 9 ++++--- .../GaugeChartResults/GaugeChartResult.jsx | 25 +++++++++++-------- 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx b/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx index 2eee62bd5..06bd2c521 100644 --- a/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx +++ b/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx @@ -205,6 +205,8 @@ const AssistantCredSignals = () => { THRESHOLD_3: 95.0, }; + const arcLengths = [0.05, 0.45, 0.45, 0.05]; + const keywords = [ "gauge_scale_modal_explanation_rating_1", "gauge_scale_modal_explanation_rating_2", @@ -224,7 +226,7 @@ const AssistantCredSignals = () => { const MachineGeneratedTextMethodNamesResults = { methodName: "machinegeneratedtext", predictionScore: machineGeneratedTextResult - ? machineGeneratedTextResult.score + ? machineGeneratedTextResult.score * 100.0 : null, }; @@ -438,7 +440,7 @@ const AssistantCredSignals = () => { expandIcon={getExpandIcon( machineGeneratedTextLoading, machineGeneratedTextFail, - machineGeneratedTextDone, + null, role, )} > @@ -503,8 +505,9 @@ const AssistantCredSignals = () => { scores={[MachineGeneratedTextMethodNamesResults]} methodNames={MachineGeneratedTextMethodNames} detectionThresholds={DETECTION_THRESHOLDS} + arcLengths={arcLengths} resultsHaveErrors={false} - sanitizeDetectionPercentage={(n) => Math.round(n * 100.0)} + sanitizeDetectionPercentage={(n) => Math.round(n)} gaugeExplanation={{ colors: colors, keywords: keywords }} toolName={keyword("machine_generated_text_title")} detectionType={"text"} diff --git a/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx b/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx index 6dbf1eb86..da55e97ba 100644 --- a/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx +++ b/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx @@ -38,6 +38,7 @@ const GaugeChartResult = ({ scores, methodNames, detectionThresholds, + arcLengths, resultsHaveErrors, sanitizeDetectionPercentage, gaugeExplanation, @@ -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={ + arcLengths + ? arcLengths + : [ + (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", From 91681c8f3bd27d452e2ca948b42cf499b03122e1 Mon Sep 17 00:00:00 2001 From: Rosanna Milner Date: Mon, 9 Dec 2024 15:56:26 +0000 Subject: [PATCH 3/7] removed console.log --- .../Shared/GaugeChartResults/GaugeChartResult.jsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx b/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx index da55e97ba..179208433 100644 --- a/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx +++ b/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx @@ -222,9 +222,6 @@ const GaugeChartResult = ({ {scores.map((item, key) => { - { - console.log(scores); - } let predictionScore; if (item.predictionScore) { @@ -245,12 +242,7 @@ const GaugeChartResult = ({ - {console.log(methodNames)} - {console.log(item)} - {console.log(item.methodName)} - {methodNames[item.methodName].name} - + > Date: Tue, 10 Dec 2024 09:17:48 +0000 Subject: [PATCH 4/7] correct arclengths to arcsLength --- .../AssistantScrapeResults/AssistantCredibilitySignals.jsx | 4 ++-- .../Shared/GaugeChartResults/GaugeChartResult.jsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx b/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx index 06bd2c521..d1107258b 100644 --- a/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx +++ b/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx @@ -205,7 +205,7 @@ const AssistantCredSignals = () => { THRESHOLD_3: 95.0, }; - const arcLengths = [0.05, 0.45, 0.45, 0.05]; + const arcsLength = [0.05, 0.45, 0.45, 0.05]; const keywords = [ "gauge_scale_modal_explanation_rating_1", @@ -505,7 +505,7 @@ const AssistantCredSignals = () => { scores={[MachineGeneratedTextMethodNamesResults]} methodNames={MachineGeneratedTextMethodNames} detectionThresholds={DETECTION_THRESHOLDS} - arcLengths={arcLengths} + arcsLength={arcsLength} resultsHaveErrors={false} sanitizeDetectionPercentage={(n) => Math.round(n)} gaugeExplanation={{ colors: colors, keywords: keywords }} diff --git a/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx b/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx index 179208433..d4b55cd9f 100644 --- a/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx +++ b/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx @@ -38,7 +38,7 @@ const GaugeChartResult = ({ scores, methodNames, detectionThresholds, - arcLengths, + arcsLength, resultsHaveErrors, sanitizeDetectionPercentage, gaugeExplanation, @@ -146,8 +146,8 @@ const GaugeChartResult = ({ nrOfLevels={4} textColor={"black"} arcsLength={ - arcLengths - ? arcLengths + arcsLength + ? arcsLength : [ (100 - detectionThresholds.THRESHOLD_1) / 100, (detectionThresholds.THRESHOLD_2 - From 3ab9f141f9b6d5d434a34f6e285abb5d792904be Mon Sep 17 00:00:00 2001 From: Rosanna Milner Date: Tue, 10 Dec 2024 15:45:43 +0000 Subject: [PATCH 5/7] added new detectionType --- .../AssistantCredibilitySignals.jsx | 79 +------------------ .../Shared/CustomAlertScore/index.jsx | 19 +++-- .../GaugeChartResults/GaugeChartResult.jsx | 4 +- 3 files changed, 20 insertions(+), 82 deletions(-) diff --git a/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx b/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx index d1107258b..13144ca9c 100644 --- a/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx +++ b/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCredibilitySignals.jsx @@ -102,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( @@ -215,7 +158,7 @@ const AssistantCredSignals = () => { ]; const colors = ["#00FF00", "#AAFF03", "#FFA903", "#FF0000"]; - //const methodName = "machinegeneratedtext"; + // methodName = "machinegeneratedtext" const MachineGeneratedTextMethodNames = { machinegeneratedtext: { name: keyword("machine_generated_text_title"), @@ -251,22 +194,6 @@ const AssistantCredSignals = () => { __html: keyword("credibility_signals_tooltip") + "

" + - // keyword("news_framing") + - // "
" + - // keyword("news_framing_tooltip") + - // "

" + - // keyword("news_genre") + - // "
" + - // keyword("news_genre_tooltip") + - // "

" + - // keyword("persuasion_techniques") + - // "
" + - // keyword("persuasion_techniques_tooltip") + - // "

" + - // keyword("subjectivity") + - // "
" + - // keyword("subjectivity_tooltip") + - // "

" + keyword("previous_fact_checks_title") + "
" + keyword("previous_fact_checks_tooltip") + @@ -509,8 +436,8 @@ const AssistantCredSignals = () => { resultsHaveErrors={false} sanitizeDetectionPercentage={(n) => Math.round(n)} gaugeExplanation={{ colors: colors, keywords: keywords }} - toolName={keyword("machine_generated_text_title")} - detectionType={"text"} + toolName="Assistant" // this points to the correct translatons .tsv file + detectionType={"machine_generated_text"} /> ) : null} diff --git a/src/components/Shared/CustomAlertScore/index.jsx b/src/components/Shared/CustomAlertScore/index.jsx index 3716e0904..07e2a89d4 100644 --- a/src/components/Shared/CustomAlertScore/index.jsx +++ b/src/components/Shared/CustomAlertScore/index.jsx @@ -33,6 +33,7 @@ const CustomAlertScore = ({ VOICE_RECORDING: "replay", IMAGE: "image", VIDEO: "video", + MACHINE_GENERATED_TEXT: "machine_generated_text", }; const toolNameSnakeCase = toolName @@ -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 ""; } }; @@ -82,7 +85,8 @@ 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) { @@ -90,7 +94,8 @@ 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_3`) : keyword(`loccus_voice_recording_detection_rating_3`); } else if (score >= DETECTION_THRESHOLD_1) { @@ -98,7 +103,8 @@ 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_2`) : keyword(`loccus_voice_recording_detection_rating_2`); } else { @@ -106,7 +112,8 @@ 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_1`) : keyword(`loccus_voice_recording_detection_rating_1`); } @@ -133,7 +140,9 @@ const CustomAlertScore = ({ /> } > - {alertSettings.displayText} + + {alertSettings.displayText} + ); }; diff --git a/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx b/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx index d4b55cd9f..080392efa 100644 --- a/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx +++ b/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx @@ -242,7 +242,9 @@ const GaugeChartResult = ({ + > + {methodNames[item.methodName].name} + Date: Tue, 10 Dec 2024 15:57:50 +0000 Subject: [PATCH 6/7] added Grid2 to allow for align=start --- src/components/Shared/CustomAlertScore/index.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/Shared/CustomAlertScore/index.jsx b/src/components/Shared/CustomAlertScore/index.jsx index 07e2a89d4..b0e949f92 100644 --- a/src/components/Shared/CustomAlertScore/index.jsx +++ b/src/components/Shared/CustomAlertScore/index.jsx @@ -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"; @@ -140,9 +140,11 @@ const CustomAlertScore = ({ /> } > - - {alertSettings.displayText} - + + + {alertSettings.displayText} + + ); }; From a7be0a8ebdbefab95e035c4c85c8762073686194 Mon Sep 17 00:00:00 2001 From: Rosanna Milner Date: Tue, 17 Dec 2024 09:02:45 +0000 Subject: [PATCH 7/7] display minimal GaugeChartResults for machien generated text --- .../GaugeChartResults/GaugeChartResult.jsx | 154 +++++++++--------- 1 file changed, 78 insertions(+), 76 deletions(-) diff --git a/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx b/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx index 080392efa..5e1814be2 100644 --- a/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx +++ b/src/components/Shared/GaugeChartResults/GaugeChartResult.jsx @@ -214,89 +214,91 @@ const GaugeChartResult = ({ {resultsHaveErrors && ( {keyword("gauge_algorithms_errors")} )} - - - }> - {keyword(detailsPanelMessage)} - - - - {scores.map((item, key) => { - let predictionScore; + {detectionType != "machine_generated_text" ? ( + + + }> + {keyword(detailsPanelMessage)} + + + + {scores.map((item, key) => { + let predictionScore; - if (item.predictionScore) { - predictionScore = sanitizeDetectionPercentage( - item.predictionScore, - ); - } + if (item.predictionScore) { + predictionScore = sanitizeDetectionPercentage( + item.predictionScore, + ); + } - return ( - - - - - - {methodNames[item.methodName].name} - - - - {item.isError ? ( - - {keyword("gauge_error_generic")} - - ) : ( - <> - - {keyword("gauge_probability_text")}{" "} - - - {predictionScore}% - - + return ( + + + + + + {methodNames[item.methodName].name} + + + + {item.isError ? ( + + {keyword("gauge_error_generic")} + + ) : ( + <> + + {keyword("gauge_probability_text")}{" "} + + + {predictionScore}% + + + )} + + {!item.isError && ( + )} - {!item.isError && ( - - )} - + + + + + + {methodNames[item.methodName].description} + - - - - {methodNames[item.methodName].description} - - + {scores.length > key + 1 && } - {scores.length > key + 1 && } - - ); - })} - - - - + ); + })} + + + + + ) : null} );