Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ documentation: ug

## Overview

Syncfusion Smart PDF Viewer provide built-in support for OpenAI and Azure OpenAI services. However, you can also integrate other AI services using the `IChatInferenceService` interface, which acts as a bridge between Smart PDF Viewer and your custom AI service.
Syncfusion Smart PDF Viewer provides built-in support for OpenAI and Azure OpenAI services. It can also connect to other AI providers through the `IChatInferenceService` interface, which acts as a bridge between the viewer and a custom AI service.


## IChatInferenceService Interface
Expand All @@ -26,13 +26,13 @@ public interface IChatInferenceService
```

This interface enables:
- Consistent communication between components and AI services
- Easy switching between different AI providers
- Consistent communication between components and AI services.
- Easy switching between different AI providers.


## Implemented AI Services

Here are examples of AI services integrated using the `IChatInferenceService` interface:
The following examples demonstrate AI services integrated using the `IChatInferenceService` interface:

| Service | Documentation |
|---------|---------------|
Expand All @@ -43,7 +43,7 @@ Here are examples of AI services integrated using the `IChatInferenceService` in

## Service Registration

Register your custom implementation in `Program.cs`:
Register the custom implementation in `Program.cs`:

```csharp
using Syncfusion.Blazor.AI;
Expand All @@ -52,16 +52,16 @@ builder.Services.AddSingleton<IChatInferenceService, YourCustomService>();

## Handling Error in Custom AI Service

Since the Custom AI service operates independently from the built-in AI service, error popups must be handled at the sample level. To capture error details, use a try-catch block within the request and response logic of the Custom AI service. Once an error message is received, pass it to the Smart PDF Viewer component, where it should be displayed in a dialog—replicating the behavior of the default built-in error popup.
Because a custom AI service operates independently of the built-in providers, error popups must be handled at the sample level. Capture errors with try-catch in the request/response flow, propagate the message to the Smart PDF Viewer component, and display it in a dialog to mirror the built-in behavior. For production scenarios, surface user-friendly messages while logging technical details.

### Capture Error in CustomService

Exceptions that occur while creating a request to the custom AI service are captured using try-catch blocks. The resulting error message is assigned to the DialogMessage property, and the OnDialogOpen event is triggered to notify other components such as Home so they can display the error in a dialog appropriately.
Use try-catch to capture exceptions during request creation or response handling. Assign the message to the `DialogMessage` property and raise `OnDialogOpen` to notify listening components to render the dialog. Consider mapping low-level exceptions to localized, user-friendly text.

## Step 1: Create a ErrorDialog Service

1.Create a new class file named ErrorDialogService.cs in your project
2.Add the following implementation:
1. Create a new class file named ErrorDialogService.cs in the project.
2. Add the following implementation:

