- Smart Pivot Table diff --git a/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md b/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md new file mode 100644 index 0000000000..d66c1982d1 --- /dev/null +++ b/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md @@ -0,0 +1,531 @@ +--- +layout: post +title: Sentiment Analysis in Blazor Kanban | Syncfusion +description: Learn how to use Syncfusion Blazor Kanban with AI to analyze the emotional tone of tasks using sentiment analysis. +platform: Blazor +control: AI Integration +documentation: ug +keywords: Blazor Kanban, AI sentiment analysis, Syncfusion Blazor AI +--- + +# Sentiment Analysis in Blazor Kanban Component + +This guide demonstrates how to use the [**Syncfusion.Blazor.AI**](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to perform sentiment analysis in the Syncfusion Blazor Kanban component. The AI integration enables automatic detection of emotional tone in task descriptions, helping teams prioritize and respond to tasks more effectively. These capabilities are powered by AI models hosted via services like OpenAI, Azure OpenAI, or Ollama. + +## Prerequisites + +Ensure the following NuGet packages are installed based on your chosen AI service: + +### For OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** + +### For Azure OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** +- **Azure.AI.OpenAI** + +### For Ollama +- **Microsoft.Extensions.AI** +- **OllamaSharp** + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }} +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI # For OpenAI or Azure OpenAI +Install-Package Azure.AI.OpenAI # For Azure OpenAI +Install-Package OllamaSharp # For Ollama + +{% endhighlight %} +{% endtabs %} + +## Add Stylesheet and Script Resources + +Include the theme stylesheet and script from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) in the `` of your main page: + +- For **.NET 6** Blazor Server apps, add to **~/Pages/_Layout.cshtml**. +- For **.NET 8 or .NET 9** Blazor Server apps, add to **~/Components/App.razor**. + +```html + + + + + + +``` + +N> Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for methods to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Refer to the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic for different approaches to adding script references in your Blazor application. + +## Configure AI Service + +Choose one of the following AI services (OpenAI, Azure OpenAI, or Ollama) based on your requirements: +- **OpenAI**: Best for cloud-based, general-purpose AI models with minimal setup. +- **Azure OpenAI**: Ideal for enterprise-grade deployments with enhanced security and scalability. +- **Ollama**: Suitable for self-hosted, privacy-focused AI models. + +Follow the instructions for your selected service to register the AI model in your application. + +### OpenAI + +Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`) in `openAIModel`. + +- Install the required NuGet packages: + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +- Add the following to the **~/Program.cs** file in your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Microsoft.Extensions.AI; +using OpenAI; + +var builder = WebApplication.CreateBuilder(args); + +string openAIApiKey = "API-KEY"; +string openAIModel = "OPENAI_MODEL"; +OpenAIClient openAIClient = new OpenAIClient(openAIApiKey); +IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient(); +builder.Services.AddChatClient(openAIChatClient); +builder.Services.AddSingleton
+
+
+```
+
+`Home.razor.cs`
+
+```csharp
+
+using System.Text.Json;
+using AISamples.Components.Models;
+using Syncfusion.Blazor.DropDowns;
+using Syncfusion.Blazor.Inputs;
+using Syncfusion.Blazor.Kanban;
+
+namespace AISamples.Components.Pages
+{
+ public partial class Home
+ {
+ SfDropDownList
+
+
+ @foreach (ColumnModel item in columnData)
+ {
+
+
+
+ @{
+ PizzaDataModel card = (PizzaDataModel)context;
+
+
+
+ @{
+ PizzaDataModel data = (PizzaDataModel)context;
+
+
+
+ }
+
+
+
+
+
+
+ }
+
+
+
+
+
+ |
+ |
+
+
+
+
+
+
+
+ @card.Title
+
+
+
|
+ |||||||||||||||
| ID | +
+ |
+
| Category | +
+ |
+
| Title | +
+ |
+
| Size | +
+ |
+
| Description | +
+ |
+
| Deliver | +
+ |
+
| Feedback | +
+ |
+
+
+}
+else
+{
+
+
+
+
+
+
+ AI Smart Task Suggestion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+
+
+ @if (showBacklogs)
+ {
+
+
+
+ if (!showBacklogBoard)
+ {
+ Kanban Board
+
+ Add New Projects
+
+
+
+
+
+
+
+ @{
+ var AISuggestion = (context as SmartSuggestionDataModel);
+ }
+
+
+
+
+
+ }
+ else if (showBacklogBoard)
+ {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @{
+ SmartSuggestionDataModel card = (SmartSuggestionDataModel)context;
+
+
+
+ }
+ }
+
+
+ }
+
+
+
+
+
+ @card.Title
+
+
+
+ @card.Description
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ AI Assistant
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @if (this.enableRephraseChips)
+ {
+
+
+
+
+ }
+ else if (this.enableLanguageList)
+ {
+
+
+ Target Language
+
+
+
+
+
+ }
+
+
+
+
+ @if (!isContentGenerating)
+ {
+ @if (noResultsFound)
+ {
+
+
+
+
+
+
+ }
+ else {
+
+
+
+
+
+ No results found
+
+
+ }
+ } else {
+
+
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ Regenerate
+
+
+ @if (!string.IsNullOrEmpty(sentiment)) {
+
+ }
+ Copy
+ Replace
+
+ Integrate AI with the Editor
Integrate the AI assistant into the rich text editor by capturing the content from the editor, sending it to the AI service, and displaying the results or suggestions back in the editor.
Summarize
This function condenses the selected content into a brief summary, capturing the main points succinctly.
Elaborate
This function expands the selected content, adding additional details and context.
Rephrase
This function rewrites the selected content to convey the same meaning using different words or structures. It also enables rephrase options and disables language selection.
Correct Grammar
This function reviews and corrects the grammar of the selected content, ensuring it adheres to standard grammatical rules.
Translate
This function translates the selected content into the specified language, enabling language selection and disabling rephrase options.
"; + private bool dialogVisible { get; set; } + private bool enabelAIAssitantButton { get; set; } = false; + private bool enabelRegenerateContentButton { get; set; } = false; + private bool enabelContentButton { get; set; } = true; + private string promptQuery = string.Empty; + private string subQuery = string.Empty; + private string[] chipValue = new[] { "Standard" }; + private string translatelanguage = "EN"; + private string dropVal { get; set; } = "Rephrase"; + private bool enableRephraseChips { get; set; } = true; + private bool enableLanguageList { get; set; } = false; + private bool noResultsFound { get; set; } = false; + public bool isContentGenerating { get; set; } = true; + private string AIResult { get; set; } = string.Empty; + private bool isSentimentCheck { get; set; } = false; + private MarkdownPipeline pipeline { get; set; } = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build(); + private string sentiment = ""; + private string apiResultData = ""; + private string ButtonClass = "e-tbar-btn"; + private void UpdateStatus(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args) + { + Value = args.Value; + enabelAIAssitantButton = string.IsNullOrWhiteSpace(Value); + } + private void OnActionCompleteHandler(Syncfusion.Blazor.RichTextEditor.ActionCompleteEventArgs args) + { + if (args.RequestType == "SourceCode") + { + this.ButtonClass = "e-tbar-btn e-overlay"; + } + if (args.RequestType == "Preview") + { + this.ButtonClass = "e-tbar-btn"; + } + } + private void UpdateTextAreaStatus(InputEventArgs args) + { + Value = args.Value; + enabelRegenerateContentButton = string.IsNullOrWhiteSpace(Value); + } + private async Task AIQuerySelectedMenu(MenuEventArgs args) + { + await DialogueOpen(args.Item.Text); + } + private async Task Rephrase() + { + await DialogueOpen("Rephrase"); + } + private async Task DialogueOpen(string selectedQuery) + { + var selectionText = await rteObj.GetSelectedHtmlAsync(); + if (!string.IsNullOrEmpty(selectionText)) + { + dialogVisible = true; + dropVal = QueryList.FirstOrDefault(q => q.Text.Equals(selectedQuery, StringComparison.OrdinalIgnoreCase))?.ID; + promptQuery = selectionText; + await this.rteObj.SaveSelectionAsync(); + await this.leftRteChildObj.RefreshUIAsync(); + await UpdateAISuggestionsData(selectedQuery); + } + else + { + await this.ToastObj.ShowAsync(new ToastModel { ContentTemplate = @GetTemplate(true), ShowCloseButton = true, Timeout = 0 }); + } + } + private async Task SelectedChipsChanged(Syncfusion.Blazor.Buttons.SelectionChangedEventArgs args) + { + if (chipValue.Length == 0 && args != null && args.RemovedItems.Length > 0) + { + chipValue = new [] { args.RemovedItems[0] }; + } + await UpdateAISuggestionsData("Rephrase"); + } + private async Task AITranslateDropdownList(ChangeEventArgs