Implemente una aplicación web sin servidor para editar imágenes con Amazon Bedrock

IA generativa La adopción entre diversas industrias está revolucionando diferentes tipos de aplicaciones, incluida la edición de imágenes. La edición de imágenes se utiliza en diversos sectores, como el diseño gráfico, el marketing y las redes sociales. Los usuarios confían en herramientas especializadas para editar imágenes. Crear una solución personalizada para esta tarea puede resultar complejo. Sin embargo, al utilizar varios servicios de AWS, puede implementar rápidamente una sin servidor Solución para editar imágenes. Este enfoque puede brindarles a sus equipos acceso a modelos básicos (FM) de edición de imágenes utilizando Roca Amazónica.

Amazon Bedrock es un servicio totalmente administrado que hace que los FM de las principales empresas emergentes de IA y Amazon estén disponibles a través de una API, por lo que puede elegir entre una amplia gama de FM para encontrar el modelo que mejor se adapte a su caso de uso. Amazon Bedrock no tiene servidor, por lo que puede comenzar rápidamente, personalizar de forma privada los FM con sus propios datos e integrarlos e implementarlos en sus aplicaciones mediante herramientas de AWS sin tener que administrar la infraestructura.

Generador de imágenes Amazon Titan G1 es un AI FM disponible con Amazon Bedrock que le permite generar una imagen a partir de texto o cargar y editar su propia imagen. Algunas de las características clave en las que nos centramos incluyen en pintura y pintar.

Esta publicación presenta una solución que simplifica la implementación de una aplicación web para la edición de imágenes utilizando los servicios sin servidor de AWS. Usamos AWS amplificar, Cognito Amazonas, Puerta de enlace API de Amazon, AWS Lambday Amazon Bedrock con el modelo Amazon Titan Image Generator G1 para crear una aplicación para editar imágenes mediante indicaciones. Cubrimos el funcionamiento interno de la solución para ayudarlo a comprender la función de cada servicio y cómo están conectados para brindarle una solución completa. Al momento de escribir esta publicación, Amazon Titan Image Generator G1 viene en dos versiones; Para esta publicación, utilizamos la versión 2.

Descripción general de la solución

El siguiente diagrama proporciona una descripción general y destaca los componentes clave. La arquitectura utiliza Amazon Cognito para la autenticación de usuarios y Amplify como entorno de alojamiento para nuestra aplicación frontend. Se utiliza una combinación de API Gateway y una función Lambda para nuestros servicios backend, y Amazon Bedrock se integra con el modelo FM, lo que permite a los usuarios editar la imagen mediante indicaciones.

Requisitos previos

Debe tener lo siguiente implementado para completar la solución en esta publicación:

Implemente recursos de soluciones mediante AWS CloudFormation

Cuando ejecutas el Formación en la nube de AWS plantilla, se implementan los siguientes recursos:

• Recursos de Amazon Cognito:
• Recursos lambda:
  • Función: <Stack name>-ImageEditBackend-<auto-generated>
• Gestión de acceso a identidades de AWS (IAM) recursos:
  • Rol de IAM: <Stack name>-ImageEditBackendRole-<auto-generated>
  • Política en línea de IAM: AmazonBedrockAccess (Esta política permite a Lambda invocar Amazon Bedrock FM amazon.titan-image-generator-v2:0)
• Recursos de puerta de enlace API:
  • API de descanso: ImageEditingAppBackendAPI
  • Métodos:
    • OPCIONES: asignación de encabezado agregada para CORS
    • POST – Integración Lambda
  • Autorización: A través de Amazon Cognito usando CognitoAuthorizer

Después de implementar la plantilla de CloudFormation, copie lo siguiente del archivo Salidas pestaña que se utilizará durante la implementación de Amplify:

• userPoolId
• userPoolClientId
• invokeUrl

Implementar la aplicación Amplify

Debe implementar manualmente la aplicación Amplify utilizando el código de interfaz que se encuentra en GitHub. Complete los siguientes pasos:

1. Descargue el código de interfaz del repositorio de GitHub.
2. Descomprima el archivo descargado y navegue hasta la carpeta.
3. En el js carpeta, busque la config.js archivar y reemplazar los valores de XYZ para userPoolId, userPoolClientIdy invokeUrl con los valores que recopiló de las salidas de la pila de CloudFormation. Establecer el region valor según la región donde está implementando la solución.

El siguiente es un ejemplo config.js archivo:

