Créer un assistant de codage personnel avec Gemma

L'assistance au codage fournie par des modèles d'intelligence artificielle (IA) peut être très utile. Mais que faire si vous ne pouvez pas utiliser de modèles d'IA générative tiers hébergés en raison de restrictions de connectivité, de coût ou de sécurité des données ? La famille de modèles Gemma de Google est disponible au téléchargement et peut être exécutée sur votre propre matériel. Vous pouvez ainsi tout conserver en local et même ajuster le modèle pour qu'il fonctionne mieux avec votre codebase.

Exécuter votre propre instance de Gemma ou de CodeGemma peut vous permettre de bénéficier d'une assistance au codage par IA avec une faible latence, une haute disponibilité, un coût potentiellement plus faible et la possibilité de conserver toutes vos données de codage sur votre propre réseau. Ce projet vous montre comment configurer votre propre service Web pour héberger Gemma et le connecter à une extension Microsoft Visual Studio Code. Vous pourrez ainsi utiliser le modèle plus facilement pendant la programmation. Ce projet comprend deux sous-projets : un projet pour configurer et encapsuler Gemma dans un service Web, et un deuxième projet pour une extension VS Code qui se connecte et utilise le service Web.

Pour une présentation vidéo de ce projet et de la façon de l'étendre, y compris des informations fournies par les personnes qui l'ont créé, consultez la vidéo Assistant de code d'IA personnel sur Build with Google AI. Vous pouvez également consulter le code de ce projet dans le dépôt de code du cookbook Gemma. Sinon, vous pouvez commencer à étendre le projet en suivant les instructions ci-dessous.

Présentation

Ce tutoriel vous explique comment configurer et étendre deux projets : un service Web pour Gemma et une extension VS Code à utiliser avec ce service. Le service Web utilise les bibliothèques Python, Keras, JAX et FastAPI pour diffuser le modèle Gemma et gérer les requêtes. L'extension VS Code, appelée Pipet, ajoute des commandes à la palette de commandes qui vous permettent d'envoyer des requêtes au service Web Gemma en sélectionnant du code, du texte ou des commentaires dans une fenêtre d'édition de code, comme illustré sur la figure 1.

Capture d'écran de l'interface utilisateur de l'extension VS Code

Figure 1. Interface utilisateur de la commande de projet pour l'extension Pipet dans Visual Studio Code

Le code source complet des deux projets est fourni dans le dépôt de code du cookbook Gemma. Vous pouvez étendre les deux projets pour les adapter à vos besoins et à votre workflow préféré.

Configuration du projet

Ces instructions vous expliquent comment préparer ce projet pour le développement et les tests. Les étapes de configuration générales incluent l'installation des logiciels requis, le clonage du projet à partir du dépôt de code, la définition de quelques variables d'environnement, l'installation des bibliothèques Python et Node.js, et le test de l'application Web.

Installer les logiciels requis

Ce projet utilise Python 3, des environnements virtuels (venv), Node.js et Node Package Manager (npm) pour gérer les packages et exécuter les deux projets.

Pour installer le logiciel requis :

  • Installez Python 3, le package d'environnement virtuel (venv) pour Python, Node.js et le gestionnaire de packages Node.js (npm) :

    sudo apt update
sudo apt install git pip python3-venv nodejs npm

Cloner le projet

Téléchargez le code du projet sur votre ordinateur de développement. Vous avez besoin du logiciel de contrôle du code source git pour récupérer le code source du projet.

Pour télécharger le code du projet :

  1. Clonez le dépôt Git à l'aide de la commande suivante :

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

  2. Facultatif : Configurez votre dépôt Git local pour utiliser l'extraction éparse, afin de ne disposer que des fichiers du projet :

    cd gemma-cookbook/
git sparse-checkout set Demos/personal-code-assistant/
git sparse-checkout init --cone

Projet de service Web Gemma

La partie service Web de ce projet (gemma-web-service) crée une instance hébergée indépendamment de Gemma 2 2B, enveloppée dans un service Web de base pour gérer les requêtes et les réponses de génération. L'extension VS Code, qui sera abordée plus loin dans ce tutoriel, se connecte à ce service pour gérer les demandes d'assistance au code.

