diff --git a/README.md b/README.md index 8481de3..c58c8a3 100644 --- a/README.md +++ b/README.md @@ -1,71 +1,103 @@ -# blogs-analyzer +# Blogs Analyzer -## Description +[![CI/CD Pipeline](https://github.com/NashTech-Labs/Blogs-Analyzer/actions/workflows/maven.yml/badge.svg)](https://github.com/NashTech-Labs/Blogs-Analyzer/actions/workflows/maven.yml) -Blogs-Analyzer Backend is a Spring Boot application built to search blogs from WordPress APIs based on username, blog ID, or text. Additionally, it integrates with Vertex AI for analyzing the quality of a particular blog post using machine learning capabilities. +Blogs-Analyzer Backend is a Spring Boot application designed to search blogs from WordPress APIs based on username, blog +ID, or text. Additionally, it integrates with Vertex AI to analyze the quality of blog posts using machine learning. +Blogs-Analyzer-UI is an Angular application used to display the results on a user interface or dashboard. ## Table of Contents -- [Description](#description) +- [Prerequisites](#prerequisites) - [Setup Instructions](#setup-instructions) - [Dependencies](#dependencies) - [Endpoints](#endpoints) - [Running the Application](#running-the-application) -## Setup Instructions +## Prerequisites + +Before starting, ensure you have the following installed and configured: -To set up and run the Blogs-Analyzer Backend locally, follow these steps: +- **Java**: Ensure Java 21 (or compatible version) is installed. +- **Angular CLI**: Install Angular CLI globally via npm. Ensure Angular 16 is installed. You can check your Angular + version by running `ng --version`. +- **Node.js**: Install Node.js version 18 or higher. You can download it from [here](https://nodejs.org/en/download/). +- **Maven**: Install Maven from [here](https://maven.apache.org/download.cgi). Maven 3.9+ is recommended. +- **Google Cloud SDK**: Install the Google Cloud SDK and authenticate with your Google Cloud account. Follow the + instructions [here](https://cloud.google.com/sdk/docs/install). Then, log in to Google Cloud locally using the + command: ```gcloud auth application-default login``` + +## Setup Instructions 1. **Clone the repository:** + ```bash git clone https://github.com/NashTech-Labs/Blogs-Analyzer.git cd blogs-analyzer -## Ensure Java 21 (or compatible version) is installed. - -## Install Maven (if not already installed): +## Dependencies -Download and install Maven from https://maven.apache.org/download.cgi +- **Spring Boot**: The core framework for building the backend application. +- **Vertex AI Client**: Used for integrating with Vertex AI for blog quality analysis. Ensure the necessary + configurations and credentials are set up to communicate with Vertex AI APIs. +- **WordPress API Client**: Allows communication with WordPress APIs to fetch blog data based on username, blog ID, or + text. -## Build the project: +## Endpoints -mvn clean install +1. #### Get a Specific Blog Post by ID -## Dependencies + - `GET /api/wordpress/posts/{id}` Retrieve a single blog post by its unique identifier (ID). -1) Spring Boot: Backend framework for building Java-based applications. -2) Vertex AI Client: Dependency for integrating with Vertex AI for blog quality analysis. Ensure the necessary configurations and credentials are set up to communicate with Vertex AI APIs. -3) WordPress API Client: Dependency for communicating with WordPress APIs to fetch blog data based on username, blog ID, or text. +2. #### Get All Blog Posts -## Endpoints + - `GET /api/wordpress/posts` Fetch a list of all available blog posts. -The backend exposes the following endpoints: +3. #### Get Blog Posts by Title -Search Blogs: + - `GET /api/wordpress/posts-by-title` Search for blog posts matching a given title. -GET /api/wordpress/posts/{id} -GET /api/wordpress/posts -GET /api/wordpress/posts-by-title -GET /api/wordpress/posts-by-author +4. #### Get Blog Posts by Author -Search blogs from WordPress APIs based on username, blog ID, or text. + - `GET /api/wordpress/posts-by-author` Retrieve blog posts authored by a specific user, identified by their + author-id. -## Analyze Blog Quality: +5. #### Get List of All Available Blog Posts -POST /api/gemini/v1/review + - `GET /api/wordpress` Fetch a list of all available blog posts and return the blog Id, title, status, url, author + name, and author id. -Endpoint to analyze the quality of a blog post using Vertex AI. Requires a JSON payload with blog content. +6. #### Analyze Blog Quality + - `POST /api/gemini/v1/review` This endpoint analyzes the quality of a blog post using Vertex AI. It requires a JSON + payload with blog content. ## Running the application: -bash -Copy code -java -jar target/blogs-analyzer.jar +1. Starting spring-boot application (For Backend API) + - Build the project: + ```bash + mvn clean install + ``` + - Running Application: + + Run the main class from Intellij + + or + ```bash + mvn spring-boot:run + ``` +2. Starting Angular Application (For Dashboard) + ```bash + ng serve + ``` + +Now, Application is running at the default port 4200. Dashboard URL: ```localhost:4200``` ## Access the API endpoints: Once the application is running locally, you can access the API endpoints using tools like Postman or curl. Verify API functionality: -Use the endpoints mentioned in the Endpoints section to verify functionality and interaction with WordPress APIs and Vertex AI. +Use the endpoints mentioned in the Endpoints section to verify functionality and interaction with WordPress APIs and +Vertex AI. diff --git a/blogs-analyzer-ui/README.md b/blogs-analyzer-ui/README.md index 6b7df89..d4dd12c 100644 --- a/blogs-analyzer-ui/README.md +++ b/blogs-analyzer-ui/README.md @@ -2,13 +2,13 @@ This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.2. -## Description +### Description -BlogsAnalyzerUI is a front-end project designed to search blogs based on username, blog ID, and blog text. +BlogsAnalyzerUI is a front-end project designed to search blogs based on username, blog ID, and blog text. The application allows users to navigate to another page where the blog content is displayed. Users can then click on the "Check Quality of Blog" button, which evaluates and displays the blog's quality. -## Table of Contents +### Table of Contents - [Development server](#development-server) - [Code scaffolding](#code-scaffolding) @@ -18,52 +18,51 @@ Users can then click on the "Check Quality of Blog" button, which evaluates and - [Setup Instructions](#setup-instructions) - [Further help](#further-help) -## Development server +### Development server -Run `ng serve` for a development server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +Run `ng serve` for a development server. Navigate to `http://localhost:4200/`. The application will automatically reload +if you change any of the source files. -## Code scaffolding +### Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +Run `ng generate component component-name` to generate a new component. You can also +use `ng generate directive|pipe|service|class|guard|interface|enum|module`. -## Build +### Build Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. -## Running unit tests +### Running unit tests Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). -## Running end-to-end tests +### Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a +package that implements end-to-end testing capabilities. -## Setup Instructions +### Setup Instructions To set up and run the project locally, follow these steps: 1. **Clone the repository:** ```bash git clone https://github.com/NashTech-Labs/Blogs-Analyzer.git - cd BlogsAnalyzerUI + cd blogs-analyzer-ui + ``` -## Install the dependencies: - -bash -Copy code -npm install - -## Run the development server: - -bash -Copy code -ng serve -Navigate to http://localhost:4200/ in your browser. The application will automatically reload if you change any of the source files. - -## Further help - -To get more help on the Angular CLI, use `ng help` or check out the [Angular CLI Overview and Command Reference](`https://angular.io/cli`) page. +2. **Install the dependencies:** + ```bash + npm install + ``` +3. **Run the development server:** + ```bash + ng serve + ``` + Navigate to http://localhost:4200/ in your browser. The application will automatically reload if you change any of + the source files. -## Backend Setup Instructions +### Further help -For instructions on setting up the backend, please refer to the [README.md](/README.md) \ No newline at end of file +To get more help on the Angular CLI, use `ng help` or check out +the [Angular CLI Overview and Command Reference](`https://angular.io/cli`) page. \ No newline at end of file diff --git a/blogs-analyzer-ui/src/app/dashboard/components/home/home.component.spec.ts b/blogs-analyzer-ui/src/app/dashboard/components/home/home.component.spec.ts index ba1b4a3..69c0d6f 100644 --- a/blogs-analyzer-ui/src/app/dashboard/components/home/home.component.spec.ts +++ b/blogs-analyzer-ui/src/app/dashboard/components/home/home.component.spec.ts @@ -1,6 +1,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { HomeComponent } from './home.component'; +import { RouterTestingModule } from "@angular/router/testing"; +import { HttpClientModule } from "@angular/common/http"; +import { MatCardModule } from "@angular/material/card"; +import { NO_ERRORS_SCHEMA } from "@angular/core"; describe('HomeComponent', () => { let component: HomeComponent; @@ -8,7 +12,9 @@ describe('HomeComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [HomeComponent] + declarations: [HomeComponent], + imports: [RouterTestingModule, HttpClientModule, MatCardModule], + schemas: [NO_ERRORS_SCHEMA] }); fixture = TestBed.createComponent(HomeComponent); component = fixture.componentInstance; diff --git a/blogs-analyzer-ui/src/app/dashboard/components/tabular-view/tabular-view.component.spec.ts b/blogs-analyzer-ui/src/app/dashboard/components/tabular-view/tabular-view.component.spec.ts index baefcce..ed80d9a 100644 --- a/blogs-analyzer-ui/src/app/dashboard/components/tabular-view/tabular-view.component.spec.ts +++ b/blogs-analyzer-ui/src/app/dashboard/components/tabular-view/tabular-view.component.spec.ts @@ -1,6 +1,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { TabularViewComponent } from './tabular-view.component'; +import { RouterTestingModule } from "@angular/router/testing"; +import { HttpClientModule } from "@angular/common/http"; +import { MatCardModule } from "@angular/material/card"; +import { NO_ERRORS_SCHEMA } from "@angular/core"; describe('TabularViewComponent', () => { let component: TabularViewComponent; @@ -8,7 +12,9 @@ describe('TabularViewComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TabularViewComponent] + declarations: [TabularViewComponent], + imports: [RouterTestingModule, HttpClientModule, MatCardModule], + schemas: [NO_ERRORS_SCHEMA] }); fixture = TestBed.createComponent(TabularViewComponent); component = fixture.componentInstance; diff --git a/blogs-analyzer-ui/src/app/dashboard/dashboard.component.spec.ts b/blogs-analyzer-ui/src/app/dashboard/dashboard.component.spec.ts index 119db49..0dd267f 100644 --- a/blogs-analyzer-ui/src/app/dashboard/dashboard.component.spec.ts +++ b/blogs-analyzer-ui/src/app/dashboard/dashboard.component.spec.ts @@ -1,8 +1,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { DashboardComponent } from './dashboard.component'; -import {HeaderComponent} from "./components/header/header.component"; -import {RouterTestingModule} from "@angular/router/testing"; +import { HeaderComponent } from "./components/header/header.component"; +import { RouterTestingModule } from "@angular/router/testing"; +import { HomeComponent } from "./components/home/home.component"; +import { HttpClientModule } from "@angular/common/http"; +import { NO_ERRORS_SCHEMA } from "@angular/core"; describe('DashboardComponent', () => { let component: DashboardComponent; @@ -10,8 +13,9 @@ describe('DashboardComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [DashboardComponent, HeaderComponent], - imports: [RouterTestingModule] + declarations: [DashboardComponent, HeaderComponent, HomeComponent], + imports: [RouterTestingModule, HttpClientModule], + schemas: [NO_ERRORS_SCHEMA] }); fixture = TestBed.createComponent(DashboardComponent); component = fixture.componentInstance; diff --git a/blogs-analyzer-ui/src/app/quality-check/quality-check.component.spec.ts b/blogs-analyzer-ui/src/app/quality-check/quality-check.component.spec.ts index ad0648a..45da67e 100644 --- a/blogs-analyzer-ui/src/app/quality-check/quality-check.component.spec.ts +++ b/blogs-analyzer-ui/src/app/quality-check/quality-check.component.spec.ts @@ -1,6 +1,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { QualityCheckComponent } from './quality-check.component'; +import { RouterTestingModule } from "@angular/router/testing"; +import { HttpClientModule } from "@angular/common/http"; +import { HeaderComponent } from "../dashboard/components/header/header.component"; +import { MatIconModule } from "@angular/material/icon"; +import { MatCardModule } from "@angular/material/card"; describe('QualityCheckComponent', () => { let component: QualityCheckComponent; @@ -8,7 +13,9 @@ describe('QualityCheckComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [QualityCheckComponent] + declarations: [QualityCheckComponent, HeaderComponent], + imports: [RouterTestingModule, HttpClientModule, MatIconModule, MatCardModule] + }); fixture = TestBed.createComponent(QualityCheckComponent); component = fixture.componentInstance; diff --git a/blogs-analyzer-ui/src/app/quality-check/quality-check.component.ts b/blogs-analyzer-ui/src/app/quality-check/quality-check.component.ts index 23b92c8..8aa7e6f 100644 --- a/blogs-analyzer-ui/src/app/quality-check/quality-check.component.ts +++ b/blogs-analyzer-ui/src/app/quality-check/quality-check.component.ts @@ -15,7 +15,7 @@ export class QualityCheckComponent { } ngOnInit(): void { - this.postData = history.state.data; + this.postData = history?.state?.data; } goBack(): void { @@ -23,10 +23,25 @@ export class QualityCheckComponent { } checkQuality() { - const prompt = 'Review blog with the following content' + this.postData; + const prompt = 'Review blog with the following content: ' + this.postData + + '\nParameters include fields like:\n' + + '- Plagiarism\n' + + '- Duplicate\n' + + '- Spelling Mistakes\n' + + '- Grammar\n' + + '- Overall SEO Report\n' + + '- Content Quality: Accuracy, Depth and Completeness, Clarity and Conciseness, Logical Flow\n' + + '- Technical Accuracy\n' + + '- Target Audience\n' + + '- Structure and Formatting\n' + + '- Code Examples and Illustrations\n' + + '- Links and References\n' + + '- Overall Feedback\n' + + '- Improvement Areas\n' + + 'Display result for respective percentages and feedback'; this.blogService.getBlogQuality(prompt).subscribe( response => { - this.qualityResult = response; + this.qualityResult = this.removeMarkdownFormatting(response); }, error => { console.error('Error:', error); @@ -34,4 +49,9 @@ export class QualityCheckComponent { } ); } + + removeMarkdownFormatting(text: string) { + // Replace Markdown bold formatting with empty string + return text.replace(/\*\*(.*?)\*\*/g, '$1'); + } } diff --git a/blogs-analyzer-ui/src/app/services/blog.service.spec.ts b/blogs-analyzer-ui/src/app/services/blog.service.spec.ts index 64866b7..38822f9 100644 --- a/blogs-analyzer-ui/src/app/services/blog.service.spec.ts +++ b/blogs-analyzer-ui/src/app/services/blog.service.spec.ts @@ -1,12 +1,20 @@ import { TestBed } from '@angular/core/testing'; import { BlogService } from './blog.service'; +import { QualityCheckComponent } from "../quality-check/quality-check.component"; +import { HeaderComponent } from "../dashboard/components/header/header.component"; +import { RouterTestingModule } from "@angular/router/testing"; +import { HttpClientModule } from "@angular/common/http"; describe('BlogService', () => { let service: BlogService; beforeEach(() => { - TestBed.configureTestingModule({}); + TestBed.configureTestingModule({ + providers: [BlogService], + declarations: [QualityCheckComponent, HeaderComponent], + imports: [RouterTestingModule, HttpClientModule] + }); service = TestBed.inject(BlogService); });