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.
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.
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.
Google hat eine lange Geschichte in der KI-Innovation:
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.
npm install @google/generative-ai
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.
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.
Der folgende Code zeigt, wie Sie mit Gemini Pro interagieren, um Benutzernachrichten zu senden und KI-Antworten zu empfangen:
npm install @google/generative-ai
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()); } }
Verwenden Sie diese Pipe in Ihrer Vorlage:
<span> <hr> <p>Weitere Informationen zu KI und Zwillingen: </p>
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!