Lanzamos el Gemma 3n con entrada de audio y optimizado para su uso en dispositivos cotidianos. Más información

Crea un asistente personal de programación con IA con Gemma

Obtener asistencia de código de modelos de inteligencia artificial (IA) puede ser muy útil, pero ¿qué sucede si no puedes usar modelos de IA generativa alojados de terceros debido a restricciones de conectividad, costo o seguridad de los datos? La familia de modelos Gemma de Google está disponible para descargar y ejecutar en tu propio hardware, por lo que puedes mantener todo de forma local y hasta tener la opción de ajustar el modelo para que funcione mejor con tu base de código.

Ejecutar tu propia instancia de Gemma o CodeGemma puede brindarte asistencia para la programación con IA con baja latencia, alta disponibilidad, un costo potencialmente más bajo y la capacidad de mantener todos tus datos de programación en tu propia red. En este proyecto, se muestra cómo configurar tu propio servicio web para alojar Gemma y conectarlo a una extensión de Microsoft Visual Studio Code, de modo que el uso del modelo sea más conveniente durante la codificación. Este proyecto incluye dos subproyectos: uno para configurar y adaptar Gemma en un servicio web, y un segundo proyecto para una extensión de VS Code que se conecta y usa el servicio web.

Para ver un resumen en video de este proyecto y cómo extenderlo, incluidas las estadísticas de las personas que lo crearon, consulta el video de Asistente personal de IA para código de Build with Google AI. También puedes revisar el código de este proyecto en el repositorio de código de Gemma Cookbook. De lo contrario, puedes comenzar a extender el proyecto con las siguientes instrucciones.

Descripción general

En este instructivo, se muestra cómo configurar y extender dos proyectos: un servicio web para Gemma y una extensión de VS Code para usar ese servicio. El servicio web usa las bibliotecas de Python, Keras, JAX y FastAPI para entregar el modelo de Gemma y controlar las solicitudes. La extensión de VS Code, llamada Pipet, agrega comandos a la paleta de comandos que te permiten hacer solicitudes al servicio web de Gemma seleccionando código, texto o comentarios en una ventana de edición de código, como se muestra en la Figura 1.

Captura de pantalla de la interfaz de usuario de la extensión de VS Code

Figura 1: Interfaz de usuario del comando del proyecto para la extensión Pipet en Visual Studio Code

El código fuente completo de ambos proyectos se proporciona en el repositorio de código de Gemma Cookbook, y puedes extender ambos proyectos para adaptarlos a tus necesidades y flujo de trabajo preferido.

Configura el proyecto

Estas instrucciones te guiarán para preparar este proyecto para el desarrollo y las pruebas. Los pasos generales de configuración incluyen la instalación del software previo, la clonación del proyecto desde el repositorio de código, la configuración de algunas variables de entorno, la instalación de bibliotecas de Python y Node.js, y la prueba de la aplicación web.

Instala el software obligatorio

Este proyecto usa Python 3, entornos virtuales (venv), Node.js y el administrador de paquetes de Node (npm) para administrar paquetes y ejecutar los dos proyectos.

Para instalar el software necesario, sigue estos pasos:

Instala Python 3, el paquete de entorno virtual (venv) para Python, Node.js y el administrador de paquetes de Node.js (npm):
```
sudo apt update
sudo apt install git pip python3-venv nodejs npm
```

Clona el proyecto

Descarga el código del proyecto en tu computadora de desarrollo. Necesitas el software de control de código fuente git para recuperar el código fuente del proyecto.

Para descargar el código del proyecto, sigue estos pasos:

Clona el repositorio de Git con el siguiente comando:

git clone https://github.com/google-gemini/gemma-cookbook.git

Opcional: Configura tu repositorio de Git local para usar la extracción dispersa, de modo que solo tengas los archivos del proyecto:
```
cd gemma-cookbook/
git sparse-checkout set Demos/personal-code-assistant/
git sparse-checkout init --cone
```

Proyecto de servicio web de Gemma

