add synthezis display

haladamateusz · Oct 29, 2023 · a800fbc · a800fbc
1 parent e7e28b4
commit a800fbc
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 46 deletions.
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
@@ -8,34 +8,45 @@ <h1 class="fw-bold">{{ title }}</h1>
   <div class="container">
     <div class="row">
       <div class="offset-md-3 mt-5 col-md-6 text-center">
-        <form class="example-form mt-3">
-          <mat-form-field color="primary" class="example-full-width">
-            <mat-label>Question</mat-label>
-            <input
-              name="question"
-              [(ngModel)]="question"
-              matInput
-              placeholder="Type what are you looking for ex. Printing" />
+        <mat-card>
+          <mat-card-content>
+            <form class="example-form mt-3">
+              <mat-form-field class="example-full-width">
+                <mat-label>Question</mat-label>
+                <input
+                  name="question"
+                  [(ngModel)]="question"
+                  matInput
+                  placeholder="Type what are you looking for ex. Printing" />
 
-            <mat-icon
-              *ngIf="speechApiExists"
-              (click)="toggleRecording()"
-              matIconSuffix
-              class="audio"
-              >{{ recordingStarted ? 'pause' : 'mic' }}</mat-icon
-            >
-          </mat-form-field>
-          <button (click)="sendQuestion()" color="primary" mat-raised-button class="text-white">
-            Submit
-          </button>
-        </form>
+                <mat-icon
+                  *ngIf="speechApiExists"
+                  (click)="toggleRecording()"
+                  matIconSuffix
+                  class="audio"
+                  >{{ recordingStarted ? 'pause' : 'mic' }}</mat-icon
+                >
+              </mat-form-field>
+              <p>
+                <button
+                  (click)="sendQuestion()"
+                  color="primary"
+                  mat-raised-button
+                  class="text-white">
+                  Submit
+                </button>
+              </p>
+            </form>
+          </mat-card-content>
+        </mat-card>
       </div>
     </div>
   </div>
   <ng-container *ngIf="dataSource.data.length && !isLoading">
     <div class="container my-5">
       <div class="row">
         <div class="offset-md-2 col-md-8">
+          <p> Answer: {{ answer }}</p>
           <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
             <ng-container matColumnDef="description">
               <th mat-header-cell *matHeaderCellDef>Short description</th>
@@ -79,7 +90,7 @@ <h1 class="fw-bold">{{ title }}</h1>
       </div>
       <ng-container *ngIf="showFeedback">
         <div class="row mt-5">
-          <div class="offset-md-4 col-md-4 text-center">
+          <div class="offset-md-4 mt-5 col-md-4 text-center">
             <p>Are you satisfied with the results?</p>
           </div>
           <div class="offset-md-4 col-md-2 my-2">
@@ -105,7 +116,7 @@ <h1 class="fw-bold">{{ title }}</h1>
 
       <ng-container *ngIf="showDetailedNegativeFeedback">
         <div class="row my-5">
-          <div class="offset-md-4 col-md-4 text-center">
+          <div class="offset-md-4 mt-5 col-md-4 text-center">
             <p>What went wrong?</p>
           </div>
           <div class="col-6 offset-md-3 col-md-3">

diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -16,6 +16,7 @@ import { debounceTime, distinctUntilChanged, exhaustMap, tap } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { VoiceRecognitionService } from './service/voice-recognition/voice-recognition.service';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
   selector: 'app-root',
@@ -29,7 +30,8 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
     FormsModule,
     MatTableModule,
     ShortenPipe,
-    MatProgressSpinnerModule
+    MatProgressSpinnerModule,
+    MatCardModule
   ],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
@@ -64,6 +66,8 @@ export class AppComponent implements OnInit {
   speechApiExists = false;
   isLoading = false;
 
+  answer = '';
+
   emojiHashMap = new Map<string, string>([
     ['English', '🇺🇸'],
     ['French', '🇫🇷'],
@@ -82,8 +86,9 @@ export class AppComponent implements OnInit {
         }),
         exhaustMap(() => this.llamaService.askQuestion(this.question, this.sessionId))
       )
-      .subscribe(response => {
+      .subscribe((response: LlamaResponseResult) => {
         this.dataSource.data = response.result;
+        this.answer = response.answer;
         this.showFeedback = true;
         this.isLoading = false;
         this.recordingStarted = !this.recordingStarted;
@@ -118,6 +123,7 @@ export class AppComponent implements OnInit {
     this.llamaService.askQuestion(this.question, this.sessionId).subscribe({
       next: (response: LlamaResponseResult) => {
         this.dataSource.data = response.result;
+        this.answer = response.answer;
         this.showFeedback = true;
         this.isLoading = false;
       }

diff --git a/frontend/src/app/service/llama/llama.service.ts b/frontend/src/app/service/llama/llama.service.ts
@@ -1,8 +1,9 @@
 import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { LlamaResponseResult } from '../../models/llama-response.interface';
-import { BehaviorSubject, Observable, tap } from 'rxjs';
+import { BehaviorSubject, Observable, of, tap } from 'rxjs';
 import { FEEDBACK } from 'src/app/models/feedback.enum';
+import { LlamaResponseMock } from '../../mocks/LlamaResponse.mock';
 
 @Injectable({
   providedIn: 'root'
@@ -11,31 +12,33 @@ export class LlamaService {
   private httpClient = inject(HttpClient);
   private lastQuestionAsked = new BehaviorSubject('');
   private lastResults = new BehaviorSubject<LlamaResponseResult>({} as LlamaResponseResult);
+  private lastAnswer = new BehaviorSubject('');
 
   askQuestion(question: string, userId: string): Observable<LlamaResponseResult> {
-    // return of({ ...LlamaResponseMock, question, userId }).pipe(
-    //   tap(data => {
-    //     this.lastResults.next(data);
-    //     this.lastQuestionAsked.next(question);
-    //   })
-    // );
-    return this.httpClient
-      .post<LlamaResponseResult>('http://127.0.0.1:8000/askQuestion/', { question, userId })
-      .pipe(
-        tap(data => {
-          this.lastResults.next(data);
-          this.lastQuestionAsked.next(question);
-        })
-      );
+    return of({ ...LlamaResponseMock, question, userId }).pipe(
+      tap(data => {
+        this.lastResults.next(data);
+        this.lastQuestionAsked.next(question);
+        this.lastAnswer.next(data.answer);
+      })
+    );
+    // return this.httpClient
+    //   .post<LlamaResponseResult>('http://127.0.0.1:8000/askQuestion/', { question, userId })
+    //   .pipe(
+    //     tap(data => {
+    //       this.lastResults.next(data);
+    //       this.lastQuestionAsked.next(question);
+    //     })
+    //   );
   }
 
   sendFeedback(feedback: FEEDBACK, userId: string): Observable<boolean> {
-    // return of(true);
-    return this.httpClient.post<boolean>('http://127.0.0.1:8000/sendFeedback/', {
-      feedback,
-      userId,
-      previousQuestion: this.lastQuestionAsked.getValue(),
-      previousResults: this.lastResults.getValue()
-    });
+    return of(true);
+    // return this.httpClient.post<boolean>('http://127.0.0.1:8000/sendFeedback/', {
+    //   feedback,
+    //   userId,
+    //   previousQuestion: this.lastQuestionAsked.getValue(),
+    //   previousResults: this.lastResults.getValue()
+    // });
   }
 }