Cómo usar Duet AI para explorar y mejorar una aplicación existente

1. Descripción general

En este codelab, se demostrará cómo usar Duet AI para compilar una aplicación cliente a partir de un backend de API existente.

Qué aprenderás

El objetivo de este lab es ilustrar cómo se usa Duet AI con una aplicación existente. En este lab, aprenderás a realizar las siguientes tareas:

• Implementar la Solución de inicio rápido para el procesamiento de imágenes con IA/AA
• Usar Duet AI para explorar la aplicación de la API
• Usar Duet AI para crear un cliente para la aplicación de la API

Configuración: Crea un proyecto nuevo

Según las políticas de tu organización, es posible que no puedas implementar esta solución de forma correcta.

Recomendación: Usa una cuenta para la que tengas todos los permisos (como una cuenta personal) en lugar de una cuenta empresarial o de institución educativa.

Nota: Si creaste un proyecto recientemente en el que tienes todos los permisos y ya habilitaste la API de Duet AI en él, puedes seguir usándolo y omitir este paso. Por ejemplo, si acabas de completar otro codelab de Duet AI, puedes omitir este paso.

1. Ve a la consola de Google Cloud.
2. Haz clic en el menú desplegable del proyecto actual.
3. Haz clic en Proyecto nuevo.
4. Agrega un nombre de proyecto y haz clic en CREAR.
   • Recomendación: Usa un nombre de proyecto único para que Project name y Project ID sean los mismos

2. Implementa la Solución de inicio rápido

Las Soluciones de inicio rápido son plantillas de soluciones prediseñadas de Google Cloud. En este lab, se utiliza una Solución de inicio rápido para demostrar cómo Duet AI puede ayudar a mejorar una aplicación preexistente.

1. Ve a la página de detalles de Soluciones de inicio rápido para el procesamiento de imágenes con IA/AA.
   • Haz clic en el menú de opciones.
   • En el submenú Productos y soluciones, haz clic en Soluciones de inicio rápido.
   • Haz clic en Procesamiento de imágenes con IA/AA en Cloud Functions.
2. Haz clic en IMPLEMENTAR.
   • Si tu proyecto no tiene habilitada la facturación, habilitala.
   • Confirma el nombre del proyecto y haz clic en CONTINUAR.
   • Selecciona us-central1 (Iowa) como la región.
   • Si se te solicita ingresar otra entrada, acepta los valores predeterminados.
   • Haz clic en IMPLEMENTAR.
   • Esta acción puede tardar hasta 15 minutos.
   • No es necesario que hagas ningún cambio, pero puedes explorar la implementación de las Soluciones de inicio rápido.

Solución de problemas

1. Problema: ¿Ves un error que indica Partial deployment.?
   • Solución: Lamentablemente, eso significa que quizás debas borrar la implementación y comenzar de nuevo. Debe haber un botón que diga BORRAR IMPLEMENTACIÓN. Haz clic en ese botón y vuelve a implementar la Solución de inicio rápido.

3. Habilita Duet AI

Configura tu entorno de edición de código y habilita Duet AI.

1. Ve al editor de Cloud Shell.
   • Regresa a la consola de Google Cloud.
   • Escribe Cloud Shell Editor en la barra de búsqueda y haz clic en Editor de Cloud Shell en el menú desplegable.
   • Haz clic en Probar el nuevo editor si estás usando el editor heredado.
     • Nota: Si no ves el botón Probar el nuevo editor, es probable que ya estés utilizando el nuevo editor. El editor heredado funcionará, pero las vistas serán ligeramente diferentes.
   • Haz clic en el ícono Abrir en una ventana nueva.
2. Si se te solicita, ingresa a tu cuenta o autorízala.
   • Según tu configuración, es posible que se te pida que autorices tu cuenta varias veces durante este lab. Cuando se te solicite, selecciona Autorizar cada vez.
3. Haz clic en el botón Cloud Code - Acceder en la barra de estado de la parte inferior como se muestra. Autoriza el complemento según las instrucciones.
4. Si se te solicita, haz clic en Seleccionar un proyecto de Google Cloud y, luego, selecciona el proyecto que estás usando.
5. Habilita Duet AI.
   • Haz clic en Cloud Code.
     • Nota: Según el tamaño de tu pantalla, es posible que debas seguir uno o dos pasos.
   • Haz clic en Cambiar la configuración en la sección AYUDA Y COMENTARIOS.
   • Escribe Duet AI: Enable.
   • Selecciona la casilla de verificación (si aún no está seleccionada).
   • Vuelve a cargar tu IDE.
   • De esta manera, se habilitará Duet AI en Cloud Code, y la barra de estado de Duet AI aparecerá en tu IDE.
