Site icon Blog ARC Optimizer

Construisez un chatlens avec Kendo UI, Gemini et Angular 19


Obtenez un chatbot opérationnel sur votre application angulaire avec Gemini et Kendo UI pour Angular.

Aujourd’hui, les chatbots sont plus que de simples outils de conversation. Ils peuvent analyser les données, automatiser les processus et résoudre des problèmes réels. En tant que développeurs, nous pouvons exploiter l’IA pour simplifier les processus et simplifier les scénarios complexes. En combinant la puissance de l’interface utilisateur des Gémeaux, Angular et Kendo, nous pouvons créer des chatbots avancés qui non seulement discutent mais analysent également des images pour fournir des recommandations intelligentes.

Imaginez un scénario où vous téléchargez une capture d’écran d’une page Web, et le chatbot identifie qui progresse les composants de l’interface utilisateur de Kendo peut vous aider à le recréer, avec des explications et des liens vers des ressources. Avec Kendo UI pour le riche ensemble de composants d’Angular et les capacités d’IA de Gemini, la construction de chatbots sophistiqués n’a jamais été aussi simple.

Scénario

Nous voulons construire un bot où nous pouvons télécharger une capture d’écran ou une photo de page et il détecte qui Kendo UI pour les composants angulaires Peut nous aider à le construire, avec une belle recommandation expliquant ce que chacun fait et pourquoi l’utiliser, ainsi que des liens vers les ressources.

Cela est difficile? Ne pas vous inquiéter, Progress Kendo UI fournit un ensemble de composants pour aider: Kendo UI pour l’interface utilisateur conversationnelle angulaire, le téléchargement de Kendo et la puissance de gemini-1.5-flash. Passons au codage!

Configuration du projet

Tout d’abord, créez une nouvelle application angulaire en utilisant la CLI angulaire avec la commande ng new chatLens. Cela générera un nouveau projet angulaire nommé «Chatlens».

npx -p @angular/cli ng new chatlens

Ensuite, accédez à votre dossier de projet en utilisant cd chatLens. Dans le terminal, installez l’interface utilisateur de Kendo pour Ui conversationnel angulaire et Kendo UI pour les téléchargements angulaires Bibliothèques utilisant les schémas:

ng add @progress/kendo-angular-conversational-ui
ng add @progress/kendo-angular-upload

Après cela, installez la bibliothèque marquée pour traiter les réponses Markdown à HTML.

npm i marked

Enfin, installez la bibliothèque Google Générative AI avec:

npm i @google/generative-ai

Pour obtenir une clé API, visitez https://aistudio.google.com/apikeyConnectez-vous avec votre compte Google et créez une clé API.

Copiez la clé et enregistrez-la dans votre projet en créant un environment.ts fichier dans le src/environments annuaire. Exporter une variable nommée GEMINI_KEY et attribuez votre clé API.

Maintenant, avec les composants de l’interface utilisateur Kendo et la configuration des Gémeaux, vous êtes prêt à créer le service pour parler avec Gemini

Créer le service

Pour intégrer les Gémeaux dans notre chatbot, nous allons créer un service nommé GeminiService en utilisant la CLI angulaire. Il gérera la communication avec le modèle AI et traite les entrées des utilisateurs et les téléchargements d’images.

Premièrement dans le terminal ng g s services/gemini. Il génère un service vide.

d.paredes@danys-mbp chatlens % ng g s services/gemini
CREATE src/app/services/gemini.service.spec.ts (362 bytes)
CREATE src/app/services/gemini.service.ts (136 bytes)

Définissez ensuite deux propriétés, KENDO_RECOMMEND_PROMPTet generativeModel.

  • KENDO_RECOMMEND_PROMPT L’invite guidera le modèle AI lors de l’analyse des entrées et des images utilisateur.
  • generativeModel est une instance du modèle Gemini AI. Nous utiliserons le geminiKey Pour authentifier et initialiser le modèle, spécifiant la version du modèle comme «Gemini-1.5-Flash».

