Summarize and Translate Reports in the Blazor Report Viewer
- 5 minutes to read
Follow the instructions in this topic to integrate AI-powered Summarize, Translate, and Translate Inline commands into the native Report Viewer for Blazor. This tutorial uses Azure OpenAI.
In Blazor Report Viewer, AI-powered capabilities are available in the Quick Actions menu and within the AI Operations tab. The following AI-powered features are available:
- Summarize
- Uses generative AI to summarize report content and displays core insights associated with this report. The generated summary appears in the AI Operations tab.
- Translate
- Uses AI services to translate report content to another language. The generated translation appears in the AI Operations tab.
- Translate Inline
- Uses AI services to translate report content to another language and displays the translation directly within the previewed document. You can export or print the translated document.
#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 topic: Get Started with Blazor Reporting.
#Install NuGet Packages
Install the following NuGet packages for Azure OpenAI service:
- DevExpress.AIIntegration.Blazor.Reporting.Viewer
- Microsoft.Extensions.AI.OpenAI (Version=”9.5.0-preview.1.25265.7”)
- Azure.AI.OpenAI (Version=”2.2.0-beta.4”)
For the list of supported AI services and their 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. Dev
#Register an AI Service and Activate Extensions
Call the following methods on application startup to enable AI-powered Summarize and Translate actions in Blazor Report Viewer:
- AddDevExpressAI
- Adds DevExpress AI-related services to the application service collection.
- AddBlazorReportingAIIntegration
- Adds AI-powered functionality to the native Report Viewer for Blazor.
- AddTranslation
Activates AI-powered content translation functionality in the native Report Viewer for Blazor.
Use the following methods to specify translation options:
-
Specifies the language lists (a list of LanguageInfo objects) for translation operations.
-
Enables the Translate quick action and Translate action in the AI Operations panel.
-
Enables the Translate Inline quick action.
-
Specifies output randomness.Lower temperatures yield more predictable and focused outputs, while higher temperatures produce more diverse and creative responses.
-
- AddSummarization
Activates AI-powered summarization functionality in the native Report Viewer for Blazor.
Use the following methods to specify summarization options:
-
Specifies the summarization mode.
-
Specifies output randomness.Lower temperatures yield more predictable and focused outputs, while higher temperatures produce more diverse and creative responses.
If you use only the summarization functionality in your application and need to specify the language list, use the AITranslationConfigurationBuilder.SetLanguages method.
-
The following snippet registers an Azure OpenAI service and activates AI-powered summarization and translation functionality for Blazor Report Viewer:
using Azure;
using Azure.AI.OpenAI;
using DevExpress.AIIntegration;
using DevExpress.AIIntegration.Reporting.Common.Models;
using DevExpress.Blazor.Reporting;
using Microsoft.Extensions.AI;
// ...
string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
string deploymentName = "MODEL_NAME"
IChatClient asChatClient = new AzureOpenAIClient(new Uri(azureOpenAIEndpoint),
new System.ClientModel.ApiKeyCredential(azureOpenAIKey))
.GetChatClient(deploymentName).AsIChatClient();
builder.Services.AddChatClient(asChatClient);
builder.Services.AddDevExpressAI((config) => {
config.AddBlazorReportingAIIntegration(cfg =>
cfg.AddSummarization(summarizeOptions =>
summarizeOptions.SetSummarizationMode(SummarizationMode.Abstractive)
.Temperature = 0.1f)
.AddTranslation(translateOptions =>
translateOptions.SetLanguages(new List<LanguageInfo> {
new LanguageInfo { Text = "German", Id = "de-DE" },
new LanguageInfo { Text = "Spanish", Id = "es-ES" }
})
.EnableTranslation()
.EnableInlineTranslation())
);
});
#AI-powered Commands in Report Viewer
Once you activate the AI-powered Translate and Summarize features, the AI Operations tab appears in the tab panel, and AI-powered Quick Actions menu items are available to users:
| AI Operations tab | AI-powered Quick Actions |
|---|---|
 |
 |
#Summarize and Translate Reports
The Summarize and Translate commands are available in the Quick Actions menu and AI Operations tab.
The AI Operations tab allows you to do the following:
- Select input text range for summarization and translation operations (document, a selected page, or selected report content)
- Select a language for summarization and translation operations
- Review and copy operation output
The Quick Actions menu allows you to summarize and translate selected report content. Operation output is displayed in the AI Operations tab.
#Translate Reports Inline
The Translate Inline command is available in the Quick Actions menu. This command translates text directly in the document preview. Select the required content and use the Translate Inline command from the Quick Actions menu. To translate the current page or entire document, use the Quick Actions menu in the report’s upper right corner.
Each page that contains AI-generated translations is marked with the AI-generated Translation label:
To cancel translation for the entire document, use the Revert to Original command from the Quick Actions menu:
To cancel translation for a specific page, use the Revert To Original button below the AI-generated Translation label.
You can export or print the translated document. The following message appears before you export a document with an AI-generated translation:
“You are about to export a document that contains AI-generated translations. Do you want to proceed?”