LLM locaux avec Ollama, Gemma et Kendo UI pour Angular

Commencez avec un LLM pour créer votre propre application de chat angulaire. Nous utiliserons Ollama, Gemma et Kendo UI pour Angular pour l’interface utilisateur.

La vague de l’IA est réelle. Chaque jour, la plupart des entreprises construisent, créent ou adaptent leurs produits à l’aide de chats ou d’actions contextuelles qui nous aident à interagir avec de grands modèles de langage (LLM). Mais vous êtes-vous demandé à quel point il est difficile de créer une application qui interagit avec des LLM comme Gemini ou Llama3 ?

Eh bien, de nos jours, c’est si simple car nous disposons de tous les outils nécessaires pour nous permettre de créer des applications telles que des chats avec des menus contextuels pour les actions permettant d’interagir avec les LLM à l’aide d’Angular et de Kendo UI et d’exécuter des LLM ouverts comme Gemme ou Lama3 sur nos ordinateurs avec Être.

Alors, si nous avons les outils, pourquoi ne pas construire quelque chose de joli ? Aujourd’hui, nous allons apprendre à exécuter des LLM localement, à nous connecter avec Gemma et à créer une discussion en utilisant Progress. Interface utilisateur Kendo pour angulaire! Faisons-le! 🤖

Installation

Tout d’abord, nous devons visiter https://ollama.com/download et téléchargez Ollama. Cela nous aide à exécuter des modèles sur nos ordinateurs. Une fois le téléchargement terminé, installez l’application et ouvrez-la. Ollama est maintenant prêt à être utilisé.

Ensuite, nous devons exécuter Ollama et commencer à utiliser le modèle Gemma. Dans le terminal, exécutez la commande ollama run gemma:

ollama run gemma

Le téléchargement du modèle Gemma commencera, ce qui peut prendre un certain temps.

Une fois terminé, nous sommes prêts à interagir avec Gemma sur notre machine à l’aide du terminal.

OK parfait. Nous avons Gemma en cours d’exécution dans le terminal, mais je veux créer un chat comme ChatGPT 😁, donc je veux une interface sophistiquée et un effet de frappe.

L’un des avantages d’Ollama est qu’il active une API HTTP par défaut, afin que nous puissions l’utiliser pour interagir avec les modèles. N’hésitez pas à naviguer vers http://localhost:11434 dans votre navigateur pour obtenir la réponse.

Aussi, nous avons le Forfait Ollama npm pour faciliter l’interaction avec l’API. Nous l’installerons après avoir créé notre application. Alors, avec tous les outils prêts, construisons notre chat avec Angular et Kendo UI !

Construisez le chat

Tout d’abord, configurez votre application Angular avec la commande ng new gemma-kendo.

C:\Users\DPAREDES\Desktop>ng new gemma-kendo
? Which stylesheet format would you like to use? Sass (SCSS)     [ https://sass-lang.com/documentation/syntax
       ]
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
cd gemma-kendo

Installez la bibliothèque Ollama en exécutant la commande npm i ollama

C:\Users\DPAREDES\Desktop\gemma-kendo>npm i ollama

added 2 packages, and audited 929 packages in 3s

118 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Installez ensuite l’interface utilisateur de Kendo pour Interface utilisateur conversationnelle angulaireen utilisant une commande schématique pour enregistrer :

C:\Users\DPAREDES\Desktop\gemma-kendo>ng add @progress/kendo-angular-conversational-ui
i Using package manager: npm
√ Found compatible package version: @progress/kendo-angular-conversational-ui@16.1.0.
√ Package information loaded.

The package @progress/kendo-angular-conversational-ui@16.1.0 will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
UPDATE package.json (1674 bytes)
UPDATE angular.json (3022 bytes)
√ Packages installed successfully.
UPDATE src/main.ts (301 bytes)
UPDATE tsconfig.app.json (310 bytes)
UPDATE tsconfig.spec.json (315 bytes)

Nous sommes tous configurés, alors passons au code !

Interagissez avec l’API Ollama

Avant de commencer, nous devons travailler avec le Composant de chat angulaire. Le chat a besoin de deux entités : l’utilisateur et l’IA. Créez donc deux variables utilisateur, gemmaIA et userdans un nouveau fichier entities/entities.ts:

