Premiers pas avec le composant d’invite Blazor Inline AI

Explorez le composant Blazor Inline AI Prompt, qui permet d’interroger facilement les modèles d’IA sans interrompre les flux de travail des utilisateurs.

L’idée d’équiper nos applications Blazor d’intelligence artificielle est tentante ; cependant, nous devons réfléchir aux moyens d’empêcher l’utilisateur d’interrompre son flux de travail.

Heureusement, l’interface utilisateur Progress Telerik pour Blazor inclut le Invite d’IA en ligne composant dans sa suite de Composants Blazorpermettant aux utilisateurs d’obtenir des réponses des modèles d’IA sans avoir à passer d’un onglet ou d’une application à l’autre. Voyons comment cela fonctionne ci-dessous.

Configuration initiale du projet

Partons du principe que nous souhaitons créer un lecteur d’articles scientifiques, qui contiendra très probablement des termes que nous ne connaissons pas, des paragraphes ou des informations à partir desquels nous souhaitons obtenir des informations supplémentaires ou d’autres types de données, le tout sans que l’utilisateur ait à quitter le lecteur. Il s’agit d’un excellent cas d’utilisation pour le nouveau composant AI Prompt.

Pour utiliser le composant AI Prompt de Telerik dans votre projet Blazor, vous devez d’abord effectuer une installation et une configuration appropriées, comme indiqué dans le guides d’installation.

Ensuite, j’ai créé un nouveau composant de type de page qui simule le lecteur d’articles scientifiques, comme je vous le montre ci-dessous :

<div style="background-color: #f5f5f5; min-height: 100vh; padding: 40px 20px;">
    <div style="max-width: 850px; margin: 0 auto; background-color: white; padding: 60px 80px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">

        <h1 style="text-align: center; margin-bottom: 40px;">Quantum Entanglement and Its Implications for Future Computing</h1>

        <h2 style="margin-top: 30px; margin-bottom: 15px;">Abstract</h2>
        <p style="text-align: justify; line-height: 1.6; margin-bottom: 15px;">
            This groundbreaking study explores the fundamental principles of quantum entanglement and its potential
            applications in developing next-generation quantum computers. Through extensive experimental analysis and
            theoretical modeling, we demonstrate novel approaches to maintaining quantum coherence at room temperature.
        </p>

        <h2 style="margin-top: 30px; margin-bottom: 15px;">Introduction</h2>
        <p style="text-align: justify; line-height: 1.6; margin-bottom: 15px;">
            Quantum entanglement, first described by Einstein, Podolsky, and Rosen in their famous 1935 paper,
            remains one of the most fascinating and counterintuitive phenomena in quantum mechanics. When particles
            become entangled, they form a unified quantum system where the quantum state of each particle cannot be
            described independently, regardless of the distance separating them.
        </p>
        <p style="text-align: justify; line-height: 1.6; margin-bottom: 15px;">
            Recent advances in quantum technology have brought us closer to harnessing this phenomenon for practical
            applications, particularly in the field of quantum computing. However, significant challenges remain in
            maintaining quantum states long enough to perform useful computations.
        </p>

        <h2 style="margin-top: 30px; margin-bottom: 15px;">Theoretical Background</h2>
        <p style="text-align: justify; line-height: 1.6; margin-bottom: 15px;">
            The mathematical framework underlying quantum entanglement is rooted in the superposition principle and
            the concept of quantum correlations. Unlike classical systems, where correlations arise from shared
            initial conditions, quantum correlations emerge from the inherent non-local nature of quantum mechanics.
        </p>
        <p style="text-align: justify; line-height: 1.6; margin-bottom: 15px;">
            Our research builds upon the pioneering work of John Bell, whose inequalities provided a testable
            distinction between quantum mechanical predictions and those of local hidden variable theories. Through
            careful experimental design, we have achieved violation of Bell inequalities with unprecedented statistical
            significance, confirming the quantum nature of our entangled systems.
        </p>

        <h2 style="margin-top: 30px; margin-bottom: 15px;">Experimental Methods</h2>
        <p style="text-align: justify; line-height: 1.6; margin-bottom: 15px;">
            Our experimental setup utilizes spontaneous parametric down-conversion (SPDC) to generate pairs of
            entangled photons. The source crystal, a periodically poled potassium titanyl phosphate (PPKTP), is
            pumped by a continuous-wave laser at 405 nm, producing entangled photon pairs at 810 nm.
        </p>
        <p style="text-align: justify; line-height: 1.6; margin-bottom: 15px;">
            Temperature stabilization proved crucial to our success. By implementing a novel active feedback system,
            we maintained the crystal temperature within 10 millikelvins of the target temperature, significantly
            reducing thermal decoherence effects.
        </p>

        <h2 style="margin-top: 30px; margin-bottom: 15px;">Results and Discussion</h2>
        <p style="text-align: justify; line-height: 1.6; margin-bottom: 15px;">
            Our measurements revealed entanglement fidelities exceeding 99.2%, representing a significant improvement
            over previous room-temperature implementations. The coherence times achieved in our system reached
            450 nanoseconds, sufficient for executing multiple quantum gate operations.
        </p>
        <p style="text-align: justify; line-height: 1.6; margin-bottom: 15px;">
            These results demonstrate the viability of room-temperature quantum computing platforms for specific
            applications, particularly in quantum communication and quantum sensing. While universal quantum computing
            may still require cryogenic cooling, our findings open new possibilities for practical quantum devices.
        </p>

        <h2 style="margin-top: 30px; margin-bottom: 15px;">Conclusions</h2>
        <p style="text-align: justify; line-height: 1.6; margin-bottom: 15px;">
            This research establishes new benchmarks for room-temperature quantum entanglement and provides a roadmap
            for developing practical quantum computing devices. Future work will focus on scaling these techniques to
            multi-qubit systems and exploring novel error correction strategies.
        </p>
    </div>
