error model endpoint

src/app/app-routing.module.ts

@@ -11,6 +11,8 @@ import { HomePageComponent } from './home-page/home-page/home-page.component';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SentimentAnalysisComponent } from './demo-models-page/sentiment-analysis/sentiment-analysis.component';
+import { IronyAnalysisComponent } from './demo-models-page/irony-analysis/irony-analysis.component';
+import { AdvertiseAnalysisComponent } from './demo-models-page/advertise-analysis/advertise-analysis.component';
 
 const routes: Routes = [
     { path: '', component: HomePageComponent },
@@ -18,6 +20,8 @@ const routes: Routes = [
     { path: 'register', component: RegisterComponent },
     { path: 'sentiment', component: SentimentAnalysisComponent },
     { path: 'errors', component: ErrorsCorrectionPageComponent },
+    { path: 'irony', component: IronyAnalysisComponent },
+    { path: 'advertise', component: AdvertiseAnalysisComponent},
     {
         path: 'main-view', component: MainViewComponent, children: [
             { path: '', component: DashboardComponent },

src/app/app.module.ts

@@ -25,6 +25,8 @@ import { SentimentAnalysisComponent } from './demo-models-page/sentiment-analysi
 import { ReactiveFormsModule } from '@angular/forms';
 import { ErrorsCorrectionPageComponent } from './demo-models-page/errors-correction-page/errors-correction-page.component';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import { IronyAnalysisComponent } from './demo-models-page/irony-analysis/irony-analysis.component';
+import { AdvertiseAnalysisComponent } from './demo-models-page/advertise-analysis/advertise-analysis.component';
 
 @NgModule({
   declarations: [
@@ -41,7 +43,9 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
     SettingsComponent,
     DashboardComponent,
     SentimentAnalysisComponent,
-    ErrorsCorrectionPageComponent
+    ErrorsCorrectionPageComponent,
+    IronyAnalysisComponent,
+    AdvertiseAnalysisComponent
   ],
   imports: [
     BrowserModule,

src/app/demo-models-page/advertise-analysis/advertise-analysis.component.html

@@ -0,0 +1,31 @@
+<div class="sentiment-container">
+    <div class="title-container">
+        <div class="title">ANAIZA TEKSTU REKLAMY</div>
+        <button (click)="goToMainPage()" class="button-primary main-page-button">strona główna</button>
+    </div>
+
+    <div class="text">Ola J cos tu se wpiszesz albo nie xD</div>
+    <div class="ready-examples-button">
+        <button (click)="analyseAdvert(true)" class="button-primary">Wyolsuj gotowy przykład</button>
+    </div>
+    <div class="form-container">
+        <div [formGroup]="errorsForm">
+            <div class="exe-textarea">
+                <textarea formControlName="text"></textarea>
+            </div>
+        </div>
+        <div class="button-container">
+            <button [disabled]="!errorsForm.valid" (click)="analyseAdvert(false)" class="button-primary">Analizuj tekst</button>
+        </div>
+    </div>
+    <div *ngIf="correctedTextSet" class="corrected-text-container">
+        <ng-container *ngIf="correctedTextLoading; else loading">
+            <div class="corrected-title">Wyniki analizy:</div>
+            <div class="corrected-text">{{correctedText}}</div>
+        </ng-container>
+    </div>
+</div>
+
+<ng-template #loading>
+    <div class="spinner"><mat-spinner></mat-spinner></div>
+</ng-template>

src/app/demo-models-page/advertise-analysis/advertise-analysis.component.scss

@@ -0,0 +1,69 @@
+.sentiment-container {
+    padding: 30px 200px;
+    background: rgb(0, 0, 0);
+    background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgba(71, 71, 9, 1) 50%, rgba(0, 0, 0, 1) 100%) !important;
+    background-repeat: no-repeat;
+    min-height: calc(100% - 60px);
+    height: fit-content
+}
+
+
+
+.title {
+    font-size: 50px;
+    color: silver;
+    padding-bottom: 20px;
+}
+
+.text {
+    font-size: 20px;
+    padding-bottom: 20px;
+    color: silver
+}
+
+.form-container {
+
+    width: 600px;
+}
+
+.button-container {
+    display: flex;
+    justify-content: flex-end;
+    column-gap: 10px;
+    padding-top: 15px
+}
+
+.corrected-text-container {
+    width: 600px;
+}
+
+.corrected-title {
+    font-size: 25px;
+    color: silver;
+    padding-bottom: 20px;
+    padding-top: 10px
+}
+
+.corrected-text {
+    font-size: 20px;
+    color: rgb(251, 250, 250)
+}
+
+.title-container {
+    display: flex;
+    justify-content: space-between;
+
+    .main-page-button {
+        height: 40px;
+    }
+}
+
+.ready-examples-button {
+    padding-bottom: 20px;
+}
+
+.spinner {
+    display: flex;
+    justify-content: center;
+    padding-top: 40px
+}

src/app/demo-models-page/advertise-analysis/advertise-analysis.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdvertiseAnalysisComponent } from './advertise-analysis.component';
+
+describe('AdvertiseAnalysisComponent', () => {
+  let component: AdvertiseAnalysisComponent;
+  let fixture: ComponentFixture<AdvertiseAnalysisComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AdvertiseAnalysisComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdvertiseAnalysisComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/demo-models-page/advertise-analysis/advertise-analysis.component.ts

@@ -0,0 +1,51 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, Validators, FormBuilder, FormControl } from '@angular/forms';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'app-advertise-analysis',
+    templateUrl: './advertise-analysis.component.html',
+    styleUrls: ['./advertise-analysis.component.scss']
+})
+export class AdvertiseAnalysisComponent implements OnInit {
+
+    correctedTextLoading = false;
+    correctedTextSet = false;
+    correctedText!: string;
+    randomSampleList = []
+    errorsForm: FormGroup = this.fb.group({
+        text: ['', Validators.required]
+    })
+    constructor(
+        private fb: FormBuilder,
+        private http: HttpClient,
+        private router: Router
+    ) { }
+
+    public get sentenceControl(): FormControl {
+        return this.errorsForm.controls['text'] as FormControl
+    }
+
+
+    ngOnInit(): void {
+    }
+
+    analyseAdvert(isRandomSample: boolean): void {
+        let sentence = ''
+        this.correctedTextSet = true
+        this.correctedTextLoading = false;
+        if (isRandomSample) {
+            const randomElement = this.randomSampleList[Math.floor(Math.random() * this.randomSampleList.length)];
+            sentence = randomElement
+            this.sentenceControl.patchValue(sentence)
+        } else {
+            sentence = this.errorsForm.value.text
+        }
+    }
+
+    goToMainPage() {
+        this.router.navigate([''])
+    }
+
+}

src/app/demo-models-page/irony-analysis/irony-analysis.component.html

@@ -0,0 +1,39 @@
+<div class="sentiment-container">
+    <div class="title-container">
+        <div class="title">WYKRYWANIE IRONII</div>
+        <button (click)="goToMainPage()" class="button-primary main-page-button">strona główna</button>
+    </div>
+
+    <div class="text">Ola G cos tu se wpiszesz albo nie xD</div>
+    <div class="ready-examples-button">
+        <button (click)="analyzeSentiment(true)" class="button-primary">Wyolsuj gotowe przykłady</button>
+    </div>
+    <div class="form-container">
+        <div class="form">
+            <div [formGroup]="sentimentForm">
+                <ng-container formArrayName="sentences">
+                    <div *ngFor="let sentenceForm of sentencesArray.controls; let i = index;trackBy: trackByFn"
+                        class="exe-input">
+                        <ng-container [formGroupName]="i">
+                            <input formControlName="text">
+                        </ng-container>
+                    </div>
+                </ng-container>
+            </div>
+            <div class="button-container">
+                <button (click)="duplicateField()" class="button-primary">Dodaj pole</button>
+                <button [disabled]="!sentimentForm.valid" (click)="analyzeSentiment(false)"
+                    class="button-primary">Analizuj tekst</button>
+            </div>
+        </div>
+        <div class="results-table" *ngIf="analysisStart">
+            <ng-container *ngIf="analysisLoading; else loading">
+
+            </ng-container>
+        </div>
+    </div>
+</div>
+
+<ng-template #loading>
+    <div class="spinner"><mat-spinner></mat-spinner></div>
+</ng-template>

src/app/demo-models-page/irony-analysis/irony-analysis.component.scss

@@ -0,0 +1,91 @@
+.sentiment-container {
+    padding: 30px 200px;
+    background: rgb(0, 0, 0);
+    background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgba(71, 9, 65, 1) 50%, rgba(0, 0, 0, 1) 100%);
+    background-repeat: no-repeat;
+    min-height: calc(100% - 60px);
+    height: fit-content
+}
+
+.title {
+    font-size: 50px;
+    color: silver;
+    padding-bottom: 20px;
+}
+
+.text {
+    font-size: 20px;
+    padding-bottom: 20px;
+    color: silver
+}
+
+.form-container {
+    // width: 400px;
+    display: flex;
+    column-gap: 40px;
+}
+
+.button-container {
+    display: flex;
+    justify-content: flex-end;
+    column-gap: 10px;
+}
+
+.sentence {
+    font-size: 15px;
+    color: white
+}
+
+.result-row {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid grey;
+    padding-top: 15px;
+}
+
+.results-container {
+    width: 400px;
+    padding-top: 25px;
+}
+
+.label-0 {
+    color: rgb(255, 66, 66)
+}
+
+.label-1 {
+    color: rgb(84, 84, 255)
+}
+
+.label-2 {
+    color: rgb(196, 196, 196)
+}
+
+.chart {
+    padding-top: 30px;
+}
+
+.title-container {
+    display: flex;
+    justify-content: space-between;
+
+    .main-page-button {
+        height: 40px;
+    }
+}
+
+.form {
+    width: 400px;
+}
+
+.results-table {
+    width: 400px
+}
+
+.ready-examples-button{
+    padding-bottom:20px;
+}
+
+.spinner{
+    display: flex;
+    justify-content: center;
+}

src/app/demo-models-page/irony-analysis/irony-analysis.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IronyAnalysisComponent } from './irony-analysis.component';
+
+describe('IronyAnalysisComponent', () => {
+  let component: IronyAnalysisComponent;
+  let fixture: ComponentFixture<IronyAnalysisComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ IronyAnalysisComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IronyAnalysisComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/demo-models-page/irony-analysis/irony-analysis.component.ts

@@ -0,0 +1,73 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, Validators, FormBuilder, FormArray } from '@angular/forms';
+import { Router } from '@angular/router';
+import { ChartConfiguration, ChartOptions, ChartType } from 'chart.js';
+
+@Component({
+  selector: 'app-irony-analysis',
+  templateUrl: './irony-analysis.component.html',
+  styleUrls: ['./irony-analysis.component.scss']
+})
+export class IronyAnalysisComponent implements OnInit {
+
+    randomSampleList = []
+
+    analysisStart = false;
+    analysisLoading = false;
+
+
+    sentimentForm: FormGroup = this.fb.group({
+        sentences: this.fb.array([
+            this.fb.group({
+                text: ['', Validators.required]
+            })
+        ])
+    })
+
+    constructor(
+        private fb: FormBuilder,
+        private http: HttpClient,
+        private router: Router
+    ) { }
+
+    get sentencesArray(): FormArray {
+        return this.sentimentForm.controls['sentences'] as FormArray
+    }
+
+
+    ngOnInit(): void {
+        //this.duplicateField()
+
+    }
+
+    analyzeSentiment(isRandomSample: boolean) {
+        this.analysisStart = true
+        this.analysisLoading = false
+        let sentences = []
+        if (isRandomSample) {
+            const shuffled = this.randomSampleList.sort(() => 0.5 - Math.random());
+            sentences = shuffled.slice(0, 5);
+        } else {
+            let value = this.sentimentForm.value
+            sentences = value.sentences.map((value: any) => value.text)
+        }
+
+    }
+
+    duplicateField() {
+        const sentenceForm = this.fb.group({
+            text: ['', Validators.required]
+        })
+        this.sentencesArray.push(sentenceForm)
+    }
+
+    trackByFn(index: any, item: any) {
+        return index;
+    }
+
+    goToMainPage() {
+        this.router.navigate([''])
+    }
+
+}

src/app/home-page/home-page/home-page.component.html

@@ -58,7 +58,7 @@
                     has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                     galley of type and scrambled it to make a type specimen book.</div>
             </div>
-            <div class="irony">
+            <div class="irony" (click)="goToIrony()">
                 <div class="title">WYKRYWANIE IRONII</div>
                 <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                     has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
@@ -66,7 +66,7 @@
             </div>
         </div>
         <div class="row-2">
-            <div class="analysis">
+            <div class="analysis" (click)="goToAdvert()">
                 <div class="title">ANALIZA REKLAMY</div>
                 <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                     has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a

src/app/home-page/home-page/home-page.component.scss

@@ -179,29 +179,21 @@
 }
 
 .sentiment {
-
-
     background: rgb(0, 0, 0);
     background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgba(9, 64, 71, 1) 50%, rgba(0, 0, 0, 1) 100%);
 }
 
 .irony {
-
-
     background: rgb(0, 0, 0);
     background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgba(71, 9, 65, 1) 50%, rgba(0, 0, 0, 1) 100%);
 }
 
 .analysis {
-
-
     background: rgb(0, 0, 0);
     background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgba(71, 71, 9, 1) 50%, rgba(0, 0, 0, 1) 100%);
 }
 
 .errors {
-
-
     background: rgb(0, 0, 0);
     background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgba(10, 71, 9, 1) 50%, rgba(0, 0, 0, 1) 100%);
 }

src/app/home-page/home-page/home-page.component.ts

@@ -27,4 +27,12 @@ export class HomePageComponent implements OnInit {
         this.router.navigate(['/errors'])
     }
 
+    goToIrony() {
+        this.router.navigate(['/irony'])
+    }
+
+    goToAdvert() {
+        this.router.navigate(['/advertise'])
+    }
+
 }