Add image generation feature with new component and service integration

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