La parte del servicio web de este proyecto (gemma-web-service) crea una instancia alojada de forma independiente de Gemma 2 2B encapsulada con un servicio web básico para controlar las solicitudes y respuestas de generación. La extensión de VS Code, que se abordará más adelante en este instructivo, se conecta a este servicio para controlar las solicitudes de asistencia con el código.

Requisitos de hardware

Ejecuta el proyecto de servicio web de Gemma en una computadora con una unidad de procesamiento gráfico (GPU) o una unidad de procesamiento tensorial (TPU), y memoria de GPU o TPU suficiente para contener el modelo. Para ejecutar la configuración de Gemma 2 2B en este proyecto de servicio web, necesitas alrededor de 16 GB de memoria de GPU, aproximadamente la misma cantidad de RAM normal y un mínimo de 20 GB de espacio en disco.

Si implementas el proyecto de servicio web de Gemma en una instancia de VM de Google Cloud, configura la instancia según estos requisitos:

Hardware de GPU: Se requiere una GPU NVIDIA T4 para ejecutar este proyecto (se recomienda NVIDIA L4 o superior).
Sistema operativo: Elige una opción de Aprendizaje profundo en Linux, específicamente VM de aprendizaje profundo con CUDA 12.3 M124 con controladores de software de GPU preinstalados.
Tamaño del disco de arranque: Asigna al menos 20 GB de espacio en disco para tus datos, tu modelo y el software complementario.

Configurar proyecto

Este proyecto usa Python 3 y entornos virtuales (venv) para administrar paquetes y ejecutar el servicio web. Instala las bibliotecas de Python con el entorno virtual de Python venv activado para administrar los paquetes y las dependencias de Python. Asegúrate de activar el entorno virtual de Python antes de instalar las bibliotecas de Python con la secuencia de comandos setup_python o con el instalador pip. Para obtener más información sobre el uso de entornos virtuales de Python, consulta la documentación de venv de Python.

Para instalar las bibliotecas de Python, haz lo siguiente:

En una ventana de la terminal, navega al directorio gemma-web-service:
```
cd Demos/personal-code-assistant/gemma-web-service/
```
Configura y activa un entorno virtual de Python (venv) para este proyecto:
```
python3 -m venv venv
source venv/bin/activate
```
Instala las bibliotecas de Python necesarias para este proyecto con la secuencia de comandos setup_python:
```
./setup_python.sh
```

Configura las variables de entorno

Este proyecto requiere algunas variables de entorno para ejecutarse, incluido un nombre de usuario y un token de la API de Kaggle. Debes tener una cuenta de Kaggle y solicitar acceso a los modelos de Gemma para poder descargarlos. Para este proyecto, agregarás tu nombre de usuario de Kaggle y el token de la API de Kaggle en un archivo .env, que usa el programa de servicio web para descargar el modelo.

Para configurar las variables de entorno, haz lo siguiente:

Para obtener tu nombre de usuario de Kaggle y tu token de API, sigue las instrucciones de la documentación de Kaggle.
Sigue las instrucciones de Cómo obtener acceso a Gemma en la página Configuración de Gemma para acceder al modelo de Gemma.
Crea un archivo de variables de entorno para el proyecto. Para ello, crea un archivo de texto .env en esta ubicación de la clonación del proyecto:
```
personal-code-assistant/gemma-web-service/.env
```
Después de crear el archivo de texto .env, agrégale los siguientes parámetros de configuración:
```
KAGGLE_USERNAME=<YOUR_KAGGLE_USERNAME_HERE>
KAGGLE_KEY=<YOUR_KAGGLE_KEY_HERE>
```

Ejecuta y prueba el servicio web

Una vez que hayas completado la instalación y la configuración del proyecto, ejecuta la aplicación web para confirmar que la configuraste correctamente. Debes hacer esto como una verificación básica antes de editar el proyecto para tu propio uso.

Para ejecutar y probar el proyecto, haz lo siguiente:

En una ventana de la terminal, navega al directorio gemma-web-service:
```
cd personal-code-assistant/gemma-web-service/
```
Ejecuta la aplicación con la secuencia de comandos run_service:
```
./run_service.sh
```
Después de iniciar el servicio web, el código del programa muestra una URL en la que puedes acceder al servicio. Por lo general, esta dirección es la siguiente:
```
http://localhost:8000/
```
Para probar el servicio, ejecuta la secuencia de comandos test_post:
```
./test/test_post.sh
```