Ces instructions vous expliquent comment préparer ce projet pour le développement et les tests. Les étapes de configuration générales incluent l'installation des logiciels requis, le clonage du projet à partir du dépôt de code, la définition de quelques variables d'environnement, l'installation des bibliothèques Python et le test du service Web.

Matériel requis

Exécutez le projet de service Web Gemma sur un ordinateur doté d'un processeur graphique (GPU) ou d'un Tensor Processing Unit (TPU), et d'une mémoire GPU ou TPU suffisante pour contenir le modèle. Pour exécuter la configuration Gemma 2 2B dans ce projet de service Web, vous avez besoin d'environ 16 Go de mémoire GPU, d'environ la même quantité de RAM normale et d'au moins 20 Go d'espace disque.

Si vous déployez le projet de service Web Gemma sur une instance de VM Google Cloud, configurez l'instance en respectant les exigences suivantes :

  • Matériel GPU : un GPU NVIDIA T4 est requis pour exécuter ce projet (NVIDIA L4 ou version ultérieure recommandé).
  • Système d'exploitation : sélectionnez une option Deep Learning sur Linux, plus précisément Deep Learning VM avec CUDA 12.3 M124 avec des pilotes logiciels de GPU préinstallés.
  • Taille du disque de démarrage : prévoyez au moins 20 Go d'espace disque pour vos données, votre modèle et les logiciels associés.

Configurer le projet

Ce projet utilise Python 3 et des environnements virtuels (venv) pour gérer les packages et exécuter le service Web. Installez les bibliothèques Python avec l'environnement virtuel Python venv activé pour gérer les packages et les dépendances Python. Assurez-vous d'activer l'environnement virtuel Python avant d'installer les bibliothèques Python avec le script setup_python ou le programme d'installation pip. Pour en savoir plus sur l'utilisation des environnements virtuels Python, consultez la documentation Python venv.

Pour installer les bibliothèques Python :

  1. Dans une fenêtre de terminal, accédez au répertoire gemma-web-service :

    cd Demos/personal-code-assistant/gemma-web-service/

  2. Configurez et activez un environnement virtuel Python (venv) pour ce projet :

    python3 -m venv venv
source venv/bin/activate

  3. Installez les bibliothèques Python requises pour ce projet à l'aide du script setup_python :

    ./setup_python.sh

Définir des variables d'environnement

Ce projet nécessite l'exécution de quelques variables d'environnement, y compris un nom d'utilisateur Kaggle et un jeton d'API Kaggle. Vous devez disposer d'un compte Kaggle et demander l'accès aux modèles Gemma pour pouvoir les télécharger. Pour ce projet, vous devez ajouter votre nom d'utilisateur Kaggle et votre jeton d'API Kaggle dans un fichier .env, qui est utilisé par le programme de service Web pour télécharger le modèle.

Pour définir les variables d'environnement :

  1. Obtenez votre nom d'utilisateur Kaggle et votre jeton d'API en suivant les instructions de la documentation Kaggle.
  2. Accédez au modèle Gemma en suivant les instructions de la section Accéder à Gemma sur la page Configuration de Gemma.

  3. Créez un fichier de variables d'environnement pour le projet en créant un fichier texte .env à cet emplacement dans votre clone du projet :

    personal-code-assistant/gemma-web-service/.env

  4. Après avoir créé le fichier texte .env, ajoutez-y les paramètres suivants :

    KAGGLE_USERNAME=<YOUR_KAGGLE_USERNAME_HERE>
KAGGLE_KEY=<YOUR_KAGGLE_KEY_HERE>

Exécuter et tester le service Web

Une fois l'installation et la configuration du projet terminées, exécutez l'application Web pour vérifier que vous l'avez configurée correctement. Vous devez effectuer cette vérification de base avant de modifier le projet pour votre propre usage.

Pour exécuter et tester le projet :

  1. Dans une fenêtre de terminal, accédez au répertoire gemma-web-service :

    cd personal-code-assistant/gemma-web-service/

  2. Exécutez l'application à l'aide du script run_service :

    ./run_service.sh

  3. Une fois le service Web démarré, le code du programme liste une URL à partir de laquelle vous pouvez accéder au service. Cette adresse est généralement :

    http://localhost:8000/

  4. Testez le service en exécutant le script test_post :

    ./test/test_post.sh

