feat(create-service): adding inference runtime select

packages/frontend/src/lib/select/InferenceRuntimeSelect.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+import Select from '/@/lib/select/Select.svelte';
+import { InferenceType } from '@shared/models/IInference';
+
+interface Props {
+  disabled?: boolean;
+  value: InferenceType | undefined;
+}
+
+let { value = $bindable(), disabled }: Props = $props();
+
+const options = Object.values(InferenceType).filter(type => type !== InferenceType.NONE) as Array<InferenceType>;
+
+function handleOnChange(nValue: { value: string } | undefined): void {
+  if (nValue) {
+    value = nValue.value as InferenceType;
+  } else {
+    value = undefined;
+  }
+}
+</script>
+
+<Select
+  label="Select Inference Runtime"
+  name="select-inference-runtime"
+  disabled={disabled}
+  value={value ? { label: value, value: value } : undefined}
+  onchange={handleOnChange}
+  placeholder="Select Inference Runtime to use"
+  items={options.map(type => ({
+    value: type,
+    label: type,
+  }))} />

packages/frontend/src/pages/CreateService.svelte

@@ -16,6 +16,8 @@
 import ContainerProviderConnectionSelect from '/@/lib/select/ContainerProviderConnectionSelect.svelte';
 import ContainerConnectionWrapper from '/@/lib/notification/ContainerConnectionWrapper.svelte';
 import TrackedTasks from '/@/lib/progress/TrackedTasks.svelte';
+import InferenceRuntimeSelect from '/@/lib/select/InferenceRuntimeSelect.svelte';
+import { InferenceType } from '@shared/models/IInference';
 
 interface Props {
   // The tracking id is a unique identifier provided by the
@@ -25,9 +27,15 @@
 
 let { trackingId }: Props = $props();
 
+// The runtime to use
+let runtime: InferenceType = $state(InferenceType.LLAMA_CPP);
+
 // List of the models available locally
 let localModels: ModelInfo[] = $derived($modelsInfo.filter(model => model.file));
 
+// List of the models filtered by runtime
+let filteredModels: Array<ModelInfo> = $derived(localModels.filter(model => model.backend === runtime));
+
 // The container provider connection to use
 let containerProviderConnection: ContainerProviderConnectionInfo | undefined = $state(undefined);
 
@@ -51,9 +59,14 @@
 let loading = $derived(trackingId !== undefined && !errorMsg);
 
 $effect(() => {
+  // remove any incompatible model
+  if (model?.backend !== runtime) {
+    model = undefined;
+  }
+
   // Select default model
-  if (!model && localModels.length > 0) {
-    model = localModels[0];
+  if (!model && filteredModels.length > 0) {
+    model = filteredModels[0];
   }
 
   // Select default connection
@@ -75,7 +88,7 @@
 // Submit method when the form is valid
 const submit = async (): Promise<void> => {
   errorMsg = undefined;
   if (model === undefined) throw new Error('model id not valid.');
   if (containerPort === undefined) throw new Error('invalid container port');
 
   try {
@@ -129,6 +142,7 @@
   if (!mModel) return;
 
   model = mModel;
+  runtime = mModel.backend as InferenceType;
 }
 
 onMount(() => {
@@ -145,6 +159,9 @@
   const queryModelId = router.location.query.get('model-id');
   if (queryModelId !== undefined && typeof queryModelId === 'string') {
     model = localModels.find(mModel => mModel.id === queryModelId);
+    if (model) {
+      runtime = model.backend as InferenceType;
+    }
   }
 });
 
@@ -182,6 +199,11 @@
       <!-- form -->
       <div class="bg-[var(--pd-content-card-bg)] m-5 space-y-6 px-8 sm:pb-6 xl:pb-8 rounded-lg h-fit">
         <div class="w-full">
+          <!-- inference runtime -->
+          <label for="inference-runtime" class="pt-4 block mb-2 font-bold text-[var(--pd-content-card-header-text)]"
+            >Inference Runtime</label>
+          <InferenceRuntimeSelect bind:value={runtime} />
+
           <!-- container provider connection input -->
           {#if startedContainerProviderConnectionInfo.length > 1}
             <label for="model" class="pt-4 block mb-2 font-bold text-[var(--pd-content-card-header-text)]"
@@ -193,8 +215,8 @@
 
           <!-- model input -->
           <label for="model" class="pt-4 block mb-2 font-bold text-[var(--pd-content-card-header-text)]">Model</label>
-          <ModelSelect models={localModels} disabled={loading} bind:value={model} />
-          {#if localModels.length === 0}
+          <ModelSelect models={filteredModels} disabled={loading} bind:value={model} />
+          {#if filteredModels.length === 0}
             <div class="text-red-500 p-1 flex flex-row items-center">
               <Fa size="1.1x" class="cursor-pointer text-red-500" icon={faExclamationCircle} />
               <div role="alert" aria-label="Error Message Content" class="ml-2">