Cuando hayas ejecutado y probado el servicio correctamente con esta secuencia de comandos, deberías estar listo para conectarte a él con la extensión de VS Code en la siguiente sección de este instructivo.

Proyecto de extensión de VS Code

La extensión de VS Code de este proyecto (pipet-code-agent-2) crea una extensión de software de la aplicación Microsoft Visual Studio Code diseñada para agregar nuevos comandos de programación con IA. Esta extensión se comunica con el servicio web de Gemma que se describió anteriormente en este instructivo. La extensión se comunica con los servicios web a través de HTTP con mensajes en formato JSON.

Configurar proyecto

En estas instrucciones, se explica cómo configurar el proyecto de Pipet Code Agent v2 para el desarrollo y las pruebas. Los pasos generales son instalar el software requerido, ejecutar la instalación de configuración, configurar un parámetro de configuración de la extensión y probar la extensión.

Instala el software obligatorio

El proyecto Pipet Code Agent se ejecuta como una extensión de Visual Studio Code de Microsoft y usa Node.js y la herramienta Node Package Manager (npm) para administrar paquetes y ejecutar la aplicación.

Para instalar el software necesario, sigue estos pasos:

Descarga e instala Visual Studio Code para tu plataforma.
Para asegurarte de que Node.js esté instalado, sigue las instrucciones de instalación para tu plataforma.

Configura bibliotecas del proyecto

Usa la herramienta de línea de comandos de npm para descargar las dependencias necesarias y configurar el proyecto.

Para configurar el código del proyecto, haz lo siguiente:

Navega al directorio raíz del proyecto Pipet Code Agent.
```
cd Demos/personal-code-assistant/pipet-code-agent-2/
```
Ejecuta el comando de instalación para descargar las dependencias y configurar el proyecto:
```
npm install
```

Configura la extensión

Ahora deberías poder probar la instalación ejecutando Pipet Code Agent como una extensión de desarrollo en VS Code en tu dispositivo. La prueba abre una ventana independiente de Extension Development Host de VS Code en la que está disponible la nueva extensión. En esta nueva ventana, configurarás los parámetros de configuración que usa la extensión para acceder a tu servicio web personal de Gemma.

Agente de código de Pipet que se ejecuta en la ventana del host de desarrollo de extensiones Figura 2: Ventana de host de desarrollo de la extensión de VS Code con la configuración de la extensión Pipet.

Para configurar y probar tu instalación, haz lo siguiente:

Inicia la aplicación de VS Code.
En VS Code, selecciona File > New Window para crear una ventana nueva.
Abre el proyecto Pipet Code Agent seleccionando File > Open Folder y, luego, la carpeta personal-code-assistant/pipet-code-agent-2/.
Abre el archivo pipet-code-agent-2/src/extension.ts.
Para ejecutar la extensión en modo de depuración, selecciona Ejecutar > Iniciar depuración y, si es necesario, selecciona la opción VS Code Extension Development Host. Este paso abre una ventana independiente de Extension Development Host.
En la nueva ventana de VS Code, selecciona Code > Settings > Settings para abrir la configuración de VS Code.
Establece la dirección del host de tu servidor de servicio web de Gemma como un parámetro de configuración. En el campo Search Settings, escribe Gemma, selecciona la pestaña User y, en el parámetro de configuración Gemma > Service: Host, haz clic en el vínculo Edit in settings.json y agrega la dirección del host, como 127.0.0.1, localhost o my-server.my-local-domain.com:
```
"gemma.service.host": "your-host-address-here"
```
Guarda los cambios en el archivo settings.json y cierra las pestañas de configuración.

Prueba la extensión

Para probar los comandos de la extensión, haz lo siguiente:

En la ventana Extension Development Host de VS Code, selecciona cualquier código en la ventana del editor.
Para abrir la paleta de comandos, selecciona View > Command Palette.
En la paleta de comandos, escribe Pipet y selecciona uno de los comandos con ese prefijo.

