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: 'advertise', component: AdvertiseAnalysisComponent},
{ path: 'post-analysis', component: FacebookAnalysisComponent},
{
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: '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 }
// ]
// },
];

41
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">ANAIZA TEKSTU REKLAMY</div>
<button (click)="goToMainPage()" class="button-primary main-page-button advertise-btn">strona główna</button>
<div class="title">Analiza tekstu reklamy</div>
<button (click)="goToMainPage()" class="button-primary main-page-button button-color">Strona główna</button>
</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">
<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 class="form-container">
<div [formGroup]="errorsForm">
@ -15,17 +15,36 @@
</div>
</div>
<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 *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>
<div *ngIf="analysisStart" class="corrected-text-container">
<ng-container *ngIf="analysisLoading; else loading">
<ng-container *ngIf="!error else errorTemplate">
<div class="corrected-title">Wyniki analizy:</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>
</div>
</div>
<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>

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

@ -1,8 +1,5 @@
.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
}
@ -82,3 +79,35 @@
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 { FormGroup, Validators, FormBuilder, FormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { concatMap, tap } from 'rxjs';
import { environment } from 'src/environments/environment';
@Component({
selector: 'app-advertise-analysis',
@ -10,10 +12,33 @@ import { Router } from '@angular/router';
})
export class AdvertiseAnalysisComponent implements OnInit {
correctedTextLoading = false;
correctedTextSet = false;
analysisLoading = false;
analysisStart = false;
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({
text: ['', Validators.required]
})
@ -27,14 +52,24 @@ export class AdvertiseAnalysisComponent implements OnInit {
return this.errorsForm.controls['text'] as FormControl
}
exampleOutput = {
model1Label: 0,
model2Label: ''
}
analysisResults = this.exampleOutput
textDestiny: string = ''
textIntrigue: string = ''
textFormal: string = ''
ngOnInit(): void {
}
analyseAdvert(isRandomSample: boolean): void {
let sentence = ''
this.correctedTextSet = true
this.correctedTextLoading = false;
this.analysisStart = true
this.analysisLoading = false;
this.error = false;
if (isRandomSample) {
const randomElement = this.randomSampleList[Math.floor(Math.random() * this.randomSampleList.length)];
sentence = randomElement
@ -42,6 +77,25 @@ export class AdvertiseAnalysisComponent implements OnInit {
} else {
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() {

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">POPRAWIANIE BŁĘDÓW</div>
<button (click)="goToMainPage()" class="button-primary main-page-button error-btn">strona główna</button>
<div class="title">Poprawianie błędów</div>
<button (click)="goToMainPage()" class="button-primary main-page-button button-color">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 error-btn">Wyolsuj gotowy przykład</button>
<button (click)="correctErrors(true)" class="button-primary button-color">Wylosuj gotowy przykład</button>
</div>
<div class="form-container">
<div [formGroup]="errorsForm">
@ -15,7 +15,7 @@
</div>
</div>
<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>
</div>
</div>
@ -30,7 +30,7 @@
</div>
<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>

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

@ -1,8 +1,5 @@
.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;
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">ANALIZA POSTA Z FACEBOOKA</div>
<button (click)="goToMainPage()" class="button-primary main-page-button face-btn">strona główna</button>
<div class="title">Analiza posta</div>
<button (click)="goToMainPage()" class="button-primary main-page-button button-color">Strona główna</button>
</div>
<div class="text">cos tu sie wpisze</div>
<div class="form-container">
<div [formGroup]="linkForm">
<div class="exe-input">
@ -11,8 +11,8 @@
</div>
</div>
<div class="button-container">
<button [disabled]="!linkForm.valid" (click)="getComments()" class="button-primary face-btn">Analizuj
komentarze</button>
<button [disabled]="!linkForm.valid" (click)="getComments()" class="button-primary button-color">Analizuj
post</button>
</div>
</div>
<div class="results-table" *ngIf="analysisStart">
@ -24,10 +24,26 @@
<div class="post">
{{post}}
</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 class="post-title">Komentarze</div>
<div class="analysis-results">
<div>
<div class="post-title">Komentarze</div>
<div class="table">
<div *ngFor="let res of results">
<div class="result-row">
<div class="sentence">{{res.sentence}}</div>
@ -46,13 +62,15 @@
</div>
</div>
<div class="chart">
<canvas baseChart width="300" height="300" [data]="sentimentBarChartData" [options]="sentimentBarChartOptions"
[plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'">
<canvas baseChart width="300" height="300" [data]="sentimentBarChartData"
[options]="sentimentBarChartOptions" [plugins]="barChartPlugins"
[legend]="barChartLegend" [type]="'bar'">
</canvas>
</div>
<div class="chart">
<canvas baseChart width="300" height="300" [data]="ironyBarChartData" [options]="ironyBarChartOptions"
[plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'">
<canvas baseChart width="300" height="300" [data]="ironyBarChartData"
[options]="ironyBarChartOptions" [plugins]="barChartPlugins" [legend]="barChartLegend"
[type]="'bar'">
</canvas>
</div>
</div>
@ -63,7 +81,7 @@
</div>
<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 #commentError>
<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 {
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);
height: fit-content
}
@ -47,10 +44,14 @@
column-gap: 40px;
padding-top: 30px;
}
.table{
max-width: 400px;
}
.analysis-results {
display: flex;
column-gap: 40px;
flex-wrap: wrap;
}
.post {
@ -72,7 +73,7 @@
}
.label-1 {
color: rgb(84, 84, 255)
color: #65dec2
}
.label-2 {
@ -125,12 +126,12 @@
}
.irony-0{
color: rgb(126, 126, 126);
color: rgb(196, 196, 196);
min-width:75px;
}
.irony-1{
color: rgb(134, 2, 164);
color: #65dec2;
font-weight:600;
}
@ -141,3 +142,22 @@
.sentiment-container{
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;
// }

48
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 { Router } from '@angular/router';
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';
Chart.defaults.color = '#FFF';
@Component({
selector: 'app-facebook-analysis',
templateUrl: './facebook-analysis.component.html',
@ -21,6 +23,11 @@ export class FacebookAnalysisComponent implements OnInit {
commentStatus = true;
error = false;
post!: string;
exampleOutput = {
model1Label: 0,
model2Label: ''
}
analysisResults = this.exampleOutput
public barChartLegend = true;
public barChartPlugins = [];
public sentimentBarChartOptions: ChartConfiguration<'bar'>['options'] = {
@ -46,7 +53,7 @@ export class FacebookAnalysisComponent implements OnInit {
};
public ironyBarChartData: ChartConfiguration<'bar'>['data'] = {
labels: ['Statystyki ironii'],
datasets: []
datasets: [],
};
get link(): FormControl {
@ -75,23 +82,30 @@ export class FacebookAnalysisComponent implements OnInit {
this.commentStatus = false;
return of({})
} else {
console.log(facebookResp)
this.commentStatus = true;
this.post = facebookResp.post
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.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.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, }
]
return this.http.post(environment.irony, { sentences: facebookResp.sentences }).pipe(tap((ironyResp:any) => {
this.results.forEach((element,i) => {
element.ironyLabel = ironyResp.predictions[i].label
});
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.non_irony], label: String(ironyResp.count_labels.non_irony) + ' brak ironii', backgroundColor: 'rgba(134, 2, 164)', borderRadius: 15, },
]
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) => {
this.results = resp.predictions.map((elem: any) => { return { sentimentLabel: elem.label, sentence: elem.sentence } })
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.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: 'rgb(196, 196, 196)', borderRadius: 15, }
]
return this.http.post(environment.irony, { sentences: facebookResp.sentences }).pipe(tap((ironyResp: any) => {
this.results.forEach((element, i) => {
element.ironyLabel = ironyResp.predictions[i].label
});
this.ironyBarChartData.datasets = [
{ 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: 'rgb(196, 196, 196)', borderRadius: 15, },
]
}))
}))
}))
}))
}

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">WYKRYWANIE IRONII</div>
<button (click)="goToMainPage()" class="button-primary main-page-button irony-btn">strona główna</button>
<div class="title">Wykrywanie ironii</div>
<button (click)="goToMainPage()" class="button-primary main-page-button button-color">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)="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 class="form-container">
<div class="form">
@ -21,9 +21,9 @@
</ng-container>
</div>
<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)"
class="button-primary irony-btn">Analizuj tekst</button>
class="button-primary button-color">Analizuj tekst</button>
</div>
</div>
<div class="results-table" *ngIf="analysisStart">
@ -53,7 +53,7 @@
</div>
<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>

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

