Intégrer Gemini AI dans Angular : créer une application de chat

Intégrer Gemini AI dans Angular : créer une application de chat

L'intelligence artificielle (IA) révolutionne la façon dont nous interagissons avec la technologie, et le développement front-end ne fait pas exception. Comprendre la documentation et les API de l'IA est devenu crucial pour les développeurs frontend modernes. Cet article explique comment utiliser Gemini Pro dans Angular en créant une application de chat. Vous apprendrez à intégrer les capacités de Gemini et à créer un bot personnalisé adapté à des besoins spécifiques à l'aide d'invites.

Aperçu

Dans l'exemple d'application, j'ai créé un bot formé aux concepts angulaires et mon CV personnel. Le CV a été extrait sous forme de texte de LinkedIn, converti en un ensemble d'objets via Google AI Studio et complété par des invites. De plus, un formulaire de paramètres a été intégré pour permettre aux utilisateurs d'ajuster dynamiquement les configurations des robots.

Ce tutoriel suppose une familiarité avec ChatGPT et ses concepts d'intégration. Pour les débutants, AI Studio de Google (https://aistudio.google.com) simplifie les intégrations d'API en JavaScript et dans d'autres langages.

Pourquoi choisir Gemini plutôt que ChatGPT ?

Bien que ChatGPT d'OpenAI soit puissant, son accès à l'API implique des coûts et peut être complexe à mettre en œuvre. Gemini, soutenu par la vaste expertise de Google en IA, propose une approche plus conviviale avec une documentation robuste et des fonctionnalités adaptées aux développeurs.

Une brève histoire de l'IA de Google

Google a une longue histoire en matière d'innovation en matière d'IA :

• 2001 : L'apprentissage automatique a été appliqué pour améliorer la précision de la recherche.
• 2006 : Google Translate a émergé, puis a progressé avec TensorFlow et DeepMind.
• 2016 : AlphaGo a battu les meilleurs joueurs de Go au monde.
• 2023 : L'IA générative a atteint de nouveaux sommets avec Gemini.

En combinant le cadre robuste d'Angular avec les capacités d'IA de Gemini, vous pouvez créer des applications intelligentes qui intègrent de manière transparente les interactions basées sur l'IA.

---

Étapes de développement

1. Intégration de l'API Gemini

• Obtenir la clé API : Inscrivez-vous pour un compte de développeur Google Cloud.
• Installer le SDK : Utilisez Node.js (version >= 18) pour installer le package Gemini :

  npm install @google/generative-ai

• Créer un service : Implémentez un service pour gérer les appels d'API, la gestion des erreurs et le formatage des réponses.

2. Conception d'interface de chat

Incorporez une interface utilisateur attrayante avec des fonctionnalités telles que des bulles de discussion, des champs de saisie et des thèmes. Améliorez l'UX à l'aide d'animations angulaires et d'un spinner pour les retards.

3. Implémentation de la logique de chat

Exploitez la programmation réactive d'Angular pour synchroniser les entrées des utilisateurs, les réponses de l'IA et l'historique des discussions. Utilisez l'API de Gemini pour gérer efficacement les messages.

4. Améliorer l'expérience utilisateur

• Questions prédéfinies : Ajoutez des options rapides permettant aux utilisateurs de démarrer des conversations.
• Sélection de personnalité : Permettez aux utilisateurs d'ajuster les paramètres de ton, de modèle et d'API via un formulaire.

---

Exemple de service : DataService

Le code suivant montre comment interagir avec Gemini Pro pour envoyer des messages aux utilisateurs et recevoir des réponses de l'IA :

  npm install @google/generative-ai

---

Transformer les réponses Gemini en HTML

Les réponses Gemini peuvent contenir des caractères spéciaux de type Markdown. Le tube angulaire suivant les convertit en HTML significatif :

import { Injectable } from "@angular/core";
import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/generative-ai";
import { from } from "rxjs";
import { GeminiConfig } from "./chat-form";
import { API_KEY_CONF } from "../config";

@Injectable({
  providedIn: "root",
})
export class DataService {
  generateContentWithGeminiPro(
    message: string,
    history: { role: string; parts: string }[],
    geminiConfig: GeminiConfig
  ) {
    const MODEL_NAME = geminiConfig.model;
    const API_KEY = geminiConfig.apiKey || API_KEY_CONF;

    async function response() {
      const genAI = new GoogleGenerativeAI(API_KEY);
      const model = genAI.getGenerativeModel({ model: MODEL_NAME });

      const generationConfig = {
        temperature: geminiConfig.temperature,
        maxOutputTokens: 2048,
      };

      const safetySettings = [
        {
          category: HarmCategory.HARM_CATEGORY_HARASSMENT,
          threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
        },
      ];

      const chat = model.startChat({ generationConfig, safetySettings, history });
      const result = await chat.sendMessage(message);
      return result.response.text();
    }

    return from(response());
  }
}

Utilisez ce tuyau dans votre modèle :

<span>




<hr>

<p>Pour en savoir plus sur l'IA et les Gémeaux : </p>

• Blog Google sur l'IA
• Plateforme Google IA
• Web Gémeaux

---

Cet article met en évidence le potentiel de Gemini pour les développeurs et la facilité d'intégration de l'IA dans les projets frontend. Partagez vos expériences ou questions dans les commentaires !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!