Le code ressemble:

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class GeminiService {
  KENDO_RECOMMEND_PROMPT = `
Given a screenshot of a browser tell me which Kendo UI components help me to build that UI.

The response a string, with the section detected, the components of Kendo UI and a URL.

Format the output as Markdown. Include headings, bold text, bullet points, and hyperlinks as appropriate.
`;

  private generativeModel = new GoogleGenerativeAI(
	GEMINI_KEY,
  ).getGenerativeModel({
	model: 'gemini-1.5-flash',
  });

Il est temps d’interagir avec les Gémeaux! Le getResponse La méthode (toujours à l’intérieur de notre service Gemini) prendra une entrée utilisateur et une image téléchargée, puis interagira avec le modèle AI. Il appellera le generateContent Méthode du modèle AI, passant un tableau contenant le KENDO_RECOMMEND_PROMPT et l’image téléchargée. La réponse de l’IA sera traitée pour extraire le texte et la transformer en HTML en utilisant le marked bibliothèque.

  async getResponse(image: string): Promise<string> {
	const { response } = await this.generativeModel.generateContent([
  	this.KENDO_RECOMMEND_PROMPT,
  	image,
	]);
	const llmResponse = response.text();
	return marked(llmResponse);
  }

Une fois que l’IA a généré une réponse, nous utiliserons le marked Bibliothèque pour convertir le texte Markdown en HTML. Cette réponse formée par HTML sera ensuite retournée afin qu’elle puisse être affichée dans l’interface de chat.

Le code final ressemble:

import { Injectable } from '@angular/core';
import { GoogleGenerativeAI } from '@google/generative-ai';
import { marked } from 'marked';
import { GEMINI_KEY } from '../../environment';

@Injectable({ providedIn: 'root' })
export class GeminiService {
  KENDO_RECOMMEND_PROMPT = `
Given a screenshot of a browser tell me which kendo ui components help me to solve, and why can help me to build that UI.

The response a string , with the section detected , the components of kendo and a url.

Format the output as Markdown. Include headings, bold text, bullet points, and hyperlinks as appropriate.
`;

  private generativeModel = new GoogleGenerativeAI(
	GEMINI_KEY,
  ).getGenerativeModel({
	model: 'gemini-1.5-flash',
  });

  async getResponse(image: string): Promise<string> {
	const { response } = await this.generativeModel.generateContent([
  	this.KENDO_RECOMMEND_PROMPT,
  	image,
	]);
	const llmResponse = response.text();
	return marked(llmResponse);
  }
}

Ensuite, il est temps de travailler nos composants kendo-upload et kendo-chat avec leurs interactions, mais avant d’utiliser le téléchargement de Kendo, nous devons nous inscrire provideHttpClient et provideAnimations dans app.config.ts.

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
	provideZoneChangeDetection({ eventCoalescing: true }),
	provideRouter(routes),
	provideHttpClient(),
	provideAnimations(),
  ],
};

Utilisation des téléchargements de l’interface utilisateur et de Kendo Conversation

Ouvrir app.component.ts et importer le KENDO_CHAT et KENDO_FILESELECT Pour avoir accès au composant Kendo-chat et au composant de téléchargement de fichiers dans le modèle.

import { KENDO_CHAT } from '@progress/kendo-angular-conversational-ui';
import { KENDO_FILESELECT } from '@progress/kendo-angular-upload';

@Component({
  selector: 'app-root',
  imports: [KENDO_CHAT, KENDO_FILESELECT],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})

Avant de commencer, ayons un petit aperçu de Kendo-chat. Il est livré avec une interface de chat personnalisable hors de la boîte. Je donnerai un petit aperçu des propriétés clés pour nous faciliter la tâche:

  • [messages]: Lie le tableau des messages de la conversation actuelle au composant de chat.
  • [user]: Définit l’utilisateur actuel en interagissant avec le chat. Ceci est important pour différencier les messages envoyés par l’utilisateur et autres.
  • (sendMessage): Événement émis lorsque l’utilisateur frappe l’envoi.
  • kendoChatMessageTemplate et kendoChatMessageBox: Rendre le modèle flexible et personnalisable pour le chat et les messages.

Et n’oubliez pas de donner Kendo ui pour angulaire a essayé (gratuitement) Si vous ne l’avez pas déjà fait! (Aucune carte de crédit requise!)

Ensuite, définissez les propriétés du bot et des détails de l’utilisateur pour personnaliser la conversation des chatbots:

  • GEMINI_USER représente le chatbot.
  • JOHN_DOE_USER représente l’utilisateur interagissant avec le chatbot.
  • INITIAL_MESSAGE est le premier message que le chatbot envoie.
  GEMINI_USER: User = { id: 1, name: 'Gemini' };
  JOHN_DOE_USER: User = { id: 2, name: 'John Doe' };
  INITIAL_MESSAGE: Message = {
	text: 'Hello! How I can help you with your website?',
	author: this.GEMINI_USER,
  };

