From e4bb89154249e48e468865275d901a5bcc83a3cb Mon Sep 17 00:00:00 2001
From: Angular2guy <angular2guy@gmail.com>
Date: Mon, 13 May 2024 22:26:56 +0200
Subject: [PATCH] feat: add frontend

---
 .../image-query/image-query.component.html    | 42 +++++++++++++++++--
 .../image-query/image-query.component.scss    |  4 +-
 .../app/image-query/image-query.component.ts  | 26 ++++++++++--
 .../angular/src/app/service/image.service.ts  |  4 ++
 4 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/frontend/src/angular/src/app/image-query/image-query.component.html b/frontend/src/angular/src/app/image-query/image-query.component.html
index 603c57b..9141cbb 100644
--- a/frontend/src/angular/src/app/image-query/image-query.component.html
+++ b/frontend/src/angular/src/app/image-query/image-query.component.html
@@ -12,6 +12,26 @@
         List
       </button>
     </div>
+    <div>
+      <button
+        mat-flat-button
+        color="primary"
+        (click)="switchToUpload()"
+        i18n="@@upload"
+      >
+        Upload
+      </button>      
+    </div>
+        <div>
+      <button
+        mat-flat-button
+        color="primary"
+        (click)="switchToQuery()"
+        i18n="@@query"
+      >
+        Query
+      </button>      
+    </div>
     <div>
       <button
         mat-flat-button
@@ -25,6 +45,7 @@
   </div>
 </mat-toolbar>
 <div>
+@if(uiMode === 'upload') {
 <form [formGroup]="imageForm">
  @if(uploading) {
   <div class="upload-spinner">
@@ -42,10 +63,10 @@
   	<div>{{result.answer}}</div>
   </div>
   } @else {
-  <input type="file" (change)="onFileInputChange($event)" />
+  <input type="file" class="vertical-margin" (change)="onFileInputChange($event)" />
   <mat-form-field class="example-full-width">
-    <mat-label i18n="@@imagequeryQuery">Image query</mat-label>
-    <input matInput placeholder="query" [formControl]="imageForm.controls.query">
+    <mat-label i18n="@@imageQueryPrompt">Image prompt</mat-label>
+    <input matInput placeholder="prompt" [formControl]="imageForm.controls.prompt">
   </mat-form-field>
   }
   </form>
@@ -61,4 +82,19 @@
     Upload
   </button>
   </div>
+  } @else if(uiMode === 'query') {
+  	<div>
+  		<mat-form-field class="example-full-width">
+    		<mat-label i18n="@@imageQuery">Image query</mat-label>
+    		<input matInput placeholder="query" [formControl]="queryControl">
+  		</mat-form-field>
+  		<button mat-flat-button color="primary" (click)="query()" [disabled]="queryControl.invalid || this.queryControl.untouched" i18n="@@query">Upload</button>
+  		@for(myresult of results; track myresult.answer) {
+  			<div class="horizontal-container">
+  				<div><img [src]="myresult.b64Image"></div>
+  				<div>{{myresult.answer}}</div>
+  			</div>
+  		}
+  	</div>
+  }
 </div>
diff --git a/frontend/src/angular/src/app/image-query/image-query.component.scss b/frontend/src/angular/src/app/image-query/image-query.component.scss
index 926b7cb..cce95c3 100644
--- a/frontend/src/angular/src/app/image-query/image-query.component.scss
+++ b/frontend/src/angular/src/app/image-query/image-query.component.scss
@@ -27,7 +27,9 @@
 .example-full-width {
   width: 100%;
 }
-
+.vertical-margin {
+	margin: 20px 10px;
+}
 .search-bar {
   display: flex;
   width: 100%;
diff --git a/frontend/src/angular/src/app/image-query/image-query.component.ts b/frontend/src/angular/src/app/image-query/image-query.component.ts
index 176cf34..648867c 100644
--- a/frontend/src/angular/src/app/image-query/image-query.component.ts
+++ b/frontend/src/angular/src/app/image-query/image-query.component.ts
@@ -34,12 +34,15 @@ export class ImageQueryComponent {
   //'What do you see in the image? Describe the background. Describe the colors.'
   protected imageForm = new FormGroup({
 	file: new FormControl<File | null>(null, Validators.required),
-	query: new FormControl<string>('', Validators.minLength(3))
+	prompt: new FormControl<string>('', Validators.minLength(3))
   });
+  protected queryControl = new FormControl<string>('', Validators.compose([Validators.required, Validators.minLength(3)]));
   protected uploading = false;
   protected result: ImageFile | null = null;
+  protected results: ImageFile[] = [];
   protected msWorking = 0;
-  private repeatSub: Subscription | null = null;
+  protected uiMode: 'upload' | 'query' = 'upload';
+  private repeatSub: Subscription | null = null;  
   
   constructor(private imageService: ImageService, private destroyRef: DestroyRef, private router: Router) { }
 	
@@ -58,6 +61,23 @@ export class ImageQueryComponent {
 	return myResult
   }
   
+  protected switchToUpload(): void {
+	this.uiMode = 'upload';
+  }
+  
+  protected switchToQuery(): void {
+	this.uiMode = 'query';
+  }
+  
+  protected query(): void {	
+	//console.log(this.queryControl.invalid);
+	//console.log(this.queryControl.untouched);
+	const formData = new FormData();
+	formData.append('query', this.queryControl.value as unknown as string);
+	formData.append('type', '');
+	this.imageService.postQueryForm(formData).subscribe(result => this.results = result);
+  }
+  
   protected upload(): void {
     //console.log(this.file);
     if (!!this.imageForm.controls.file.value) {
@@ -77,7 +97,7 @@ export class ImageQueryComponent {
       const formData = new FormData();
       const myFile = this.imageForm.controls.file.value;
       formData.append('file', myFile as Blob, myFile?.name as string);
-      formData.append('query', this.imageForm.controls.query.value as unknown as string);
+      formData.append('query', this.imageForm.controls.prompt.value as unknown as string);
       formData.append('type', (this.imageForm.controls.file.value as unknown as File)?.type);
       //console.log(formData);
       //console.log(this.imageForm.controls.file.value);
diff --git a/frontend/src/angular/src/app/service/image.service.ts b/frontend/src/angular/src/app/service/image.service.ts
index 15b8a16..c13f7c5 100644
--- a/frontend/src/angular/src/app/service/image.service.ts
+++ b/frontend/src/angular/src/app/service/image.service.ts
@@ -25,4 +25,8 @@ export class ImageService {
     public postImageForm(formData: FormData): Observable<ImageFile> {
     return this.httpClient.post<ImageFile>('/rest/image/import', formData);
   }
+  
+  public postQueryForm(formData: FormData): Observable<ImageFile[]> {
+	return this.httpClient.post<ImageFile[]>('/rest/image/query', formData);
+  }
 }