Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 14 additions & 6 deletions blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md
Original file line number Diff line number Diff line change
Expand Up @@ -228,9 +228,21 @@ await builder.Build().RunAsync();
{% endhighlight %}
{% endtabs %}

## Razor Component
## AI-powered Sentiment Analysis in Kanban

This section demonstrates how to implement sentiment analysis in the Syncfusion Blazor Kanban component using AI. The AI Assistant evaluates the emotional tone of each task description and displays a corresponding emoji (😊, 😐, 😞) to help teams quickly assess the mood or urgency of tasks. This can be especially useful in agile workflows where emotional context can influence task priority and team communication.
The AI-powered sentiment analysis feature in Syncfusion Blazor Kanban evaluates customer feedback for delivered tasks and displays emojis (😊, 😐, 😞) to indicate positive, neutral, or negative sentiment. This helps teams quickly assess satisfaction levels and prioritize follow-up actions, improving customer experience in service workflows.

### UI Structure and User Interaction (`Home.razor`)

The Razor page includes a Kanban board for managing pizza orders across columns like Menu, Order, Ready to Serve, and Delivered. A progress button triggers sentiment analysis, while custom card templates display task details such as title, description, and delivery date. After analysis, an emoji appears on delivered tasks to represent sentiment. A dialog template supports editing fields like category, size, and feedback, with conditional rendering based on task type.

### AI Sentiment Analysis Logic (`Home.razor.cs`)

The `GetScore` method serializes Kanban data to JSON and sends it to the AI service with a prompt requesting a `SentimentScore` (1–5) based on feedback. The AI response is cleaned and deserialized into the data model, updating each task’s score and assigning emojis: 😢 for 1–2, 😐 for 3, and 😀 for 4–5. State flags like `ShowScore` control rendering, while progress events (`Begin`, `End`) update button text during processing.

### Data Binding and Error Handling

The `SfKanban` binds to the `Pizza` list using `Category` as the `KeyField`, with dynamic columns from `columnData`. Card templates conditionally render sentiment emojis for delivered tasks. If AI analysis fails, the spinner state prevents premature interactions, and `StateHasChanged()` refreshes the UI after completion.

(`Home.razor`)

Expand Down Expand Up @@ -520,10 +532,6 @@ If the AI service fails to return a valid response, the Kanban will display an e
- **Network Issues**: Check connectivity to the AI service endpoint, especially for self-hosted Ollama instances.
- **Large Prompts**: Processing large text inputs may cause timeouts. Consider reducing the prompt size or optimizing the request for efficiency.

## Performance Considerations

When handling large text content, ensure the Ollama server has sufficient resources (CPU/GPU) to process requests efficiently. For long-form content or batch operations, consider splitting the input into smaller segments to avoid performance bottlenecks. Test the application with your specific use case to determine optimal performance.

## Sample Code