</div>

Le résultat de l’exécution du composant est le suivant :

Avec ce nouveau composant prêt, nous pouvons commencer à tester le composant Blazor AI Prompt.

Intégration du composant d’invite AI dans le projet

Il faut savoir que le composant Inline AI Prompt n’est pas un composant visuel qui apparaît tout le temps dans l’interface graphique, nous devons donc configurer certains de ses paramètres pour fonctionner correctement avec lui.

Ce que vous devez faire est de définir le contrôle via le TelerikInlineAIPrompt balise avec quelques propriétés :

• @ref: Pour obtenir l’instance du composant et l’afficher à volonté
• @bind-Prompt: La propriété liée où l’invite écrite par l’utilisateur sera stockée
• OnPromptRequest: Rappel d’événement déclenché lorsque l’utilisateur fait la demande.
• PromptContext: contexte supplémentaire transmis avec l’invite

Un exemple d’implémentation avec les propriétés précédentes est le code suivant :

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

<div ...>
</div>

<TelerikInlineAIPrompt @ref="@InlinePromptRef"
                       @bind-Prompt="@UserPrompt"
                       OnPromptRequest="@OnPromptRequest"
                       PromptContext="@PromptContext">
</TelerikInlineAIPrompt>

@code {
    private string UserPrompt { get; set; } = string.Empty;
    private string PromptContext { get; set; } = string.Empty;
    private TelerikInlineAIPrompt? InlinePromptRef { get; set; }
    private void OnPromptRequest(InlineAIPromptPromptRequestEventArgs args)
    {
        args.Output = $"AI response for: {PromptContext}";
    }
}

Comme je l’ai mentionné plus tôt, ce composant n’apparaît pas tout le temps dans l’interface graphique, nous devons donc avoir un déclencheur dans l’interface graphique pour l’afficher. Dans cet exemple, j’utiliserai un TelerikButton flottant en bas qui est affiché tout le temps, afin que l’utilisateur puisse poser rapidement des questions :

