Add image generation feature with new component and service integration

jambotron-ui/src/app/app.config.ts

@@ -11,10 +11,12 @@ import { provideClientHydration, withEventReplay } from '@angular/platform-brows
 import {AppModule} from './app.module';
 import {providePrimeNG} from 'primeng/config';
 import Aura from '@primeng/themes/aura';
+import {provideAnimations} from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
+    provideAnimations(),
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes), provideClientHydration(withEventReplay()),
 

jambotron-ui/src/app/app.module.ts

@@ -5,7 +5,7 @@ import { BrowserModule }
 import { BrowserAnimationsModule }
   from '@angular/platform-browser/animations';
 import { MatIconModule } from '@angular/material/icon';
-import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
+import {HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
 
 import {MainComponent} from './main-module/main.component/main.component';
 import {authInterceptorProviders} from './helpers/auth.interceptor';
@@ -15,6 +15,10 @@ import {SettingsComponent} from './admin-module/settings.component/settings.comp
 import {SystemComponent} from './admin-module/system.component/system.component';
 import {AppRoutingModule} from './app.routes';
 import {App} from './app';
+import {CustomHttpInterceptor} from './helpers/custom-http-interceptor';
+import {AngularImageViewerModule} from '@hreimer/angular-image-viewer';
+import {MainModule} from './main-module/main.module';
+import {CommonModule} from '@angular/common';
 
 @NgModule({
   declarations: [
@@ -29,10 +33,15 @@ import {App} from './app';
     AdminComponent,
     AdminWelcomeComponent,
     SettingsComponent,
-    SystemComponent
+    SystemComponent,
+
   ],
   providers: [
-    authInterceptorProviders,provideHttpClient(withInterceptorsFromDi())],
+    authInterceptorProviders,provideHttpClient(withInterceptorsFromDi()),{
+      provide: HTTP_INTERCEPTORS,
+      useClass: CustomHttpInterceptor,
+      multi: true
+    }],
 
   bootstrap: [],
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

jambotron-ui/src/app/app.routes.ts

@@ -6,7 +6,7 @@ import {NgModule} from '@angular/core';
 export const routes: Routes = [
   {
     path: '',
-    redirectTo: 'main/home',
+    redirectTo: 'main/generate-image',
     pathMatch: 'full'
   },
   {

jambotron-ui/src/app/components/generate-image.component/generate-image.component.html

@@ -0,0 +1,27 @@
+<p>generate-image.component works!</p>
+
+
+<mat-card  appearance="outlined">
+  <mat-card-header>
+    <mat-card-title>Generate image</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <mat-form-field class="example-full-width">
+      <mat-label>Query</mat-label>
+      <input matInput required
+             [(ngModel)]="query">
+    </mat-form-field>
+  </mat-card-content>
+  <mat-card-actions>
+
+    @if (spinnerService.visibility | async) {
+      <mat-spinner  [diameter]="25" ></mat-spinner>
+    } @else {
+      <button matButton (click)="generateImage()" >Generate</button>
+    }
+     </mat-card-actions>
+</mat-card>
+
+<button mat-raised-button (click)="zoomPlus()" >Generate</button>
+<button mat-raised-button (click)="zoomMinus()" >Generate</button>
+<img src={{image.url}} />

jambotron-ui/src/app/components/generate-image.component/generate-image.component.scss

@@ -0,0 +1,3 @@
+.example-full-width {
+  width: 100%;
+}

jambotron-ui/src/app/components/generate-image.component/generate-image.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GenerateImageComponent } from './generate-image.component';
+
+describe('GenerateImageComponent', () => {
+  let component: GenerateImageComponent;
+  let fixture: ComponentFixture<GenerateImageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GenerateImageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GenerateImageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

jambotron-ui/src/app/components/generate-image.component/generate-image.component.ts

@@ -0,0 +1,89 @@
+import {Component, CUSTOM_ELEMENTS_SCHEMA, Input, OnInit, Renderer2} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatButton} from '@angular/material/button';
+import {MatCard, MatCardActions, MatCardContent, MatCardHeader} from '@angular/material/card';
+import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
+import {AsyncPipe, NgIf, NgOptimizedImage} from '@angular/common';
+import {Image} from '../../models/image';
+import {ZhipuaiImageService} from '../../services/zhipuai-image.service';
+import {MatProgressSpinner} from '@angular/material/progress-spinner';
+import {SpinnerService} from '../../services/spinner.service';
+
+import Viewer from 'viewerjs';
+
+
+@Component({
+  selector: 'app-generate-image.component',
+  imports: [
+    FormsModule,
+    MatButton,
+    MatCard,
+    MatCardActions,
+    MatCardContent,
+    MatCardHeader,
+    MatFormField,
+    MatInput,
+    MatLabel,
+    MatProgressSpinner,
+    AsyncPipe,
+
+
+  ],
+  templateUrl: './generate-image.component.html',
+  styleUrl: './generate-image.component.scss',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GenerateImageComponent implements OnInit {
+
+  isSpinnerVisible = false;
+
+  query : string = '';
+
+  images = [];
+  image: Image = {
+    url: ''
+  };
+  viewer: any;
+
+  constructor(private zhipuaiImageService: ZhipuaiImageService,public spinnerService: SpinnerService,
+              private renderer: Renderer2) {
+
+  }
+
+  ngOnInit(): void {
+
+      const img = this.renderer.selectRootElement('img');
+      this.viewer = new Viewer(img, {
+        inline: true,
+      });
+      this.viewer.zoomTo(1);
+
+  }
+
+  generateImage(){
+    this.zhipuaiImageService.generate(this.query).subscribe(
+      data => {
+
+        this.image = data;
+        // @ts-ignore
+        this.images = [this.image.url];
+
+
+        console.log(data);
+      },
+      error => {
+        console.log(error);
+      }
+    ).add(() => {
+      //this.viewer.
+      this.viewer.update();
+    })
+  }
+
+  zoomPlus(){
+    this.viewer.zoomTo(5);
+  }
+  zoomMinus(){
+    this.viewer.zoomTo(-5);
+  }
+}

jambotron-ui/src/app/components/home.component/home.component.html

@@ -1,51 +1,50 @@
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
-<p>home.component works!</p>
+<p>dfsdgdsgsdg</p>
+
+<p>dfsdgdsgsdg</p>
+<p>dfsdgdsgsdg</p>
+<p>dfsdgdsgsdg</p>
+<p>dfsdgdsgsdg</p>
+<p>dfsdgdsgsdg</p><p>dfsdgdsgsdg</p>
+<p>dfsdgdsgsdg</p>
+<p>dfsdgdsgsdg</p>
+<p>dfsdgdsgsdg</p>
+<p>dfsdgdsgsdg</p>
+<p>dfsdgdsgsdg</p><p>dfsdgdsgsdg</p>
+<p>dfsdgdsgsdg</p>
+<p>dfsdgdsgsdg</p>
+<p>dfsdgdsgsdg</p>
+
+
+
+
+
+
+<!--
+<mat-card  appearance="outlined">
+  <mat-card-header>
+    <mat-card-title>Add tutorial</mat-card-title>
+  </mat-card-header>
+  <mat-card-content *ngIf="!submitted">
+    <mat-form-field class="example-full-width">
+      <mat-label>Title</mat-label>
+<input matInput [(ngModel)]="query">
+    </mat-form-field>
+    &lt;!&ndash;     <kendo-editor [(ngModel)]="tutorial.description" ></kendo-editor>&ndash;&gt;
+
+  </mat-card-content>
+  <mat-card-actions>
+    <button matButton (click)="generateImage()" >Save</button>
+    <div>
+      <h4>Tutorial was submitted successfully!</h4>
+
+    </div>
+  </mat-card-actions>
+</mat-card>
+
+
+<div>
+  <angular-image-viewer [src]="images" [(config)]="config" [(index)]="imageIndexOne"
+                        [screenHeightOccupied]='0'  (customImageEvent)="handleEvent($event)"   >
+  </angular-image-viewer>
+</div>
+-->

jambotron-ui/src/app/components/home.component/home.component.ts

@@ -1,11 +1,76 @@
-import { Component } from '@angular/core';
+import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
+import {AngularImageViewerModule, CustomImageEvent, ImageViewerConfig} from '@hreimer/angular-image-viewer';
+
+import {ZhipuaiImageService} from '../../services/zhipuai-image.service';
+import {MatButton} from '@angular/material/button';
+
+
+import {FormsModule} from '@angular/forms';
+import {CommonModule} from '@angular/common';
+import {BrowserModule} from '@angular/platform-browser';
+import {MatCard, MatCardActions, MatCardContent, MatCardHeader} from '@angular/material/card';
+import {Image} from '../../models/image';
 
 @Component({
   selector: 'app-home.component',
-  imports: [],
+  imports: [
+
+    AngularImageViewerModule,
+    FormsModule
+    ],
   templateUrl: './home.component.html',
-  styleUrl: './home.component.scss'
+  styleUrl: './home.component.scss',
+  schemas :[CUSTOM_ELEMENTS_SCHEMA]
 })
+
 export class HomeComponent {
 
+  query : string = '';
+
+  images = [];
+  image: Image = {
+    url: ''
+  };
+  imageIndexOne = 0;
+
+  config: ImageViewerConfig = { customBtns: [{ name: 'print',  icon: {
+        classes: 'fas fa-paperclip',
+        text: 'link'
+      } }, { name: 'link',  icon: {
+        classes: 'fas fa-paperclip',
+        text: 'link'
+      } }] };
+
+  submitted: boolean = false;
+
+  constructor(private zhipuaiImageService: ZhipuaiImageService) {
+
+  }
+
+  handleEvent(event: CustomImageEvent) {
+    console.log(`${event.name} has been click on img ${event.imageIndex + 1}`);
+
+    switch (event.name) {
+      case 'print':
+        console.log('run print logic');
+        break;
+    }
+  }
+  generateImage(){
+    this.zhipuaiImageService.generate(this.query).subscribe(
+      data => {
+        this.image = data;
+        // @ts-ignore
+        this.images = [this.image.url];
+
+
+        console.log(data);
+      },
+      error => {
+        console.log(error);
+      }
+    )
+  }
+
 }

jambotron-ui/src/app/main-module/main.component/main.component.html

@@ -1,11 +1,14 @@
 <!--<p>main.component works!</p>-->
 
 <mat-toolbar class="fixed-top">
-  <button mat-raised-button routerLink="/" href="#">
-    <img ngSrc="jambotron_logo.svg" height="40" width="135">
+  <button mat-raised-button routerLink="home">
+<!--    <img ngSrc="jambotron_logo.svg" height="40" width="135">-->
     My App
   </button>
   <span class="menu-spacer"></span>
+  <button mat-raised-button routerLink="generate-image">
+    Generate Image
+  </button>
   <button mat-raised-button routerLink="tutorials">
     Tutorials
   </button>
@@ -17,14 +20,14 @@
   <span class="menu-spacer"></span>
   @if (showAdminBoard) {
     <button mat-raised-button routerLink="admin/welcome">
-      <mat-icon>manage_accounts</mat-icon>
+<!--      <mat-icon>manage_accounts</mat-icon>-->
       Admin Bord
     </button>
   }
 
   @if (showAdminBoard) {
     <button mat-raised-button routerLink="admin/system" >
-      <mat-icon>settings_applications</mat-icon>
+<!--      <mat-icon>settings_applications</mat-icon>-->
       System
     </button>
   }
@@ -32,7 +35,7 @@
   <span class="menu-spacer"></span>
   @if (isLoggedIn) {
   <button mat-raised-button routerLink="register">
-    <mat-icon>app_registration</mat-icon>
+<!--    <mat-icon>app_registration</mat-icon>-->
     Register
   </button>
   }
@@ -40,17 +43,17 @@
   <button mat-raised-button (click)="openDialog('100ms', '5ms')" >
 <!--    <i antIcon type="bell" theme="outline"></i>-->
 <!--    <mat-icon>login</mat-icon>-->
-    <i class="d- f-20" antIcon theme="outline" type="login">Login</i>
+<!--    <i class="d- f-20" antIcon theme="outline" type="login">Login</i>-->
   </button>
   }
   @if (isLoggedIn) {
   <button mat-raised-button routerLink="profile" >
-    <mat-icon>account_circle</mat-icon>
+<!--    <mat-icon>account_circle</mat-icon>-->
     {{ username }}
   </button>
     <button mat-raised-button (click)="logout()">
 
-            <i class="d-flex f-20" antIcon theme="outline" type="logout"></i>
+<!--            <i class="d-flex f-20" antIcon theme="outline" type="logout"></i>-->
       Logout
     </button>
 

jambotron-ui/src/app/main-module/main.component/main.component.ts

@@ -1,10 +1,7 @@
 import {Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit} from '@angular/core';
 //import {NavigationComponent} from '../navigation/navigation.component';
-import {NgClass, NgOptimizedImage} from '@angular/common';
-import {NavigationComponent} from '../../layouts/admin-layout/navigation/navigation.component';
+
 import {Router, RouterLink, RouterOutlet} from '@angular/router';
-import {BreadcrumbComponent} from '../../components/breadcrumb/breadcrumb.component';
-import {NavBarComponent} from '../../layouts/admin-layout/nav-bar/nav-bar.component';
 import {MatToolbar} from '@angular/material/toolbar';
 import {MatButton} from '@angular/material/button';
 import {IconDirective, IconService} from '@ant-design/icons-angular';
@@ -22,17 +19,20 @@ import {
   PhoneOutline, ProfileOutline, QuestionCircleOutline,
   SettingOutline, UnorderedListOutline, UserOutline, WalletOutline
 } from '@ant-design/icons-angular/icons';
+import {BrowserModule} from '@angular/platform-browser';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'app-main.component',
   imports: [
-    NavBarComponent,
+
     MatToolbar,
     MatButton,
     RouterLink,
     IconDirective,
     RouterOutlet,
-    NgOptimizedImage
+    CommonModule
+
   ],
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
   templateUrl: './main.component.html',

jambotron-ui/src/app/main-module/main.module.ts

@@ -2,12 +2,30 @@ import {RouterModule} from '@angular/router';
 import {MainComponent} from './main.component/main.component';
 import {mainRouting} from './main.routing';
 import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {HTTP_INTERCEPTORS} from '@angular/common/http';
+import {CustomHttpInterceptor} from '../helpers/custom-http-interceptor';
+import {AngularImageViewerModule} from '@hreimer/angular-image-viewer';
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [
 
   ],
-  imports: [mainRouting, MainComponent],
+  imports: [
+    mainRouting,
+    MainComponent,
+
+
+
+  ],
   exports: [RouterModule],
+  providers: [{
+    provide: HTTP_INTERCEPTORS,
+    useClass: CustomHttpInterceptor,
+    multi: true
+  }],
 })
 export class MainModule {}

jambotron-ui/src/app/main-module/main.routing.ts

@@ -6,6 +6,7 @@ import {TutorialsComponent} from '../components/tutorials.component/tutorials.co
 import {AddTutorialComponent} from '../components/add-tutorial/add-tutorial.component';
 import {RegisterComponent} from '../components/register/register.component';
 import {ProfileComponent} from '../components/profile/profile.component';
+import {GenerateImageComponent} from '../components/generate-image.component/generate-image.component';
 
 const MAIN_ROUTES: Routes =[
   {
@@ -21,6 +22,10 @@ const MAIN_ROUTES: Routes =[
         path: 'home',
         component: HomeComponent
       },
+      {
+        path: 'generate-image',
+        component: GenerateImageComponent
+      },
       {
         path: 'tutorials',
         component: TutorialsComponent

jambotron-ui/src/app/models/image.ts

@@ -0,0 +1,5 @@
+export class Image {
+
+  url?:string;
+  b64Json?:boolean;
+}

jambotron-ui/src/app/services/system.service.ts

@@ -21,6 +21,10 @@ export class SystemService {
     return this.http.get<Bean[]>(this.baseUrl+"/beans");
   }
 
+  getImage(): Observable<Blob> {
+    return this.http.get(this.baseUrl+"/image", {responseType: 'blob'});
+  }
+
   getCustomBeans(): Observable<Bean[]> {
     return this.http.get<Bean[]>(this.baseUrl+"/beans/custom");
   }

jambotron-ui/src/app/services/zhipuai-image.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ZhipuaiImageService } from './zhipuai-image.service';
+
+describe('ZhipuaiImageService', () => {
+  let service: ZhipuaiImageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ZhipuaiImageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

jambotron-ui/src/app/services/zhipuai-image.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import {Observable} from 'rxjs';
+import {Tutorial} from '../models/tutorial.model';
+import {HttpClient} from '@angular/common/http';
+import {Image} from '../models/image';
+import {SpinnerService} from './spinner.service';
+
+
+
+@Injectable({
+  providedIn: 'root'
+})
+
+
+export class ZhipuaiImageService {
+  baseUrl : string = 'http://localhost:8080/api/zhipuai';
+
+  constructor(private http: HttpClient,public spinnerService: SpinnerService) {
+
+  }
+
+  generate(query: String): Observable<Image> {
+    return this.http.get(`${(this.baseUrl)}/image/${query}`);
+  }
+}