6. Haz clic en el botón Duet AI en la esquina inferior derecha como se muestra y selecciona el proyecto de Google Cloud correcto.
   • Si ves un error que indica Duet AI has not been enabled for your selected project, haz clic en Habilitar la API de Duet AI.
7. Confirma que puedes ver el proyecto de Google Cloud correcto a la izquierda (verás el nombre del proyecto) y Duet AI habilitado a la derecha, en la barra de estado como se muestra a continuación:

4. Descarga el código de Cloud Function

Descarga el código y usa Duet AI para obtener más información sobre las Soluciones de inicio rápido y el código que implementaste.

1. Si ya navegaste a otro lugar, haz clic en Cloud Code.
2. Haz clic en Cloud Functions.
   • Si ves el botón Seleccionar un proyecto, haz clic en él y selecciona el proyecto con el que estás trabajando.
   • Haz clic en la función annotate-http.
   • Haz clic en el ícono de Descargar en un nuevo lugar de trabajo.
3. Usa annotate-http-1 como nombre del espacio de trabajo (debe ser el predeterminado) y haz clic en Aceptar.
4. Abre el archivo main.py.
   • Haz clic en el ícono del Explorador.
   • Haz clic en el archivo main.py para abrirlo.
5. Haz clic en el ícono del chat de Duet AI.
   • Nota: Según el tamaño de tu pantalla, es posible que debas seguir uno o dos pasos.
6. Intenta hacerle una pregunta a Duet AI. Ingresa una instrucción como:
   • What is a Jump Start Solution in Google Cloud?
   • Explain this code.

Cómo restablecer el chat de Duet AI

Las instrucciones afectan las instrucciones futuras. Por ejemplo, si cometes un error de escritura en el ID o la región del proyecto, estos se mantendrán en las instrucciones y las respuestas futuras, lo que puede afectar negativamente tu experiencia. Si cometiste un error de escritura o quieres borrar el historial por alguna otra razón, puedes usar el ícono de la papelera para restablecer el chat.

5. Llamada al extremo existente de Cloud Function

Explora el código y llama al extremo que implementaste en la Solución de inicio rápido.

1. Ingresa la instrucción:
   • IMPORTANTE: En la siguiente instrucción, reemplaza my-project-with-duet por tu ID del proyecto.
   • The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
   • Deberías recibir una respuesta que incluya un comando curl como el siguiente:

     curl -X POST \
         -H "Authorization: Bearer $(gcloud auth print-access-token)" \
     ...
     

   • Copia este comando curl para usarlo en el siguiente paso.
