Gemma 3n è stata rilasciata con input audio e ottimizzata per l'utilizzo nei dispositivi di uso quotidiano. Scopri di più

Creare un assistente alla programmazione basata sull'IA personale con Gemma

Ricevere assistenza per il codice dai modelli di intelligenza artificiale (AI) può essere molto utile, ma cosa succede se non puoi utilizzare modelli di AI generativa ospitati di terze parti a causa di limitazioni di connettività, costi o sicurezza dei dati? La famiglia di modelli Gemma di Google è disponibile per il download e l'esecuzione sul tuo hardware, così puoi mantenere tutto a livello locale e avere anche la possibilità di ottimizzare il modello per farlo funzionare meglio con la tua base di codice.

L'esecuzione della tua istanza di Gemma o CodeGemma può fornirti assistenza per la codifica AI con bassa latenza, alta disponibilità, costi potenzialmente inferiori e la possibilità di conservare tutti i tuoi dati di codifica sulla tua rete. Questo progetto mostra come configurare un servizio web personalizzato per ospitare Gemma e collegarlo a un'estensione di Microsoft Visual Studio Code, per rendere più comodo l'utilizzo del modello durante la codifica. Questo progetto include due progetti secondari: uno per configurare e integrare Gemma in un servizio web e un secondo progetto per un'estensione VS Code che si connette e utilizza il servizio web.

Per una panoramica video di questo progetto e su come estenderlo, inclusi approfondimenti delle persone che lo hanno creato, guarda il video Assistente di codifica AI personale Build with Google AI. Puoi anche esaminare il codice di questo progetto nel repository di codice di Gemma Cookbook. In caso contrario, puoi iniziare a estendere il progetto seguendo le istruzioni riportate di seguito.

Panoramica

Questo tutorial mostra come configurare ed estendere due progetti: un servizio web per Gemma e un'estensione VS Code da utilizzare con questo servizio. Il servizio web utilizza le librerie Python, Keras, JAX e FastAPI per distribuire il modello Gemma e gestire le richieste. L'estensione VS Code, chiamata Pipet, aggiunge comandi alla tavolozza dei comandi che ti consentono di effettuare richieste al servizio web Gemma selezionando codice, testo o commenti in una finestra di modifica del codice, come mostrato nella Figura 1.

Screenshot dell'interfaccia utente dell'estensione VS Code

Figura 1. Interfaccia utente del comando di progetto per l'estensione Pipet in Visual Studio Code

Il codice sorgente completo di entrambi i progetti è disponibile nel repository di codice Gemma Cookbook e puoi estendere entrambi i progetti per adattarli alle tue esigenze e al tuo flusso di lavoro preferito.

Configurazione del progetto

Queste istruzioni ti guidano nella preparazione di questo progetto per lo sviluppo e il test. I passaggi di configurazione generali includono l'installazione del software prerequisito, la clonazione del progetto dal repository di codice, l'impostazione di alcune variabili di ambiente, l'installazione delle librerie Python e Node.js e il test dell'applicazione web.

Installare il software richiesto

Questo progetto utilizza Python 3, ambienti virtuali (venv), Node.js e Node Package Manager (npm) per gestire i pacchetti ed eseguire i due progetti.

Per installare il software richiesto:

Installa Python 3, il pacchetto di ambiente virtuale (venv) per Python, Node.js e il gestore pacchetti Node.js (npm):
```
sudo apt update
sudo apt install git pip python3-venv nodejs npm
```

Clona il progetto

Scarica il codice del progetto sul computer di sviluppo. Per recuperare il codice sorgente del progetto, devi disporre del software di controllo del codice sorgente git.

Per scaricare il codice del progetto:

Clona il repository Git utilizzando il seguente comando:

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

(Facoltativo) Configura il repository Git locale in modo che utilizzi lo sparse checkout, in modo da avere solo i file per il progetto:
```
cd gemma-cookbook/
git sparse-checkout set Demos/personal-code-assistant/
git sparse-checkout init --cone
```

Progetto di servizio web Gemma

La parte del servizio web di questo progetto (gemma-web-service) crea un'istanza di Gemma 2 2B ospitata in modo indipendente e racchiusa in un servizio web di base per gestire richieste e risposte di generazione. L'estensione VS Code, trattata più avanti in questo tutorial, si connette a questo servizio per gestire le richieste di assistenza per il codice.

Requisiti hardware

Esegui il progetto di servizio web Gemma su un computer con un'unità di elaborazione grafica (GPU) o un'unità di elaborazione tensoriale (TPU) e memoria GPU o TPU sufficiente per contenere il modello. Per eseguire la configurazione di Gemma 2 2B in questo progetto di servizio web, hai bisogno di circa 16 GB di memoria GPU, circa la stessa quantità di RAM normale e un minimo di 20 GB di spazio su disco.

