Updated prompt and pie chart

blogs-analyzer-ui/package.json

@@ -25,6 +25,7 @@
     "bootstrap": "^5.3.0",
     "highcharts": "^11.4.3",
     "highcharts-angular": "^4.0.0",
+    "ngx-markdown": "^16.0.0",
     "rxjs": "~7.8.0",
     "sonarqube-scanner": "^3.0.1",
     "tslib": "^2.3.0",

blogs-analyzer-ui/src/app/app.module.ts

@@ -18,6 +18,7 @@ import { QualityCheckComponent } from './quality-check/quality-check.component';
 import { MatButtonModule } from "@angular/material/button";
 import { ReportComponent } from './report/report.component';
 import { HighchartsChartModule } from "highcharts-angular";
+import { MarkdownModule } from "ngx-markdown";
 
 @NgModule({
   declarations: [
@@ -40,7 +41,8 @@ import { HighchartsChartModule } from "highcharts-angular";
     MatCardModule,
     MatIconModule,
     MatButtonModule,
-    HighchartsChartModule
+    HighchartsChartModule,
+    MarkdownModule.forRoot(),
   ],
   providers: [],
   bootstrap: [AppComponent]

blogs-analyzer-ui/src/app/quality-check/quality-check.component.html

@@ -16,11 +16,12 @@ <h2>HTML Preview</h2>
     <div class="charts-grid">
         <div *ngFor="let result of qualityResults" class="chart-item">
             <app-report
-                    [chartLabels]="[result.label]"
+                    [actualLabel]="[result.originalLabel]"
+                    [oppositeLabel]="[result.oppositeLabel]"
                     [chartData]="[result.value]"
-                    [chartTitle]="result.label">
+                    [chartTitle]="result.originalLabel">
             </app-report>
-            <div class="comment">{{ result.comment }}</div>
+            <div class="comment" [innerHTML]="result.comment | markdown"></div>
         </div>
     </div>
 </div>

blogs-analyzer-ui/src/app/quality-check/quality-check.component.ts

@@ -9,8 +9,23 @@ import { BlogService } from "../services/blog.service";
 })
 export class QualityCheckComponent {
   postData: any;
-  qualityResults: { label: string, value: number, comment: string }[] = [];
-
+  qualityResults: { originalLabel: string; oppositeLabel: string; value: number; comment: string }[] = [];
+  labels = [
+    {actual: 'Duplicate Content', opposite: 'Original Content'},
+    {actual: 'Spelling Mistakes', opposite: 'Correct Spelling'},
+    {actual: 'Grammatical Errors', opposite: 'Proper Grammar'},
+    {actual: 'Overall SEO Report', opposite: 'SEO Optimization'},
+    {actual: 'Accuracy', opposite: 'Inaccuracy'},
+    {actual: 'Depth and Completeness', opposite: 'Superficiality'},
+    {actual: 'Clarity and Conciseness', opposite: 'Ambiguity and verbosity'},
+    {actual: 'Logical Flow', opposite: 'Disorganization'},
+    {actual: 'Technical Accuracy', opposite: 'Inaccuracy'},
+    {actual: 'Targeted Audience', opposite: 'General Audience'},
+    {actual: 'Structure and Formatting', opposite: 'Poor Structure and Formatting'},
+    {actual: 'Code Examples and Illustrations', opposite: 'Lack of Code Examples and Illustrations'},
+    {actual: 'Links and References', opposite: 'Missing Links and References'},
+    {actual: 'Overall Feedback', opposite: 'No Feedback'}
+  ];
 
   constructor(private location: Location, private blogService: BlogService) {
   }
@@ -24,21 +39,12 @@ export class QualityCheckComponent {
   }
 
   checkQuality() {
-    const prompt = 'Review blog with the following content: ' + this.postData +
-      '\nParameters include fields like:\n' +
-      '    - Duplicate Content\n' +
-      '    - Spelling Mistakes\n' +
-      '    - Grammatical Errors\n' +
-      '    - Overall SEO Report\n' +
-      '    - Content Quality: Accuracy, Depth and Completeness, Clarity and Conciseness, Logical Flow\n' +
-      '    - Technical Accuracy\n' +
-      '    - Targeted Audience\n' +
-      '    - Structure and Formatting\n' +
-      '    - Code Examples and Illustrations\n' +
-      '    - Links and References\n' +
-      '    - Overall Feedback\n' +
-      '    - Improvement Areas\n' +
-      'Display result in tabular view for respective percentages and feedback at that line no';
+
+    const prompt = `Review blog with the following content: ${this.postData}
+    Parameters include fields like:
+    ${this.labels.map(label => `- ${label.actual}`).join('\n')}
+    Display result in tabular view for respective percentages and accurate feedback;`;
+
     this.blogService.getBlogQuality(prompt).subscribe(
       response => {
         this.qualityResults = this.parseResponse(response);
@@ -49,14 +55,24 @@ export class QualityCheckComponent {
     );
   }
 
-  parseResponse(response: string): { label: string, value: number, comment: string }[] {
+  parseResponse(response: string): { originalLabel: string; oppositeLabel: string; value: number; comment: string }[] {
     const rows = response.split('\n').slice(2);
-    return rows.map(row => {
+    const pairedResults: { originalLabel: string; oppositeLabel: string; value: number; comment: string }[] = [];
+
+    rows.forEach(row => {
       const cols = row.split('|').map(col => col.trim());
-      const label = cols[1];
-      const percentage = parseFloat(cols[2].replace('%', ''));
-      const comment = cols[3];
-      return {label, value: isNaN(percentage) ? 0 : percentage, comment};
-    }).filter(result => result.label && !isNaN(result.value));
+      if (cols.length < 3) return;
+
+      let label = cols[1]?.replace(/\*\*/g, '');
+      let percentage = parseFloat(cols[2]?.replace('%', ''));
+      let comment = cols?.slice(3).join(' ').trim();
+
+      const oppositeIndex = this.labels.findIndex(l => l.actual === label);
+      if (oppositeIndex !== -1) {
+        const oppositeLabel = this.labels[oppositeIndex].opposite;
+        pairedResults.push({originalLabel: label, oppositeLabel, value: percentage, comment});
+      }
+    });
+    return pairedResults;
   }
 }

blogs-analyzer-ui/src/app/report/report.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import * as Highcharts from 'highcharts';
 import { Options } from "highcharts";
 
@@ -7,8 +7,9 @@ import { Options } from "highcharts";
   templateUrl: './report.component.html',
   styleUrls: ['./report.component.scss']
 })
-export class ReportComponent {
-  @Input() chartLabels: string[] = [];
+export class ReportComponent implements OnChanges {
+  @Input() actualLabel: string[] = [];
+  @Input() oppositeLabel: string[] = [];
   @Input() chartData: number[] = [];
   @Input() chartTitle: string = '';
 
@@ -24,6 +25,11 @@ export class ReportComponent {
   }
 
   updateChartOptions() {
+    const pairedData = this.chartData.map(value => {
+      const emptyValue = 100 - value;
+      return [value, emptyValue];
+    });
+
     this.chartOptions = {
       chart: {
         type: 'pie'
@@ -41,11 +47,17 @@ export class ReportComponent {
       },
       series: [{
         type: 'pie',
-        data: this.chartLabels.map((label, index) => ({
-          name: label,
-          y: this.chartData[index]
-        }))
-      }]
-    };
+        data: this.actualLabel.map((label, index) => ({
+          name: `${label}`,
+          y: pairedData[index][0],
+        })).concat(this.oppositeLabel.map((label, index) => ({
+          name: `${label}`,
+          y: pairedData[index][1],
+        })))
+      }],
+      tooltip: {
+        pointFormat: '<b>{point.percentage:.1f}%</b>'
+      },
+    }
   }
 }