Summarize and Translate Reports in the Web Document Viewer

Jan 07, 2025
5 minutes to read

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

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

Run Demo: ASP.NET Core Reporting - Summarize and Translate Reports

In Web Document Viewer, AI-powered capabilities are available in the Quick Actions menu 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.

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 the Supported AI Services section of 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 the AI Operations tab and the Summarize and Translate quick actions in the Web Document Viewer. Use the AILanguages property to specify the languages for summarize and translate operations.

The following sections describe how to enable the AI-powered extension on the client based on 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 a 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 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>