A complete working example is available in the [Syncfusion Blazor AI Samples GitHub repository](https://github.com/syncfusion/smart-ai-samples).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -228,9 +228,27 @@ await builder.Build().RunAsync();
{% endhighlight %}
{% endtabs %}

## Razor Component
## AI-powered Kanban Smart Card Generation

This section demonstrates how to implement the Syncfusion Blazor Kanban component with AI-powered task generation. The AI Assistant analyzes the provided project description and automatically suggests relevant tasks, which are then displayed in the Kanban board.
The AI-powered Kanban feature integrates Syncfusion Blazor Kanban with an AI service to automatically create structured task cards from user input. It combines a simple UI for project details with backend logic that generates tasks and updates the Kanban board dynamically.

### UI Structure and User Interaction (`Home.razor`)

The Razor page includes an input form for project details and a Kanban board for visualizing tasks. Users enter a project description and task count, then click Generate Tasks to start AI processing. A modal dialog ensures clean input for new projects, while conditional rendering switches between input and Kanban views. Cards display essential details like title, description, and story points with drag-and-drop support.

### AI Task Generation Logic (`Home.razor.cs`)

The `GenerateProjectTasks` method builds a prompt for the AI service, requesting tasks in strict JSON format with fields like Id, Title, Status, and Due Date. The response is cleaned and deserialized into `SmartSuggestionDataModel` objects, which are added to the Kanban data source. Progress button events provide feedback during generation, and default values like `Status="Open"` and `Color="#000000"` are applied to new tasks.

### Data Binding and Kanban Configuration

The `SfKanban` component binds to the `smartSuggestion` list, using `Status` as the `KeyField` to organize cards into columns (To Do, In Progress, Review, Done).
Card templates are customized via `KanbanCardSettings` to show essential task details with visual clarity.
A fallback `SfGrid` view allows tabular task management with inline editing, while a toggle button switches between Grid and Kanban layouts.

### Error Handling and User Feedback

If AI generation fails, a toast notification displays an error message without disrupting the workflow. Input validation ensures both project details and task count are provided before submission. State flags manage UI transitions and prevent issues during asynchronous operations.

(`Home.razor`)

Expand Down Expand Up @@ -573,10 +591,6 @@ If the AI service fails to return a valid response, the Kanban will display an e
- **Network Issues**: Check connectivity to the AI service endpoint, especially for self-hosted Ollama instances.
- **Large Prompts**: Processing large text inputs may cause timeouts. Consider reducing the prompt size or optimizing the request for efficiency.

## Performance Considerations

When handling large text content, ensure the Ollama server has sufficient resources (CPU/GPU) to process requests efficiently. For long-form content or batch operations, consider splitting the input into smaller segments to avoid performance bottlenecks. Test the application with your specific use case to determine optimal performance.

## Sample Code

A complete working example is available in the [Syncfusion Blazor AI Samples GitHub repository](https://github.com/syncfusion/smart-ai-samples).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -228,9 +228,17 @@ await builder.Build().RunAsync();
{% endhighlight %}
{% endtabs %}

## Razor Component
## AI-powered Rich Text Editor in Blazor

This section implements the Syncfusion Blazor Rich Text Editor with AI-powered content assistance features such as rephrase, correct grammar, summarize, elaborate, and translate.
The Syncfusion Blazor Rich Text Editor can integrate AI features to help users create better content. It supports grammar correction, rephrasing for clarity, summarizing long text, elaborating short text, and translating content into different languages. These features work by sending selected text to an AI service and updating the editor with improved content.

### How AI Works in Rich Text Editor

When a user selects text and chooses an AI option, the editor captures the text and opens a dialog. The dialog shows the original text and a placeholder for AI-generated content. The selected text and chosen action are sent to the AI service, which processes the request and returns the result. Users can then regenerate, copy, or replace the content in the editor.

### UI Implementation in Razor (`Home.razor`)

The Razor file sets up the Rich Text Editor with custom toolbar items for AI actions. It includes an AI Assistant dropdown for options like Rephrase, Summarize, and Translate, and a dialog to display AI suggestions. Additional UI elements like chips for tone and dropdowns for language selection make the experience interactive.

(`Home.razor`)

Expand Down Expand Up @@ -388,6 +396,10 @@ This section implements the Syncfusion Blazor Rich Text Editor with AI-powered c

```

### Backend Logic in C# (`Home.razor.cs`)

The C# file manages dialog visibility, button states, and AI calls. When an option is selected, `DialogueOpen()` captures the selected text and opens the dialog. `UpdateAISuggestionsData()` sends the query to the AI service and updates the UI with the result. Users can regenerate or replace content easily.

`Home.razor.cs`

```csharp
Expand Down Expand Up @@ -687,6 +699,10 @@ namespace AISamples.Components.Pages

```

## Workflow Summary

Select text → Choose AI action → Dialog opens → AI processes → Updated content displayed → User copies or replaces content.

## Error Handling and Troubleshooting

If the AI service fails to return a valid response, the Rich Text Editor will display an error message ("Oops! Please try again!"). Common issues include:
Expand All @@ -696,10 +712,6 @@ If the AI service fails to return a valid response, the Rich Text Editor will di
- **Network Issues**: Check connectivity to the AI service endpoint, especially for self-hosted Ollama instances.
- **Large Prompts**: Processing large text inputs may cause timeouts. Consider reducing the prompt size or optimizing the request for efficiency.

## Performance Considerations

When handling large text content, ensure the Ollama server has sufficient resources (CPU/GPU) to process requests efficiently. For long-form content or batch operations, consider splitting the input into smaller segments to avoid performance bottlenecks. Test the application with your specific use case to determine optimal performance.

## Sample Code

A complete working example is available in the [Syncfusion Blazor AI Samples GitHub repository](https://github.com/syncfusion/smart-ai-samples).
Expand Down