Explorer le réseau intelligent KendoReact alimenté par l’IA

Le KendoReact SmartGrid apporte des capacités d’invite d’IA à votre composant d’entreprise préféré.

Travailler avec de grands ensembles de données dans des applications Web peut impliquer des tâches répétitives, telles que la configuration manuelle de filtres, la définition de règles de tri ou le regroupement de données de plusieurs manières pour trouver les informations dont vous avez besoin. Alors que les grilles de données traditionnelles (comme le Progress Grille de données KendoReact) fournissent les outils nécessaires pour accomplir ces opérations, ils nécessitent que les utilisateurs comprennent l’interface de la grille et configurent manuellement chaque étape de chaque opération.

Et si notre grille de données pouvait comprendre les commandes en langage naturel ? Et si nous pouvions lui demander de « n’afficher que les transactions ayant échoué de plus de 500 $ » ou de « regrouper les clients par région et trier par chiffre d’affaires » ? C’est exactement ce que propose le nouveau KendoReact SmartGrid offres.

KendoReact SmartGrid

Le KendoReact SmartGrid améliore le KendoReact DataGrid traditionnel avec des capacités basées sur l’IA qui permettent aux utilisateurs d’interagir avec les données en utilisant le langage naturel. Au lieu de cliquer sur les menus et de configurer manuellement les filtres, les utilisateurs peuvent décrire ce qu’ils veulent voir, et l’assistant IA traduit ces demandes en opérations de grille.

Le SmartGrid conserve toutes les fonctionnalités puissantes de la grille standard (tri, filtrage, regroupement, etc.) tout en ajoutant une couche intelligente qui interprète l’intention de l’utilisateur et applique automatiquement les opérations de données appropriées.

Commençons par une implémentation de base pour voir le SmartGrid en action :

import * as React from 'react';
import {
  Grid,
  GridColumn,
  GridToolbar,
  GridToolbarAIAssistant,
} from '@progress/kendo-react-grid';
import { filterIcon } from '@progress/kendo-svg-icons';

const App = () => {
  const transactions = [
    {
      id: 1,
      customerName: 'Acme Corp',
      amount: 1250.0,
      currency: 'USD',
      status: 'Completed',
      transType: 'Deposit',
      transDate: new Date('2024-10-15'),
    },
    {
      id: 2,
      customerName: 'Tech Solutions',
      amount: 450.0,
      currency: 'EUR',
      status: 'Failed',
      transType: 'Withdrawal',
      transDate: new Date('2024-10-16'),
    },
    {
      id: 3,
      customerName: 'Global Industries',
      amount: 2100.0,
      currency: 'USD',
      status: 'Completed',
      transType: 'Deposit',
      transDate: new Date('2024-10-17'),
    },
    {
      id: 4,
      customerName: 'StartUp Inc',
      amount: 850.0,
      currency: 'GBP',
      status: 'Pending',
      transType: 'Withdrawal',
      transDate: new Date('2024-10-18'),
    },
    {
      id: 5,
      customerName: 'Enterprise Co',
      amount: 3200.0,
      currency: 'USD',
      status: 'Completed',
      transType: 'Deposit',
      transDate: new Date('2024-10-19'),
    },
  ];

  return (
    <Grid
      autoProcessData={true}
      dataItemKey="id"
      data={transactions}
      sortable={true}
      groupable={true}
      pageable={true}
      columnMenuIcon={filterIcon}
    >
      <GridToolbar>
        <GridToolbarAIAssistant
          requestUrl="https://demos.telerik.com/service/v2/ai/grid/smart-state"
          promptPlaceHolder="Filter, sort or group with AI"
          suggestionsList={[
            'Sort by amount descending',
            'Show only completed transactions',
            'Group by transaction type',
            'Filter where currency is USD',
          ]}
          enableSpeechToText={true}
        />
      </GridToolbar>

      <GridColumn field="customerName" title="Customer Name" width={180} />
      <GridColumn field="amount" title="Amount" width={120} format="{0:c2}" />
      <GridColumn field="currency" title="Currency" width={100} />
      <GridColumn field="status" title="Status" width={120} />
      <GridColumn field="transType" title="Type" width={120} />
      <GridColumn
        field="transDate"
        title="Date"
        width={140}
        format="{0:MM/dd/yyyy}"
      />
    </Grid>
  );
};

export default App;

Dans l’exemple ci-dessus, nous avons créé une grille de transactions à l’aide de l’assistant de barre d’outils alimenté par l’IA. Le GrilleToolbarAIAssistant Le composant fournit une interface en langage naturel qui permet aux utilisateurs de saisir des commandes telles que « afficher uniquement les transactions terminées » ou « trier par montant décroissant », et l’IA applique automatiquement ces opérations à la grille.

Le autoProcessData prop est la clé ici dans l’exemple ci-dessus. Il permet à la grille de gérer automatiquement les mises à jour d’état lorsque des opérations d’IA sont appliquées, éliminant ainsi le besoin d’une gestion manuelle de l’état dans des scénarios simples.

Le SmartGrid fait partie de KendoReact Premium, une bibliothèque d’interface utilisateur de niveau entreprise avec plus de 120 composants. Les fonctionnalités d’IA présentées ici utilisent un service hébergé par Telerik à des fins de démonstration. Pour les applications de production, vous souhaiterez mettre en œuvre votre propre service d’IA adapté à vos besoins spécifiques en matière de domaine et de données.

Prise en charge de la saisie vocale

Une fonctionnalité intéressante de SmartGrid est sa prise en charge de la saisie vocale. En définissant enableSpeechToText={true} sur le GridToolbarAIAssistantles utilisateurs peuvent prononcer leurs commandes directement au lieu de les saisir.