<div ...>
</div>

<div style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;">
    <TelerikButton Icon="@SvgIcon.QuestionCircle"
                   FillMode="@ThemeConstants.Button.FillMode.Solid"
                   ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
                   Size="@ThemeConstants.Button.Size.Large"
                   Rounded="@ThemeConstants.Button.Rounded.Full"
                   OnClick="@((MouseEventArgs e) => ShowPromptAsync(e))">
        Ask the AI about the article
    </TelerikButton>
</div>

<TelerikInlineAIPrompt ...>
</TelerikInlineAIPrompt>

Dans le code précédent, vous pouvez voir que j’ai défini le OnClick événement qui fournit un argument de type MouseEventArgsque nous utiliserons pour afficher l’invite IA en ligne à l’emplacement du bouton. De plus, il fait également référence au gestionnaire d’événements appelé ShowPromptAsync(e)auquel on passe les arguments de l’événement souris et qui est défini comme suit :

private async Task ShowPromptAsync(MouseEventArgs e)
{
    await InlinePromptRef!.ShowAsync(e.ClientX, e.ClientY);
}

Vous pouvez voir que dans le code précédent nous utilisons la référence du composant, ainsi que la méthode ShowAsyncqui attend les coordonnées où sera affiché le composant et que l’on obtient grâce au paramètre de type MouseEventArgs. L’exécution nous donne le résultat suivant :

Amélioration de l’apparence du composant d’invite d’IA en ligne

Le composant d’invite en ligne Blazor a une balise appelée InlineAIPromptSettingsà l’intérieur duquel nous pouvons spécifier une autre balise InlineAIPromptPopupSettings qui contient diverses propriétés de configuration pour la fenêtre contextuelle. Certaines de ces propriétés sont :

• AnimationDuration: Définit la durée de l’animation lorsque le popup apparaît.
• Width et Height: Permet de configurer la largeur et la hauteur de la popup.
• MaxWidth et MaxHeight: Définissez une largeur et une hauteur maximales pour le popup.
• AnimationType: Spécifie le type d’animation pour l’apparition du popup.
• HorizontalCollision et VerticalCollision: Spécifiez ce qui se passe lorsque la fenêtre contextuelle ne rentre pas dans la fenêtre. Par exemple, avec Flip la fenêtre contextuelle se retourne du côté opposé, tandis qu’avec Fit la fenêtre contextuelle se déplace jusqu’à ce qu’elle soit complètement visible.
• VerticalOffset et HorizontalOffset: Spécifiez un espace entre la popup et l’ancre.

Le code suivant est un exemple d’implémentation de certaines des propriétés mentionnées ci-dessus :

<TelerikInlineAIPrompt ...>    
    <InlineAIPromptSettings>
        <InlineAIPromptPopupSettings AnimationDuration="300"                                     
                                     Width="650px"                                     
                                     AnimationType="@AnimationType.PushLeft"
                                     HorizontalCollision="@PopupCollision.Fit"
                                     VerticalCollision="@PopupCollision.Fit"
                                     VerticalOffset="5" />
    </InlineAIPromptSettings>
</TelerikInlineAIPrompt>

Le résultat de la configuration du composant est visible dans l’image suivante :

Définition de commandes pour le traitement des invites prédéfinies

Une autre fonctionnalité du composant Inline AI Prompt est que nous pouvons configurer des commandes prédéfinies, qui sont une série d’invites qui seront traitées immédiatement. Ces commandes formeront une sorte de menu dans la fenêtre contextuelle, qui permet même des commandes imbriquées. Pour les configurer, il faut lier le Commands paramètre à une liste de InlineAIPromptCommandDescriptor éléments, chacun ayant les paramètres configurables suivants :

