Skip to content

Commit

Permalink
feat: model details editing
Browse files Browse the repository at this point in the history
  • Loading branch information
jeafreezy committed Nov 9, 2024
1 parent c6a8bf5 commit 7af23cc
Show file tree
Hide file tree
Showing 26 changed files with 462 additions and 220 deletions.
74 changes: 37 additions & 37 deletions frontend/src/components/layouts/model-creation-layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,43 +26,43 @@ const pages: {
icon: React.ElementType;
path: string;
}[] = [
{
id: 1,
title: MODEL_CREATION_CONTENT.progressStepper.modelDetails,
icon: TagsIcon,
path: APPLICATION_ROUTES.CREATE_NEW_MODEL,
},
{
id: 2,
title: MODEL_CREATION_CONTENT.progressStepper.trainingDataset,
icon: DatabaseIcon,
path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_DATASET,
},
{
id: 3,
title: MODEL_CREATION_CONTENT.progressStepper.trainingArea,
icon: SquareShadowIcon,
path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_AREA,
},
{
id: 4,
title: MODEL_CREATION_CONTENT.progressStepper.trainingSettings,
icon: SettingsIcon,
path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_SETTINGS,
},
{
id: 5,
title: MODEL_CREATION_CONTENT.progressStepper.submitModel,
icon: CloudIcon,
path: APPLICATION_ROUTES.CREATE_NEW_MODEL_SUMMARY,
},
{
id: 6,
title: MODEL_CREATION_CONTENT.progressStepper.confirmation,
icon: StarIcon,
path: APPLICATION_ROUTES.CREATE_NEW_MODEL_CONFIRMATION,
},
];
{
id: 1,
title: MODEL_CREATION_CONTENT.progressStepper.modelDetails,
icon: TagsIcon,
path: APPLICATION_ROUTES.CREATE_NEW_MODEL,
},
{
id: 2,
title: MODEL_CREATION_CONTENT.progressStepper.trainingDataset,
icon: DatabaseIcon,
path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_DATASET,
},
{
id: 3,
title: MODEL_CREATION_CONTENT.progressStepper.trainingArea,
icon: SquareShadowIcon,
path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_AREA,
},
{
id: 4,
title: MODEL_CREATION_CONTENT.progressStepper.trainingSettings,
icon: SettingsIcon,
path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_SETTINGS,
},
{
id: 5,
title: MODEL_CREATION_CONTENT.progressStepper.submitModel,
icon: CloudIcon,
path: APPLICATION_ROUTES.CREATE_NEW_MODEL_SUMMARY,
},
{
id: 6,
title: MODEL_CREATION_CONTENT.progressStepper.confirmation,
icon: StarIcon,
path: APPLICATION_ROUTES.CREATE_NEW_MODEL_CONFIRMATION,
},
];