@ -53,12 +53,12 @@
}
.label-0 {
color: rgb(126, 126, 126);
color: rgb(196, 196, 196);
min-width:75px;
}
.label-1 {
color: rgb(134, 2, 164);
color: #65dec2;
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 { FormGroup, Validators, FormBuilder, FormArray } from '@angular/forms';
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';
Chart.defaults.color = '#FFF';
@Component({
selector: 'app-irony-analysis',
templateUrl: './irony-analysis.component.html',
@ -129,8 +131,8 @@ export class IronyAnalysisComponent implements OnInit {
this.analysisLoading = true;
this.analysisResults = resp.predictions;
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.non_irony], label: String(resp.count_labels.irony) + ' ironia', backgroundColor: 'rgba(134, 2, 164)', 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: '#65dec2', borderRadius: 15, },
]
},
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">ANALIZA SENTYMENTU</div>
<button (click)="goToMainPage()" class="button-primary main-page-button sentiment-btn">strona główna</button>
<div class="title">Analiza sentymentu</div>
<button (click)="goToMainPage()" class="button-primary main-page-button button-color">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 sentiment-btn">Wyolsuj gotowe przykłady</button>
<button (click)="analyzeSentiment(true)" class="button-primary button-color">Wylosuj gotowe przykłady</button>
</div>
<div class="form-container">
<div class="form">
@ -21,9 +20,9 @@
</ng-container>
</div>
<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)"
class="button-primary sentiment-btn">Analizuj tekst</button>
class="button-primary button-color">Analizuj tekst</button>
</div>
</div>
<div class="results-table" *ngIf="analysisStart">
@ -61,7 +60,7 @@
</div>
<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>

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

