Hinzufügen von GenAI zu Angular-Anwendungen mithilfe von AWS Bedrock

Die Integration von KI in Webanwendungen wird immer häufiger. AWS Bedrock bietet eine leistungsstarke Plattform für den Zugriff auf und die Nutzung von Foundation Models (FMs) für die Erstellung generativer KI-Anwendungen. Dieser Artikel führt Sie durch die Integration von KI-Funktionen in Ihre Angular-Anwendung mithilfe von AWS Bedrock.

Voraussetzungen

• Grundlegendes Verständnis von Angular und TypeScript.
• AWS-Konto mit den erforderlichen Berechtigungen.
• Node.js und npm (oder Garn) installiert.
• Ein Angular-Projekt wurde eingerichtet.

Schritt-für-Schritt-Anleitung

Dieser Artikel führt Sie durch die Integration von KI-Funktionen in Ihre Angular-Anwendung mithilfe von AWS Bedrock.

1. Einrichten von AWS Bedrock

• Erstellen Sie ein AWS-Konto: Wenn Sie noch keins haben, erstellen Sie ein AWS-Konto.
• IAM-Rollen einrichten: Erstellen Sie IAM-Rollen mit den erforderlichen Berechtigungen für den Zugriff auf AWS Bedrock und andere erforderliche Dienste.
• Wählen Sie ein Fundamentmodell: AWS Bedrock bietet eine Vielzahl von Fundamentmodellen von verschiedenen Anbietern. Wählen Sie das Modell aus, das den Anforderungen Ihrer Anwendung am besten entspricht.

2. Erstellen einer AWS Lambda-Funktion

• Erstellen Sie eine neue Lambda-Funktion: Verwenden Sie die AWS Management Console oder die AWS CLI, um eine neue Lambda-Funktion zu erstellen.
• Node.js-Laufzeit auswählen: Wählen Sie Node.js als Laufzeit für Ihre Funktion aus.
• Schreiben Sie den Lambda-Funktionscode: Dieser Code interagiert mit der AWS Bedrock-API, um Eingabeaufforderungen zu senden und Antworten zu empfangen.

const AWS = require('aws-sdk');

const bedrockClient = new AWS.Bedrock({ region: 'us-east-1' }); // Replace with your region

exports.handler = async (event) => {
  const prompt = event.prompt;

  const params = {
    modelId: 'YOUR_MODEL_ID', // Replace with your model ID
    inputText: prompt
  };

  try {
    const response = await bedrockClient.generateText(params).promise();
    return response.text;
  } catch (error) {
    console.error(error);
    throw error;
  }
};

• Konfigurieren Sie die Funktion: Legen Sie die entsprechende IAM-Rolle und Umgebungsvariablen fest.

3. Erstellen eines Angular-Dienstes

Generieren Sie einen neuen Angular-Dienst: Verwenden Sie die Angular-CLI, um einen neuen Dienst zu erstellen, der Interaktionen mit der Lambda-Funktion verarbeitet.

ng generate service bedrock

• HttpClient injizieren: Injizieren Sie den HttpClient, um HTTP-Anfragen an die Lambda-Funktion zu stellen.
• Erstellen Sie eine Methode zum Aufrufen der Lambda-Funktion: Diese Methode sendet die Eingabeaufforderung an die Lambda-Funktion und gibt die Antwort zurück.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BedrockService {
  constructor(private http: HttpClient) {}

  generateText(prompt: string) {
    return this.http.post<string>('https://your-lambda-function-endpoint', { prompt });
  }
}

4. Integration von KI in Ihre Angular-Komponente

• Den Bedrock-Dienst importieren: Importieren Sie den Bedrock-Dienst in Ihre Komponente.
• Erstellen Sie ein Formular oder Eingabefeld: Ermöglichen Sie Benutzern die Texteingabe als Eingabeaufforderung.
• Rufen Sie den Bedrock-Dienst an: Wenn ein Benutzer die Eingabeaufforderung sendet, rufen Sie den Bedrock-Dienst an, um Text zu generieren.
• Generierten Text anzeigen: Zeigen Sie den generierten Text in der Ansicht Ihrer Komponente an.

import { Component } from '@angular/core';
import { BedrockService } from './bedrock.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  prompt: string = '';
  generatedText: string = '';

  constructor(private bedrockService: BedrockService) {}

  generate() {
    this.bedrockService.generateText(this.prompt)
      .subscribe(text => {
        this.generatedText = text;
      });
  }
}

Abschluss:

Indem Sie diese Schritte befolgen, können Sie KI-Funktionen mithilfe von AWS Bedrock erfolgreich in Ihre Angular-Anwendung integrieren. Diese Integration kann die Benutzererfahrung verbessern, Aufgaben automatisieren und neue Möglichkeiten für Ihre Anwendung erschließen.

Hinweis: Ersetzen Sie Platzhalter wie YOUR_MODEL_ID und https://your-lambda-function-endpoint durch tatsächliche Werte.

Das obige ist der detaillierte Inhalt vonHinzufügen von GenAI zu Angular-Anwendungen mithilfe von AWS Bedrock. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!