window._config = {
    cognito: {
        userPoolId: 'XYZ', // e.g. us-west-2_uXboG5pAb
        userPoolClientId: 'XYZ', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
        region: 'XYZ// e.g. us-west-2
    },
    api: {
        invokeUrl: 'XYZ' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod,
    }
};

4. Seleccione todos los archivos y comprímalos como se muestra en la siguiente captura de pantalla.

Asegúrese de comprimir el contenido y no la carpeta de nivel superior. Por ejemplo, si el resultado de su compilación genera una carpeta llamada AWS-Amplify-Codenavegue hasta esa carpeta, seleccione todo el contenido y luego comprima el contenido.

5. Utilice el nuevo archivo .zip para manualmente desplegar la aplicación en Amplify.

Una vez implementada, recibirá un dominio que podrá utilizar en pasos posteriores para acceder a la aplicación.

6. Crear un usuario de prueba en el grupo de usuarios de Amazon Cognito.

Se requiere una dirección de correo electrónico para este usuario porque deberá marcar la dirección de correo electrónico como verificada.

7. Regrese a la página de Amplify y use el dominio que generó automáticamente para acceder a la aplicación.

Utilice Amazon Cognito para la autenticación de usuarios

Amazon Cognito es una plataforma de identidad que puede utilizar para autenticar y autorizar usuarios. Usamos Amazon Cognito en nuestra solución para verificar al usuario antes de que pueda usar la aplicación de edición de imágenes.

Al acceder a la URL de la herramienta de edición de imágenes, se le pedirá que inicie sesión con un usuario de prueba creado previamente. Para iniciar sesión por primera vez, se pedirá a los usuarios que actualicen su contraseña. Después de este proceso, las credenciales del usuario se validan con los registros almacenados en el grupo de usuarios. Si las credenciales coinciden, Amazon Cognito emitirá un token web JSON (JWT). En el Carga útil API que se enviará sección de la página, notará que el Autorización El campo se ha actualizado con el JWT recién emitido.

Utilice Lambda para el código backend y Amazon Bedrock para la función de IA generativa

El código de backend está alojado en Lambda y se inicia mediante solicitudes de usuarios enrutadas a través de API Gateway. La función Lambda procesa la carga útil de la solicitud y la reenvía a Amazon Bedrock. La respuesta de Amazon Bedrock sigue la misma ruta que la solicitud inicial.

Utilice API Gateway para la gestión de API

API Gateway agiliza la gestión de API, lo que permite a los desarrolladores implementar, mantener, monitorear, proteger y escalar sus API sin esfuerzo. En nuestro caso de uso, API Gateway sirve como orquestador de la lógica de la aplicación y proporciona regulación para administrar la carga en el backend. Sin API Gateway, necesitaría utilizar el SDK de JavaScript en la interfaz para interactuar directamente con la API de Amazon Bedrock, lo que aporta más trabajo a la interfaz.

Utilice Amplify para el código de interfaz

Amplify ofrece un entorno de desarrollo para crear aplicaciones web y móviles seguras y escalables. Permite a los desarrolladores centrarse en su código en lugar de preocuparse por la infraestructura subyacente. Amplify también se integra con muchos proveedores de Git. Para esta solución, cargamos manualmente nuestro código de interfaz utilizando el método descrito anteriormente en esta publicación.

Tutorial de la herramienta de edición de imágenes

Navegue hasta la URL proporcionada después de crear la aplicación en Amplify e inicie sesión. En el primer intento de inicio de sesión, se le pedirá que restablezca su contraseña.

A medida que siga los pasos de esta herramienta, notará la Carga útil API que se enviará sección en el lado derecho que se actualiza dinámicamente, reflejando los detalles mencionados en los pasos correspondientes a continuación.

Paso 1: crea una máscara en tu imagen

Para crear una máscara en su imagen, elija un archivo (JPEG, JPG o PNG).

Después de cargar la imagen, la interfaz convierte el archivo a base64 y base_image El valor se actualiza.

Al seleccionar una parte de la imagen que desea editar, se creará una máscara y mask El valor se actualiza con un nuevo valor base64. También puede utilizar la opción de tamaño de trazo para ajustar el área que está seleccionando.

Ahora tienes la imagen original y la imagen de máscara codificadas en base64. (El modelo Amazon Titan Image Generator G1 requiere que las entradas estén en codificación base64).

Paso 2: escriba un mensaje y configure sus opciones