Pour gérer les messages, utilisez un signal angulaire pour déclarer un tableau de messages avec les messages initiaux pour lier le [messages] propriété kendo-chat plus tard.

 messages = signal<Message[]>([this.INITIAL_MESSAGE]);

Ensuite, créez une méthode addMessageToMessages Pour ajouter de nouveaux messages à la conversation:

private addMessageToMessages(message: Message) {
  this.messages.update((m) => [...m, message]);
}

Nous avons déjà couvert le message, mais qu’en est-il du téléchargement? N’oubliez pas que dans l’interface utilisateur, nous allons permettre à l’utilisateur de télécharger une image, que nous enverrons à LLM. Cette partie sera gérée par kendo-fileselect.

Faisons-le!

Gérer l’image et la demande LLM

Tout d’abord, parce que nous allons envoyer l’image à la demande LLM, injectez le gemini.service:

  private geminiServiceInstance = inject(GeminiService);

Ensuite, nous créons deux nouvelles méthodes privées, fileToBase64 et handleFileUpload. fileToBase64 transforme le File à la chaîne de base64.

  private fileToBase64(file: File): Promise<string> {
	return new Promise((resolve, reject) => {
  	const reader = new FileReader();
  	reader.readAsDataURL(file);
  	reader.onload = () => resolve(reader.result as string);
  	reader.onerror = (error) => reject(error);
	});
  }

En savoir plus: https://developer.mozilla.org/en-us/docs/web/api/fileader/readasdataur.

Travaillons avec le handleFileUpload Méthode, qui gère le file et FileSelectComponent Interaction avec les Gémeaux. Tout d’abord, nous obtenons le ImageBase64. Ensuite, nous attendons que Geminiservice renvoie la réponse. Après cela, nous recréons un nouveau message avec la réponse et ajoutons au message. Et enfin nous effacons la liste des fichiers dans le fileSelectComponent.

La finale handleFileUpload Le code ressemble:

private async handleFileUpload(
	file: File,
	fileSelectComponent: FileSelectComponent,
  ) {
	try {
  	const imageBase64 = await this.fileToBase64(file);
  	const response =
    	await this.geminiServiceInstance.getResponse(imageBase64);
  	const responseMessage: Message = {
    	author: this.GEMINI_USER,
    	text: response,
  	};
  	this.addMessageToMessages(responseMessage);
	} finally {
  	fileSelectComponent.fileList.clear();
	}
  }

Avant d’appeler le handleFileUploadnous allons simuler ce que le LLM pense avec un faux message! 😈

  private createTypingMessage(): Message {
	return { typing: true, author: this.GEMINI_USER };
  }

Le uploadFile La méthode publique appellera addMessageToMessages avec une fausse dactylographie et parcourez la liste des fichiers à télécharger. S’il trouve un fichier, il appelle le handleFileUpload avec le fichier et le fileSelectComponent:

Le code ressemble:

  async uploadFile(fileSelectComponent: FileSelectComponent) {
	this.addMessageToMessages(this.createTypingMessage());
	const file = fileSelectComponent.fileList.firstFileToUpload[0]?.rawFile;
	if (file) {
  	await this.handleFileUpload(file, fileSelectComponent);
	}
  }

Le code final dans le app.component.ts On dirait:

import { Component, inject, signal } from '@angular/core';
import {
  KENDO_CHAT,
  Message,
  User,
} from '@progress/kendo-angular-conversational-ui';
import { GeminiService } from './services/gemini.service';
import {
  FileSelectComponent,
  KENDO_FILESELECT,
} from '@progress/kendo-angular-upload';