const ModelCreationLayout = () => {
const { pathname } = useLocation();
Expand Down
21 changes: 21 additions & 0 deletions frontend/src/features/model-creation/api/update-models.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { API_ENDPOINTS, apiClient } from "@/services";
import { TModel } from "@/types";

export type TUpdateModelArgs = {
description: string;
name: string;
modelId: string;
};

export const updateModel = async ({
name,
description,
modelId,
}: TUpdateModelArgs): Promise<TModel> => {
return await (
await apiClient.patch(`${API_ENDPOINTS.UPDATE_MODEL(modelId)}`, {
name,
description,
})
).data;
};
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,17 @@ const ModelCreationSuccessConfirmation = () => {
title={MODEL_CREATION_CONTENT.confirmation.buttons.goToModel}
nativeAnchor={false}
>
<Button>{MODEL_CREATION_CONTENT.confirmation.buttons.goToModel}</Button>
<Button>
{MODEL_CREATION_CONTENT.confirmation.buttons.goToModel}
</Button>
</Link>
<Link href={`${APPLICATION_ROUTES.MODELS}`} title={MODEL_CREATION_CONTENT.confirmation.buttons.exploreModels}>
<Button variant="dark">{MODEL_CREATION_CONTENT.confirmation.buttons.exploreModels}</Button>
<Link
href={`${APPLICATION_ROUTES.MODELS}`}
title={MODEL_CREATION_CONTENT.confirmation.buttons.exploreModels}
>
<Button variant="dark">
{MODEL_CREATION_CONTENT.confirmation.buttons.exploreModels}
</Button>
</Link>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -190,8 +190,18 @@ const FileUploadDialog: React.FC<FileUploadDialogProps> = ({
<p>Drop the files here ...</p>
) : (
<>
<p>{MODEL_CREATION_CONTENT.trainingArea.fileUploadDialog.mainInstruction}</p>
<small>{MODEL_CREATION_CONTENT.trainingArea.fileUploadDialog.subInstruction}</small>
<p>
{
MODEL_CREATION_CONTENT.trainingArea.fileUploadDialog
.mainInstruction
}
</p>
<small>
{
MODEL_CREATION_CONTENT.trainingArea.fileUploadDialog
.subInstruction
}
</small>
</>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/features/model-creation/components/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export { default as ProgressBar } from "./progress-bar";
export { default as StepHeading } from "./step-heading";
export { default as ModelDetailsForm } from "./model-details";
export { default as ModelDetailsForm } from "./model-details/model-details";
export { default as TrainingDatasetForm } from "./training-dataset/training-dataset";
export { default as TrainingAreaForm } from "./training-area/training-area";
export { default as TrainingSettingsStep } from "./training-settings/training-settings";
Expand Down
111 changes: 0 additions & 111 deletions frontend/src/features/model-creation/components/model-details.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import {
FORM_VALIDATION_CONFIG,
MODEL_CREATION_FORM_NAME,
} from "@/app/providers/model-creation-provider";
import { TextArea } from "@/components/ui/form";
import { MODEL_CREATION_CONTENT } from "@/utils";

const ModelDescriptionFormInput = ({
handleChange,
value,
}: {
value: string;
handleChange: (value: string) => void;
}) => {
return (
<TextArea
handleChange={(e) => handleChange(e.target.value)}
label={MODEL_CREATION_CONTENT.modelDetails.form.modelDescription.label}
helpText={
MODEL_CREATION_CONTENT.modelDetails.form.modelDescription.helpText
}
labelWithTooltip
toolTipContent={
MODEL_CREATION_CONTENT.modelDetails.form.modelDescription.toolTip
}
placeholder={
MODEL_CREATION_CONTENT.modelDetails.form.modelDescription.placeholder
}
value={value}
required
maxLength={
FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION]
.maxLength
}
minLength={
FORM_VALIDATION_CONFIG[MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION]
.minLength
}
/>
);
};

export default ModelDescriptionFormInput;
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import {
MODEL_CREATION_FORM_NAME,
useModelFormContext,
} from "@/app/providers/model-creation-provider";
import { Select } from "@/components/ui/form";
import { BASE_MODELS } from "@/enums";
import { StepHeading } from "@/features/model-creation/components/";
import { MODEL_CREATION_CONTENT } from "@/utils";
import ModelNameFormInput from "@/features/model-creation/components/model-details/model-name-input";
import ModelDescriptionFormInput from "./model-description-input";

const baseModelOptions = [
{
name: BASE_MODELS.RAMP,
value: "RAMP",
},
{
name: BASE_MODELS.YOLOV8_V1,
value: "YOLO_V8_V1",
},
{
name: BASE_MODELS.YOLOV8_V2,
value: "YOLO_V8_V2",
},
];

const ModelDetailsForm = () => {
const { formData, handleChange } = useModelFormContext();
return (
<div className="flex flex-col gap-y-6">
<StepHeading
heading={MODEL_CREATION_CONTENT.modelDetails.pageTitle}
description={MODEL_CREATION_CONTENT.modelDetails.pageDescription}
/>
<div className="flex flex-col gap-y-10">
<ModelNameFormInput
value={formData.modelName}
handleChange={(value) =>
handleChange(MODEL_CREATION_FORM_NAME.MODEL_NAME, value)
}
/>
<ModelDescriptionFormInput
value={formData.modelDescription}
handleChange={(value) =>
handleChange(MODEL_CREATION_FORM_NAME.MODEL_DESCRIPTION, value)
}
/>
<Select
label={MODEL_CREATION_CONTENT.modelDetails.form.baseModel.label}
helpText={MODEL_CREATION_CONTENT.modelDetails.form.baseModel.helpText}
labelWithTooltip
toolTipContent={
MODEL_CREATION_CONTENT.modelDetails.form.baseModel.toolTip
}
defaultValue={formData.baseModel}
options={baseModelOptions}
handleChange={(e) =>
handleChange(MODEL_CREATION_FORM_NAME.BASE_MODELS, e.target.value)
}
required
/>
</div>
</div>
);
};

export default ModelDetailsForm;
Loading

0 comments on commit 7af23cc

Please sign in to comment.