@ -57,7 +57,7 @@
}
.label-1 {
color: rgb(84, 84, 255)
color: #65dec2
}
.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 { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
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';
Chart.defaults.color = '#FFF';
@Component({
selector: 'app-sentiment-analysis',
templateUrl: './sentiment-analysis.component.html',
@ -153,8 +155,8 @@ export class SentimentAnalysisComponent implements OnInit {
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, }
{ 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: 'rgb(196, 196, 196)', borderRadius: 15, }
]
this.analysisLoading = true
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>
<mat-icon (click)="scrollDown()">expand_more</mat-icon>
</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="logo-container"><img class="logo-image" src="assets/images/logo.svg" alt=""></div>
<div class="navigation-button-container">
@ -51,44 +51,47 @@
</div>
</div> -->
<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
</div>
<div class="demo-buttons">
<div class="row-1">
<div class="sentiment" (click)="goToSentiment()">
<div class="title">ANALIZA SENTYMENTU</div>
<div class="sentiment one-color" (click)="goToSentiment()">
<div class="title">Analiza sentymentu</div>
<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
lub neutralna.</div>
</div>
<div class="irony" (click)="goToIrony()">
<div class="title">WYKRYWANIE IRONII</div>
<div class="irony one-color" (click)="goToIrony()">
<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
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>
</div>
</div>
<div class="row-2">
<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
galley of type and scrambled it to make a type specimen book.</div>
<div class="analysis one-color" (click)="goToAdvert()">
<div class="title">Analiza reklamy</div>
<div class="text">Moduł ten na podstawie analizy tonu treści reklamy ocenia jak intrygująca, młodzieżowa czy
formalna jest dana reklama. Dodatkowo wspierając się analizą stylistyczną tekstu, moduł pomaga w
oszacowaniu możliwego odbioru reklamy w mediach społecznościowych przez zamierzonych odbiorców.
</div>
</div>
<div class="errors" (click)="goToErrors()">
<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
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="facebook" (click)="goToFacebook()">
<div class="title">ANALIZUJ POST FACEBOOK</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 class="facebook one-color" (click)="goToFacebook()">
<div class="title">Analiza posta</div>
<div class="text">Moduł
pozwala w pełni przeanalizować post z platformy Facebook pod kątem analizy sentymentu wraz z
występowaniem ironii w komentarzach oraz ogólnej oceny atrakcyjności
zamieszczonego posta.</div>
</div>
</div>
</div>

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

@ -1,7 +1,9 @@
.home-page {
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:#093a3f;
//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
}
.main-title {
@ -22,7 +24,6 @@
.demo-buttons {
display: flex;
flex-direction: column;
row-gap: 30px;
}
.row-1,
@ -31,6 +32,7 @@
flex-direction: row;
justify-content: center;
column-gap: 30px;
flex-wrap: wrap;
}
.sentiment,
@ -84,18 +86,20 @@
.facebook {
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 {
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 {
padding-top: 5px;
padding-top: 10px;
text-align: center;
padding-bottom: 40px;
padding-bottom: 20px;
color: rgb(175, 175, 175);
font-weight: 600;
font-size: 20px;
}
.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 {
wixa = false;
constructor(
private http: HttpClient,
private router: Router
@ -39,8 +39,15 @@ export class HomePageComponent implements OnInit {
this.router.navigate(['/post-analysis'])
}
scrollDown(): void{
window.scrollTo({top:document.body.clientHeight,behavior: "smooth",});
scrollDown(): void {
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',
errors: 'https://magisterka-backend.azurewebsites.net/get_errors',
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',
errors: 'http://127.0.0.1:5000/get_errors',
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">
<head>
<meta charset="utf-8">
<title>Mgr</title>
<title>Exact Data</title>
<base href="/">
<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 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
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<body>
<app-root></app-root>

54
src/styles.scss
View File

@ -42,18 +42,21 @@ body {
padding: 8px 12px;
cursor: pointer;
transition: 0.3s;
display: flex;
justify-content: center;
align-items: center;
&:hover:enabled {
background-color: rgb(41, 41, 41);
color: #bebebe;
border: 2px solid #9d9d9d;
//color: #bebebe;
//border: 2px solid #9d9d9d;
}
&:disabled{
&:disabled {
background-color: #869b9d;
}
&:disabled{
&:disabled {
background-color: #869b9d;
}
}
@ -69,7 +72,7 @@ body {
border-radius: 25px;
height: 32px;
padding: 0px 15px 0px 15px;
color: #0097A7;
color: #000000;
&:focus {
border: 3px solid #0097A7;
@ -125,7 +128,7 @@ body {
max-height: 400px;
//max-width: 400px;
padding: 15px 15px 0px 20px;
color: #0097A7;
color: #000000;
resize: vertical;
font-size: 17px;
@ -159,3 +162,42 @@ app-root {
align-self: auto;
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;
}