Ajout d’intelligence aux applications Blazor avec des composants intelligents

Apprenez à ajouter une IA à vos applications Blazor avec des composants intelligents .NET.

Dans cet article, vous en apprendrez sur .NET Smart Components, un moyen très original et productif d’intégrer l’intelligence artificielle dans des formulaires de nos applications qui peuvent sans aucun doute être très utiles aux utilisateurs finaux. Commençons!

Que sont les composants intelligents?

.NET Les composants intelligents montrent comment ajouter rapidement les fonctionnalités AI aux applications .NET. Ce sont une série de composants que vous pouvez ajouter aux applications Blazor ou aux applications basées sur des pages MVC / Razor pour permettre les opérations à l’aide de l’intelligence artificielle, telles que le remplissage des champs de formulaire à partir d’informations sur le presse-papiers. L’un des objectifs de composants intelligents est d’inspirer les futurs projets qui mettent en œuvre l’intelligence artificielle et aident les utilisateurs, comme le Projet que j’ai fait avec .net Maui Ai Contrôle rapide de Progress Telerik.

Test des composants intelligents .NET

Le moyen le plus simple de tester les composants intelligents est de télécharger ou de cloner le projet à partir du Référentiel officiel de GitHub. Une fois que vous l’avez ouvert dans Visual Studio 2022, vous devez configurer les paramètres du LLM que vous utiliserez pour les composants intelligents. Examinant le code, vous verrez dans le fichier Smart Components | src | SmartComponents.Inference.OpenAI | ApiConfig.cs que les valeurs LLM sont récupérées comme suit:

internal class ApiConfig
{
    public string? ApiKey { get; }
    public string? DeploymentName { get; }
    public Uri? Endpoint { get; }
    public bool SelfHosted { get; }

    public ApiConfig(IConfiguration config)
    {
        var configSection = config.GetRequiredSection("SmartComponents");

        SelfHosted = configSection.GetValue<bool?>("SelfHosted") ?? false;

        if (SelfHosted)
        {
            Endpoint = configSection.GetValue<Uri>("Endpoint")
                ?? throw new InvalidOperationException("Missing required configuration value: SmartComponents:Endpoint. This is required for SelfHosted inference.");

            
            DeploymentName = configSection.GetValue<string>("DeploymentName");

            
            ApiKey = configSection.GetValue<string>("ApiKey");
        }
        else
        {
            
            Endpoint = configSection.GetValue<Uri>("Endpoint");

            
            DeploymentName = configSection.GetValue<string>("DeploymentName")
                ?? throw new InvalidOperationException("Missing required configuration value: SmartComponents:DeploymentName");

            ApiKey = configSection.GetValue<string>("ApiKey")
                ?? throw new InvalidOperationException("Missing required configuration value: SmartComponents:ApiKey");
        }
    }
}

Dans le code ci-dessus, vous pouvez voir qu’il valide d’abord si un LLM local tel que Ollla est utilisé; Sinon, il récupère des données telles que Endpoint, DeploymentName et ApiKeyqui peut être configuré avec les données d’un compte OpenAI ou Azure OpenAI.

Cette configuration est tirée du projet où les composants intelligents seront utilisés. Dans mon cas, comme je veux expérimenter avec Blazor, je dois configurer le fichier SmartComponents | Samples | ExampleBlazorApp | appsettings.json En ajoutant la configuration LLM pour Azure OpenAI, comme suit:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "SmartComponents": {
    "ApiKey": "your-api-key",
    "DeploymentName": "your-deployment-name",

    
    "Endpoint": "your-endpoint"
  },
  "AllowedHosts": "*"
}

Une fois le projet configuré avec les informations ci-dessus, vous pouvez l’exécuter, qui apparaîtra comme suit:

Examinons les composants Smart .NET un par un.

La pâte intelligente du composant .Net Smart

Le premier composant intelligent que nous analyserons est Pâte intelligente. Il s’agit d’un bouton qui vous permet de remplir automatiquement les informations de formulaire en fonction du contenu du presse-papiers de l’utilisateur. Dans les exemples, il nous permet de remplir des informations pour un formulaire de base (nom et âge), un formulaire d’adresse postale et un formulaire de rapport de bogue.

Par exemple, nous pouvons copier un Problème de github Comme ce qui suit dans le presse-papiers:

Maintenant que Microsoft.Extensions.ai.Abstractions est publié, nous devons remplacer IinferenceBackend par ichatClient. Cela devrait également nous permettre de supprimer complètement SmartComponents.inference.openai, car le code ici fonctionnerait instantanément avec n’importe quel backend LLM qui a un ichatclient correspondant.

