Gemma 3n mit Audioeingabe und optimiert für die Verwendung in Alltagsgeräten. Weitere Informationen

Mit Gemma einen persönlichen KI-Programmierassistenten erstellen

Die Unterstützung durch KI-Modelle (künstliche Intelligenz) beim Programmieren kann sehr nützlich sein. Was aber, wenn Sie aufgrund von Einschränkungen bei der Konnektivität, den Kosten oder der Datensicherheit keine gehosteten generativen KI-Modelle von Drittanbietern verwenden dürfen? Die Gemma-Modelle von Google können heruntergeladen und auf Ihrer eigenen Hardware ausgeführt werden. So können Sie alles lokal speichern und das Modell sogar so abstimmen, dass es besser mit Ihrer Codebasis funktioniert.

Wenn Sie eine eigene Instanz von Gemma oder CodeGemma ausführen, erhalten Sie KI-Unterstützung beim Programmieren mit geringer Latenz, hoher Verfügbarkeit und potenziell niedrigeren Kosten. Außerdem können Sie alle Ihre Programmierdaten in Ihrem eigenen Netzwerk speichern. In diesem Projekt wird gezeigt, wie Sie einen eigenen Webdienst zum Hosten von Gemma einrichten und ihn mit einer Microsoft Visual Studio Code-Erweiterung verbinden, um die Verwendung des Modells beim Programmieren zu vereinfachen. Dieses Projekt umfasst zwei Unterprojekte: Ein Projekt zum Einrichten und Einbinden von Gemma in einen Webdienst und ein zweites Projekt für eine VS Code-Erweiterung, die eine Verbindung zum Webdienst herstellt und ihn verwendet.

Ein Video mit einer Übersicht über dieses Projekt und Informationen dazu, wie es erweitert werden kann, sowie Einblicke von den Entwicklern finden Sie im Build with Google AI-Video Personal AI Code Assistant. Sie können sich den Code für dieses Projekt auch im Gemma Cookbook-Code-Repository ansehen. Andernfalls können Sie das Projekt mit der folgenden Anleitung erweitern.

Übersicht

In dieser Anleitung erfahren Sie, wie Sie zwei Projekte einrichten und erweitern: einen Webservice für Gemma und eine VS Code-Erweiterung für die Verwendung dieses Dienstes. Der Webdienst verwendet Python, Keras, JAX und die FastAPI-Bibliotheken, um das Gemma-Modell bereitzustellen und Anfragen zu verarbeiten. Die VS Code-Erweiterung „Pipet“ fügt der Befehlspalette Befehle hinzu, mit denen Sie Anfragen an den Gemma-Webdienst senden können. Dazu müssen Sie Code, Text oder Kommentare in einem Codebearbeitungsfenster auswählen, wie in Abbildung 1 dargestellt.

Screenshot der Benutzeroberfläche der VS Code-Erweiterung

Abbildung 1. Benutzeroberfläche für Projektbefehle für die Pipet-Erweiterung in Visual Studio Code

Der vollständige Quellcode für beide Projekte ist im Code-Repository des Gemma-Kochbuchs verfügbar. Sie können beide Projekte an Ihre Anforderungen und Ihren bevorzugten Workflow anpassen.

Projekt einrichten

In dieser Anleitung erfahren Sie, wie Sie dieses Projekt für die Entwicklung und das Testen vorbereiten. Die allgemeinen Einrichtungsschritte umfassen die Installation der erforderlichen Software, das Klonen des Projekts aus dem Code-Repository, das Festlegen einiger Umgebungsvariablen, die Installation von Python- und Node.js-Bibliotheken und das Testen der Webanwendung.

Erforderliche Software installieren

In diesem Projekt werden Python 3, virtuelle Umgebungen (venv), Node.js und der Node-Paketmanager (npm) verwendet, um Pakete zu verwalten und die beiden Projekte auszuführen.

So installieren Sie die erforderliche Software:

Installieren Sie Python 3, das Paket für virtuelle Umgebungen (venv) für Python, Node.js und den Node.js-Paketmanager (npm):
```
sudo apt update
sudo apt install git pip python3-venv nodejs npm
```

Projekt klonen

Laden Sie den Projektcode auf Ihren Entwicklercomputer herunter. Sie benötigen die git-Quellcodeverwaltungssoftware, um den Projektquellcode abzurufen.

So laden Sie den Projektcode herunter:

Klonen Sie das Git-Repository mit dem folgenden Befehl:

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

Optional: Konfigurieren Sie Ihr lokales Git-Repository für die Verwendung von Sparse Checkout, damit Sie nur die Dateien für das Projekt haben:
```
cd gemma-cookbook/
git sparse-checkout set Demos/personal-code-assistant/
git sparse-checkout init --cone
```

Gemma-Webdienstprojekt

Der Webdienstteil dieses Projekts (gemma-web-service) erstellt eine unabhängig gehostete Instanz von Gemma 2 2B, die mit einem einfachen Webdienst umhüllt ist, um Generierungsanfragen und ‑antworten zu verarbeiten. Die VS Code-Erweiterung, die später in dieser Anleitung behandelt wird, stellt eine Verbindung zu diesem Dienst her, um Anfragen zur Unterstützung beim Programmieren zu bearbeiten.

Hardwareanforderungen

Führen Sie das Gemma-Webdienstprojekt auf einem Computer mit einer GPU (Graphics Processing Unit) oder einer TPU (Tensor Processing Unit) und ausreichend GPU- oder TPU-Speicher für das Modell aus. Um die Gemma 2 2B-Konfiguration in diesem Webdienstprojekt auszuführen, benötigen Sie etwa 16 GB GPU-Arbeitsspeicher, etwa die gleiche Menge an regulärem RAM und mindestens 20 GB Festplattenspeicher.

Wenn Sie das Gemma-Webdienstprojekt auf einer VM-Instanz in Google Cloud bereitstellen, konfigurieren Sie die Instanz gemäß den folgenden Anforderungen:

GPU-Hardware: Für die Ausführung dieses Projekts ist eine NVIDIA T4-GPU erforderlich (NVIDIA L4 oder höher empfohlen).
Betriebssystem: Wählen Sie die Option Deep Learning unter Linux aus, insbesondere Deep Learning VM mit CUDA 12.3 M124 mit vorinstallierten GPU-Softwaretreibern.
Größe des Bootlaufwerks: Stellen Sie mindestens 20 GB Speicherplatz für Ihre Daten, Ihr Modell und die unterstützende Software bereit.

Projekt konfigurieren

In diesem Projekt werden Python 3 und virtuelle Umgebungen (venv) verwendet, um Pakete zu verwalten und den Webdienst auszuführen. Installieren Sie die Python-Bibliotheken mit der aktivierten virtuellen Python-Umgebung venv, um Python-Pakete und ‑Abhängigkeiten zu verwalten. Achten Sie darauf, dass Sie die virtuelle Python-Umgebung vor der Installation von Python-Bibliotheken mit dem setup_python-Skript oder dem pip-Installationsprogramm aktivieren. Weitere Informationen zur Verwendung virtueller Python-Umgebungen finden Sie in der Dokumentation zu Python-venv.

So installieren Sie die Python-Bibliotheken:

Wechseln Sie in einem Terminalfenster zum Verzeichnis gemma-web-service:
```
cd Demos/personal-code-assistant/gemma-web-service/
```
Konfigurieren und aktivieren Sie eine virtuelle Python-Umgebung (venv) für dieses Projekt:
```
python3 -m venv venv
source venv/bin/activate
```
Installieren Sie die erforderlichen Python-Bibliotheken für dieses Projekt mit dem Skript setup_python:
```
./setup_python.sh
```

Umgebungsvariablen festlegen

