s444386/mgr-frontend
2
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

quick fixes

Browse Source
This commit is contained in:
szymonj98 2023-06-14 01:46:23 +02:00
parent 6c647e146b
commit 9e9d46c48e
22 changed files with 356 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/app-routing.module.ts
View File

@ -24,16 +24,16 @@ const routes: Routes = [
{ path: 'irony', component: IronyAnalysisComponent }, { path: 'irony', component: IronyAnalysisComponent },
{ path: 'advertise', component: AdvertiseAnalysisComponent}, { path: 'advertise', component: AdvertiseAnalysisComponent},
{ path: 'post-analysis', component: FacebookAnalysisComponent}, { path: 'post-analysis', component: FacebookAnalysisComponent},
{ // {
path: 'main-view', component: MainViewComponent, children: [ // path: 'main-view', component: MainViewComponent, children: [
{ path: '', component: DashboardComponent }, // { path: '', component: DashboardComponent },
{ path: 'ad-analysis', component: AdvertAnalysisComponent }, // { path: 'ad-analysis', component: AdvertAnalysisComponent },
{ path: 'post-analysis', component: PostAnalysisComponent }, // { path: 'post-analysis', component: PostAnalysisComponent },
{ path: 'post-analysis/:id', component: PostAnalysisComponent }, // { path: 'post-analysis/:id', component: PostAnalysisComponent },
{ path: 'history', component: AnalysisStoryComponent }, // { path: 'history', component: AnalysisStoryComponent },
{ path: 'settings', component: SettingsComponent } // { path: 'settings', component: SettingsComponent }
] // ]
}, // },
]; ];

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

@ -1,12 +1,12 @@
<div class="sentiment-container"> <div class="sentiment-container one-background-color">
<div class="title-container"> <div class="title-container">
<div class="title">ANAIZA TEKSTU REKLAMY</div> <div class="title">Analiza tekstu reklamy</div>
<button (click)="goToMainPage()" class="button-primary main-page-button advertise-btn">strona główna</button> <button (click)="goToMainPage()" class="button-primary main-page-button button-color">Strona główna</button>
</div> </div>
<div class="text">Ola J cos tu se wpiszesz albo nie xD</div> <!-- <div class="text">Ola J cos tu se wpiszesz albo nie xD</div> -->
<div class="ready-examples-button"> <div class="ready-examples-button">
<button (click)="analyseAdvert(true)" class="button-primary advertise-btn">Wyolsuj gotowy przykład</button> <button (click)="analyseAdvert(true)" class="button-primary button-color">Wylosuj gotowy przykład</button>
</div> </div>
<div class="form-container"> <div class="form-container">
<div [formGroup]="errorsForm"> <div [formGroup]="errorsForm">
@ -15,17 +15,36 @@
</div> </div>
</div> </div>
<div class="button-container"> <div class="button-container">
<button [disabled]="!errorsForm.valid" (click)="analyseAdvert(false)" class="button-primary advertise-btn">Analizuj tekst</button> <button [disabled]="!errorsForm.valid" (click)="analyseAdvert(false)"
class="button-primary button-color">Analizuj tekst</button>
</div> </div>
</div> </div>
<div *ngIf="correctedTextSet" class="corrected-text-container"> <div *ngIf="analysisStart" class="corrected-text-container">
<ng-container *ngIf="correctedTextLoading; else loading"> <ng-container *ngIf="analysisLoading; else loading">
<ng-container *ngIf="!error else errorTemplate">
<div class="corrected-title">Wyniki analizy:</div> <div class="corrected-title">Wyniki analizy:</div>
<div class="corrected-text">{{correctedText}}</div> <div class="results-container">
<div class="res-row">
<div class="texy-correct">Poprawność stylistyczna:</div>
<div class="correct-text" [ngSwitch]="analysisResults.model1Label">
<div class="label-1" *ngSwitchCase="'LABEL_0'">Poprawny</div>
<div class="label-0" *ngSwitchCase="'LABEL_1'">Wymaga poprawy</div>
</div>
</div>
<div class="res-row">
<div class="texy-correct">Ton tekstu:</div>
<div class="analysis-row">{{analysisResults.model2Label}}</div>
</div>
</div>
</ng-container>
</ng-container> </ng-container>
</div> </div>
</div> </div>
<ng-template #loading> <ng-template #loading>
<div class="spinner"><mat-spinner></mat-spinner></div> <div class="spinner spinner-position"><mat-spinner></mat-spinner></div>
</ng-template>
<ng-template #errorTemplate>
<div class="spinner error">Wystąpił nieoczekiwany błąd.</div>
</ng-template> </ng-template>

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

@ -1,8 +1,5 @@
.sentiment-container { .sentiment-container {
padding: 30px 200px; 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); min-height: calc(100% - 60px);
height: fit-content height: fit-content
} }
@ -82,3 +79,35 @@
background-repeat: no-repeat; background-repeat: no-repeat;
} }
} }
.res-row{
color: white;
display: flex;
justify-content: space-between;
width:600px;
border-bottom: 1px solid rgb(163, 161, 161);
margin-bottom:10px;
}
.label-0 {
color: rgb(255, 66, 66)
}
.label-1 {
color: #65dec2;
}
.analysis-row{
color:white;
//word-spacing:5px;
}
.spinner {
display: flex;
justify-content: center;
padding-top: 40px
}
.error {
color: white
}

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