Alors, si nous allons au Rapport de bogue exemple et appuyez sur le Pâte intelligente bouton, nous pouvons voir comment les informations de formulaire sont automatiquement remplies:

Le composant Smart .NET Smart TextArea

Le prochain composant intelligent est le Smart TextAreaqui est une mise à niveau vers une TextArea traditionnelle utilisant l’IA. Ce composant vous permet de compléter les phrases suggérées fournies par l’IA, avec l’avantage que vous pouvez guider l’achèvement en utilisant vos propres phrases, ton, politiques, URL, phrases courantes, etc.

Dans l’exemple d’application, une démo de base et une démo qui vous permet de configurer les paramètres d’achèvement est affichée. Ces paramètres vous permettent de prédéfinir des informations telles que le préréglage, le rôle de la personne répondant à un message et un ensemble de phrases courantes que l’utilisateur peut utiliser pour créer des réponses rapides. Vous trouverez ci-dessous un exemple du formulaire rempli en fonction des informations configurées:

Le composant Smart .NET Smart Combox

Le Smart Combobox Composant a la caractéristique unique de fournir des suggestions basées sur la correspondance sémantique au lieu de la recherche de sous-chaîne. Cela signifie que les suggestions liées au terme entré seront affichées, même si elles ne correspondent pas exactement aux valeurs dans le ComboBox.

Dans l’exemple suivant, vous pouvez voir comment dans la catégorie de dépenses, le terme Télévision intelligente suggère l’article Électronique En tant que première option, même si le terme Télévision intelligente ne fait pas partie des éléments de combobox:

Ce composant peut sans aucun doute économiser beaucoup de maux de tête.

Intégres locaux

Contrairement aux composants visuels que nous avons vus plus tôt, Intégres locaux n’ont pas d’interface graphique en tant que telle. Leur utilité réside dans le calcul de la similitude sémantique entre deux chaînes de langage naturel, permettant de trouver la correspondance la plus proche d’un ensemble de candidats.

De même, contrairement aux composants précédents, cette évaluation est effectuée directement sur le CPU, donc aucun fournisseur d’IA externe n’est utilisé. Dans l’exemple suivant, vous pouvez voir comment pour le terme Ordinateuril y a une plus grande similitude avec le terme Électronique aux autres termes précédemment entrés:

Intégrer .NET Smart Components dans un projet de blazor

Que serait un article sans démontrer comment utiliser les composants intelligents .NET dans vos propres projets? Pour ce faire, la première chose que vous devez faire est de créer un nouveau projet. Dans mon cas, j’ai utilisé le Application Web Blazor modèle avec un Mode de rendu interactif se mettre à Serveur et Emplacement d’interactivité se mettre à Par page / composant.

Une fois que vous avez créé le projet, vous devez ajouter les références suivantes à votre solution, qui font partie du Smartcomponents projet:

• SmartComponents.aspnetcore
• SmartComponents.inference.openai
• SmartComponents.localembeddings

Une fois ajouté, votre solution devrait ressembler à ceci:

Après avoir ajouté les projets à la solution, vous devez les référencer en cliquant avec le bouton droit sur le projet Blazor | Ajouter | Référence du projetet enfin vérifier tous les projets de la fenêtre qui apparaît:

Maintenant que vous avez ajouté les références aux projets .NET Smart Components, voyons comment les utiliser.

Configuration du projet Blazor pour utiliser des composants intelligents

Avant de pouvoir utiliser les composants intelligents de votre projet, vous devez configurer le Program.cs Fichier de votre projet Blazor. Tout d’abord, vous devez ajouter le service SmartComponents en utilisant le AddSmartComponents méthode, ainsi que ajouter une instance singleton de LocalEmbedder Pour utiliser des intérêts locaux comme suit:

var builder = WebApplication.CreateBuilder(args);
...
builder.Services.AddSmartComponents()
    .WithInferenceBackend<OpenAIInferenceBackend>()
    .WithAntiforgeryValidation();

builder.Services.AddSingleton<LocalEmbedder>();

var app = builder.Build();    

Dans le code ci-dessus, vous pouvez également voir qu’un backend d’inférence basé sur OpenAI ou Azure OpenAI a été spécifié. Cette instance prendra les valeurs du fichier de configuration spécifié dans le fichier de configuration pour utiliser le service LLM souhaité.

N’oubliez pas que la configuration LLM se trouve dans le appsettings.json Fichier de votre projet Blazor, qui devrait ressembler à ceci avec vos propres informations:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "SmartComponents": {
    "ApiKey": "your-api-key",
    "DeploymentName": "your-deployment-name",

    
    "Endpoint": "your-endpoint"
  },
  "AllowedHosts": "*"
}