Se esegui il deployment del progetto di servizio web Gemma su un'istanza VM di Google Cloud, configura l'istanza in base ai seguenti requisiti:

Hardware GPU: per eseguire questo progetto è necessaria una NVIDIA T4 (consigliata NVIDIA L4 o versioni successive)
Sistema operativo: scegli un'opzione Deep Learning su Linux, in particolare Deep Learning VM con CUDA 12.3 M124 con driver software GPU preinstallati.
Dimensioni del disco di avvio: esegui il provisioning di almeno 20 GB di spazio su disco per i tuoi dati, il modello e il software di supporto.

Configura il progetto

Questo progetto utilizza Python 3 e ambienti virtuali (venv) per gestire i pacchetti ed eseguire il servizio web. Installa le librerie Python con l'ambiente virtuale Python venv attivato per gestire i pacchetti e le dipendenze Python. Assicurati di attivare l'ambiente virtuale Python prima di installare le librerie Python con lo script setup_python o con il programma di installazione pip. Per saperne di più sull'utilizzo degli ambienti virtuali Python, consulta la documentazione di Python venv.

Per installare le librerie Python:

In una finestra del terminale, vai alla directory gemma-web-service:
```
cd Demos/personal-code-assistant/gemma-web-service/
```
Configura e attiva un ambiente virtuale Python (venv) per questo progetto:
```
python3 -m venv venv
source venv/bin/activate
```
Installa le librerie Python richieste per questo progetto utilizzando lo script setup_python:
```
./setup_python.sh
```

Imposta le variabili di ambiente

Per l'esecuzione di questo progetto sono necessarie alcune variabili di ambiente, tra cui un nome utente Kaggle e un token API Kaggle. Per scaricarli, devi avere un account Kaggle e richiedere l'accesso ai modelli Gemma. Per questo progetto, aggiungi il tuo nome utente Kaggle e il token API Kaggle in un file .env, che viene utilizzato dal programma del servizio web per scaricare il modello.

Per impostare le variabili di ambiente:

Ottieni il tuo nome utente Kaggle e il tuo token API seguendo le istruzioni nella documentazione di Kaggle.
Accedi al modello Gemma seguendo le istruzioni riportate nella pagina Configurazione di Gemma della sezione Accedere a Gemma.
Crea un file di variabili di ambiente per il progetto creando un file di testo .env in questa posizione nel clone del progetto:
```
personal-code-assistant/gemma-web-service/.env
```

Dopo aver creato il file di testo .env, aggiungi le seguenti impostazioni:

KAGGLE_USERNAME=<YOUR_KAGGLE_USERNAME_HERE>
KAGGLE_KEY=<YOUR_KAGGLE_KEY_HERE>

Esegui e testa il web service

Una volta completata l'installazione e la configurazione del progetto, esegui l'applicazione web per verificare di averla configurata correttamente. Ti consigliamo di eseguire questo controllo di base prima di modificare il progetto per il tuo utilizzo.

Per eseguire e testare il progetto:

In una finestra del terminale, vai alla directory gemma-web-service:
```
cd personal-code-assistant/gemma-web-service/
```
Esegui l'applicazione utilizzando lo script run_service:
```
./run_service.sh
```
Dopo aver avviato il servizio web, il codice del programma elenca un URL in cui puoi accedere al servizio. In genere, questo indirizzo è:
```
http://localhost:8000/
```
Testa il servizio eseguendo lo script test_post:
```
./test/test_post.sh
```

Dopo aver eseguito e testato correttamente il servizio con questo script, dovresti essere pronto a connetterti con l'estensione VS Code nella sezione successiva di questo tutorial.

Progetto di estensione VS Code

L'estensione VS Code di questo progetto (pipet-code-agent-2) crea un'estensione software dell'applicazione Microsoft Visual Studio Code progettata per aggiungere nuovi comandi di programmazione AI. Questa estensione comunica con il servizio web Gemma descritto in precedenza in questo tutorial. L'estensione comunica con i servizi web tramite HTTP utilizzando messaggi in formato JSON.

Configura il progetto

Queste istruzioni ti guidano nella configurazione del progetto Pipet Code Agent v2 per lo sviluppo e il test. I passaggi generali sono l'installazione del software richiesto, l'esecuzione dell'installazione della configurazione, la configurazione di un'impostazione dell'estensione e il test dell'estensione.

Installare il software richiesto

