Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/copyleaks/ng-web-report

Copyleaks Web Report is an easy-to-use Angular module from Copyleaks for quick plagiarism and AI detection. It offers a simple and adaptable way to show how original submitted texts or files are through clear reports.
https://github.com/copyleaks/ng-web-report

ai ai-detection angular content copyleaks copyleaks-api html javascript originality plagiarism plagiarism-checker plagiarism-detection scss typescript

Last synced: 6 months ago
JSON representation

Copyleaks Web Report is an easy-to-use Angular module from Copyleaks for quick plagiarism and AI detection. It offers a simple and adaptable way to show how original submitted texts or files are through clear reports.

Awesome Lists containing this project

README 

          
# Copyleaks Web Report



Web Report Demo








**Copyleaks Web Report** is an advanced Angular module designed to integrate plagiarism and AI detection reporting seamlessly. This module, developed by Copyleaks, offers a user-friendly, engaging, and flexible interface for presenting plagiarism and AI content reports; it is designed to showcase the authenticity and uniqueness of submitted files or text.



## Key Features



- **Customizable Layouts**: Various layout options for report display.

- **Responsive Design**: Adapts to different screen sizes for a consistent user experience.

- **API Integration**: Configurable endpoints for efficient data retrieval.

- **Accessibility Focused**: Inclusive design for a wider range of users.

- **Error Handling**: Effective management of data retrieval errors.



---



## Installation



To install, run:

`npm install @copyleaks/ng-web-report --save`



---



## Angular Version Support



This module is compatible with **Angular v13**. Ensure your application is using Angular version 13 to avoid compatibility issues.



## Peer Dependencies



The module has several peer dependencies that need to be installed in your project:



- `@angular/localize`: ^13.1.1

- `@angular/material`: ^13.1.1

- `@angular/flex-layout`: ^13.0.0-beta.36

- `scroll-into-view-if-needed`: ^2.2.28

- `ngx-skeleton-loader`: ^5.0.0



Ensure these dependencies are present in your project to guarantee optimal functionality.



---



## Integration



Import the module in your Angular app:



```typescript

import { CopyleaksWebReportModule } from '@copyleaks/ng-web-report';



@NgModule({

	imports: [

		CopyleaksWebReportModule,

		// other imports

	],

})

export class AppModule {}

```



## Using the Component



Add the component in your HTML templates:



```html



```



### Inputs



- **`reportEndpointConfig` - Required**: (`IClsReportEndpointConfigModel`) Configures the data endpoints for fetching the report data, including URLs and headers.

- **`showDisabledProducts` - Optional**: (`boolean`) A flag determining whether to show disabled products in the report interface. The default value is `false`.



### Outputs



- **`onReportRequestError`**: (`EventEmitter`) Emits an event with HTTP request data when any request to update or fetch report data fails, allowing for custom error handling.

- **`onCompleteResultUpdate`**: (`EventEmitter`) Emits an event when the complete report results data is successfully retrieved and also when there is an update in the filter options (which are part of the complete results model). This ensures users are appropriately informed about the availability of complete results and any changes in the filter dialog data.



### Note on Report View Parameters



The Copyleaks Web Report Module interprets several query parameters to tailor the report view:



- **`contentMode`** (string): Determines the content view type. It accepts 'text' or 'html', which will only change the content view mode **if the selected mode is available**

- **`sourcePage`** & **`suspectPage`** (number): Represent the page number in text view pagination, starting from 1.

- **`suspectId`** (string): The identifier of the selected matching result.

- **`alertCode`** (string): The code of the selected alert.



These parameters allow for the dynamic and contextual presentation of the plagiarism report, adapting to user-specific requirements.



---



## Configuration and Models



### IClsReportEndpointConfigModel



This model is used for configuring the API endpoints for the plagiarism report data:



- **`crawledVersion`**: Endpoint details for fetching the crawled version of scanned content.

- **`completeResults`**: Endpoint details for fetching complete scanning results.

- **`result`**: This specifies the endpoint for retrieving individual scan results. It's important to include `{RESULT_ID}` within the endpoint URL, which acts as a placeholder for the unique identifier of each result and ensures that the correct result is fetched based on its specific ID.



#### IEndpointDetails



A nested interface in `IClsReportEndpointConfigModel` that defines the structure of each endpoint detail object:



- **`url`**: The URL of the API endpoint.

- **`headers`**: A dictionary of headers for the API call.



**Example Usage:**



```typescript

import { IClsReportEndpointConfigModel, IEndpointDetails } from '@copyleaks/ng-web-report';



// Example endpoint details

const crawledVersionEndpoint: IEndpointDetails = {

	url: 'https://api.yourservice.com/crawled-version',

	headers: {

		Authorization: 'Bearer your-auth-token',

		'Content-Type': 'application/json',

	},

};



const completeResultsEndpoint: IEndpointDetails = {

	url: 'https://api.yourservice.com/complete-results',

	headers: {

		Authorization: 'Bearer your-auth-token',

		'Content-Type': 'application/json',

	},

};



const resultEndpoint: IEndpointDetails = {

	url: 'https://api.yourservice.com/result/{RESULT_ID}',

	headers: {

		Authorization: 'Bearer your-auth-token',

		'Content-Type': 'application/json',

	},

};



// Configuring the IClsReportEndpointConfigModel

const reportEndpointConfig: IClsReportEndpointConfigModel = {

	crawledVersion: crawledVersionEndpoint,

	completeResults: completeResultsEndpoint,

	result: resultEndpoint,

};



// Use `reportEndpointConfig` in your application where needed

```



