Merge pull request #41 from GiuseppeF96/main

Added LLM toggle
woped · Nov 11, 2024 · 1e0da4e · 1e0da4e
2 parents a157c5a + b5cd100
commit 1e0da4e
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 21 deletions.
diff --git a/src/app/Services/t2pHttpService.ts b/src/app/Services/t2pHttpService.ts
@@ -93,4 +93,32 @@ export class t2pHttpService {
         }
       );
   }
+  public postT2PWithLLM(
+    text: string,
+    apiKey: string,
+    callback: (response: any) => void
+  ) {
+    const llmUrl = 'https://woped.dhbw-karlsruhe.de/t2p-2.0/api_call'; //Specifies the interface through which the BPMN model is displayed.
+
+    const body = {
+      text: text,
+      api_key: apiKey,
+    };
+    // Reset Model Container Div, so that only valid/current model will be displayed.
+    document.getElementById('model-container')!.innerHTML = '';
+
+    return this.t2phttpClient.post<string>(llmUrl, body, httpOptions).subscribe(
+      (response: any) => {
+        this.spinnerService.hide();
+        callback(response); // Call the callback function with the response
+      },
+      (error: any) => {
+        this.spinnerService.hide();
+        document.getElementById('error-container-text')!.innerHTML =
+          error.status + ' ' + error.statusText + ' ' + error.error;
+        document.getElementById('error-container-text')!.style.display =
+          'block';
+      }
+    );
+  }
 }
diff --git a/src/app/t2p/t2p.component.html b/src/app/t2p/t2p.component.html
@@ -10,6 +10,23 @@
         algorithms, the desired text can be converted either into a BPMN model
         or into a Petri net.
       </p>
+      <label>
+        <input
+          type="checkbox"
+          [checked]="isLLMEnabled"
+          (change)="isLLMEnabled = $event.target.checked"
+        />
+        Use LLM
+      </label>
+      <div *ngIf="isLLMEnabled">
+        <label for="apiKeyInput">API Key:</label>
+        <input
+          type="text"
+          id="apiKeyInput"
+          #apiKeyInput
+          placeholder="Enter API Key"
+        />
+      </div>
     </form>
     <br />
     <button mat-button matStepperNext class="card">Next</button>
@@ -21,17 +38,40 @@
       <mat-form-field appearance="fill" [style.width.%]="50">
         <mat-label>Enter Text to Transform </mat-label>
         <div>
-          <textarea class="textfeld" [style.width.%]="100" matInput cdkTextareaAutosize cdkAutosizeMinRows="4"
-            cdkAutosizeMaxRows="100" id="text-input" #modelInput>{{ text }}</textarea>
+          <textarea
+            class="textfeld"
+            [style.width.%]="100"
+            matInput
+            cdkTextareaAutosize
+            cdkAutosizeMinRows="4"
+            cdkAutosizeMaxRows="100"
+            id="text-input"
+            #modelInput
+            >{{ text }}</textarea
+          >
         </div>
       </mat-form-field>
       <br />
-      <div class="dropzone" #dropzoneRef (drop)="onDrop($event)" (dragover)="onDragOver($event)"
-        (click)="selectFiles()">
-        <input type="file" style="display: none" #fileInputRef accept=".txt" (change)="onFileSelected($event)" />
-        <span *ngIf="isFiledDropped">Hochgeladene Datei: {{ droppedFileName }}
+      <div
+        class="dropzone"
+        #dropzoneRef
+        (drop)="onDrop($event)"
+        (dragover)="onDragOver($event)"
+        (click)="selectFiles()"
+      >
+        <input
+          type="file"
+          style="display: none"
+          #fileInputRef
+          accept=".txt"
+          (change)="onFileSelected($event)"
+        />
+        <span *ngIf="isFiledDropped"
+          >Hochgeladene Datei: {{ droppedFileName }}
         </span>
-        <span *ngIf="!isFiledDropped">Upload files via drag and drop or click into the textfield</span>
+        <span *ngIf="!isFiledDropped"
+          >Upload files via drag and drop or click into the textfield</span
+        >
       </div>
       <br />
       <div>