import { User } from "@progress/kendo-angular-conversational-ui";

export const gemmaIA: User = {
    id: crypto.randomUUID(),
    name: 'KendoIA',
  };
  
  export const user: User = {
    id: crypto.randomUUID(),
    name: 'Dany'
  };

Ensuite, à l’aide de la CLI, générez le service ollama en utilisant la commande Angular CLI ng g s services/ollama.

C:\Users\DPAREDES\Desktop\gemma-kendo>ng g s services/ollama
CREATE src/app/services/ollama.service.spec.ts (373 bytes)
CREATE src/app/services/ollama.service.ts (144 bytes)

Ouvrir ollama.service.ts. Parce que nous voulons rendre disponible une liste de messages, nous utiliserons des signaux pour exposer une propriété d’un tableau de messages avec un message par défaut.

Oui, nous acceptons les signaux ! En savoir plus sur signaux.

import { Injectable, signal } from '@angular/core';
import { Message } from '@progress/kendo-angular-conversational-ui';
import { gemmaIA } from '../../entities/entities';

...
  messages = signal<Message[]>([{
    author: gemmaIA,
    timestamp: new Date(),
    text: 'Hi! 👋 how I can help you!'
  }]);

Créez ensuite la méthode generate avec le texte comme paramètre. Créez deux objets : gemmaMessage (sera utilisé pour informer l’utilisateur que l’IA est en train de taper) et userMessage (contenant le texte de l’utilisateur). Enfin, mettez à jour les signaux de messages avec les nouveaux messages.

import { gemmaIA, user } from '../../entities/entities';
...

 async generate(text: string) {

    const gemmaMessage = {
      timestamp: new Date(),
      author: gemmaIA,
      typing: true
    };

    const userMessage = {
      timestamp: new Date(),
      author: user,
      text
    }

    this.messages.update((msg) => [...msg, userMessage, gemmaMessage] );

  }

Enregistrez les modifications et nous avons maintenant le service prêt à publier des messages. Passons à l’intégration du service et à l’utilisation du chat de l’interface utilisateur conversationnelle.

Construire une discussion

Ensuite, nous devrons effectuer quelques actions pour utiliser le kendo-chat et pour utiliser le ollama.service dans le app.component.ts :

• Importer le ChatModule pour avoir accès au kendo-chat.
• Injectez l’OllamaService en utilisant la fonction inject : private readonly _ollamaService = inject(OllamaService);.
• Déclarez une variable de messages à partir du _ollamaService dans le $messages: $messages = this._ollamaService.messages;.
• Stocke l’utilisateur déclaré dans les entités.

Le code ressemble à ceci :

import { Component, inject } from '@angular/core';
import { ChatModule } from '@progress/kendo-angular-conversational-ui';
import { gemmaIA, user } from './entities/entities';
import { OllamaService } from './services/ollama.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChatModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  private readonly _ollamaService = inject(OllamaService);
  $messages = this._ollamaService.messages;
  readonly user = user;

}

L’étape suivante consiste à utiliser le generate méthode de notre service. Alors ajoutez une nouvelle méthode generate qui prendra l’événement du kendo-chat et appelle generate depuis ollamaService.

async generate($event: any): Promise<void> {
    const { text } = $event.message;
    await this._ollamaService.generate(text);
  }

Ouvrir app.component.htmlsupprimez tous les balises HTML, ajoutez le composant kendo-chatdéfinissez l’utilisateur et le message avec le signal $messages(). Le kendo-chat fournit le sendMessage événement, afin que nous puissions nous y attacher et utiliser notre méthode generate à écouter lorsque l’utilisateur envoie un message.

Le balisage ressemble à ceci :

<kendo-chat [user]="user" [messages]="$messages()" (sendMessage)="generate($event)" width="450px">

</kendo-chat>

En savoir plus sur Interface utilisateur conversationnelle angulaire.

Enregistrez les modifications et rechargez la page.

Ouais, nous discutons, mais KendoIA ne répond pas. Mais il affiche bien un indicateur de chargement. C’est un bon début. Interagissons avec le Gemma LLM en utilisant la bibliothèque Ollama.

Interagissez avec l’API Ollama et diffusez des données