Für dieses Projekt sind einige Umgebungsvariablen erforderlich, darunter ein Kaggle-Nutzername und ein Kaggle API-Token. Sie benötigen ein Kaggle-Konto und müssen Zugriff auf die Gemma-Modelle anfordern, um sie herunterladen zu können. Für dieses Projekt fügen Sie Ihren Kaggle-Nutzername und Ihr Kaggle API-Token in eine .env-Datei ein, die vom Webdienstprogramm zum Herunterladen des Modells verwendet wird.

So legen Sie die Umgebungsvariablen fest:

Rufen Sie Ihren Kaggle-Nutzername und Ihr API-Token ab, indem Sie der Anleitung in der Kaggle-Dokumentation folgen.
Folgen Sie der Anleitung unter Zugriff auf Gemma erhalten auf der Seite Gemma einrichten, um Zugriff auf das Gemma-Modell zu erhalten.
Erstellen Sie eine Datei mit Umgebungsvariablen für das Projekt, indem Sie an diesem Speicherort in Ihrem Klon des Projekts eine Textdatei mit dem Namen .env erstellen:
```
personal-code-assistant/gemma-web-service/.env
```
Fügen Sie nach dem Erstellen der Textdatei .env die folgenden Einstellungen hinzu:
```
KAGGLE_USERNAME=<YOUR_KAGGLE_USERNAME_HERE>
KAGGLE_KEY=<YOUR_KAGGLE_KEY_HERE>
```

Webdienst ausführen und testen

Nachdem Sie das Projekt installiert und konfiguriert haben, führen Sie die Webanwendung aus, um zu prüfen, ob Sie sie richtig konfiguriert haben. Das sollten Sie als Ausgangspunkt tun, bevor Sie das Projekt für Ihre eigenen Zwecke bearbeiten.

So führen Sie das Projekt aus und testen es:

Wechseln Sie in einem Terminalfenster zum Verzeichnis gemma-web-service:
```
cd personal-code-assistant/gemma-web-service/
```
Führen Sie die Anwendung mit dem Skript run_service aus:
```
./run_service.sh
```
Nach dem Start des Webdienstes wird im Programmcode eine URL aufgeführt, über die Sie auf den Dienst zugreifen können. Normalerweise ist diese Adresse:
```
http://localhost:8000/
```
Testen Sie den Dienst, indem Sie das Skript test_post ausführen:
```
./test/test_post.sh
```

Wenn Sie den Dienst mit diesem Skript erfolgreich ausgeführt und getestet haben, können Sie im nächsten Abschnitt dieser Anleitung eine Verbindung mit der VS Code-Erweiterung herstellen.

VS Code-Erweiterungsprojekt

Die VS Code-Erweiterung dieses Projekts (pipet-code-agent-2) erstellt eine Softwareerweiterung der Microsoft Visual Studio Code-Anwendung, die neue KI-Programmierbefehle hinzufügen soll. Diese Erweiterung kommuniziert mit dem Gemma-Webdienst, der weiter oben in dieser Anleitung beschrieben wird. Die Erweiterung kommuniziert über HTTP mit den Webservices und verwendet dabei Nachrichten im JSON-Format.

Projekt konfigurieren

In dieser Anleitung erfahren Sie, wie Sie das Pipet Code Agent v2-Projekt für die Entwicklung und das Testen einrichten. Die allgemeinen Schritte sind die Installation der erforderlichen Software, die Ausführung der Konfigurationsinstallation, die Konfiguration einer Erweiterungseinstellung und das Testen der Erweiterung.

Erforderliche Software installieren

Das Pipet Code Agent-Projekt wird als Erweiterung von Microsoft Visual Studio Code ausgeführt und verwendet Node.js und das Tool Node Package Manager (npm), um Pakete zu verwalten und die Anwendung auszuführen.

So installieren Sie die erforderliche Software:

Laden Sie Visual Studio Code für Ihre Plattform herunter und installieren Sie es.
Prüfen Sie, ob Node.js installiert ist. Folgen Sie dazu der Installationsanleitung für Ihre Plattform.

Projektbibliotheken konfigurieren

