diff --git a/src/i18n/common.json b/src/i18n/common.json index a924bcc05..76aac4753 100644 --- a/src/i18n/common.json +++ b/src/i18n/common.json @@ -385,7 +385,14 @@ "countryLabel": "Country" }, "ingredients": { - "description": "This game allows you to validate the pre-selection of images of ingredients lists in various languages for a product, and validate the extracted ingredients." + "description": "This game allows you to validate the pre-selection of images of ingredients lists in various languages for a product, and validate the extracted ingredients.", + "current_text": "text from off", + "confidence_score": "language confidence", + "revert": "Revert", + "parsing": "Get server understanding", + "send": "Validate & send", + "skip": "Skip this product", + "getRobotoffPrediciton": "Get predictions from Robotoff" }, "footer": { "appStore": { diff --git a/src/i18n/en.json b/src/i18n/en.json index a924bcc05..76aac4753 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -385,7 +385,14 @@ "countryLabel": "Country" }, "ingredients": { - "description": "This game allows you to validate the pre-selection of images of ingredients lists in various languages for a product, and validate the extracted ingredients." + "description": "This game allows you to validate the pre-selection of images of ingredients lists in various languages for a product, and validate the extracted ingredients.", + "current_text": "text from off", + "confidence_score": "language confidence", + "revert": "Revert", + "parsing": "Get server understanding", + "send": "Validate & send", + "skip": "Skip this product", + "getRobotoffPrediciton": "Get predictions from Robotoff" }, "footer": { "appStore": { diff --git a/src/pages/ingredients/ImageAnnotation.tsx b/src/pages/ingredients/ImageAnnotation.tsx index f16a82b31..e4527ca9b 100644 --- a/src/pages/ingredients/ImageAnnotation.tsx +++ b/src/pages/ingredients/ImageAnnotation.tsx @@ -3,6 +3,7 @@ import Button from "@mui/material/Button"; import Box from "@mui/material/Box"; import useRobotoffPrediction, { DataType } from "./useRobotoffPrediction"; import { IngredientAnotation } from "./IngeredientDisplay"; +import { useTranslation } from "react-i18next"; type ImageAnnotationProps = { fetchDataUrl: string; @@ -67,7 +68,7 @@ function Annotation({ @@ -144,7 +146,7 @@ export default function ImageAnnotation({ onClick={getData} variant="outlined" > - Get prediction + {t("ingredients.getRobotoffPrediciton")} ); diff --git a/src/pages/ingredients/IngeredientDisplay.tsx b/src/pages/ingredients/IngeredientDisplay.tsx index db15dd941..e2eabb013 100644 --- a/src/pages/ingredients/IngeredientDisplay.tsx +++ b/src/pages/ingredients/IngeredientDisplay.tsx @@ -3,8 +3,11 @@ import * as React from "react"; import Button from "@mui/material/Button"; import Stack from "@mui/material/Stack"; import Typography from "@mui/material/Typography"; +import Tooltip from "@mui/material/Tooltip"; import LoadingButton from "@mui/lab/LoadingButton"; +import { useTranslation } from "react-i18next"; + import off from "../../off"; type BooleanEstimation = "no" | "yes" | "maybe"; @@ -27,6 +30,14 @@ function getColor(ingredient: ParsedIngredientsType) { if (ingredient.ingredients !== undefined) return "blue"; return "orange"; } + +function getTitle(ingredient: ParsedIngredientsType) { + if (ingredient.ciqual_proxy_food_code !== undefined) + return "This ingredient has CIQUAL id"; + if (ingredient.vegetarian !== undefined) return "recognised as a vegetarian"; + if (ingredient.ingredients !== undefined) return "contains sub ingredients"; + return `unknown ingredient: ${ingredient.text}"`; +} function ColorText({ text, ingredients, @@ -38,7 +49,7 @@ function ColorText({ // Without parsing, we just split with coma return text.split(",").map((txt, i) => ( - {txt} + {txt} {i === text.split(",").length - 1 ? "" : ","} )); @@ -63,8 +74,6 @@ function ColorText({ } const endIndex = startIndex + ingredient.text.length; - console.log(text.slice(lastIndex, endIndex)); - console.log(""); const prefix = text.slice(lastIndex, startIndex); const ingredientName = text.slice(startIndex, endIndex); lastIndex = endIndex; @@ -72,7 +81,12 @@ function ColorText({ return ( {prefix} - {ingredientName} + + + + {ingredientName} + + ); }), @@ -100,8 +114,7 @@ export function useIngredientParsing() { export function IngeredientDisplay(props) { const { text, onChange, parsings } = props; - console.log({ text }); - console.log({ parsings }); + return (

+      />
     
); } export function IngredientAnotation(props) { + const { t } = useTranslation(); const { lang, score, code, setEditedState, text, detectedText } = props; const { isLoading, fetchIngredients, parsings } = useIngredientParsing(); return ( - - {`${lang} (${(score * 100).toFixed(1)}%)`} + + + {lang} + {score === null ? ( + ({t("ingredients.current_text")}) + ) : ( + + {" "} + ({t("ingredients.confidence_score")}: {(score * 100).toFixed(1)}%) + + )} + - Revert + {t("ingredients.revert")} fetchIngredients(text, lang)} fullWidth loading={isLoading} > - get parsing + {t("ingredients.parsing")} diff --git a/src/pages/ingredients/index.tsx b/src/pages/ingredients/index.tsx index 442b8101e..c16d64fd9 100644 --- a/src/pages/ingredients/index.tsx +++ b/src/pages/ingredients/index.tsx @@ -17,6 +17,7 @@ import ImageAnnotation from "./ImageAnnotation"; function ProductInterface(props) { const { product, next } = props; + const { t } = useTranslation(); const { selectedImages, product_name, code } = product; const [imageTab, setImageTab] = React.useState(selectedImages[0].countryCode); @@ -80,7 +81,7 @@ function ProductInterface(props) { )} );