Cómo modificar comandos existentes

Modificar los comandos que se proporcionan en Pipet Code Agent es la forma más sencilla de cambiar el comportamiento y las capacidades de la extensión. Esta información de contexto de la instrucción guía al modelo generativo de Gemma para formar una respuesta. Si cambias las instrucciones de la instrucción en los comandos de Pipet existentes, puedes cambiar el comportamiento de cada uno de los comandos.

En este conjunto de instrucciones, se explica cómo modificar el comando review.ts cambiando el texto de la instrucción del comando.

Para prepararte para editar el comando review.ts, haz lo siguiente:

Inicia la aplicación de VS Code.
En VS Code, selecciona File > New Window para crear una ventana nueva.
Abre el proyecto Pipet Code Agent seleccionando File > Open Folder y, luego, la carpeta pipet-code-agent/.
Abre el archivo pipet-code-agent/src/review.ts.

Para modificar el comportamiento del comando review.ts, haz lo siguiente:

En el archivo review.ts, cambia la penúltima línea de la constante PROMPT_INSTRUCTIONS para agregar Also note potential performance improvements.

const PROMPT_INSTRUCTIONS = `
Reviewing code involves finding bugs and increasing code quality. Examples of
bugs are syntax errors or typos, out of memory errors, and boundary value
errors. Increasing code quality entails reducing complexity of code, eliminating
duplicate code, and ensuring other developers are able to understand the code.
Also note potential performance improvements.

Write a review of the following code:
`;

Guarda los cambios en el archivo review.ts.

Para probar el comando modificado, haz lo siguiente:

En la ventana del proyecto de la extensión Pipet de VS Code, abre el archivo src/extension.ts.
Para compilar el código actualizado, selecciona Terminal > Run Build Task… y, luego, la opción npm: compile.
Para reiniciar el depurador, selecciona Run > Restart Debugging.
En la ventana Extension Development Host de VS Code, selecciona cualquier código en la ventana del editor.
Para abrir la paleta de comandos, selecciona View > Command Palette.
En la paleta de comandos, escribe Pipet y selecciona el comando Pipet: Review the selected code.

Crea comandos nuevos

Puedes extender Pipet creando comandos nuevos que realicen tareas completamente nuevas con el modelo de Gemma. Cada archivo de comandos, como comment.ts o review.ts, es casi autónomo y contiene código para recopilar texto del editor activo, componer una instrucción, conectarse al servicio web de Gemma, enviar una instrucción y controlar la respuesta.

En este conjunto de instrucciones, se explica cómo compilar un comando nuevo con el código de un comando existente, question.ts, como plantilla.

Para crear un comando que recomiende nombres para funciones, haz lo siguiente:

Haz una copia del archivo pipet-code-agent-2/src/question.ts llamado new-service.ts en el directorio src/.
En VS Code, abre el archivo src/new-service.ts.

Edita el valor PROMPT_INSTRUCTIONS para cambiar las instrucciones del mensaje en el archivo nuevo.

// Provide instructions for the AI model
const PROMPT_INSTRUCTIONS = `
Build a Python web API service using FastAPI and uvicorn.
- Just output the code, DO NOT include any explanations.
- Do not include an 'if __name__ == "__main__":' statement.
- Do not include a '@app.get("/")' statement
- Do not include a '@app.get("/info")' statement
`;

Agrega el código estándar del servicio creando una nueva constante BOILERPLATE_CODE.

const BOILERPLATE_CODE = `
# the following code for testing and diagnosis:
@app.get("/")
async def root():
    return "Server: OK"

@app.get("/info")
async def info():
    return "Service using FastAPI version: " + fastapi.__version__

# Run the service
if __name__ == "__main__":
    # host setting makes service available to other devices
    uvicorn.run(app, host="0.0.0.0", port=8000)
`;

Cambia el nombre de la función de comando a newService() y actualiza su mensaje informativo.