## Event Handling



Implement the following event handling methods in your Angular component:



```typescript

import { ICompleteResults, ReportHttpRequestErrorModel } from '@copyleaks/ng-web-report';



...



handleError(error: ReportHttpRequestErrorModel): void {

  // Your error handling logic here

}



handleUpdate(results: ICompleteResults): void {

  // Your logic for processing report updates here

}

```



---



## Advanced Usage



For advanced users, the Copyleaks Web Report offers extensive customization and control over the plagiarism report presentation and data handling. Here are some advanced techniques:



### Custom Templates and Content Injection



Utilize Angular's powerful templating capabilities to create custom layouts and display components for your plagiarism reports, enhancing the user interface and experience.



- **Adding Custom Actions with ``**:

  Inject custom content directly into the Copyleaks report component. Use the `` tag to insert fully custom report actions (both logic and style) into the report's interface.



  Example Usage:



  ```html

  

  	

  		

  	

  

  ```



  This feature allows for a high degree of customization, enabling users to tailor the report actions to their specific needs.



- **Adding Custom Tabs with ``**:

  Enhance your plagiarism report with additional information and features using custom tabs. The `` component allows for the integration of custom tabs alongside the standard AI and plagiarism tabs. Each tab is represented by a ``, which includes a title and content area defined by `` and ``. This setup lets you present additional, tailored content within the report's interface.



  Example Usage:



  ```html

  

  	

  		

  			Here the title goes

  			Here the content goes

  		

  	

  

  ```



  The `cr-custom-tab-item` component includes a `flexGrow` input, which sets the `flex-grow` CSS property for the tab. This property determines the tab's width relative to other tabs in the Copyleaks report:

  **`[flexGrow]`**: A numeric value that defines the proportion of the available space inside the flex container that the tab should take up. For example, setting `[flexGrow]="0.3"` on a custom tab and `0.5` on each of the Plagiarism and AI tabs means the custom tab will take up 30% of the available space.



- **Adding Custom Results Section with ``**:

  The `` component allows extensive customization of the results section in the Copyleaks plagiarism report. Depending on the use case, it can either complement the existing results or replace them entirely.



  Example Usage:



  ```html

  

  	

  		

  			

  		

  	

  

  ```



  The `reportView` input, tied to the `ECustomResultsReportView` enum, dictates the display mode of the custom results section:



  - **`ECustomResultsReportView.Partial` (value `0`)**: When set to `Partial`, the custom results component appears beneath the standard report results.

  - **`ECustomResultsReportView.Full` (value `1`)**: When set to `Full`, the custom results component replaces the entire standard results section



  The `cr-custom-results-box-content` is used to define the content of the custom results section. Regardless if the `cr-custom-results-box-content` is added, this custom results component is displayed with a background animation, making it visually distinct and engaging.



- **Customizing Empty Results with ``**:

  The `` component is designed to provide a custom view for cases where no results are found in the Copyleaks plagiarism report. This allows for a more tailored user experience, particularly when you want to provide specific information or guidance in the event of an empty result set.



  ```html

  

  	

  		

  	

  

  ```



- **Customizing Locked Results with `lockedResultTemplateRef`**:

  The `lockedResultTemplateRef` input of the `copyleaks-web-report` component enables the customization of locked result presentations within the plagiarism report. This feature is particularly useful for providing a tailored user experience for results that are not immediately accessible or require specific actions to unlock. Note that the default locked result view will be shown if the template reference isn't passed to the web report component.



  ##### **Usage**:



  The `lockedResultTemplateRef` is a template reference variable you can define in your Angular templates. You can then pass this template to the `copyleaks-web-report` component to customize how locked results are displayed.



  Example Usage:



  ```html

  

  	

  



  

  ```



### Adding Real-Time Results



The `CopyleaksWebReportModule` includes the `ReportRealtimeResultsService`, a powerful feature that enables the addition of new results to the real-time view of the plagiarism report. This capability benefits applications where plagiarism check results are received incrementally and must be displayed to the user as they arrive**.**



##### **Usage**:



The `ReportRealtimeResultsService` is instrumental when you have the real-time view enabled (which is available if the `progress` endpoint is included in your configuration model). It allows for a dynamic and interactive experience by updating the report with new results as they become available.



The key function in this service is `pushNewResults`, which takes an array of `ResultPreview` objects and adds them to the existing results in the real-time view. This function can be used to incrementally update the report, ensuring that the latest results are always displayed.



Example Usage:



```typescript

import { ReportRealtimeResultsService, ResultPreview } from '@copyleaks/ng-web-report';



@Component({...})

export class YourComponent {

  constructor(private _realtimeResultsService: ReportRealtimeResultsService) {}



  addNewResults(newResults: ResultPreview[]): void {

    this._realtimeResultsService.pushNewResults(newResults);

  }

}

```



## Accessibility



The [VPAT report (PDF)](https://copyleaks.com/accessibility/) can be downloaded from Copyleaks Commitment to Accessibility page