Verwenden Sie das npm-Befehlszeilentool, um die erforderlichen Abhängigkeiten herunterzuladen und das Projekt zu konfigurieren.

So konfigurieren Sie den Projektcode:

Wechseln Sie zum Stammverzeichnis des Pipet Code Agent-Projekts.
```
cd Demos/personal-code-assistant/pipet-code-agent-2/
```
Führen Sie den Installationsbefehl aus, um Abhängigkeiten herunterzuladen und das Projekt zu konfigurieren:
```
npm install
```

Erweiterung konfigurieren

Sie sollten die Installation jetzt testen können, indem Sie den Pipet Code-Agent als Entwicklungserweiterung in VS Code auf Ihrem Gerät ausführen. Dadurch wird ein separates VS Code-Fenster Extension Development Host geöffnet, in dem die neue Erweiterung verfügbar ist. In diesem neuen Fenster konfigurieren Sie die Einstellungen, die die Erweiterung für den Zugriff auf Ihren persönlichen Gemma-Webdienst verwendet.

Pipet Code-Agent, der im Fenster „Extension Development Host“ ausgeführt wird Abbildung 2. VS Code-Entwicklungshostfenster mit den Einstellungen der Pipet-Erweiterung.

So konfigurieren und testen Sie die Einrichtung:

Starten Sie die VS Code-Anwendung.
Erstellen Sie in VS Code ein neues Fenster, indem Sie Datei > Neues Fenster auswählen.
Öffnen Sie das Pipet Code Agent-Projekt, indem Sie Datei > Ordner öffnen auswählen und dann den Ordner personal-code-assistant/pipet-code-agent-2/ auswählen.
Öffnen Sie die Datei pipet-code-agent-2/src/extension.ts.
Führen Sie die Erweiterung im Debugging-Modus aus, indem Sie Run > Start Debugging (Ausführen > Debugging starten) auswählen und bei Bedarf die Option VS Code Extension Development Host (VS Code-Entwicklungshost für Erweiterungen) auswählen. Dadurch wird ein separates Fenster für den Extension Development Host geöffnet.
Öffnen Sie im neuen VS Code-Fenster die VS Code-Einstellungen, indem Sie Code > Einstellungen > Einstellungen auswählen.
Legen Sie die Hostadresse Ihres Gemma-Webservice-Servers als Konfigurationseinstellung fest. Geben Sie im Feld Sucheinstellungen Gemma ein, wählen Sie den Tab Nutzer aus und klicken Sie in der Einstellung Gemma > Dienst: Host auf den Link In settings.json bearbeiten. Fügen Sie die Hostadresse wie 127.0.0.1, localhost oder my-server.my-local-domain.com hinzu:
```
"gemma.service.host": "your-host-address-here"
```
Speichern Sie die Änderungen in der Datei settings.json und schließen Sie die Einstellungen.

Erweiterung testen

So testen Sie die Erweiterungsbefehle:

Wählen Sie im VS Code-Fenster Extension Development Host (Host für die Erweiterungsentwicklung) einen beliebigen Code im Editorfenster aus.
Öffnen Sie die Befehlspalette, indem Sie Ansicht > Befehlspalette auswählen.
Geben Sie in der Befehlspalette Pipet ein und wählen Sie einen der Befehle mit diesem Präfix aus.

Vorhandene Befehle ändern

Die einfachste Möglichkeit, das Verhalten und die Funktionen der Erweiterung zu ändern, besteht darin, die im Pipet Code Agent bereitgestellten Befehle zu ändern. Diese Informationen zum Prompt-Kontext helfen dem generativen Modell von Gemma, eine Antwort zu formulieren. Wenn Sie die Prompts in den vorhandenen Pipet-Befehlen ändern, können Sie das Verhalten der einzelnen Befehle anpassen.

In dieser Anleitung wird beschrieben, wie Sie den review.ts-Befehl ändern, indem Sie den Prompt-Text des Befehls anpassen.

