A integração de IA em aplicativos da web tornou-se cada vez mais predominante. O AWS Bedrock oferece uma plataforma poderosa para acessar e aproveitar modelos básicos (FMs) para criar aplicações generativas de IA. Este artigo irá guiá-lo na incorporação de recursos de IA em seu aplicativo Angular usando AWS Bedrock.

Pré-requisitos

• Compreensão básica de Angular e TypeScript.
• Conta AWS com as permissões necessárias.
• Node.js e npm (ou yarn) instalados.
• Um projeto Angular configurado.

Guia passo a passo

Este artigo irá guiá-lo na incorporação de recursos de IA em seu aplicativo Angular usando AWS Bedrock.

1. Configurando o AWS Bedrock

• Crie uma conta AWS: se você não tiver uma, crie uma conta AWS.
• Configurar funções do IAM: crie funções do IAM com as permissões necessárias para acessar o AWS Bedrock e outros serviços necessários.
• Escolha um modelo de base: o AWS Bedrock oferece uma variedade de modelos de base de diferentes fornecedores. Selecione o modelo que melhor atende aos requisitos da sua aplicação.

2. Criando uma função AWS Lambda

• Crie uma nova função Lambda: use o AWS Management Console ou a AWS CLI para criar uma nova função Lambda.
• Escolha o tempo de execução do Node.js: selecione Node.js como o tempo de execução da sua função.
• Escreva o código da função Lambda: esse código interagirá com a API AWS Bedrock para enviar prompts e receber respostas.

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

• Configure a função: defina a função do IAM e as variáveis ​​de ambiente apropriadas.

3. Criando um serviço angular

Gere um novo serviço Angular: use a CLI Angular para criar um novo serviço para lidar com interações com a função Lambda.

ng generate service bedrock

• Injetar HttpClient: injeta o HttpClient para fazer solicitações HTTP para a função Lambda.
• Crie um método para chamar a função Lambda: Este método enviará o prompt para a função Lambda e retornará a resposta.

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. Integrando IA em seu componente Angular

• Importar o serviço Bedrock: importe o serviço Bedrock para o seu componente.
• Crie um formulário ou campo de entrada: permita que os usuários insiram texto como um prompt.
• Chame o serviço Bedrock: quando um usuário enviar o prompt, chame o serviço Bedrock para gerar o texto.
• Exibir o texto gerado: Exiba o texto gerado na visualização do seu componente.

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

Conclusão:

Seguindo essas etapas, você pode integrar com sucesso recursos de IA em seu aplicativo Angular usando AWS Bedrock. Essa integração pode aprimorar as experiências do usuário, automatizar tarefas e desbloquear novas possibilidades para seu aplicativo.

Observação: substitua espaços reservados como YOUR_MODEL_ID e https://your-lambda-function-endpoint por valores reais.