AWS Bedrock を使用して GenAI を Angular アプリケーションに追加する-jsチュートリアル-php.cn

AWS Bedrock を使用して GenAI を Angular アプリケーションに追加する

PHPz

リリース： 2024-08-09 02:32:22

オリジナル

828 人が閲覧しました

Adding GenAI to Angular Application Using AWS Bedrock

AI を Web アプリケーションに統合することはますます普及しています。 AWS Bedrock は、生成 AI アプリケーションを構築するための基盤モデル (FM) にアクセスして活用するための強力なプラットフォームを提供します。この記事では、AWS Bedrock を使用して AI 機能を Angular アプリケーションに組み込む方法を説明します。

前提条件

Angular と TypeScript の基本的な理解。
必要な権限を持つ AWS アカウント。
Node.js と npm (または Yarn) がインストールされています。
Angular プロジェクトがセットアップされました。

ステップバイステップガイド

この記事では、AWS Bedrock を使用して AI 機能を Angular アプリケーションに組み込む方法について説明します。

1. AWS Bedrock のセットアップ

AWS アカウントを作成する: AWS アカウントをお持ちでない場合は、AWS アカウントを作成します。
IAM ロールのセットアップ: AWS Bedrock およびその他の必要なサービスにアクセスするために必要な権限を持つ IAM ロールを作成します。
基盤モデルの選択: AWS Bedrock は、さまざまなプロバイダーからのさまざまな基盤モデルを提供します。アプリケーションの要件に最適なモデルを選択してください。

2. AWS Lambda 関数の作成

新しい Lambda 関数を作成する: AWS マネジメントコンソールまたは AWS CLI を使用して、新しい Lambda 関数を作成します。
Node.js ランタイムの選択: 関数のランタイムとして Node.js を選択します。
Lambda 関数コードを作成します。このコードは、AWS Bedrock API と対話してプロンプトを送信し、応答を受信します。

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;
  }
};

ログイン後にコピー

関数の構成: 適切な IAM ロールと環境変数を設定します。

3. Angular サービスの作成

新しい Angular サービスを生成する: Angular CLI を使用して、Lambda 関数との対話を処理する新しいサービスを作成します。

ng generate service bedrock

ログイン後にコピー

HttpClient を挿入: Lambda 関数に HTTP リクエストを行うために HttpClient を挿入します。
Lambda 関数を呼び出すメソッドを作成する: このメソッドは、Lambda 関数にプロンプトを送信し、応答を返します。

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. AI を Angular コンポーネントに統合する

Bedrock サービスのインポート: Bedrock サービスをコンポーネントにインポートします。
フォームまたは入力フィールドを作成する: ユーザーがプロンプトとしてテキストを入力できるようにします。
Bedrock サービスを呼び出す: ユーザーがプロンプトを送信するときに、Bedrock サービスを呼び出してテキストを生成します。
生成されたテキストを表示: コンポーネントのビューに生成されたテキストを表示します。

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;
      });
  }
}

ログイン後にコピー