Il progetto Pipet Code Agent viene eseguito come estensione di Microsoft Visual Studio Code e utilizza Node.js e lo strumento Node Package Manager (npm) per gestire i pacchetti ed eseguire l'applicazione.

Per installare il software richiesto:

Scarica e installa Visual Studio Code per la tua piattaforma.
Assicurati che Node.js sia installato seguendo le istruzioni di installazione per la tua piattaforma.

Configurare le librerie del progetto

Utilizza lo strumento a riga di comando npm per scaricare le dipendenze richieste e configurare il progetto.

Per configurare il codice progetto:

Vai alla directory principale del progetto Pipet Code Agent.
```
cd Demos/personal-code-assistant/pipet-code-agent-2/
```
Esegui il comando di installazione per scaricare le dipendenze e configurare il progetto:
```
npm install
```

Configurare l'estensione

Ora dovresti essere in grado di testare l'installazione eseguendo Pipet Code Agent come estensione di sviluppo in VS Code sul tuo dispositivo. Il test apre una finestra separata di VS Code Extension Development Host in cui è disponibile la nuova estensione. In questa nuova finestra, configura le impostazioni che l'estensione utilizza per accedere al tuo servizio web Gemma personale.

Agente di codice Pipet in esecuzione nella finestra dell'host di sviluppo delle estensioni Figura 2. Finestra Host di sviluppo dell'estensione VS Code con le impostazioni dell'estensione Pipet.

Per configurare e testare la configurazione:

Avvia l'applicazione VS Code.
In VS Code, crea una nuova finestra selezionando File > Nuova finestra.
Apri il progetto Pipet Code Agent selezionando File > Apri cartella e scegliendo la cartella personal-code-assistant/pipet-code-agent-2/.
Apri il file pipet-code-agent-2/src/extension.ts.
Esegui l'estensione in modalità di debug selezionando Esegui > Avvia debug e, se necessario, seleziona l'opzione Host di sviluppo dell'estensione VS Code. Questo passaggio apre una finestra separata di Extension Development Host.
Nella nuova finestra di VS Code, apri le impostazioni di VS Code selezionando Code > Settings > Settings.
Imposta l'indirizzo host del server del servizio web Gemma come impostazione di configurazione. Nel campo Impostazioni di ricerca, digita Gemma, seleziona la scheda Utente e, nell'impostazione Gemma > Servizio: host, fai clic sul link Modifica in settings.json e aggiungi l'indirizzo host, ad esempio 127.0.0.1, localhost o my-server.my-local-domain.com:
```
"gemma.service.host": "your-host-address-here"
```
Salva le modifiche apportate al file settings.json e chiudi le schede delle impostazioni.

Testare l'estensione

Per testare i comandi dell'estensione:

Nella finestra Extension Development Host di VS Code, seleziona un codice nella finestra dell'editor.
Apri la tavolozza dei comandi selezionando Visualizza > Tavolozza comandi.
Nel riquadro dei comandi, digita Pipet e seleziona uno dei comandi con questo prefisso.

Modificare i comandi esistenti

La modifica dei comandi forniti in Pipet Code Agent è il modo più semplice per cambiare il comportamento e le funzionalità dell'estensione. Queste informazioni sul contesto del prompt guidano il modello generativo Gemma nella formulazione di una risposta. Modificando le istruzioni del prompt nei comandi Pipet esistenti, puoi modificare il comportamento di ciascun comando.

Questo insieme di istruzioni spiega come modificare il comando review.ts cambiando il testo del prompt del comando.

Per prepararti a modificare il comando review.ts:

Avvia l'applicazione VS Code.
In VS Code, crea una nuova finestra selezionando File > Nuova finestra.
Apri il progetto Pipet Code Agent selezionando File > Apri cartella e scegliendo la cartella pipet-code-agent/.
Apri il file pipet-code-agent/src/review.ts.

Per modificare il comportamento del comando review.ts:

Nel file review.ts, modifica la penultima riga della costante PROMPT_INSTRUCTIONS per aggiungere 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:
`;

Salva le modifiche apportate al file review.ts.

Per testare il comando modificato:

Nella finestra del progetto dell'estensione VS Code Pipet, apri il file src/extension.ts.
Crea il codice aggiornato selezionando Terminale > Esegui attività di compilazione… e poi l'opzione npm: compile.
Riavvia il debugger selezionando Esegui > Riavvia debug.
Nella finestra Extension Development Host di VS Code, seleziona un codice nella finestra dell'editor.
Apri la tavolozza dei comandi selezionando Visualizza > Tavolozza comandi.
Nella tavolozza dei comandi, digita Pipet e seleziona il comando Pipet: Review the selected code.

Crea nuovi comandi

Puoi estendere Pipet creando nuovi comandi che eseguono attività completamente nuove con il modello Gemma. Ogni file di comando, ad esempio comment.ts o review.ts, è per lo più autonomo e include il codice per raccogliere il testo dall'editor attivo, comporre un prompt, connettersi al servizio web Gemma, inviare un prompt e gestire la risposta.

Questo insieme di istruzioni spiega come creare un nuovo comando utilizzando il codice di un comando esistente, question.ts, come modello.

Per creare un comando che consigli nomi per le funzioni:

Crea una copia del file pipet-code-agent-2/src/question.ts denominato new-service.ts nella directory src/.
In VS Code, apri il file src/new-service.ts.

Modifica le istruzioni del prompt nel nuovo file modificando il valore 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
`;