export async function newService() {
  vscode.window.showInformationMessage('Building new service from template...');
...

Actualiza el código de ensamblado de la instrucción para incluir el texto seleccionado en el editor y el componente PROMPT_INSTRUCTIONS.
```
// Build the full prompt using the template.
  const promptText = `${selectedCode}${PROMPT_INSTRUCTIONS}`;
```

Cambia el código de inserción de la respuesta para incluir la respuesta y el código estándar.

// Insert answer after selection.
editor.edit((editBuilder) => {
    editBuilder.insert(selection.end, "\n\n" + responseText);
    editBuilder.insert(selection.end, "\n" + BOILERPLATE_CODE);
});

Guarda los cambios en el archivo new-service.ts.

Integra el nuevo comando

Después de completar el código del nuevo comando, debes integrarlo con el resto de la extensión. Actualiza los archivos extension.ts y package.json para que el nuevo comando forme parte de la extensión y habilita VS Code para invocar el nuevo comando.

Para integrar el comando new-service con el código de la extensión, haz lo siguiente:

En VS Code, abre el archivo pipet-code-agent-2/src/extension.ts.
Agrega el nuevo archivo de código a la extensión con una nueva instrucción de importación.
```
import { newService } from './new-service';
```

Registra el nuevo comando agregando el siguiente código a la función activate().

export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.newService', newService);
}

Guarda los cambios en el archivo extension.ts.

Para integrar el comando name con el paquete de extensión, haz lo siguiente:

En VS Code, abre el archivo pipet-code-agent/package.json.

Agrega el nuevo comando a la sección commands del archivo de paquete.

"contributes": {
  "commands": [
    ...
    {
      "command": "pipet-code-agent.newService",
      "title": "Pipet: Generate a FastAPI service."
    }
  ],

Guarda los cambios en el archivo package.json.

Prueba el comando nuevo

Una vez que hayas terminado de codificar el comando y de integrarlo en la extensión, puedes probarlo. Tu nuevo comando solo está disponible en la ventana Extension Development Host de VS Code, y no en la ventana de VS Code en la que editaste el código de la extensión.

Para probar el comando modificado, haz lo siguiente:

En la ventana del proyecto de la extensión Pipet de VS Code, abre el archivo src/extension.ts.
Para compilar el código actualizado, selecciona Terminal > Run Build Task… y, luego, la opción npm: compile.
En la ventana del proyecto de extensión Pipet de VS Code, reinicia el depurador seleccionando Run > Restart Debugging, lo que reinicia una ventana separada de Extension Development Host.
En la ventana Extension Development Host de VS Code, selecciona algo de código en la ventana del editor.
Para abrir la paleta de comandos, selecciona View > Command Palette.
En la paleta de comandos, escribe Pipet y selecciona el comando Pipet: Generate a FastAPI service.

Ahora creaste un comando de extensión de VS Code que funciona con un modelo de IA de Gemma. Experimenta con diferentes comandos e instrucciones para crear un flujo de trabajo de desarrollo de código asistido por IA que te resulte útil.

Empaqueta e instala la extensión

Puedes empaquetar tu extensión como un archivo .vsix para la instalación local en tu instancia de VS Code. Usa la herramienta de línea de comandos de vsce para generar un archivo de paquete .vsix desde tu proyecto de extensión, que luego podrás instalar en tu instancia de VS Code. Para obtener detalles sobre cómo empaquetar tu extensión, consulta la documentación de VS Code sobre Publicación de extensiones. Cuando termines de empaquetar tu extensión como un archivo VSIX, podrás instalarla manualmente en VS Code.

Para instalar la extensión empaquetada en VSIX, haz lo siguiente:

En tu instancia de VS Code, abre el panel Extensiones seleccionando Archivo > Extensiones.
En el panel Extensiones, selecciona el menú de tres puntos en la parte superior derecha y, luego, Instalar desde VSIX.
Abre el archivo de paquete .vsix que generaste desde tu proyecto de extensión para instalarlo.

Recursos adicionales

Para obtener más detalles sobre el código de este proyecto, consulta el repositorio de código de Gemma Cookbook. Si necesitas ayuda para compilar la aplicación o quieres colaborar con otros desarrolladores, consulta el servidor de Discord de la comunidad de desarrolladores de Google. Para obtener más información sobre los proyectos de Build with Google AI, consulta la playlist de videos.