feat: added ability to select runtime for playground (#3171)

* feat: added ability to select runtime for playground

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

* fix: updated runtime selection filter

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

* fix: adjusted tests with new filter change

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

* fix: removed none and enforced runtime exlusion

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

* chore: edited e2e test to comply with new runtime selection

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

* revert: model preset dependent on runtime it should always be preset

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

* feat: get the inference provider from a registered store

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

* chore: reworked getting registered providers

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

* fix: working on refractoring change to use recommended runtime from

config store

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

* fix: use config store to preselect runtime fixed tests

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

* fix: added back openvino selection

this will show on mac as well

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

* fix: added back retrieval of registered providers

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

---------

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

Author: bmahabirbu

packages/backend/src/managers/inference/inferenceManager.ts

@@ -98,6 +98,15 @@ export class InferenceManager extends Publisher<InferenceServer[]> implements Di
     return Array.from(this.#servers.values());
   }
 
+  /**
+   * Get the Unique registered Inference provider types
+   */
+
+  public getRegisteredProviders(): InferenceType[] {
+    const types: InferenceType[] = this.inferenceProviderRegistry.getAll().map(provider => provider.type);
+    return [...new Set(types)];
+  }
+
   /**
    * return an inference server
    * @param containerId the containerId of the inference server

packages/backend/src/studio-api-impl.ts

@@ -30,7 +30,7 @@ import type { TaskRegistry } from './registries/TaskRegistry';
 import type { LocalRepository } from '@shared/models/ILocalRepository';
 import type { LocalRepositoryRegistry } from './registries/LocalRepositoryRegistry';
 import path from 'node:path';
-import type { InferenceServer } from '@shared/models/IInference';
+import type { InferenceServer, InferenceType } from '@shared/models/IInference';
 import type { CreationInferenceServerOptions } from '@shared/models/InferenceServerConfig';
 import type { InferenceManager } from './managers/inference/inferenceManager';
 import type { Conversation } from '@shared/models/IPlaygroundMessage';
@@ -144,6 +144,10 @@ export class StudioApiImpl implements StudioAPI {
     return this.inferenceManager.getServers();
   }
 
+  async getRegisteredProviders(): Promise<InferenceType[]> {
+    return this.inferenceManager.getRegisteredProviders();
+  }
+
   async requestDeleteInferenceServer(...containerIds: string[]): Promise<void> {
     // Do not wait on the promise as the api would probably timeout before the user answer.
     if (containerIds.length === 0) throw new Error('At least one container id should be provided.');

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

@@ -0,0 +1,99 @@
+/**********************************************************************
+ * 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 providers: InferenceType[] = [InferenceType.LLAMA_CPP, InferenceType.OPENVINO, InferenceType.WHISPER_CPP];
+
+beforeEach(() => {
+  // mock scrollIntoView
+  window.HTMLElement.prototype.scrollIntoView = vi.fn();
+});
+
+test('Lists all runtime options', async () => {
+  const { container } = render(InferenceRuntimeSelect, {
+    value: undefined,
+    providers,
+    disabled: false,
+  });
+
+  const input = within(container).getByLabelText('Select Inference Runtime');
+  await fireEvent.pointerUp(input);
+
+  const items = container.querySelectorAll('div[class~="list-item"]');
+  const expectedOptions = providers;
+
+  expect(items.length).toBe(expectedOptions.length);
+
+  expectedOptions.forEach((option, i) => {
+    expect(items[i]).toHaveTextContent(option);
+  });
+});
+
+test('Selected value should be visible', async () => {
+  const { container } = render(InferenceRuntimeSelect, {
+    value: undefined,
+    providers,
+    disabled: false,
+  });
+
+  const input = within(container).getByLabelText('Select Inference Runtime');
+  await fireEvent.pointerUp(input);
+
+  const items = container.querySelectorAll('div[class~="list-item"]');
+  const expectedOptions = providers;
+
+  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,
+    providers,
+    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 expected = providers.filter(type => !excluded.includes(type));
+
+  expected.forEach(included => {
+    expect(itemTexts).toContain(included);
+  });
+});

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+import Select from '/@/lib/select/Select.svelte';
+import type { InferenceType } from '@shared/models/IInference';
+
+interface Props {
+  disabled?: boolean;
+  value: InferenceType | undefined;
+  providers: InferenceType[];
+  exclude?: InferenceType[];
+}
+let { value = $bindable(), disabled, providers, exclude = [] }: Props = $props();
+
+// Filter options based on optional exclude list
+const options = $derived(() =>
+  providers.filter(type => !exclude.includes(type)).map(type => ({ value: type, label: 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={options()} />

packages/frontend/src/pages/PlaygroundCreate.spec.ts

@@ -55,11 +55,24 @@ 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: {
       requestCreatePlayground: vi.fn(),
       getExtensionConfiguration: vi.fn().mockResolvedValue({}),
+      getRegisteredProviders: vi.fn().mockResolvedValue([]),
     },
     rpcBrowser: {
       subscribe: (): unknown => {
@@ -88,28 +101,58 @@ beforeEach(() => {
 
   const tasksList = writable<Task[]>([]);
   vi.mocked(tasksStore).tasks = tasksList;
+  vi.mocked(studioClient.getRegisteredProviders).mockResolvedValue([
+    InferenceType.LLAMA_CPP,
+    InferenceType.WHISPER_CPP,
+    InferenceType.OPENVINO,
+  ]);
 });
 
-test('model should be selected by default', () => {
+test('model should be selected by default when runtime is set', async () => {
   const modelsInfoList = writable<ModelInfo[]>([dummyLlamaCppModel]);
   vi.mocked(modelsInfoStore).modelsInfo = modelsInfoList;
 
   vi.mocked(studioClient.requestCreatePlayground).mockRejectedValue('error creating playground');
 
-  const { container } = render(PlaygroundCreate);
+  const { container } = render(PlaygroundCreate, { props: { exclude: [InferenceType.NONE] } });
+
+  // Select our runtime
+  const dropdown = within(container).getByLabelText('Select Inference Runtime');
+  await userEvent.click(dropdown);
+
+  const llamacppOption = within(container).getByText(InferenceType.LLAMA_CPP);
+  await userEvent.click(llamacppOption);
 
   const model = within(container).getByText(dummyLlamaCppModel.name);
   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, { props: { exclude: [InferenceType.NONE] } });
+
+  // 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 () => {
@@ -123,6 +166,13 @@ test('should display error message if createPlayground fails', async () => {
   const errorMessage = within(container).queryByLabelText('Error Message Content');
   expect(errorMessage).not.toBeInTheDocument();
 
+  // Select the runtime first
+  const runtimeDropdown = within(container).getByLabelText('Select Inference Runtime');
+  await userEvent.click(runtimeDropdown);
+
+  const runtimeOption = within(container).getByText(InferenceType.LLAMA_CPP);
+  await userEvent.click(runtimeOption);
+
   const createButton = within(container).getByTitle('Create playground');
   await userEvent.click(createButton);
 

packages/frontend/src/pages/PlaygroundCreate.svelte

@@ -14,9 +14,34 @@ 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';
+import { configuration } from '../stores/extensionConfiguration';
+
+// Get recommended runtime
+let runtime: InferenceType | undefined = undefined;
+
+// Exlude certain runtimes from selection
+export let exclude: InferenceType[] = [InferenceType.NONE, InferenceType.WHISPER_CPP];
+
+// Get registered list of providers
+let providers: InferenceType[] = [];
+
+onMount(async () => {
+  providers = await studioClient.getRegisteredProviders();
+
+  const inferenceRuntime = $configuration?.inferenceRuntime;
+  if (
+    Object.values(InferenceType).includes(inferenceRuntime as InferenceType) &&
+    !exclude.includes(inferenceRuntime as InferenceType)
+  ) {
+    runtime = inferenceRuntime as InferenceType;
+  }
+});
 
 let localModels: ModelInfo[];
-$: localModels = $modelsInfo.filter(model => model.file && model.backend !== InferenceType.WHISPER_CPP);
+$: 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;
@@ -30,10 +55,11 @@ 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];
-  }
+// Preset model selection depending on runtime
+$: if (localModels.length > 0) {
+  model = localModels[0];
+} else {
+  model = undefined;
 }
 
 function openModelsPage(): void {
@@ -145,6 +171,12 @@ export function goToUpPage(): void {
             placeholder="Leave blank to generate a name"
             aria-label="playgroundName" />
 
+          <!-- 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} providers={providers} exclude={exclude} />
+
           <!-- 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} />

packages/shared/src/StudioAPI.ts

@@ -17,6 +17,7 @@
  ***********************************************************************/
 
 import type { ModelInfo } from './models/IModelInfo';
+import type { InferenceType } from '@shared/models/IInference';
 import type { ApplicationCatalog } from './models/IApplicationCatalog';
 import type { OpenDialogOptions, Uri } from '@podman-desktop/api';
 import type { ApplicationState } from './models/IApplicationState';
@@ -121,6 +122,11 @@ export interface StudioAPI {
    */
   getInferenceServers(): Promise<InferenceServer[]>;
 
+  /**
+   * Get inference providers
+   */
+  getRegisteredProviders(): Promise<InferenceType[]>;
+
   /**
    * Request to start an inference server
    * @param options The options to use