diff --git a/packages/frontend/src/pages/Models.spec.ts b/packages/frontend/src/pages/Models.spec.ts
index d83709de0..056068581 100644
--- a/packages/frontend/src/pages/Models.spec.ts
+++ b/packages/frontend/src/pages/Models.spec.ts
@@ -16,7 +16,7 @@
* SPDX-License-Identifier: Apache-2.0
***********************************************************************/
-import { vi, test, expect } from 'vitest';
+import { vi, test, expect, describe } from 'vitest';
import { screen, render, waitFor, within } from '@testing-library/svelte';
import Models from './Models.svelte';
import { router } from 'tinro';
@@ -145,91 +145,182 @@ test('should display one model', async () => {
expect(name).toBeDefined();
});
-test('should display no model in downloaded tab', async () => {
- mocks.modelsInfoSubscribeMock.mockReturnValue([
- {
- id: 'dummy-id',
- name: 'dummy-name',
- memory: 1024,
- },
- ]);
- mocks.tasksSubscribeMock.mockReturnValue([]);
+describe('downloaded models', () => {
+ test('should display no model in downloaded tab', async () => {
+ mocks.modelsInfoSubscribeMock.mockReturnValue([
+ {
+ id: 'dummy-id',
+ name: 'dummy-name',
+ memory: 1024,
+ },
+ ]);
+ mocks.tasksSubscribeMock.mockReturnValue([]);
- render(Models);
+ render(Models);
- router.goto('downloaded');
+ router.goto('downloaded');
- await waitFor(() => {
- const status = screen.getByRole('status');
- expect(status).toBeDefined();
+ await waitFor(() => {
+ const status = screen.getByRole('status');
+ expect(status).toBeDefined();
+ });
});
-});
-test('should display a model in downloaded tab', async () => {
- mocks.modelsInfoSubscribeMock.mockReturnValue([
- {
- id: 'dummy-id',
- name: 'dummy-name',
- file: {
- file: 'dummy',
- path: 'dummy',
+ test('should display a model in downloaded tab', async () => {
+ mocks.modelsInfoSubscribeMock.mockReturnValue([
+ {
+ id: 'dummy-id',
+ name: 'dummy-name',
+ file: {
+ file: 'dummy',
+ path: 'dummy',
+ },
+ memory: 1024,
+ url: 'http://url',
},
- memory: 1024,
- },
- ]);
- mocks.tasksSubscribeMock.mockReturnValue([]);
+ ]);
+ mocks.tasksSubscribeMock.mockReturnValue([]);
- render(Models);
+ render(Models);
- router.goto('downloaded');
+ router.goto('downloaded');
- await waitFor(() => {
- const table = screen.getByRole('table');
- expect(table).toBeDefined();
+ await waitFor(() => {
+ const table = screen.getByRole('table');
+ expect(table).toBeDefined();
+ });
+ });
+
+ test('should display only downloaded models', async () => {
+ mocks.modelsInfoSubscribeMock.mockReturnValue([
+ {
+ id: 'dummy-id-downloaded',
+ name: 'dummy-downloaded-1',
+ file: {
+ file: 'dummy',
+ path: 'dummy',
+ },
+ memory: 1024,
+ url: 'http://url',
+ },
+ {
+ id: 'dummy-id-downloaded-2',
+ name: 'dummy-downloaded-2',
+ file: {
+ file: 'dummy',
+ path: 'dummy',
+ },
+ memory: 1024,
+ url: 'http://url',
+ },
+ {
+ id: 'dummy-id-imported',
+ name: 'dummy-imported',
+ file: {
+ file: 'dummy',
+ path: 'dummy',
+ },
+ memory: 1024,
+ },
+ ]);
+ mocks.tasksSubscribeMock.mockReturnValue([]);
+
+ render(Models);
+
+ router.goto('downloaded');
+
+ await waitFor(() => expect(screen.getByRole('table')).toBeDefined());
+
+ const rows = screen.getAllByRole('cell', { name: 'Model Name' });
+ expect(rows.length).toBe(2);
+ expect((rows[0].firstChild as HTMLElement).title).toBe('dummy-downloaded-1');
+ expect((rows[1].firstChild as HTMLElement).title).toBe('dummy-downloaded-2');
});
});
-test('should display a model in available tab', async () => {
- mocks.modelsInfoSubscribeMock.mockReturnValue([
- {
- id: 'dummy-id',
- name: 'dummy-name',
- memory: 1024,
- },
- ]);
- mocks.tasksSubscribeMock.mockReturnValue([]);
+describe('imported models', () => {
+ test('should display no model in imported tab', async () => {
+ mocks.modelsInfoSubscribeMock.mockReturnValue([]);
+ mocks.tasksSubscribeMock.mockReturnValue([]);
- render(Models);
+ render(Models);
- router.goto('available');
+ router.goto('imported');
- await waitFor(() => {
- const table = screen.getByRole('table');
- expect(table).toBeDefined();
+ await waitFor(() => {
+ const status = screen.getByRole('status');
+ expect(status).toBeDefined();
+ });
+ });
+
+ test('should display a model in imported tab', async () => {
+ mocks.modelsInfoSubscribeMock.mockReturnValue([
+ {
+ id: 'dummy-id',
+ name: 'dummy-name',
+ file: {
+ file: 'dummy',
+ path: 'dummy',
+ },
+ memory: 1024,
+ },
+ ]);
+ mocks.tasksSubscribeMock.mockReturnValue([]);
+
+ render(Models);
+
+ router.goto('imported');
+
+ await waitFor(() => {
+ const table = screen.getByRole('table');
+ expect(table).toBeDefined();
+ });
});
});
-test('should display no model in available tab', async () => {
- mocks.modelsInfoSubscribeMock.mockReturnValue([
- {
- id: 'dummy-id',
- name: 'dummy-name',
- file: {
- file: 'dummy',
- path: 'dummy',
+describe('available models', () => {
+ test('should display a model in available tab', async () => {
+ mocks.modelsInfoSubscribeMock.mockReturnValue([
+ {
+ id: 'dummy-id',
+ name: 'dummy-name',
+ memory: 1024,
},
- memory: 1024,
- },
- ]);
- mocks.tasksSubscribeMock.mockReturnValue([]);
+ ]);
+ mocks.tasksSubscribeMock.mockReturnValue([]);
- render(Models);
+ render(Models);
- router.goto('available');
+ router.goto('available');
- await waitFor(() => {
- const status = screen.getByRole('status');
- expect(status).toBeDefined();
+ await waitFor(() => {
+ const table = screen.getByRole('table');
+ expect(table).toBeDefined();
+ });
+ });
+
+ test('should display no model in available tab', async () => {
+ mocks.modelsInfoSubscribeMock.mockReturnValue([
+ {
+ id: 'dummy-id',
+ name: 'dummy-name',
+ file: {
+ file: 'dummy',
+ path: 'dummy',
+ },
+ memory: 1024,
+ },
+ ]);
+ mocks.tasksSubscribeMock.mockReturnValue([]);
+
+ render(Models);
+
+ router.goto('available');
+
+ await waitFor(() => {
+ const status = screen.getByRole('status');
+ expect(status).toBeDefined();
+ });
});
});
diff --git a/packages/frontend/src/pages/Models.svelte b/packages/frontend/src/pages/Models.svelte
index f691faacd..f776b4efd 100644
--- a/packages/frontend/src/pages/Models.svelte
+++ b/packages/frontend/src/pages/Models.svelte
@@ -51,8 +51,9 @@ let models: ModelInfo[] = [];
// filtered mean, we remove the models that are being downloaded
let filteredModels: ModelInfo[] = [];
-$: localModels = filteredModels.filter(model => model.file);
+$: localModels = filteredModels.filter(model => model.file && model.url);
$: remoteModels = filteredModels.filter(model => !model.file);
+$: importedModels = filteredModels.filter(model => !model.url);
function filterModels(): void {
// Let's collect the models we do not want to show (loading, error).
@@ -108,6 +109,7 @@ async function importModel() {
+
@@ -145,6 +147,15 @@ async function importModel() {
{/if}
+
+
+ {#if importedModels.length > 0}
+
+ {:else}
+ There are no models yet
+ {/if}
+
+
{#if remoteModels.length > 0}