feat: added checkbox to filter out models based on default runtime

Signed-off-by: Evzen Gasta <[email protected]>

Author: gastoner

packages/backend/src/registries/ConfigurationRegistry.ts

@@ -55,7 +55,7 @@ export class ConfigurationRegistry extends Publisher<ExtensionConfiguration> imp
       modelsPath: this.getModelsPath(),
       experimentalGPU: this.#configuration.get<boolean>('experimentalGPU') ?? false,
       apiPort: this.#configuration.get<number>('apiPort') ?? API_PORT_DEFAULT,
-      inferenceRuntime: this.#configuration.get<string>('inferenceRuntime') ?? 'none',
+      inferenceRuntime: this.#configuration.get<string>('inferenceRuntime') ?? '',
       experimentalTuning: this.#configuration.get<boolean>('experimentalTuning') ?? false,
       modelUploadDisabled: this.#configuration.get<boolean>('modelUploadDisabled') ?? false,
       showGPUPromotion: this.#configuration.get<boolean>('showGPUPromotion') ?? true,

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

@@ -121,26 +121,6 @@ test('ModelSelect should list all models provided', async () => {
   expect(items[1]).toHaveTextContent(fakeRemoteModel.name);
 });
 
-test('ModelSelect should list all models based on selected runtime', async () => {
-  const { container } = render(ModelSelect, {
-    value: undefined,
-    disabled: undefined,
-    models: [fakeRecommendedModel, fakeRemoteModelWhisper, fakeRemoteModel, fakeRemoteModelNone],
-    recommended: [],
-  });
-
-  // first get the select input
-  const input = within(container).getByLabelText('Select Model');
-  await fireEvent.pointerUp(input); // they are using the pointer up event instead of click.
-
-  // get all options available
-  const items = container.querySelectorAll('div[class~="list-item"]');
-  // ensure we have two options
-  expect(items.length).toBe(2);
-  expect(items[0]).toHaveTextContent(fakeRecommendedModel.name);
-  expect(items[1]).toHaveTextContent(fakeRemoteModel.name);
-});
-
 test('ModelSelect should set star icon next to recommended model', async () => {
   const { container } = render(ModelSelect, {
     value: undefined,
@@ -194,6 +174,7 @@ test('ModelSelect should filter out models based on selected default runtime', a
       fakeRecommendedRemoteModel,
     ],
     recommended: [],
+    showPreferredRuntime: true,
   });
 
   // first get the select input
@@ -208,3 +189,23 @@ test('ModelSelect should filter out models based on selected default runtime', a
   expect(items[1]).toHaveTextContent(fakeRemoteModel.name);
   expect(items[2]).toHaveTextContent(fakeRecommendedRemoteModel.name);
 });
+
+test('ModelSelect should list all models when is showPreferedRuntime set to false', async () => {
+  const { container } = render(ModelSelect, {
+    value: undefined,
+    disabled: undefined,
+    models: [fakeRecommendedModel, fakeRemoteModel],
+    recommended: [],
+  });
+
+  // first get the select input
+  const input = within(container).getByLabelText('Select Model');
+  await fireEvent.pointerUp(input); // they are using the pointer up event instead of click.
+
+  // get all options available
+  const items = container.querySelectorAll('div[class~="list-item"]');
+  // ensure we have two options
+  expect(items.length).toBe(2);
+  expect(items[0]).toHaveTextContent(fakeRecommendedModel.name);
+  expect(items[1]).toHaveTextContent(fakeRemoteModel.name);
+});

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

@@ -20,9 +20,13 @@ interface Props {
    * Current value selected
    */
   value: ModelInfo | undefined;
+  /**
+   * Filters out prefered runtime based on preferences
+   */
+  showPreferredRuntime?: boolean;
 }
 
-let { disabled = false, recommended, models, value = $bindable() }: Props = $props();
+let { disabled = false, recommended, models, value = $bindable(), showPreferredRuntime = false }: Props = $props();
 
 function getModelSortingScore(modelInfo: ModelInfo): number {
   let score: number = 0;
@@ -51,15 +55,16 @@ let defaultRuntime: string | undefined = $state();
 
 onMount(() => {
   return configuration.subscribe(values => {
-    if (values?.inferenceRuntime) {
+    if (values?.inferenceRuntime && values?.inferenceRuntime !== '') {
       defaultRuntime = values.inferenceRuntime;
     }
   });
 });
 
 function filterModel(model: ModelInfo): boolean {
   // If the defaultRuntime is undefined we should not filter any model
-  if (!defaultRuntime) return true;
+  // Or if the user does not want to filter preferred runtime
+  if (!defaultRuntime || !showPreferredRuntime) return true;
 
   return model.backend === defaultRuntime;
 }

packages/frontend/src/pages/StartRecipe.svelte

@@ -7,7 +7,7 @@ import type { LocalRepository } from '@shared/models/ILocalRepository';
 import { findLocalRepositoryByRecipeId } from '/@/utils/localRepositoriesUtils';
 import { localRepositories } from '/@/stores/localRepositories';
 import { modelsInfo } from '/@/stores/modelsInfo';
-import { Button, ErrorMessage, FormPage } from '@podman-desktop/ui-svelte';
+import { Button, Checkbox, ErrorMessage, FormPage } from '@podman-desktop/ui-svelte';
 import type { ModelInfo } from '@shared/models/IModelInfo';
 import { InferenceType } from '@shared/models/IInference';
 import { studioClient } from '/@/utils/client';
@@ -52,6 +52,7 @@ let loading = $state(false);
 let completed: boolean = $state(false);
 
 let errorMsg: string | undefined = $state(undefined);
+let showPreferredRuntime: boolean = $state(false);
 
 $effect(() => {
   // Select default connection
@@ -185,9 +186,20 @@ function handleOnClick(): void {
             {/if}
 
             <!-- model form -->
-            <label for="select-model" class="pt-4 block mb-2 font-bold text-[var(--pd-content-card-header-text)]"
-              >Model</label>
-            <ModelSelect bind:value={model} disabled={loading} recommended={recipe.recommended} models={models} />
+            <div class="flex w-full pt-4">
+              <label for="select-model" class="pt-0 block mb-2 font-bold text-[var(--pd-content-card-header-text)]"
+                >Model</label>
+              <Checkbox
+                class="text-[var(--pd-label-text)] pt-0 mb-2 ml-auto"
+                bind:checked={showPreferredRuntime}
+                title="Show only preferred runtime">Show only preferred runtime</Checkbox>
+            </div>
+            <ModelSelect
+              bind:value={model}
+              disabled={loading}
+              recommended={recipe.recommended}
+              models={models}
+              showPreferredRuntime={showPreferredRuntime} />
             {#if model && model.file === undefined}
               <div class="text-gray-800 text-sm flex items-center">
                 <Fa class="mr-2" icon={faWarning} />