Une fois que vous avez exécuté et testé le service avec ce script, vous devriez être prêt à vous y connecter avec l'extension VS Code dans la section suivante de ce tutoriel.

Projet d'extension VS Code

L'extension VS Code de ce projet (pipet-code-agent-2) crée une extension logicielle de l'application Microsoft Visual Studio Code conçue pour ajouter de nouvelles commandes de codage d'IA. Cette extension communique avec le service Web Gemma décrit précédemment dans ce tutoriel. L'extension communique avec les services Web via HTTP à l'aide de messages au format JSON.

Configurer le projet

Ces instructions vous guident pour configurer le projet Pipet Code Agent v2 pour le développement et les tests. Les étapes générales consistent à installer le logiciel requis, à exécuter l'installation de la configuration, à configurer un paramètre d'extension et à tester l'extension.

Installer les logiciels requis

Le projet Pipet Code Agent s'exécute en tant qu'extension de Microsoft Visual Studio Code et utilise Node.js et l'outil Node Package Manager (npm) pour gérer les packages et exécuter l'application.

Pour installer le logiciel requis :

  1. Téléchargez et installez Visual Studio Code pour votre plate-forme.
  2. Assurez-vous que Node.js est installé en suivant les instructions d'installation pour votre plate-forme.

Configurer les bibliothèques de projet

Utilisez l'outil de ligne de commande npm pour télécharger les dépendances requises et configurer le projet.

Pour configurer le code du projet :

  1. Accédez au répertoire racine du projet Pipet Code Agent.

    cd Demos/personal-code-assistant/pipet-code-agent-2/

  2. Exécutez la commande d'installation pour télécharger les dépendances et configurer le projet :

    npm install

Configurer l'extension

Vous devriez maintenant pouvoir tester votre installation en exécutant Pipet Code Agent en tant qu'extension de développement dans VS Code sur votre appareil. Le test ouvre une fenêtre VS Code Extension Development Host distincte dans laquelle la nouvelle extension est disponible. Dans cette nouvelle fenêtre, vous configurez les paramètres que l'extension utilise pour accéder à votre service Web Gemma personnel.

Agent de code Pipet s&#39;exécutant dans la fenêtre de l&#39;hôte de développement d&#39;extension Figure 2 : Fenêtre "VS Code Extension Development Host" avec les paramètres de l'extension Pipet.

Pour configurer et tester votre configuration :

  1. Démarrez l'application VS Code.
  2. Dans VS Code, créez une fenêtre en sélectionnant File > New Window (Fichier > Nouvelle fenêtre).
  3. Ouvrez le projet Pipet Code Agent en sélectionnant File > Open Folder (Fichier > Ouvrir un dossier), puis en sélectionnant le dossier personal-code-assistant/pipet-code-agent-2/.
  4. Ouvrez le fichier pipet-code-agent-2/src/extension.ts.
  5. Exécutez l'extension en mode débogage en sélectionnant Exécuter > Démarrer le débogage, puis, si nécessaire, sélectionnez l'option Hôte de développement d'extension VS Code. Cette étape ouvre une fenêtre Extension Development Host distincte.
  6. Dans la nouvelle fenêtre VS Code, ouvrez les paramètres VS Code en sélectionnant Code > Paramètres > Paramètres.

  7. Définissez l'adresse hôte de votre serveur de service Web Gemma en tant que paramètre de configuration. Dans le champ Paramètres de recherche, saisissez Gemma, sélectionnez l'onglet Utilisateur, puis, dans le paramètre Gemma > Service : hôte, cliquez sur le lien Modifier dans settings.json et ajoutez l'adresse de l'hôte, par exemple 127.0.0.1, localhost ou my-server.my-local-domain.com :

    "gemma.service.host": "your-host-address-here"

  8. Enregistrez les modifications apportées au fichier settings.json et fermez les onglets de paramètres.

Tester l'extension

