diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md index 20f2f2a1b..22eea852d 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md @@ -3,7 +3,7 @@ layout: post title: Extract and Highlight Text in Blazor PDF Viewer | Syncfusion description: Learn here all about how to extract specific text and highlight it in the Syncfusion Blazor PDF Viewer component. platform: document-processing -control: PDF Viewer +control: SfPdfViewer documentation: ug --- diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-refer-SfPdfViewer-script-in-application.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-refer-SfPdfViewer-script-in-application.md index 9302c50cd..40b25bc47 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-refer-SfPdfViewer-script-in-application.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-refer-SfPdfViewer-script-in-application.md @@ -1,5 +1,5 @@ --- -layout: pos +layout: post title: Reference SfPdfViewer scripts in a Blazor application | Syncfusion description: Learn how to reference Syncfusion Blazor SfPdfViewer scripts using a CDN, static web assets, or custom resources, including deploying pdfium files. platform: document-processing diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md index c715c152d..4c9be1b9f 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md @@ -1,9 +1,9 @@ --- layout: post title: Form Designer events in Blazor PDF Viewer | Syncfusion -description: Learn about Form Designer events in the Syncfusion Blazor PDF Viewer (SfPdfViewer2), including add, delete, select, resize, validate, import, and export. -platform: blazor -control: PdfViewer +description: Learn about Form Designer events in the Syncfusion Blazor SfPdfViewer, including add, delete, select, resize, validate, import, and export. +platform: document-processing +control: SfPdfViewer documentation: ug --- diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md index db64edf9b..5467edba9 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md @@ -145,7 +145,7 @@ N> Ensure that the PDF Viewer static assets (themes and scripts) are loaded prop 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 8 9 10 11 12 13 14 15 16 17 18 20" %} +{% highlight c# tabtitle="Form1.cs (WinForms host)" hl_lines="2 3 4 5 9 10 11 12 13 14 15 16 17 18 19 21" %} namespace WinFormsBlazorHybridApp; using Microsoft.AspNetCore.Components.WebView.WindowsForms; diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/overview.md index a4c7bdcae..d0304a566 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/overview.md @@ -33,10 +33,10 @@ In the classic viewer, many C# service calls were required to retrieve informati * Accurate, reliable rendering of PDF pages. * Easy page navigation with: - * [Thumbnail page view](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/navigation#page-thumbnail-navigation) - * [Bookmark panel](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/navigation#bookmark-navigation) - * [Hyperlink navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/navigation#hyperlink-navigation) - * [Table of contents navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/navigation#table-of-content-navigation) + * [Thumbnail page view](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/page-thumbnail) + * [Bookmark panel](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/bookmark) + * [Hyperlink navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/hyperlink) + * [Table of contents navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/table-of-content) * Core interactions: * [Zooming](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/magnification) and [panning](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interaction#panning-mode) * [Text searching](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/text-search) @@ -48,7 +48,7 @@ In the classic viewer, many C# service calls were required to retrieve informati * [Stamp annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/stamp-annotation): built-in and custom stamps * [Measurement annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/measurement-annotation) * [Free text annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/free-text-annotation) - * [Redaction annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/redaction-annotation) + * [Redaction annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/redaction/overview) * [Comments](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/comments) and [sticky notes](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/sticky-notes-annotation) for all annotation types * [Form filling](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/form-filling) * [Form designer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/form-designer) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/redaction/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/blazor/redaction/mobile-view.md index d765e011e..4dd87255f 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/redaction/mobile-view.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/redaction/mobile-view.md @@ -3,7 +3,7 @@ layout: post title: Redaction in mobile view in Blazor PDF Viewer | Syncfusion description: Learn how to add, customize, and apply redactions in mobile view using the Syncfusion Blazor PDF Viewer with a complete toolbar setup and redaction workflow. platform: document-processing -control: SfPdfViewer2 +control: SfPdfViewer documentation: ug --- diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/mobile-toolbar.md index d35716bd6..1229b044f 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/mobile-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/mobile-toolbar.md @@ -168,4 +168,5 @@ The Print option is not available in mobile mode by default. To use printing on ## See also - [Annotations in mobile view](../annotation/annotations-in-mobile-view) -- [Form designer in mobile view](../form-designer/form-designer-in-mobile-view) \ No newline at end of file +- [Form designer in mobile view](../form-designer/form-designer-in-mobile-view) +- [Redaction in mobile view](../redaction/mobile-view) \ No newline at end of file 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 5ccf29282..52796178c 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 @@ -159,7 +159,7 @@ 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 hl_lines="3 7" %} +{% highlight html hl_lines="4 9" %} .... 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 415132c75..a3c26a66b 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 @@ -79,7 +79,7 @@ When using the `Server` render mode in a Blazor Web App, install the Syncfusion< * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * 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. +* Run the following commands to install [Syncfusion.Blazor.SfSmartPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfSmartPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), then restore the solution. {% tabs %} {% highlight c# tabtitle="Package Manager" %} @@ -286,7 +286,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A {% tabs %} -{% highlight html hl_lines="3 7" %} +{% highlight html hl_lines="4 9" %} .... 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 deleted file mode 100644 index d75ef97a1..000000000 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/how-to/User-Token-with-Custom-AI-service.md +++ /dev/null @@ -1,556 +0,0 @@ ---- -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. -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. - -## Prerequisites - -Before you begin, ensure you have: - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* [Azure OpenAI Account](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) - -## Getting Started for User Token with Custom Azure AI service in Smart PDF Viewer - -After completing this setup, you can: - -1. [Add Smart PDF Viewer to your Blazor pages](../getting-started/web-app) - ---- -## 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. - -### Implementation Steps -1. Create a new class file named `UserTokenService.cs` in your project -2. Add the following implementation: - -{% tabs %} -{% highlight c# tabtitle="~/UserTokenService.cs" %} - -// This class handles user token management including generation, tracking, and resetting. -public class UserTokenService -{ - private readonly IJSRuntime _jsRuntime; - private const string TokenFilePath = "user_tokens.json"; // Path to the token storage file - private static readonly TimeZoneInfo IndianStandardTime = TimeZoneInfo.FindSystemTimeZoneById("India Standard Time"); - - // Constructor to initialize JavaScript runtime for browser interactions - public UserTokenService(IJSRuntime jsRuntime) - { - _jsRuntime = jsRuntime; - } - - // Retrieves a unique fingerprint for the user using JavaScript - public async Task GetUserFingerprintAsync() - { - return await _jsRuntime.InvokeAsync("fingerPrint"); - } - - // Gets the remaining tokens for a user, resetting if needed - public async Task GetRemainingTokensAsync(string userCode) - { - Dictionary tokens = await CheckAndResetTokensAsync(userCode); - return tokens.ContainsKey(userCode) ? tokens[userCode].RemainingTokens : 15000 ; - } - - // Updates the token count for a user and saves it to the file - public async Task UpdateTokensAsync(string userCode, int tokens) - { - Dictionary tokenData = await ReadTokensFromFileAsync(); - if (tokenData.ContainsKey(userCode)) - { - tokenData[userCode].RemainingTokens = tokens; - } - else - { - tokenData[userCode] = new UserTokenInfo - { - UserId = userCode, - DateOfLogin = TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, IndianStandardTime), - RemainingTokens = tokens - }; - } - await WriteTokensToFileAsync(tokenData); - } - - // Checks if 24 hours have passed since last login and resets tokens if needed - public async Task> CheckAndResetTokensAsync(string userCode) - { - Dictionary tokenData = await ReadTokensFromFileAsync(); - if (tokenData.ContainsKey(userCode)) - { - UserTokenInfo userTokenInfo = tokenData[userCode]; - DateTime currentTime = TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, IndianStandardTime); - TimeSpan timeDifference = currentTime - userTokenInfo.DateOfLogin; - - if (timeDifference.TotalHours > 24) - { - userTokenInfo.RemainingTokens = 15000; // Reset tokens - userTokenInfo.DateOfLogin = currentTime; // Update login time - await WriteTokensToFileAsync(tokenData); - } - } - return tokenData; - } - - // Reads token data from the JSON file - private async Task> ReadTokensFromFileAsync() - { - if (!File.Exists(TokenFilePath)) - { - Dictionary initialData = new Dictionary(); - await WriteTokensToFileAsync(initialData); - return initialData; - } - string json = await File.ReadAllTextAsync(TokenFilePath); - Dictionary? tokenData = JsonSerializer.Deserialize>(json); - return tokenData ?? new Dictionary(); - } - - // Reads token data from the JSON file - private async Task WriteTokensToFileAsync(Dictionary tokenData) - { - string json = JsonSerializer.Serialize(tokenData, new JsonSerializerOptions { WriteIndented = true }); - await File.WriteAllTextAsync(TokenFilePath, json); - } - // Displays an alert banner in the browser with token reset info - public async Task ShowAlert(string userCode) - { - string message = await ReturnAlertMessage(userCode); - await _jsRuntime.InvokeVoidAsync("showBanner", message.ToString()); - } - - // Generates the alert message with token reset time and GitHub link - public async Task ReturnAlertMessage(string userCode) - { - Dictionary tokenData = await ReadTokensFromFileAsync(); - if (tokenData.ContainsKey(userCode)) - { - UserTokenInfo userTokenInfo = tokenData[userCode]; - string resetTime = userTokenInfo.DateOfLogin.AddHours(24).ToString("f"); - string message = $"You have reached your token limit. Your tokens will reset on {resetTime}. Download our Syncfusion Smart AI Samples from GitHub to explore this sample locally with your own API key."; - return message; - } - return ""; - } - -} -// Model class to store user token information -public class UserTokenInfo -{ - public string UserId { get; set; } - public DateTime DateOfLogin { get; set; } - public int RemainingTokens { get; set; } -} - -{% endhighlight %} -{% 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. - -1. Create a new class file named `UserTokensController.cs` in your project -2. Add the following implementation: - -{% tabs %} -{% highlight c# tabtitle="~/UserTokensController.cs" %} -// Defines the route for the API controller and marks it as an API controller -[Route("api/[controller]")] -[ApiController] -public class UserTokensController : ControllerBase -{ - private readonly IWebHostEnvironment _env; // Provides access to web hosting environment properties - private UserTokenService userToken { get; set; } // Service to manage user tokens - - // Constructor to inject dependencies: hosting environment and token service - public UserTokensController(IWebHostEnvironment env, UserTokenService user) - { - _env = env; - userToken = user; - } - - // API endpoint to get remaining tokens for a user - // Route: GET api/usertokens/get_remaining_tokens/{userId} - [HttpGet("get_remaining_tokens/{userId}")] - public async Task GetRemainingTokens(string userId) - { - // Construct the full path to the token file - string filePath = Path.Combine(_env.ContentRootPath, "user_tokens.json"); - - // Get the current remaining tokens for the user - int remainingTokens = await userToken.GetRemainingTokensAsync(userId); - - // Get the alert message if the user is near or at the token limit - string alertMessage = await userToken.ReturnAlertMessage(userId); - - // If tokens are low (≤ 300), return the current token count and alert message - if (remainingTokens <= 300) - { - return Ok(new { remainingTokens, alertMessage }); - } - - // Otherwise, deduct 550 tokens and update the token count - await userToken.UpdateTokensAsync(userId, (int)(remainingTokens - 550)); - - // Return the updated token count and alert message - return Ok(new { remainingTokens, alertMessage }); - } -} - -{% endhighlight %} -{% endtabs %} - -## 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. - -### Understanding the Interface - -The `IChatInferenceService` interface is the bridge between Syncfusion Smart PDF Viewer and AI services: - -1. Create a new file named `AzureAIService.cs` -2. Add the following implementation: - -{% tabs %} -{% highlight c# tabtitle="~/AzureAIService.cs" %} - -// AzureAIService integrates with Azure OpenAI to generate chat completions and manage token usage. -public class AzureAIService : IChatInferenceService -{ - private readonly UserTokenService _userTokenService; - private ChatParameters chatParameters_history = new ChatParameters(); - private IChatClient _chatClient; - - public AzureAIService(UserTokenService userTokenService, IChatClient client) - { - _userTokenService = userTokenService; - this._chatClient = client ?? throw new ArgumentNullException(nameof(client)); - } - - - /// - /// Gets a text completion from the Azure OpenAI service. - /// - /// The user prompt to send to the AI service. - /// Indicates whether the response should be returned in JSON format. Defaults to true - /// Indicates whether to append previous responses to the conversation history. Defaults to false - /// Specifies the systemRole that is sent to AI Clients. Defaults to null - /// The AI-generated completion as a string. - public async Task GetCompletionAsync(string prompt, bool returnAsJson = true, bool appendPreviousResponse = false, string systemRole = null, int outputTokens = 2000) - { - string systemMessage = returnAsJson ? "You are a helpful assistant that only returns and replies with valid, iterable RFC8259 compliant JSON in your responses unless I ask for any other format. Do not provide introductory words such as 'Here is your result' or 'json', etc. in the response" : !string.IsNullOrEmpty(systemRole) ? systemRole : "You are a helpful assistant"; - try - { - ChatParameters chatParameters = appendPreviousResponse ? chatParameters_history : new ChatParameters(); - if (appendPreviousResponse) - { - if (chatParameters.Messages == null) - { - chatParameters.Messages = new List() { - new ChatMessage(ChatRole.System,systemMessage), - }; - } - chatParameters.Messages.Add(new ChatMessage(ChatRole.User, prompt)); - } - else - { - chatParameters.Messages = new List(2) { - new ChatMessage (ChatRole.System, systemMessage), - new ChatMessage(ChatRole.User,prompt), - }; - } - chatParameters.MaxTokens = outputTokens; - string completion = await GenerateResponseAsync(chatParameters); - if (appendPreviousResponse) - { - chatParameters_history?.Messages?.Add(new ChatMessage(ChatRole.Assistant, completion)); - } - return completion; - } - catch (Exception ex) - { - Console.WriteLine($"An exception has occurred: {ex.Message}"); - return ""; - } - } - - /// - /// Sends the chat parameters to the AI client and returns the response. - /// Also checks and updates token usage. - /// - /// Chat parameters including messages and settings. - /// AI-generated response text. GenerateResponseAsync(ChatParameters options) - { - string userCode = await _userTokenService.GetUserFingerprintAsync(); - int remainingTokens = await _userTokenService.GetRemainingTokensAsync(userCode); - int inputTokens = options.Messages.Sum(message => message.Text.Length / 4); - - if (remainingTokens <= inputTokens) - { - await _userTokenService.ShowAlert(userCode); - return null; - } - // Create a completion request with the provided parameters - ChatOptions completionRequest = new ChatOptions - { - Temperature = options.Temperature ?? 0.5f, - TopP = options.TopP ?? 1.0f, - MaxOutputTokens = options.MaxTokens ?? 2000, - FrequencyPenalty = options.FrequencyPenalty ?? 0.0f, - PresencePenalty = options.PresencePenalty ?? 0.0f, - StopSequences = options.StopSequences - }; - try - { - ChatResponse completion = await _chatClient.GetResponseAsync(options.Messages, completionRequest); - await _userTokenService.UpdateTokensAsync(userCode, (int)(remainingTokens - completion.Usage.TotalTokenCount)); - return completion.Text.ToString(); - } - catch (Exception ex) - { - throw; - } - } -} - -{% endhighlight %} -{% endtabs %} - -## Step 4: Add a script file to your application and refer it to the head tag. - -```cshtml - - - - - -``` -## Step 5: Add the following code to render the JS component in the blazor to the newly added JS file. - -```javascript - -// Generates a unique fingerprint for the user based on canvas rendering and SHA-256 hashing -async function fingerPrint() { - try { - // Create a hidden canvas element - var canvas = document.body.appendChild(document.createElement('canvas')); - canvas.width = 600; - canvas.height = 300; - canvas.style.display = "none"; - - // Drawing parameters - const ctx = canvas.getContext("2d"); - const size = 24; - const diamondSize = 28; - const gap = 4; - const startX = 30; - const startY = 30; - const blue = "#1A3276"; - const orange = "#F28C00"; - - // Pattern map for drawing squares and diamonds - const colorMap = [ - ["blue", "blue", "diamond"], - ["blue", "orange", "blue"], - ["blue", "blue", "blue"] - ]; - - // Draw a square at specified coordinates - function drawSquare(x, y, color) { - ctx.fillStyle = color; - ctx.fillRect(x, y, size, size); - } - - // Draw a diamond shape at specified coordinates - function drawDiamond(centerX, centerY, size, color) { - ctx.fillStyle = color; - ctx.beginPath(); - ctx.moveTo(centerX, centerY - size / 2); - ctx.lineTo(centerX + size / 2, centerY); - ctx.lineTo(centerX, centerY + size / 2); - ctx.lineTo(centerX - size / 2, centerY); - ctx.closePath(); - ctx.fill(); - } - - // Render the pattern on canvas - for (let row = 0; row < 3; row++) { - for (let col = 0; col < 3; col++) { - const type = colorMap[row][col]; - const x = startX + col * (size + gap); - const y = startY + row * (size + gap); - if (type === "blue") drawSquare(x, y, blue); - else if (type === "orange") drawSquare(x, y, orange); - else if (type === "diamond") drawDiamond(x + size / 2, y + size / 2, diamondSize, orange); - } - } - - // Add text and shapes to increase fingerprint uniqueness - ctx.font = "20px Arial"; - ctx.fillStyle = blue; - ctx.textBaseline = "middle"; - ctx.fillText("Syncfusion", startX + 3 * (size + gap) + 20, startY + size + gap); - - // Add overlapping circles with blend mode - ctx.globalCompositeOperation = "multiply"; - ctx.fillStyle = "rgb(255,0,255)"; - ctx.beginPath(); ctx.arc(50, 200, 50, 0, Math.PI * 2); ctx.fill(); - ctx.fillStyle = "rgb(0,255,255)"; - ctx.beginPath(); ctx.arc(100, 200, 50, 0, Math.PI * 2); ctx.fill(); - ctx.fillStyle = "rgb(255,255,0)"; - ctx.beginPath(); ctx.arc(75, 250, 50, 0, Math.PI * 2); ctx.fill(); - ctx.fillStyle = "rgb(255,0,255)"; - ctx.beginPath(); - ctx.arc(200, 200, 75, 0, Math.PI * 2, true); - ctx.arc(200, 200, 25, 0, Math.PI * 2, true); - ctx.fill("evenodd"); - - // Hash the canvas data to generate a unique ID - const sha256 = async function (str) { - const encoder = new TextEncoder(); - const data = encoder.encode(str); - const hashBuffer = await crypto.subtle.digest('SHA-256', data); - const hashArray = Array.from(new Uint8Array(hashBuffer)); - return hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); - }; - - const visitorID = sha256(canvas.toDataURL()); - return visitorID; - } - catch (error) { - console.error(error); - return null; - } -} - -// Displays a banner message on the page -function showBanner(messageText) { - // Check if the banner already exists - if (document.getElementById("custom-banner")) { - hideSpinner(); - return; - } - - // Create the banner container - let banner = document.createElement("div"); - banner.id = "custom-banner"; - banner.className = "e-banner"; - - // Banner content - let message = document.createElement("p"); - message.innerHTML = messageText; - message.className = "banner-message"; - - // Create the close button - let closeButton = document.createElement("span"); - closeButton.innerHTML = "×"; // HTML entity for '×' symbol - closeButton.className = "close-button"; - closeButton.onclick = closeBanner; - - // Append elements - banner.appendChild(message); - banner.appendChild(closeButton); - document.body.insertBefore(banner, document.body.firstChild); - hideSpinner(); -} - -// Fetches remaining tokens for a user from the backend API -async function getRemainingTokens(userId) { - try { - const baseElement = document.querySelector('base'); - const baseUrl = baseElement ? baseElement.href : window.location.origin; - const response = await fetch(`${baseUrl}api/UserTokens/get_remaining_tokens/${userId}`); - if (response.ok) { - return await response.json(); - } - } catch (error) { - console.error("Error fetching remaining tokens:", error); - } - return 0; -} -function closeBanner() { - let banner = document.getElementById("custom-banner"); - if (banner) { - document.body.removeChild(banner); - } -} - -function hideSpinner() { - var spinnerElement = document.querySelector('.e-spinner-pane.e-spin-show'); - if (spinnerElement) { - spinnerElement.classList.remove('e-spin-show'); - spinnerElement.classList.add('e-spin-hide'); - } -} -``` - -## 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. - -{% tabs %} -{% highlight c# tabtitle="~/Program.cs" %} - -using Azure.AI.OpenAI; -using System.ClientModel; -using Microsoft.Extensions.AI; -using Syncfusion.Blazor.AI; - -... -var builder = WebApplication.CreateBuilder(args); - -.... - -builder.Services.AddSyncfusionBlazor(); - -// Define your Azure OpenAI credentials and model -string azureOpenAIKey = "Your API Key"; // Replace with your actual Azure OpenAI API key -string azureOpenAIEndpoint = "Your Endpoint"; // Replace with your Azure OpenAI endpoint URL -string azureOpenAIModel = "Your model name"; // Replace with your deployed model name - -// Create an AzureOpenAIClient instance using the endpoint and API key -AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient( - new Uri(azureOpenAIEndpoint), - new ApiKeyCredential(azureOpenAIKey) -); - -// Get a chat client from the AzureOpenAIClient and cast it to IChatClient -IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient(); -builder.Services.AddChatClient(azureOpenAIChatClient); -builder.Services.AddScoped(); - -// Register AzureAIService as the implementation of IChatInferenceService -builder.Services.AddScoped(sp => -{ - UserTokenService userTokenService = sp.GetRequiredService(); - return new AzureAIService(userTokenService, azureOpenAIChatClient); -}); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - -Here, - -* **apiKey**: "Azure OpenAI API Key"; -* **deploymentName**: "Azure OpenAI deployment name"; -* **endpoint**: "Azure OpenAI deployment end point URL"; - -For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `apiKey`, `deploymentName` and `endpoint` will all be provided to you. - -N> [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-smart-pdf-viewer-examples/tree/master/Custom%20Services/AzureAI%20service%20with%20User%20token) - -## See also - -* [Getting Started with Blazor Smart PDF Viewer in Web App Server](../getting-started/web-app) -* [Custom AI Service Integration in Blazor Smart PDF Viewer](../custom-ai-service) \ 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 deleted file mode 100644 index a3bbc381e..000000000 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/how-to/refer-SfSmartPdfViewer-script-in-application.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -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. -platform: document-processing -control: SfSmartPdfViewer -documentation: ug ---- - -# Refer the SfSmartPdfViewer script file in 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) - -* 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) - -* 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 refer the script and pdfium files in your application, please refer the below image. -![Scripts in Blazor SfSmartPdfViewer](../images/pdfium.png) - -## See also - -* [Getting Started with Blazor Smart PDF Viewer in Web App Server](../getting-started/web-app)