Merge pull request #1069 from LAION-AI/flag-label-desciptions

website: show descriptions for label flags

website/public/locales/en/labelling.json

@@ -8,10 +8,17 @@
   "spam.question": "Is the message spam?",
   "fails_task.question": "Is it a bad reply, as an answer to the prompt task?",
   "not_appropriate": "Not Appropriate",
+  "not_appropriate.explanation": "Inappropriate for a customer assistant.",
   "pii": "Contains PII",
+  "pii.explanation": "Contains personally identifying information. Examples include personal contact details, license and other identity numbers and banking details.",
   "hate_speech": "Hate Speech",
+  "hate_speech.explanation": "Content is abusive or threatening and expresses prejudice against a protected characteristic. Prejudice refers to preconceived views not based on reason. Protected characteristics include gender, ethnicity, religion, sexual orientation, and similar characteristics.",
   "sexual_content": "Sexual Content",
+  "sexual_content.explanation": "Contains sexual content.",
   "moral_judgement": "Judges Morality",
+  "moral_judgement.explanation": "Expresses moral judgement.",
   "political_content": "Political",
-  "lang_mismatch": "Wrong Language"
+  "political_content.explanation": "Expresses political views.",
+  "lang_mismatch": "Wrong Language",
+  "lang_mismatch.explanation": "Not written in the currently selected language."
 }

website/src/components/Messages/LabelFlagGroup.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex } from "@chakra-ui/react";
+import { Button, Flex, Tooltip } from "@chakra-ui/react";
 import { useTranslation } from "next-i18next";
 import { getTypeSafei18nKey } from "src/lib/i18n";
 
@@ -14,18 +14,19 @@ export const LabelFlagGroup = ({ values, labelNames, isEditable = true, onChange
   return (
     <Flex wrap="wrap" gap="4">
       {labelNames.map((name, idx) => (
-        <Button
-          key={name}
-          onClick={() => {
-            const newValues = values.slice();
-            newValues[idx] = newValues[idx] ? 0 : 1;
-            onChange(newValues);
-          }}
-          isDisabled={!isEditable}
-          colorScheme={values[idx] === 1 ? "blue" : undefined}
-        >
-          {t(getTypeSafei18nKey(name))}
-        </Button>
+        <Tooltip key={name} label={`${t(getTypeSafei18nKey(`${name}.explanation`))}`}>
+          <Button
+            onClick={() => {
+              const newValues = values.slice();
+              newValues[idx] = newValues[idx] ? 0 : 1;
+              onChange(newValues);
+            }}
+            isDisabled={!isEditable}
+            colorScheme={values[idx] === 1 ? "blue" : undefined}
+          >
+            {t(getTypeSafei18nKey(name))}
+          </Button>
+        </Tooltip>
       ))}
     </Flex>
   );

website/src/components/Messages/LabelInputGroup.tsx

@@ -1,10 +1,12 @@
 import { Text, VStack } from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";
+import { Explain } from "src/components/Explain";
+import { LabelFlagGroup } from "src/components/Messages/LabelFlagGroup";
+import { LabelLikertGroup } from "src/components/Survey/LabelLikertGroup";
+import { LabelYesNoGroup } from "src/components/Messages/LabelYesNoGroup";
+import { getTypeSafei18nKey } from "src/lib/i18n";
 import { Label } from "src/types/Tasks";
 
-import { LabelLikertGroup } from "../Survey/LabelLikertGroup";
-import { LabelFlagGroup } from "./LabelFlagGroup";
-import { LabelYesNoGroup } from "./LabelYesNoGroup";
-
 export interface LabelInputInstructions {
   yesNoInstruction: string;
   flagInstruction: string;
@@ -28,6 +30,7 @@ export const LabelInputGroup = ({
   instructions,
   onChange,
 }: LabelInputGroupProps) => {
+  const { t } = useTranslation("labelling");
   const yesNoIndexes = labels.map((label, idx) => (label.widget === "yes_no" ? idx : null)).filter((v) => v !== null);
   const flagIndexes = labels.map((label, idx) => (label.widget === "flag" ? idx : null)).filter((v) => v !== null);
   const likertIndexes = labels.map((label, idx) => (label.widget === "likert" ? idx : null)).filter((v) => v !== null);
@@ -52,7 +55,17 @@ export const LabelInputGroup = ({
       )}
       {flagIndexes.length > 0 && (
         <VStack alignItems="stretch" spacing={2}>
-          <Text>{instructions.flagInstruction}</Text>
+          <Text>
+            {instructions.flagInstruction}
+            <Explain
+              explanation={flagIndexes.map(
+                (idx) =>
+                  `${t(getTypeSafei18nKey(labels[idx].name))}: ${t(
+                    getTypeSafei18nKey(`${labels[idx].name}.explanation`)
+                  )}`
+              )}
+            />{" "}
+          </Text>
           <LabelFlagGroup
             values={flagIndexes.map((idx) => values[idx])}
             labelNames={flagIndexes.map((idx) => labels[idx].name)}