diff --git a/frontend/src/features/Train/features/Image/components/ImageParametersStep.tsx b/frontend/src/features/Train/features/Image/components/ImageParametersStep.tsx index 58b51e9ad..490ff0680 100644 --- a/frontend/src/features/Train/features/Image/components/ImageParametersStep.tsx +++ b/frontend/src/features/Train/features/Image/components/ImageParametersStep.tsx @@ -1,6 +1,10 @@ import React, { useEffect, useMemo, useState } from "react"; import { useGetColumnsFromDatasetQuery } from "@/features/Train/redux/trainspaceApi"; import { useAppDispatch, useAppSelector } from "@/common/redux/hooks"; +import { styled } from "@mui/material/styles"; +import Tooltip, { tooltipClasses } from "@mui/material/Tooltip"; +import InfoIcon from "@mui/icons-material/Info"; + import { Autocomplete, Card, @@ -53,6 +57,34 @@ import { import ClientOnlyPortal from "@/common/components/ClientOnlyPortal"; import { updateImageTrainspaceData } from "../redux/imageActions"; + + +const HtmlTooltip = styled( + ({ + className, + title, + children, + ...props + }: { + className?: string; + children: React.ReactElement; + title: React.ReactNode; + }) => ( + + {children} + + ) +)(({ theme }) => ({ + [`& .${tooltipClasses.tooltip}`]: { + backgroundColor: "rgba(255, 255, 255, 0.95)", + color: "rgba(0, 0, 0, 0.87)", + maxWidth: 220, + fontSize: theme.typography.pxToRem(12), + border: "none", + }, +})); + + const ImageParametersStep = ({ renderStepperButtons, setIsModified, @@ -463,13 +495,24 @@ const ImageParametersStep = ({ alignItems={"center"} spacing={3} > + + + {STEP_SETTINGS.PARAMETERS.layers[data.value].label} + + {STEP_SETTINGS.PARAMETERS.layers[data.value].description} + + } + > + Info + + + {STEP_SETTINGS.PARAMETERS.layers[data.value].label} - + ( + + {children} + + ) +)(({ theme }) => ({ + [`& .${tooltipClasses.tooltip}`]: { + backgroundColor: "rgba(255, 255, 255, 0.95)", + color: "rgba(0, 0, 0, 0.87)", + maxWidth: 220, + fontSize: theme.typography.pxToRem(12), + border: "none", + }, +})); + const TabularParametersStep = ({ renderStepperButtons, setIsModified, @@ -77,7 +108,7 @@ const TabularParametersStep = ({ handleSubmit, formState: { errors, isDirty }, control, - watch + watch, } = useForm({ defaultValues: { targetCol: @@ -141,7 +172,7 @@ const TabularParametersStep = ({ error={errors.targetCol ? true : false} /> )} - options={data.filter(col => !features.includes(col))} + options={data.filter((col) => !features.includes(col))} /> )} /> @@ -167,8 +198,7 @@ const TabularParametersStep = ({ error={errors.features ? true : false} /> )} - - options={data.filter(col => col!== targetCol)} + options={data.filter((col) => col !== targetCol)} /> )} /> @@ -535,6 +565,19 @@ const LayerComponent = ({ alignItems={"center"} spacing={3} > + + + {STEP_SETTINGS.PARAMETERS.layers[data.value].label} + + {STEP_SETTINGS.PARAMETERS.layers[data.value].description} + + } + > + Info + + {STEP_SETTINGS.PARAMETERS.layers[data.value].label} diff --git a/frontend/src/features/Train/features/Tabular/constants/tabularConstants.ts b/frontend/src/features/Train/features/Tabular/constants/tabularConstants.ts index db5c4622e..4641b64b4 100644 --- a/frontend/src/features/Train/features/Tabular/constants/tabularConstants.ts +++ b/frontend/src/features/Train/features/Tabular/constants/tabularConstants.ts @@ -1,3 +1,9 @@ + +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import Button from '@mui/material/Button'; +import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip'; +import Typography from '@mui/material/Typography'; import TabularDatasetStep from "../components/TabularDatasetStep"; import TabularParametersStep from "../components/TabularParametersStep"; import TabularReviewStep from "../components/TabularReviewStep"; @@ -61,6 +67,7 @@ export const STEP_SETTINGS = { { label: "Adam Optimization", value: "Adam" }, ], layerValues: ["LINEAR", "RELU", "TANH", "SOFTMAX", "SIGMOID", "LOGSOFTMAX"], + layers: { LINEAR: { label: "Linear", @@ -81,16 +88,19 @@ export const STEP_SETTINGS = { type: "number", }, ], + description: "A linear layer performs a mathematical operation called linear transformation on a set of input values. It applies a combination of scaling and shifting to the input values, resulting in a new set of transformed values as output." }, RELU: { label: "ReLU", objectName: "nn.ReLU", parameters: [], + description: "ReLU, short for Rectified Linear Unit, is an activation function that acts like a filter that selectively allows positive numbers to pass through unchanged, while converting negative numbers to zero." }, TANH: { label: "Tanh", objectName: "nn.Tanh", parameters: [], + description: "The tanh function maps input numbers to a range between -1 and 1, emphasizing values close to zero while diminishing the impact of extremely large or small numbers, making it useful for capturing complex patterns in data." }, SOFTMAX: { label: "Softmax", @@ -104,11 +114,13 @@ export const STEP_SETTINGS = { type: "number", }, ], + description: "The softmax function takes a set of numbers as input and converts them into a probability distribution, assigning higher probabilities to larger numbers and lower probabilities to smaller numbers, making it useful for multi-class classification tasks." }, SIGMOID: { label: "Sigmoid", objectName: "nn.Sigmoid", parameters: [], + description: "The sigmoid function takes any input number and squeezes it to a range between 0 and 1, effectively converting it into a probability-like value, often used for binary classification tasks and as an activation function in neural networks." }, LOGSOFTMAX: { label: "LogSoftmax", @@ -122,6 +134,7 @@ export const STEP_SETTINGS = { type: "number", }, ], + description: "The logsoftmax function converts a set of numbers into a probability distribution using the softmax function, and then applies a logarithm to the resulting probabilities. It is commonly used for multi-class classification tasks as an activation function and to calculate the logarithmic loss during neural network training." } }, },