Vous devriez maintenant pouvoir tester votre installation en exécutant Pipet Code Agent en tant qu'extension de développement dans VS Code sur votre appareil. Le test ouvre une fenêtre VS Code Extension Development Host distincte dans laquelle la nouvelle extension est disponible.

Pour tester les commandes d'extension :

  1. Dans la fenêtre Extension Development Host (Hôte de développement d'extension) de VS Code, sélectionnez n'importe quel code dans la fenêtre de l'éditeur.
  2. Ouvrez la palette de commandes en sélectionnant Affichage > Palette de commandes.
  3. Dans la palette de commandes, saisissez Pipet et sélectionnez l'une des commandes avec ce préfixe.

Modifier des commandes existantes

Modifier les commandes fournies dans Pipet Code Agent est le moyen le plus simple de changer le comportement et les capacités de l'extension. Ces informations de contexte de requête guident le modèle génératif Gemma dans la formulation d'une réponse. En modifiant les instructions d'invite dans les commandes Pipet existantes, vous pouvez modifier le comportement de chacune des commandes.

Cet ensemble d'instructions explique comment modifier la commande review.ts en changeant le texte de l'invite de la commande.

Pour préparer la modification de la commande review.ts :

  1. Démarrez l'application VS Code.
  2. Dans VS Code, créez une fenêtre en sélectionnant File > New Window (Fichier > Nouvelle fenêtre).
  3. Ouvrez le projet Pipet Code Agent en sélectionnant File > Open Folder (Fichier > Ouvrir un dossier), puis en sélectionnant le dossier pipet-code-agent/.
  4. Ouvrir le fichier pipet-code-agent/src/review.ts.

Pour modifier le comportement de la commande review.ts :

  1. Dans le fichier review.ts, modifiez l'avant-dernière ligne de la constante PROMPT_INSTRUCTIONS pour ajouter 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:
`;

  2. Enregistrez les modifications apportées au fichier review.ts.

Pour tester la commande modifiée :

  1. Dans la fenêtre du projet d'extension Pipet VS Code, ouvrez le fichier src/extension.ts.
  2. Compilez le code mis à jour en sélectionnant Terminal > Run Build Task... (Terminal > Exécuter la tâche de compilation…), puis l'option npm: compile.
  3. Redémarrez le débogueur en sélectionnant Run > Restart Debugging (Exécuter > Redémarrer le débogage).
  4. Dans la fenêtre Extension Development Host (Hôte de développement d'extension) de VS Code, sélectionnez n'importe quel code dans la fenêtre de l'éditeur.
  5. Ouvrez la palette de commandes en sélectionnant Affichage > Palette de commandes.
  6. Dans la palette de commandes, saisissez Pipet, puis sélectionnez la commande Pipet : Examiner le code sélectionné.

Créer des commandes

Vous pouvez étendre Pipet en créant des commandes qui effectuent des tâches entièrement nouvelles avec le modèle Gemma. Chaque fichier de commande, tel que comment.ts ou review.ts, est principalement autonome et inclut du code permettant de collecter du texte à partir de l'éditeur actif, de composer une requête, de se connecter au service Web Gemma, d'envoyer une requête et de gérer la réponse.

Cet ensemble d'instructions explique comment créer une commande à l'aide du code d'une commande existante, question.ts, comme modèle.

Pour créer une commande qui recommande des noms pour les fonctions :

  1. Créez une copie du fichier pipet-code-agent-2/src/question.ts appelée new-service.ts dans le répertoire src/.
  2. Dans VS Code, ouvrez le fichier src/new-service.ts.

  3. Modifiez les instructions du prompt dans le nouveau fichier en modifiant la valeur PROMPT_INSTRUCTIONS.

    // 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
`;

  4. Ajoutez le boilerplate de service en créant une 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)