Avec la configuration ci-dessus, nous sommes prêts à créer des formulaires qui utilisent des composants intelligents.

Intégrer le composant Smart Paste dans une application Blazor

Pour tester le composant Smart Paste, supposons que nous disposons d’un formulaire qui permet aux utilisateurs de soumettre des propositions pour donner une conférence. J’ai créé un composant de type page appelé Sessions.razor Utilisation de progrès Telerik UI pour Blazor Contrôles de la vitesse, qui a le code suivant:

@page "/new-session"
@using SmartComponents

<h3>New Session</h3>

<EditForm Model="@session" OnValidSubmit="@HandleValidSubmit" class="p-3 rounded border shadow-sm">
    <DataAnnotationsValidator />
    <ValidationSummary class="text-danger" />

    <div class="mb-3">
        <TelerikTextBox Id="Title" Placeholder="Title" @bind-Value="session.Title" />
    </div>

    <div class="mb-3">
        <TelerikTextArea id="Description" Placeholder="Description" @bind-Value="session.Description" Rows="3" />
    </div>

    <div class="mb-3">
        <TelerikTextBox Id="Speaker" Placeholder="Speaker" @bind-Value="session.Speaker" />
    </div>

    <TelerikButton ButtonType="ButtonType.Submit">
        Submit
    </TelerikButton>
</EditForm>

@if (submitted)
{
    <p>Session submitted successfully!</p>
}

@code {
    private Session session = new Session();
    private bool submitted = false;

    private void HandleValidSubmit()
    {
        submitted = true;
    }

    public class Session
    {
        public string Title { get; set; }
        public string Description { get; set; }
        public string Speaker { get; set; }
    }
}

Le code précédent pourrait correspondre à n’importe quel formulaire que vous avez créé précédemment. La beauté des composants intelligents .NET est que vous pouvez les ajouter en ajoutant simplement un peu de code. Dans notre exemple, ajoutez simplement le SmartPasteButton Composant comme suit:

<EditForm Model="@session" OnValidSubmit="@HandleValidSubmit" class="p-3 rounded border shadow-sm">
    ...
    <TelerikButton ButtonType="ButtonType.Submit">
        Submit
    </TelerikButton>
    <SmartPasteButton DefaultIcon class="default-button secondary" />
</EditForm>

Une fois ajouté, vous pouvez accéder à la page du composant, copier le texte de test suivant et cliquer sur le Pâte intelligente bouton pour voir comment les informations sont automatiquement remplies:

Je suis Héctor Pérez. Aujourd’hui, nous allons explorer une session vraiment innovante: nous apprendrons à créer des applications en utilisant uniquement l’esprit. Oui, vous avez bien entendu. Dans cette classe, nous plongerons dans les technologies d’interface Brain-Computer (BCI), où les pensées sont transformées en commandes. Imaginez concevoir la structure d’une application, décider de ses caractéristiques et naviguer dans l’environnement de développement, le tout sans soulever un doigt, simplement par la puissance de votre concentration et de vos modèles mentaux. Nous discuterons non seulement de la théorie derrière la lecture des ondes cérébrales et de leur interprétation, mais aussi une démonstration pratique afin que vous puissiez voir comment vos pensées peuvent donner vie à une application fonctionnelle. C’est un saut passionnant dans l’avenir de la programmation!

Intégration du composant Smart TextArea

Voyons maintenant comment utiliser le composant Smart TextArea. Pour ce faire, vous pouvez créer une nouvelle page Blazor et la remplir avec le code suivant:

<h3>SmartAreaTest</h3>

<form class="w-100 bg-light p-4 rounded shadow mb-4">
    <div class="mb-3">
        <h4 class="fw-semibold mb-2">Employee enquiry</h4>

        <label for="comment" class="form-label">Response:</label>
        <div class="w-100">
            <TelerikTextArea Class="form-control w-100"
                             @bind-Value="@comment"
                             Rows="4"
                             Id="Response" />
        </div>
    </div>
</form>

@code {

}

Nous modifierons cette page pour intégrer Smart TextArea. Ce que nous ferons, c’est remplacer TextArea par un composant SmartTextArea, en attribuant un UserRolequelques UserPhrases et un bind-value Pour indiquer la variable utilisée pour terminer le texte:

@page "/smarttextareatest"
<h3>SmartAreaTest</h3>

<form ...>
    <div class="grid mb-5">
        ...

        <div class="w-100">
            <SmartComponents.SmartTextArea class="form-control w-100"
                                           UserRole="@userRole"
                                           UserPhrases="@userPhrases"
                                           @bind-Value="@comment" />
        </div>
    </div>
