From f1cf49c3f42e3dc00603db9793500583d16b02a8 Mon Sep 17 00:00:00 2001 From: Ilya Matiach Date: Fri, 26 Jan 2024 13:15:25 -0500 Subject: [PATCH] update UI to support genai task for RAI text dashboard (#2504) (#2508) --- apps/dashboard/src/app/textApplications.ts | 5 ++ .../mockForecastingDataSingleTimeSeries.ts | 10 ++-- .../__mock_data__/squadGenai.ts | 59 +++++++++++++++++++ libs/core-ui/src/lib/DatasetCohort.ts | 2 +- libs/core-ui/src/lib/Interfaces/IDataset.ts | 5 +- .../lib/util/datasetUtils/getColumnRanges.ts | 6 +- .../util/datasetUtils/getPropertyValues.ts | 10 +++- .../TextLocalImportancePlots.tsx | 2 +- .../ModelOverview/ConfusionMatrixHeatmap.tsx | 2 +- .../Controls/TabsView/TabsView.tsx | 1 + 10 files changed, 89 insertions(+), 13 deletions(-) create mode 100644 apps/dashboard/src/model-assessment-text/__mock_data__/squadGenai.ts diff --git a/apps/dashboard/src/app/textApplications.ts b/apps/dashboard/src/app/textApplications.ts index 4adb44754e..56c072dbc8 100644 --- a/apps/dashboard/src/app/textApplications.ts +++ b/apps/dashboard/src/app/textApplications.ts @@ -17,6 +17,7 @@ import { emotionModelExplanationData } from "../model-assessment-text/__mock_data__/emotion"; import { squad } from "../model-assessment-text/__mock_data__/squad"; +import { squadGenai } from "../model-assessment-text/__mock_data__/squadGenai"; import { IDataSet, @@ -65,6 +66,10 @@ export const textApplications: ITextApplications = { squad: { classDimension: 3, dataset: squad + } as IModelAssessmentDataSet, + squadGenai: { + classDimension: 3, + dataset: squadGenai } as IModelAssessmentDataSet }, versions: { "1": 1, "2:Static-View": 2 } diff --git a/apps/dashboard/src/model-assessment-forecasting/__mock_data__/mockForecastingDataSingleTimeSeries.ts b/apps/dashboard/src/model-assessment-forecasting/__mock_data__/mockForecastingDataSingleTimeSeries.ts index 6457722b82..fe807c0f87 100644 --- a/apps/dashboard/src/model-assessment-forecasting/__mock_data__/mockForecastingDataSingleTimeSeries.ts +++ b/apps/dashboard/src/model-assessment-forecasting/__mock_data__/mockForecastingDataSingleTimeSeries.ts @@ -28,7 +28,9 @@ mockForecastingDataSingleTimeSeries.predicted_y = startingIndexBobsSandwichesTimeSeries, endingIndexBobsSandwichesTimeSeries ); -mockForecastingDataSingleTimeSeries.true_y = mockForecastingData.true_y.slice( - startingIndexBobsSandwichesTimeSeries, - endingIndexBobsSandwichesTimeSeries -); +if (mockForecastingData.true_y) { + mockForecastingDataSingleTimeSeries.true_y = mockForecastingData.true_y.slice( + startingIndexBobsSandwichesTimeSeries, + endingIndexBobsSandwichesTimeSeries + ); +} diff --git a/apps/dashboard/src/model-assessment-text/__mock_data__/squadGenai.ts b/apps/dashboard/src/model-assessment-text/__mock_data__/squadGenai.ts new file mode 100644 index 0000000000..52b0007b04 --- /dev/null +++ b/apps/dashboard/src/model-assessment-text/__mock_data__/squadGenai.ts @@ -0,0 +1,59 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import { DatasetTaskType, IDataset } from "@responsible-ai/core-ui"; + +export const squadGenai: IDataset = { + categorical_features: [], + class_names: undefined, + feature_names: [ + "context", + "prompt", + "positive_words", + "negative_words", + "negation_words", + "negated_entities", + "named_persons", + "sentence_length" + ], + features: [ + [ + 'Architecturally, the school has a Catholic character. Atop the Main Building\'s gold dome is a golden statue of the Virgin Mary. Immediately in front of the Main Building and facing it, is a copper statue of Christ with arms upraised with the legend "Venite Ad Me Omnes". Next to the Main Building is the Basilica of the Sacred Heart. Immediately behind the basilica is the Grotto, a Marian place of prayer and reflection. It is a replica of the grotto at Lourdes, France where the Virgin Mary reputedly appeared to Saint Bernadette Soubirous in 1858. At the end of the main drive (and in a direct line that connects through 3 statues and the Gold Dome), is a simple, modern stone statue of Mary.', + 'Answer the question given the context.\n\ncontext:\nArchitecturally, the school has a Catholic character. Atop the Main Building\'s gold dome is a golden statue of the Virgin Mary. Immediately in front of the Main Building and facing it, is a copper statue of Christ with arms upraised with the legend "Venite Ad Me Omnes". Next to the Main Building is the Basilica of the Sacred Heart. Immediately behind the basilica is the Grotto, a Marian place of prayer and reflection. It is a replica of the grotto at Lourdes, France where the Virgin Mary reputedly appeared to Saint Bernadette Soubirous in 1858. At the end of the main drive (and in a direct line that connects through 3 statues and the Gold Dome), is a simple, modern stone statue of Mary.\n\nquestion:\nTo whom did the Virgin Mary allegedly appear in 1858 in Lourdes France?', + 50, + 0, + 0, + 0, + 3, + 827 + ], + [ + 'Architecturally, the school has a Catholic character. Atop the Main Building\'s gold dome is a golden statue of the Virgin Mary. Immediately in front of the Main Building and facing it, is a copper statue of Christ with arms upraised with the legend "Venite Ad Me Omnes". Next to the Main Building is the Basilica of the Sacred Heart. Immediately behind the basilica is the Grotto, a Marian place of prayer and reflection. It is a replica of the grotto at Lourdes, France where the Virgin Mary reputedly appeared to Saint Bernadette Soubirous in 1858. At the end of the main drive (and in a direct line that connects through 3 statues and the Gold Dome), is a simple, modern stone statue of Mary.', + 'Answer the question given the context.\n\ncontext:\nArchitecturally, the school has a Catholic character. Atop the Main Building\'s gold dome is a golden statue of the Virgin Mary. Immediately in front of the Main Building and facing it, is a copper statue of Christ with arms upraised with the legend "Venite Ad Me Omnes". Next to the Main Building is the Basilica of the Sacred Heart. Immediately behind the basilica is the Grotto, a Marian place of prayer and reflection. It is a replica of the grotto at Lourdes, France where the Virgin Mary reputedly appeared to Saint Bernadette Soubirous in 1858. At the end of the main drive (and in a direct line that connects through 3 statues and the Gold Dome), is a simple, modern stone statue of Mary.\n\nquestion:\nWhat is in front of the Notre Dame Main Building?', + 50, + 0, + 0, + 0, + 2, + 805 + ], + [ + 'Architecturally, the school has a Catholic character. Atop the Main Building\'s gold dome is a golden statue of the Virgin Mary. Immediately in front of the Main Building and facing it, is a copper statue of Christ with arms upraised with the legend "Venite Ad Me Omnes". Next to the Main Building is the Basilica of the Sacred Heart. Immediately behind the basilica is the Grotto, a Marian place of prayer and reflection. It is a replica of the grotto at Lourdes, France where the Virgin Mary reputedly appeared to Saint Bernadette Soubirous in 1858. At the end of the main drive (and in a direct line that connects through 3 statues and the Gold Dome), is a simple, modern stone statue of Mary.', + 'Answer the question given the context.\n\ncontext:\nArchitecturally, the school has a Catholic character. Atop the Main Building\'s gold dome is a golden statue of the Virgin Mary. Immediately in front of the Main Building and facing it, is a copper statue of Christ with arms upraised with the legend "Venite Ad Me Omnes". Next to the Main Building is the Basilica of the Sacred Heart. Immediately behind the basilica is the Grotto, a Marian place of prayer and reflection. It is a replica of the grotto at Lourdes, France where the Virgin Mary reputedly appeared to Saint Bernadette Soubirous in 1858. At the end of the main drive (and in a direct line that connects through 3 statues and the Gold Dome), is a simple, modern stone statue of Mary.\n\nquestion:\nThe Basilica of the Sacred heart at Notre Dame is beside to which structure?', + 52, + 0, + 0, + 0, + 3, + 832 + ] + ], + predicted_y: [ + "This is a dummy answer", + "This is a dummy answer", + "This is a dummy answer" + ], + target_column: undefined, + task_type: DatasetTaskType.GenerativeText, + true_y: undefined +}; diff --git a/libs/core-ui/src/lib/DatasetCohort.ts b/libs/core-ui/src/lib/DatasetCohort.ts index 74f92049ed..4753abed90 100644 --- a/libs/core-ui/src/lib/DatasetCohort.ts +++ b/libs/core-ui/src/lib/DatasetCohort.ts @@ -120,7 +120,7 @@ export class DatasetCohort { dataDict[index][featureName] = val; }); }); - this.dataset.true_y.forEach((val, index) => { + this.dataset.true_y?.forEach((val, index) => { if (Array.isArray(val)) { val.forEach((subVal, subIndex) => { dataDict[index][DatasetCohortColumns.TrueY + subIndex.toString()] = diff --git a/libs/core-ui/src/lib/Interfaces/IDataset.ts b/libs/core-ui/src/lib/Interfaces/IDataset.ts index ea05d3df2e..832c8d4e01 100644 --- a/libs/core-ui/src/lib/Interfaces/IDataset.ts +++ b/libs/core-ui/src/lib/Interfaces/IDataset.ts @@ -13,7 +13,8 @@ export enum DatasetTaskType { MultilabelImageClassification = "multilabel_image_classification", Forecasting = "forecasting", ObjectDetection = "object_detection", - QuestionAnswering = "question_answering" + QuestionAnswering = "question_answering", + GenerativeText = "generative_text" } export interface ITabularDatasetMetadata { @@ -31,7 +32,7 @@ export interface IObjectDetectionLabelType { export interface IDataset { task_type: DatasetTaskType; - true_y: number[] | number[][] | string[]; + true_y?: number[] | number[][] | string[]; predicted_y?: number[] | number[][] | string[]; probability_y?: number[][]; features: unknown[][]; diff --git a/libs/core-ui/src/lib/util/datasetUtils/getColumnRanges.ts b/libs/core-ui/src/lib/util/datasetUtils/getColumnRanges.ts index c1b84bd144..61fde5cabf 100644 --- a/libs/core-ui/src/lib/util/datasetUtils/getColumnRanges.ts +++ b/libs/core-ui/src/lib/util/datasetUtils/getColumnRanges.ts @@ -161,7 +161,11 @@ function getRegressionErrorFeatureRange( dataset: IDataset, modelType: ModelTypes ): IColumnRange | undefined { - if (modelType === ModelTypes.Regression && dataset.predicted_y) { + if ( + modelType === ModelTypes.Regression && + dataset.predicted_y && + dataset.true_y + ) { const regressionErrors = []; for (let index = 0; index < dataset.features.length; index++) { const trueY = dataset.true_y[index]; diff --git a/libs/core-ui/src/lib/util/datasetUtils/getPropertyValues.ts b/libs/core-ui/src/lib/util/datasetUtils/getPropertyValues.ts index 638e152929..eeb5bd7477 100644 --- a/libs/core-ui/src/lib/util/datasetUtils/getPropertyValues.ts +++ b/libs/core-ui/src/lib/util/datasetUtils/getPropertyValues.ts @@ -44,9 +44,12 @@ export function getPropertyValues( }); } if (property === DatasetCohortColumns.TrueY) { - return indexes.map((index) => { - return dataset.true_y[index]; - }); + const trueYs = dataset.true_y; + if (trueYs) { + return indexes.map((index) => { + return trueYs[index]; + }); + } } if (dataset.predicted_y && dataset.true_y) { return getErrors(property, indexes, dataset, modelType); @@ -62,6 +65,7 @@ function getErrors( ): unknown[] { if ( dataset.predicted_y && + dataset.true_y && !Array.isArray(dataset.true_y) && !Array.isArray(dataset.predicted_y) ) { diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView/TextLocalImportancePlots.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView/TextLocalImportancePlots.tsx index 2f14c412da..bcccdfdc89 100644 --- a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView/TextLocalImportancePlots.tsx +++ b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView/TextLocalImportancePlots.tsx @@ -86,7 +86,7 @@ export class TextLocalImportancePlots extends React.Component