feat: make recipes uses models based on backend property

packages/frontend/src/lib/RecipeDetails.spec.ts

@@ -109,7 +109,7 @@ const initialCatalog: ApplicationCatalog = {
       name: 'Recipe 1',
       readme: 'readme 1',
       categories: [],
-      models: ['model1', 'model2'],
+      recommended: ['model1', 'model2'],
       description: 'description 1',
       repository: 'repo 1',
     },
@@ -183,36 +183,6 @@ test('swap model panel should be hidden on models tab', async () => {
   expect(swapModelPanel2.classList.contains('hidden'));
 });
 
-test('should display default model information when model is the recommended', async () => {
-  mocks.getApplicationsStateMock.mockResolvedValue([]);
-  vi.mocked(catalogStore).catalog = readable<ApplicationCatalog>(initialCatalog);
-  render(RecipeDetails, {
-    recipeId: 'recipe 1',
-    modelId: 'model1',
-  });
-
-  const modelInfo = screen.getByLabelText('model-selected');
-  expect(modelInfo.textContent).equal('Model 1');
-  const licenseBadge = screen.getByLabelText('license-model');
-  expect(licenseBadge.textContent).equal('?');
-  const defaultWarning = screen.getByLabelText('model-warning');
-  expect(defaultWarning.textContent).contains('This is the default, recommended model for this recipe.');
-});
-
-test('should display non-default model information when model is not the recommended one', async () => {
-  mocks.getApplicationsStateMock.mockResolvedValue([]);
-  vi.mocked(catalogStore).catalog = readable<ApplicationCatalog>(initialCatalog);
-  render(RecipeDetails, {
-    recipeId: 'recipe 1',
-    modelId: 'model2',
-  });
-
-  const modelInfo = screen.getByLabelText('model-selected');
-  expect(modelInfo.textContent).equal('Model 2');
-  const defaultWarning = screen.getByLabelText('model-warning');
-  expect(defaultWarning.textContent).contains('The default model for this recipe is Model 1');
-});
-
 test('button vs code should be visible if local repository is not empty', async () => {
   mocks.getApplicationsStateMock.mockResolvedValue([]);
   mocks.getLocalRepositoriesMock.mockReturnValue([

packages/frontend/src/lib/RecipeDetails.svelte

@@ -135,7 +135,7 @@ const deleteLocalClone = () => {
       <div class="bg-charcoal-900 min-w-[200px] grow flex flex-col p-2 rounded-md space-y-3">
         <div class="flex justify-between items-center">
           <span class="text-sm" aria-label="model-selected">{model?.name}</span>
-          {#if recipe?.models?.[0] === model.id}
+          {#if recipe?.recommended?.[0] === model.id}
             <i class="fas fa-star fa-xs text-gray-900" title="Recommended model"></i>
           {/if}
         </div>
@@ -150,15 +150,15 @@ const deleteLocalClone = () => {
         {/if}
       </div>
       <div class="px-2 text-xs text-gray-700" aria-label="model-warning">
-        {#if recipe?.models?.[0] === model.id}
+        {#if recipe?.recommended?.[0] === model.id}
           * This is the default, recommended model for this recipe. You can <a
             class="underline"
             href="{`/recipe/${recipeId}/models`}">swap for a different compatible model</a
           >.
         {:else}
-          * The default model for this recipe is {findModel(recipe?.models?.[0])?.name}. You can
+          * The default model for this recipe is {findModel(recipe?.recommended?.[0])?.name}. You can
           <a class="underline" href="{`/recipe/${recipeId}/models`}"
-            >swap for {findModel(recipe?.models?.[0])?.name} or a different compatible model</a
+            >swap for {findModel(recipe?.recommended?.[0])?.name} or a different compatible model</a
           >.
         {/if}
       </div>

packages/frontend/src/lib/table/application/ColumnRecipe.spec.ts

@@ -54,7 +54,7 @@ const initialCatalog: ApplicationCatalog = {
       name: 'Recipe 1',
       readme: 'readme 1',
       categories: [],
-      models: ['model1', 'model2'],
+      recommended: ['model1', 'model2'],
       description: 'description 1',
       repository: 'repo 1',
     },

packages/frontend/src/lib/table/model/ModelColumnRecipeRecommended.spec.ts

@@ -19,16 +19,11 @@
 import '@testing-library/jest-dom/vitest';
 import { test, expect } from 'vitest';
 import { screen, render } from '@testing-library/svelte';
-import type { RecipeModelInfo } from '/@/models/RecipeModelInfo';
 import ModelColumnRecipeRecommended from './ModelColumnRecipeRecommended.svelte';
 
 test('expect the star icon to be rendered whn recipe is recommended', async () => {
   render(ModelColumnRecipeRecommended, {
-    object: {
-      id: 'id',
-      inUse: false,
-      recommended: true,
-    } as RecipeModelInfo,
+    object: true,
   });
 
   const starIcon = screen.getByTitle('Recommended model');
@@ -37,11 +32,7 @@ test('expect the star icon to be rendered whn recipe is recommended', async () =
 
 test('expect nothing when recipe is NOT recommended', async () => {
   render(ModelColumnRecipeRecommended, {
-    object: {
-      id: 'id',
-      inUse: false,
-      recommended: false,
-    } as RecipeModelInfo,
+    object: false,
   });
 
   const starIcon = screen.queryByTitle('Recommended model');

packages/frontend/src/lib/table/model/ModelColumnRecipeRecommended.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-import type { RecipeModelInfo } from '/@/models/RecipeModelInfo';
-export let object: RecipeModelInfo;
+export let object: boolean;
 </script>
 
-{#if object.recommended}
+{#if object}
   <i class="fas fa-star fa-xs text-gray-900" title="Recommended model"></i>
 {/if}

packages/frontend/src/models/RecipeModelInfo.ts

@@ -18,6 +18,7 @@
 
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
 
+// todo :remove
 export interface RecipeModelInfo extends ModelInfo {
   recommended: boolean;
   inUse: boolean;

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

@@ -111,7 +111,7 @@ const initialCatalog: ApplicationCatalog = {
       name: 'Recipe 1',
       readme: 'readme 1',
       categories: [],
-      models: ['model1', 'model2'],
+      recommended: ['model1', 'model2'],
       description: 'description 1',
       repository: 'repo 1',
     },
@@ -156,7 +156,7 @@ const updatedCatalog: ApplicationCatalog = {
       name: 'New Recipe Name',
       readme: 'readme 1',
       categories: [],
-      models: ['model1', 'model2'],
+      recommended: ['model1', 'model2'],
       description: 'description 1',
       repository: 'repo 1',
     },

packages/frontend/src/pages/Recipe.svelte

@@ -15,21 +15,31 @@ import ContainerConnectionStatusInfo from '../lib/notification/ContainerConnecti
 import { modelsInfo } from '../stores/modelsInfo';
 import { checkContainerConnectionStatus } from '../utils/connectionUtils';
 import { router } from 'tinro';
+import { InferenceType } from '@shared/src/models/IInference';
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
 
 export let recipeId: string;
 
 // The recipe model provided
 $: recipe = $catalog.recipes.find(r => r.id === recipeId);
 $: categories = $catalog.categories;
+
+// model selected to start the recipe
 let selectedModelId: string;
-$: selectedModelId = recipe?.models?.[0] ?? '';
+$: selectedModelId = recipe?.recommended && recipe.recommended.length > 0 ? recipe?.recommended?.[0] : '';
+
 let connectionInfo: ContainerConnectionInfo | undefined;
 $: if ($modelsInfo && selectedModelId) {
   checkContainerConnectionStatus($modelsInfo, selectedModelId, 'recipe')
     .then(value => (connectionInfo = value))
     .catch((e: unknown) => console.log(String(e)));
 }
 
+let models: ModelInfo[];
+$: models = $catalog.models.filter(
+  model => (model.backend ?? InferenceType.NONE) === (recipe?.backend ?? InferenceType.NONE),
+);
+
 // Send recipe info to telemetry
 let recipeTelemetry: string | undefined = undefined;
 $: if (recipe && recipe.id !== recipeTelemetry) {
@@ -68,8 +78,9 @@ function setSelectedModel(modelId: string) {
         </Route>
         <Route path="/models">
           <RecipeModels
-            modelsIds="{recipe?.models}"
-            selectedModelId="{selectedModelId}"
+            models="{models}"
+            selected="{selectedModelId}"
+            recommended="{recipe?.recommended ?? []}"
             setSelectedModel="{setSelectedModel}" />
         </Route>
       </svelte:fragment>

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

@@ -37,7 +37,7 @@ beforeEach(() => {
       {
         id: 'recipe1',
         name: 'Recipe 1',
-        models: ['model1'],
+        recommended: ['model1'],
         categories: [],
         description: 'Recipe 1',
         readme: '',
@@ -63,9 +63,21 @@ beforeEach(() => {
 
 test('should display model icon', async () => {
   render(RecipeModels, {
-    selectedModelId: 'model1',
+    recommended: [],
+    selected: 'model1',
     setSelectedModel: vi.fn(),
-    modelsIds: ['model1'],
+    models: [
+      {
+        id: 'model1',
+        name: 'Model 1',
+        url: 'https://podman-desktop.io',
+        registry: 'Podman Desktop',
+        license: 'Apache 2.0',
+        description: '',
+        hw: 'CPU',
+        memory: 4 * 1024 * 1024 * 1024,
+      },
+    ],
   });
 
   await waitFor(async () => {

packages/frontend/src/pages/RecipeModels.svelte

@@ -1,46 +1,44 @@
 <script lang="ts">
 import ModelColumnName from '/@/lib/table/model/ModelColumnName.svelte';
-import { catalog } from '/@/stores/catalog';
 import ModelColumnRecipeSelection from '../lib/table/model/ModelColumnRecipeSelection.svelte';
 import ModelColumnRecipeRecommended from '../lib/table/model/ModelColumnRecipeRecommended.svelte';
-import type { RecipeModelInfo } from '../models/RecipeModelInfo';
 import ModelColumnIcon from '/@/lib/table/model/ModelColumnIcon.svelte';
 import { Table, TableColumn, TableRow } from '@podman-desktop/ui-svelte';
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
 
-export let modelsIds: string[] | undefined;
-export let selectedModelId: string;
+export let models: ModelInfo[];
+export let recommended: string[];
+export let selected: string;
 export let setSelectedModel: (modelId: string) => void;
 
-$: models = $catalog.models
-  .filter(m => modelsIds?.includes(m.id))
-  .map((m, i) => {
-    return {
-      ...m,
-      recommended: i === 0,
-      inUse: m.id === selectedModelId,
-    } as RecipeModelInfo;
-  });
+$: models = models.map((m, i) => {
+  return {
+    ...m,
+    inUse: m.id === selected,
+  };
+});
 
-const columns: TableColumn<RecipeModelInfo>[] = [
-  new TableColumn<RecipeModelInfo>('', { width: '20px', renderer: ModelColumnRecipeSelection }),
-  new TableColumn<RecipeModelInfo>('', { width: '20px', renderer: ModelColumnRecipeRecommended }),
-  new TableColumn<RecipeModelInfo>('', { width: '32px', renderer: ModelColumnIcon }),
-  new TableColumn<RecipeModelInfo>('Name', { width: '4fr', renderer: ModelColumnName }),
+const columns = [
+  new TableColumn<ModelInfo>('', { width: '20px', renderer: ModelColumnRecipeSelection }),
+  new TableColumn<ModelInfo, boolean>('', {
+    width: '20px',
+    renderer: ModelColumnRecipeRecommended,
+    renderMapping: object => recommended.includes(object.id),
+  }),
+  new TableColumn<ModelInfo>('', { width: '32px', renderer: ModelColumnIcon }),
+  new TableColumn<ModelInfo>('Name', { width: '4fr', renderer: ModelColumnName }),
 ];
-const row = new TableRow<RecipeModelInfo>({});
+const row = new TableRow<ModelInfo>({});
 
-function setModelToUse(selected: RecipeModelInfo) {
+function setModelToUse(selected: ModelInfo) {
   setSelectedModel(selected.id);
 }
 </script>
 
-{#if models}
-  <div class="flex flex-col grow min-h-full">
-    <div class="w-full min-h-full flex-1">
-      <div class="h-full">
-        <Table kind="model" data="{models}" columns="{columns}" row="{row}" on:update="{e => setModelToUse(e.detail)}">
-        </Table>
-      </div>
+<div class="flex flex-col grow min-h-full">
+  <div class="w-full min-h-full flex-1">
+    <div class="h-full">
+      <Table kind="model" data="{models}" columns="{columns}" row="{row}" on:update="{e => setModelToUse(e.detail)}" />
     </div>
   </div>
-{/if}
+</div>

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

@@ -50,7 +50,7 @@ beforeEach(() => {
       {
         id: 'recipe1',
         name: 'Recipe 1',
-        models: ['model1'],
+        recommended: ['model1'],
         categories: [],
         description: 'Recipe 1',
         readme: '',
@@ -59,7 +59,7 @@ beforeEach(() => {
       {
         id: 'recipe2',
         name: 'Recipe 2',
-        models: ['model2'],
+        recommended: ['model2'],
         categories: ['dummy-category'],
         description: 'Recipe 2',
         readme: '',

packages/shared/src/models/IRecipe.ts

@@ -26,7 +26,7 @@ export interface Recipe {
   ref?: string;
   readme: string;
   basedir?: string;
-  models?: string[];
+  recommended?: string[];
   /**
    * The backend field aims to target which inference
    * server the recipe requires