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."
}
},
},