feat: adding icon for non downloaded models (#1866)

* feat: adding new remote model icon Signed-off-by: axel7083 <[email protected]> * fix: prettier Signed-off-by: axel7083 <[email protected]> * test: ensuring expected behaviour Signed-off-by: axel7083 <[email protected]> * feat: sharing ModelStatusIcon between model details and model table Signed-off-by: axel7083 <[email protected]> * fix(ui): model tests Signed-off-by: axel7083 <[email protected]> * Update packages/frontend/src/lib/icons/ModelStatusIcon.svelte Co-authored-by: Florent BENOIT <[email protected]> Signed-off-by: axel7083 <[email protected]> * fix: prettier Signed-off-by: axel7083 <[email protected]> --------- Signed-off-by: axel7083 <[email protected]> Co-authored-by: Florent BENOIT <[email protected]>
containers · Oct 28, 2024 · 288f3ab · 288f3ab
1 parent 7db2361
commit 288f3ab
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 52 deletions.
diff --git a/...c/lib/table/model/ModelColumnIcon.spec.ts → ...end/src/lib/icons/ModelStatusIcon.spec.ts b/...c/lib/table/model/ModelColumnIcon.spec.ts → ...end/src/lib/icons/ModelStatusIcon.spec.ts
@@ -20,26 +20,18 @@ import '@testing-library/jest-dom/vitest';
 import { expect, test, vi, beforeEach } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
-import ModelColumnIcon from './ModelColumnIcon.svelte';
+import ModelColumnIcon from './ModelStatusIcon.svelte';
 import { type InferenceServer, InferenceType } from '@shared/src/models/IInference';
+import { readable } from 'svelte/store';
+import * as inferenceStore from '/@/stores/inferenceServers';
 
-const mocks = vi.hoisted(() => {
-  return {
-    getInferenceServersMock: vi.fn<() => InferenceServer[]>(),
-  };
-});
-
-vi.mock('../../../stores/inferenceServers', () => ({
-  inferenceServers: {
-    subscribe: (f: (msg: InferenceServer[]) => void) => {
-      f(mocks.getInferenceServersMock());
-      return (): void => {};
-    },
-  },
+vi.mock('/@/stores/inferenceServers', () => ({
+  inferenceServers: vi.fn(),
 }));
 
 beforeEach(() => {
   vi.resetAllMocks();
+  (inferenceStore.inferenceServers as unknown) = readable<InferenceServer[]>([]);
 });
 
 test('Expect remote model to have NONE title', async () => {
@@ -53,8 +45,6 @@ test('Expect remote model to have NONE title', async () => {
     memory: 1000,
   };
 
-  mocks.getInferenceServersMock.mockReturnValue([]);
-
   render(ModelColumnIcon, { object });
 
   const role = screen.getByRole('status');
@@ -79,8 +69,6 @@ test('Expect downloaded model to have DOWNLOADED title', async () => {
     memory: 1000,
   };
 
-  mocks.getInferenceServersMock.mockReturnValue([]);
-
   render(ModelColumnIcon, { object });
 
   const role = screen.getByRole('status');
@@ -105,7 +93,7 @@ test('Expect in used model to have USED title', async () => {
     memory: 1000,
   };
 
-  mocks.getInferenceServersMock.mockReturnValue([
+  (inferenceStore.inferenceServers as unknown) = readable<InferenceServer[]>([
     {
       models: [object],
       type: InferenceType.LLAMA_CPP,
@@ -121,9 +109,28 @@ test('Expect in used model to have USED title', async () => {
       labels: {},
     },
   ]);
+
   render(ModelColumnIcon, { object });
 
   const role = screen.getByRole('status');
   expect(role).toBeDefined();
   expect(role.title).toBe('USED');
 });
+
+test('Expect non-downloaded model to have NONE title', async () => {
+  const object: ModelInfo = {
+    id: 'model-downloaded-id',
+    description: '',
+    license: '',
+    name: '',
+    registry: '',
+    url: '',
+    memory: 1000,
+  };
+
+  render(ModelColumnIcon, { object });
+
+  const role = screen.getByRole('status');
+  expect(role).toBeDefined();
+  expect(role.title).toBe('NONE');
+});
diff --git a/packages/frontend/src/lib/icons/ModelStatusIcon.svelte b/packages/frontend/src/lib/icons/ModelStatusIcon.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
+import ModelWhite from './ModelWhite.svelte';
+import { inferenceServers } from '/@/stores/inferenceServers';
+
+import { StatusIcon } from '@podman-desktop/ui-svelte';
+import RemoteModel from './RemoteModel.svelte';
+
+interface Props {
+  object: ModelInfo;
+}
+
+let { object }: Props = $props();
+
+let status: string | undefined = $derived.by(() => {
+  if ($inferenceServers.some(server => server.models.some(model => model.id === object.id))) {
+    return 'USED';
+  } else {
+    return object.file ? 'DOWNLOADED' : 'NONE';
+  }
+});
+</script>
+
+{#if status === 'NONE'}
+  <div role="status" title="NONE">
+    <RemoteModel class="text-[var(--pd-status-not-running)]" size="28" />
+  </div>
+{:else}
+  <StatusIcon status={status} icon={ModelWhite} />
+{/if}
diff --git a/packages/frontend/src/lib/icons/RemoteModel.svelte b/packages/frontend/src/lib/icons/RemoteModel.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+export let size = '40';
+</script>
+
+<div role="img">
+  <svg
+    width={size}
+    height={size}
+    style={$$props.style}
+    class={$$props.class}
+    viewBox="0 0 10.538813 10.413819"
+    xmlns="http://www.w3.org/2000/svg">
+    <defs id="defs1"></defs>
+    <g id="layer1" transform="translate(-99.747914,-142.61041)">
+      <path
+        id="circle1-3"
+        fill="currentColor"
+        color="currentColor"
+        style="opacity:0.988764;stroke-width:1.47503;stroke-linejoin:round;-inkscape-stroke:none"
+        d="m 102.35251,143.92394 c -0.44583,0 -0.81255,0.36672 -0.81255,0.81255 0,0.44583 0.36672,0.81179 0.81255,0.81179 0.14364,0 0.27878,-0.0379 0.39637,-0.10443 l 0.75919,0.74471 -0.90021,0.85982 c -0.0804,-0.0269 -0.16632,-0.0419 -0.25535,-0.0419 -0.44583,0 -0.81255,0.36672 -0.81255,0.81255 0,0.44583 0.36672,0.81179 0.81255,0.81179 0.0867,0 0.17063,-0.014 0.24925,-0.0396 l 0.8964,0.88649 -0.80569,0.82551 c -0.10375,-0.0485 -0.21869,-0.0762 -0.33996,-0.0762 -0.44583,0 -0.81255,0.36672 -0.81255,0.81255 0,0.44583 0.36672,0.81256 0.81255,0.81256 0.39678,0 0.73013,-0.29032 0.79883,-0.66849 h 1.54812 c 0.0541,0.39486 0.39617,0.70279 0.80493,0.70279 0.44583,0 0.81256,-0.36596 0.81256,-0.81179 0,-0.11764 -0.0259,-0.23025 -0.0717,-0.33158 l 1.86445,-2.08779 c 0.0419,0.007 0.0851,0.0106 0.12881,0.0106 0.44583,0 0.81179,-0.36673 0.81179,-0.81255 0,-0.44583 -0.36596,-0.81256 -0.81179,-0.81256 -0.0546,0 -0.10834,0.005 -0.16007,0.016 l -1.83396,-1.95363 c 0.0462,-0.10173 0.0724,-0.21409 0.0724,-0.33234 0,-0.44583 -0.36673,-0.81254 -0.81256,-0.81255 -0.32162,0 -0.60201,0.19052 -0.73328,0.46421 h -1.6693 c -0.12363,-0.29201 -0.41432,-0.49851 -0.74928,-0.49851 z m 0,0.49241 c 0.18071,0 0.32243,0.13945 0.32243,0.32014 0,0.18071 -0.14166,0.32243 -0.32243,0.32243 -0.18071,0 -0.32243,-0.14166 -0.32243,-0.32243 0,-0.1807 0.14166,-0.32014 0.32243,-0.32014 z m 3.15188,0.0343 c 0.18071,0 0.31938,0.13945 0.31938,0.32014 0,0.18071 -0.13868,0.32243 -0.31938,0.32243 -0.1807,0 -0.32319,-0.14166 -0.32319,-0.32243 0,-0.1807 0.14243,-0.32014 0.32319,-0.32014 z m -2.35915,0.46116 h 1.55956 c 0.006,0.0368 0.0153,0.0725 0.0267,0.10747 l -0.86896,0.83008 -0.77749,-0.76377 c 0.0264,-0.0548 0.0466,-0.11315 0.0602,-0.17379 z m 1.87436,0.50918 c 0.13571,0.10173 0.30367,0.16235 0.48479,0.16235 0.1495,0 0.29001,-0.0412 0.41085,-0.11281 l 1.72572,1.83473 c -0.0711,0.0774 -0.12747,0.16821 -0.16464,0.26831 h -1.20968 c -0.115,-0.30965 -0.41454,-0.53281 -0.76225,-0.53281 -0.12397,0 -0.24204,0.0288 -0.34758,0.0793 l -0.94442,-0.92765 z m -1.16166,1.11135 0.93985,0.92232 c -0.0216,0.038 -0.0403,0.0775 -0.0556,0.1189 h -1.6152 c -0.0267,-0.0833 -0.0668,-0.16075 -0.11738,-0.2302 z m -1.50543,0.96653 c 0.18071,0 0.32243,0.13946 0.32243,0.32014 0,0.1807 -0.14166,0.32243 -0.32243,0.32243 -0.18071,0 -0.32243,-0.14166 -0.32243,-0.32243 0,-0.18071 0.14166,-0.32014 0.32243,-0.32014 z m 3.15188,0.0343 c 0.18071,0 0.31938,0.13945 0.31938,0.32014 0,0.18071 -0.13868,0.32243 -0.31938,0.32243 -0.1807,0 -0.32319,-0.14166 -0.32319,-0.32243 0,-0.18071 0.14243,-0.32014 0.32319,-0.32014 z m 2.73418,0 c 0.1807,0 0.32242,0.13945 0.32242,0.32014 0,0.18071 -0.14166,0.32243 -0.32242,0.32243 -0.18071,0 -0.32015,-0.14166 -0.32015,-0.32243 0,-0.18071 0.13945,-0.32014 0.32015,-0.32014 z m -5.11162,0.53052 h 1.59309 c 0.0112,0.0411 0.0255,0.0806 0.0427,0.11892 l -0.92155,0.94365 -0.83618,-0.82627 c 0.0526,-0.0709 0.0945,-0.15064 0.12195,-0.23629 z m 3.16179,0 h 1.16547 c 0.0372,0.13718 0.10916,0.26032 0.20657,0.35902 l -1.74401,1.95287 c -0.12119,-0.0722 -0.26225,-0.11358 -0.41238,-0.11358 -0.1469,0 -0.28534,0.0397 -0.40475,0.109 l -0.90936,-0.89944 0.89945,-0.9208 c 0.12168,0.073 0.26363,0.1151 0.41466,0.1151 0.37318,0 0.69073,-0.257 0.78435,-0.60217 z m -2.44223,1.75926 0.88115,0.87124 h -1.64111 c -0.01,-0.0207 -0.0205,-0.0412 -0.032,-0.061 z m -1.494,0.89716 c 0.18071,0 0.32243,0.13868 0.32243,0.31938 0,0.18071 -0.14166,0.32243 -0.32243,0.32243 -0.18071,0 -0.32243,-0.14166 -0.32243,-0.32243 0,-0.1807 0.14166,-0.31938 0.32243,-0.31938 z m 3.15188,0.0343 c 0.18071,0 0.31938,0.13946 0.31938,0.32014 0,0.18071 -0.13868,0.32243 -0.31938,0.32243 -0.1807,0 -0.32319,-0.14166 -0.32319,-0.32243 0,-0.1807 0.14243,-0.32014 0.32319,-0.32014 z m 3.67631,-8.14306 -0.27441,0.001 a 0.33557023,0.33557023 0 0 0 -0.33691,0.33691 0.33557023,0.33557023 0 0 0 0.33691,0.33463 h 0.26526 l 0.0549,0.003 0.0434,0.005 0.0396,0.0122 0.0404,0.0144 0.0373,0.0175 0.0351,0.0229 0.0343,0.0229 0.032,0.029 0.0259,0.0313 0.0259,0.032 0.0198,0.0373 0.0206,0.0374 0.0145,0.0381 0.009,0.0427 a 0.33557023,0.33557023 0 0 0 0.38265,0.27974 0.33557023,0.33557023 0 0 0 0.28279,-0.38341 l -0.003,-0.0145 a 0.33560379,0.33560379 0 0 0 -0.009,-0.032 l -0.0168,-0.0747 a 0.33560379,0.33560379 0 0 0 -0.009,-0.032 l -0.0259,-0.0717 a 0.33560379,0.33560379 0 0 0 -0.0145,-0.029 l -0.032,-0.0663 a 0.33560379,0.33560379 0 0 0 -0.0145,-0.0282 l -0.0404,-0.064 a 0.33560379,0.33560379 0 0 0 -0.0175,-0.0282 l -0.0427,-0.0579 a 0.33560379,0.33560379 0 0 0 -0.0236,-0.0259 l -0.0488,-0.0549 a 0.33560379,0.33560379 0 0 0 -0.0229,-0.0229 l -0.0542,-0.0496 a 0.33560379,0.33560379 0 0 0 -0.0229,-0.0206 l -0.061,-0.0427 a 0.33560379,0.33560379 0 0 0 -0.0259,-0.0206 l -0.0633,-0.0374 a 0.33560379,0.33560379 0 0 0 -0.029,-0.0145 l -0.0663,-0.0351 a 0.33560379,0.33560379 0 0 0 -0.0313,-0.0115 l -0.0694,-0.0259 a 0.33560379,0.33560379 0 0 0 -0.032,-0.009 l -0.0747,-0.0198 a 0.33560379,0.33560379 0 0 0 -0.0313,-0.006 l -0.0777,-0.0115 a 0.33560379,0.33560379 0 0 0 -0.0351,-0.003 l -0.0778,-0.006 a 0.33560379,0.33560379 0 0 0 -0.0168,0 z m -8.34658,0.001 -0.0777,0.006 a 0.33560379,0.33560379 0 0 0 -0.0343,0.003 l -0.0747,0.0115 a 0.33560379,0.33560379 0 0 0 -0.0351,0.006 l -0.0717,0.0198 a 0.33560379,0.33560379 0 0 0 -0.032,0.009 l -0.0686,0.0259 a 0.33557023,0.33557023 0 0 0 -0.19895,0.42914 0.33557023,0.33557023 0 0 0 0.42915,0.202 l 0.0518,-0.0206 0.0434,-0.0115 0.0427,-0.006 0.0434,-0.003 h 0.0175 1.32478 a 0.33557023,0.33557023 0 0 0 0.33767,-0.33386 0.33557023,0.33557023 0 0 0 -0.33767,-0.33692 h -1.34232 a 0.33557023,0.33557023 0 0 0 -0.008,0.002 0.33557023,0.33557023 0 0 0 -0.009,-0.002 z m 2.70216,0 a 0.33557023,0.33557023 0 0 0 -0.33387,0.33691 0.33557023,0.33557023 0 0 0 0.33387,0.33463 h 1.34307 a 0.33557023,0.33557023 0 0 0 0.33691,-0.33463 0.33557023,0.33557023 0 0 0 -0.33691,-0.33691 z m 2.68538,0 a 0.33557023,0.33557023 0 0 0 -0.33691,0.33691 0.33557023,0.33557023 0 0 0 0.33691,0.33463 h 1.34232 a 0.33557023,0.33557023 0 0 0 0.33462,-0.33463 0.33557023,0.33557023 0 0 0 -0.33462,-0.33691 z m -6.13912,1.20968 a 0.33557023,0.33557023 0 0 0 -0.334623,0.33463 v 1.34231 a 0.33557023,0.33557023 0 0 0 0.334623,0.33463 0.33557023,0.33557023 0 0 0 0.33692,-0.33463 v -1.34234 a 0.33557023,0.33557023 0 0 0 -0.33692,-0.33463 z m 9.86726,0.76072 a 0.33557023,0.33557023 0 0 0 -0.33462,0.33691 v 1.34308 a 0.33557023,0.33557023 0 0 0 0.33462,0.33386 0.33557023,0.33557023 0 0 0 0.33692,-0.33386 v -1.34308 a 0.33557023,0.33557023 0 0 0 -0.33692,-0.33691 z m -9.86726,1.92162 a 0.33557023,0.33557023 0 0 0 -0.334623,0.33691 v 1.34308 a 0.33557023,0.33557023 0 0 0 0.334623,0.33386 0.33557023,0.33557023 0 0 0 0.33692,-0.33386 v -1.34308 a 0.33557023,0.33557023 0 0 0 -0.33692,-0.33691 z m 9.86726,0.76377 a 0.33557023,0.33557023 0 0 0 -0.33462,0.33386 v 1.34232 a 0.33557023,0.33557023 0 0 0 0.33462,0.33767 0.33557023,0.33557023 0 0 0 0.33692,-0.33767 V 147.602 a 0.33557023,0.33557023 0 0 0 -0.33692,-0.33386 z m -9.86726,1.92162 a 0.33557023,0.33557023 0 0 0 -0.334623,0.33691 v 1.34232 a 0.33557023,0.33557023 0 0 0 0.334623,0.33462 0.33557023,0.33557023 0 0 0 0.33692,-0.33462 v -1.34232 a 0.33557023,0.33557023 0 0 0 -0.33692,-0.33691 z m 9.86726,0.76301 a 0.33557023,0.33557023 0 0 0 -0.33462,0.33462 v 1.34232 a 0.33557023,0.33557023 0 0 0 0.33462,0.33691 0.33557023,0.33557023 0 0 0 0.33692,-0.33691 v -1.34232 a 0.33557023,0.33557023 0 0 0 -0.33692,-0.33462 z m -9.75216,1.92167 a 0.33557023,0.33557023 0 0 0 -0.17226,0.0152 l -7.7e-4,-7.6e-4 a 0.33557023,0.33557023 0 0 0 -0.201233,0.42914 l 0.005,0.0152 a 0.33560379,0.33560379 0 0 0 0.0122,0.0282 l 0.0343,0.0693 a 0.33560379,0.33560379 0 0 0 0.0145,0.0289 l 0.0381,0.0633 a 0.33560379,0.33560379 0 0 0 0.0198,0.026 l 0.0435,0.058 a 0.33560379,0.33560379 0 0 0 0.0198,0.026 l 0.0495,0.0549 a 0.33560379,0.33560379 0 0 0 0.0229,0.0229 l 0.0549,0.0488 a 0.33560379,0.33560379 0 0 0 0.0259,0.0207 l 0.0572,0.0457 a 0.33560379,0.33560379 0 0 0 0.0259,0.0175 l 0.064,0.0373 a 0.33560379,0.33560379 0 0 0 0.0282,0.0168 l 0.0694,0.032 a 0.33560379,0.33560379 0 0 0 0.029,0.0118 l 0.0717,0.0267 a 0.33560379,0.33560379 0 0 0 0.032,0.0118 l 0.0717,0.0175 a 0.33560379,0.33560379 0 0 0 0.0351,0.006 l 0.0747,0.0118 a 0.33560379,0.33560379 0 0 0 0.0343,0.006 l 0.0777,0.003 a 0.33560379,0.33560379 0 0 0 0.0175,0 h 0.42915 a 0.33557023,0.33557023 0 0 0 0.33386,-0.33387 0.33557023,0.33557023 0 0 0 -0.33386,-0.33691 h -0.42076 l -0.0518,-0.003 -0.0435,-0.006 -0.0427,-0.0118 -0.0404,-0.0152 -0.0381,-0.0168 -0.0343,-0.0205 -0.032,-0.026 -0.0313,-0.0289 -0.029,-0.0282 -0.0229,-0.0351 -0.0229,-0.0344 -0.0175,-0.0373 a 0.33557023,0.33557023 0 0 0 -0.25689,-0.21565 z m 9.08368,0.46421 -0.0549,0.009 -0.0549,0.003 h -1.18072 a 0.33557023,0.33557023 0 0 0 -0.33463,0.33691 0.33557023,0.33557023 0 0 0 0.33463,0.33463 h 1.18986 a 0.33560379,0.33560379 0 0 0 0.0168,0 l 0.0778,-0.003 a 0.33560379,0.33560379 0 0 0 0.0343,-0.006 l 0.0724,-0.009 a 0.33557023,0.33557023 0 0 0 0.28203,-0.38342 0.33557023,0.33557023 0 0 0 -0.38264,-0.28203 z m -6.65821,0.0118 a 0.33557023,0.33557023 0 0 0 -0.33692,0.33691 0.33557023,0.33557023 0 0 0 0.33692,0.33463 h 1.34002 a 0.33557023,0.33557023 0 0 0 0.33691,-0.33463 0.33557023,0.33557023 0 0 0 -0.33691,-0.33691 z m 2.68234,0 a 0.33557023,0.33557023 0 0 0 -0.33387,0.33691 0.33557023,0.33557023 0 0 0 0.33387,0.33463 h 1.34231 a 0.33557023,0.33557023 0 0 0 0.33691,-0.33463 0.33557023,0.33557023 0 0 0 -0.33691,-0.33691 z"
+      ></path>
+    </g>
+  </svg>
+</div>
diff --git a/packages/frontend/src/lib/table/model/ModelColumnIcon.svelte b/packages/frontend/src/lib/table/model/ModelColumnIcon.svelte
diff --git a/packages/frontend/src/pages/Model.spec.ts b/packages/frontend/src/pages/Model.spec.ts
@@ -16,11 +16,14 @@
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
 
-import { vi, test, expect } from 'vitest';
+import { vi, test, expect, beforeEach } from 'vitest';
 import { screen, render } from '@testing-library/svelte';
 import Model from './Model.svelte';
 import { studioClient } from '../utils/client';
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
+import * as inferenceStore from '/@/stores/inferenceServers';
+import { readable } from 'svelte/store';
+import type { InferenceServer } from '@shared/src/models/IInference';
 
 vi.mock('../utils/client', async () => {
   return {
@@ -37,13 +40,40 @@ vi.mock('../utils/client', async () => {
   };
 });
 
+vi.mock('/@/stores/inferenceServers', () => ({
+  inferenceServers: vi.fn(),
+}));
+
 const model: ModelInfo = {
   id: 'model1',
   name: 'Model 1',
   properties: {},
   description: '',
 };
 
+beforeEach(() => {
+  (inferenceStore.inferenceServers as unknown) = readable<InferenceServer[]>([]);
+});
+
+test('model status should be visible', async () => {
+  vi.mocked(studioClient.getCatalog).mockResolvedValue({
+    models: [model],
+    categories: [],
+    recipes: [],
+    version: 'v1',
+  });
+
+  const { getByRole } = render(Model, {
+    modelId: model.id,
+  });
+
+  await vi.waitFor(() => {
+    const role = getByRole('status');
+    expect(role).toBeDefined();
+    expect(role.title).toBe('NONE');
+  });
+});
+
 test('should display model information', async () => {
   vi.mocked(studioClient.getCatalog).mockResolvedValue({
     models: [model],

diff --git a/packages/frontend/src/pages/Model.svelte b/packages/frontend/src/pages/Model.svelte
@@ -3,6 +3,7 @@ import MarkdownRenderer from '/@/lib/markdown/MarkdownRenderer.svelte';
 import { catalog } from '/@/stores/catalog';
 import { DetailsPage } from '@podman-desktop/ui-svelte';
 import { router } from 'tinro';
+import ModelStatusIcon from '/@/lib/icons/ModelStatusIcon.svelte';
 
 export let modelId: string;
 
@@ -20,6 +21,13 @@ export function goToUpPage(): void {
   breadcrumbTitle="Go back to Models"
   onclose={goToUpPage}
   onbreadcrumbClick={goToUpPage}>
+  <svelte:fragment slot="icon">
+    {#if model}
+      <div class="mr-3">
+        <ModelStatusIcon object={model} />
+      </div>
+    {/if}
+  </svelte:fragment>
   <svelte:fragment slot="content">
     <div class="flex flex-row w-full h-full bg-[var(--pd-content-bg)] overflow-y-auto">
       <div class="flex-grow p-5">

diff --git a/packages/frontend/src/pages/Models.svelte b/packages/frontend/src/pages/Models.svelte
@@ -13,30 +13,30 @@ import ModelColumnActions from '../lib/table/model/ModelColumnActions.svelte';
 import { EmptyScreen, Tab, Button, Table, TableColumn, TableRow, NavPage } from '@podman-desktop/ui-svelte';
 import Route from '/@/Route.svelte';
 import { tasks } from '/@/stores/tasks';
-import ModelColumnIcon from '../lib/table/model/ModelColumnIcon.svelte';
+import ModelStatusIcon from '../lib/icons/ModelStatusIcon.svelte';
 import { router } from 'tinro';
 import { faBookOpen, faFileImport } from '@fortawesome/free-solid-svg-icons';
 
-const columns: TableColumn<ModelInfo>[] = [
+const columns = [
   new TableColumn<ModelInfo>('Status', {
     width: '60px',
-    renderer: ModelColumnIcon,
-    comparator: (a, b) => (a.file ? 0 : 1) - (b.file ? 0 : 1),
+    renderer: ModelStatusIcon,
+    comparator: (a, b): number => (a.file ? 0 : 1) - (b.file ? 0 : 1),
   }),
   new TableColumn<ModelInfo>('Name', {
     width: '3fr',
     renderer: ModelColumnName,
-    comparator: (a, b) => b.name.localeCompare(a.name),
+    comparator: (a, b): number => b.name.localeCompare(a.name),
   }),
   new TableColumn<ModelInfo>('Size', {
     width: '50px',
     renderer: ModelColumnSize,
-    comparator: (a, b) => (a.file?.size ?? 0) - (b.file?.size ?? 0),
+    comparator: (a, b): number => (a.file?.size ?? 0) - (b.file?.size ?? 0),
   }),
   new TableColumn<ModelInfo>('Age', {
     width: '70px',
     renderer: ModelColumnAge,
-    comparator: (a, b) => (a.file?.creation?.getTime() ?? 0) - (b.file?.creation?.getTime() ?? 0),
+    comparator: (a, b): number => (a.file?.creation?.getTime() ?? 0) - (b.file?.creation?.getTime() ?? 0),
   }),
   new TableColumn<ModelInfo>('', { width: '225px', align: 'right', renderer: ModelColumnLabels }),
   new TableColumn<ModelInfo>('Actions', { align: 'right', width: '120px', renderer: ModelColumnActions }),