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

• Inject 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('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;
      });
  }
}

結論：

これらの手順に従うことで、AWS Bedrock を使用して AI 機能を Angular アプリケーションに正常に統合できます。この統合により、ユーザー エクスペリエンスが向上し、タスクが自動化され、アプリケーションの新たな可能性が解き放たれます。

注: YOUR_MODEL_ID や https://your-lambda-function-endpoint などのプレースホルダーを実際の値に置き換えます。