Summarize and Translate Reports in the Blazor Report Viewer

Nov 18, 2024
3 minutes to read

The topic describes how to integrate AI-powered Summarize and Translate commands into the Native Report Viewer for Blazor.

View Example: Summarize and Translate Reports Using Azure OpenAI

In Blazor Report 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.

Blazor Report Viewer -- AI Operations Tab

Create or Open an App with DevExpress Reporting

You can open an existing application that contains a DxReportViewer component. To create a new application, refer to the following help article: Get Started with Blazor Reporting.

Install NuGet Packages

Install the following NuGet packages:

DevExpress.AIIntegration.Blazor.Reporting.Viewer
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

Call the AddDevExpressAI method at application startup to register an AI service.

To enable the DevExpress AI-powered extension for Blazor Report Viewer, call the AddBlazorReportingAIIntegration method. Use DxBlazorReportingAIOptions to specify the following options for summarize and translate operations:

SummarizationMode: Specifies the summarization mode.
Languages: Specifies the language collection for Translate and Summarize operations.

The following code snippet registers an Azure OpenAI service and enables the AI-powered extension for the Report Viewer:

Program.cs

using Azure;
using Microsoft.Extensions.AI;
using DevExpress.Blazor.Reporting;

// ....
string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
string deploymentName = "gpt4o";
//...
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.AddBlazorReportingAIIntegration(options => {
        options.Languages = new List<LanguageItem>() {
            new LanguageItem() { Key = "de", Text = "German" },
            new LanguageItem() { Key = "es", Text = "Spanish" },
            new LanguageItem() { Key = "en", Text = "English" }
        };
        options.SummarizationMode = SummarizationMode.Abstractive;
    });
});