@@ -43,7 +83,10 @@
     </form>
   </mat-step>
   <mat-step>
-    <mat-radio-group aria-label="Select an option" (click)="onSelectedDiagram($event)">
+    <mat-radio-group
+      aria-label="Select an option"
+      (click)="onSelectedDiagram($event)"
+    >
       <mat-radio-button value="bpmn">BPMN</mat-radio-button>
       <mat-radio-button value="petri-net">Petri-Netz</mat-radio-button>
     </mat-radio-group>
@@ -54,7 +97,13 @@
         <button type="button" mat-button matStepperPrevious class="card">
           Back
         </button>
-        <button type="button" mat-button matStepperNext class="card" (click)="generateProcess(modelInput.value)">
+        <button
+          type="button"
+          mat-button
+          matStepperNext
+          class="card"
+          (click)="generateProcess(modelInput.value)"
+        >
           Generate
         </button>
       </div>
@@ -68,7 +117,6 @@
       <div>
         <br />
         <button mat-button matStepperPrevious class="card">Back</button>
-
       </div>
     </form>
     <div id="loading">
@@ -82,12 +130,14 @@
   <!-- display input from textfield in label -->
   <label> <b>Your Input:</b> {{ textResult }}</label>
 </div>
-<button (click)="onDownloadImage()" class="card">Download Process as .png</button>
+<button (click)="onDownloadImage()" class="card">
+  Download Process as .png
+</button>
 <button (click)="onDownloadText()" class="card">
   Download Process as File
 </button>
 <!-- Container for Error Handling -->
 <div id="error-container">
   <p id="error-container-text"></p>
 </div>
-<div id="model-container"></div>
+<div id="model-container"></div>
diff --git a/src/app/t2p/t2p.component.ts b/src/app/t2p/t2p.component.ts
@@ -14,13 +14,18 @@ export class T2PComponent {
   protected text = '';
   protected selectedDiagram = 'bpmn';
   protected textResult = '';
+  protected isLLMEnabled: boolean = false;
+  protected apiKey: string = '';
+  protected responseText: string = '';
 
   @ViewChild('stepperRef') stepper!: MatStepper;
   @ViewChild('dropZone', { static: true }) dropZone: ElementRef<HTMLDivElement>;
   protected isFiledDropped = false;
   protected droppedFileName = '';
   @ViewChild('fileInputRef') fileInputRef!: ElementRef<HTMLInputElement>;
   isFileDropped = false;
+  @ViewChild('apiKeyInput') apiKeyInput!: ElementRef;
+  @ViewChild('llmSwitch') llmSwitch!: ElementRef;
   constructor(
     private http: t2pHttpService,
     public spinnerService: SpinnerService
@@ -32,15 +37,25 @@ export class T2PComponent {
     this.spinnerService.show();
     let text = inputText;
     text = this.replaceUmlaut(text);
-    if (this.selectedDiagram === 'bpmn') {
-      //Send request to backend
-      this.http.postT2PBPMN(text);
-      //Show input text as input in the last step
-      this.setTextResult(text);
-    }
-    if (this.selectedDiagram === 'petri-net') {
-      this.http.postT2PPetriNet(text);
-      this.setTextResult(text);
+
+    if (this.isLLMEnabled) {
+      this.apiKey = this.apiKeyInput.nativeElement.value;
+      this.http.postT2PWithLLM(text, this.apiKey, (response: any) => {
+        this.responseText = JSON.stringify(response, null, 2);
+
+        this.setTextResult(text);
+      });
+    } else {
+      if (this.selectedDiagram === 'bpmn') {
+        //Send request to backend
+        this.http.postT2PBPMN(text);
+        //Show input text as input in the last step
+        this.setTextResult(text);
+      }
+      if (this.selectedDiagram === 'petri-net') {
+        this.http.postT2PPetriNet(text);
+        this.setTextResult(text);
+      }
     }
   }
   //Revise the input text. The umlauts are replaced by normal letters so that the text can be read correctly by the backend.