fix: updated runtime selection filter

Signed-off-by: Brian <[email protected]>

Author: bmahabirbu

packages/frontend/src/lib/select/InferenceRuntimeSelect.spec.ts

@@ -48,31 +48,6 @@ test('Lists all runtime options', async () => {
   });
 });
 
-test('Selecting "all" works correctly', async () => {
-  const { container } = render(InferenceRuntimeSelect, {
-    value: undefined,
-    disabled: false,
-  });
-
-  const input = within(container).getByLabelText('Select Inference Runtime');
-  await fireEvent.pointerUp(input);
-
-  const allOption = Array.from(container.querySelectorAll('div[class~="list-item"]')).find(item =>
-    item.textContent?.includes(InferenceType.ALL),
-  );
-
-  expect(allOption).toBeDefined();
-  if (allOption) {
-    await fireEvent.click(allOption);
-  }
-
-  const valueContainer = container.querySelector('.value-container');
-  if (!(valueContainer instanceof HTMLElement)) throw new Error('Missing value container');
-
-  const selectedLabel = within(valueContainer).getByText(InferenceType.ALL);
-  expect(selectedLabel).toBeInTheDocument();
-});
-
 test('Selected value should be visible', async () => {
   const { container } = render(InferenceRuntimeSelect, {
     value: undefined,

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

@@ -9,9 +9,8 @@ interface Props {
 }
 let { value = $bindable(), disabled, exclude = [] }: Props = $props();
 
-// Filter options based on exclude list
-const options = Object.values(InferenceType).filter(type => type !== InferenceType.NONE) as Array<InferenceType>;
-const filteredOptions = options.filter(type => type === InferenceType.ALL || !exclude.includes(type));
+// Filter options based on optional exclude list
+const options = Object.values(InferenceType).filter(type => !exclude.includes(type));
 
 function handleOnChange(nValue: { value: string } | undefined): void {
   if (nValue) {
@@ -29,7 +28,7 @@ function handleOnChange(nValue: { value: string } | undefined): void {
   value={value ? { label: value, value: value } : undefined}
   onchange={handleOnChange}
   placeholder="Select Inference Runtime to use"
-  items={filteredOptions.map(type => ({
+  items={options.map(type => ({
     value: type,
     label: type,
   }))} />

packages/frontend/src/pages/PlaygroundCreate.svelte

@@ -17,16 +17,14 @@ import { InferenceType } from '@shared/models/IInference';
 import InferenceRuntimeSelect from '/@/lib/select/InferenceRuntimeSelect.svelte';
 
 // Preset the runtime selection
-let runtime: InferenceType;
-runtime = InferenceType.ALL;
+let runtime: InferenceType | undefined = undefined;
 // exlude whisper.cpp from selection
 let exclude: InferenceType[] = [InferenceType.WHISPER_CPP];
 let localModels: ModelInfo[];
 // Special case for "ALL" returns runtimes with optional exclution
-$: localModels =
-  runtime === InferenceType.ALL
-    ? $modelsInfo.filter(model => model.file && !exclude.includes(model.backend as InferenceType))
-    : $modelsInfo.filter(model => model.file && model.backend === runtime);
+$: localModels = $modelsInfo.filter(
+  model => model.file && (!runtime || model.backend === runtime) && !exclude.includes(model.backend as InferenceType),
+);
 $: availModels = $modelsInfo.filter(model => !model.file);
 let model: ModelInfo | undefined = undefined;
 let submitted: boolean = false;
@@ -160,42 +158,33 @@ export function goToUpPage(): void {
             Inference Runtime
           </label>
           <InferenceRuntimeSelect bind:value={runtime} exclude={exclude} />
-          {#if !runtime}
+          <!-- 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={submitted} bind:value={model} />
+          {#if localModels.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">
-                Please select an inference runtime before selecting a model.
+                You don't have any models downloaded. You can download them in <a
+                  href="javascript:void(0);"
+                  class="underline"
+                  title="Models page"
+                  on:click={openModelsPage}>models page</a
+                >.
               </div>
             </div>
-          {:else}
-            <!-- 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={submitted} bind:value={model} />
-            {#if localModels.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">
-                  You don't have any models downloaded. You can download them in <a
-                    href="javascript:void(0);"
-                    class="underline"
-                    title="Models page"
-                    on:click={openModelsPage}>models page</a
-                  >.
-                </div>
+          {:else if availModels.length > 0}
+            <div class="text-sm p-1 flex flex-row items-center text-[var(--pd-content-card-text)]">
+              <Fa size="1.1x" class="cursor-pointer" icon={faInfoCircle} />
+              <div role="alert" aria-label="Info Message Content" class="ml-2">
+                Other models are available, but must be downloaded from the <a
+                  href="javascript:void(0);"
+                  class="underline"
+                  title="Models page"
+                  on:click={openModelsPage}>models page</a
+                >.
               </div>
-            {:else if availModels.length > 0}
-              <div class="text-sm p-1 flex flex-row items-center text-[var(--pd-content-card-text)]">
-                <Fa size="1.1x" class="cursor-pointer" icon={faInfoCircle} />
-                <div role="alert" aria-label="Info Message Content" class="ml-2">
-                  Other models are available, but must be downloaded from the <a
-                    href="javascript:void(0);"
-                    class="underline"
-                    title="Models page"
-                    on:click={openModelsPage}>models page</a
-                  >.
-                </div>
-              </div>
-            {/if}
+            </div>
           {/if}
         </div>
         {#if errorMsg !== undefined}

packages/shared/src/models/IInference.ts

@@ -21,15 +21,13 @@ export enum InferenceType {
   LLAMA_CPP = 'llama-cpp',
   WHISPER_CPP = 'whisper-cpp',
   OPENVINO = 'openvino',
-  ALL = 'all',
   NONE = 'none',
 }
 
 const InferenceTypeLabel = {
   'llama-cpp': 'llamacpp',
   'whisper-cpp': 'whispercpp',
   openvino: 'openvino',
-  all: 'all',
   none: 'None',
 };