Merge branch 'p2t-2024-TestLLMbackendusage' into p2t-2024

angular.json

@@ -10,6 +10,11 @@
       "sourceRoot": "src",
       "prefix": "app",
       "architect": {
+        "serve": {
+          "options": {
+            "proxyConfig": "src/proxy.conf.json"
+          }
+        },
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {

package.json

@@ -12,7 +12,7 @@
   "readme": "https://github.com/woped/woped-frontend/blob/main/README.md",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy-config src/proxy.conf.json",
     "build": "ng build",
     "build:prod": "ng build --configuration production",
     "build:prod:stats": "ng build --configuration production --stats-json",

src/app/Services/p2tHttpService.ts

@@ -12,28 +12,47 @@ import { catchError } from 'rxjs/operators';
   providedIn: 'root',
 })
 export class p2tHttpService {
-  private url = 'http://localhost:8080/p2t/generateText'; // Specifies the interface through which the text is displayed.
+  private url = '/p2t'; // Use the proxy path
 
   constructor(private http: HttpClient) {}
 
-  postP2T(text: string, apiKey: string, prompt: string): Observable<string> {
+  postP2T(text: string): Observable<string> {
     const headers = new HttpHeaders({
       'Content-Type': 'text/plain',
-      'Accept': 'text/plain, */*',
+      'Accept': 'text/plain',
+    });
+
+    const httpOptions = {
+      headers: headers,
+      responseType: 'text' as 'json',
+    };
+
+    return this.http.post<string>(`${this.url}/generateText`, text, httpOptions).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  postP2TLLM(text: string, apiKey: string, prompt: string): Observable<string> {
+    const headers = new HttpHeaders({
+      'Content-Type': 'text/plain',
+      'Accept': 'text/plain',
     });
 
     let params = new HttpParams();
     if (apiKey) {
       params = params.set('apiKey', apiKey);
     }
+    if (prompt) {
+      params = params.set('prompt', prompt);
+    }
 
     const httpOptions = {
       headers: headers,
       params: params,
       responseType: 'text' as 'json',
     };
 
-    return this.http.post<string>(this.url, text, httpOptions).pipe(
+    return this.http.post<string>(`${this.url}/generateTextLLM`, text, httpOptions).pipe(
       catchError(this.handleError)
     );
   }

src/app/app.module.ts

@@ -1,17 +1,7 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
 import { HttpClientModule } from '@angular/common/http';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { p2tHttpService } from './Services/p2tHttpService';
-import { t2pHttpService } from './Services/t2pHttpService';
-import { AppComponent } from './app.component';
-
+import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import {
-  MAT_FORM_FIELD_DEFAULT_OPTIONS,
-  MatFormFieldModule,
-} from '@angular/material/form-field';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule } from '@angular/material/form-field';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -20,7 +10,12 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatTabsModule } from '@angular/material/tabs';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
+import { p2tHttpService } from './Services/p2tHttpService';
+import { t2pHttpService } from './Services/t2pHttpService';
+import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
 import { P2tComponent } from './p2t/p2t.component';
 import { T2PComponent } from './t2p/t2p.component';
@@ -34,7 +29,6 @@ const routes: Routes = [
 
 @NgModule({
   declarations: [AppComponent, T2PComponent, HomeComponent, P2tComponent],
-
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
@@ -54,16 +48,11 @@ const routes: Routes = [
   ],
   providers: [
     {
-      provide: { MAT_FORM_FIELD_DEFAULT_OPTIONS },
-      multi: true,
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
       useValue: { appearance: 'outline' },
     },
     p2tHttpService,
     t2pHttpService,
-    P2tComponent,
-    T2PComponent,
-    HomeComponent,
-    AppComponent,
   ],
   bootstrap: [AppComponent],
 })

src/app/p2t/p2t.component.html

@@ -31,7 +31,6 @@
                         descriptions
                         of processes that can be used for various purposes, such as training documentation, user
                         documentation, or compliance reports.
-                        Das ist ein Test!
                     </p>
                 </form>
                 <button mat-button matStepperNext class="card">Next</button>
@@ -42,13 +41,15 @@
                     <ng-template matStepLabel>Insert your Model</ng-template>
                     <div *ngIf="showPromptInput" class="centered full-width">
                         <mat-form-field appearance="fill" class="full-width">
-                            <mat-label>API-Schlüssel</mat-label>
-                            <input matInput [value]="getDisplayApiKey()" readonly (click)="promptForApiKey()">
+                            <mat-label>API Key</mat-label>
+                            <input matInput [value]="getDisplayApiKey()" readonly (click)="promptForApiKey()"
+                                name="apiKey">
                         </mat-form-field>
                         <mat-form-field appearance="fill" class="full-width">
-                            <mat-label>Eingabe-Prompt</mat-label>
-                            <textarea matInput [(ngModel)]="prompt" [readonly]="isPromptReadonly" cdkTextareaAutosize
-                                cdkAutosizeMinRows="4" cdkAutosizeMaxRows="100" (click)="editPrompt()">
+                            <mat-label>Prompt</mat-label>
+                            <textarea matInput [(ngModel)]="prompt" name="prompt" [readonly]="isPromptReadonly"
+                                cdkTextareaAutosize cdkAutosizeMinRows="4" cdkAutosizeMaxRows="100"
+                                (click)="editPrompt()">
 Create a clearly structured and comprehensible continuous text from the given BPMN that is understandable for an uninformed reader. The text should be easy to read in the summary and contain all important content; if there are subdivided points, these are integrated into the text with suitable sentence beginnings in order to obtain a well-structured and easy-to-read text. Under no circumstances should the output contain sub-items or paragraphs, but should cover all processes in one piece!
               </textarea>
                         </mat-form-field>

src/app/p2t/p2t.component.ts

@@ -55,7 +55,7 @@ export class P2tComponent {
     if (window.fileContent !== undefined || window.dropfileContent !== undefined) {
       this.spinnerService.show();
       if (this.useLLM) {
-        this.p2tHttpService.postP2T(window.dropfileContent, this.apiKey, this.prompt).subscribe(
+        this.p2tHttpService.postP2TLLM(window.dropfileContent, this.apiKey, this.prompt).subscribe(
           (response: any) => {
             this.spinnerService.hide();
             this.displayText(response);
@@ -66,7 +66,7 @@ export class P2tComponent {
           }
         );
       } else {
-        this.p2tHttpService.postP2T(window.dropfileContent, '', this.prompt).subscribe(
+        this.p2tHttpService.postP2T(window.dropfileContent).subscribe(
           (response: any) => {
             this.spinnerService.hide();
             this.displayText(response);
@@ -115,7 +115,7 @@ export class P2tComponent {
   }
 
   promptForApiKey() {
-    if (confirm('Möchten Sie den API-Schlüssel erneut eingeben?')) {
+    if (confirm('Would you like to enter the API key again?')) {
       this.enterApiKey(null);
     }
   }
@@ -125,11 +125,11 @@ export class P2tComponent {
   }
 
   checkConditions() {
-    // Zusätzliche Logik zur Bedingungsprüfung (falls erforderlich)
+    // Additional logic to check conditions if needed
   }
 
   editPrompt() {
-    if (confirm('Warnung: Änderungen am Prompt erfolgen auf eigene Gefahr. Möchten Sie fortfahren?')) {
+    if (confirm('Warning: Changes to the prompt are at your own risk. Would you like to continue?')) {
       this.isPromptReadonly = false;
     }
   }

src/proxy.conf.json

@@ -0,0 +1,8 @@
+{
+  "/p2t": {
+    "target": "http://localhost:8080",
+    "secure": false,
+    "changeOrigin": true,
+    "logLevel": "debug"
+  }
+}