Aggiungi il boilerplate del servizio creando una nuova costante 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)
`;

Modifica il nome della funzione di comando in newService() e aggiorna il messaggio informativo.

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

Aggiorna il codice di assemblaggio del prompt in modo da includere il testo selezionato nell'editor e PROMPT_INSTRUCTIONS.

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

Modifica il codice di inserimento della risposta in modo che includa la risposta e il codice boilerplate.

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

Salva le modifiche apportate al file new-service.ts.

Integrare il nuovo comando

Dopo aver completato il codice per il nuovo comando, devi integrarlo con il resto dell'estensione. Aggiorna i file extension.ts e package.json per rendere il nuovo comando parte dell'estensione e consentire a VS Code di richiamare il nuovo comando.

Per integrare il comando new-service con il codice dell'estensione:

In VS Code, apri il file pipet-code-agent-2/src/extension.ts.
Aggiungi il nuovo file di codice all'estensione aggiungendo una nuova istruzione import.
```
import { newService } from './new-service';
```

Registra il nuovo comando aggiungendo il seguente codice alla funzione activate().

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

Salva le modifiche apportate al file extension.ts.

Per integrare il comando name con il pacchetto di estensioni:

In VS Code, apri il file pipet-code-agent/package.json.

Aggiungi il nuovo comando alla sezione commands del file del pacchetto.

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

Salva le modifiche apportate al file package.json.

Testa il nuovo comando

Una volta completata la codifica del comando e la sua integrazione con l'estensione, puoi testarlo. Il nuovo comando è disponibile solo nella finestra Extension Development Host� e non� nella finestra di VS Code in cui hai modificato il codice dell'estensione.

Per testare il comando modificato:

Nella finestra del progetto dell'estensione VS Code Pipet, apri il file src/extension.ts.
Crea il codice aggiornato selezionando Terminale > Esegui attività di compilazione… e poi l'opzione npm: compile.
Nella finestra del progetto dell'estensione Pipet di VS Code, riavvia il debugger selezionando Esegui > Riavvia debug, che riavvia una finestra Extension Development Host separata.
Nella finestra Extension Development Host di VS Code, seleziona del codice nella finestra dell'editor.
Apri la tavolozza dei comandi selezionando Visualizza > Tavolozza comandi.
Nel riquadro dei comandi, digita Pipet e seleziona il comando Pipet: Generate a FastAPI service.

Ora hai creato un comando di estensione VS Code che funziona con un modello di AI Gemma. Prova a sperimentare diversi comandi e istruzioni per creare un workflow di sviluppo del codice assistito dall'AI che funzioni per te.

Pacchettizzare e installare l'estensione

Puoi creare un pacchetto dell'estensione come file .vsix per l'installazione locale nell'istanza di VS Code. Utilizza lo strumento a riga di comando vsce per generare un file di pacchetto .vsix dal progetto di estensione, che puoi poi installare nell'istanza di VS Code. Per informazioni dettagliate sulla creazione del pacchetto dell'estensione, consulta la documentazione Pubblicazione delle estensioni di VS Code. Una volta completato il packaging dell'estensione come file VSIX, puoi installarla manualmente in VS Code.

Per installare l'estensione pacchettizzata VSIX:

Nell'istanza di VS Code, apri il riquadro Estensioni scegliendo File > Estensioni.
Nel riquadro Estensioni, seleziona il menu con tre puntini in alto a destra e poi Installa da VSIX.
Apri il file del pacchetto .vsix generato dal progetto di estensione per installarlo.

Risorse aggiuntive

Per maggiori dettagli sul codice di questo progetto, consulta il repository di codice di Gemma Cookbook. Se hai bisogno di aiuto per creare l'applicazione o vuoi collaborare con altri sviluppatori, consulta il server Discord della community di Google Developers. Per altri progetti di Build with Google AI, consulta la playlist di video.