Ouvrir ollama.service.ts. Grâce à l’API Ollama, le ollama l’objet expose le chat fonction. Il attend un modèle et un message de la part de l’utilisateur. Le message utilisateur est transmis sous la clé de contenu (voir ci-dessous). Dans notre scénario, nous souhaitons refléter le même comportement que ChatGPT, nous activons donc le flux sur true.

Cela fait que les données sont présentées sous forme de réponses groupées. Parce que ollama.chat renvoie une promesse, nous la stockons dans une variable que j’appelle responseStream.

 async getGemmaResponse(userMessage: string): Promise<void> {
    const responseStream = await ollama.chat({
      model: 'gemma',
      messages: [{ role: 'user', content: userMessage }],
      stream: true,
    });

Ensuite, nous avons deux objectifs : obtenir la réponse et chaque message du flux et mettre à jour les signaux avec ces résultats. Déclarez la variable responseContent="" et utilise for await parcourir chaque responseStream et concaténer les message.content dans le responseContent.

let responseContent = '';

for await (const chunk of responseStream) {
  responseContent += chunk.message.content;

}

La dernière étape consiste à mettre à jour le dernier message du chat avec le contenu de la réponse. En utilisant le update méthode à partir des signaux, récupérez le dernier message et mettez à jour sa valeur, puis définissez typing sur false pour masquer le message de chargement.

 this.messages.update((messages) => {
    const updatedMessages = [...messages];
    const lastMessageIndex = updatedMessages.length - 1;

    updatedMessages[lastMessageIndex] = {
      ...updatedMessages[lastMessageIndex],
      text: responseContent,
      typing: false,
    };

    return updatedMessages;
  });

Le getGemmaResponse le code final de la fonction ressemble à :

import { Injectable, signal } from '@angular/core';
import { Message } from '@progress/kendo-angular-conversational-ui';
import { gemmaIA, user } from '../../entities/entities';
import ollama from 'ollama';
...
async getGemmaResponse(userMessage: string): Promise<void> {
    const responseStream = await ollama.chat({
      model: 'gemma',
      messages: [{ role: 'user', content: userMessage }],
      stream: true,
    });

    let responseContent = '';

    for await (const chunk of responseStream) {
      responseContent += chunk.message.content;

      this.messages.update((messages) => {
        const updatedMessages = [...messages];
        const lastMessageIndex = updatedMessages.length - 1;

        updatedMessages[lastMessageIndex] = {
          ...updatedMessages[lastMessageIndex],
          text: responseContent,
          typing: false,
        };

        return updatedMessages;
      });
    }
  }

(Code source complet.)

Enfin, toujours dans notre fichier ollama.service, appelez la fonction getGemmaResponse de la génération method.

  async generate(text: string) {
    const gemmaMessage = {
      timestamp: new Date(),
      author: gemmaIA,
      typing: true,
    };

    const userMessage = {
      timestamp: new Date(),
      author: user,
      text,
    };

    this.messages.update((msg) => [...msg, userMessage, gemmaMessage]);
		
    await this.getGemmaResponse(text);
  }

Enregistrez les modifications, rechargez et tada !! 🎉 Nous avons construit un chat avec Gemma ! Nous discutons avec notre LLM local sans payer de jetons et disposons d’une interface agréable avec seulement quelques lignes de code.

Conclusion

C’était tellement amusant et étonnamment facile d’exécuter LLM sur notre machine, d’interagir avec l’API Ollama et bien sûr de créer notre chat avec quelques lignes de code. En utilisant Ollama pour exécuter des modèles localement et Kendo UI pour Angular pour une interface de discussion, nous pouvons intégrer des capacités d’IA avancées dans nos projets sans douleur.

Nous avons appris à configurer et à interagir avec le modèle Gemma, à créer une application angulaire et à créer facilement une interface de discussion en temps réel, en utilisant la puissance de Kendo UI pour l’interface utilisateur conversationnelle angulaire. Ouvrez de nouvelles possibilités et commencez dès aujourd’hui à créer votre prochaine application basée sur l’IA !

N’oubliez pas : Kendo UI pour Angular est livré avec un essai gratuit de 30 jours !

Essayez Kendo UI pour Angular