Ottenere assistenza per la programmazione da modelli di intelligenza artificiale (IA) può essere molto utile, ma cosa succede se ti viene impedito di utilizzare modelli di IA generativa ospitati di terze parti a causa di limitazioni relative a connettività, costi o sicurezza dei dati? La famiglia di modelli Gemma di Google è disponibile per il download e l'esecuzione sul tuo hardware, quindi puoi mantenere tutto locale e avere anche la possibilità di ottimizzare il modello in modo che funzioni meglio con la tua base di codice.
Se esegui la tua istanza di Gemma o CodeGemma, puoi ricevere assistenza per la programmazione IA con bassa latenza, alta disponibilità, costi potenzialmente inferiori e la possibilità di conservare tutti i dati di programmazione sulla tua rete. Questo progetto mostra come configurare il tuo servizio web per l'hosting di Gemma e collegarlo a un'estensione di Microsoft Visual Studio Code, per semplificare l'utilizzo del modello durante la programmazione. Questo progetto include due sottoprogetti: un progetto per configurare e eseguire il wrapping di Gemma in un servizio web e un secondo progetto per un'estensione di VS Code che si connette e utilizza il servizio web.
Per una panoramica video di questo progetto e su come estenderlo, inclusi approfondimenti da parte di chi lo ha creato, guarda il Business Email AI Assistant video di Build with Google AI. Puoi anche esaminare il codice di questo progetto nel repository del codice di Gemma Cookbook. In caso contrario, puoi iniziare a estendere il progetto seguendo le seguenti istruzioni.
Panoramica
Questo tutorial mostra come configurare ed estendere due progetti: un servizio web per Gemma e un'estensione di VS Code da utilizzare con questo servizio. Il servizio web utilizza Python, Keras, JAX e le librerie FastAPI per pubblicare il modello Gemma e gestire le richieste. L'estensione VS Code, chiamata Pipet, aggiunge alla tavolozza dei comandi comandi che ti consentono di inviare richieste al servizio web Gemma selezionando codice, testo o commenti in una finestra di modifica del codice, come mostrato in Figura 1.
Figura 1. Interfaccia utente dei comandi di progetto per l'estensione Pipet in Visual Studio Code
Il codice sorgente completo di entrambi i progetti è fornito nel repository di codice del ricettario Gemma 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 i test. I passaggi di configurazione generale includono l'installazione del software necessario, 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.
Installa il software richiesto
Questo progetto utilizza Python 3, Virtual Environments (venv
), Node.js e Node Package Manager (npm
) per gestire i pacchetti ed eseguire i due progetti.
Per installare il software necessario:
Installa Python 3, il pacchetto dell'ambiente virtuale (
venv
) per Python, Node.js e il gestore dei 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, hai bisogno del software di controllo del codice sorgente git.
Per scaricare il codice del progetto:
Clona il repository git utilizzando questo comando:
git clone https://github.com/google-gemini/gemma-cookbook.git
(Facoltativo) Configura il tuo repository Git locale in modo da utilizzare il controllo sparse, in modo da avere solo i file del progetto:
cd gemma-cookbook/ git sparse-checkout set Gemma/personal-code-assistant/ git sparse-checkout init --cone
Progetto del 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 con un servizio web di base per gestire le richieste e le risposte di generazione. L'estensione VS Code, discussa più avanti in questo tutorial, si connette a questo servizio per gestire le richieste di assistenza per il codice.
Queste istruzioni ti guidano nella preparazione di questo progetto per lo sviluppo e i test. I passaggi di configurazione generale includono l'installazione del software necessario, la clonazione del progetto dal repository del codice, l'impostazione di alcune variabili di ambiente, l'installazione delle librerie Python e il test del servizio web.
Requisiti hardware
Esegui il progetto del servizio web Gemma su un computer con un'unità di elaborazione grafica (GPU) o una Tensor Processing Unit (TPU) e memoria GPU o TPU sufficiente per contenere il modello. Per eseguire la configurazione Gemma 2 2B in questo progetto di servizio web, è necessaria circa 16 GB di memoria GPU, circa la stessa quantità di RAM normale e almeno 20 GB di spazio su disco.
Se esegui il deployment del progetto del servizio web Gemma su un'istanza VM Google Cloud, configura l'istanza in base ai seguenti requisiti:
- Hardware GPU: è richiesta una NVIDIA T4 per eseguire questo progetto (è consigliata la scheda NVIDIA L4 o versione successiva)
- Sistema operativo: scegli un'opzione Deep Learning su Linux, in particolare VM per il deep learning con CUDA 12.3 M124 con i driver software GPU preinstallati.
- Dimensione del disco di avvio: esegui il provisioning di almeno 20 GB di spazio su disco per i tuoi dati, il tuo modello e il software di supporto.
Configura il progetto
Questo progetto utilizza Python 3 e ambienti virtuali (venv
) per gestire i pacchetti e 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 ulteriori informazioni sull'utilizzo degli ambienti virtuali Python, consulta la documentazione di venv di Python.
Per installare le librerie Python:
In una finestra del terminale, vai alla directory
gemma-web-service
:cd Gemma/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 poterli scaricare, 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 riportate nella documentazione di Kaggle.
- Per accedere al modello Gemma, segui le istruzioni Accedi a Gemma nella pagina Configurazione di Gemma.
Crea un file di variabili di ambiente per il progetto, creando un file di testo
.env
in questa posizione nel tuo 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 servizio web
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 uso personale.
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 tramite il quale 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 dell'IA. 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 illustrano la procedura di configurazione del progetto Pipet Code Agent v2 per lo sviluppo e i 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.
Installa il software necessario
Il progetto Pipet Code Agent viene eseguito come estensione di Visual Studio Code di Microsoft e utilizza Node.js e lo strumento Node Package Manager (npm
) per gestire i pacchetti ed eseguire l'applicazione.
Per installare il software necessario:
- 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 del progetto:
Vai alla directory principale del progetto Pipet Code Agent.
cd Gemma/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 distinta di Extension Development Host di VS Code in cui è disponibile la nuova estensione. In questa nuova finestra, puoi configurare le impostazioni utilizzate dall'estensione per accedere al tuo servizio web Gemma personale.
Figura 2. Finestra Host di sviluppo delle estensioni di 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 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 il debug e, se necessario, l'opzione Host di sviluppo delle estensioni VS Code. Questo passaggio apre una finestra separata Host sviluppo estensione.
- Nella nuova finestra di VS Code, apri le impostazioni di VS Code selezionando Codice > Impostazioni > Impostazioni.
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 esempio127.0.0.1
,localhost
omy-server.my-local-domain.com
:"gemma.service.host": "your-host-address-here"
Salva le modifiche nel file
settings.json
e chiudi le schede delle impostazioni.
Testare 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 VS Code separata Extension Development Host in cui è disponibile la nuova estensione.
Per testare i comandi dell'estensione:
- Nella finestra Extension Development Host (Host di sviluppo delle estensioni) di VS Code, seleziona un codice qualunque nella finestra dell'editor.
- Apri la tavolozza dei comandi selezionando Visualizza > Riquadro dei comandi.
- Nella tavolozza dei comandi, digita
Pipet
e seleziona uno dei comandi con quel 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 formazione di una risposta. Modificando le istruzioni del prompt nei comandi Pipet esistenti, puoi cambiare il comportamento di ciascun comando.
Questo insieme di istruzioni spiega come modificare il comando review.ts
cambiando il testo 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 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 l'ultima riga della costantePROMPT_INSTRUCTIONS
per aggiungereAlso 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 nel file
review.ts
.
Per testare il comando modificato:
- Nella finestra del progetto dell'estensione Pipet di VS Code, apri il file
src/extension.ts
. - Compila il codice aggiornato selezionando Terminale > Esegui attività di compilazione… e poi l'opzione npm: compile.
- Riavvia il debugger selezionando Esegui > Riavvia il debug.
- Nella finestra Extension Development Host (Host di sviluppo delle estensioni) di VS Code, seleziona un codice qualunque nella finestra dell'editor.
- Apri la tavolozza dei comandi selezionando Visualizza > Riquadro dei comandi.
- Nella tavolozza dei comandi, digita
Pipet
e seleziona il comando Pipetta: esamina il codice selezionato.
Creare 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
, è principalmente 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 consiglia i nomi delle funzioni:
- Crea una copia del file
pipet-code-agent-2/src/question.ts
chiamatonew-service.ts
nella directorysrc/
. - 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 di servizio creando una nuova
BOILERPLATE_CODE
costante.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 relativo messaggio informativo.export async function newService() { vscode.window.showInformationMessage('Building new service from template...'); ...
Aggiorna il codice dell'assemblaggio del prompt per includere il testo selezionato nell'editor e in
PROMPT_INSTRUCTIONS
.// Build the full prompt using the template. const promptText = `${selectedCode}${PROMPT_INSTRUCTIONS}`;
Modifica il codice di inserimento della risposta in modo da includere 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 nel file
new-service.ts
.
Integra 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 far sì che il nuovo comando sia parte dell'estensione e consenti a VS Code di invocarlo.
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 dichiarazione di importazione.
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 dell'estensione:
- 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 nel file
package.json
.
Testa il nuovo comando
Una volta completata la codifica del comando e l'integrazione con l'estensione, puoi testarlo. Il nuovo comando è disponibile solo nella finestra VS Code Extension Development Host e non nella finestra VS Code in cui hai modificato il codice dell'estensione.
Per testare il comando modificato:
- Nella finestra del progetto dell'estensione Pipet di VS Code, 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 il debug, che riavvia una finestra distinta di Extension Development Host (Host di sviluppo delle estensioni).
- Nella finestra Extension Development Host (Host di sviluppo delle estensioni) di VS Code, seleziona del codice nella finestra dell'editor.
- Apri la tavolozza dei comandi selezionando Visualizza > Riquadro dei comandi.
- Nella tavolozza 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 IA di Gemma. Prova a fare esperimenti con diversi comandi e istruzioni per creare un flusso di lavoro di sviluppo del codice assistito dall'IA che funzioni per te.
Impacchetta e installa l'estensione
Puoi pacchettizzare l'estensione come file .vsix
per l'installazione locale nell'istanza VS Code. Utilizza lo strumento a riga di comando vsce
per generare un file del pacchetto .vsix
dal progetto dell'estensione, che potrai poi installare nell'istanza di VS Code. Per informazioni dettagliate sul packaging dell'estensione, consulta la documentazione relativa alla pubblicazione delle estensioni di VS Code. Una volta completato il pacchettizzazione 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, quindi 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 del codice di Gemma Cookbook. Se hai bisogno di aiuto per creare l'applicazione o vuoi collaborare con altri sviluppatori, dai un'occhiata al server di Discord della community degli sviluppatori Google. Per altri progetti di Creare con Google AI, consulta la playlist di video.