2. Prueba el comando en una terminal nueva.
   • Haz clic en el menú de opciones.
   • Haz clic en Terminal.
   • Haz clic en Terminal nueva.
   • Pega el comando curl del paso anterior en la terminal y presiona Enter para ejecutar el comando.
   • Deberías recibir una respuesta que comience de la siguiente manera:

     {
         "labelAnnotations": [
         {
         "mid": "/m/0csby",
         "description": "Cloud",
         "score": 0.97885925,
         "topicality": 0.97885925,
     ...
     

3. (Opcional) Haz esto con otra imagen de la Internet pública. Para ello, instruye a Duet algo como lo siguiente:
   • Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

Solución de problemas

Nota sobre el no determinismo: Duet AI y otros productos que usan modelos de lenguaje grandes (LLM) no son determinísticos; es decir, si se tiene la misma entrada, es posible que obtengas resultados diferentes. Incluso si sigues los pasos a la perfección, es posible que no obtengas comandos que funcionen. Estos pasos de solución de problemas deberían ayudarte a solucionarlos.

El comando curl generado debería verse de la siguiente manera:

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

Duet AI está usando TEST_IMAGE en el archivo main.py, que es una imagen de la Torre Eiffel.

Si el comando curl no funciona, verifica lo siguiente:

1. Problema: ¿El extremo de URL incluye .a.run.app?
   • Solución: Duet podría pensar que estás realizando implementaciones en Cloud Run. Reemplaza my-project-with-duet por tu ID del proyecto en https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate para obtener el extremo de Cloud Functions correcto y úsalo para el comando curl.
2. Problema: ¿El extremo de URL incluye my-project-with-duet?
   • Solución: Reemplaza my-project-with-duet por tu ID del proyecto.
3. Problema: ¿Falta us-central1 en el extremo de URL?
   • Solución: Asegúrate de que la URL comience con us-central1; por ejemplo, https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate con tu ID del proyecto.
4. Problema: Según la instrucción que se use, a veces el extremo generado será similar a cloudfunctions.net/annotate-http o cloudfunctions.net/annotate. ¿Falta /annotate-http/annotate al final en el extremo de URL?
   • Solución: Asegúrate de que el extremo de URL termine con la ruta de acceso completa de la aplicación de la API cloudfunctions.net/annotate-http/annotate.
5. Problema: La solicitud de cURL funciona, pero no recibe mucha información. ¿La solicitud incluye funciones?
   • Solución: Este no es un problema importante. Si continúas sin cambiar nada, el resto del lab seguirá funcionando. Si quieres obtener más información, puedes pedirle a Duet que agregue funciones a la solicitud de cURL.
6. Problema: Las respuestas parecen incorrectas o carecen de contexto específico del código. ¿Estás usando el chat de Duet AI en el editor de Cloud Shell?
   • Solución: Intenta abrir el archivo main.py y destacar el código relacionado con tu instrucción mientras usas el chat de Duet AI en el editor de Cloud Shell. El asistente de Duet AI en Google Cloud tiene un contexto diferente, lo que conducirá a respuestas distintas.
7. Problema: La respuesta de la instrucción sigue sin ser del todo correcta.
   • Solución: Prueba con otra instrucción para darle a Duet AI aún más orientación sobre lo que te gustaría que produjera. Asegúrate de reemplazar my-project-with-duet por tu ID del proyecto. A continuación, se muestra un ejemplo:

     Give me the curl command for:
     
     1- Cloud Function running in us-central1 and project my-project-with-duet
     2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
     3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }
     

8. Problema: Después de seguir todos estos pasos para solucionar problemas, la solución sigue sin funcionar.
   • Solución: Debido a la naturaleza no determinística de los LLMs, es posible que Duet genere una respuesta que no funcione. Si eso sucede, copia el comando curl de ejemplo anterior y, luego, intenta ejecutarlo en la terminal. Asegúrate de reemplazar my-project-with-duet por tu ID del proyecto.

6. Crea un cliente de aplicación web para la API

Usa Duet AI para generar un archivo index.html que llame al extremo de Cloud Function de la Solución de inicio rápido. Luego, implementa el archivo index.html en Firebase Hosting para ver el código en acción.

1. Genera el código del cliente.
   • En el cuadro de chat de Duet AI, ingresa la siguiente instrucción:
     • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
   • Copia el archivo index.html generado en la respuesta.
     • NOTA: Necesitarás este código más adelante, así que guárdalo en algún lugar si te preocupa perderlo.
   • Cierra main.py.
2. Crea un directorio de frontend nuevo.
   • Puedes pedirle a Duet AI algo como lo siguiente:
     • What are the console commands to create and navigate to a new frontend directory?
   • Deberías ver resultados como mkdir frontend y cd frontend.
   • Usa la terminal de Cloud Shell para confirmar que aún te encuentras en el directorio annotate-http-1 y ejecuta esos comandos:
     • cd ~/annotate-http-1
     • mkdir frontend
     • cd frontend
3. Confirma que accediste al proyecto correcto en la terminal de Cloud Shell.
   • Puedes pedirle a Duet AI algo como lo siguiente:
     • What is the gcloud command to set my project?
   • Deberías ver un resultado como gcloud config set project my-project-with-duet.
     • Confirma que el ID del proyecto sea correcto y, luego, ejecuta el comando en la terminal de Cloud Shell.
4. Habilita Firebase.
   • En una pestaña nueva (deja abierto tu editor de Cloud Shell actual). Visita https://console.firebase.google.com/.
   • Haz clic en Agregar proyecto.
   • Ingresa tu ID del proyecto y espera a que aparezca en el menú desplegable.
   • Haz clic en tu ID del proyecto.
   • Haz clic en Continuar.
   • Haz clic en Confirmar plan.
   • Haz clic en Continuar.
   • Anula la selección de Habilitar Google Analytics para este proyecto.
     • Firebase recomienda usar Google Analytics, pero no se utilizará en esta aplicación.
   • Haz clic en Continuar.
   • Cierra esta pestaña y regresa al editor de Cloud Shell.
   • Nota: Estos pasos solo son necesarios para los usuarios que no han utilizado Firebase anteriormente, pero permiten que todos sigan la misma ruta de acceso. Si vuelves a hacerlo en el futuro, puedes omitir este paso.
5. Accede a Firebase en Cloud Shell.
   • En la terminal del editor de Cloud Shell, ejecuta el comando firebase login --no-localhost.
   • Visita la URL proporcionada.
     • Haz clic en Yes, I just ran this command.
     • Haz clic en Yes, this is my session ID.
     • Haz clic en Copiar.
   • Regresa a la terminal del editor de Cloud Shell.
   • Pega el valor copiado en la terminal donde dice: Enter authorization code:.
   • Presiona Enter.
6. Implementa un nuevo sitio web en Firebase Hosting.
   • Inicializa un nuevo proyecto de Firebase.
     • Puedes pedirle a Duet AI algo como lo siguiente:
       • What are the commands to initialize and deploy a new firebase application?
     • Deberías ver resultados como firebase init y firebase deploy con instrucciones.
     • Dado que hay muchas formas posibles de hacer esto que Duet AI podría recomendar según tus preferencias, esta es una recomendación específica que puedes seguir:
       • firebase init
         • Presiona la flecha hacia abajo hasta Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.
           • Presiona la barra de Space.
           • Presiona Enter.
         • Flecha hacia abajo hasta Use an existing project.
           • Presiona Enter.
         • Si aparece una lista de proyectos, desplázate hacia abajo hasta el proyecto que estás usando en este momento.
           • Presiona Enter.
         • Si se te solicita Please input the ID of the Google Cloud Project you would like to add Firebase::
           • Escribe tu ID del proyecto.
           • Presiona Enter.
         • Para ver los demás mensajes, presiona Enter.
       • firebase deploy
7. Vuelve a implementar tu aplicación con una llamada al extremo de API de Cloud Functions.
   • Los comandos anteriores deben crear un directorio public con un archivo index.html dentro del directorio frontend que creaste antes. En el archivo ~/annotate-http-1/frontend/public/index.html, deberás realizar los próximos cambios.
   • Abre el archivo index.html.
     • Haz clic en el ícono del Explorador.
     • Haz clic en la carpeta frontend.
     • Haz clic en la carpeta public.
     • Haz clic en el archivo index.html.
   • Vacía el archivo index.html existente.
   • Pega el código que copiaste antes en el archivo index.html.
   • Ejecuta firebase deploy para implementar la aplicación nueva.
   • Visita la URL de Firebase Hosting para ver si funciona.
     • Nota: Es probable que debas realizar la actualización forzada del sitio web para ver las actualizaciones.

Solución de problemas

El archivo index.html debería ser similar a lo siguiente:

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

Si el sitio web no funciona, verifica lo siguiente:

1. Problema: 404 (No encontrado). ¿La URL que se usa en el método fetch incluye my-project-with-duet?
   • Solución: Reemplaza my-project-with-duet por tu ID del proyecto.
2. Problema: 404 (No encontrado) ¿Falta la URL completa en la URL usada en el método fetch?
   • Solución: Asegúrate de incluir la URL completa en el método fetch. Debería ser similar a https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate.
3. Problema: La respuesta de la instrucción sigue sin ser del todo correcta.
   • Solución: Prueba con otra instrucción para darle a Duet AI aún más orientación sobre lo que te gustaría que produjera. Asegúrate de reemplazar my-project-with-duet por tu ID del proyecto. A continuación, se muestra un ejemplo.
     • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
4. Problema: ¿Se implementó tu sitio, pero no funciona?
   • Solución: Debido a la naturaleza no determinística de los LLMs, es posible que Duet genere una respuesta que no funcione. Si eso sucede, copia el index.html de ejemplo anterior y vuelve a implementarlo con firebase deploy. Asegúrate de reemplazar my-project-with-duet por tu ID del proyecto.

7. Exploración abierta (opcional)

1. Usa Duet AI y el asistente en el editor para agregar estilos de CSS a tu aplicación y volver a implementarla cuando termines. Si estás buscando inspiración, aquí hay un ejemplo de instrucción que podrías probar:
   • Make this index.html file use material design.
2. Otras soluciones posibles:
   • El sitio web generado debería funcionar con cualquier imagen pública http. Trabaja con Duet para mostrar la imagen en la página.

8. Borra el proyecto (opcional)

Si quieres evitar que se te cobre por los recursos que creaste hoy, puedes preguntarle a Duet cómo hacerlo.

1. Ingresa la instrucción:
   • How can I delete my project?
   • Deberías ver un resultado como gcloud projects delete my-project-with-duet.
   • IMPORTANTE: Reemplaza my-project-with-duet en el comando anterior por tu ID del proyecto.
2. Ejecuta el comando gcloud projects delete para quitar todos los recursos que creaste hoy.