From 38c7b75fa88f6ad390e8fbc182dfa2e0f4576571 Mon Sep 17 00:00:00 2001 From: Pop John Date: Mon, 6 Jan 2025 16:06:19 +0200 Subject: [PATCH] implement base start on diffusion model page and add global icons service --- frontend/src/app/app.routes.ts | 5 ++ .../app/modules/core/core-services.provide.ts | 6 ++ .../core/models/enums/routes-list.enum.ts | 3 + .../modules/core/services/icons.service.ts | 57 +++++++++++++++++++ .../difussion-model.component.html | 18 ++++++ .../difussion-model.component.scss | 15 +++++ .../difussion-model.component.spec.ts | 37 ++++++++++++ .../difussion-model.component.ts | 24 ++++++++ .../diffusion-model-routing.module.ts | 32 +++++++++++ .../diffusion-model/diffusion-model.module.ts | 26 +++++++++ .../ms-sidenav-item.component.html | 10 +++- .../models/constants/sidenav.constants.ts | 21 +++++-- .../models/interfaces/sidenav.interface.ts | 1 + .../src/assets/icons/machine-learning.svg | 1 + 14 files changed, 251 insertions(+), 5 deletions(-) create mode 100644 frontend/src/app/modules/core/services/icons.service.ts create mode 100644 frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.html create mode 100644 frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.scss create mode 100644 frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.spec.ts create mode 100644 frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.ts create mode 100644 frontend/src/app/modules/diffusion-model/diffusion-model-routing.module.ts create mode 100644 frontend/src/app/modules/diffusion-model/diffusion-model.module.ts create mode 100644 frontend/src/assets/icons/machine-learning.svg diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index da82007f..c15729f4 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -92,6 +92,11 @@ export const routes: Routes = [ path: RoutesList.MULTI_MODAL.ROOT, loadChildren: () => import('./modules/multi-modal/multi-modal.module').then((m) => m.MultiModalModule) }, + { + path: RoutesList.DIFFUSION_MODEL.ROOT, + loadChildren: () => + import('./modules/diffusion-model/diffusion-model.module').then((m) => m.DiffusionModelModule) + }, { path: RoutesList.ADMIN.ROOT, loadChildren: () => import('./modules/admin/admin.module').then((m) => m.AdminModule) diff --git a/frontend/src/app/modules/core/core-services.provide.ts b/frontend/src/app/modules/core/core-services.provide.ts index f00b6fad..c4759cd5 100644 --- a/frontend/src/app/modules/core/core-services.provide.ts +++ b/frontend/src/app/modules/core/core-services.provide.ts @@ -19,6 +19,7 @@ import { TerminalFacadeService, WebsocketService } from './services'; +import { IconsService } from './services/icons.service'; import { ModelsFacadeService } from './services/models-facade.service'; import { PageRunningScriptSpiningIndicatorService } from './services/page-running-script-spinning-indicator.service'; @@ -42,6 +43,7 @@ export function provideCoreServices(): Provider[] { PageRunningScriptSpiningIndicatorService, ModelsFacadeService, DialogService, + IconsService, { provide: ENVIRONMENT_INITIALIZER, multi: true, @@ -52,13 +54,17 @@ export function provideCoreServices(): Provider[] { const scriptFacadeService = inject(ScriptFacadeService); const websocketService = inject(WebsocketService); const terminalWebSocketService = inject(TerminalWebSocketService); + const iconService = inject(IconsService); websocketService.connect(); terminalWebSocketService.connect(); navigationService.trackNavigationHistory(); pageSpinningIndicatorService.trackCurrentRunningPage(); + registry.registerFontClassAlias('icomoon', 'ms'); + iconService.registerAllCustomIcons(); + scriptFacadeService.dispatch(ScriptActions.fetchScriptStatus()); } } diff --git a/frontend/src/app/modules/core/models/enums/routes-list.enum.ts b/frontend/src/app/modules/core/models/enums/routes-list.enum.ts index 403897d8..e72e8a9e 100644 --- a/frontend/src/app/modules/core/models/enums/routes-list.enum.ts +++ b/frontend/src/app/modules/core/models/enums/routes-list.enum.ts @@ -49,6 +49,9 @@ export const RoutesList = { ADMIN: { ROOT: 'admin' }, + DIFFUSION_MODEL: { + ROOT: 'diffusion-model' + }, DEMO: { ROOT: 'demo', BUTTONS: 'buttons', diff --git a/frontend/src/app/modules/core/services/icons.service.ts b/frontend/src/app/modules/core/services/icons.service.ts new file mode 100644 index 00000000..61719e0c --- /dev/null +++ b/frontend/src/app/modules/core/services/icons.service.ts @@ -0,0 +1,57 @@ +// Copyright 2024 Cisco Systems, 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 { Injectable } from '@angular/core'; +import { MatIconRegistry } from '@angular/material/icon'; +import { DomSanitizer } from '@angular/platform-browser'; + +@Injectable() +export class IconsService { + constructor( + private matIconRegistry: MatIconRegistry, + private domSanitizer: DomSanitizer + ) {} + + /** + * Registers a single SVG icon. + * @param iconName The name to reference the icon. + * @param iconPath The relative path to the SVG file. + */ + registerIcon(iconName: string, iconPath: string): void { + console.log(iconName, iconPath); + this.matIconRegistry.addSvgIcon(iconName, this.domSanitizer.bypassSecurityTrustResourceUrl(iconPath)); + } + + /** + * Registers multiple SVG icons from a specified directory. + * @param iconNames Array of icon names. + * @param directoryPath The directory where icons are stored. + */ + registerIcons(iconNames: string[], directoryPath: string): void { + iconNames.forEach((iconName) => { + const fullPath = `${directoryPath}/${iconName}.svg`; + this.registerIcon(iconName, fullPath); + }); + } + + registerAllCustomIcons(): void { + this.registerIcons(['machine-learning'], 'assets/icons'); + } + + initializeIcons(): void { + this.registerAllCustomIcons(); + } +} diff --git a/frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.html b/frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.html new file mode 100644 index 00000000..5104ba46 --- /dev/null +++ b/frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.html @@ -0,0 +1,18 @@ + + +

Diffusion Model

diff --git a/frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.scss b/frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.scss new file mode 100644 index 00000000..fa91ee89 --- /dev/null +++ b/frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.scss @@ -0,0 +1,15 @@ +// Copyright 2024 Cisco Systems, 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 diff --git a/frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.spec.ts b/frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.spec.ts new file mode 100644 index 00000000..d6c24a6d --- /dev/null +++ b/frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.spec.ts @@ -0,0 +1,37 @@ +// Copyright 2024 Cisco Systems, 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 { ComponentFixture, TestBed } from '@angular/core/testing'; +import { DifussionModelComponent } from './difussion-model.component'; + +describe('DifussionModelComponent', () => { + let component: DifussionModelComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DifussionModelComponent] + }).compileComponents(); + + fixture = TestBed.createComponent(DifussionModelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.ts b/frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.ts new file mode 100644 index 00000000..e5236507 --- /dev/null +++ b/frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.ts @@ -0,0 +1,24 @@ +// Copyright 2024 Cisco Systems, 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 { Component } from '@angular/core'; + +@Component({ + selector: 'ms-difussion-model', + templateUrl: './difussion-model.component.html', + styleUrl: './difussion-model.component.scss' +}) +export class DifussionModelComponent {} diff --git a/frontend/src/app/modules/diffusion-model/diffusion-model-routing.module.ts b/frontend/src/app/modules/diffusion-model/diffusion-model-routing.module.ts new file mode 100644 index 00000000..ef9779d9 --- /dev/null +++ b/frontend/src/app/modules/diffusion-model/diffusion-model-routing.module.ts @@ -0,0 +1,32 @@ +// Copyright 2024 Cisco Systems, 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 { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { DifussionModelComponent } from './components/difussion-model/difussion-model.component'; + +const DIFUSSION_MODEL_ROUTES: Routes = [ + { + path: '', + component: DifussionModelComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(DIFUSSION_MODEL_ROUTES)], + exports: [RouterModule] +}) +export class DiffusionModelRoutingModule {} diff --git a/frontend/src/app/modules/diffusion-model/diffusion-model.module.ts b/frontend/src/app/modules/diffusion-model/diffusion-model.module.ts new file mode 100644 index 00000000..24ca4da6 --- /dev/null +++ b/frontend/src/app/modules/diffusion-model/diffusion-model.module.ts @@ -0,0 +1,26 @@ +// Copyright 2024 Cisco Systems, 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 { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { DifussionModelComponent } from './components/difussion-model/difussion-model.component'; +import { DiffusionModelRoutingModule } from './diffusion-model-routing.module'; + +@NgModule({ + declarations: [DifussionModelComponent], + imports: [DiffusionModelRoutingModule, CommonModule] +}) +export class DiffusionModelModule {} diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html b/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html index 66c7dce1..90697b65 100644 --- a/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html +++ b/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html @@ -17,7 +17,15 @@
- +
+ @switch (item.fontSet) { @case ('ms') { + + } @case ('svg') { + + } @default { + {{ item.icon }} + } } +
@if (isExpanded) {
diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/models/constants/sidenav.constants.ts b/frontend/src/app/modules/shared/components/ms-sidenav/models/constants/sidenav.constants.ts index 993a8a24..9c2ddb7f 100644 --- a/frontend/src/app/modules/shared/components/ms-sidenav/models/constants/sidenav.constants.ts +++ b/frontend/src/app/modules/shared/components/ms-sidenav/models/constants/sidenav.constants.ts @@ -22,7 +22,8 @@ const common: SidenavItem[] = [ { route: RoutesList.ADMIN.ROOT, label: 'Admin', - icon: 'icon-Admin' + icon: 'icon-Admin', + fontSet: 'ms' } ]; @@ -30,39 +31,51 @@ const guided: SidenavItem[] = [ { route: RoutesList.WIZARD.ROOT, label: 'Wizard', - icon: 'icon-Question' + icon: 'icon-Question', + fontSet: 'ms' } ]; const expert: SidenavItem[] = [ { route: RoutesList.MODEL_COMPRESSION.ROOT, - label: 'Clasic Model Compression', + label: 'Model Compression', icon: 'icon-GearSix', + fontSet: 'ms', key: PageKey.MODEL_COMPRESSION }, { route: RoutesList.MACHINE_UNLEARNING.ROOT, label: 'Machine Unlearning', icon: 'icon-Systems-Manager', + fontSet: 'ms', key: PageKey.MACHINE_UNLEARNING }, { route: RoutesList.AWQ.ROOT, label: 'LLM Quantization', icon: 'icon-Lightning', + fontSet: 'ms', key: PageKey.AWQ }, { route: RoutesList.MULTI_MODAL.ROOT, label: 'Multi-modal', icon: 'icon-Environmental', + fontSet: 'ms', key: PageKey.MODEL_SPECIALIZATION }, + { + route: RoutesList.DIFFUSION_MODEL.ROOT, + label: 'Diffusion Model', + icon: 'machine-learning', + fontSet: 'svg' + }, { route: RoutesList.ALGORITHM_COMPARISON.ROOT, label: 'Algorithm Comparison', - icon: 'icon-Rocket' + icon: 'icon-Rocket', + fontSet: 'ms' } ]; diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/models/interfaces/sidenav.interface.ts b/frontend/src/app/modules/shared/components/ms-sidenav/models/interfaces/sidenav.interface.ts index caf8f84a..5b918705 100644 --- a/frontend/src/app/modules/shared/components/ms-sidenav/models/interfaces/sidenav.interface.ts +++ b/frontend/src/app/modules/shared/components/ms-sidenav/models/interfaces/sidenav.interface.ts @@ -18,6 +18,7 @@ export interface SidenavItem { route: string; label: string; icon: string; + fontSet?: 'ms' | 'svg' | 'none'; key?: string; } diff --git a/frontend/src/assets/icons/machine-learning.svg b/frontend/src/assets/icons/machine-learning.svg new file mode 100644 index 00000000..d05ecec2 --- /dev/null +++ b/frontend/src/assets/icons/machine-learning.svg @@ -0,0 +1 @@ + \ No newline at end of file