"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Agregar GenAI a una aplicación angular mediante AWS Bedrock

Agregar GenAI a una aplicación angular mediante AWS Bedrock

Publicado el 2024-08-19
Navegar:953

Adding GenAI to Angular Application Using AWS Bedrock

La integración de IA en aplicaciones web se ha vuelto cada vez más frecuente. AWS Bedrock ofrece una potente plataforma para acceder y aprovechar los modelos básicos (FM) para crear aplicaciones de IA generativa. Este artículo lo guiará en la incorporación de capacidades de IA en su aplicación Angular utilizando AWS Bedrock.

Requisitos previos

  • Comprensión básica de Angular y TypeScript.
  • Cuenta de AWS con los permisos necesarios.
  • Node.js y npm (o hilo) instalados.
  • Un proyecto Angular configurado.

Guía paso a paso

Este artículo lo guiará en la incorporación de capacidades de IA en su aplicación Angular utilizando AWS Bedrock.

1. Configuración de AWS Bedrock

  • Cree una cuenta de AWS: si no tiene una, cree una cuenta de AWS.
  • Configurar roles de IAM: cree roles de IAM con los permisos necesarios para acceder a AWS Bedrock y otros servicios necesarios.
  • Elija un modelo básico: AWS Bedrock ofrece una variedad de modelos básicos de diferentes proveedores. Seleccione el modelo que mejor se adapte a los requisitos de su aplicación.

2. Creación de una función AWS Lambda

  • Cree una nueva función Lambda: utilice la consola de administración de AWS o la CLI de AWS para crear una nueva función Lambda.
  • Elija el tiempo de ejecución de Node.js: seleccione Node.js como tiempo de ejecución para su función.
  • Escriba el código de función Lambda: este código interactuará con la API de AWS Bedrock para enviar mensajes y recibir respuestas.
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 la función: establezca la función de IAM y las variables de entorno adecuadas.

3. Creando un servicio angular

Genere un nuevo servicio Angular: utilice la CLI de Angular para crear un nuevo servicio para manejar las interacciones con la función Lambda.

ng generate service bedrock
  • Inyectar HttpClient: inyecta HttpClient para realizar solicitudes HTTP a la función Lambda.
  • Cree un método para llamar a la función Lambda: este método enviará el mensaje a la función Lambda y devolverá la respuesta.
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. Integración de IA en su componente angular

  • Importar el servicio Bedrock: importe el servicio Bedrock a su componente.
  • Crear un formulario o campo de entrada: permite a los usuarios ingresar texto como mensaje.
  • Llame al servicio Bedrock: cuando un usuario envía el mensaje, llame al servicio Bedrock para generar texto.
  • Mostrar el texto generado: muestra el texto generado en la vista de su 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;
      });
  }
}

Conclusión:

Si sigue estos pasos, podrá integrar con éxito las capacidades de IA en su aplicación Angular mediante AWS Bedrock. Esta integración puede mejorar las experiencias del usuario, automatizar tareas y desbloquear nuevas posibilidades para su aplicación.

Nota: Reemplace marcadores de posición como YOUR_MODEL_ID y https://your-lambda-function-endpoint con valores reales.

Declaración de liberación Este artículo se reproduce en: https://dev.to/this-is-angular/adding-genai-to-angular-application-using-aws-bedrock-e0i?1 Si hay alguna infracción, comuníquese con Study_golang@163 .com para eliminarlo
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3