Heim > Web-Frontend > js-Tutorial > Integration von Gemini AI in Angular: Erstellen einer Chat-Anwendung

Integration von Gemini AI in Angular: Erstellen einer Chat-Anwendung

Patricia Arquette
Freigeben: 2024-11-30 06:30:14
Original
414 Leute haben es durchsucht

Integrating Gemini AI in Angular: Building a Chat Application

Integration von Gemini AI in Angular: Erstellen einer Chat-Anwendung

Künstliche Intelligenz (KI) revolutioniert die Art und Weise, wie wir mit Technologie interagieren, und die Frontend-Entwicklung bildet da keine Ausnahme. Das Verständnis der KI-Dokumentation und APIs ist für moderne Frontend-Entwickler von entscheidender Bedeutung geworden. In diesem Artikel wird erläutert, wie Sie Gemini Pro in Angular verwenden, indem Sie eine Chat-Anwendung erstellen. Sie erfahren, wie Sie die Funktionen von Gemini integrieren und mithilfe von Eingabeaufforderungen einen benutzerdefinierten Bot erstellen, der auf spezifische Anforderungen zugeschnitten ist.

Überblick

In der Beispielanwendung habe ich einen Bot erstellt, der auf Angular-Konzepte und meinen persönlichen Lebenslauf geschult ist. Der Lebenslauf wurde als Text aus LinkedIn extrahiert, über Google AI Studio in ein Array von Objekten konvertiert und mit Eingabeaufforderungen ergänzt. Darüber hinaus wurde ein Einstellungsformular integriert, mit dem Benutzer Bot-Konfigurationen dynamisch anpassen können.

Dieses Tutorial setzt Vertrautheit mit ChatGPT und seinen Integrationskonzepten voraus. Für Anfänger vereinfacht Googles AI Studio (https://aistudio.google.com) API-Integrationen in JavaScript und anderen Sprachen.

Warum sollten Sie sich für Gemini anstelle von ChatGPT entscheiden?

Obwohl ChatGPT von OpenAI leistungsstark ist, ist der API-Zugriff mit Kosten verbunden und kann komplex in der Implementierung sein. Gemini bietet, unterstützt durch die umfassende KI-Expertise von Google, einen benutzerfreundlicheren Ansatz mit robuster Dokumentation und auf Entwickler zugeschnittenen Funktionen.

Eine kurze Geschichte von Google AI

Google hat eine lange Geschichte in der KI-Innovation:

  • 2001: Maschinelles Lernen wurde eingesetzt, um die Suchgenauigkeit zu verbessern.
  • 2006: Google Translate kam auf den Markt und wurde später mit TensorFlow und DeepMind weiterentwickelt.
  • 2016: AlphaGo besiegte die weltbesten Go-Spieler.
  • 2023: Die generative KI erreichte mit Gemini neue Höhen.

Durch die Kombination des robusten Angular-Frameworks mit den KI-Funktionen von Gemini können Sie intelligente Anwendungen erstellen, die KI-gesteuerte Interaktionen nahtlos integrieren.


Entwicklungsschritte

1. Gemini API-Integration

  • API-Schlüssel erhalten: Melden Sie sich für ein Google Cloud-Entwicklerkonto an.
  • SDK installieren: Verwenden Sie Node.js (Version >= 18), um das Gemini-Paket zu installieren:
  npm install @google/generative-ai
Nach dem Login kopieren
Nach dem Login kopieren
  • Erstellen Sie einen Dienst: Implementieren Sie einen Dienst zur Verarbeitung von API-Aufrufen, Fehlerbehandlung und Antwortformatierung.

2. Chat-Interface-Design

Integrieren Sie eine ansprechende Benutzeroberfläche mit Funktionen wie Chat-Blasen, Eingabefeldern und Themen. Verbessern Sie UX mit Angular-Animationen und einem Spinner für Verzögerungen.

3. Chat-Logik-Implementierung

Nutzen Sie die reaktive Programmierung von Angular, um Benutzereingaben, KI-Antworten und Chat-Verlauf zu synchronisieren. Nutzen Sie die API von Gemini, um Nachrichten effizient zu verwalten.

4. Verbesserung der Benutzererfahrung

  • Vordefinierte Fragen: Fügen Sie Schnelloptionen für Benutzer hinzu, um Gespräche zu starten.
  • Persönlichkeitsauswahl: Ermöglichen Sie Benutzern die Anpassung von Ton, Modell und API-Einstellungen über ein Formular.

Beispieldienst: DataService

Der folgende Code zeigt, wie Sie mit Gemini Pro interagieren, um Benutzernachrichten zu senden und KI-Antworten zu empfangen:

  npm install @google/generative-ai
Nach dem Login kopieren
Nach dem Login kopieren

Gemini-Antworten in HTML umwandeln

Gemini-Antworten können spezielle Markdown-ähnliche Zeichen enthalten. Die folgende Angular-Pipe wandelt sie in aussagekräftiges HTML um:

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());
  }
}
Nach dem Login kopieren

Verwenden Sie diese Pipe in Ihrer Vorlage:

<span>




<hr>

<p>Weitere Informationen zu KI und Zwillingen: </p>

Nach dem Login kopieren
  • Google AI-Blog
  • Google AI-Plattform
  • Zwillinge-Web

Dieser Artikel beleuchtet das Potenzial von Gemini für Entwickler und die einfache Integration von KI in Frontend-Projekte. Teilen Sie Ihre Erfahrungen oder Fragen in den Kommentaren!

Das obige ist der detaillierte Inhalt vonIntegration von Gemini AI in Angular: Erstellen einer Chat-Anwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage