feat: implemented NIM model name selection dropdown

Signed-off-by: Olga Lavtar <[email protected]>
RHEcosystemAppEng · Jun 26, 2024 · 9ce6453 · 9ce6453
1 parent 9387090
commit 9ce6453
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 72 deletions.
diff --git a/frontend/src/pages/modelServing/screens/projects/EmptyNIMModelServingCard.tsx b/frontend/src/pages/modelServing/screens/projects/EmptyNIMModelServingCard.tsx
@@ -7,7 +7,7 @@ import {
   CardTitle,
   Text,
   TextContent,
-  TextVariants
+  TextVariants,
 } from '@patternfly/react-core';
 import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
 import { ServingRuntimePlatform } from '~/types';
@@ -65,7 +65,9 @@ const EmptyNIMModelServingCard: React.FC = () => {
           </TextContent>
         </CardTitle>
         <CardBody>
-          Models are deployed using NVIDIA NIM microservices. Choose this option when you want to deploy your model within a NIM container. Please provide the API key to authenticate with the NIM service.
+          Models are deployed using NVIDIA NIM microservices. Choose this option when you want to
+          deploy your model within a NIM container. Please provide the API key to authenticate with
+          the NIM service.
         </CardBody>
         <CardFooter>
           <Bullseye>

diff --git a/frontend/src/pages/modelServing/screens/projects/NIMServiceModal/NIMModelListSection.tsx b/frontend/src/pages/modelServing/screens/projects/NIMServiceModal/NIMModelListSection.tsx
@@ -1,75 +1,33 @@
 import * as React from 'react';
+import { useEffect, useState } from 'react';
 import { FormGroup } from '@patternfly/react-core';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
 import { CreatingInferenceServiceObject } from '~/pages/modelServing/screens/types';
 import SimpleDropdownSelect from '~/components/SimpleDropdownSelect';
+import { fetchNIMModelNames } from '~/pages/modelServing/screens/projects/utils';
 
 type NIMModelListSectionProps = {
   data: CreatingInferenceServiceObject;
   setData: UpdateObjectAtPropAndValue<CreatingInferenceServiceObject>;
   isEditing?: boolean;
 };
 
-const NIMModelListSection: React.FC<NIMModelListSectionProps> = ({
-  data,
-  setData,
-  isEditing,
-}) => {
+const NIMModelListSection: React.FC<NIMModelListSectionProps> = ({ data, setData, isEditing }) => {
+  const [options, setOptions] = useState<{ key: string; label: string }[]>([]);
 
-  const options = [
-    {
-      key: 'liama-2-7b',
-      label: 'Liama-2-7b',
-    },
-    {
-      key: 'liama-2-13b',
-      label: 'Liama-2-13b',
-    },
-    {
-      key: 'liama-2-70b',
-      label: 'Liama-2-70b',
-    },
-    {
-      key: 'liama-2-7b-chat',
-      label: 'Liama-2-7b-chat',
-    },
-    {
-      key: 'liama-2-13b-chat',
-      label: 'Liama-2-13b-chat',
-    },
-    {
-      key: 'liama-2-70b-chat',
-      label: 'Liama-2-70b-chat',
-    },
-    {
-      key:'mistral-7b-instruct',
-      label: 'Mistral-7b-instruct',
-    },
-    {
-      key:'mixtral-8x7b',
-      label: 'Mixtral-8x7b',
-    },
-    {
-      key:'Nemotron-8b-base',
-      label: 'Nemotron-8b-base',
-    },
-    {
-      key:'nemotron-43b-chat',
-      label: 'Nemotron-43b-chat',
-    },
-    {
-      key:'nemotron-43b-instruct',
-      label: 'Nemotron-43b-instruct',
-    },
-    {
-      key:'starcoder',
-      label: 'Starcoder',
-    },
-    {
-      key:'Starcoderplus',
-      label: 'Starcoderplus',
-    }
-  ];
+  useEffect(() => {
+    const getModelNames = async () => {
+      const modelInfos = await fetchNIMModelNames();
+      if (modelInfos !== undefined) {
+        const fetchedOptions = modelInfos.map((modelInfo) => ({
+          key: modelInfo.name,
+          label: `${modelInfo.displayName} - ${modelInfo.latestTag}`,
+        }));
+        setOptions(fetchedOptions);
+      }
+    };
+    getModelNames();
+  }, []);
 
   return (
     <FormGroup label="NIM model name" fieldId="nim-model-list-selection" isRequired>
@@ -80,11 +38,7 @@ const NIMModelListSection: React.FC<NIMModelListSectionProps> = ({
         dataTestId="nim-model-list-selection"
         aria-label="Select NVIDIA model"
         options={options}
-        placeholder={
-          isEditing
-            ? data.name
-            : 'Select NVIDIA model'
-        }
+        placeholder={isEditing ? data.name : 'Select NVIDIA model'}
         value={data.format.name}
         onChange={(name) => {
           setData('format', { name });

diff --git a/frontend/src/pages/modelServing/screens/projects/utils.ts b/frontend/src/pages/modelServing/screens/projects/utils.ts
@@ -7,19 +7,15 @@ import {
   SecretKind,
   ServingRuntimeKind,
 } from '~/k8sTypes';
-import {
-  DataConnection,
-  NamespaceApplicationCase,
-  UpdateObjectAtPropAndValue,
-} from '~/pages/projects/types';
+import { DataConnection, NamespaceApplicationCase, UpdateObjectAtPropAndValue } from '~/pages/projects/types';
 import useGenericObjectState from '~/utilities/useGenericObjectState';
 import {
   CreatingInferenceServiceObject,
   CreatingServingRuntimeObject,
   InferenceServiceStorageType,
+  ModelServingSize,
   ServingPlatformStatuses,
   ServingRuntimeEditInfo,
-  ModelServingSize,
 } from '~/pages/modelServing/screens/types';
 import { ServingRuntimePlatform } from '~/types';
 import { DEFAULT_MODEL_SERVER_SIZES } from '~/pages/modelServing/screens/const';
@@ -41,12 +37,16 @@ import {
   createInferenceService,
   createSecret,
   createServingRuntime,
+  getConfigMap,
   updateInferenceService,
   updateServingRuntime,
 } from '~/api';
 import { isDataConnectionAWS } from '~/pages/projects/screens/detail/data-connections/utils';
 import { removeLeadingSlash } from '~/utilities/string';
 
+const NAMESPACE = 'redhat-ods-applications';
+const CONFIGMAP = 'nvidia-nim-images-data';
+
 export const getServingRuntimeSizes = (config: DashboardConfigKind): ModelServingSize[] => {
   let sizes = config.spec.modelServerSizes || [];
   if (sizes.length === 0) {
@@ -533,3 +533,33 @@ export const filterOutConnectionsWithoutBucket = (
   connections.filter(
     (obj) => isDataConnectionAWS(obj) && obj.data.data.AWS_S3_BUCKET.trim() !== '',
   );
+
+export interface ModelInfo {
+  name: string;
+  displayName: string;
+  shortDescription: string;
+  namespace: string;
+  tags: string[];
+  latestTag: string;
+  updatedDate: string;
+}
+
+export const fetchNIMModelNames = async (): Promise<ModelInfo[] | undefined> => {
+  const configMap = await getConfigMap(NAMESPACE, CONFIGMAP);
+  if (configMap.data) {
+    const modelInfos: ModelInfo[] = Object.entries(configMap.data).map(([key, value]) => {
+      const modelData = JSON.parse(value); // Parse the JSON string
+      return {
+        name: key,
+        displayName: modelData.displayName,
+        shortDescription: modelData.shortDescription,
+        namespace: modelData.namespace,
+        tags: modelData.tags,
+        latestTag: modelData.latestTag,
+        updatedDate: modelData.updatedDate,
+      };
+    });
+    return modelInfos;
+  }
+  return undefined;
+};