From 4a3849cb976046bad95911e16f54c799653b947e Mon Sep 17 00:00:00 2001 From: Christopher Caspari Date: Mon, 10 Jun 2024 14:57:25 +0200 Subject: [PATCH] Added Documentary + some style.css comments where added to all changed classes + html files for better understanding, added some styling to the .css to get a better structure at the frontend Co-Authored-By: Avvy10 <126588211+Avvy10@users.noreply.github.com> Co-Authored-By: JNIKER <116815909+JNIKER@users.noreply.github.com> Co-Authored-By: JeremiasDecker <112878328+JeremiasDecker@users.noreply.github.com> Co-Authored-By: nilschi <90916219+nilschi@users.noreply.github.com> --- src/app/Services/p2tHttpService.ts | 36 +++++++++ src/app/p2t/p2t.component.html | 35 +++------ src/app/p2t/p2t.component.ts | 116 ++++++++++++++++++----------- src/styles.css | 32 +++++++- 4 files changed, 150 insertions(+), 69 deletions(-) diff --git a/src/app/Services/p2tHttpService.ts b/src/app/Services/p2tHttpService.ts index c9d6b74..c83962e 100644 --- a/src/app/Services/p2tHttpService.ts +++ b/src/app/Services/p2tHttpService.ts @@ -3,6 +3,10 @@ import { Injectable } from '@angular/core'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; +/** + * Service for handling HTTP requests related to process-to-text translation. + * Provides methods to send requests to the backend endpoints. + */ @Injectable({ providedIn: 'root' }) @@ -12,6 +16,12 @@ export class p2tHttpService { constructor(private http: HttpClient) {} + /** + * Sends a process model to the backend for standard text generation. + * + * @param text The process model text. + * @return An Observable that emits the response text. + */ postP2T(text: string): Observable { const headers = new HttpHeaders({ 'Content-Type': 'text/plain', @@ -28,6 +38,15 @@ export class p2tHttpService { ); } + /** + * Sends a process model to the backend for LLM-based text generation. + * + * @param text The process model text. + * @param apiKey The API key for OpenAI. + * @param prompt The prompt to guide the translation. + * @param model The GPT model to be used. + * @return An Observable that emits the response text. + */ postP2TLLM(text: string, apiKey: string, prompt: string, model: string): Observable { const headers = new HttpHeaders({ 'Content-Type': 'text/plain', @@ -56,18 +75,35 @@ export class p2tHttpService { ); } + /** + * Retrieves the list of available GPT models from the backend. + * + * @return An Observable that emits the list of model names. + */ getModels(): Observable { return this.http.get(this.gptModelsUrl).pipe( catchError(this.handleError) ); } + /** + * Cleans up the text by removing HTML tags and unwanted characters. + * + * @param text The text to be cleaned. + * @return The cleaned text. + */ formText(text: string): string { text = text.replace(/<[^>]+>/g, ''); text = text.replace(/ -/g, ''); return text; } + /** + * Handles HTTP errors and returns a user-friendly error message. + * + * @param error The HttpErrorResponse object. + * @return An Observable that emits the error message. + */ handleError(error: HttpErrorResponse): Observable { let errorMessage: string; if (error.status === 0) { diff --git a/src/app/p2t/p2t.component.html b/src/app/p2t/p2t.component.html index 93e79c9..1f94a7c 100644 --- a/src/app/p2t/p2t.component.html +++ b/src/app/p2t/p2t.component.html @@ -1,5 +1,7 @@
+ + Explanation

What is P2T?
@@ -15,8 +17,10 @@ + Insert your Model +

API Key @@ -32,6 +36,7 @@

To upload your process model you can either select your file via a click in the Area in your explorer or drag and drop it into the right pane.

+
@@ -41,7 +46,9 @@ Upload files via drag and drop or click into the textfield
+ +
{{toggleText}} @@ -53,6 +60,7 @@
+ Text (Done)
@@ -64,6 +72,7 @@ +
@@ -71,28 +80,4 @@
-
- - \ No newline at end of file +
\ No newline at end of file diff --git a/src/app/p2t/p2t.component.ts b/src/app/p2t/p2t.component.ts index 8f10a7b..0d5aaba 100644 --- a/src/app/p2t/p2t.component.ts +++ b/src/app/p2t/p2t.component.ts @@ -13,6 +13,10 @@ declare global { } } +/** + * Component for the process-to-text translation UI. + * Allows users to upload process models, configure API settings, and retrieve translated text. + */ @Component({ selector: 'app-p2t', templateUrl: './p2t.component.html', @@ -46,6 +50,9 @@ export class P2tComponent implements OnInit { public spinnerService: SpinnerService ) {} + /** + * Initializes the component, fetching available GPT models from the backend. + */ ngOnInit(): void { this.p2tHttpService.getModels().subscribe(models => { this.models = models; @@ -56,51 +63,54 @@ export class P2tComponent implements OnInit { event.preventDefault(); } -generateText() { - if (this.fileType == 'bpmn') { - ModelDisplayer.displayBPMNModel(window.dropfileContent); - } else if (this.fileType == 'pnml') { - ModelDisplayer.generatePetriNet(window.dropfileContent); - } - if (window.fileContent !== undefined || window.dropfileContent !== undefined) { - this.spinnerService.show(); - if (this.useLLM) { - console.log('Sending LLM request with:', { - text: window.dropfileContent, - apiKey: this.apiKey, - prompt: this.prompt, - model: this.selectedModel - }); - this.p2tHttpService.postP2TLLM(window.dropfileContent, this.apiKey, this.prompt, this.selectedModel).subscribe( - (response: any) => { - this.spinnerService.hide(); - this.displayText(response); - }, - (error: any) => { - this.spinnerService.hide(); - console.error('Error response:', error); - this.showError(error); - } - ); + /** + * Generates text based on the uploaded process model. + * Depending on the useLLM flag, it calls the appropriate backend endpoint. + */ + generateText() { + if (this.fileType == 'bpmn') { + ModelDisplayer.displayBPMNModel(window.dropfileContent); + } else if (this.fileType == 'pnml') { + ModelDisplayer.generatePetriNet(window.dropfileContent); + } + if (window.fileContent !== undefined || window.dropfileContent !== undefined) { + this.spinnerService.show(); + if (this.useLLM) { + console.log('Sending LLM request with:', { + text: window.dropfileContent, + apiKey: this.apiKey, + prompt: this.prompt, + model: this.selectedModel + }); + this.p2tHttpService.postP2TLLM(window.dropfileContent, this.apiKey, this.prompt, this.selectedModel).subscribe( + (response: any) => { + this.spinnerService.hide(); + this.displayText(response); + }, + (error: any) => { + this.spinnerService.hide(); + console.error('Error response:', error); + this.showError(error); + } + ); + } else { + this.p2tHttpService.postP2T(window.dropfileContent).subscribe( + (response: any) => { + this.spinnerService.hide(); + this.displayText(response); + }, + (error: any) => { + this.spinnerService.hide(); + console.error('Error response:', error); + this.showError(error); + } + ); + } } else { - this.p2tHttpService.postP2T(window.dropfileContent).subscribe( - (response: any) => { - this.spinnerService.hide(); - this.displayText(response); - }, - (error: any) => { - this.spinnerService.hide(); - console.error('Error response:', error); - this.showError(error); - } - ); + this.displayText('No files uploaded'); } - } else { - this.displayText('No files uploaded'); + this.stepper.next(); } - this.stepper.next(); -} - onToggleChange(event: MatSlideToggleChange) { if (event.checked) { @@ -112,6 +122,10 @@ generateText() { } } + /** + * Prompts the user to enter their API key and updates the state accordingly. + * @param event The toggle change event. + */ enterApiKey(event: MatSlideToggleChange) { let apiKey = window.prompt('Please enter your API key'); while (apiKey !== null && !apiKey.startsWith('sk-proj-')) { @@ -141,6 +155,9 @@ generateText() { return this.apiKey ? `...${this.apiKey.slice(-6)}` : ''; } + /** + * Enables the prompt text area for editing if the user confirms the warning message. + */ editPrompt() { if (!this.hasPromptWarningShown) { if (confirm('Warning: Changes to the prompt are at your own risk. Would you like to continue?')) { @@ -229,6 +246,11 @@ generateText() { } } + /** + * Displays the response content in the UI. + * + * @param response The response text to be displayed. + */ private displayText(response: string) { this.response = this.p2tHttpService.formText(response); const container = document.getElementById('result')!; @@ -240,10 +262,20 @@ generateText() { container.appendChild(paragraph); } + /** + * Displays an error message in the UI. + * + * @param errorMessage The error message to be displayed. + */ private showError(errorMessage: string) { this.error = errorMessage; } + /** + * Updates the selected model when the dropdown value changes. + * + * @param model The selected model. + */ onModelChange(model: string): void { this.selectedModel = model; } diff --git a/src/styles.css b/src/styles.css index 7e7239a..8ce87ff 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,4 +1,32 @@ /* You can add global styles to this file, and also import other style files */ -html, body { height: 100%; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } +html, +body { + height: 100%; +} +body { + margin: 0; + font-family: Roboto, "Helvetica Neue", sans-serif; +} + +.centered { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.full-width { + width: 100%; +} + +.horizontal-center { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; +} + +.dropdown-field { + width: 200px; +}