@ -2,6 +2,8 @@ import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormBuilder, FormControl } from '@angular/forms'; import { FormGroup, Validators, FormBuilder, FormControl } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { concatMap, tap } from 'rxjs';
import { environment } from 'src/environments/environment';
@Component({ @Component({
selector: 'app-advertise-analysis', selector: 'app-advertise-analysis',
@ -10,10 +12,33 @@ import { Router } from '@angular/router';
}) })
export class AdvertiseAnalysisComponent implements OnInit { export class AdvertiseAnalysisComponent implements OnInit {
correctedTextLoading = false; analysisLoading = false;
correctedTextSet = false; analysisStart = false;
correctedText!: string; correctedText!: string;
randomSampleList = [] error = false;
randomSampleList = [
"Szanowny Panie/Pani, mamy dla Pana/Pani niesamowitą nowość, która z pewnością przyciągnie Pana/Panią uwagę!",
"Czy jest Pani/Pan gotowy/a na nową przygodę? Przygotowaliśmy dla Pani/Pana niezwykłe wyzwanie!",
"Zapraszamy Pana/Panią do odkrycia tajemniczego świata pełnego fascynujących możliwości i niezwykłych przygód!",
"Yo, co tam! Chciałem Ci dać cynk, że mamy dla Ciebie ekstra opcję, która rozbuja temat!",
"Cześć, zajawkowiczu/zajawkowiczko! Mamy dla Ciebie mega ofertę, która da Ci czadu!",
"Witam serdecznie! Wpadaj, bo mamy dla Ciebie niezłą promkę - czeka na Ciebie coś naprawdę wyjebanego!",
"Hejka! Przygotowaliśmy dla Ciebie spoko gratkę, która odjazdowo kopnie!",
"Elo, szanowna śmietanko/szanowny kumplu! Mamy dla Ciebie niezłe combo, które wgniata w fotel!",
"Gratuluję osiągnięcia! To jest bardzo ważne dla mnie.",
"Bardzo mi miło cię poznać. Bądź ostrożny i dbaj o siebie.",
"Przepraszam za spóźnienie. Cieszę się, że mogę być tutaj.",
"To jest naprawdę interesujące. Mam pytanie odnośnie twojej propozycji.",
"Z radością przekazujemy wam najnowsze promocje!",
"Dawaj, zróbmy sobie mały chillout. Zamówmy pizzę i obejrzyjmy jakiś dobry film.",
"Wpadaj na piwko wieczorem, będziemy rozkręcać imprezę!",
"Co tam u ciebie siedzi w lodówce? Może coś dobrego znajdziemy.",
"Czaisz, o co chodzi? Nie ma potrzeby tłumaczyć ci wszystkiego po raz kolejny.",
"Dogadaliśmy się w końcu i ustaliliśmy plan na resztę tygodnia.",
"Przestań trząść portkami. Nie ma się czego bać.",
"Walnijmy wreszcie prosto z mostu i powiedzmy sobie wszystko, co mamy na sercu."
]
errorsForm: FormGroup = this.fb.group({ errorsForm: FormGroup = this.fb.group({
text: ['', Validators.required] text: ['', Validators.required]
}) })
@ -27,14 +52,24 @@ export class AdvertiseAnalysisComponent implements OnInit {
return this.errorsForm.controls['text'] as FormControl return this.errorsForm.controls['text'] as FormControl
} }
exampleOutput = {
model1Label: 0,
model2Label: ''
}
analysisResults = this.exampleOutput
textDestiny: string = ''
textIntrigue: string = ''
textFormal: string = ''
ngOnInit(): void { ngOnInit(): void {
} }
analyseAdvert(isRandomSample: boolean): void { analyseAdvert(isRandomSample: boolean): void {
let sentence = '' let sentence = ''
this.correctedTextSet = true this.analysisStart = true
this.correctedTextLoading = false; this.analysisLoading = false;
this.error = false;
if (isRandomSample) { if (isRandomSample) {
const randomElement = this.randomSampleList[Math.floor(Math.random() * this.randomSampleList.length)]; const randomElement = this.randomSampleList[Math.floor(Math.random() * this.randomSampleList.length)];
sentence = randomElement sentence = randomElement
@ -42,6 +77,25 @@ export class AdvertiseAnalysisComponent implements OnInit {
} else { } else {
sentence = this.errorsForm.value.text sentence = this.errorsForm.value.text
} }
this.http.post(environment.style, { sentences: [sentence] }).pipe(concatMap((styleResp: any) => {
console.log(styleResp)
this.analysisResults.model1Label = styleResp.predictions[0].label
return this.http.post(environment.tone, { sentences: [sentence] }).pipe(tap((toneResp:any) => {
console.log(toneResp)
this.analysisResults.model2Label = toneResp.predictions[0].join(', ')
// this.textDestiny = this.analysisResults.model2Label.includes(0) ? 'Młodzieżowy' : 'Neutralny'
// this.textIntrigue = this.analysisResults.model2Label.includes(1) ? 'Intrygujący' : 'Żmudny'
// this.textFormal = this.analysisResults.model2Label.includes(2) ? 'Formalny' : 'Nieformalny'
}))
})).subscribe({
next: () => {
this.analysisLoading = true
},
error:() => {
this.analysisLoading = true;
this.error = true;
}
})
} }
goToMainPage() { goToMainPage() {

14
src/app/demo-models-page/errors-correction-page/errors-correction-page.component.html
View File

@ -1,12 +1,12 @@
<div class="sentiment-container"> <div class="sentiment-container one-background-color">
<div class="title-container"> <div class="title-container">
<div class="title">POPRAWIANIE BŁĘDÓW</div> <div class="title">Poprawianie błędów</div>
<button (click)="goToMainPage()" class="button-primary main-page-button error-btn">strona główna</button> <button (click)="goToMainPage()" class="button-primary main-page-button button-color">Strona główna</button>
</div> </div>
<div class="text">ja cos tu se wpiszesz albo nie xD</div>
<div class="ready-examples-button"> <div class="ready-examples-button">
<button (click)="correctErrors(true)" class="button-primary error-btn">Wyolsuj gotowy przykład</button> <button (click)="correctErrors(true)" class="button-primary button-color">Wylosuj gotowy przykład</button>
</div> </div>
<div class="form-container"> <div class="form-container">
<div [formGroup]="errorsForm"> <div [formGroup]="errorsForm">
@ -15,7 +15,7 @@
</div> </div>
</div> </div>
<div class="button-container"> <div class="button-container">
<button [disabled]="!errorsForm.valid" (click)="correctErrors(false)" class="button-primary error-btn">Popraw <button [disabled]="!errorsForm.valid" (click)="correctErrors(false)" class="button-primary button-color">Popraw
tekst</button> tekst</button>
</div> </div>
</div> </div>
@ -30,7 +30,7 @@
</div> </div>
<ng-template #loading> <ng-template #loading>
<div class="spinner"><mat-spinner></mat-spinner></div> <div class="spinner spinner-position"><mat-spinner></mat-spinner></div>
</ng-template> </ng-template>
<ng-template #errorTemplate> <ng-template #errorTemplate>
<div class="spinner error">Wystąpił nieoczekiwany błąd.</div> <div class="spinner error">Wystąpił nieoczekiwany błąd.</div>

3
src/app/demo-models-page/errors-correction-page/errors-correction-page.component.scss
View File

@ -1,8 +1,5 @@
.sentiment-container { .sentiment-container {
padding: 30px 200px; 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); min-height: calc(100% - 60px);
height: fit-content; height: fit-content;
width:fit-content; width:fit-content;

44
src/app/demo-models-page/facebook-analysis/facebook-analysis.component.html
View File

@ -1,9 +1,9 @@
<div class="facebook-analysis-container"> <div class="facebook-analysis-container one-background-color">
<div class="title-container"> <div class="title-container">
<div class="title">ANALIZA POSTA Z FACEBOOKA</div> <div class="title">Analiza posta</div>
<button (click)="goToMainPage()" class="button-primary main-page-button face-btn">strona główna</button> <button (click)="goToMainPage()" class="button-primary main-page-button button-color">Strona główna</button>
</div> </div>
<div class="text">cos tu sie wpisze</div>
<div class="form-container"> <div class="form-container">
<div [formGroup]="linkForm"> <div [formGroup]="linkForm">
<div class="exe-input"> <div class="exe-input">
@ -11,8 +11,8 @@
</div> </div>
</div> </div>
<div class="button-container"> <div class="button-container">
<button [disabled]="!linkForm.valid" (click)="getComments()" class="button-primary face-btn">Analizuj <button [disabled]="!linkForm.valid" (click)="getComments()" class="button-primary button-color">Analizuj
komentarze</button> post</button>
</div> </div>
</div> </div>
<div class="results-table" *ngIf="analysisStart"> <div class="results-table" *ngIf="analysisStart">
@ -24,10 +24,26 @@
<div class="post"> <div class="post">
{{post}} {{post}}
</div> </div>
<div class="post-analysis">
<div class="post-title">Analiza posta</div>
<div class="results-container">
<div class="res-row">
<div class="texy-correct">Poprawność stylistyczna:</div>
<div class="correct-text" [ngSwitch]="analysisResults.model1Label">
<div class="label-1" *ngSwitchCase="'LABEL_0'">Poprawny</div>
<div class="label-0" *ngSwitchCase="'LABEL_1'">Wymaga poprawy</div>
</div>
</div>
<div class="res-row">
<div class="texy-correct">Ton tekstu:</div>
<div class="analysis-row">{{analysisResults.model2Label}}</div>
</div>
</div>
</div>
</div> </div>
<div class="analysis-results">
<div>
<div class="post-title">Komentarze</div> <div class="post-title">Komentarze</div>
<div class="analysis-results">
<div class="table">
<div *ngFor="let res of results"> <div *ngFor="let res of results">
<div class="result-row"> <div class="result-row">
<div class="sentence">{{res.sentence}}</div> <div class="sentence">{{res.sentence}}</div>
@ -46,13 +62,15 @@
</div> </div>
</div> </div>
<div class="chart"> <div class="chart">
<canvas baseChart width="300" height="300" [data]="sentimentBarChartData" [options]="sentimentBarChartOptions" <canvas baseChart width="300" height="300" [data]="sentimentBarChartData"
[plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'"> [options]="sentimentBarChartOptions" [plugins]="barChartPlugins"
[legend]="barChartLegend" [type]="'bar'">
</canvas> </canvas>
</div> </div>
<div class="chart"> <div class="chart">
<canvas baseChart width="300" height="300" [data]="ironyBarChartData" [options]="ironyBarChartOptions" <canvas baseChart width="300" height="300" [data]="ironyBarChartData"
[plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'"> [options]="ironyBarChartOptions" [plugins]="barChartPlugins" [legend]="barChartLegend"
[type]="'bar'">
</canvas> </canvas>
</div> </div>
</div> </div>
@ -63,7 +81,7 @@
</div> </div>
<ng-template #loading> <ng-template #loading>
<div class="spinner"><mat-spinner></mat-spinner></div> <div class="spinner spinner-position"><mat-spinner></mat-spinner></div>
</ng-template> </ng-template>
<ng-template #commentError> <ng-template #commentError>
<div class="comment-error">Nie udało się pobrać komentarzy</div> <div class="comment-error">Nie udało się pobrać komentarzy</div>

32
src/app/demo-models-page/facebook-analysis/facebook-analysis.component.scss
View File

@ -1,8 +1,5 @@
.facebook-analysis-container { .facebook-analysis-container {
padding: 30px 200px; padding: 30px 200px;
background: rgb(0, 0, 0);
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(15, 32, 116) 50%, rgba(0, 0, 0, 1) 100%) !important;
background-repeat: no-repeat;
min-height: calc(100% - 60px); min-height: calc(100% - 60px);
height: fit-content height: fit-content
} }
@ -47,10 +44,14 @@
column-gap: 40px; column-gap: 40px;
padding-top: 30px; padding-top: 30px;
} }
.table{
max-width: 400px;
}
.analysis-results { .analysis-results {
display: flex; display: flex;
column-gap: 40px; column-gap: 40px;
flex-wrap: wrap;
} }
.post { .post {
@ -72,7 +73,7 @@
} }
.label-1 { .label-1 {
color: rgb(84, 84, 255) color: #65dec2
} }
.label-2 { .label-2 {
@ -125,12 +126,12 @@
} }
.irony-0{ .irony-0{
color: rgb(126, 126, 126); color: rgb(196, 196, 196);
min-width:75px; min-width:75px;
} }
.irony-1{ .irony-1{
color: rgb(134, 2, 164); color: #65dec2;
font-weight:600; font-weight:600;
} }
@ -141,3 +142,22 @@
.sentiment-container{ .sentiment-container{
min-width: 80px min-width: 80px
} }
.res-row{
color: white;
display: flex;
justify-content: space-between;
width:600px;
border-bottom: 1px solid rgb(163, 161, 161);
margin-bottom:10px;
}
.post-analysis{
margin-top: 30px;
}
// .charts {
// display: flex;
// flex-wrap: wrap;
// column-gap: 25px;
// }

32
src/app/demo-models-page/facebook-analysis/facebook-analysis.component.ts
View File

@ -3,9 +3,11 @@ import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { concatMap, of, tap } from 'rxjs'; import { concatMap, of, tap } from 'rxjs';
import { ChartConfiguration, ChartOptions, ChartType } from 'chart.js'; import { Chart, ChartConfiguration, ChartOptions, ChartType } from 'chart.js';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
Chart.defaults.color = '#FFF';
@Component({ @Component({
selector: 'app-facebook-analysis', selector: 'app-facebook-analysis',
templateUrl: './facebook-analysis.component.html', templateUrl: './facebook-analysis.component.html',
@ -21,6 +23,11 @@ export class FacebookAnalysisComponent implements OnInit {
commentStatus = true; commentStatus = true;
error = false; error = false;
post!: string; post!: string;
exampleOutput = {
model1Label: 0,
model2Label: ''
}
analysisResults = this.exampleOutput
public barChartLegend = true; public barChartLegend = true;
public barChartPlugins = []; public barChartPlugins = [];
public sentimentBarChartOptions: ChartConfiguration<'bar'>['options'] = { public sentimentBarChartOptions: ChartConfiguration<'bar'>['options'] = {
@ -46,7 +53,7 @@ export class FacebookAnalysisComponent implements OnInit {
}; };
public ironyBarChartData: ChartConfiguration<'bar'>['data'] = { public ironyBarChartData: ChartConfiguration<'bar'>['data'] = {
labels: ['Statystyki ironii'], labels: ['Statystyki ironii'],
datasets: [] datasets: [],
}; };
get link(): FormControl { get link(): FormControl {
@ -75,25 +82,32 @@ export class FacebookAnalysisComponent implements OnInit {
this.commentStatus = false; this.commentStatus = false;
return of({}) return of({})
} else { } else {
console.log(facebookResp)
this.commentStatus = true; this.commentStatus = true;
this.post = facebookResp.post this.post = facebookResp.post
return this.http.post(environment.style, { sentences: [this.post] }).pipe(concatMap((styleResp: any) => {
this.analysisResults.model1Label = styleResp.predictions[0].label
return this.http.post(environment.tone, { sentences: [this.post] }).pipe(concatMap((toneResp: any) => {
this.analysisResults.model2Label = toneResp.predictions[0].join(', ')
return this.http.post(environment.sentiment, { sentences: facebookResp.sentences }).pipe(concatMap((resp: any) => { return this.http.post(environment.sentiment, { sentences: facebookResp.sentences }).pipe(concatMap((resp: any) => {
this.results = resp.predictions.map((elem: any) => { return { sentimentLabel: elem.label, sentence: elem.sentence } }) this.results = resp.predictions.map((elem: any) => { return { sentimentLabel: elem.label, sentence: elem.sentence } })
this.sentimentBarChartData.datasets = [ this.sentimentBarChartData.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.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.positive], label: String(resp.count_labels.positive) + ' pozytywny', backgroundColor: '#65dec2', borderRadius: 15, },
{ data: [resp.count_labels.neutral], label: String(resp.count_labels.neutral) + ' neutralny', backgroundColor: 'rgba(211,211,211)', borderRadius: 15, } { data: [resp.count_labels.neutral], label: String(resp.count_labels.neutral) + ' neutralny', backgroundColor: 'rgb(196, 196, 196)', borderRadius: 15, }
] ]
return this.http.post(environment.irony, { sentences: facebookResp.sentences }).pipe(tap((ironyResp:any) => { return this.http.post(environment.irony, { sentences: facebookResp.sentences }).pipe(tap((ironyResp: any) => {
this.results.forEach((element,i) => { this.results.forEach((element, i) => {
element.ironyLabel = ironyResp.predictions[i].label element.ironyLabel = ironyResp.predictions[i].label
}); });
this.ironyBarChartData.datasets = [ this.ironyBarChartData.datasets = [
{ data: [ironyResp.count_labels.irony], label: String(ironyResp.count_labels.irony) + ' ironia', backgroundColor: 'rgba(126, 126, 126)', borderRadius: 15, }, { data: [ironyResp.count_labels.irony], label: String(ironyResp.count_labels.irony) + ' ironia', backgroundColor: '#65dec2', borderRadius: 15 },
{ data: [ironyResp.count_labels.non_irony], label: String(ironyResp.count_labels.non_irony) + ' brak ironii', backgroundColor: 'rgba(134, 2, 164)', borderRadius: 15, }, { data: [ironyResp.count_labels.non_irony], label: String(ironyResp.count_labels.non_irony) + ' brak ironii', backgroundColor: 'rgb(196, 196, 196)', borderRadius: 15, },
] ]
})) }))
})) }))
}))
}))
} }
})).subscribe({ })).subscribe({

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

@ -1,12 +1,12 @@
<div class="sentiment-container"> <div class="sentiment-container one-background-color">
<div class="title-container"> <div class="title-container">
<div class="title">WYKRYWANIE IRONII</div> <div class="title">Wykrywanie ironii</div>
<button (click)="goToMainPage()" class="button-primary main-page-button irony-btn">strona główna</button> <button (click)="goToMainPage()" class="button-primary main-page-button button-color">Strona główna</button>
</div> </div>
<div class="text">Ola G cos tu se wpiszesz albo nie xD</div>
<div class="ready-examples-button"> <div class="ready-examples-button">
<button (click)="analyzeIrony(true)" class="button-primary irony-btn">Wyolsuj gotowe przykłady</button> <button (click)="analyzeIrony(true)" class="button-primary button-color">Wylosuj gotowe przykłady</button>
</div> </div>
<div class="form-container"> <div class="form-container">
<div class="form"> <div class="form">
@ -21,9 +21,9 @@
</ng-container> </ng-container>
</div> </div>
<div class="button-container"> <div class="button-container">
<button (click)="duplicateField()" class="button-primary irony-btn">Dodaj pole</button> <button (click)="duplicateField()" class="button-primary button-color">Dodaj pole</button>
<button [disabled]="!sentimentForm.valid" (click)="analyzeIrony(false)" <button [disabled]="!sentimentForm.valid" (click)="analyzeIrony(false)"
class="button-primary irony-btn">Analizuj tekst</button> class="button-primary button-color">Analizuj tekst</button>
</div> </div>
</div> </div>
<div class="results-table" *ngIf="analysisStart"> <div class="results-table" *ngIf="analysisStart">
@ -53,7 +53,7 @@
</div> </div>
<ng-template #loading> <ng-template #loading>
<div class="spinner"><mat-spinner></mat-spinner></div> <div class="spinner spinner-position"><mat-spinner></mat-spinner></div>
</ng-template> </ng-template>
<ng-template #errorTemplate> <ng-template #errorTemplate>
<div class="spinner error">Wystąpił nieoczekiwany błąd.</div> <div class="spinner error">Wystąpił nieoczekiwany błąd.</div>

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

@ -53,12 +53,12 @@
} }
.label-0 { .label-0 {
color: rgb(126, 126, 126); color: rgb(196, 196, 196);
min-width:75px; min-width:75px;
} }
.label-1 { .label-1 {
color: rgb(134, 2, 164); color: #65dec2;
font-weight:600; font-weight:600;
} }

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

@ -2,9 +2,11 @@ import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormBuilder, FormArray } from '@angular/forms'; import { FormGroup, Validators, FormBuilder, FormArray } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { ChartConfiguration, ChartOptions, ChartType } from 'chart.js'; import { Chart, ChartConfiguration, ChartOptions, ChartType } from 'chart.js';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
Chart.defaults.color = '#FFF';
@Component({ @Component({
selector: 'app-irony-analysis', selector: 'app-irony-analysis',
templateUrl: './irony-analysis.component.html', templateUrl: './irony-analysis.component.html',
@ -129,8 +131,8 @@ export class IronyAnalysisComponent implements OnInit {
this.analysisLoading = true; this.analysisLoading = true;
this.analysisResults = resp.predictions; this.analysisResults = resp.predictions;
this.ironyBarChartData.datasets = [ this.ironyBarChartData.datasets = [
{ data: [resp.count_labels.irony], label: String(resp.count_labels.non_irony) + ' brak ironii', backgroundColor: 'rgba(126, 126, 126)', borderRadius: 15, }, { data: [resp.count_labels.irony], label: String(resp.count_labels.non_irony) + ' brak ironii', backgroundColor: 'rgb(196, 196, 196)', borderRadius: 15, },
{ data: [resp.count_labels.non_irony], label: String(resp.count_labels.irony) + ' ironia', backgroundColor: 'rgba(134, 2, 164)', borderRadius: 15, }, { data: [resp.count_labels.non_irony], label: String(resp.count_labels.irony) + ' ironia', backgroundColor: '#65dec2', borderRadius: 15, },
] ]
}, },
error: () => { error: () => {

15
src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.html
View File

@ -1,12 +1,11 @@
<div class="sentiment-container"> <div class="sentiment-container one-background-color">
<div class="title-container"> <div class="title-container">
<div class="title">ANALIZA SENTYMENTU</div> <div class="title">Analiza sentymentu</div>
<button (click)="goToMainPage()" class="button-primary main-page-button sentiment-btn">strona główna</button> <button (click)="goToMainPage()" class="button-primary main-page-button button-color">Strona główna</button>
</div> </div>
<div class="text">Maciek cos tu se wpiszesz albo nie xD</div>
<div class="ready-examples-button"> <div class="ready-examples-button">
<button (click)="analyzeSentiment(true)" class="button-primary sentiment-btn">Wyolsuj gotowe przykłady</button> <button (click)="analyzeSentiment(true)" class="button-primary button-color">Wylosuj gotowe przykłady</button>
</div> </div>
<div class="form-container"> <div class="form-container">
<div class="form"> <div class="form">
@ -21,9 +20,9 @@
</ng-container> </ng-container>
</div> </div>
<div class="button-container"> <div class="button-container">
<button (click)="duplicateField()" class="button-primary sentiment-btn">Dodaj pole</button> <button (click)="duplicateField()" class="button-primary button-color">Dodaj pole</button>
<button [disabled]="!sentimentForm.valid" (click)="analyzeSentiment(false)" <button [disabled]="!sentimentForm.valid" (click)="analyzeSentiment(false)"
class="button-primary sentiment-btn">Analizuj tekst</button> class="button-primary button-color">Analizuj tekst</button>
</div> </div>
</div> </div>
<div class="results-table" *ngIf="analysisStart"> <div class="results-table" *ngIf="analysisStart">
@ -61,7 +60,7 @@
</div> </div>
<ng-template #loading> <ng-template #loading>
<div class="spinner"><mat-spinner></mat-spinner></div> <div class="spinner spinner-position"><mat-spinner></mat-spinner></div>
</ng-template> </ng-template>
<ng-template #errorTemplate> <ng-template #errorTemplate>
<div class="spinner error">Wystąpił nieoczekiwany błąd.</div> <div class="spinner error">Wystąpił nieoczekiwany błąd.</div>

2
src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.scss
View File

@ -57,7 +57,7 @@
} }
.label-1 { .label-1 {
color: rgb(84, 84, 255) color: #65dec2
} }
.label-2 { .label-2 {

8
src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.ts
View File

@ -2,9 +2,11 @@ import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { ChartConfiguration, ChartOptions, ChartType } from 'chart.js'; import { Chart, ChartConfiguration, ChartOptions, ChartType } from 'chart.js';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
Chart.defaults.color = '#FFF';
@Component({ @Component({
selector: 'app-sentiment-analysis', selector: 'app-sentiment-analysis',
templateUrl: './sentiment-analysis.component.html', templateUrl: './sentiment-analysis.component.html',
@ -153,8 +155,8 @@ export class SentimentAnalysisComponent implements OnInit {
console.log(resp) console.log(resp)
this.barChartData.datasets = [ 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.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.positive], label: String(resp.count_labels.positive) + ' pozytywny', backgroundColor: '#65dec2', borderRadius: 15, },
{ data: [resp.count_labels.neutral], label: String(resp.count_labels.neutral) + ' neutralny', backgroundColor: 'rgba(211,211,211)', borderRadius: 15, } { data: [resp.count_labels.neutral], label: String(resp.count_labels.neutral) + ' neutralny', backgroundColor: 'rgb(196, 196, 196)', borderRadius: 15, }
] ]
this.analysisLoading = true this.analysisLoading = true
this.sentencesArray.clear() this.sentencesArray.clear()

39
src/app/home-page/home-page/home-page.component.html
View File

@ -2,7 +2,7 @@
<div class="jurney-text">START YOUR JOURNEY NOW</div> <div class="jurney-text">START YOUR JOURNEY NOW</div>
<mat-icon (click)="scrollDown()">expand_more</mat-icon> <mat-icon (click)="scrollDown()">expand_more</mat-icon>
</div> --> </div> -->
<div class="home-page"> <div class="home-page" [ngClass]="{'animate__animated animate__flip animate__faster animate__repeat-3': wixa}">
<!-- <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="logo-container"><img class="logo-image" src="assets/images/logo.svg" alt=""></div>
<div class="navigation-button-container"> <div class="navigation-button-container">
@ -51,44 +51,47 @@
</div> </div>
</div> --> </div> -->
<div class="main-title"> <div class="main-title">
<div class="logo-container"><img class="logo-image" src="assets/images/logo.svg" alt=""></div> <div class="logo-container"><img (click)="runWixa()" class="logo-image" src="assets/images/logo.svg" alt="">
</div>
EXACT DATA EXACT DATA
</div> </div>
<div class="demo-buttons"> <div class="demo-buttons">
<div class="row-1"> <div class="row-1">
<div class="sentiment" (click)="goToSentiment()"> <div class="sentiment one-color" (click)="goToSentiment()">
<div class="title">ANALIZA SENTYMENTU</div> <div class="title">Analiza sentymentu</div>
<div class="text">Moduł ten służy do automatycznego wykrywania i klasyfikowania emocji i nastrojów <div class="text">Moduł ten służy do automatycznego wykrywania i klasyfikowania emocji i nastrojów
związanych z tekstem. Celem analizy sentymentu jest określenie, czy treść jest pozytywna, negatywna związanych z tekstem. Celem analizy sentymentu jest określenie, czy treść jest pozytywna, negatywna
lub neutralna.</div> lub neutralna.</div>
</div> </div>
<div class="irony" (click)="goToIrony()"> <div class="irony one-color" (click)="goToIrony()">
<div class="title">WYKRYWANIE IRONII</div> <div class="title">Wykrywanie ironii</div>
<div class="text">Moduł ten służy do wykrywania ironii w zdaniach. Jest to pomocne narzędzie w <div class="text">Moduł ten służy do wykrywania ironii w zdaniach. Jest to pomocne narzędzie w
weryfikacji np. komentarzy w mediach społecznościowych. Wpływa on bezpośrednio na ocenę odbioru weryfikacji np. komentarzy w mediach społecznościowych. Wpływa on bezpośrednio na ocenę odbioru
treści zamieszczanych na różnych platofrmach społecznościowych</div> treści zamieszczanych na różnych platofrmach społecznościowych</div>
</div> </div>
</div> </div>
<div class="row-2"> <div class="row-2">
<div class="analysis" (click)="goToAdvert()"> <div class="analysis one-color" (click)="goToAdvert()">
<div class="title">ANALIZA REKLAMY</div> <div class="title">Analiza reklamy</div>
<div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum <div class="text">Moduł ten na podstawie analizy tonu treści reklamy ocenia jak intrygująca, młodzieżowa czy
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a formalna jest dana reklama. Dodatkowo wspierając się analizą stylistyczną tekstu, moduł pomaga w
galley of type and scrambled it to make a type specimen book.</div> oszacowaniu możliwego odbioru reklamy w mediach społecznościowych przez zamierzonych odbiorców.
</div> </div>
<div class="errors" (click)="goToErrors()"> </div>
<div class="title">POPRAWIANIE BŁĘDÓW</div> <div class="errors one-color" (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 <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 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> galley of type and scrambled it to make a type specimen book.</div>
</div> </div>
</div> </div>
<div class="row-2"> <div class="row-2">
<div class="facebook" (click)="goToFacebook()"> <div class="facebook one-color" (click)="goToFacebook()">
<div class="title">ANALIZUJ POST FACEBOOK</div> <div class="title">Analiza posta</div>
<div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum <div class="text">Moduł
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a pozwala w pełni przeanalizować post z platformy Facebook pod kątem analizy sentymentu wraz z
galley of type and scrambled it to make a type specimen book.</div> występowaniem ironii w komentarzach oraz ogólnej oceny atrakcyjności
zamieszczonego posta.</div>
</div> </div>
</div> </div>
</div> </div>

18
src/app/home-page/home-page/home-page.component.scss
View File

@ -1,7 +1,9 @@
.home-page { .home-page {
background: rgb(0, 0, 0); background:#093a3f;
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgba(0, 85, 94, 1) 50%, rgba(0, 0, 0, 1) 100%); //background:#143039;
//background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgba(0, 85, 94, 1) 50%, rgba(0, 0, 0, 1) 100%);
height: fit-content height: fit-content
} }
.main-title { .main-title {
@ -22,7 +24,6 @@
.demo-buttons { .demo-buttons {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 30px;
} }
.row-1, .row-1,
@ -31,6 +32,7 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
column-gap: 30px; column-gap: 30px;
flex-wrap: wrap;
} }
.sentiment, .sentiment,
@ -84,18 +86,20 @@
.facebook { .facebook {
background: rgb(0, 0, 0); background: rgb(0, 0, 0);
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(15, 32, 116) 50%, rgba(0, 0, 0, 1) 100%) !important; background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(15, 32, 116) 50%, rgba(0, 0, 0, 1) 100%);
&:hover { &:hover {
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(21, 45, 165) 50%, rgba(0, 0, 0, 1) 100%) !important; background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(21, 45, 165) 50%, rgba(0, 0, 0, 1) 100%);
} }
} }
.title { .title {
padding-top: 5px; padding-top: 10px;
text-align: center; text-align: center;
padding-bottom: 40px; padding-bottom: 20px;
color: rgb(175, 175, 175); color: rgb(175, 175, 175);
font-weight: 600;
font-size: 20px;
} }
.text { .text {

13
src/app/home-page/home-page/home-page.component.ts
View File

@ -10,7 +10,7 @@ import { Observable } from 'rxjs';
}) })
export class HomePageComponent implements OnInit { export class HomePageComponent implements OnInit {
wixa = false;
constructor( constructor(
private http: HttpClient, private http: HttpClient,
private router: Router private router: Router
@ -39,8 +39,15 @@ export class HomePageComponent implements OnInit {
this.router.navigate(['/post-analysis']) this.router.navigate(['/post-analysis'])
} }
scrollDown(): void{ scrollDown(): void {
window.scrollTo({top:document.body.clientHeight,behavior: "smooth",}); window.scrollTo({ top: document.body.clientHeight, behavior: "smooth", });
}
runWixa(): void {
this.wixa = !this.wixa
setTimeout(() => {
location.reload()
}, 1500);
} }
} }

4
src/environments/environment.prod.ts
View File

@ -3,6 +3,8 @@ export const environment = {
sentiment: 'https://magisterka-backend.azurewebsites.net/get_sentiment_data', sentiment: 'https://magisterka-backend.azurewebsites.net/get_sentiment_data',
errors: 'https://magisterka-backend.azurewebsites.net/get_errors', errors: 'https://magisterka-backend.azurewebsites.net/get_errors',
facebook: 'https://magisterka-backend.azurewebsites.net/scrapp_comments', facebook: 'https://magisterka-backend.azurewebsites.net/scrapp_comments',
irony: 'https://magisterka-backend.azurewebsites.net/get_irony_data' irony: 'https://magisterka-backend.azurewebsites.net/get_irony_data',
style: 'https://magisterka-backend.azurewebsites.net/get_style_data',
tone: 'https://magisterka-backend.azurewebsites.net/get_tone_data'
}; };

4
src/environments/environment.ts
View File

@ -7,7 +7,9 @@ export const environment = {
sentiment: 'http://127.0.0.1:5000/get_sentiment_data', sentiment: 'http://127.0.0.1:5000/get_sentiment_data',
errors: 'http://127.0.0.1:5000/get_errors', errors: 'http://127.0.0.1:5000/get_errors',
facebook: 'http://127.0.0.1:5000/scrapp_comments', facebook: 'http://127.0.0.1:5000/scrapp_comments',
irony: 'http://127.0.0.1:5000/get_irony_data' irony: 'http://127.0.0.1:5000/get_irony_data',
style: 'http://127.0.0.1:5000/get_style_data',
tone: 'http://127.0.0.1:5000/get_tone_data',
}; };
/* /*

8
src/index.html
View File

@ -2,13 +2,17 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Mgr</title> <title>Exact Data</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="assets/images/logo.svg">
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <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"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>

54
src/styles.scss
View File

@ -42,18 +42,21 @@ body {
padding: 8px 12px; padding: 8px 12px;
cursor: pointer; cursor: pointer;
transition: 0.3s; transition: 0.3s;
display: flex;
justify-content: center;
align-items: center;
&:hover:enabled { &:hover:enabled {
background-color: rgb(41, 41, 41); background-color: rgb(41, 41, 41);
color: #bebebe; //color: #bebebe;
border: 2px solid #9d9d9d; //border: 2px solid #9d9d9d;
} }
&:disabled{ &:disabled {
background-color: #869b9d; background-color: #869b9d;
} }
&:disabled{ &:disabled {
background-color: #869b9d; background-color: #869b9d;
} }
} }
@ -69,7 +72,7 @@ body {
border-radius: 25px; border-radius: 25px;
height: 32px; height: 32px;
padding: 0px 15px 0px 15px; padding: 0px 15px 0px 15px;
color: #0097A7; color: #000000;
&:focus { &:focus {
border: 3px solid #0097A7; border: 3px solid #0097A7;
@ -125,7 +128,7 @@ body {
max-height: 400px; max-height: 400px;
//max-width: 400px; //max-width: 400px;
padding: 15px 15px 0px 20px; padding: 15px 15px 0px 20px;
color: #0097A7; color: #000000;
resize: vertical; resize: vertical;
font-size: 17px; font-size: 17px;
@ -159,3 +162,42 @@ app-root {
align-self: auto; align-self: auto;
display: block; display: block;
} }
.one-color {
background: rgb(0, 0, 0) !important;
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(16, 112, 125) 50%, rgba(0, 0, 0, 1) 100%) !important;
height: fit-content !important;
height:190px !important;
min-width:385px;
margin-bottom:30px !important;
&:hover {
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(21, 139, 155) 50%, rgba(0, 0, 0, 1) 100%) !important;
}
}
.button-color {
background-color:rgb(16, 112, 125)!important;
&:disabled{
background-color:#85878c !important;
color:#e1e1e1 !important
}
&:hover:enabled {
background-color: rgb(28, 145, 161) !important;
}
}
.one-background-color{
background: rgb(0, 0, 0) !important;
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(16, 112, 125) 50%, rgba(0, 0, 0, 1) 100%) !important;
height: fit-content !important;
}
.spinner-position{
display: flex;
justify-content: center;
align-items: center;
min-width: 400px;
}
.mat-progress-spinner circle, .mat-spinner circle {
stroke: rgb(16, 112, 125)!important;
}