diff --git a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/custom-ai-service.md b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/custom-ai-service.md index 6d3db6384..fe168914a 100644 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/custom-ai-service.md +++ b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/custom-ai-service.md @@ -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 @@ -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 | |---------|---------------| @@ -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; @@ -52,16 +52,16 @@ builder.Services.AddSingleton(); ## 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 @@ -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" %} @@ -141,10 +141,10 @@ builder.Services.AddScoped(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" %} diff --git a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/deepseek-service.md b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/deepseek-service.md index 9903358d4..111108c05 100644 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/deepseek-service.md +++ b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/deepseek-service.md @@ -9,7 +9,7 @@ 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 @@ -17,6 +17,7 @@ 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 @@ -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" %} @@ -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 diff --git a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md index ce43c156e..845a4cc1a 100644 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md +++ b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md @@ -1,7 +1,7 @@ --- 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 @@ -9,19 +9,19 @@ 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® 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® 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) @@ -72,7 +72,7 @@ public static class MauiProgram builder.Services.AddSingleton(); builder.Services.AddSyncfusionBlazor(); - + return builder.Build(); } } @@ -80,8 +80,12 @@ public static class MauiProgram {% 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 %} @@ -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" %} @@ -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 @@ -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® 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 %} @@ -176,30 +180,30 @@ Add the Syncfusion® 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: ``` ``` -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" %} @@ -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)) @@ -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). diff --git a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md index 10fcb1a7d..477297fa4 100644 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md +++ b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with SmartPdfViewer in Blazor Web App | Syncfusion -description: Learn how to get started with SfSmartPdfViewer in Blazor Web App using AI interaction, smart redaction, and form filling. +title: Getting started with Blazor Smart PDF Viewer Web Apps | Syncfusion +description: Step-by-step guide to add and configure the SfSmartPdfViewer in a Blazor Web App, including AI interaction, smart redaction, and form filling. platform: document-processing control: SfSmartPdfViewer documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Smart PDF Viewer -This section briefly explains how to include [Blazor Smart PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-smart-pdf-viewer) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio code. +This section briefly explains how to include [Blazor Smart PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-smart-pdf-viewer) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -20,17 +20,17 @@ This section briefly explains how to include [Blazor Smart PDF Viewer](https://w * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) * [Azure OpenAI Account](https://learn.microsoft.com/en-us/azure/ai-foundry/openai/how-to/create-resource?pivots=web-portal) -N> Syncfusion® Blazor Smart PDF Viewer Component is compatible with both `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps. +N> Syncfusion® Blazor Smart PDF Viewer component is compatible with both `OpenAI` and `Azure OpenAI`, and supports Server interactivity mode apps. ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Smart PDF Viewer and Themes NuGet in the App -To add **Blazor Smart PDF Viewer** component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.SfSmartPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfSmartPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Smart PDF Viewer** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for and install [Syncfusion.Blazor.SfSmartPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfSmartPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following package manager commands. {% tabs %} {% highlight razor tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version 31.1.17 {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to NuGet packages topic for available [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full package list and component details. A valid Syncfusion license key must be registered in the application. {% endtabcontent %} @@ -52,13 +52,13 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) * [Azure OpenAI Account](https://learn.microsoft.com/en-us/azure/ai-foundry/openai/how-to/create-resource?pivots=web-portal) -N> Syncfusion® Blazor Smart PDF Viewer Component is compatible with both `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps. +N> Syncfusion® Blazor Smart PDF Viewer component is compatible with both `OpenAI` and `Azure OpenAI`, and supports Server interactivity mode apps. Azure OpenAI is required only for AI-assisted features. ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. For example, in a Blazor Web App with the `Server` interactive render mode, use the following commands. @@ -72,15 +72,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a Blazor Web App with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information on creating a Blazor Web App with various interactive modes and locations, refer to this [guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Smart PDF Viewer and Themes NuGet in the App -If you utilize `Server` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the server project. +When using the `Server` render mode in a Blazor Web App, install the Syncfusion® Blazor component packages in the server project where the components execute. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a `Syncfusion.Blazor.SfSmartPdfViewer` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the current directory contains the project `.csproj` file. +* 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" %} @@ -92,7 +92,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to NuGet packages topic for available [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full package list and component details. {% endtabcontent %} @@ -104,7 +104,7 @@ N> Syncfusion® Blazor components are availa | -- | -- | | Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| -Import the [Syncfusion.Blazor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.html) and [Syncfusion.Blazor.SmartPdfViewer](https://help.syncfusion.com//cr/blazor/Syncfusion.Blazor.SmartPdfViewer.html) namespace. +Import the [Syncfusion.Blazor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.html) and [Syncfusion.Blazor.SmartPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SmartPdfViewer.html) namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -115,7 +115,7 @@ Import the [Syncfusion.Blazor](https://help.syncfusion.com/cr/blazor/Syncfusion. {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, the project contains a single **~/Program.cs** file. Register the Syncfusion® 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" %} @@ -151,7 +151,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 in VS Code and run the following commands: {% tabs %} {% highlight razor tabtitle="Package Manager" %} @@ -163,7 +163,7 @@ dotnet add package Microsoft.Extensions.AI.OpenAI --version 9.8.0-preview.1.2541 {% endhighlight %} {% endtabs %} -To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Server app. +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" %} @@ -193,29 +193,29 @@ 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 provided. ## To Configure Ollama for Self-Hosted AI Models To use Ollama for running self-hosted models: -* **Download and install Ollama** -Visit [Ollama’s official website](https://ollama.com/) and install the application appropriate for your operating system. +* **Download and install Ollama** +Install the application for your operating system from [Ollama’s official website](https://ollama.com/). -* **Install the desired model from the Ollama library** -You can explore available models from the [Ollama Library](https://ollama.com/library) (e.g., llama2:13b, llama2:7b, mistral:7b, etc.). +* **Install the desired model from the Ollama library** +Explore available models in the [Ollama Library](https://ollama.com/library) (for example, llama2:13b, llama2:7b, mistral:7b). -To download and run a model (e.g., llama2:7b), use the following command: +To download and run a model (for example, llama2:7b), run the following command: ```bash ollama run llama2:7b ``` -In **Visual Studio**, Go to Tools → NuGet Package Manager → Package Manager Console. Run these command: +In **Visual Studio**, Go to Tools → NuGet Package Manager → Package Manager Console. Run this command: {% tabs %} {% highlight razor tabtitle="Package Manager" %} @@ -225,7 +225,7 @@ Install-Package OllamaSharp -Version 5.3.6 {% endhighlight %} {% endtabs %} -In **Visual Studio Code**, Open terminal in VS Code. Run these commands: +In **Visual Studio Code**, open the terminal in VS Code and run this command: {% tabs %} {% highlight razor tabtitle="Package Manager" %} @@ -235,7 +235,7 @@ dotnet add package OllamaSharp --version 5.3.6 {% endhighlight %} {% endtabs %} -Add the following settings to the **~/Program.cs** file in your Blazor Server app. +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" %} @@ -270,12 +270,10 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -N> Running Ollama locally 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 Ollama locally may lead to slower response times due to system resource usage. To accommodate this, the Syncfusion Smart PDF Viewer can 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) ### To Check the Installed Model and Its Details in Ollama -- To verify which models are currently installed and available on your local Ollama server (example: running on port 11434), run the following command in your terminal or command prompt: +- To verify which models are currently installed and available on the local Ollama server (for example, running on port 11434), run the following command in a terminal or command prompt: ```bash @@ -285,7 +283,7 @@ curl http://localhost:11434/api/tags ## Add stylesheet and script resources -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 `` section and the script reference at the end of the `` in the ~/Components/App.razor file as shown below: +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 `` section and the script reference at the end of the `` in the ~/Components/App.razor file as shown below. ```html @@ -302,7 +300,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out 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 your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +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. ## Add Syncfusion® Blazor Smart PDF Viewer component @@ -319,11 +317,11 @@ Add the Syncfusion® Blazor Smart PDF Viewer {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Smart PDF Viewer component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Smart PDF Viewer component in the default web browser. -![Syncfusion Blazor Smart PDF Viewer](gettingstarted-images/smart-pdf-viewer.png) +![Blazor Smart PDF Viewer rendering a PDF document](gettingstarted-images/smart-pdf-viewer.png) -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-smart-pdf-viewer-examples/tree/master/GettingStarted). +N> [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-smart-pdf-viewer-examples/tree/master/GettingStarted). ## See also diff --git a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/how-to/User-Token-with-Custom-AI-service.md b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/how-to/User-Token-with-Custom-AI-service.md index d75ef97a1..1d8482e29 100644 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/how-to/User-Token-with-Custom-AI-service.md +++ b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/how-to/User-Token-with-Custom-AI-service.md @@ -1,14 +1,14 @@ --- layout: post title: UserToken with Azure AI Service in Smart PDF Viewer| Syncfusion -description: Learn how to implement a User Token with Custom Azure AI Service in Syncfusion Smart PDF Viewer in a Blazor App. +description: Implement a user token with a custom Azure OpenAI service in the Syncfusion Smart PDF Viewer for a Blazor app. platform: document-processing control: SfSmartPdfViewer documentation: ug --- # Getting Started Smart PDF Viewer using UserToken with Azure Service -This guide provides step-by-step instructions for integrating and using Syncfusion's Smart PDF Viewer with User Token and Custom Azure AI service in your Blazor App. +This guide provides step-by-step instructions for integrating and using Syncfusion Smart PDF Viewer with a user token and a custom Azure OpenAI service in a Blazor app. ## Prerequisites @@ -25,7 +25,7 @@ After completing this setup, you can: --- ## Step 1: Create User Token Service -The `UserTokenService` is responsible for generating secure tokens for users. These tokens can be used to authenticate requests to your Custom Azure AI Service. +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 @@ -154,7 +154,7 @@ public class UserTokenInfo {% endtabs %} ## Step 2: Implement User Token API Controller -The `UserTokensController` class serves as the API layer for interacting with the user token system.This controller is essential for enabling secure and dynamic token tracking for users interacting with your Custom Azure AI Service. +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 2. Add the following implementation: @@ -209,7 +209,7 @@ public class UserTokensController : ControllerBase ## Step 3: Create a Custom Azure AI Service -The Syncfusion Smart PDF Viewer are designed to work with different AI backends through the `IChatInferenceService` interface. This section shows you how to create a custom implementation that connects the Smart PDF Viewer to the Azure AI service. +The Syncfusion Smart PDF Viewer is designed to work with different AI backends through the `IChatInferenceService` interface. This section shows how to create a custom implementation that connects the Smart PDF Viewer to the Azure OpenAI service. ### Understanding the Interface @@ -494,7 +494,7 @@ function hideSpinner() { ## Step 6: Configure the Blazor App -Configure your Blazor application to use the User Token with Azure AI service with Syncfusion Smart PDF Viewer. This involves registering necessary services and setting up the dependency injection container. +Configure the Blazor application to use the user token with the Azure OpenAI service and Syncfusion Smart PDF Viewer. This includes registering Syncfusion services, the chat client, and the custom AI service. {% tabs %} {% highlight c# tabtitle="~/Program.cs" %} diff --git a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/how-to/dockerImage-hosting-guide.md b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/how-to/dockerImage-hosting-guide.md index 3a35c336b..904872b97 100644 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/how-to/dockerImage-hosting-guide.md +++ b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/how-to/dockerImage-hosting-guide.md @@ -9,40 +9,40 @@ documentation: ug # Docker Image Hosting Guide for Blazor Web App -We aim to assist developers in reducing deployment time and simplifying the publishing process using Docker images. The [Syncfusion Document Processing API](https://hub.docker.com/r/syncfusion/document-processing-apis) is available as a ready-to-use Docker image for document processing APIs that ensures a seamless experience for Docker users. The following sections will guide you on how to publish docker images. +This guide helps reduce deployment time and simplify publishing by using Docker images with a Blazor Smart PDF Viewer Web App. The [Syncfusion Document Processing API](https://hub.docker.com/r/syncfusion/document-processing-apis) is available as a ready-to-use Docker image for document processing scenarios and ensures a seamless experience for Docker users. The following sections describe how to publish Docker images for local validation. ## Deployment requirement ### Hardware requirement -The following hardware requirements are necessary to run document processing API +The following hardware requirements are necessary to run document processing API: -Windows -CPU: 2-core -Memory: 8GB RAM -Disk space: 8GB or more +- Windows +- CPU: 2-core +- Memory: 8 GB RAM +- Disk space: 8 GB or more ### Software requirements -The following software requirements are necessary to run document processing API +The following software requirements are necessary to run document processing API: -Application: Rancher Desktop. -Web Browser: Microsoft Edge, Mozilla Firefox, and Chrome. +- Application: Rancher Desktop +- Web browser: Microsoft Edge, Mozilla Firefox, or Google Chrome ## Steps to configure and run docker container ### Step1: -Install the Rancher desktop application [Rancher Desktop](https://github.com/rancher-sandbox/rancher-desktop/releases) +Install the Rancher desktop application from the official release page: [Rancher Desktop](https://github.com/rancher-sandbox/rancher-desktop/releases) ### Step2: -Open the rancher desktop application Select the displayed option. -![Docker Moby](../images/docker-moby.png) +Open the Rancher Desktop application and select the displayed option. +![Docker engine selection in Rancher Desktop](../images/docker-moby.png) ### Step3: -Create a Smart Pdf Viewer web app sample using the following [documentation](https://help.syncfusion.com/document-processing/pdf/smart-pdf-viewer/blazor/getting-started/web-app). +Create a Smart Pdf Viewer web app sample by following the [documentation](https://help.syncfusion.com/document-processing/pdf/smart-pdf-viewer/blazor/getting-started/web-app). ### Step4: -Right-click Smart PDF Viewer web app sample to add the docker support with Linux. -![Docker Support](../images/add-docker-support.png). +Right-click the Smart PDF Viewer web app sample to add Docker support with Linux. +![Add Docker support in project](../images/add-docker-support.png) ### Step5: -Once the docker file is added open the docker file and add the following line +Once the Docker file is added, open the Docker file and add the following line. {% tabs %} {% highlight c# tabtitle="Dockerfile" hl_lines="2 4 6" %} @@ -66,15 +66,15 @@ EXPOSE 8081 {% endhighlight %} {% endtabs %} -![Docker Support Line](../images/line-to-add-docker.png). -N> Remove the `User` if not needed or change the User type to `root` for providing elevated privileges. +![Line to add in Dockerfile](../images/line-to-add-docker.png) +N> Remove the `User` if not needed or change the User type to `root` to provide elevated privileges. ### Step6: -Publish the image by building the DockerFile -![Build Docker File](../images/build-docker.png). +Publish the image by building the DockerFile. +![Build Dockerfile in IDE](../images/build-docker.png) ### Step7: -Open the comment prompt or power shell and enter the following command to list the published docker images. +Open the command prompt or PowerShell and enter the following command to list the published Docker images. {% tabs %} {% highlight c# tabtitle="Docker Image" %} @@ -96,9 +96,8 @@ docker run -d -p 6001:8080 4eead1aaf7a5 {% endtabs %} ### Step9: -Ensure the published image is as per requirement in the hosted link `http://localhost:6001/` +Ensure the published image runs as expected by navigating to the hosted link `http://localhost:6001/`. ## See also -* [Steps to deploy Docker Images from Container Registry to Azure App Services](https://learn.microsoft.com/en-us/azure/app-service/quickstart-custom-container?tabs=dotnet&pivots=container-linux-azure-portal). - +* [Steps to deploy Docker Images from Container Registry to Azure App Services](https://learn.microsoft.com/en-us/azure/app-service/quickstart-custom-container?tabs=dotnet&pivots=container-linux-azure-portal). \ No newline at end of file diff --git a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/how-to/refer-SfSmartPdfViewer-script-in-application.md b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/how-to/refer-SfSmartPdfViewer-script-in-application.md index a3bbc381e..8350252b0 100644 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/how-to/refer-SfSmartPdfViewer-script-in-application.md +++ b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/how-to/refer-SfSmartPdfViewer-script-in-application.md @@ -1,22 +1,22 @@ --- layout: post -title: Refer the SfSmartPdfViewer script file in application | Syncfusion -description: Learn here all about refer the SfSmartPdfViewer script file in the application in Syncfusion Blazor SfSmartPdfViewer component and more. +title: Refer the SfSmartPdfViewer script into Blazor application | Syncfusion +description: Learn how to include the SfSmartPdfViewer script in Syncfusion Blazor apps using CDN seamless setup. platform: document-processing control: SfSmartPdfViewer documentation: ug --- -# Refer the SfSmartPdfViewer script file in Blazor application +# Reference the SfSmartPdfViewer script in a Blazor application -* You can include the script in your application by adding a CDN link. This provides a quick and efficient way to integrate the required functionality without needing to reference the script locally. For more details, please refer to the [CDN Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) +* Reference the script using a CDN for a quick setup without local files. For guidance, see the [CDN reference](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference). -* You can also reference the script directly from the NuGet package included in your application. For more details, please refer to the [Refer script from static web assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) +* Reference the script from the installed NuGet package via static web assets. For guidance, see [Reference script from static web assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). -* If you wish to add custom scripts to your application, please refer to the [Custom Resource Generator](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) for generating the necessary resources. You need to include the [pdfium.js](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Common/Pdfium%20files/pdfium.js) and [pdfium.wasm](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Common/Pdfium%20files/pdfium.wasm) files in your application when referencing scripts externally. +* To include custom scripts, use the [Custom Resource Generator](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). Ensure that [pdfium.js](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Common/Pdfium%20files/pdfium.js) and [pdfium.wasm](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Common/Pdfium%20files/pdfium.wasm) are added to the application (typically under wwwroot) and that the page can resolve their paths at runtime. -To refer the script and pdfium files in your application, please refer the below image. -![Scripts in Blazor SfSmartPdfViewer](../images/pdfium.png) +The following image shows the script and Pdfium files referenced in a Blazor application. +![Scripts and Pdfium files in Blazor SfSmartPdfViewer](../images/pdfium.png) ## See also