Skip to content

Commit

Permalink
Added Documentary + some style.css
Browse files Browse the repository at this point in the history 
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 <[email protected]>
Co-Authored-By: JNIKER <[email protected]>
Co-Authored-By: JeremiasDecker <[email protected]>
Co-Authored-By: nilschi <[email protected]>
  • Loading branch information
@ChrisCas92 @Avvy10
@JNIKER @JeremiasDecker @nilschi
5 people committed Jun 10, 2024
1 parent 73af383 commit 4a3849c
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 69 deletions.
36 changes: 36 additions & 0 deletions src/app/Services/p2tHttpService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
})
Expand All @@ -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<string> {
const headers = new HttpHeaders({
'Content-Type': 'text/plain',
Expand All @@ -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<string> {
const headers = new HttpHeaders({
'Content-Type': 'text/plain',
Expand Down Expand Up @@ -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<string[]> {
return this.http.get<string[]>(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(/&#032-/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<never> {
let errorMessage: string;
if (error.status === 0) {
Expand Down
35 changes: 10 additions & 25 deletions src/app/p2t/p2t.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<div class="centered">
<!-- Stepper for guiding the user through different steps of the process -->
<mat-stepper orientation="vertical" #stepperRef>
<!-- Step 1: Explanation of P2T -->
<mat-step>
<ng-template matStepLabel>Explanation</ng-template>
<p><b>What is P2T?</b> <br>
Expand All @@ -15,8 +17,10 @@
<button mat-button matStepperNext class="card">Next</button>
</mat-step>

<!-- Step 2: Model input and configuration -->
<mat-step>
<ng-template matStepLabel>Insert your Model</ng-template>
<!-- API key and prompt input fields -->
<div *ngIf="showPromptInput" class="centered full-width">
<mat-form-field appearance="fill" class="full-width">
<mat-label>API Key</mat-label>
Expand All @@ -32,6 +36,7 @@
</div>
<p>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.<br></p>
<!-- Dropzone for file upload -->
<div class="insertModel">
<div class="dropzone" #dropzoneRef (drop)="onDrop($event)" (dragover)="onDragOver($event)"
(click)="selectFiles()">
Expand All @@ -41,7 +46,9 @@
<span *ngIf="!isFileDropped">Upload files via drag and drop or click into the textfield</span>
</div>
</div>
<!-- Button to generate text from the process model -->
<button mat-button matStepperNext class="card" (click)="generateText()">Generate</button>
<!-- Toggle switch for selecting between algorithm and LLM, and dropdown for selecting GPT model -->
<div class="horizontal-center">
<mat-slide-toggle (change)="onToggleChange($event)">{{toggleText}}</mat-slide-toggle>
<mat-form-field appearance="fill" class="dropdown-field">
Expand All @@ -53,6 +60,7 @@
</div>
</mat-step>

<!-- Step 3: Display the generated text and any errors -->
<mat-step>
<ng-template matStepLabel>Text (Done)</ng-template>
<div id="loading">
Expand All @@ -64,35 +72,12 @@
</mat-step>
</mat-stepper>

<!-- Section to display the user's input and generated text -->
<div>
<label><b>Your input: <br></b></label>
<div id="model-container"></div>
<label><b>Your text: <br></b></label>
<div id="result"></div>
<button class="card" (click)="downloadText()">Download Text as .txt</button>
</div>
</div>

<style>
.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;
}
</style>
</div>
116 changes: 74 additions & 42 deletions src/app/p2t/p2t.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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;
Expand All @@ -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) {
Expand All @@ -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-')) {
Expand Down Expand Up @@ -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?')) {
Expand Down Expand Up @@ -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')!;
Expand All @@ -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;
}
Expand Down
32 changes: 30 additions & 2 deletions src/styles.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 4a3849c

Please sign in to comment.