</form>

@code {
    private string? comment;
    private readonly string userRole = "You are a technical expert who handles support tickets at a hosting company.";
    private readonly string[] userPhrases =
    {
        "Thank you for reaching out to our support team.",
        ...
    };

}

Lorsque vous exécutez le code précédent, vous verrez comment vous pouvez rapidement terminer la zone de texte en utilisant les informations précédemment spécifiées:

Maintenant, voyons comment intégrer un Combobox intelligent dans le projet Blazor.

Intégration du composant Smart Combobox

Pour tester le dernier composant intelligent, nous créerons une nouvelle page Blazor avec le code de base suivant:

@page "https://www.telerik.com/"

<h3>Categories</h3>


<form class="default-form rounded-md bg-gray-200 p-6 shadow-xl mb-12 grid gap-12 md:grid-cols-2">
    <div class="floating-placeholder" data-permanent="combo-box-example">

        <label for="expense-category">Expense category</label>
    </div>
</form>

@code {

}

Pour ajouter un Smart ComboBox, nous ajouterons le composant, laissant la propriété URL vide pour l’instant:

    <div class="floating-placeholder" data-permanent="combo-box-example">
        <SmartComponents.SmartComboBox Url="" />
        <label for="expense-category">Expense category</label>
    </div>

Nous avons laissé la propriété URL vide car, quelque part dans le projet, la comparaison sémantique doit être effectuée entre le terme entré par l’utilisateur et un ensemble de catégories prédéfinies.

Pour ce faire, nous allons d’abord à Program.cs Pour ajouter un Bordella liste des catégories, et l’URL utilisée pour la comparaison sémantique, qui utilise le FindClosest Méthode pour y parvenir:

var builder = WebApplication.CreateBuilder(args);
...

var embedder = app.Services.GetRequiredService<LocalEmbedder>();

var issueCategories = embedder.EmbedRange(
    ["Server Downtime", "DNS Issues", "SSL Certificate", "Billing", "Account Suspension", "Resource Limits", "Email Issues", "Database Errors", "Website Loading", "Malware Detection", "Backup and Restore", "Domain Transfer", "Nameserver Configuration", "Control Panel Access", "FTP Issues", "PHP Version", "Network Latency", "File Permissions", "Security Vulnerabilities", "DDoS Attack", "Migration", "Cron Job Failures", "Script Errors", "Server Maintenance", "Bandwidth Overuse", "Third-party Applications", "Website Optimization", "Cache Issues", "Spam Filtering", "Content Delivery Network (CDN)", "Other"]);

app.MapSmartComboBox("/api/suggestions/issue-label",
    request => embedder.FindClosest(request.Query, issueCategories));

app.Run();

Avec le code ci-dessus ajouté, nous pouvons revenir à la page de test et terminer la configuration du Smart ComboBox, en utilisant l’URL précédemment définie, comme suit:

<form class="default-form rounded-md bg-gray-200 p-6 shadow-xl mb-12 grid gap-12 md:grid-cols-2">
    <div class="floating-placeholder" data-permanent="combo-box-example">
        <SmartComponents.SmartComboBox Url="api/suggestions/issue-label"
                                       id="issue-label"
                                       @bind-Value=@issueLabel />

        <label for="expense-category">Expense category</label>
    </div>
</form>

@code {
    string? issueLabel;
}

Avant d’essayer d’exécuter le projet, il y a une étape supplémentaire pour que le projet fonctionne. Vous devez copier le dossier avec le modèle ONIX local, qui permet une comparaison sémantique locale. Ce dossier se trouve dans le référentiel de projet Smart Components et est appelé Localembedingsmodelque vous devez coller dans le dossier de votre projet contenant votre application .exe déposer.

Une fois cela fait, nous pouvons tester le projet, ce qui vous permettra d’écrire une phrase pour effectuer une recherche sémantique dans les termes de ComboBox:

Avec cela, nous avons vu que l’intégration des composants intelligents .NET dans un projet Blazor est assez simple.

Conclusion

Tout au long de cet article, vous avez appris ce que sont les composants intelligents .NET, comment les tester rapidement et enfin comment les intégrer dans vos propres projets Blazor. Il est maintenant temps de se rendre au travail et de les intégrer dans vos projets ou de trouver de nouvelles façons d’aider les utilisateurs finaux en utilisant la puissance de l’IA.

Vous voulez essayer Telerik UI pour Blazor? Il est livré avec un essai gratuit de 30 jours.

Commencer