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 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.
• Einrichten von IAM-Rollen: 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.
• Wählen Sie Node.js-Laufzeit: Wählen Sie Node.js als Laufzeit für Ihre Funktion.
• 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

• Inject HttpClient: 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('https://your-lambda-function-endpoint', { prompt });
  }
}

4. Integration von KI in Ihre Angular-Komponente

• Importieren Sie den Bedrock-Dienst: Importieren Sie den Bedrock-Dienst in Ihre Komponente.
• Erstellen Sie ein Formular oder Eingabefeld: Ermöglichen Sie Benutzern die Eingabe von Text als Eingabeaufforderung.
• Bedrock-Dienst aufrufen: Wenn ein Benutzer die Eingabeaufforderung sendet, rufen Sie den Bedrock-Dienst auf, um Text zu generieren.
• Generierten Text anzeigen: Zeigt 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.