fix: fix model hardware options

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";

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 = {

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}
         />
         <p className="product-body-text-2-regular text-semantic-fg-secondary">
           {model.description}

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,15 @@ export const CreateModelForm = () => {
           value: item.regionName,
           title: getModelRegionToolkit(item.regionName) || "Unknown",
         }));
-      const newHardwareOptions: Record<string, Option[]> =
-        modelRegions.data.reduce((acc, curr) => {
-          const regionHardware = curr.hardware.map((item) => ({
-            value: item,
-            title: getModelHardwareToolkit(item),
-          }));
-
-          return {
-            ...acc,
-            [curr.regionName]: regionHardware,
-          };
-        }, {});
+
+      const newHardwareOptions: Record<string, Option[]> = {};
+
+      for (const region of modelRegions.data) {
+        newHardwareOptions[region.regionName] = region.hardware.map((item) => ({
+          ...item,
+          value: item.value || "Custom",
+        }));
+      }
 
       setRegionOptions(newRegionOptions);
       setHardwareOptions(newHardwareOptions);
@@ -498,9 +494,7 @@ export const CreateModelForm = () => {
 
                               form.setValue("hardware", targetValue);
                             }
-                            {
-                              updateCustomHardware("");
-                            }
+                            updateCustomHardware("");
                           }}
                         >
                           <Select.Trigger className="mt-auto w-full">

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,40 @@ 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.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) {
+    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,19 +131,20 @@ 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<z.infer<typeof EditModelSchema>>({
     resolver: zodResolver(EditModelSchema),
     mode: "onChange",
     values: defaultValues,
     disabled: !model?.permission.canEdit,
   });
+
   const updateNamespaceModel = useUpdateNamespaceModel();
 
   async function onSubmit(data: z.infer<typeof EditModelSchema>) {