Pour utiliser la saisie vocale, les utilisateurs cliquent sur l’icône du microphone dans l’assistant AI et prononcent leur commande. La grille traite les commandes vocales de la même manière que le texte saisi, de sorte que les commandes telles que « afficher uniquement les transactions terminées » fonctionnent de manière tout aussi transparente.

La fonctionnalité de saisie vocale utilise l’API Web Speech native du navigateur, elle fonctionne donc sur les navigateurs modernes sans dépendances ni configuration supplémentaires.

Suivi des opérations avec intégration contrôlée

Alors que autoProcessData fonctionne très bien pour des scénarios simples, nous aurons peut-être besoin de plus de contrôle sur la façon dont les opérations d’IA sont appliquées à notre grille. Par exemple, nous pouvons enregistrer les interactions des utilisateurs, valider les suggestions de l’IA avant de les appliquer ou afficher un historique des opérations aux utilisateurs.

L’approche contrôlée nous donne cette flexibilité grâce à la onResponseSuccess rappel :

import * as React from 'react';
import { process } from '@progress/kendo-data-query';
import {
  Grid,
  GridColumn,
  GridToolbar,
  GridToolbarAIAssistant,
} from '@progress/kendo-react-grid';

const App = () => {
  const [dataState, setDataState] = React.useState({
    skip: 0,
    take: 10,
    sort: [],
    filter: undefined,
    group: [],
  });

  const [outputs, setOutputs] = React.useState([]);
  const aiAssistantRef = React.useRef(null);

  const transactions = [
    {
      id: 1,
      customerName: 'Acme Corp',
      amount: 1250.0,
      status: 'Completed',
      currency: 'USD',
    },
    {
      id: 2,
      customerName: 'Tech Solutions',
      amount: 450.0,
      status: 'Failed',
      currency: 'EUR',
    },
    {
      id: 3,
      customerName: 'Global Industries',
      amount: 2100.0,
      status: 'Completed',
      currency: 'USD',
    },
    {
      id: 4,
      customerName: 'StartUp Inc',
      amount: 850.0,
      status: 'Pending',
      currency: 'GBP',
    },
    {
      id: 5,
      customerName: 'Enterprise Co',
      amount: 3200.0,
      status: 'Completed',
      currency: 'USD',
    },
  ];

  const handleResponseSuccess = (response, promptMessage) => {
    if (response && response.data) {
      
      const newState = { ...dataState };

      if (response.data.sort) newState.sort = response.data.sort;
      if (response.data.filter) newState.filter = response.data.filter;
      if (response.data.group) newState.group = response.data.group;

      setDataState(newState);

      
      if (response.data.messages) {
        const newOutput = {
          id: outputs.length + 1,
          prompt: promptMessage,
          responseContent: response.data.messages.join('\n'),
        };
        setOutputs([newOutput, ...outputs]);
      }
    }

    aiAssistantRef.current?.hide();
  };

  const processedData = process(transactions, dataState);

  return (
    <Grid
      dataItemKey="id"
      data={processedData.data}
      total={processedData.total}
      sortable={true}
      sort={dataState.sort}
      onSortChange={(e) => setDataState({ ...dataState, sort: e.sort })}
      filterable={true}
      filter={dataState.filter}
      onFilterChange={(e) => setDataState({ ...dataState, filter: e.filter })}
      groupable={true}
      group={dataState.group}
      onGroupChange={(e) => setDataState({ ...dataState, group: e.group })}
      pageable={true}
      skip={dataState.skip}
      take={dataState.take}
      onPageChange={(e) =>
        setDataState({
          ...dataState,
          skip: e.page.skip,
          take: e.page.take,
        })
      }
    >
      <GridToolbar>
        <GridToolbarAIAssistant
          ref={aiAssistantRef}
          requestUrl="https://demos.telerik.com/service/v2/ai/grid/smart-state"
          onResponseSuccess={handleResponseSuccess}
          outputs={outputs}
          promptPlaceHolder="Filter, sort or group with AI"
        />
      </GridToolbar>

      <GridColumn field="customerName" title="Customer" width={180} />
      <GridColumn field="amount" title="Amount" width={120} format="{0:c2}" />
      <GridColumn field="status" title="Status" width={120} />
      <GridColumn field="currency" title="Currency" width={100} />
    </Grid>
  );
};

export default App;

Dans cette approche contrôlée, nous gérons explicitement l’état du réseau et interceptons les réponses de l’IA via onResponseSuccess. Cela nous permet de :

• Valider les suggestions de l’IA avant de les appliquer à la grille.
• Consigner les interactions des utilisateurs et les opérations d’IA pour l’analyse ou le débogage.
• Afficher l’historique des opérations à travers le outputs prop, donnant aux utilisateurs une transparence sur les commandes qu’ils ont émises.

Le outputs prop affiche un historique des opérations de l’IA, aidant les utilisateurs à comprendre comment leurs requêtes en langage naturel ont été interprétées et quelles opérations ont été effectuées sur la grille.

Conclure

Le KendoReact SmartGrid apporte des capacités basées sur l’IA aux grilles de données, rendant les opérations de données complexes accessibles via le langage naturel. En décrivant simplement ce qu’ils veulent voir, les utilisateurs peuvent filtrer, trier et regrouper les données sans avoir besoin de comprendre les subtilités de l’interface de la grille.

Pour plus de détails sur la mise en œuvre du SmartGrid et l’exploration de ses capacités, consultez la documentation officielle :

Et pour l’essayer par vous-même, téléchargez l’essai gratuit de 30 jours :

Essayez maintenant