feat: added ability to select runtime for playground

bmahabirbu · bmahabirbu · commit bc087d798af4 · 2025-06-12T01:59:37.000-04:00
Signed-off-by: Brian &lt;bmahabir@bu.edu&gt;
diff --git a/packages/frontend/src/lib/select/InferenceRuntimeSelect.spec.ts b/packages/frontend/src/lib/select/InferenceRuntimeSelect.spec.ts
@@ -0,0 +1,118 @@
+/**********************************************************************
+ * Copyright (C) 2025 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import '@testing-library/jest-dom/vitest';
+import { beforeEach, vi, test, expect } from 'vitest';
+import { render, fireEvent, within } from '@testing-library/svelte';
+import InferenceRuntimeSelect from '/@/lib/select/InferenceRuntimeSelect.svelte';
+import { InferenceType } from '@shared/models/IInference';
+
+const getExpectedOptions = (): InferenceType[] => Object.values(InferenceType).filter(t => t !== InferenceType.NONE);
+
+beforeEach(() => {
+  // mock scrollIntoView
+  window.HTMLElement.prototype.scrollIntoView = vi.fn();
+});
+
+test('Lists all runtime options', async () => {
+  const { container } = render(InferenceRuntimeSelect, {
+    value: undefined,
+    disabled: false,
+  });
+
+  const input = within(container).getByLabelText('Select Inference Runtime');
+  await fireEvent.pointerUp(input);
+
+  const items = container.querySelectorAll('div[class~="list-item"]');
+  const expectedOptions = getExpectedOptions();
+
+  expect(items.length).toBe(expectedOptions.length);
+
+  expectedOptions.forEach((option, i) => {
+    expect(items[i]).toHaveTextContent(option);
+  });
+});
+
+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 selected = within(container).getByText(InferenceType.ALL);
+  expect(selected).toBeInTheDocument();
+});
+
+test('Selected value should be visible', async () => {
+  const { container } = render(InferenceRuntimeSelect, {
+    value: undefined,
+    disabled: false,
+  });
+
+  const input = within(container).getByLabelText('Select Inference Runtime');
+  await fireEvent.pointerUp(input);
+
+  const items = container.querySelectorAll('div[class~="list-item"]');
+  const expectedOptions = getExpectedOptions();
+
+  await fireEvent.click(items[0]);
+
+  const valueContainer = container.querySelector('.value-container');
+  if (!(valueContainer instanceof HTMLElement)) throw new Error('Missing value container');
+
+  const selectedLabel = within(valueContainer).getByText(expectedOptions[0]);
+  expect(selectedLabel).toBeDefined();
+});
+
+test('Exclude specific runtime from list', async () => {
+  const excluded = [InferenceType.WHISPER_CPP, InferenceType.OPENVINO];
+
+  const { container } = render(InferenceRuntimeSelect, {
+    value: undefined,
+    disabled: false,
+    exclude: excluded,
+  });
+
+  const input = within(container).getByLabelText('Select Inference Runtime');
+  await fireEvent.pointerUp(input);
+
+  const items = container.querySelectorAll('div[class~="list-item"]');
+  const itemTexts = Array.from(items).map(item => item.textContent?.trim());
+
+  excluded.forEach(excludedType => {
+    expect(itemTexts).not.toContain(excludedType);
+  });
+
+  const includedTypes = Object.values(InferenceType).filter(t => t !== InferenceType.NONE && !excluded.includes(t));
+
+  includedTypes.forEach(included => {
+    expect(itemTexts).toContain(included);
+  });
+});
diff --git a/packages/frontend/src/lib/select/InferenceRuntimeSelect.svelte b/packages/frontend/src/lib/select/InferenceRuntimeSelect.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+import Select from '/@/lib/select/Select.svelte';
+import { InferenceType } from '@shared/models/IInference';
+
+interface Props {
+  disabled?: boolean;
+  value: InferenceType | undefined;
+  exclude?: InferenceType[];
+}
+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));
+
+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={filteredOptions.map(type => ({
+    value: type,
+    label: type,
+  }))} />
diff --git a/packages/frontend/src/pages/PlaygroundCreate.spec.ts b/packages/frontend/src/pages/PlaygroundCreate.spec.ts
@@ -55,6 +55,18 @@ const dummyWhisperCppModel: ModelInfo = {
   backend: InferenceType.WHISPER_CPP,
 };
 
+const dummyOpenVinoModel: ModelInfo = {
+  id: 'openvino-model-id',
+  name: 'Dummy Openvino model',
+  file: {
+    file: 'file',
+    path: path.resolve(os.tmpdir(), 'path'),
+  },
+  properties: {},
+  description: '',
+  backend: InferenceType.OPENVINO,
+};
+
 vi.mock('../utils/client', async () => {
   return {
     studioClient: {
@@ -102,14 +114,31 @@ test('model should be selected by default', () => {
   expect(model).toBeInTheDocument();
 });
 
-test('models with incompatible backend should not be listed', async () => {
-  const modelsInfoList = writable<ModelInfo[]>([dummyWhisperCppModel]);
+test('selecting a runtime filters the displayed models', async () => {
+  const modelsInfoList = writable<ModelInfo[]>([dummyLlamaCppModel, dummyWhisperCppModel, dummyOpenVinoModel]);
+  vi.mocked(modelsInfoStore).modelsInfo = modelsInfoList;
+  const { container } = render(PlaygroundCreate);
+
+  // Select our runtime
+  const dropdown = within(container).getByLabelText('Select Inference Runtime');
+  await userEvent.click(dropdown);
+
+  const openvinoOption = within(container).getByText(InferenceType.OPENVINO);
+  await userEvent.click(openvinoOption);
+
+  expect(within(container).queryByText(dummyOpenVinoModel.name)).toBeInTheDocument();
+  expect(within(container).queryByText(dummyLlamaCppModel.name)).toBeNull();
+  expect(within(container).queryByText(dummyWhisperCppModel.name)).toBeNull();
+});
+
+test('should show warning when no local models are available', () => {
+  const modelsInfoList = writable<ModelInfo[]>([]);
   vi.mocked(modelsInfoStore).modelsInfo = modelsInfoList;
 
   const { container } = render(PlaygroundCreate);
 
-  const model = within(container).queryByText(dummyWhisperCppModel.name);
-  expect(model).toBeNull();
+  const warning = within(container).getByText(/You don't have any models downloaded/);
+  expect(warning).toBeInTheDocument();
 });
 
 test('should display error message if createPlayground fails', async () => {
diff --git a/packages/frontend/src/pages/PlaygroundCreate.svelte b/packages/frontend/src/pages/PlaygroundCreate.svelte
@@ -14,9 +14,19 @@ import type { Unsubscriber } from 'svelte/store';
 import { Button, ErrorMessage, FormPage, Input } from '@podman-desktop/ui-svelte';
 import ModelSelect from '/@/lib/select/ModelSelect.svelte';
 import { InferenceType } from '@shared/models/IInference';
+import InferenceRuntimeSelect from '/@/lib/select/InferenceRuntimeSelect.svelte';
 
+// Preset the runtime selection
+let runtime: InferenceType;
+runtime = InferenceType.ALL;
+// exlude whisper.cpp from selection
+let exclude: InferenceType[] = [InferenceType.WHISPER_CPP];
 let localModels: ModelInfo[];
-$: localModels = $modelsInfo.filter(model => model.file && model.backend !== InferenceType.WHISPER_CPP);
+// 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);
 $: availModels = $modelsInfo.filter(model => !model.file);
 let model: ModelInfo | undefined = undefined;
 let submitted: boolean = false;
@@ -30,10 +40,10 @@ let trackingId: string | undefined = undefined;
 // The trackedTasks are the tasks linked to the trackingId
 let trackedTasks: Task[] = [];
 
-$: {
-  if (!model && localModels.length > 0) {
-    model = localModels[0];
-  }
+$: if (localModels.length > 0) {
+  model = localModels[0];
+} else {
+  model = undefined;
 }
 
 function openModelsPage(): void {
@@ -145,33 +155,47 @@ export function goToUpPage(): void {
             placeholder="Leave blank to generate a name"
             aria-label="playgroundName" />
 
-          <!-- 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}
+          <!-- 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} exclude={exclude} />
+          {#if !runtime}
             <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
-                >.
+                Please select an inference runtime before selecting a model.
               </div>
             </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
-                >.
+          {: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>
               </div>
-            </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}
           {/if}
         </div>
         {#if errorMsg !== undefined}
diff --git a/packages/shared/src/models/IInference.ts b/packages/shared/src/models/IInference.ts
@@ -21,13 +21,15 @@ 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',
 };
 
