front demo page with sentiment analysis and error corection page

2023-05-28 14:10:07 +02:00 · 2023-05-28 14:10:07 +02:00 · 6a68b19e0c
commit 6a68b19e0c
parent 2c55bc0247
16 changed files with 744 additions and 58 deletions
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -1,3 +1,4 @@
+import { ErrorsCorrectionPageComponent } from './demo-models-page/errors-correction-page/errors-correction-page.component';
 import { DashboardComponent } from './main-view/dashboard/dashboard.component';
 import { SettingsComponent } from './main-view/settings/settings.component';
 import { AnalysisStoryComponent } from './main-view/analysis-story/analysis-story.component';
@ -9,19 +10,22 @@ import { LoginComponent } from './account/login/login.component';
 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';

 const routes: Routes = [
    { path: '', component: HomePageComponent },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
+    { path: 'sentiment', component: SentimentAnalysisComponent },
+    { path: 'errors', component: ErrorsCorrectionPageComponent },
    {
        path: 'main-view', component: MainViewComponent, children: [
-            {path: '',component: DashboardComponent},
-            {path: 'ad-analysis',component: AdvertAnalysisComponent},
-            {path: 'post-analysis',component: PostAnalysisComponent},
-            {path: 'post-analysis/:id',component: PostAnalysisComponent},
-            {path: 'history',component: AnalysisStoryComponent},
-            {path: 'settings',component: SettingsComponent}
+            { path: '', component: DashboardComponent },
+            { path: 'ad-analysis', component: AdvertAnalysisComponent },
+            { path: 'post-analysis', component: PostAnalysisComponent },
+            { path: 'post-analysis/:id', component: PostAnalysisComponent },
+            { path: 'history', component: AnalysisStoryComponent },
+            { path: 'settings', component: SettingsComponent }
        ]
    },

--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@ -0,0 +1,3 @@
+:host {
+    height: 100%
+}
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -20,6 +20,11 @@ import { MatTableModule } from '@angular/material/table';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import { DashboardComponent } from './main-view/dashboard/dashboard.component';
 import { NgChartsModule } from 'ng2-charts';
+import { HttpClientModule } from '@angular/common/http';
+import { SentimentAnalysisComponent } from './demo-models-page/sentiment-analysis/sentiment-analysis.component';
+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';

@NgModule({
  declarations: [
@ -34,7 +39,9 @@ import { NgChartsModule } from 'ng2-charts';
    PostAnalysisComponent,
    AnalysisStoryComponent,
    SettingsComponent,
-    DashboardComponent
+    DashboardComponent,
+    SentimentAnalysisComponent,
+    ErrorsCorrectionPageComponent
  ],
  imports: [
    BrowserModule,
@ -45,7 +52,10 @@ import { NgChartsModule } from 'ng2-charts';
    MatIconModule,
    MatTableModule,
    MatTooltipModule,
-    NgChartsModule
+    NgChartsModule,
+    HttpClientModule,
+    ReactiveFormsModule,
+    MatProgressSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
--- a/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.html
+++ b/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.html
@ -0,0 +1,31 @@
+<div class="sentiment-container">
+    <div class="title-container">
+        <div class="title">POPRAWIANIE BŁĘDÓW</div>
+        <button (click)="goToMainPage()" class="button-primary main-page-button">strona główna</button>
+    </div>
+
+    <div class="text">ja cos tu se wpiszesz albo nie xD</div>
+    <div class="ready-examples-button">
+        <button (click)="correctErrors(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)="correctErrors(false)" class="button-primary">Popraw tekst</button>
+        </div>
+    </div>
+    <div *ngIf="correctedTextSet" class="corrected-text-container">
+        <ng-container *ngIf="correctedTextLoading; else loading">
+            <div class="corrected-title">Poprawiony tekst:</div>
+            <div class="corrected-text">{{correctedText}}</div>
+        </ng-container>
+    </div>
+</div>
+
+<ng-template #loading>
+    <div class="spinner"><mat-spinner></mat-spinner></div>
+</ng-template>
--- a/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.scss
+++ b/src/app/demo-models-page/errors-correction-page/errors-correction-page.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(10, 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
+}
--- a/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.spec.ts
+++ b/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorsCorrectionPageComponent } from './errors-correction-page.component';
+
+describe('ErrorsCorrectionPageComponent', () => {
+  let component: ErrorsCorrectionPageComponent;
+  let fixture: ComponentFixture<ErrorsCorrectionPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ErrorsCorrectionPageComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ErrorsCorrectionPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.ts
+++ b/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.ts
@ -0,0 +1,65 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'app-errors-correction-page',
+    templateUrl: './errors-correction-page.component.html',
+    styleUrls: ['./errors-correction-page.component.scss']
+})
+export class ErrorsCorrectionPageComponent implements OnInit {
+
+    correctedTextLoading = false;
+    correctedTextSet= false;
+    correctedText!: string;
+    randomSampleList = [
+        'krul wladyslaw jagiello zwyciezyl w bitwie pod grunwaldem',
+        'bylem w sklepie i kupilem ser szynke i masol',
+        'w ktorym roku wybuhla druga wojna swiatowa',
+        'reprezentacja polski bedzie grac jutro mecz z niemcami',
+        'zwiazek charcerski zorganizowal obchody rocznicy wybuhu wojny'
+    ]
+    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 {
+    }
+
+    correctErrors(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
+        }
+        this.http.put('http://127.0.0.1:5000/get_errors', { sentence: sentence }).subscribe({
+            next: (resp: any) => {
+                this.correctedText = resp.predictions[0].generated_text
+                this.correctedTextLoading = true;
+            }
+        })
+
+
+    }
+
+    goToMainPage() {
+        this.router.navigate([''])
+    }
+
+}
--- a/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.html
+++ b/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.html
@ -0,0 +1,60 @@
+<div class="sentiment-container">
+    <div class="title-container">
+        <div class="title">ANALIZA SENTYMENTU</div>
+        <button (click)="goToMainPage()" class="button-primary main-page-button">strona główna</button>
+    </div>
+
+    <div class="text">Maciek 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">
+                <div *ngFor="let res of results">
+                    <div class="result-row">
+                        <div class="sentence">{{res.sentence}}</div>
+                        <div [ngSwitch]="res.label">
+                            <div class="label-0" *ngSwitchCase="0">Negatywny</div>
+                            <div class="label-1" *ngSwitchCase="1">Pozytywny</div>
+                            <div class="label-2" *ngSwitchCase="2">Neutralny</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="chart">
+                    <canvas baseChart width="300" height="300" [data]="barChartData" [options]="barChartOptions"
+                        [plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'">
+                    </canvas>
+                </div>
+            </ng-container>
+        </div>
+    </div>
+    <!-- <div *ngIf="analysisLoading" class="results-container">
+        <div class="chart">
+            <canvas baseChart width="200" height="200" [data]="barChartData" [options]="barChartOptions"
+                [plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'">
+            </canvas>
+        </div>
+    </div> -->
+</div>
+
+<ng-template #loading>
+    <div class="spinner"><mat-spinner></mat-spinner></div>
+</ng-template>
--- a/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.scss
+++ b/src/app/demo-models-page/sentiment-analysis/sentiment-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(9, 64, 71, 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;
+}
--- a/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.spec.ts
+++ b/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SentimentAnalysisComponent } from './sentiment-analysis.component';
+
+describe('SentimentAnalysisComponent', () => {
+  let component: SentimentAnalysisComponent;
+  let fixture: ComponentFixture<SentimentAnalysisComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SentimentAnalysisComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SentimentAnalysisComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.ts
+++ b/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.ts
@ -0,0 +1,113 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { ChartConfiguration, ChartOptions, ChartType } from 'chart.js';
+
+@Component({
+    selector: 'app-sentiment-analysis',
+    templateUrl: './sentiment-analysis.component.html',
+    styleUrls: ['./sentiment-analysis.component.scss']
+})
+export class SentimentAnalysisComponent implements OnInit {
+
+    randomSampleList = [
+        'Bardzo dobry produkt',
+        'Nie spełnia moich oczekiwań',
+        'Spodziewałem się że będzie źle, ale jest tragicznie',
+        'Ma swoje wady i zalety ale może być',
+        'Mogłobyć lepiej ale nie narzekam',
+        "bardzo słaby produkt", "bardzo dobry produkt", "dziś świeci słońce", "bardzo słabo działa", "jutro jest wtorek",
+        "zepsute słuchawki nie działają", "Super produkt", "Wspaniała suszarka, godna polecenia",
+        "Co jutro będziesz robił wieczorem?", "Ale badziewny produkt", "Dostałem inne zamówienie, bo moje było niesmaczne",
+        "Jutro jadę do Kościana", "Uderzyłem się w palec", "Słońce jest żółte", "Ta klawiatura nie nadaje się do niczego",
+        "Mieszkam w nieciekawym mieście", "Ta klawiatura jest wspaniała", "Hotel blisko czystej plaży", "Jedzenie bardzo smaczne"
+    ]
+
+    analysisStart = false;
+    analysisLoading = false;
+    results: { label: number, score: number, sentence: string }[] = []
+    public barChartLegend = true;
+    public barChartPlugins = [];
+    public barChartOptions: ChartConfiguration<'bar'>['options'] = {
+        responsive: false,
+        scales: {
+            yAxes: {
+                display: true,
+            }
+        }
+    };
+    public barChartData: ChartConfiguration<'bar'>['data'] = {
+        labels: ['Statystyki'],
+        datasets: []
+    };
+
+    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)
+        }
+        this.http.put('http://127.0.0.1:5000/get_sentiment_data', { sentences: sentences }).subscribe({
+            next: (resp: any) => {
+                this.results = resp.predictions
+                console.log(resp)
+                this.barChartData.datasets = [
+                    { data: [resp.count_labels.negative], label: String(resp.count_labels.negative) + ' negatywny', backgroundColor: 'rgba(250, 66, 66, 1)', borderRadius: 15, },
+                    { data: [resp.count_labels.positive], label: String(resp.count_labels.positive) + ' pozytywny', backgroundColor: 'rgba(124, 136, 248, 1)', borderRadius: 15, },
+                    { data: [resp.count_labels.neutral], label: String(resp.count_labels.neutral) + ' neutralny', backgroundColor: 'rgba(211,211,211)', borderRadius: 15, }
+                ]
+                this.analysisLoading = true
+                this.sentencesArray.clear()
+                setTimeout(() => {
+                    this.duplicateField()
+                }, 50)
+            }
+        })
+    }
+
+    duplicateField() {
+        const sentenceForm = this.fb.group({
+            text: ['', Validators.required]
+        })
+        this.sentencesArray.push(sentenceForm)
+    }
+
+    trackByFn(index: any, item: any) {
+        return index;
+    }
+
+    goToMainPage() {
+        this.router.navigate([''])
+    }
+
+}
--- a/src/app/home-page/home-page/home-page.component.html
+++ b/src/app/home-page/home-page/home-page.component.html
@ -1,5 +1,5 @@
 <div class="home-page">
-    <div class="nav-bar-container">
+    <!-- <div class="nav-bar-container">
        <div class="logo-container"><img class="logo-image" src="assets/images/logo.svg" alt=""></div>
        <div class="navigation-button-container">
            <div class="nav-text">Super</div>
@ -45,5 +45,39 @@
                </div>
            </div>
        </div>
+    </div> -->
+    <div class="main-title">
+        <div class="logo-container"><img class="logo-image" src="assets/images/logo.svg" alt=""></div>
+        EXACT DATA
+    </div>
+    <div class="demo-buttons">
+        <div class="row-1">
+            <div class="sentiment" (click)="goToSentiment()">
+                <div class="title">ANALIZA SENTYMENTU</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
+                    galley of type and scrambled it to make a type specimen book.</div>
+            </div>
+            <div class="irony">
+                <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
+                    galley of type and scrambled it to make a type specimen book.</div>
+            </div>
+        </div>
+        <div class="row-2">
+            <div class="analysis">
+                <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
+                    galley of type and scrambled it to make a type specimen book.</div>
+            </div>
+            <div class="errors" (click)="goToErrors()">
+                <div class="title">POPRAWIANIE BŁĘDÓW</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
+                    galley of type and scrambled it to make a type specimen book.</div>
+            </div>
+        </div>
    </div>
 </div>
--- a/src/app/home-page/home-page/home-page.component.scss
+++ b/src/app/home-page/home-page/home-page.component.scss
@ -26,16 +26,18 @@
        align-items: center;
        justify-content: space-between;
        column-gap: 40px;
-        .nav-text{
+
+        .nav-text {
            cursor: pointer;
            transition: 0.3s;
-            &:hover{
-                color:#0097A7
+
+            &:hover {
+                color: #0097A7
            }
        }
    }

-    .login-button-container{
+    .login-button-container {
        flex: 1;
        padding: 0 30px;
        display: flex;
@ -46,70 +48,178 @@
    }
 }

-.home-page-content{
+.home-page-content {
    padding: 150px 15% 1px 15%;
-    .header-container{
+
+    .header-container {
        display: flex;
        justify-content: space-between;
-        .title-container{
+
+        .title-container {
            max-width: 30%;
-            .main-header{
+
+            .main-header {
                font-size: 60px;
-                color:white;
+                color: white;
                white-space: normal;
                line-height: 1;
                //margin: 0px 0px 35px 0px;
            }
-            .sub-header{
+
+            .sub-header {
                font-size: 25px;
-                color:#0097A7;
+                color: #0097A7;
                margin: 0px 0px 35px 0px;
            }
-            .header-description{
-                font-size:20px;
-                color:white;
+
+            .header-description {
+                font-size: 20px;
+                color: white;
                margin: 0px 0px 35px 0px;
            }
        }
    }
-    .info-section{
+
+    .info-section {
        margin: 150px 0 100px 0;
-        .info-section-container{
+
+        .info-section-container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            column-gap: 150px;
-            .images-container{
+
+            .images-container {
                display: flex;
                flex-direction: column;
                row-gap: 25px;
-                .row-1,.row-2{
+
+                .row-1,
+                .row-2 {
                    column-gap: 25px;
                    display: flex;
                    flex-direction: row;
                }
-                .row-1{
-                    .img-1{
+
+                .row-1 {
+                    .img-1 {
                        border-top-left-radius: 35px;
                    }
-                    .img-2{
+
+                    .img-2 {
                        border-top-right-radius: 35px;
                    }
                }
-                .row-2{
-                    .img-3{
+
+                .row-2 {
+                    .img-3 {
                        border-bottom-left-radius: 35px;
                    }
-                    .img-4{
+
+                    .img-4 {
                        border-bottom-right-radius: 35px;
                    }
                }
            }
-            .text-container{
-                color:white;
-                font-size:20px;
+
+            .text-container {
+                color: white;
+                font-size: 20px;
                line-height: 1.5;
            }
        }
    }
 }
+
+.home-page {
+    height: 100%;
+    // background: rgb(99,94,175);
+    // background: linear-gradient(162deg, rgba(99,94,175,1) 0%, rgba(6,6,91,1) 27%, rgba(6,79,94,1) 100%);
+}
+
+.main-title {
+    font-size: 90px;
+    -webkit-text-stroke: 0.5px white;
+    padding-top: 50px;
+    //margin:auto
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    background: -webkit-linear-gradient(35deg, rgba(0,0,0,1) 0%, rgba(0,85,94,1) 50%, rgba(0,0,0,1) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 500;
+    padding-bottom: 40px;
+}
+
+.demo-buttons {
+    display: flex;
+    flex-direction: column;
+    row-gap: 30px;
+}
+
+.row-1,
+.row-2 {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    column-gap: 30px;
+}
+
+.sentiment,
+.irony,
+.analysis,
+.errors {
+    width: 30%;
+    height: 200px;
+    border-radius: 15px;
+    border: 2px solid silver;
+    padding: 15px;
+    cursor: pointer
+}
+
+.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%);
+}
+
+.title {
+    padding-top: 5px;
+    text-align: center;
+    padding-bottom: 40px;
+    color: rgb(175, 175, 175);
+}
+
+.text {
+    color: rgb(176, 176, 176)
+}
+
+.logo-container {
+    img {
+        width: 70px;
+        padding-right: 15px
+    }
+}
--- a/src/app/home-page/home-page/home-page.component.ts
+++ b/src/app/home-page/home-page/home-page.component.ts
@ -1,15 +1,30 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';

@Component({
-  selector: 'app-home-page',
-  templateUrl: './home-page.component.html',
-  styleUrls: ['./home-page.component.scss']
+    selector: 'app-home-page',
+    templateUrl: './home-page.component.html',
+    styleUrls: ['./home-page.component.scss']
 })
 export class HomePageComponent implements OnInit {

-  constructor() { }

-  ngOnInit(): void {
-  }
+    constructor(
+        private http: HttpClient,
+        private router: Router
+    ) { }
+
+    ngOnInit(): void {
+    }
+
+    goToSentiment() {
+        this.router.navigate(['/sentiment'])
+    }
+
+    goToErrors() {
+        this.router.navigate(['/errors'])
+    }

 }
--- a/src/index.html
+++ b/src/index.html
@ -10,7 +10,7 @@
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body class="mat-typography">
+<body>
  <app-root></app-root>
 </body>
 </html>
--- a/src/styles.scss
+++ b/src/styles.scss
@ -1,10 +1,18 @@
 /* You can add global styles to this file, and also import other style files */
 body {
    margin: 0;
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    background-color: black;
+    font: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif !important;
+    // background: rgb(0,0,0);
+    // background: linear-gradient(31deg, rgba(0,0,0,1) 0%, rgba(9,71,55,1) 50%, rgba(0,0,0,1) 100%);
+    background: rgb(0, 0, 0);
+    background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgba(0, 85, 94, 1) 50%, rgba(0, 0, 0, 1) 100%);
+    background-repeat: no-repeat;
+    min-height: 100% !important;
+    //height: fit-content;
+    font-family: Roboto, "Helvetica Neue", sans-serif;
 }

+
 .flex-direction-row {
    display: flex !important;
    flex-direction: row !important;
@ -35,11 +43,15 @@ body {
    cursor: pointer;
    transition: 0.3s;

-    &:hover {
+    &:hover:enabled {
        background-color: white;
        color: #0097A7;
        border: 2px solid #0097A7;
    }
+
+    &:disabled{
+        background-color: #869b9d;
+    }
 }

 .exe-input {
@ -66,22 +78,26 @@ body {
        font-size: 12px;
        margin: 0 0 3px 0;
    }
-    .input-down-text{
+
+    .input-down-text {
        display: flex;
        flex-direction: row;
        justify-self: center;
        margin: 5px 0 0 0;
        column-gap: 8px;
        font-size: 12px;
-        mat-icon{
-            color:#0097A7;
+
+        mat-icon {
+            color: #0097A7;
            cursor: pointer;
            transition: 0.5s;
-            &:hover{
-                color:white;
+
+            &:hover {
+                color: white;
            }
        }
-        span{
+
+        span {
            display: flex;
            align-items: center;
        }
@ -101,13 +117,14 @@ body {
        background-color: rgb(232, 230, 230);
        border: 2px solid #0097A7;
        border-radius: 25px;
-        min-height: 200px;
+        min-height: 80px;
        max-height: 400px;
-        max-width:400px;
+        //max-width: 400px;
        padding: 15px 15px 0px 20px;
        color: #0097A7;
        resize: vertical;
        font-size: 17px;
+
        &:focus {
            border: 3px solid #0097A7;
            outline: none;
@ -115,12 +132,26 @@ body {
    }
 }

-html,
+html {
+    height: 100%;
+    //height: fit-content;
+}
+
+
+
 body {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-content: stretch;
+    align-items: stretch;
    height: 100%;
 }

-body {
-    margin: 0;
-    font-family: Roboto, "Helvetica Neue", sans-serif;
+app-root {
+    order: 0;
+    flex: 1 1 auto;
+    align-self: auto;
+    display: block;
 }