L'intégration de l'IA dans les applications Web est devenue de plus en plus répandue. AWS Bedrock offre une plate-forme puissante pour accéder et exploiter les modèles de base (FM) pour créer des applications d'IA génératives. Cet article vous guidera dans l'intégration des fonctionnalités d'IA dans votre application Angular à l'aide d'AWS Bedrock.

Conditions préalables

• Compréhension de base d'Angular et de TypeScript.
• Compte AWS avec les autorisations nécessaires.
• Node.js et npm (ou fil) installés.
• Un projet Angular mis en place.

Guide étape par étape

Cet article vous guidera dans l'intégration des fonctionnalités d'IA dans votre application Angular à l'aide d'AWS Bedrock.

1. Configuration d'AWS Bedrock

• Créez un compte AWS : si vous n'en avez pas, créez un compte AWS.
• Configurer des rôles IAM : créez des rôles IAM avec les autorisations nécessaires pour accéder à AWS Bedrock et aux autres services requis.
• Choisissez un modèle de base : AWS Bedrock propose une variété de modèles de base provenant de différents fournisseurs. Sélectionnez le modèle qui correspond le mieux aux exigences de votre application.

2. Création d'une fonction AWS Lambda

• Créez une nouvelle fonction Lambda : utilisez la AWS Management Console ou l'AWS CLI pour créer une nouvelle fonction Lambda.
• Choisissez le runtime Node.js : sélectionnez Node.js comme runtime pour votre fonction.
• Écrivez le code de la fonction Lambda : ce code interagira avec l'API AWS Bedrock pour envoyer des invites et recevoir des réponses.

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

• Configurez la fonction : définissez le rôle IAM et les variables d'environnement appropriées.

3. Création d'un service angulaire

Générer un nouveau service Angular : utilisez la CLI Angular pour créer un nouveau service afin de gérer les interactions avec la fonction Lambda.

ng generate service bedrock

• Injecter HttpClient : injectez le HttpClient pour envoyer des requêtes HTTP à la fonction Lambda.
• Créez une méthode pour appeler la fonction Lambda : cette méthode enverra l'invite à la fonction Lambda et renverra la réponse.

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. Intégrer l'IA dans votre composant angulaire

• Importez le service Bedrock : importez le service Bedrock dans votre composant.
• Créer un formulaire ou un champ de saisie : autorisez les utilisateurs à saisir du texte sous forme d'invite.
• Appelez le service Bedrock : lorsqu'un utilisateur soumet l'invite, appelez le service Bedrock pour générer du texte.
• Afficher le texte généré : affichez le texte généré dans la vue de votre composant.

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

Conclusion:

En suivant ces étapes, vous pouvez intégrer avec succès les fonctionnalités d'IA dans votre application Angular à l'aide d'AWS Bedrock. Cette intégration peut améliorer l'expérience utilisateur, automatiser les tâches et ouvrir de nouvelles possibilités pour votre application.

Remarque : remplacez les espaces réservés tels que YOUR_MODEL_ID et https://your-lambda-function-endpoint par des valeurs réelles.