diff --git a/grid-sdk/maui/data-grid/AI-driven-anomaly-detection.md b/grid-sdk/maui/data-grid/AI-driven-anomaly-detection.md deleted file mode 100644 index b4029980..00000000 --- a/grid-sdk/maui/data-grid/AI-driven-anomaly-detection.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -layout: post -title: AI-Driven anomaly detection in .NET MAUI Data Grid | Syncfusion -description: Learn all about the AI-driven anomaly detection feature in Syncfusion® .NET MAUI Data Grid, including its capabilities, configuration, and usage. -platform: grid-sdk -control: SfDataGrid -documentation: ug ---- - -# AI-Driven Anomaly Detection in .NET MAUI DataGrid (SfDataGrid) - -This document provides a comprehensive guide to implementing AI-driven anomaly detection with the Syncfusion [.NET MAUI DataGrid](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html). It demonstrates how to integrate Azure OpenAI services to analyze dataset patterns and automatically highlight anomalies in real-time. - -## Integrating Azure OpenAI with the .NET MAUI App - -### Step 1: Set Up Azure OpenAI Service - -First, open [Visual Studio](https://visualstudio.microsoft.com/) and [create a new .NET MAUI app](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android). - -Before enabling AI, ensure that you have access to [Azure OpenAI](https://azure.microsoft.com/en-in/products/ai-services/openai-service) and have set up a deployment in the Azure portal. - -**Configure Azure OpenAI:** - -1. Log in to the [Azure Portal](https://portal.azure.com/) -2. Create a new OpenAI resource (or use an existing one) -3. Deploy a **GPT-4o** model (or GPT-4 Turbo) for text analysis -4. Copy your deployment name, endpoint URL, and API key from the **Keys and Endpoint** section - -**Install NuGet Package:** - -Run the following command in the Package Manager Console or terminal: - -``` -dotnet add package Azure.AI.OpenAI --version 1.0.0-beta.12 -``` - -Alternatively, use the NuGet Package Manager in Visual Studio to install the [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI/) package. - -### Step 2: Create the Azure OpenAI service class - -Create a helper class to manage communication with Azure OpenAI. **Important**: Store your API key securely using environment variables or Azure Key Vault, not hard coded strings. - -{% tabs %} - -{% highlight c# %} - -using Azure; -using Azure.AI.OpenAI; -using System; -using System.Threading.Tasks; - -internal class AzureOpenAIService -{ - const string endpoint = "https://{YOUR_END_POINT}.openai.azure.com"; - const string deploymentName = "GPT-4O"; - const string imageDeploymentName = "DALL-E"; - string key = "API key"; - - OpenAIClient? client; - ChatCompletionsOptions? chatCompletions; - - internal AzureOpenAIService() - { - - } -} - -{% endhighlight %} - -{% endtabs %} - -### Step 3: Initialize the OpenAI Client - -To set up the connection to Azure OpenAI. Refer to the following code. - -{% tabs %} - -{% highlight c# %} - -// At the time of required. -this.client = new OpenAIClient(new Uri(endpoint), new AzureKeyCredential(key)) - -{% endhighlight %} - -{% endtabs %} - -This connection allows you to send prompts to the model and **receive responses**, which can be used to generates. - -### Step 4: Implement the GetResultsFromAI Method - -Implement a method to retrieve responses from the Azure OpenAI API based on user prompts. - -{% tabs %} - -{% highlight c# %} - -using Azure; -using Azure.AI.OpenAI; -using System; -using System.Threading.Tasks; - -public async Task GetResultsFromAI(string userPrompt) -{ - if (this.Client != null && this.chatCompletions != null) - { - // Add the system message and user message to the options. - this.chatCompletions.Messages.Add(new ChatRequestSystemMessage("You are a predictive analytics assistant.")); - this.chatCompletions.Messages.Add(new ChatRequestUserMessage(userPrompt)); - try - { - var response = await Client.GetChatCompletionsAsync(this.chatCompletions); - return response.Value.Choices[0].Message.Content; - } - catch - { - return string.Empty; - } - } - return string.Empty; -} - -{% endhighlight %} - -{% endtabs %} - -## Integrating AI-Driven Anomaly Detection in .NET MAUI DataGrid - -After completing the Azure OpenAI setup above, use the `.NET MAUI DataGrid` control to display data and visualize anomaly detection results. This section demonstrates how to style cells dynamically based on AI analysis and highlight outliers in real-time. - -Before proceeding, review the [.NET MAUI DataGrid getting started guide](https://www.syncfusion.com/maui-controls/maui-datagrid). - -### Step 1: Create the DataGrid Layout - -{% tabs %} - -{% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -{% endhighlight %} - -{% endtabs %} - -### Step 2: Enable AI-Powered .NET MAUI DataGrid - -In your code-behind or ViewModel, create a method that sends the DataGrid data to Azure OpenAI for analysis. The AI service analyzes the dataset and returns anomaly detection results in JSON format, including the row index and anomaly status for each record. This data is then parsed and applied to the SfDataGrid by dynamically updating cell styles using the `AnomalyDetectionConverter` or by setting custom properties in the ViewModel. - -{% tabs %} - -{% highlight c# %} - -private async Task GetAnomalyResponseAsync() -{ - - try - { - var repo = this.datagrid.BindingContext as MachineDataRepository; - if (repo == null || repo.MachineDataCollection == null || repo.MachineDataCollection.Count == 0) - return; - - var gridReport = new GridReport - { - DataSource = repo.MachineDataCollection - }; - - var gridReportJson = GetSerializedGridReport(gridReport); - - string userInput = ValidateAndGeneratePrompt(gridReportJson); - - var result = await openAi.GetResponseFromOpenAI(userInput); - - if (string.IsNullOrWhiteSpace(result)) - { - result = openAi.GetAnomalyDetectionResponse(); - } - - result = result.Replace("```json", "").Replace("```", "").Trim(); - - GridReport? deserializeResult = DeserializeResult(result); - - if (deserializeResult?.DataSource != null && gridReport.DataSource != null) - { - - string[] anomalies = deserializeResult.DataSource - .Select(x => x.AnomalyDescription) - .ToArray(); - - var colorConverter = new AnomalyDetectionConverter(); - colorConverter.GetString(anomalies); - - var anomalyDescriptionColumn = new DataGridTextColumn() { HeaderText = "Anomaly Description", MappingName = "AnomalyDescription",ColumnWidthMode = ColumnWidthMode.Auto }; - - this.datagrid?.Columns.Add(anomalyDescriptionColumn); - - if (gridReport.DataSource != null) - { - foreach (var item in gridReport.DataSource) - { - if (generateDataAlone.Contains(item.MachineID)) - { - index++; - item.AnomalyDescription = deserializeResult.DataSource[index].AnomalyDescription; - } - } - } - } - - this.datagrid.Refresh(); - } - finally - { - this.activityIndicator.IsRunning = false; - isButtonClicked = false; - } -} - -{% endhighlight %} - -{% endtabs %} - -![AI driven Smart Anomaly Detection .NET MAUI DataGrid](Images/smart-ai-solutions/anamoly-detection.gif) - -You can find the complete sample from this [link](https://github.com/SyncfusionExamples/MAUI-DataGrid-Features/tree/master/AI%20Demos/AnamolyDetection). diff --git a/grid-sdk/maui/data-grid/AI-driven-predictive-data-entry.md b/grid-sdk/maui/data-grid/AI-driven-predictive-data-entry.md deleted file mode 100644 index 2c9ab561..00000000 --- a/grid-sdk/maui/data-grid/AI-driven-predictive-data-entry.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -layout: post -title: AI-Driven predictive data entry in .NET MAUI Data Grid | Syncfusion -description: Learn all about the AI-driven predictive data entry feature in Syncfusion® .NET MAUI Data Grid, including setup, capabilities, and usage examples. -platform: grid-sdk -control: SfDataGrid -documentation: ug ---- - -# AI-Driven Predictive Data Entry in .NET MAUI DataGrid (SfDataGrid) - -This document explains how to implement AI-assisted predictive data entry with the Syncfusion [.NET MAUI DataGrid](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html). It demonstrates using Azure OpenAI to predict GPA and grade values based on historical student performance data. - -## Integrating Azure OpenAI with the .NET MAUI App - -### Step 1: Set Up Azure OpenAI Service - -First, open [Visual Studio](https://visualstudio.microsoft.com/) and [create a new .NET MAUI app](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android). - -**Configure Azure OpenAI:** - -1. Log in to the [Azure Portal](https://portal.azure.com/) -2. Create a new OpenAI resource (or use an existing one) -3. Deploy a **GPT-4o** model for text analysis -4. Copy your deployment name, endpoint URL, and API key from the **Keys and Endpoint** section - -**Install NuGet Package:** - -Run the following command in the Package Manager Console or terminal: - -``` -dotnet add package Azure.AI.OpenAI --version 1.0.0-beta.12 -``` - -Alternatively, use the NuGet Package Manager in Visual Studio to install the [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI/) package. - -### Step 2: Create the Azure OpenAI Service Class - -To configure Azure OpenAI, use the GPT-4O model for text analysis. Set up the OpenAIClient as shown in the following code example. This class provides the foundation for making API calls to Azure OpenAI. - -{% tabs %} - -{% highlight c# %} - -using Azure; -using Azure.AI.OpenAI; -using System; -using System.Threading.Tasks; - -internal class AzureOpenAIService -{ - const string endpoint = "https://{YOUR_END_POINT}.openai.azure.com"; - const string deploymentName = "GPT-4O"; - const string imageDeploymentName = "DALL-E"; - string key = "API key"; - - OpenAIClient? client; - ChatCompletionsOptions? chatCompletions; - - internal AzureOpenAIService() - { - - } -} - -{% endhighlight %} - -{% endtabs %} - -### Step 3: Initialize the OpenAI Client - -Initialize the OpenAIClient in your AzureOpenAIService constructor or initialization method. This establishes the connection to Azure OpenAI: - -{% tabs %} - -{% highlight c# %} - -// Initialize when required -this.client = new OpenAIClient(new Uri(endpoint), new AzureKeyCredential(key)); - -{% endhighlight %} - -{% endtabs %} - -This connection allows you to send prompts to the model and receive predictions, which can then be used to populate your DataGrid with AI-generated values. - -### Step 4: Implement the GetResultsFromAI Method - -Implement a method to retrieve predictions from the Azure OpenAI API. - -{% tabs %} - -{% highlight c# %} - -using Azure; -using Azure.AI.OpenAI; -using System; -using System.Threading.Tasks; - -public async Task GetResultsFromAI(string userPrompt) -{ - if (this.Client != null && this.chatCompletions != null) - { - // Add the system message and user message to the options. - this.chatCompletions.Messages.Add(new ChatRequestSystemMessage("You are a predictive analytics assistant.")); - this.chatCompletions.Messages.Add(new ChatRequestUserMessage(userPrompt)); - try - { - var response = await Client.GetChatCompletionsAsync(this.chatCompletions); - return response.Value.Choices[0].Message.Content; - } - catch - { - return string.Empty; - } - } - return string.Empty; -} - -{% endhighlight %} - -{% endtabs %} - -## Integrating AI-Driven Predictive Data Entry in .NET MAUI DataGrid - -After completing the Azure OpenAI setup above, use the [.NET MAUI DataGrid](https://www.syncfusion.com/maui-controls/maui-datagrid) control to display student data and enable AI-powered predictions. This section demonstrates how to leverage AI services to automatically predict and populate values based on historical patterns and existing student data. - -Before proceeding, review the [.NET MAUI DataGrid getting started guide](https://www.syncfusion.com/maui-controls/maui-datagrid). - -### Step 1: Create the DataGrid Layout - -{% tabs %} - -{% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -{% endhighlight %} - -{% endtabs %} - -### Step 2: Enable AI-Powered .NET MAUI DataGrid - -Create a method to send student data to Azure OpenAI for prediction. The AI service analyzes historical GPA data and returns predictions for Final Year GPA, CGPA, and Total Grade. After deserializing the JSON response, add these new columns to the DataGrid and populate each row with the predicted values. - -**Note:** The helper methods `GetSerializedGridReport()`, `ValidateAndGeneratePrompt()`, and `DeserializeResult()` are assumed to be implemented in your ViewModel or code-behind to handle data serialization and JSON parsing. - -{% tabs %} - -{% highlight c# %} - -private async Task GetResponseAsync() -{ - try - { - string prompt = - "Final year GPA column should be updated based on GPA of FirstYearGPA, SecondYearGPA and ThirdYearGPA columns. " + - "Total GPA (CGPA) should be updated based on the average of all years GPA. " + - "Total Grade should be updated based on total GPA. " + - "Updated grade rules: 0 - 2.5 = F, 2.6 - 2.9 = C, 3.0 - 3.4 = B, 3.5 - 3.9 = B+, 4.0 - 4.4 = A, 4.5 - 5 = A+. " + - "Average value decimals should not exceed 1 digit. " + - "Return JSON ONLY, no explanation. " + - "Schema: { \"GenerateDataSource\": [ { \"StudentID\": \"string\", \"FinalYearGPA\": number, \"TotalGPA\": number, \"TotalGrade\": \"string\" } ] }. " + - "Remove ```json and ``` if they are present."; - - var repo = (this.datagrid.BindingContext as GenerateDataCollection); - if (repo == null || repo.Predictivedatas == null || repo.Predictivedatas.Count == 0) - return; - - GenerateGridReport gridReport = new GenerateGridReport() - { - GenerateDataSource = repo.Predictivedatas - }; - - var gridReportJson = GetSerializedGridReport(gridReport); - string userInput = ValidateAndGeneratePrompt(gridReportJson, prompt); - - var result = await openAi.GetResponseFromOpenAI(userInput); - - result = result.Replace("```json", "").Replace("```", "").Trim(); - - GenerateGridReport deserializeResult = DeserializeResult(result); - - if (deserializeResult?.GenerateDataSource != null && gridReport.GenerateDataSource != null) - { - foreach (var item in gridReport.GenerateDataSource) - { - if (item != null) - { - if (item.StudentID == gridReport.GenerateDataSource[index].StudentID) - { - if (deserializeResult != null && deserializeResult.GenerateDataSource != null) - { - gridReport.GenerateDataSource[index].FinalYearGPA = deserializeResult.GenerateDataSource[index].FinalYearGPA; - gridReport.GenerateDataSource[index].TotalGrade = deserializeResult.GenerateDataSource[index].TotalGrade; - gridReport.GenerateDataSource[index].TotalGPA = deserializeResult.GenerateDataSource[index].TotalGPA; - } - } - } - } - } - - this.datagrid.Refresh(); - } - finally - { - this.activityIndicator.IsRunning = false; - isButtonClicked = false; - } -} - -{% endhighlight %} - -{% endtabs %} - - -![AI driven Smart Predictive Data Entry .NET MAUI DataGrid](Images/smart-ai-solutions/predictive-data-entry.gif) - -You can find the complete sample from this [link](https://github.com/SyncfusionExamples/MAUI-DataGrid-Features/tree/master/AI%20Demos/PredictiveDataEntry).