implement base start on diffusion model page and add global icons ser…

…vice

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)

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());
 			}
 		}

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',

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();
+	}
+}

frontend/src/app/modules/diffusion-model/components/difussion-model/difussion-model.component.html

@@ -0,0 +1,18 @@
+<!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
+
+  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
+   -->
+
+<p class="heading-primary-title title">Diffusion Model</p>

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

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<DifussionModelComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [DifussionModelComponent]
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(DifussionModelComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

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 {}

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 {}

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 {}

frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html

@@ -17,7 +17,15 @@
 <div class="sidenav-item" [routerLink]="item.route" routerLinkActive="active-route">
 	<div class="left-side">
 		<div class="item-icon">
-			<mat-icon fontSet="ms" [fontIcon]="item.icon"></mat-icon>
+			<div class="item-icon">
+				@switch (item.fontSet) { @case ('ms') {
+				<mat-icon [fontSet]="item.fontSet" [fontIcon]="item.icon"></mat-icon>
+				} @case ('svg') {
+				<mat-icon [svgIcon]="item.icon"></mat-icon>
+				} @default {
+				<mat-icon>{{ item.icon }}</mat-icon>
+				} }
+			</div>
 		</div>
 		@if (isExpanded) {
 		<div>

frontend/src/app/modules/shared/components/ms-sidenav/models/constants/sidenav.constants.ts

@@ -22,47 +22,60 @@ const common: SidenavItem[] = [
 	{
 		route: RoutesList.ADMIN.ROOT,
 		label: 'Admin',
-		icon: 'icon-Admin'
+		icon: 'icon-Admin',
+		fontSet: 'ms'
 	}
 ];
 
 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'
 	}
 ];
 

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;
 }