```cs
public class ErrorDialogService
Expand Down Expand Up @@ -110,7 +110,7 @@ public class ErrorDialogService

### Step 3: Configure the Dialog Service

Configure the dialog service in `Program.cs` to enable error display functionality when a request or response to the Custom AI service fails. This setup ensures that any errors encountered during communication with the service can be shown in a dialog component.
Configure services in `Program.cs` to enable error display when a request or response to the custom AI service fails. This setup ensures any errors encountered during communication can be surfaced via a dialog component.

{% tabs %}
{% highlight c# tabtitle="~/Program.cs" hl_lines="1 2 5 6" %}
Expand Down Expand Up @@ -141,10 +141,10 @@ builder.Services.AddScoped<IChatInferenceService, MyCustomService>(sp =>

### Step 5: Show the Error Dialog

In the Smart PDF Viewer, error messages are displayed using SfDialogService. The component listens for the OnDialogOpen event from CustomService, and when triggered, the OpenDialog method calculates the dialog size dynamically based on the length of the error message and presents it accordingly. To ensure efficient resource management, the event subscription is properly disposed of when the component is no longer in use.
In Smart PDF Viewer, error messages are displayed using `SfDialogService`. The component subscribes to `OnDialogOpen` from the custom service and, when triggered, `OpenDialog` computes a dialog size based on message length and shows it. The subscription is disposed when the component is no longer in use.

1.Create a new class file named Home.razor.cs by right-clicking on the Pages folder, then selecting Add → Class.
2.Add the following implementation:
1. Create a new class file named Home.razor.cs by right-clicking the Pages folder, then selecting Add → Class.
2. Add the following implementation:

{% tabs %}
{% highlight cs tabtitle="~/Home.razor.cs" %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@ documentation: ug

# Getting Started with Smart PDF Viewer using DeepSeek AI

This guide demonstrates how to integrate DeepSeek's powerful AI capabilities with Syncfusion Smart PDF Viewer in your Blazor App.
This guide explains how to integrate DeepSeek AI with the Syncfusion Smart PDF Viewer in a Blazor app.

## Prerequisites

Before you begin, ensure you have:

* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
* DeepSeek account and API key (see setup instructions below)
* A supported .NET SDK and target framework for the installed Syncfusion Blazor version

### Setting Up DeepSeek

Expand All @@ -41,21 +42,23 @@ After completing this setup, you can:

## Install the following NuGet packages to your project:

open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install the following packages
Open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install the following packages:

1.[Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI).
2.[Microsoft.SemanticKernel](https://www.nuget.org/packages/Microsoft.SemanticKernel).
3.[Microsoft.SemanticKernel.Connectors.AzureOpenAI](https://www.nuget.org/packages/Microsoft.SemanticKernel.Connectors.AzureOpenAI).
1. [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI).
2. [Microsoft.SemanticKernel](https://www.nuget.org/packages/Microsoft.SemanticKernel).
3. [Microsoft.SemanticKernel.Connectors.AzureOpenAI](https://www.nuget.org/packages/Microsoft.SemanticKernel.Connectors.AzureOpenAI).

## Step 1: Create a Custom AI Service

To integrate DeepSeek with Syncfusion Smart PDF Viewer, we'll create a custom implementation of the `IChatInferenceService` interface. This interface acts as a bridge between Syncfusion Smart PDF Viewer and your AI service.

The `IChatInferenceService` interface is the bridge between Syncfusion Smart PDF Viewer and AI services:S
The `IChatInferenceService` interface is the bridge between Syncfusion Smart PDF Viewer and AI services:

1. Create a new file named `MyCustomService.cs`
2. Add the following implementation:

N> Ensure the project includes required using directives and valid XML documentation tags in custom code implementations.

{% tabs %}
{% highlight c# tabtitle="~/MyCustomService.cs" %}

Expand Down Expand Up @@ -148,9 +151,7 @@ var app = builder.Build();

N> [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-smart-pdf-viewer-examples/tree/master/Custom%20Services/DeepseekService)

N> Running Deepseek service may lead to slower response times due to system resource usage.
To accommodate this, you can configure the Syncfusion Smart PDF Viewer to disable timeout for AI assist view operations by setting the timeout to 0.
[Learn more](https://help.syncfusion.com/document-processing/pdf/smart-pdf-viewer/blazor/document-summarizer#timeout)
N> Running the DeepSeek service may lead to slower response times due to system resource usage. To accommodate this, configure the Syncfusion Smart PDF Viewer to disable timeout for AI assist view operations by setting the timeout to 0. [Learn more](https://help.syncfusion.com/document-processing/pdf/smart-pdf-viewer/blazor/document-summarizer#timeout)

## See also

Expand Down
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
layout: post
title: Deploy SfSmartPdfViewer in Blazor MAUI in windows | Syncfusion
description: Learn how to deploy SfSmartPdfViewer in Blazor MAUI Application on Windows in Syncfusion Blazor SfSmartPdfViewer component and much more details.
title: Use Smart PDF Viewer in Blazor MAUI in Windows | Syncfusion
description: Learn how to add and run the Syncfusion Blazor Smart PDF Viewer in a .NET MAUI Blazor app on Windows and Android, including package installation.
platform: document-processing
control: SfSmartPdfViewer
documentation: ug
---

# Using Smart PDF Viewer Component in the Blazor MAUI app

In this section, we'll guide you through the process of adding Syncfusion&reg; Blazor Smart PDF Viewer component to your Blazor Maui app. We'll break it down into simple steps to make it easy to follow.
This section describes how to add the Syncfusion&reg; Blazor Smart PDF Viewer component to a .NET MAUI Blazor app and run it on Windows and Android.

## Prerequisites

To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin).
To use MAUI project templates, install the Mobile development with .NET workload for Visual Studio. For detailed steps, see [Install .NET MAUI](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) on Windows in the Microsoft documentation.

## Create a new Blazor MAUI App in Visual Studio

Create a new Blazor MAUI app and by selecting the template **.NET MAUI Blazor Hybrid APP ** in VS.
Create a new .NET MAUI Blazor App in Visual Studio by selecting the template named **.NET MAUI Blazor Hybrid APP**.

## Install Smart PDF Viewer NuGet package in Blazor Maui App

Add the following NuGet packages into the Blazor Maui app.
Add the following NuGet packages to the Blazor MAUI app.

* [Syncfusion.Blazor.SfSmartPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfSmartPdfViewer)
* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
Expand Down Expand Up @@ -72,16 +72,20 @@ public static class MauiProgram

builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddSyncfusionBlazor();
return builder.Build();
}
}

{% endhighlight %}
{% endtabs %}

Note: Ensure the Syncfusion license is registered in the application before using Syncfusion components.

## To Configure Azure OpenAI Service

This section is required only when enabling AI-powered features in Smart PDF Viewer (such as document summarization, smart redaction, or smart fill). It is not required for basic PDF rendering.

In **Visual Studio**, Go to Tools → NuGet Package Manager → Package Manager Console. Run these commands one by one:

{% tabs %}
Expand All @@ -94,7 +98,7 @@ Install-Package Microsoft.Extensions.AI.OpenAI -Version 9.8.0-preview.1.25412.6
{% endhighlight %}
{% endtabs %}

In **Visual Studio Code**, Open terminal in VS Code. Run these commands:
In **Visual Studio Code**, open the terminal and run these commands:

{% tabs %}
{% highlight razor tabtitle="Package Manager" %}
Expand Down Expand Up @@ -136,11 +140,11 @@ var app = builder.Build();
{% endtabs %}

Here,
* **apiKey**: “Azure OpenAI API Key”;
* **deploymentName**: “Azure OpenAI deployment name”;
* **endpoint**: “Azure OpenAI deployment end point URL”;
* **apiKey**: “Azure OpenAI API Key”
* **deploymentName**: “Azure OpenAI deployment name”
* **endpoint**: “Azure OpenAI deployment endpoint URL”

For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-foundry/openai/how-to/create-resource?pivots=web-portal), then values for `apiKey`, `deploymentName` and `endpoint` will all be provided to you.
For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-foundry/openai/how-to/create-resource?pivots=web-portal), then the values for `apiKey`, `deploymentName`, and `endpoint` will be available.

## Adding stylesheet and script

Expand All @@ -161,7 +165,7 @@ Add the following stylesheet and script to the head section of the **~/wwwroot/i

## Add Smart PDF Viewer component

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer (Next Gen) component in the **~/Pages/Index.razor** file.
Add the Syncfusion Blazor Smart PDF Viewer component in the **~/Pages/Index.razor** file.

{% tabs %}
{% highlight razor %}
Expand All @@ -176,30 +180,30 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer (Next Gen) c

## Run on Windows

Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
Run the sample in Windows Machine mode. The application will run the Blazor MAUI app targeting Windows.

![Run Windows machine](gettingstarted-images/Windows-machine.png)
![Run MAUI app on Windows target](gettingstarted-images/Windows-machine.png)

Upon successfully launching the application, the PDF Viewer component will seamlessly render the specified PDF document within its interface.
After the application launches, the PDF Viewer component renders the specified PDF document within its interface.

![Blazor SfSmartPdfViewerPdfViewer Component](gettingstarted-images/Windows-maui-output.png)
![Blazor Smart PDF Viewer rendered on Windows](gettingstarted-images/Windows-maui-output.png)

## Run on Android

To run the PDF Viewer in a Blazor Android MAUI application using the Android emulator, follow these steps:
To run the PDF Viewer in a Blazor Android MAUI application using the Android emulator, follow these steps. These steps are required only when using local embeddings for AI features; they are not needed for basic PDF viewing.

1. Add the following Assets files in your Project by creating Assets folder(Platform -> Android -> Assets)
[model](https://github.com/SyncfusionExamples/blazor-smart-pdf-viewer-examples/blob/master/Common/LocalEmbeddingsModel/model.onnx) & [vocab](https://github.com/SyncfusionExamples/blazor-smart-pdf-viewer-examples/blob/master/Common/LocalEmbeddingsModel/vocab.txt)
1. Add the following asset files to the project by creating an Assets folder (Platforms → Android Assets):
[model](https://github.com/SyncfusionExamples/blazor-smart-pdf-viewer-examples/blob/master/Common/LocalEmbeddingsModel/model.onnx) and [vocab](https://github.com/SyncfusionExamples/blazor-smart-pdf-viewer-examples/blob/master/Common/LocalEmbeddingsModel/vocab.txt).

2. Right click the Added files and go to (Properties -> BuildAction) set as AndroidAsset.
3. Add the following code in your .csproj file
2. Right-click the added files and set Properties → Build Action to AndroidAsset.
3. Add the following entries to the project .csproj file:
```
<ItemGroup>
<AndroidAsset Include="Platforms\Android\Assets\model.onnx" />
<AndroidAsset Include="Platforms\Android\Assets\vocab.txt" />
</ItemGroup>
```
4. Add the following code in your MauiProgram.cs file
4. Add the following code in **MauiProgram.cs**:

{% tabs %}
{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="7 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25" %}
Expand All @@ -208,19 +212,19 @@ public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
...
builder.Services.AddSyncfusionBlazor();
...
builder.Services.AddSyncfusionBlazor();
#if ANDROID
EnsureModelExistsAsync();
EnsureModelExistsAsync();
#endif
return builder.Build();
}
private static async void EnsureModelExistsAsync()
{
string[] requiredFiles = { "model.onnx", "vocab.txt" };
string targetDir = Path.Combine(FileSystem.AppDataDirectory, "LocalEmbeddingsModel/default");
Directory.CreateDirectory(targetDir);
foreach (string fileName in requiredFiles)
}
private static async void EnsureModelExistsAsync()
{
string[] requiredFiles = { "model.onnx", "vocab.txt" };
string targetDir = Path.Combine(FileSystem.AppDataDirectory, "LocalEmbeddingsModel/default");
Directory.CreateDirectory(targetDir);
foreach (string fileName in requiredFiles)
{
string targetPath = Path.Combine(targetDir, fileName);
if (!File.Exists(targetPath))
Expand All @@ -230,18 +234,18 @@ public static class MauiProgram
await assetStream.CopyToAsync(fileStream);
}
}
}
}
}
{% endhighlight %}
{% endtabs %}

![Run Windows machine](gettingstarted-images/android-maui.png)
![Run MAUI app on Android emulator](gettingstarted-images/android-maui.png)

Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to Set up the Android emulator with Android Device Manager.

N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
N> If any errors occur while using the Android Emulator, see [Troubleshooting the Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).

![Blazor SfPdfViewer Component](gettingstarted-images/android-emulator.png)
![Blazor Smart PDF Viewer rendered on Android emulator](gettingstarted-images/android-emulator.png)

>[View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-smart-pdf-viewer-examples/tree/master/GettingStartedMAUI).

Expand Down
Loading