En utilisant la pile Dotnet de Blazor, MLNET et Telerik UI pour Blazor, nous pouvons créer un outil simple pour visualiser comment le texte est codé par LLMS. Le visualiseur peut être utilisé pour compléter votre flux de travail de développement d’IA en estimant la taille des jetons dans une invite donnée, montrant comment les LLMS voient les données de texte et peuvent être incluses dans les applications pour estimer l’entrée de chat d’un utilisateur.
Travailler avec de grands modèles de langue (LLMS) nécessite l’envoi de longues chaînes de texte à traiter par le modèle d’IA. Lors du traitement des informations, le LLM utilisera la tokenisation pour convertir les chaînes en informations vectorielles afin qu’elle puisse être traitée par son modèle.
Dans cet article, nous déballerons comment la tokenisation fonctionne en créant une visualisation avec DotNet et explorerons comment nous pouvons utiliser ce code pour estimer la taille de jeton du texte transmis à la LLM. Dans une application du monde réel, cette technique peut être utilisée pour estimer ou réduire le coût de l’inférence ou de la formation ou pour améliorer l’expérience utilisateur en fournissant des chèques avant la soumission du texte.
Comprendre les jetons et la tokenisation
Les jetons sont la clé de la façon dont les modèles AI traitent et comprennent le texte. Un jeton se compose d’une petite unité de texte qui peut être un mot, un sous-mot ou même un seul caractère, selon les règles du tokenzer et la conception du modèle de langue. Les LLM comme GPT n’analysent pas directement les paragraphes, les phrases ou les mots. Au lieu de cela, ils divisent le texte en parties plus petites (jetons) qui sont codées en données numériques afin qu’elles puissent être contextualisées et utilisées pour la prédiction.
Alors que les LLM partagent des similitudes, la mise en œuvre du tokenzer peut varier entre elles. Nous commencerons avec Tiktoken, le tokenzer utilisé par les modèles d’Openai, y compris GPT. C’est une mise en œuvre rapide de Encodage de la paire d’octets (BPE), spécifiquement optimisé pour les modèles d’OpenAI. Tiktoken fonctionne au niveau de l’octet, ce qui permet la compatibilité avec tous les caractères Unicode, y compris les emojis et les symboles spéciaux. Il est conçu pour être considérablement plus rapide que les autres tokenisers. Les jetons peuvent être convertis au texte d’origine sans perte et il comprime le texte en moins de jetons, ce qui est crucial pour les modèles avec des limites de jeton.
Tokenisation vs intégres
Lorsque vous travaillez avec des LLM, les modèles d’intégration sont souvent utilisés pour fournir des capacités de traitement supplémentaires telles que la création de magasins vectoriels à utiliser avec une génération augmentée (RAG) de récupération. Le traitement du texte avec un modèle d’incorporation partage des similitudes en ce qui concerne les vecteurs de la tokenisation et la génération, mais ils servent des objectifs différents.
Un jetons comme Tiktoken se concentre sur le texte de tokenisage dans des jetons à utiliser avec des modèles. Bien qu’il fournisse un codage de texte, il n’introduit ni n’inclut de sens sémantique ou ne contextualise pas le jeton. Cependant, un modèle d’incorporation est généralement pré-entraîné par une représentation vectorielle de mots, phrases ou documents qui capturent la sémantique et la signification contextuelle. Cela permet d’utiliser les résultats dans la recherche sémantique, la notation ou le clustering de similitude.
Si votre objectif consiste à capturer les relations ou les significations entre les mots (par exemple, trouver des documents similaires ou des données de clustering), les intégres sont le meilleur choix. TikToken est un outil de niveau inférieur et est optimal pour le prétraitement du texte aux jetons.
Planifier le visualiseur de jeton
Maintenant que nous comprenons la technologie, nous pouvons assembler la visualisation. Gardez à l’esprit que ces composants ne sont qu’un guide général et peuvent être échangés avec vos technologies .NET préférées. L’application de cet exemple utilisera une pile DotNet qui comprend les packages / frameworks suivants:
- ML.NET (ML DOTNET) – nous permet d’accéder directement à tiktoken bien que c #.
- Blazor – sera utilisé pour héberger l’interface utilisateur (UI) dans le navigateur. Le navigateur propose une courbe d’apprentissage faible et fonctionne sur pratiquement n’importe quelle plate-forme. Et Blazor nous permet d’utiliser C # comme langage de programmation.
- Progrès Telerik UI pour Blazor – Fournit des composants d’interface utilisateur faciles à utiliser, en réduisant la nécessité de créer des visualisations à partir de zéro.
Commencez par créer une application Blazor en utilisant votre modèle préféré – tout suffira. L’option la plus rapide consiste à utiliser l’interface utilisateur Telerik pour le modèle de Blazor, qui comprend déjà les références et les dépendances pour les composants Telerik. Si vous utilisez l’un des modèles Microsoft, l’interface utilisateur de Telerik pour les dépendances de Blazor devra être installée séparément; simplement Suivez les instructions décrites par la documentation.
En plus des composants Telerik, nous utiliserons la bibliothèque Progress CSS Utilities. Il s’agit d’une bibliothèque complémentaire gratuite qui est alimentée par le système de conception inclus avec les composants Telerik. Suivez simplement les instructions fournies sous la rubrique Utilisation d’un lien CDN.
Ensuite, ajoutez les dépendances de tokenisers ML Dotnet à l’application. Vous aurez besoin Microsoft.ML.Tokenizers Version 2.0 (actuellement prévisualisation) ou supérieur. En outre, Un ou plusieurs encodeurs sont nécessaires Selon les modèles que vous souhaitez soutenir. Choisissez le package NuGet qui s’applique à votre scénario, ou tout si vous voulez la capacité de changer entre les encodeurs lors de l’exécution.
Les choix sont:
Microsoft.ML.Tokenizers.Data.Cl100kBase(CL100K-base), qui prend en charge la compatibilité avec:
GPT-4, GPT-3.5-turbo, GPT-3.5-turbo-16k, GPT-35, GPT-35-turbo, GPT-35-turbo-16k, text-déding-ada-large.Microsoft.ML.Tokenizers.Data.O200kBase(base O200K), qui prend en charge la compatibilité avec GPT-4O.
Le fichier .csproj de reprise doit ressembler à l’extrait suivant:
<PackageReference Include="Telerik.UI.for.Blazor" Version="*" />
<PackageReference Include="Microsoft.ML.Tokenizers" Version="*" />
<PackageReference Include="Microsoft.ML.Tokenizers.Data.O200kBase" Version="*" />
<PackageReference Include="Microsoft.ML.Tokenizers.Data.Cl100kBase" Version="*"/>
Avec les conditions préalables terminées, nous pouvons commencer à construire l’application. Nous irons les fonctionnalités de construction étape par étape pour améliorer l’expérience utilisateur.
Définition de l’interface utilisateur d’entrée
Commencez par créer une mise en page où les éléments d’interface utilisateur seront affichés. Le balisage ci-dessous utilise les classes d’utilité du système de conception pour créer une disposition de deux colonnes. La première colonne contiendra un formulaire utilisé pour saisir les données de chaîne brutes. La deuxième colonne affichera la sortie tokenisée.
<div class="k-grid-auto-cols-auto k-d-grid k-grid-cols-2 k-gap-4">
<div>
<h2>Raw String</h2>
<!-- Column 1 -->
</div>
<div>
<h2>Tokenized</h2>
<!-- Column 2 -->
</div>
</div>
Ensuite, nous aurons besoin d’un formulaire pour accepter la saisie de l’utilisateur. Avant de pouvoir ajouter le composant de formulaire, nous devons créer un objet pour maintenir les données. Ajouter un @code Bloquer avec une classe privée nommée Fordata qui expose un Texte bru propriété. Puis ajoutez une instance du formdata nommé données à la page.
@code {
private FormData data = new FormData { RawText = "" };
private class FormData
{
[Required, MaxLength(10_240, ErrorMessage = "Message exceeds 10,240 characters.")]
public required string RawText { get; set; }
};
}
Dans le balisage, sous le Corde brute En-tête, ajouter un Forme télérical avec Modèle propriété définie sur le champ de données.
<TelerikForm Model="data" OnValidSubmit="TokenizeText">
<FormItems>
</FormItems>
</TelerikForm>
À l’intérieur Forom Section du formulaire A Formitem est ajouté pour le Texte bru propriété. Ensuite, un Modèle est utilisé pour personnaliser l’entrée rendue sur le formulaire. Ajouter un Zone de texte Teleirk Composant dans le modèle et utilisez la liaison de données bidirectionnelle pour connecter la propriété de valeur avec les données, bind-Value="@data.RawText.
<FormItem Field="@(nameof(data.RawText))">
<Template>
<label for="inputText">Text Input:</label>
<TelerikTextArea Id="inputText" ResizeMode="TextAreaResizeMode.Vertical"
Placeholder="Enter text here to see it tokenized"
@bind-Value="@data.RawText">
</TelerikTextArea>
<TelerikValidationMessage For="@(() => data.RawText)"></TelerikValidationMessage>
</Template>
</FormItem>
<DataAnnotationsValidator/>
Des ornements sont ajoutés au Zone de texte télable en utilisant le TextareaSuffixTemplate. Quand le Commanditation est réglé sur vertical, le modèle de suffixe sera rendu en bas de l’entrée TextArea. Ensuite, à l’intérieur du modèle, rendez un nombre de caractères à l’intérieur d’un portée élément. Les classes d’utilité du kit de conception appliquées à l’élément de portée justifient l’extrémité du texte de la zone de modèle.
<TelerikTextArea ...
AdornmentsOrientation="TextAreaAdornmentsOrientation.Vertical">
<TextAreaSuffixTemplate>
<span class="k-w-full k-text-end k-px-2">@data.RawText.Count() characters</span>
</TextAreaSuffixTemplate>
</TelerikTextArea>
Avec le formulaire d’entrée complet, nous pouvons nous concentrer sur l’affichage des données de tokenisés via une visualisation.
Définir l’interface utilisateur de sortie
Pour la visualisation, nous créerons deux méthodes de visualisation des données. Le premier affichera la phrase avec les jetons mis en évidence à l’aide de couleurs séquentielles. Le second affiche le jeton et sa valeur numérique permettant à l’utilisateur de voir comment les valeurs ont été attribuées à chaque jeton. L’utilisateur peut basculer entre les vues à l’aide d’un interrupteur à bascule.
Commencez par ajouter un bloc de code avec trois membres représentant l’état d’interface utilisateur. La sortie du processus de tokenisation est une liste de Encodé objets. L’objet encodédToken a un Identifiant propriété contenant la représentation numérique du jeton et un Valeur propriété avec la chaîne tokenisée.
Pour afficher ces valeurs, l’ensemble de données de tokenisé est stocké dans un Liadonlylist de jetons codés nommés Jetons. Ensuite, le Hastokeens Une propriété utilitaire est ajoutée pour indiquer quand la liste des jetons est remplie. Enfin, un drapeau nommé showtokens est ajouté pour basculer entre deux visualisations.
// Encoded Tokens
IReadOnlyList<EncodedToken> Tokens { get; set; } = [];
// Utility property that indicates the list has tokens
bool HasTokens => Tokens.Count > 0;
// UI state, when true show token Id and Value
bool showTokens;
Dans le balisage sous la deuxième colonne, ajoutez un conteneur div. À l’intérieur du conteneur, itérez sur la liste des jetons. Rendez les jetons dans des étiquettes de portée afin qu’ils puissent être stylisés individuellement à l’aide du sélecteur CSS couleur de jeton. Quand le showtokens La bascule est définie sur true, rendez le Valeur et Identifiant Dans un wrapper flex, les valeurs sont donc répertoriées dans une seule colonne.
<!-- Column 2 -->
<h2>Tokenized</h2>
<div class="token-colors k-p-2 k-bg-primary-subtle k-rounded-sm">
@if (HasTokens)
{
foreach (var t in Tokens)
{
if (showTokens)
{
<div class="k-d-flex k-gap-2">
<span>@t.Value</span>:
<span>@t.Id</span>
</div>
}
else
{
<span>@t.Value</span>
}
}
}
</div>
Ensuite, au-dessus de la visualisation a Telerikswitch est ajouté pour basculer entre deux visualisations en se liant au showtokens drapeau. Quand vrai La visualisation affichera à la fois le Identifiant et Valeur Propriétés dans une seule colonne. Basculer l’interrupteur à FAUX Affichera le texte en ligne avec chaque jeton mis en évidence avec une séquence de couleurs montrant comment la chaîne est partitionnée par le tokenzer.
<h2>Tokenized</h2>
<div class="k-p-4">
<label for="show-tokens">Show Tokens:</label>
<TelerikSwitch Id="show-tokens"
Enabled="hasTokens"
@bind-Value="showTokens"/>
</div>
<div class="token-colors k-p-2 k-bg-primary-subtle k-rounded-sm">...
Certains CSS sont nécessaires pour terminer la visualisation. Pour aligner la sortie avec d’autres composants de visualisation comme les graphiques et les jauges, le système de conception *série* Les valeurs de couleur sont utilisées. Ce sont des styles généralement utilisés pour colorer les barres ou les lignes individuelles dans un graphique.
Dans le CSS ci-dessous, les couleurs sont utilisées pour styliser un ensemble répétitif consécutif de cinq jetons colorisés avec une couleur de bordure subtile. Le :nth-child(5n+x) Selector applique les styles sans nécessiter une logique de composante supplémentaire.
.token-colors > :nth-child(5n+1) {
background-color: var(--kendo-color-series-a-subtler);
border: solid 1px var(--kendo-color-series-a);
}
.token-colors > :nth-child(5n+2) {
background-color: var(--kendo-color-series-b-subtler);
border: solid 1px var(--kendo-color-series-b);
}
.token-colors > :nth-child(5n+3) {
background-color: var(--kendo-color-series-c-subtler);
border: solid 1px var(--kendo-color-series-c);
}
.token-colors > :nth-child(5n+4) {
background-color: var(--kendo-color-series-d-subtler);
border: solid 1px var(--kendo-color-series-d);
}
.token-colors > :nth-child(5n+5) {
background-color: var(--kendo-color-series-e-subtler);
border: solid 1px var(--kendo-color-series-e);
}
Avec le formulaire prêt à accepter l’entrée de l’utilisateur et la visualisation capable de rendre la sortie de jeton, l’étape finale consiste à générer les jetons.
Génération de jetons avec tiktokentokizer
La génération de jetons avec tiktokenzer est simple. Commencez par initialiser le jetons à travers le CreateFormodel méthode. Le CreateFormodel La méthode crée une instance du tokenizer pour un type de modèle spécifique identifié par le Nom de modèle argument.
Dans cet exemple, le gpt-4 Le modèle est le LLM cible; Par conséquent, le o200K-base Le package est requis pour que l’application s’exécute. L’instance est créée et affectée à un champ nommé jetons. Ensuite, la méthode Tokeniztext est ajouté. Tokenizext lance un appel au tokenizer Codétotokens Méthode avec le Texte bru de la forme. La variable OUT en option est rejetée car la chaîne résultante n’est pas nécessaire.
Tokenizer tokenizer = TiktokenTokenizer.CreateForModel("gpt-4");
void TokenizeText() =>
Tokens = tokenizer.EncodeToTokens(data.RawText, out _);
Pour connecter l’entrée et la sortie de l’application, le formulaire est mis à jour avec un Onvalidsubmit le gestionnaire réglé sur le Tokeniztext méthode. Lorsque l’utilisateur clique sur Soumettre, Codétotokens est appelé et les jetons sont stockés dans la liste des jetons. Lorsque la liste des jetons est remplie, la visualisation sera affichée.
<TelerikForm Model="data" OnValidSubmit="TokenizeText">
Pour améliorer l’interface utilisateur, un nombre de jetons est ajouté au modèle de suffixe de TextArea. Dans le TextareaSuffixTemplateRendez le nombre de jetons. Cela offrira une meilleure expérience utilisateur et permettra au nombre de caractères et au nombre de jetons d’être comparé en un coup d’œil.
@if (hasTokens)
{
<span class="k-w-full k-text-end k-px-2">@Tokens.Count tokens</span>
}
Cela complète le visualiseur de jeton. Entrer du texte dans la TextArea et cliquer sur Soumettre affichera comment le texte est vu par un LLM.
En cliquant sur la baisse des jetons Show, affiche une liste verticale avec chaque jeton et le codage entier qui le représente.
Conclusion
En utilisant la pile Dotnet de Blazor, MLNET et Telerik UI pour Blazor, nous avons créé un outil simple pour visualiser comment le texte est codé par LLMS. Le visualiseur peut être utilisé pour compléter votre flux de travail de développement d’IA en estimant la taille des jetons dans une invite donnée, en apprenant comment les LLM voient les données de texte et peuvent être incluses dans les applications pour estimer la contribution de chat d’un utilisateur.
Le tokenizer n’est qu’un petit exemple de la façon dont la pile DotNet est un outil puissant pour construire des applications modernes AI. La tokenisation n’est qu’une fraction d’un écosystème beaucoup plus large qui comprend Formation et évaluation MLgénératif Compléments de chat AI et bien plus.
Source link