So bereiten Sie das Bearbeiten des review.ts-Befehls vor:

Starten Sie die VS Code-Anwendung.
Erstellen Sie in VS Code ein neues Fenster, indem Sie Datei > Neues Fenster auswählen.
Öffnen Sie das Pipet Code Agent-Projekt, indem Sie Datei > Ordner öffnen auswählen und dann den Ordner pipet-code-agent/ auswählen.
Öffnen Sie die Datei pipet-code-agent/src/review.ts.

So ändern Sie das Verhalten des Befehls review.ts:

Ändern Sie in der Datei review.ts die vorletzte Zeile der PROMPT_INSTRUCTIONS-Konstante, um Also note potential performance improvements hinzuzufügen.

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

Speichern Sie die Änderungen in der Datei review.ts.

So testen Sie den geänderten Befehl:

Öffnen Sie im Projektfenster der VS Code-Erweiterung für Pipet die Datei src/extension.ts.
Erstellen Sie den aktualisierten Code, indem Sie Terminal > Build-Aufgabe ausführen… und dann die Option npm: compile auswählen.
Starten Sie den Debugger neu, indem Sie Run > Restart Debugging (Ausführen > Fehlerbehebung neu starten) auswählen.
Wählen Sie im VS Code-Fenster Extension Development Host (Host für die Erweiterungsentwicklung) einen beliebigen Code im Editorfenster aus.
Öffnen Sie die Befehlspalette, indem Sie Ansicht > Befehlspalette auswählen.
Geben Sie in der Befehlspalette Pipet ein und wählen Sie den Befehl Pipette: Ausgewählten Code überprüfen aus.

Neue Befehle erstellen

Sie können Pipet erweitern, indem Sie neue Befehle erstellen, die mit dem Gemma-Modell völlig neue Aufgaben ausführen. Jede Befehlsdatei, z. B. comment.ts oder review.ts, ist weitgehend in sich geschlossen und enthält Code zum Erfassen von Text aus dem aktiven Editor, zum Erstellen einer Eingabeaufforderung, zum Herstellen einer Verbindung zum Gemma-Webdienst, zum Senden einer Eingabeaufforderung und zum Verarbeiten der Antwort.

In dieser Anleitung wird beschrieben, wie Sie einen neuen Befehl erstellen, indem Sie den Code eines vorhandenen Befehls, question.ts, als Vorlage verwenden.

So erstellen Sie einen Befehl, der Namen für Funktionen empfiehlt:

Erstellen Sie im Verzeichnis src/ eine Kopie der Datei pipet-code-agent-2/src/question.ts mit dem Namen new-service.ts.
Öffnen Sie in VS Code die Datei src/new-service.ts.

Ändern Sie die Prompts in der neuen Datei, indem Sie den Wert PROMPT_INSTRUCTIONS bearbeiten.

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

Fügen Sie das Dienst-Boilerplate hinzu, indem Sie eine neue BOILERPLATE_CODE-Konstante erstellen.

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

Ändern Sie den Namen der Befehlsfunktion in newService() und aktualisieren Sie die zugehörige Informationsmeldung.

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

Aktualisieren Sie den Code für die Prompterstellung, damit er den im Editor ausgewählten Text und PROMPT_INSTRUCTIONS enthält.
```
// Build the full prompt using the template.
  const promptText = `${selectedCode}${PROMPT_INSTRUCTIONS}`;
```

Ändern Sie den Code zum Einfügen der Antwort so, dass er die Antwort und den Boilerplate-Code enthält.

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

Speichern Sie die Änderungen in der Datei new-service.ts.

Neuen Befehl einbinden

Nachdem Sie den Code für den neuen Befehl fertiggestellt haben, müssen Sie ihn in den Rest der Erweiterung einbinden. Aktualisieren Sie die Dateien extension.ts und package.json, damit der neue Befehl Teil der Erweiterung wird und VS Code den neuen Befehl aufrufen kann.

So binden Sie den new-service-Befehl in den Erweiterungscode ein:

Öffnen Sie in VS Code die Datei pipet-code-agent-2/src/extension.ts.
Fügen Sie die neue Codedatei der Erweiterung hinzu, indem Sie eine neue Importanweisung hinzufügen.
```
import { newService } from './new-service';
```

Registrieren Sie den neuen Befehl, indem Sie der Funktion activate() den folgenden Code hinzufügen.

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

Speichern Sie die Änderungen in der Datei extension.ts.

So integrieren Sie den Befehl name in das Erweiterungspaket:

Öffnen Sie in VS Code die Datei pipet-code-agent/package.json.

Fügen Sie den neuen Befehl dem Abschnitt commands der Paketdatei hinzu.

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

Speichern Sie die Änderungen in der Datei package.json.

Neuen Befehl testen

Nachdem Sie den Befehl codiert und in die Erweiterung eingebunden haben, können Sie ihn testen. Ihr neuer Befehl ist nur im VS Code-Fenster Extension Development Host und nicht im VS Code-Fenster verfügbar, in dem Sie den Code für die Erweiterung bearbeitet haben.

So testen Sie den geänderten Befehl:

Öffnen Sie im Projektfenster der VS Code-Erweiterung für Pipet die Datei src/extension.ts.
Erstellen Sie den aktualisierten Code, indem Sie Terminal > Build-Aufgabe ausführen… und dann die Option npm: compile auswählen.
Starten Sie den Debugger im Projektfenster der VS Code-Pipet-Erweiterung neu, indem Sie Ausführen > Debugging neu starten auswählen. Dadurch wird ein separates Fenster Extension Development Host (Erweiterungsentwicklungs-Host) neu gestartet.
Wählen Sie im VS Code-Fenster Extension Development Host (Host für die Erweiterungsentwicklung) Code im Editorfenster aus.
Öffnen Sie die Befehlspalette, indem Sie Ansicht > Befehlspalette auswählen.
Geben Sie in der Befehlspalette Pipet ein und wählen Sie den Befehl Pipet: Generate a FastAPI service (Pipet: FastAPI-Dienst generieren) aus.

Sie haben jetzt einen VS Code-Erweiterungsbefehl erstellt, der mit einem Gemma AI-Modell funktioniert. Probieren Sie verschiedene Befehle und Anweisungen aus, um einen KI-gestützten Workflow für die Codeentwicklung zu erstellen, der für Sie funktioniert.

Erweiterung packen und installieren

Sie können Ihre Erweiterung als .vsix-Datei für die lokale Installation in Ihrer VS Code-Instanz verpacken. Verwenden Sie das vsce-Befehlszeilentool, um eine .vsix-Paketdatei aus Ihrem Erweiterungsprojekt zu generieren, die Sie dann in Ihrer VS Code-Instanz installieren können. Weitere Informationen zum Verpacken Ihrer Erweiterung finden Sie in der VS Code-Dokumentation unter Publishing Extensions. Nachdem Sie Ihre Erweiterung als VSIX-Datei verpackt haben, können Sie sie manuell in VS Code installieren.

So installieren Sie die als VSIX-Datei verpackte Erweiterung:

Öffnen Sie in Ihrer VS Code-Instanz den Bereich Erweiterungen, indem Sie Datei > Erweiterungen auswählen.
Wählen Sie im Bereich Erweiterungen rechts oben das Dreipunkt-Menü und dann Aus VSIX installieren aus.
Öffnen Sie die .vsix-Paketdatei, die Sie aus Ihrem Erweiterungsprojekt generiert haben, um sie zu installieren.

Zusätzliche Ressourcen

Weitere Informationen zum Code für dieses Projekt finden Sie im Code-Repository für das Gemma Cookbook. Wenn Sie Hilfe beim Erstellen der Anwendung benötigen oder mit anderen Entwicklern zusammenarbeiten möchten, können Sie den Discord-Server der Google Developers Community besuchen. Weitere Build with Google AI-Projekte findest du in der Videoplaylist.