From 76ac53959f1389f4059958e8756ab423ce86595c Mon Sep 17 00:00:00 2001 From: szymonj98 Date: Tue, 30 May 2023 01:29:48 +0200 Subject: [PATCH] facebook post analysis page --- src/app/app-routing.module.ts | 2 + src/app/app.module.ts | 4 +- .../facebook-analysis.component.html | 52 ++++++++++ .../facebook-analysis.component.scss | 98 +++++++++++++++++++ .../facebook-analysis.component.spec.ts | 25 +++++ .../facebook-analysis.component.ts | 75 ++++++++++++++ .../home-page/home-page.component.html | 12 +++ .../home-page/home-page.component.scss | 62 +++++++++++- .../home-page/home-page.component.ts | 8 ++ 9 files changed, 334 insertions(+), 4 deletions(-) create mode 100644 src/app/demo-models-page/facebook-analysis/facebook-analysis.component.html create mode 100644 src/app/demo-models-page/facebook-analysis/facebook-analysis.component.scss create mode 100644 src/app/demo-models-page/facebook-analysis/facebook-analysis.component.spec.ts create mode 100644 src/app/demo-models-page/facebook-analysis/facebook-analysis.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 2322157..dfe180c 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -13,6 +13,7 @@ import { RouterModule, Routes } from '@angular/router'; import { SentimentAnalysisComponent } from './demo-models-page/sentiment-analysis/sentiment-analysis.component'; import { IronyAnalysisComponent } from './demo-models-page/irony-analysis/irony-analysis.component'; import { AdvertiseAnalysisComponent } from './demo-models-page/advertise-analysis/advertise-analysis.component'; +import { FacebookAnalysisComponent } from './demo-models-page/facebook-analysis/facebook-analysis.component'; const routes: Routes = [ { path: '', component: HomePageComponent }, @@ -22,6 +23,7 @@ const routes: Routes = [ { path: 'errors', component: ErrorsCorrectionPageComponent }, { path: 'irony', component: IronyAnalysisComponent }, { path: 'advertise', component: AdvertiseAnalysisComponent}, + { path: 'post-analysis', component: FacebookAnalysisComponent}, { path: 'main-view', component: MainViewComponent, children: [ { path: '', component: DashboardComponent }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 57d9b34..5d7834b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -27,6 +27,7 @@ import { ErrorsCorrectionPageComponent } from './demo-models-page/errors-correct import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import { IronyAnalysisComponent } from './demo-models-page/irony-analysis/irony-analysis.component'; import { AdvertiseAnalysisComponent } from './demo-models-page/advertise-analysis/advertise-analysis.component'; +import { FacebookAnalysisComponent } from './demo-models-page/facebook-analysis/facebook-analysis.component'; @NgModule({ declarations: [ @@ -45,7 +46,8 @@ import { AdvertiseAnalysisComponent } from './demo-models-page/advertise-analysi SentimentAnalysisComponent, ErrorsCorrectionPageComponent, IronyAnalysisComponent, - AdvertiseAnalysisComponent + AdvertiseAnalysisComponent, + FacebookAnalysisComponent ], imports: [ BrowserModule, diff --git a/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.html b/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.html new file mode 100644 index 0000000..ceafebf --- /dev/null +++ b/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.html @@ -0,0 +1,52 @@ +
+
+
ANALIZA POSTA Z FACEBOOKA
+ +
+
cos tu sie wpisze
+
+
+
+ +
+
+
+ +
+
+
+ +
+
Treść posta
+
+ {{post}} +
+
+
+
+
Komentarze
+
+
+
{{res.sentence}}
+
+
Negatywny
+
Pozytywny
+
Neutralny
+
+
+
+
+
+ + +
+
+ +
+
+ + + + diff --git a/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.scss b/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.scss new file mode 100644 index 0000000..6f0560c --- /dev/null +++ b/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.scss @@ -0,0 +1,98 @@ +.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 +} + +.title-container { + display: flex; + justify-content: space-between; + + .main-page-button { + height: 40px; + } +} + +.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 +} + +.results-table { + width: 100%; + display: flex; + flex-direction: column; + column-gap: 40px; + padding-top: 30px; +} + +.analysis-results { + display: flex; + column-gap: 40px; +} + +.post { + color: silver +} + +.info-container{ + padding-bottom:25px +} + +.post-title { + font-size: 25px; + color: white; + padding-bottom:20px +} + +.label-0 { + color: rgb(255, 66, 66) +} + +.label-1 { + color: rgb(84, 84, 255) +} + +.label-2 { + color: rgb(196, 196, 196) +} + +.result-row { + display: flex; + justify-content: space-between; + border-bottom: 1px solid grey; + padding-top: 15px; +} + +.sentence { + font-size: 15px; + color: white +} + +.spinner{ + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.spec.ts b/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.spec.ts new file mode 100644 index 0000000..bb8a41f --- /dev/null +++ b/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FacebookAnalysisComponent } from './facebook-analysis.component'; + +describe('FacebookAnalysisComponent', () => { + let component: FacebookAnalysisComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ FacebookAnalysisComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(FacebookAnalysisComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.ts b/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.ts new file mode 100644 index 0000000..906ccad --- /dev/null +++ b/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.ts @@ -0,0 +1,75 @@ +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'; +import { concatMap, tap } from 'rxjs'; +import { ChartConfiguration, ChartOptions, ChartType } from 'chart.js'; + +@Component({ + selector: 'app-facebook-analysis', + templateUrl: './facebook-analysis.component.html', + styleUrls: ['./facebook-analysis.component.scss'] +}) +export class FacebookAnalysisComponent implements OnInit { + + + comments!: string[]; + results: { label: number, score: number, sentence: string }[] = [] + analysisStart = false; + analysisLoading = false; + post!: 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: [] + }; + + get link(): FormControl { + return this.linkForm.controls['link'] as FormControl + } + + constructor(private router: Router, private fb: FormBuilder, private http: HttpClient) { } + + linkForm: FormGroup = this.fb.group({ + link: ['', Validators.required] + }) + + ngOnInit(): void { + } + + goToMainPage(): void { + this.router.navigate(['']) + } + + getComments() { + this.analysisStart = true + this.analysisLoading = false + let link = this.link.value + this.http.post('http://127.0.0.1:5000/scrapp_comments', { link: link }).pipe(concatMap((resp: any) => { + this.post = resp.post + return this.http.post('http://127.0.0.1:5000/get_sentiment_data', { sentences: resp.comments }).pipe(tap((resp: any) => { + console.log(resp) + this.results = resp.predictions + 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, } + ] + })) + })).subscribe({ + next: () => { + this.analysisLoading = true + } + }) + } + +} diff --git a/src/app/home-page/home-page/home-page.component.html b/src/app/home-page/home-page/home-page.component.html index 8350507..81394da 100644 --- a/src/app/home-page/home-page/home-page.component.html +++ b/src/app/home-page/home-page/home-page.component.html @@ -1,3 +1,7 @@ +
+
START YOUR JURNEY NOW
+ expand_more +