@Component({
  selector: 'app-root',
  imports: [KENDO_CHAT, KENDO_FILESELECT],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  GEMINI_USER: User = { id: 1, name: 'Gemini' };
  JOHN_DOE_USER: User = { id: 2, name: 'John Doe' };

  INITIAL_MESSAGE: Message = {
	text: 'Hello! How I can help you with your website?',
	author: this.GEMINI_USER,
  };

  messages = signal<Message[]>([this.INITIAL_MESSAGE]);

  private geminiServiceInstance = inject(GeminiService);

  private addMessageToMessages(message: Message) {
	this.messages.update((m) => [...m, message]);
  }

  async uploadFile(fileSelectComponent: FileSelectComponent) {
	this.addMessageToMessages(this.createTypingMessage());
	const file = fileSelectComponent.fileList.firstFileToUpload[0]?.rawFile;
	if (file) {
  	await this.handleFileUpload(file, fileSelectComponent);
	}
  }

  private createTypingMessage(): Message {
	return { typing: true, author: this.GEMINI_USER };
  }

  private async handleFileUpload(
	file: File,
	fileSelectComponent: FileSelectComponent,
  ) {
	try {
  	const imageBase64 = await this.fileToBase64(file);
  	const response =
    	await this.geminiServiceInstance.getResponse(imageBase64);
  	const responseMessage: Message = {
    	author: this.GEMINI_USER,
    	text: response,
  	};
  	this.addMessageToMessages(responseMessage);
	} finally {
  	fileSelectComponent.fileList.clear();
	}
  }

  private fileToBase64(file: File): Promise<string> {
	return new Promise((resolve, reject) => {
  	const reader = new FileReader();
  	reader.readAsDataURL(file);
  	reader.onload = () => resolve(reader.result as string);
  	reader.onerror = (error) => reject(error);
	});
  }
}

Nous avons toutes nos méthodes prêtes! Il est temps de lier nos méthodes et nos propriétés et les utiliser avec le kendo-chat et kendo-select composants dans le app.component.html.

Intégration du chat Kendo et de la sélection de fichiers

Maintenant nous allons ajouter kendo-chat et kendo-select à notre modèle. La combinaison gère à la fois les messages texte et les téléchargements d’images.

Tout d’abord, nous connectons le kendo-chat à l’utilisateur actuel avec la propriété utilisateur JOHN_DOE_USEqui est l’utilisateur qui parle au bot, et le [messages] propriété avec messages()qui contient tous les messages du chat.

Note que nous travaillons avec Signaux angulaires – lire plus.

Pour personnaliser comment les messages sont affichés, nous utilisons KendochatMessageTemplate. Cela nous permet de contrôler à quoi ressemble chaque message. Pour le message, nous utilisons [innerHTML] Pour montrer la réponse au format HTML grâce au marqué Bibliothèque pour convertir Markdown du texte en HTML.

Au lieu d’une entrée de texte normale pour le chatbot, nous utilisons Élection de fichiers kendo dans la zone d’entrée pour télécharger des images que le bot peut analyser Kendochat à mesurer la boîte de boxe.

Le composant Kendo FileSelect permet aux utilisateurs de choisir un fichier et nous indique quand un fichier est sélectionné à l’aide du ValueChange événement. Nous utilisons une variable de référence, #imagespour accéder au composant dans notre code, pour contrôler la liste des fichiers.

Le code final ressemble:

<kendo-chat
  [user]="JOHN_DOE_USER"
  [messages]="messages()">
  <ng-template kendoChatMessageTemplate let-message>
	<div [innerHTML]="message.text"></div>
  </ng-template>
  <ng-template kendoChatMessageBoxTemplate>
	<div class="k-text-center k-flex ">
  	<kendo-fileselect #images (valueChange)="uploadFile(images)"/>
	</div>
  </ng-template>
</kendo-chat>

C’est prêt! Il est temps d’économiser et de tester notre code, d’enregistrer vos modifications, d’exécuter ng serve Et regardez votre chatbot en action.

Résumer

Nous avons construit un chatbot avec un vrai combo Big Three en utilisant la puissance de Kendo ui pour la conversation angulaire ui pour construire une interface conversationnelle pour activer la puissance de téléchargement avec Élection de fichiers kendo Pour gérer les téléchargements de fichiers et Gémeaux ai pour analyser l’image et suggérer des composants de l’interface utilisateur de Kendo.

Dans notre chat, les utilisateurs peuvent télécharger une capture d’écran d’une page Web, et le chatbot analyse l’image et recommande les composants de l’interface utilisateur Kendo à utiliser avec des explications utiles et des liens vers les ressources.

Mais ce n’est qu’un seul chatbot – et juste le début! Voici quelques idées à prendre comme ajouter plus de fonctionnalités, comme autoriser plusieurs téléchargements de fichiers ou personnaliser le Vous Et essayez d’autres Composants Kendo UI Pour étendre les capacités du chatbot.

Il est temps de construire! 😊

Code source: https://github.com/danywalls/kendo-chat-gemini-flash/.

N’oubliez pas: Kendo UI pour Angular est livré avec un essai gratuit de 30 jours, alors donnez-lui un tour!

Essayer maintenant

Le meilleur outil 2023 pour ta croissance Instagram !



Source link
Quitter la version mobile