• Id: Identifiant de la commande
• Title: Titre qui apparaîtra dans le menu des commandes
• Icon: Icône qui apparaîtra dans le menu des commandes
• Prompt: Invite prédéfinie qui sera utilisée avec le modèle AI lorsque l’élément est enfoncé
• Children: Dans le cas de commandes imbriquées, on peut utiliser cette propriété pour les créer

Vous pouvez voir un exemple de création et d’utilisation de commandes dans le code suivant :

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

<div ...>
</div>

<TelerikInlineAIPrompt ...
                       Commands="@Commands"
                       OnCommandExecute="@OnCommandExecute">
    <InlineAIPromptSettings>
        ...
    </InlineAIPromptSettings>
</TelerikInlineAIPrompt>

@code {
    ...

    private List<InlineAIPromptCommandDescriptor> Commands { get; set; } = new()
    {
        new InlineAIPromptCommandDescriptor()
        {
            Id = "summarize",
            Title = "Summarize Article",
            Icon = SvgIcon.FreeText,
            Prompt = "Provide a clear summary of this scientific article, highlighting the main findings and relevance.",
            Children = new List<InlineAIPromptCommandDescriptor>
            {
                new InlineAIPromptCommandDescriptor()
                {
                    Id = "summarize-methods",
                    Title = "Summarize Methods",
                    Icon = SvgIcon.ListOrdered,
                    Prompt = "Explain the methods used in this article in a simple way."
                },
                new InlineAIPromptCommandDescriptor()
                {
                    Id = "summarize-results",
                    Title = "Summarize Results",
                    Icon = SvgIcon.ChartBarRange,
                    Prompt = "Describe the main results and conclusions of the study in an accessible way."
                }
            }
        },
        new InlineAIPromptCommandDescriptor()
        {
            Id = "explainSimply",
            Title = "Explain Simply",
            Icon = SvgIcon.QuestionSolid,
            Prompt = "Explain the content of this scientific text in simple words, as if you were telling it to a high school student."
        },
        new InlineAIPromptCommandDescriptor()
        {
            Id = "defineTerms",
            Title = "Define Terms",
            Icon = SvgIcon.WholeWord,
            Prompt = "Identify technical or complex terms and provide simple definitions."
        },
        new InlineAIPromptCommandDescriptor()
        {
            Id = "highlightKeyPoints",
            Title = "Highlight Key Points",
            Icon = SvgIcon.Star,
            Prompt = "List the most important points of this scientific text in easy-to-read bullet points."
        },
        new InlineAIPromptCommandDescriptor()
        {
            Id = "practicalImplications",
            Title = "Practical Implications",
            Icon = SvgIcon.User,
            Prompt = "Explain how the findings of this article can be applied in real life or in the professional field."
        }
    };

    private async Task OnCommandExecute(InlineAIPromptCommandExecuteEventArgs args)
    {
        await Task.Delay(500);
        args.Output = $"AI-generated content for: {args.Command.Title} ({PromptContext})";
    }
}

Lors de l’exécution de l’application avec les commandes ajoutées, vous pouvez les voir en action dans l’image suivante :

Intégration des services d’IA à utiliser avec l’invite d’IA en ligne

Jusqu’à présent, nous avons analysé différentes options du contrôle Inline AI Prompt sans utiliser de modèle d’IA. Sachez que vous pouvez utiliser n’importe quel modèle de n’importe quel fournisseur qui vous intéresse dans votre candidature. Dans mon cas, j’utiliserai Microsoft.Extensions.AIen plus de Azure OpenAIeffectuant son configuration respective.

Une fois cela fait, dans le composant, je vais créer une méthode qui me permet d’obtenir facilement une réponse du modèle IA :

@page "https://www.telerik.com/"
@using Microsoft.Extensions.AI
@inject IChatClient ChatClient
...
private async Task<string> CallOpenAIApi(string message, string context = "")
{
    var options = new ChatOptions
    {
        Instructions = $"The following is the context: {context}"
    };

    var answer = await ChatClient.GetResponseAsync(message, options);

    return answer.Text;
}

