From f30bcea19834e9e39f1d00315c98c1036cea8bad Mon Sep 17 00:00:00 2001 From: EiffelFly <57251712+EiffelFly@users.noreply.github.com> Date: Thu, 12 Dec 2024 22:32:19 +0800 Subject: [PATCH 1/2] feat: adapt new hardware option --- .../src/ui-helpers/getModelHardwareToolkit.ts | 18 --------- .../design-system/src/ui-helpers/index.ts | 1 - packages/sdk/src/model/types.ts | 7 +++- .../src/components/card-model/CardModel.tsx | 39 ++++++++++++++++--- .../src/view/model/CreateModelForm.tsx | 23 ++++------- .../view-model/ModelSettingsEditForm.tsx | 36 +++++++---------- 6 files changed, 60 insertions(+), 64 deletions(-) delete mode 100644 packages/design-system/src/ui-helpers/getModelHardwareToolkit.ts diff --git a/packages/design-system/src/ui-helpers/getModelHardwareToolkit.ts b/packages/design-system/src/ui-helpers/getModelHardwareToolkit.ts deleted file mode 100644 index 5ff370c41a..0000000000 --- a/packages/design-system/src/ui-helpers/getModelHardwareToolkit.ts +++ /dev/null @@ -1,18 +0,0 @@ -export const getModelHardwareToolkit = (hardwareName: string) => { - switch (hardwareName) { - case "CPU": - return "CPU"; - case "GPU": - return "GPU"; - case "NVIDIA_TESLA_T4": - return "NVIDIA Tesla T4"; - case "NVIDIA_L4": - return "NVIDIA L4"; - case "NVIDIA_A100": - return "NVIDIA A100"; - case "Custom": - return "Custom"; - default: - return null; - } -}; diff --git a/packages/design-system/src/ui-helpers/index.ts b/packages/design-system/src/ui-helpers/index.ts index 3cf91b7c1e..9cbae4706b 100644 --- a/packages/design-system/src/ui-helpers/index.ts +++ b/packages/design-system/src/ui-helpers/index.ts @@ -2,4 +2,3 @@ export { getModelInstanceTaskToolkit } from "./getModelInstanceTaskToolkit"; export { getModelDefinitionToolkit } from "./getModelDefinitionToolkit"; export { getPipelineModeToolkit } from "./getPipelineModeToolkit"; export { getModelRegionToolkit } from "./getModelRegionToolkit"; -export { getModelHardwareToolkit } from "./getModelHardwareToolkit"; diff --git a/packages/sdk/src/model/types.ts b/packages/sdk/src/model/types.ts index b77d3bae75..95cdeeb562 100644 --- a/packages/sdk/src/model/types.ts +++ b/packages/sdk/src/model/types.ts @@ -61,6 +61,11 @@ export type ModelDefinition = { updateTime: string; }; +export type Hardware = { + title: string; + value: string; +}; + export type Model = { name: string; uid: string; @@ -100,7 +105,7 @@ export type Model = { export type ModelRegion = { regionName: string; - hardware: string[]; + hardware: Hardware[]; }; export type ModelWatchState = { diff --git a/packages/toolkit/src/components/card-model/CardModel.tsx b/packages/toolkit/src/components/card-model/CardModel.tsx index 2211d8872b..275b593157 100644 --- a/packages/toolkit/src/components/card-model/CardModel.tsx +++ b/packages/toolkit/src/components/card-model/CardModel.tsx @@ -4,12 +4,15 @@ import type { Model } from "instill-sdk"; import * as React from "react"; import Link from "next/link"; -import { - getModelHardwareToolkit, - getModelRegionToolkit, -} from "@instill-ai/design-system"; +import { getModelRegionToolkit } from "@instill-ai/design-system"; import { ImageWithFallback } from ".."; +import { + InstillStore, + useInstillStore, + useModelAvailableRegions, + useShallow, +} from "../../lib"; import { Menu } from "./Menu"; import { Stats } from "./Stats"; import { Tags } from "./Tags"; @@ -31,8 +34,34 @@ const OWNER = { id: null, }; +const selector = (store: InstillStore) => ({ + accessToken: store.accessToken, + enabledQuery: store.enabledQuery, +}); + export const CardModel = (props: CardModelProps) => { const { model, onDelete } = props; + + const { accessToken, enabledQuery } = useInstillStore(useShallow(selector)); + + const modelRegions = useModelAvailableRegions({ accessToken, enabledQuery }); + + const targetHardware = React.useMemo(() => { + if (!modelRegions.isSuccess || !model) { + return null; + } + + const targetRegion = modelRegions.data.find( + (region) => region.regionName === model.region, + ); + + const targetHardware = targetRegion?.hardware.find( + (hardware) => hardware.value === model.hardware, + ); + + return targetHardware ?? null; + }, [modelRegions.data, modelRegions.isSuccess, model]); + const owner = React.useMemo(() => { if (!model) { return OWNER; @@ -81,7 +110,7 @@ export const CardModel = (props: CardModelProps) => { : model.visibility } region={getModelRegionToolkit(model.region) || ""} - hardware={getModelHardwareToolkit(model.hardware) || model.hardware} + hardware={targetHardware?.title ?? model.hardware} />

{model.description} diff --git a/packages/toolkit/src/view/model/CreateModelForm.tsx b/packages/toolkit/src/view/model/CreateModelForm.tsx index 3374d80576..ebdff20785 100644 --- a/packages/toolkit/src/view/model/CreateModelForm.tsx +++ b/packages/toolkit/src/view/model/CreateModelForm.tsx @@ -14,7 +14,6 @@ import { z } from "zod"; import { Button, Form, - getModelHardwareToolkit, getModelInstanceTaskToolkit, getModelRegionToolkit, Icons, @@ -171,18 +170,12 @@ export const CreateModelForm = () => { value: item.regionName, title: getModelRegionToolkit(item.regionName) || "Unknown", })); - const newHardwareOptions: Record = - modelRegions.data.reduce((acc, curr) => { - const regionHardware = curr.hardware.map((item) => ({ - value: item, - title: getModelHardwareToolkit(item), - })); - - return { - ...acc, - [curr.regionName]: regionHardware, - }; - }, {}); + + const newHardwareOptions: Record = {}; + + for (const region of modelRegions.data) { + newHardwareOptions[region.regionName] = region.hardware; + } setRegionOptions(newRegionOptions); setHardwareOptions(newHardwareOptions); @@ -498,9 +491,7 @@ export const CreateModelForm = () => { form.setValue("hardware", targetValue); } - { - updateCustomHardware(""); - } + updateCustomHardware(""); }} > diff --git a/packages/toolkit/src/view/model/view-model/ModelSettingsEditForm.tsx b/packages/toolkit/src/view/model/view-model/ModelSettingsEditForm.tsx index 7bf10f5f6a..43d203a62d 100644 --- a/packages/toolkit/src/view/model/view-model/ModelSettingsEditForm.tsx +++ b/packages/toolkit/src/view/model/view-model/ModelSettingsEditForm.tsx @@ -14,7 +14,6 @@ import { z } from "zod"; import { Button, Form, - getModelHardwareToolkit, Icons, Input, RadioGroup, @@ -41,11 +40,6 @@ export type ModelSettingsEditFormProps = { onUpdate: () => void; }; -type Option = { - value: string; - title: string; -}; - const EditModelSchema = z .object({ description: z.string().optional(), @@ -93,26 +87,21 @@ export const ModelSettingsEditForm = ({ return []; } - return modelRegions.data - .find((item) => item.regionName === model.region) - ?.hardware.reduce( - (acc: Option[], hardwareName) => [ - ...acc, - { - value: hardwareName, - title: getModelHardwareToolkit(hardwareName) || "Unknown", - }, - ], - [], - ); + const targetModelRegion = modelRegions.data.find( + (item) => item.regionName === model.region, + ); + + return targetModelRegion?.hardware ?? []; }, [modelRegions, model]); const defaultValues = React.useMemo(() => { - if (!model) { + if (!model || hardwareOptions.length === 0) { return undefined; } - const hardwareName = getModelHardwareToolkit(model.hardware); + const targetHardware = hardwareOptions.find( + (h) => h.value === model.hardware, + ); return { description: model.description, @@ -123,12 +112,12 @@ export const ModelSettingsEditForm = ({ Visibility, "VISIBILITY_UNSPECIFIED" >, - hardware: hardwareName === null ? "Custom" : model.hardware, - hardwareCustom: hardwareName === null ? model.hardware : "", + hardware: targetHardware ? targetHardware.value : "Custom", + hardwareCustom: targetHardware ? "" : model.hardware, profileImage: model.profileImage, tags: model.tags.join(", "), }; - }, [model]); + }, [model, hardwareOptions]); const form = useForm>({ resolver: zodResolver(EditModelSchema), @@ -136,6 +125,7 @@ export const ModelSettingsEditForm = ({ values: defaultValues, disabled: !model?.permission.canEdit, }); + const updateNamespaceModel = useUpdateNamespaceModel(); async function onSubmit(data: z.infer) { From 2c701b303bbeb8196821a2df4d6ee0db55aa7bff Mon Sep 17 00:00:00 2001 From: Alexander Petcoglo Date: Thu, 12 Dec 2024 19:10:23 +0100 Subject: [PATCH 2/2] fix: fix custom hardware selectors --- .../src/view/model/CreateModelForm.tsx | 5 ++++- .../view-model/ModelSettingsEditForm.tsx | 21 ++++++++++++++++++- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/toolkit/src/view/model/CreateModelForm.tsx b/packages/toolkit/src/view/model/CreateModelForm.tsx index ebdff20785..aa8fb88b38 100644 --- a/packages/toolkit/src/view/model/CreateModelForm.tsx +++ b/packages/toolkit/src/view/model/CreateModelForm.tsx @@ -174,7 +174,10 @@ export const CreateModelForm = () => { const newHardwareOptions: Record = {}; for (const region of modelRegions.data) { - newHardwareOptions[region.regionName] = region.hardware; + newHardwareOptions[region.regionName] = region.hardware.map((item) => ({ + ...item, + value: item.value || "Custom", + })); } setRegionOptions(newRegionOptions); diff --git a/packages/toolkit/src/view/model/view-model/ModelSettingsEditForm.tsx b/packages/toolkit/src/view/model/view-model/ModelSettingsEditForm.tsx index 43d203a62d..cff90f8abe 100644 --- a/packages/toolkit/src/view/model/view-model/ModelSettingsEditForm.tsx +++ b/packages/toolkit/src/view/model/view-model/ModelSettingsEditForm.tsx @@ -91,9 +91,28 @@ export const ModelSettingsEditForm = ({ (item) => item.regionName === model.region, ); - return targetModelRegion?.hardware ?? []; + return ( + targetModelRegion?.hardware.map((item) => ({ + ...item, + value: item.value || "Custom", + })) ?? [] + ); }, [modelRegions, model]); + React.useEffect(() => { + if (hardwareCustomValue || !model || !hardwareOptions.length) { + return; + } + + const targetHardware = hardwareOptions.find( + (h) => h.value === model.hardware, + ); + + if (!targetHardware) { + setHardwareCustomValue(model.hardware); + } + }, [model, hardwareOptions, hardwareCustomValue]); + const defaultValues = React.useMemo(() => { if (!model || hardwareOptions.length === 0) { return undefined;