`;

  5. Remplacez le nom de la fonction de commande par newService() et mettez à jour son message d'information.

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

  6. Mettez à jour le code d'assemblage de l'invite pour inclure le texte sélectionné dans l'éditeur et le PROMPT_INSTRUCTIONS.

    // Build the full prompt using the template.
  const promptText = `${selectedCode}${PROMPT_INSTRUCTIONS}`;

  7. Modifiez le code d'insertion de la réponse pour inclure la réponse et le code standard.

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

  8. Enregistrez les modifications apportées au fichier new-service.ts.

Intégrer la nouvelle commande

Une fois le code de la nouvelle commande terminé, vous devez l'intégrer au reste de l'extension. Mettez à jour les fichiers extension.ts et package.json pour que la nouvelle commande fasse partie de l'extension et pour permettre à VS Code d'appeler la nouvelle commande.

Pour intégrer la commande new-service au code d'extension :

  1. Dans VS Code, ouvrez le fichier pipet-code-agent-2/src/extension.ts.

  2. Ajoutez le nouveau fichier de code à l'extension en ajoutant une instruction d'importation.

    import { newService } from './new-service';

  3. Enregistrez la nouvelle commande en ajoutant le code suivant à la fonction activate().

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

  4. Enregistrez les modifications apportées au fichier extension.ts.

Pour intégrer la commande name au package d'extension :

  1. Dans VS Code, ouvrez le fichier pipet-code-agent/package.json.

  2. Ajoutez la nouvelle commande à la section commands du fichier de package.

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

  3. Enregistrez les modifications apportées au fichier package.json.

Tester la nouvelle commande

Une fois que vous avez terminé de coder la commande et de l'intégrer à l'extension, vous pouvez la tester. Votre nouvelle commande n'est disponible que dans la fenêtre Extension Development Host de VS Code, et non dans la fenêtre VS Code dans laquelle vous avez modifié le code de l'extension.

Pour tester la commande modifiée :

  1. Dans la fenêtre du projet d'extension Pipet VS Code, ouvrez le fichier src/extension.ts.
  2. Compilez le code mis à jour en sélectionnant Terminal > Run Build Task... (Terminal > Exécuter la tâche de compilation…), puis l'option npm: compile.
  3. Dans la fenêtre du projet d'extension Pipet VS Code, redémarrez le débogueur en sélectionnant Run > Restart Debugging (Exécuter > Redémarrer le débogage), ce qui redémarre une fenêtre Extension Development Host (Hôte de développement d'extension) distincte.
  4. Dans la fenêtre Extension Development Host (Hôte de développement d'extensions) de VS Code, sélectionnez du code dans la fenêtre de l'éditeur.
  5. Ouvrez la palette de commandes en sélectionnant Affichage > Palette de commandes.
  6. Dans la palette de commandes, saisissez Pipet et sélectionnez la commande Pipet: Generate a FastAPI service (Pipet : générer un service FastAPI).

Vous avez maintenant créé une commande d'extension VS Code qui fonctionne avec un modèle Gemma AI. Essayez différentes commandes et instructions pour créer un workflow de développement de code assisté par l'IA qui vous convient.

Empaqueter et installer l'extension

Vous pouvez empaqueter votre extension sous forme de fichier .vsix pour l'installer localement dans votre instance VS Code. Utilisez l'outil de ligne de commande vsce pour générer un fichier de package .vsix à partir de votre projet d'extension, que vous pourrez ensuite installer dans votre instance VS Code. Pour en savoir plus sur l'empaquetage de votre extension, consultez la documentation VS Code Publishing Extensions (Publication d'extensions). Une fois que vous avez terminé d'empaqueter votre extension sous forme de fichier VSIX, vous pouvez l'installer manuellement dans VS Code.

Pour installer l'extension empaquetée VSIX :

  1. Dans votre instance VS Code, ouvrez le panneau Extensions en sélectionnant File > Extensions (Fichier > Extensions).
  2. Dans le panneau Extensions, sélectionnez le menu à trois points en haut à droite, puis Installer à partir de VSIX.
  3. Ouvrez le fichier de package .vsix que vous avez généré à partir de votre projet d'extension pour l'installer.

Ressources supplémentaires

Pour en savoir plus sur le code de ce projet, consultez le dépôt de code Gemma Cookbook. Si vous avez besoin d'aide pour créer l'application ou si vous souhaitez collaborer avec d'autres développeurs, consultez le serveur Discord de la communauté Google Developers. Pour découvrir d'autres projets Build with Google AI, consultez la playlist de vidéos.