Summarize and Translate Reports in the Web Document Viewer

Nov 26, 2024
5 minutes to read

Follow instructions in this article to integrate AI-powered Summarize and Translate commands into the Web Document Viewer used on various platforms (ASP.NET Core, Angular, React, or Blazor).

View Example: ASP.NET Core Reporting - Summarize and Translate Reports Using Azure OpenAI

In Web Document Viewer, AI-powered capabilities are available in context menus and within the AI Operations tab. This tab includes two buttons designed to access the report document and process content:

Summarize: Uses generative AI to summarize report content and displays core insights associated with this report.
Translate: Uses AI services to translate report content to another language.

These actions are also available in context menu when you select report content. Note the AI Operations icon that floats next to the report page. Users can click it to invoke the context menu.

Web Document Viewer -- AI Operations Tab

Install NuGet Packages

Install the following NuGet packages:

DevExpress.AIIntegration.AspNetCore.Reporting
Microsoft.Extensions.AI.OpenAI, Azure.AI.OpenAI, Azure.Identity or Microsoft.Extensions.AI.Ollama based on your AI service preferences.

For the list of supported AI services and the corresponding prerequisites, refer to Supported AI Services in the following help topic: AI-powered Extensions for DevExpress Reporting.

Note

DevExpress AI-powered extensions follow the “bring your own key” principle. DevExpress does not offer a REST API and does not ship any built-in LLMs/SLMs. You need an active Azure/Open AI subscription to obtain the REST API endpoint, key, and model deployment name. These variables must be specified at application startup to register AI clients and enable DevExpress AI-powered Extensions in your application.

Register an AI Service on the Server

In the Program.cs file, call the AddDevExpressAI method to register the AI service.

To enable the DevExpress AI-powered extension for the Web Document Viewer, call the AddWebReportingAIIntegration method. Use the DxReportingWebAIOptions object to specify options for the Summarize operation:

using Microsoft.Extensions.AI;
using System;

IChatClient asChatClient = new Azure.AI.OpenAI.AzureOpenAIClient(new Uri(AzureOpenAIEndpoint),
     new System.ClientModel.ApiKeyCredential(AzureOpenAIKey))
.AsChatClient("GPT4o");

builder.Services.AddSingleton(asChatClient);
builder.Services.AddDevExpressAI((config) => {
    config.AddWebReportingAIIntegration(options =>
        options.SummarizationMode = SummarizationMode.Abstractive);
});

Enable the DevExpress AI-powered Extension on the Client

Set the AIServicesEnabled property to true to enable AI Operations tab and the Summarize and Translate context menu items in the Web Document Viewer. Use the AILanguages property to specify the languages for summarize and translate operations.

The following sections enable the AI-powered extension on the client depending on the platform:

ASP.NET Core

In the OnInitializing event handler, set the AIServicesEnabled property to true and use the AILanguages property to specify languages for Summarize and Translate operations:

<script>
    function OnInitializing(e, s) {
        DevExpress.Reporting.Viewer.Settings.AIServicesEnabled(true);
        DevExpress.Reporting.Viewer.Settings.AILanguages([
            { key: 'en', text: 'English' },
            { key: 'es', text: 'Spanish' },
            { key: 'de', text: 'German' }
        ]);
    }
</script>

@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .ClientSideEvents((configure) => { configure.OnInitializing("OnInitializing"); })
        .Height("100%")
        .Bind(Model);
    @viewerRender.RenderHtml()
}

Angular

In the OnInitializing event handler, set the AIServicesEnabled property to true and use the AILanguages property to specify languages for Summarize and Translate operations:

report-viewer.html
report-viewer.ts

<dx-report-viewer [reportUrl]="reportUrl" height="800px">
    <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
    <dxrv-callbacks (OnInitializing)="OnInitializing()"></dxrv-callbacks>
</dx-report-viewer>

import { Component, ViewEncapsulation } from '@angular/core';
import { AILanguages, AIServicesEnabled } from 'devexpress-reporting/dx-webdocumentviewer'

@Component({
  // ...
})
export class AppComponent {
  // ...
  OnInitializing() {
    AIServicesEnabled(true);
    AILanguages([
        { key: 'en', text: 'English' },
        { key: 'es', text: 'Spanish' },
        { key: 'de', text: 'German' }
    ]);
  }      
}

React

In the OnInitializing event handler, set the AIServicesEnabled property to true and use the AILanguages property to specify languages for Summarize and Translate operations:

import ReportViewer, { RequestOptions, Callbacks } from 'devexpress-reporting-react/dx-report-viewer';
import { AILanguages, AIServicesEnabled } from 'devexpress-reporting/dx-webdocumentviewer'

function App() {
  const OnInitializing = ({ args }: { args: any }): void => {
    AIServicesEnabled(true);
    AILanguages([
        { key: 'en', text: 'English' },
        { key: 'es', text: 'Spanish' },
        { key: 'de', text: 'German' }
    ]);
  }
  return (
  <ReportViewer reportUrl="TestReport">
    <RequestOptions host="https://localhost:60238/" invokeAction="DXXRDV" />
    <Callbacks OnInitializing={OnInitializing} />
  </ReportViewer>        
  )
}

export default App

Blazor

You can enable the DevExpress AI-powered extension for JavaScript-based Document Viewer in a Blazor Server or Blazor WebAssembly Hosted application.

Tip

For instructions related to the Native Report Viewer for Blazor (the DxReportViewer component), refer to the following topic: Summarize and Translate Reports in the Blazor Report Viewer.

To enable this functionality in a Blazor Server application, follow the steps below:

In the in the* wwwroot/js* folder, create a viewer_customization.js file with the following content:

window.DocumentViewer = {
    OnInitializing: function (s, e) {
        DevExpress.Reporting.Viewer.Settings.AIServicesEnabled(true);
        DevExpress.Reporting.Viewer.Settings.AILanguages([
            { key: 'en', text: 'English' },
            { key: 'es', text: 'Spanish' },
            { key: 'de', text: 'German' }
        ]);
    }
}

Reference the created file in the _Layout.cshtml file:

<!--  -->
<script src="~/js/viewer_customization.js"></script>
<!--  -->

In the DocumentViewer.razor page, handle the OnInitializing event as follows:

@page "/documentviewer"

<DxDocumentViewer ReportName="TestReport" Height="calc(100vh - 130px)" Width="100%">
    <DxDocumentViewerCallbacks OnInitializing="DocumentViewer.OnInitializing"/>
</DxDocumentViewer>