Escribe un mensaje que describa lo que quieres hacer con la imagen. Para este ejemplo, ingresamos Make the driveway clear and empty. Esto se refleja en el mensaje de la derecha.

Puede elegir entre las siguientes opciones de edición de imágenes: pintura interna y pintura externa. El valor para mode se actualiza dependiendo de su selección.

• Utilice inpainting para eliminar elementos enmascarados y reemplazarlos con píxeles de fondo
• Utilice pintura exterior para extender los píxeles de la imagen enmascarada hasta los límites de la imagen.

Elegir Enviar a API para enviar la carga útil a la puerta de enlace API. Esta acción invoca la función Lambda, que valida la carga útil recibida. Si la carga útil se valida correctamente, la función Lambda procede a invocar la API de Amazon Bedrock para su posterior procesamiento.

La API de Amazon Bedrock genera dos salidas de imágenes en formato base64, que se transmiten a la aplicación frontend y se representan como imágenes visuales.

Paso 3: ver y descargar el resultado

La siguiente captura de pantalla muestra los resultados de nuestra prueba. Puede descargar los resultados o proporcionar un mensaje actualizado para obtener un nuevo resultado.

Pruebas y solución de problemas

Cuando inicias el Enviar a API acción, el sistema realiza una verificación de validación. Si falta la información requerida o es incorrecta, mostrará una notificación de error. Por ejemplo, si intenta enviar una imagen a la API sin proporcionar un mensaje, aparecerá un mensaje de error en el lado derecho de la interfaz, alertándole de la entrada que falta, como se muestra en la siguiente captura de pantalla.

Limpiar

Si decide dejar de usar la herramienta de edición de imágenes, puede seguir estos pasos para eliminar la herramienta de edición de imágenes, sus recursos asociados implementados mediante AWS CloudFormation y la implementación de Amplify:

1. Elimine la pila de CloudFormation:
   1. En la consola de AWS CloudFormation, elija pilas en el panel de navegación.
   2. Localice la pila que creó durante el proceso de implementación (le asignó un nombre).
   3. Seleccione la pila y elija Borrar.
2. Elimine la aplicación Amplify y sus recursos. Para obtener instrucciones, consulte Limpiar recursos.

Conclusión

En esta publicación, exploramos una solución de muestra que puede utilizar para implementar una aplicación de edición de imágenes mediante los servicios sin servidor de AWS y los servicios de IA generativa. Usamos Amazon Bedrock y Amazon Titan FM que le permite editar imágenes mediante indicaciones. Al adoptar esta solución, obtiene la ventaja de utilizar los servicios administrados de AWS, por lo que no tiene que mantener la infraestructura subyacente. Comience hoy implementando esta solución de muestra.

Recursos adicionales

Para obtener más información sobre Amazon Bedrock, consulte los siguientes recursos:

Para obtener más información sobre el modelo Amazon Titan Image Generator G1, consulte los siguientes recursos:

Acerca de los autores

salman ahmed es gerente técnico senior de cuentas en AWS Enterprise Support. Le gusta ayudar a los clientes de la industria de viajes y hotelería a diseñar, implementar y respaldar la infraestructura de la nube. Con pasión por los servicios de redes y años de experiencia, ayuda a los clientes a adoptar varios servicios de redes de AWS. Fuera del trabajo, Salman disfruta de la fotografía, viajar y ver a sus equipos deportivos favoritos.

Sergio Barraza es líder senior de soporte empresarial en AWS y ayuda a los clientes de energía a diseñar y optimizar soluciones en la nube. Apasionado por el desarrollo de software, guía a los clientes de energía a través de la adopción de servicios de AWS. Fuera del trabajo, Sergio es un músico multiinstrumentista que toca la guitarra, el piano y la batería, y también practica Wing Chun Kung Fu.

Ravi Kumar es un gerente técnico senior de cuentas en AWS Enterprise Support que ayuda a los clientes de la industria de viajes y hotelería a optimizar sus operaciones en la nube en AWS. Es un profesional de TI orientado a resultados con más de 20 años de experiencia. En su tiempo libre, Ravi disfruta de actividades creativas como pintar. También le gusta jugar al cricket y viajar a lugares nuevos.

Ankush Goyal es un líder de soporte empresarial en AWS Enterprise Support que ayuda a los clientes a optimizar sus operaciones en la nube en AWS. Es un profesional de TI orientado a resultados con más de 20 años de experiencia.