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 @@ -43,7 +43,7 @@ The following examples demonstrate AI services integrated using the `IChatInfere

## Service Registration

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

```csharp
using Syncfusion.Blazor.AI;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -371,7 +371,7 @@ N> [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-smart-pd

## Integration Notes

To apply these templates, include them within the [`AssistViewSettings`]((https://help.syncfusion.com//cr/blazor/Syncfusion.Blazor.SmartPdfViewer.AssistViewSettings.html)) of the [`SfSmartPdfViewer`](https://help.syncfusion.com//cr/blazor/Syncfusion.Blazor.SmartPdfViewer.SfSmartPdfViewer.html).
To apply these templates, include them within the [AssistViewSettings]((https://help.syncfusion.com//cr/blazor/Syncfusion.Blazor.SmartPdfViewer.AssistViewSettings.html)) of the [SfSmartPdfViewer](https://help.syncfusion.com//cr/blazor/Syncfusion.Blazor.SmartPdfViewer.SfSmartPdfViewer.html).

## See also

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ After completing this setup, you can:
The `UserTokenService` is responsible for generating and managing per-user quotas. These tokens are used to authenticate and throttle requests to the custom Azure OpenAI service based on user identity.

### Implementation Steps
1. Create a new class file named `UserTokenService.cs` in your project
1. Create a new class file named **UserTokenService.cs** in your project
2. Add the following implementation:

{% tabs %}
Expand Down Expand Up @@ -156,7 +156,7 @@ public class UserTokenInfo
## Step 2: Implement User Token API Controller
The `UserTokensController` class exposes endpoints to check and update user tokens. This enables secure and dynamic quota tracking for users interacting with the custom Azure OpenAI service.

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

{% tabs %}
Expand Down Expand Up @@ -215,7 +215,7 @@ The Syncfusion Smart PDF Viewer is designed to work with different AI backends t

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

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

{% tabs %}
Expand Down Expand Up @@ -324,13 +324,13 @@ public class AzureAIService : IChatInferenceService
{% endhighlight %}
{% endtabs %}

## Step 4: Add a script file to your application and refer it to the head tag.
## Step 4: Add a script file to your application and refer it to the body tag.

```cshtml

<head>
<body>
<script src="index.js" type="text/javascript"></script>
</head>
</body>

```
## Step 5: Add the following code to render the JS component in the blazor to the newly added JS file.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ To add NuGet packages into the Blazor Maui app, open the NuGet package manager i
Alternatively, you can utilize the following package manager command to achieve the same.

{% tabs %}
{% highlight razor tabtitle="Package Manager" %}
{% highlight c# tabtitle="Package Manager" %}

Install-Package Syncfusion.Blazor.SfSmartPdfViewer -Version {{ site.releaseversion }}
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
Expand Down Expand Up @@ -88,7 +88,7 @@ public static class MauiProgram
{% endhighlight %}
{% endtabs %}

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

## To Configure Azure OpenAI Service

Expand All @@ -97,7 +97,7 @@ This article is required only when enabling AI-powered features in Smart PDF Vie
In **Visual Studio**, Go to Tools → NuGet Package Manager → Package Manager Console. Run these commands one by one:

{% tabs %}
{% highlight razor tabtitle="Package Manager" %}
{% highlight c# tabtitle="Package Manager" %}

Install-Package Azure.AI.OpenAI
Install-Package Microsoft.Extensions.AI
Expand All @@ -109,7 +109,7 @@ Install-Package Microsoft.Extensions.AI.OpenAI -Version 9.8.0-preview.1.25412.6
In **Visual Studio Code**, open the terminal and run these commands:

{% tabs %}
{% highlight razor tabtitle="Package Manager" %}
{% highlight c# tabtitle="Package Manager" %}

dotnet add package Azure.AI.OpenAI
dotnet add package Microsoft.Extensions.AI
Expand All @@ -121,7 +121,7 @@ dotnet add package Microsoft.Extensions.AI.OpenAI --version 9.8.0-preview.1.2541
To configure the AI service, add the following settings to the **~/MauiProgram.cs** file in your Blazor Server app.

{% tabs %}
{% highlight razor tabtitle="Blazor Server App" hl_lines="10 11 12 13 14 15 17" %}
{% highlight c# tabtitle="Blazor Server App" hl_lines="10 11 12 13 14 15 17" %}

using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
Expand Down Expand Up @@ -159,14 +159,18 @@ For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](
Add the following stylesheet and script to the head section of the **~/wwwroot/index.html** file.

{% tabs %}
{% highlight html %}
{% highlight html hl_lines="3 7" %}

<head>
....
<!-- Syncfusion Blazor Smart PDF Viewer control's theme style sheet -->
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
</head>
<body>
....
<!-- Syncfusion Blazor Smart PDF Viewer control's scripts -->
<script src="_content/Syncfusion.Blazor.SfSmartPdfViewer/scripts/syncfusion-blazor-sfsmartpdfviewer.min.js" type="text/javascript"></script>
</head>
</body>

{% endhighlight %}
{% endtabs %}
Expand Down Expand Up @@ -261,5 +265,4 @@ N> If any errors occur while using the Android Emulator, see [Troubleshooting th

* [Document Summarizer in Blazor Smart PDF Viewer](../document-summarizer)
* [Smart Redaction in Blazor Smart PDF Viewer](../smart-redaction)
* [Smart Fill in Blazor Smart PDF Viewer](../smart-fill).
* [Render PDF Document from embedded source in the MAUI Android app](../how-to/deploy-maui-using-android-emulator).
* [Smart Fill in Blazor Smart PDF Viewer](../smart-fill)
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ To add the **Blazor Smart PDF Viewer** component, open the NuGet Package Manager
Alternatively, use the following package manager commands.

{% tabs %}
{% highlight razor tabtitle="Package Manager" %}
{% highlight c# tabtitle="Package Manager" %}

Install-Package Syncfusion.Blazor.SfSmartPdfViewer -Version {{ site.releaseversion }}
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
Expand Down Expand Up @@ -67,7 +67,6 @@ For example, in a Blazor Web App with the `Server` interactive render mode, use

dotnet new blazor -o BlazorWebApp -int Server
cd BlazorWebApp
cd BlazorWebApp.Client

{% endhighlight %}
{% endtabs %}
Expand All @@ -83,10 +82,10 @@ When using the `Server` render mode in a Blazor Web App, install the Syncfusion<
* Run the following commands to install `Syncfusion.Blazor.SfSmartPdfViewer` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), then restore the solution.

{% tabs %}
{% highlight razor tabtitle="Package Manager" %}
{% highlight c# tabtitle="Package Manager" %}

dotnet add package Syncfusion.Blazor.SfSmartPdfViewer -v 31.2.*
dotnet add package Syncfusion.Blazor.Themes -v 31.2.*
dotnet add package Syncfusion.Blazor.SfSmartPdfViewer -v {{ site.releaseversion }}
dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
dotnet restore

{% endhighlight %}
Expand Down Expand Up @@ -118,7 +117,7 @@ Import the [Syncfusion.Blazor](https://help.syncfusion.com/cr/blazor/Syncfusion.
If the **Interactive Render Mode** is set to `Server`, the project contains a single **~/Program.cs** file. Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in that **~/Program.cs** file. The configured SignalR maximum message size and memory cache support large document streaming and caching for better performance. Ensure the Syncfusion license is registered during application startup.

{% tabs %}
{% highlight razor tabtitle="Blazor Server App" hl_lines="5 7 10" %}
{% highlight c# tabtitle="~/Program.cs" hl_lines="5 7 10" %}

using Syncfusion.Blazor;

Expand All @@ -142,7 +141,7 @@ var app = builder.Build();
In **Visual Studio**, Go to Tools → NuGet Package Manager → Package Manager Console. Run these commands one by one:

{% tabs %}
{% highlight razor tabtitle="Package Manager" %}
{% highlight c# tabtitle="Package Manager" %}

Install-Package Azure.AI.OpenAI
Install-Package Microsoft.Extensions.AI
Expand All @@ -154,7 +153,7 @@ Install-Package Microsoft.Extensions.AI.OpenAI -Version 9.8.0-preview.1.25412.6
In **Visual Studio Code**, open the terminal in VS Code and run the following commands:

{% tabs %}
{% highlight razor tabtitle="Package Manager" %}
{% highlight C# tabtitle="Package Manager" %}

dotnet add package Azure.AI.OpenAI
dotnet add package Microsoft.Extensions.AI
Expand All @@ -166,7 +165,7 @@ dotnet add package Microsoft.Extensions.AI.OpenAI --version 9.8.0-preview.1.2541
To configure the AI service, add the following settings to the **~/Program.cs** file in the Blazor Server app.

{% tabs %}
{% highlight razor tabtitle="Blazor Server App" hl_lines="10 11 12 13 14 15 17" %}
{% highlight C# tabtitle="~/Program.cs" hl_lines="10 11 12 13 14 15 17" %}

using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
Expand Down Expand Up @@ -238,7 +237,7 @@ dotnet add package OllamaSharp --version 5.3.6
Add the following settings to the **~/Program.cs** file in the Blazor Server app.

{% tabs %}
{% highlight razor tabtitle="Blazor Server App" hl_lines="11 14 15 16 17 18 21 22 23" %}
{% highlight c# tabtitle="~/Program.cs" hl_lines="11 14 15 16 17 18 21 22 23" %}

using Microsoft.Extensions.AI;
using OllamaSharp;
Expand Down Expand Up @@ -286,19 +285,22 @@ curl http://localhost:11434/api/tags
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the ~/Components/App.razor file as shown below.


```html
{% tabs %}
{% highlight html hl_lines="3 7" %}

<head>
....
<!-- Syncfusion Blazor Smart PDF Viewer control's theme style sheet -->
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
</head>

<body>
....
<!-- Syncfusion Blazor Smart PDF Viewer control's scripts -->
<script src="_content/Syncfusion.Blazor.SfSmartPdfViewer/scripts/syncfusion-blazor-sfsmartpdfviewer.min.js" type="text/javascript"></script>
</body>
```

{% endhighlight %}
{% endtabs %}

N> Review the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also see [Adding script reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for different approaches to include scripts.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ dotnet add package Microsoft.Extensions.AI.OpenAI --version 9.8.0-preview.1.2541
Register Syncfusion Blazor services and BlazorWebView in **~/Form1.cs** so that the WinForms window can host Blazor components.

{% tabs %}
{% highlight c# tabtitle="Form1.cs (WinForms host)" hl_lines="2 3 4 5 6 7 8 9 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 31" %}
{% highlight c# tabtitle="Form1.cs (WinForms host)" hl_lines="2 3 4 5 6 7 8 9 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 31" %}

namespace WinFormsBlazorHybridApp;
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ dotnet add package Microsoft.Extensions.AI.OpenAI --version 9.8.0-preview.1.2541
Register Syncfusion Blazor services, AI services and BlazorWebView in **~/MainWindow.xaml.cs** so that the WPF window can host Blazor components.

{% tabs %}
{% highlight c# tabtitle="MainWindow.xaml.cs (WPF host)" hl_lines="2 3 4 5 6 7 10 11 12 13 14 15 16 17 18 19 20 21 22" %}
{% highlight c# tabtitle="MainWindow.xaml.cs (WPF host)" hl_lines="2 3 4 5 6 7 10 11 12 13 14 15 16 17 18 19 20 21" %}

....
using Microsoft.Extensions.DependencyInjection;
Expand Down Expand Up @@ -184,7 +184,7 @@ For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](
* Inside wwwroot, create an index.html host page for the Blazor UI. This host page is required by BlazorWebView to initialize the Blazor runtime and load static assets (themes and scripts). A basic index.html might look like the following:

{% tabs %}
{% highlight html tabtitle="wwwroot/index.html" hl_lines="8 13" %}
{% highlight html tabtitle="index.html" hl_lines="8 13" %}

<!DOCTYPE html>
<html>
Expand Down