Display size and creation age for local models

packages/backend/src/managers/modelsManager.spec.ts

@@ -19,6 +19,12 @@ test('getLocalModels should return models in local directory', () => {
     }
     return true;
   });
+  const statSyncSpy = vi.spyOn(fs, 'statSync');
+  const info = new fs.Stats();
+  const now = new Date();
+  info.size = 32000;
+  info.mtime = now;
+  statSyncSpy.mockReturnValue(info);
   const readdirSyncMock = vi.spyOn(fs, 'readdirSync') as unknown as MockInstance<
     [path: string],
     string[] | fs.Dirent[]
@@ -53,10 +59,14 @@ test('getLocalModels should return models in local directory', () => {
     {
       id: 'model-id-1',
       file: 'model-id-1-model',
+      size: 32000,
+      creation: now,
     },
     {
       id: 'model-id-2',
       file: 'model-id-2-model',
+      size: 32000,
+      creation: now,
     },
   ]);
 });

packages/backend/src/managers/modelsManager.ts

@@ -19,9 +19,13 @@ export class ModelsManager {
         // we support models with one file only for now
         continue;
       }
+      const modelFile = modelEntries[0];
+      const info = fs.statSync(path.resolve(d.path, d.name, modelFile));
       result.push({
         id: d.name,
-        file: modelEntries[0],
+        file: modelFile,
+        size: info.size,
+        creation: info.mtime,
       });
     }
     return result;

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

@@ -30,6 +30,7 @@ import type { CatalogManager } from './managers/catalogManager';
 import type { Catalog } from '@shared/src/models/ICatalog';
 import type { PlaygroundState } from '@shared/src/models/IPlaygroundState';
 import type { ModelsManager } from './managers/modelsManager';
