feat: display runtime for playgrounds (#3007)

Signed-off-by: Philippe Martin <[email protected]>

Author: feloy

packages/frontend/src/lib/table/playground/PlaygroundColumnRuntime.spec.ts

@@ -0,0 +1,37 @@
+/**********************************************************************
+ * 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 { test, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { InferenceType } from '@shared/models/IInference';
+import type { ConversationWithBackend } from '/@/stores/conversations';
+import PlaygroundColumnRuntime from './PlaygroundColumnRuntime.svelte';
+
+beforeEach(() => {
+  vi.resetAllMocks();
+});
+
+test('should display label for backend', async () => {
+  render(PlaygroundColumnRuntime, {
+    object: {
+      backend: InferenceType.LLAMA_CPP,
+    } as ConversationWithBackend,
+  });
+
+  screen.getByText('llamacpp');
+});

packages/frontend/src/lib/table/playground/PlaygroundColumnRuntime.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+import { inferenceTypeLabel } from '@shared/models/IInference';
+import Badge from '../../Badge.svelte';
+import type { ConversationWithBackend } from '/@/stores/conversations';
+
+export let object: ConversationWithBackend;
+</script>
+
+<Badge content={inferenceTypeLabel(object.backend)} />

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

@@ -23,12 +23,12 @@ import Playground from './Playground.svelte';
 import { studioClient } from '../utils/client';
 import type { ModelInfo } from '@shared/models/IModelInfo';
 import { fireEvent } from '@testing-library/dom';
-import type { AssistantChat, Conversation, ModelUsage, PendingChat, UserChat } from '@shared/models/IPlaygroundMessage';
+import type { AssistantChat, ModelUsage, PendingChat, UserChat } from '@shared/models/IPlaygroundMessage';
 import * as conversationsStore from '/@/stores/conversations';
 import * as inferenceServersStore from '/@/stores/inferenceServers';
 import { readable, writable } from 'svelte/store';
 import userEvent from '@testing-library/user-event';
-import type { InferenceServer } from '@shared/models/IInference';
+import { InferenceType, type InferenceServer } from '@shared/models/IInference';
 
 vi.mock('../utils/client', async () => {
   return {
@@ -59,13 +59,14 @@ vi.mock('/@/stores/inferenceServers', async () => {
   };
 });
 
-const customConversations = writable<Conversation[]>([
+const customConversations = writable<conversationsStore.ConversationWithBackend[]>([
   {
     id: 'playground-1',
     name: 'Playground 1',
     modelId: 'model-1',
     messages: [],
     usage: {} as ModelUsage,
+    backend: InferenceType.LLAMA_CPP,
   },
 ]);
 
@@ -246,6 +247,7 @@ test('receiving complete message should enable the input element', async () => {
         } as AssistantChat,
       ],
       usage: {} as ModelUsage,
+      backend: InferenceType.LLAMA_CPP,
     },
   ]);
 
@@ -291,6 +293,7 @@ test('sending prompt should display the prompt and the response', async () => {
         } as unknown as PendingChat,
       ],
       usage: {} as ModelUsage,
+      backend: InferenceType.LLAMA_CPP,
     },
   ]);
 
@@ -319,6 +322,7 @@ test('sending prompt should display the prompt and the response', async () => {
         } as AssistantChat,
       ],
       usage: {} as ModelUsage,
+      backend: InferenceType.LLAMA_CPP,
     },
   ]);
 
@@ -398,6 +402,7 @@ describe('error message', () => {
             timestamp: 55,
           },
         ],
+        backend: InferenceType.LLAMA_CPP,
       },
     ]);
 

packages/frontend/src/pages/Playgrounds.svelte

@@ -3,19 +3,24 @@ import { router } from 'tinro';
 import PlaygroundColumnModel from '../lib/table/playground/PlaygroundColumnModel.svelte';
 import PlaygroundColumnName from '../lib/table/playground/PlaygroundColumnName.svelte';
 import ConversationColumnAction from '/@/lib/table/playground/ConversationColumnAction.svelte';
-import { conversations } from '/@/stores/conversations';
+import { conversations, type ConversationWithBackend } from '/@/stores/conversations';
 import PlaygroundColumnIcon from '/@/lib/table/playground/PlaygroundColumnIcon.svelte';
 import { Button, EmptyScreen, Table, TableColumn, TableRow, NavPage } from '@podman-desktop/ui-svelte';
-import type { Conversation } from '@shared/models/IPlaygroundMessage';
 import { faMessage, faPlusCircle } from '@fortawesome/free-solid-svg-icons';
+import PlaygroundColumnRuntime from '../lib/table/playground/PlaygroundColumnRuntime.svelte';
 
 const columns = [
   new TableColumn<unknown>('', { width: '40px', renderer: PlaygroundColumnIcon }),
-  new TableColumn<Conversation>('Name', { width: '1fr', renderer: PlaygroundColumnName }),
-  new TableColumn<Conversation>('Model', { width: '1fr', renderer: PlaygroundColumnModel }),
-  new TableColumn<Conversation>('Actions', { width: '80px', renderer: ConversationColumnAction, align: 'right' }),
+  new TableColumn<ConversationWithBackend>('Name', { width: '1fr', renderer: PlaygroundColumnName }),
+  new TableColumn<ConversationWithBackend>('Model', { width: '1fr', renderer: PlaygroundColumnModel }),
+  new TableColumn<ConversationWithBackend>('Runtime', { width: '90px', renderer: PlaygroundColumnRuntime }),
+  new TableColumn<ConversationWithBackend>('Actions', {
+    width: '80px',
+    renderer: ConversationColumnAction,
+    align: 'right',
+  }),
 ];
-const row = new TableRow<Conversation>({});
+const row = new TableRow<ConversationWithBackend>({});
 
 function createNewPlayground(): void {
   router.goto('/playground/create');

packages/frontend/src/stores/conversations.ts

@@ -21,21 +21,48 @@ import { readable } from 'svelte/store';
 import { MSG_CONVERSATIONS_UPDATE } from '@shared/Messages';
 import { rpcBrowser, studioClient } from '/@/utils/client';
 import type { Conversation } from '@shared/models/IPlaygroundMessage';
+import type { ModelInfo } from '@shared/models/IModelInfo';
+import type { InferenceType } from '@shared/models/IInference';
+import { toInferenceType } from '@shared/models/IInference';
+
+export interface ConversationWithBackend extends Conversation {
+  backend: InferenceType;
+}
 
 // RPCReadable cannot be used here, as it is doing some debouncing, and we want
 // to get the conversation as soon as the tokens arrive here, instead getting them by packets
-export const conversations: Readable<Conversation[]> = readable<Conversation[]>([], set => {
-  const sub = rpcBrowser.subscribe(MSG_CONVERSATIONS_UPDATE, msg => {
-    set(msg);
+export const conversations: Readable<ConversationWithBackend[]> = readable<ConversationWithBackend[]>([], set => {
+  const sub = rpcBrowser.subscribe(MSG_CONVERSATIONS_UPDATE, conversations => {
+    setWithBackend(set, conversations);
   });
   // Initialize the store manually
   studioClient
     .getPlaygroundConversations()
     .then(state => {
-      set(state);
+      setWithBackend(set, state);
     })
     .catch((err: unknown) => console.error(`Error getting playground conversations:`, err));
   return () => {
     sub.unsubscribe();
   };
 });
+
+function setWithBackend(set: (value: ConversationWithBackend[]) => void, conversations: Conversation[]): void {
+  studioClient
+    .getModelsInfo()
+    .then(modelsInfo => {
+      const conversationsWithBackend: ConversationWithBackend[] = conversations.map(conversation => ({
+        ...conversation,
+        backend: getModelBackend(modelsInfo, conversation.modelId),
+      }));
+      set(conversationsWithBackend);
+    })
+    .catch((err: unknown) => {
+      console.error('error getting models info', String(err));
+    });
+}
+
+function getModelBackend(modelsInfo: ModelInfo[], modelId: string): InferenceType {
+  const backend = modelsInfo.find(modelInfo => modelInfo.id === modelId)?.backend;
+  return toInferenceType(backend);
+}

packages/shared/src/models/IInference.spec.ts

@@ -0,0 +1,28 @@
+/**********************************************************************
+ * 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 { expect, test } from 'vitest';
+import { InferenceType, toInferenceType } from './IInference';
+
+test('toInferenceType', () => {
+  expect(toInferenceType('llama-cpp')).toEqual(InferenceType.LLAMA_CPP);
+  expect(toInferenceType(InferenceType.LLAMA_CPP)).toEqual(InferenceType.LLAMA_CPP);
+  expect(toInferenceType('not-known')).toEqual(InferenceType.NONE);
+  expect(toInferenceType('')).toEqual(InferenceType.NONE);
+  expect(toInferenceType(undefined)).toEqual(InferenceType.NONE);
+});

packages/shared/src/models/IInference.ts

@@ -29,6 +29,18 @@ const InferenceTypeLabel = {
   none: 'None',
 };
 
+// toInferenceType casts a string to InferenceType
+// returns NONE value if input value is undefined or unknown
+export function toInferenceType(type: string | undefined): InferenceType {
+  if (!type) {
+    return InferenceType.NONE;
+  }
+  if (Object.values(InferenceType).includes(type as InferenceType)) {
+    return type as InferenceType;
+  }
+  return InferenceType.NONE;
+}
+
 export function inferenceTypeLabel(type: InferenceType): string {
   if (type in InferenceTypeLabel) {
     return InferenceTypeLabel[type];