Dans la méthode précédente, je définis le paramètre pour recevoir un message et un paramètre facultatif pour recevoir le contexte. Maintenant, je vais modifier le OnPromptRequest méthode pour traiter toute demande utilisateur :

private async Task OnPromptRequest(InlineAIPromptPromptRequestEventArgs args)
{
    var answer = await CallOpenAIApi(UserPrompt);
    args.Output = $"{answer}";
}

Une fois les modifications ci-dessus apportées, nous pouvons effectuer des requêtes sur le modèle d’IA, comme le montre l’exemple suivant :

Bien que le composant soit déjà fonctionnel, la vérité est qu’il n’est pas très utile pour le moment puisque nous ne pouvons pas ajouter rapidement du contexte d’article pour poser des questions ou exécuter une commande.

Pour résoudre ce problème, dans le cadre de notre application, je vais implémenter une fonctionnalité permettant que le texte sélectionné dans l’article soit copié dans le contexte du composant. Je ferai cela en créant à l’intérieur wwwroot un fichier appelé site.jsqui ressemble à ceci :

window.getSelectedText = function () {
    const selection = window.getSelection();
    return selection ? selection.toString() : '';
};

Ce nouveau fichier doit être enregistré dans App.razor comme suit:

<body>
    ...
    <script src="_framework/blazor.web.js"></script>
    <script src="site.js"></script>
</body>

Avec ces changements, nous pouvons utiliser Interopérabilité JS pour obtenir le texte sélectionné et l’ajouter rapidement comme contexte en utilisant PromptContextce que nous ferons à chaque fois que nous ouvrirons la popup, dans le ShowPromptAsync méthode:

@inject IJSRuntime JS
...
private async Task ShowPromptAsync(MouseEventArgs e)
{
    string selectedText = string.Empty;
    try
    {
        selectedText = await JS.InvokeAsync<string>("getSelectedText");
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Error copying to clipboard: {ex.Message}");
    }
    PromptContext = $"{selectedText}";
    await InlinePromptRef!.ShowAsync(e.ClientX, e.ClientY);
}

Avec le code ci-dessus implémenté, nous transmettrons le contexte nouvellement attribué au OnPromptRequest méthode comme suit :

private async Task OnPromptRequest(InlineAIPromptPromptRequestEventArgs args)
{
    var answer = await CallOpenAIApi(UserPrompt, PromptContext);
    args.Output = $"{answer}";
}

Avec les changements précédents, nous pouvons voir qu’après avoir effectué une sélection, il est possible d’interroger facilement le modèle d’IA sur le texte sélectionné :

Enfin, nous pouvons réaliser une approche similaire lors de l’exécution d’une commande, sauf que dans ce cas, nous n’utiliserons pas UserPrompt mais l’invite de commande :

private async Task OnCommandExecute(InlineAIPromptCommandExecuteEventArgs args)
{        
    var answer = await CallOpenAIApi(args.Command.Prompt, PromptContext);
    args.Output = $"{answer}";
}

Le résultat est que nous pouvons sélectionner rapidement une section de texte et exécuter une commande, comme vu ci-dessous :

Et voilà, nous avons implémenté un moyen simple et rapide permettant aux utilisateurs de faire des requêtes dans un article complexe, grâce au composant Telerik Blazor Inline AI Prompt.

Conclusion

Tout au long de cet article, nous avons exploré le composant Telerik Inline AI Prompt, qui permet une interrogation transparente des modèles d’IA sans interrompre les flux de travail des utilisateurs, les aidant ainsi à devenir plus efficaces dans leurs tâches. C’est certainement un composant qui mérite d’être exploré si vous envisagez de créer des applications basées sur l’IA.

Prêt à l’essayer par vous-même ? Telerik UI pour Blazor propose un essai gratuit de 30 jours !

Commencer