+import type { LocalModelInfo } from '@shared/src/models/ILocalModelInfo';
 
 export class StudioApiImpl implements StudioAPI {
   constructor(
@@ -81,8 +82,15 @@ export class StudioApiImpl implements StudioAPI {
 
   async getLocalModels(): Promise<ModelInfo[]> {
     const local = this.modelsManager.getLocalModels();
+    const localMap = new Map<string, LocalModelInfo>();
+    for (const l of local) {
+      localMap.set(l.id, l);
+    }
     const localIds = local.map(l => l.id);
-    return this.catalogManager.getModels().filter(m => localIds.includes(m.id));
+    return this.catalogManager
+      .getModels()
+      .filter(m => localIds.includes(m.id))
+      .map(m => ({ ...m, file: localMap.get(m.id) }));
   }
 
   async startPlayground(modelId: string): Promise<void> {

packages/frontend/package.json

@@ -27,8 +27,12 @@
     "@testing-library/svelte": "^4.0.5",
     "@testing-library/user-event": "^14.5.1",
     "@tsconfig/svelte": "^5.0.2",
+    "@types/humanize-duration": "^3.27.4",
     "@typescript-eslint/eslint-plugin": "6.15.0",
+    "filesize": "^10.1.0",
+    "humanize-duration": "^3.31.0",
     "jsdom": "^23.2.0",
+    "moment": "^2.30.1",
     "postcss": "^8.4.33",
     "postcss-load-config": "^5.0.2",
     "svelte": "4.2.8",

packages/frontend/src/lib/progress/TasksProgress.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { Task } from '@shared/models/ITask';
+import type { Task } from '@shared/src/models/ITask';
 
 export let tasks: Task[] = [];
 </script>

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

@@ -0,0 +1,51 @@
+/**********************************************************************
+ * Copyright (C) 2024 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 { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
+import ModelColumnCreation from './ModelColumnCreation.svelte';
+
+test('Expect simple column styling', async () => {
+  const d = new Date();
+  d.setDate(d.getDate() - 2);
+
+  const object: ModelInfo = {
+    id: 'my-model',
+    description: '',
+    hw: '',
+    license: '',
+    name: '',
+    popularity: 3,
+    registry: '',
+    url: '',
+    file: {
+      id: 'my-model',
+      file: 'file',
+      creation: d,
+      size: 1000,
+    },
+  };
+  render(ModelColumnCreation, { object });
+
+  const text = screen.getByText('2 days');
+  expect(text).toBeInTheDocument();
+  expect(text).toHaveClass('text-sm');
+  expect(text).toHaveClass('text-gray-700');
+});

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { ModelInfo } from "@shared/src/models/IModelInfo";
+  import { humanizeAge } from "/@/utils/dimensions";
+  export let object: ModelInfo;
+</script>
+
+<div class="text-sm text-gray-700">
+  {#if (object.file?.creation)}
+    {humanizeAge(object.file.creation.getTime()/1000)}
+  {/if}
+</div>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ModelInfo } from "@shared/models/IModelInfo";
+  import type { ModelInfo } from "@shared/src/models/IModelInfo";
   export let object: ModelInfo;
 </script>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ModelInfo } from "@shared/models/IModelInfo";
+  import type { ModelInfo } from "@shared/src/models/IModelInfo";
   export let object: ModelInfo;
 </script>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ModelInfo } from "@shared/models/IModelInfo";
+  import type { ModelInfo } from "@shared/src/models/IModelInfo";
   import { router } from "tinro";
   export let object: ModelInfo;
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ModelInfo } from "@shared/models/IModelInfo";
+  import type { ModelInfo } from "@shared/src/models/IModelInfo";
   export let object: ModelInfo;
 </script>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ModelInfo } from "@shared/models/IModelInfo";
+  import type { ModelInfo } from "@shared/src/models/IModelInfo";
   export let object: ModelInfo;
 </script>
 

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

@@ -0,0 +1,48 @@
+/**********************************************************************
+ * Copyright (C) 2024 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 { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
+import ModelColumnSize from './ModelColumnSize.svelte';
+
+test('Expect simple column styling', async () => {
+  const object: ModelInfo = {
+    id: 'my-model',
+    description: '',
+    hw: '',
+    license: '',
+    name: '',
+    popularity: 3,
+    registry: '',
+    url: '',
+    file: {
+      id: 'my-model',
+      file: 'file',
+      creation: new Date(),
+      size: 1000,
+    },
+  };
+  render(ModelColumnSize, { object });
+
+  const text = screen.getByText('1 kB');
+  expect(text).toBeInTheDocument();
+  expect(text).toHaveClass('text-sm');
+  expect(text).toHaveClass('text-gray-700');
+});

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { ModelInfo } from "@shared/src/models/IModelInfo";
+  import { filesize } from 'filesize';
+  export let object: ModelInfo;
+</script>
+
+<div class="text-sm text-gray-700">
+  {#if (object.file?.size)}
+    {filesize(object.file.size)}
+  {/if}
+</div>

packages/frontend/src/pages/ModelPlayground.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import type { ModelInfo } from '@shared/models/IModelInfo';
-  import type { ModelResponseChoice } from '@shared/models/IModelResponse';
+  import type { ModelInfo } from '@shared/src/models/IModelInfo';
+  import type { ModelResponseChoice } from '@shared/src/models/IModelResponse';
   import Button from '../lib/button/Button.svelte';
   import { onMount } from 'svelte';
   import { studioClient } from '../utils/client';
   import { playgroundQueries } from '../stores/playground-queries';
-  import type { QueryState } from '@shared/models/IPlaygroundQueryState';
+  import type { QueryState } from '@shared/src/models/IPlaygroundQueryState';
   import { playgroundStates } from '/@/stores/playground-states';
   import type { PlaygroundState } from '@shared/src/models/IPlaygroundState';
   import Card from '/@/lib/Card.svelte';

packages/frontend/src/pages/Models.svelte

@@ -12,15 +12,19 @@ import ModelColumnHw from '../lib/table/model/ModelColumnHW.svelte';
 import type { Task } from '@shared/src/models/ITask';
 import TasksProgress from '/@/lib/progress/TasksProgress.svelte';
 import Card from '/@/lib/Card.svelte';
-  import { modelsPulling } from '../stores/recipe';
-  import { onMount } from 'svelte';
+import { modelsPulling } from '../stores/recipe';
+import { onMount } from 'svelte';
+import ModelColumnSize from '../lib/table/model/ModelColumnSize.svelte';
+  import ModelColumnCreation from '../lib/table/model/ModelColumnCreation.svelte';
 
 const columns: Column<ModelInfo>[] = [
-  new Column<ModelInfo>('Name', { width: '4fr', renderer: ModelColumnName }),
+  new Column<ModelInfo>('Name', { width: '3fr', renderer: ModelColumnName }),
+  new Column<ModelInfo>('Size', { width: '1fr', renderer: ModelColumnSize }),
+  new Column<ModelInfo>('Creation', { width: '1fr', renderer: ModelColumnCreation }),
   new Column<ModelInfo>('HW Compat', { width: '1fr', renderer: ModelColumnHw }),
-  new Column<ModelInfo>('Registry', { width: '1fr', renderer: ModelColumnRegistry }),
+  new Column<ModelInfo>('Registry', { width: '2fr', renderer: ModelColumnRegistry }),
   new Column<ModelInfo>('Popularity', { width: '1fr', renderer: ModelColumnPopularity }),
-  new Column<ModelInfo>('License', { width: '1fr', renderer: ModelColumnLicense }),
+  new Column<ModelInfo>('License', { width: '2fr', renderer: ModelColumnLicense }),
 ];
 const row = new Row<ModelInfo>({});
 

packages/frontend/src/utils/dimensions.ts

@@ -0,0 +1,27 @@
+/**********************************************************************
+ * Copyright (C) 2024 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 moment from 'moment';
+import humanizeDuration from 'humanize-duration';
+
+export function humanizeAge(created: number): string {
+  // get start time in ms (using unix timestamp for the created)
+  const age = moment().diff(moment.unix(created));
+  // make it human friendly
+  return humanizeDuration(age, { round: true, largest: 1 });
+}

packages/shared/src/models/ILocalModelInfo.ts

@@ -1,4 +1,6 @@
 export interface LocalModelInfo {
   id: string;
   file: string;
+  size: number;
+  creation: Date;
 }

packages/shared/src/models/IModelInfo.ts

@@ -1,3 +1,5 @@
+import type { LocalModelInfo } from './ILocalModelInfo';
+
 export interface ModelInfo {
   id: string;
   name: string;
@@ -7,4 +9,5 @@ export interface ModelInfo {
   popularity: number;
   license: string;
   url: string;
+  file?: LocalModelInfo;
 }

yarn.lock

@@ -570,6 +570,11 @@
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
+"@types/humanize-duration@^3.27.4":
+  version "3.27.4"
+  resolved "https://registry.yarnpkg.com/@types/humanize-duration/-/humanize-duration-3.27.4.tgz#51d6d278213374735440bc3749de920935e9127e"
+  integrity sha512-yaf7kan2Sq0goxpbcwTQ+8E9RP6HutFBPv74T/IA/ojcHKhuKVlk2YFYyHhWZeLvZPzzLE3aatuQB4h0iqyyUA==
+
 "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz"
@@ -1975,6 +1980,11 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+filesize@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-10.1.0.tgz#846f5cd8d16e073c5d6767651a8264f6149183cd"
+  integrity sha512-GTLKYyBSDz3nPhlLVPjPWZCnhkd9TrrRArNcy8Z+J2cqScB7h2McAzR6NBX6nYOoWafql0roY8hrocxnZBv9CQ==
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
@@ -2283,6 +2293,11 @@ human-signals@^5.0.0:
   resolved "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz"
   integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==
 
+humanize-duration@^3.31.0:
+  version "3.31.0"
+  resolved "https://registry.yarnpkg.com/humanize-duration/-/humanize-duration-3.31.0.tgz#a0384d22555024cd17e6e9f8561540d37756bf4c"
+  integrity sha512-fRrehgBG26NNZysRlTq1S+HPtDpp3u+Jzdc/d5A4cEzOD86YLAkDaJyJg8krSdCi7CJ+s7ht3fwRj8Dl+Btd0w==
+
 [email protected]:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
@@ -2865,6 +2880,11 @@ mlly@^1.2.0, mlly@^1.4.2:
     pkg-types "^1.0.3"
     ufo "^1.3.0"
 
+moment@^2.30.1:
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
+  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
+
 [email protected], ms@^2.1.1:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"