Twórz osobistego asystenta AI do kodowania za pomocą Gemma

Uzyskiwanie pomocy w pisaniu kodu od modeli sztucznej inteligencji (AI) może być bardzo przydatne, ale co zrobić, jeśli nie możesz korzystać z hostowanych modeli generatywnej AI innych firm z powodu ograniczeń związanych z łącznością, kosztami lub bezpieczeństwem danych? Modele Gemma od Google można pobrać i uruchomić na własnym sprzęcie, dzięki czemu wszystko pozostaje lokalnie. Możesz też dostosować model, aby lepiej współpracował z Twoim kodem.

Uruchomienie własnej instancji Gemma lub CodeGemma może zapewnić Ci pomoc AI w kodowaniu przy niskich opóźnieniach, wysokiej dostępności i potencjalnie niższych kosztach, a także możliwość przechowywania wszystkich danych związanych z kodowaniem we własnej sieci. Ten projekt pokazuje, jak skonfigurować własną usługę internetową do hostowania modelu Gemma i połączyć ją z rozszerzeniem Microsoft Visual Studio Code, aby wygodniej korzystać z modelu podczas kodowania. Ten projekt obejmuje 2 podprojekty: jeden do skonfigurowania i opakowania modelu Gemma w usługę internetową oraz drugi do rozszerzenia VS Code, które łączy się z usługą internetową i z niej korzysta.

Aby obejrzeć film z omówieniem tego projektu i sposobów jego rozbudowy, w tym z informacjami od osób, które go stworzyły, zobacz film Osobisty asystent AI do pisania kodu z serii „Build with Google AI”. Kod tego projektu możesz też sprawdzić w repozytorium kodu Gemma Cookbook. W przeciwnym razie możesz rozpocząć rozszerzanie projektu, korzystając z tych instrukcji.

Przegląd

Z tego samouczka dowiesz się, jak skonfigurować i rozszerzyć 2 projekty: usługę internetową dla modelu Gemma i rozszerzenie VS Code, które będzie korzystać z tej usługi. Usługa internetowa korzysta z bibliotek Python, Keras, JAX i FastAPI do obsługi modelu Gemma i żądań. Rozszerzenie VS Code o nazwie Pipet dodaje do palety poleceń polecenia, które umożliwiają wysyłanie żądań do usługi internetowej Gemma przez wybieranie kodu, tekstu lub komentarzy w oknie edycji kodu, jak pokazano na ilustracji 1.

Zrzut ekranu interfejsu użytkownika rozszerzenia VS Code

Rysunek 1. Interfejs poleceń projektu dla rozszerzenia Pipet w Visual Studio Code

Pełny kod źródłowy obu projektów jest dostępny w repozytorium kodu w książce kucharskiej Gemma Cookbook. Możesz rozszerzyć oba projekty, aby dostosować je do swoich potrzeb i preferowanego przepływu pracy.

Konfigurowanie projektu

Te instrukcje przeprowadzą Cię przez proces przygotowania projektu do programowania i testowania. Ogólne kroki konfiguracji obejmują instalację wymaganego oprogramowania, sklonowanie projektu z repozytorium kodu, ustawienie kilku zmiennych środowiskowych, zainstalowanie bibliotek Pythona i Node.js oraz przetestowanie aplikacji internetowej.

Instalowanie wymaganego oprogramowania

Ten projekt korzysta z języka Python 3, środowisk wirtualnych (venv), Node.js i Node Package Manager (npm) do zarządzania pakietami i uruchamiania 2 projektów.

Aby zainstalować wymagane oprogramowanie:

  • Zainstaluj język Python 3, pakiet środowiska wirtualnego (venv) dla Pythona, Node.js i menedżera pakietów Node.js (npm):

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

Klonowanie projektu

Pobierz kod projektu na komputer deweloperski. Aby pobrać kod źródłowy projektu, musisz mieć oprogramowanie do kontroli wersji git.

Aby pobrać kod projektu:

  1. Sklonuj repozytorium Git za pomocą tego polecenia:

    git clone https://github.com/google-gemini/gemma-cookbook.git
    
  2. Opcjonalnie: skonfiguruj lokalne repozytorium Git, aby używać rzadkiego wyewidencjonowania, dzięki czemu będziesz mieć tylko pliki projektu:

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

Projekt usługi internetowej Gemma

Część tego projektu dotycząca usługi internetowej (gemma-web-service) tworzy niezależnie hostowane wystąpienie modelu Gemma 2 2B, które jest opakowane w podstawową usługę internetową do obsługi żądań i odpowiedzi związanych z generowaniem. Rozszerzenie VS Code, które omówimy w dalszej części tego samouczka, łączy się z tą usługą, aby obsługiwać żądania pomocy dotyczące kodu.

Te instrukcje przeprowadzą Cię przez proces przygotowania projektu do programowania i testowania. Ogólne kroki konfiguracji obejmują instalację wymaganego oprogramowania, sklonowanie projektu z repozytorium kodu, ustawienie kilku zmiennych środowiskowych, zainstalowanie bibliotek Pythona i przetestowanie usługi internetowej.

Wymagania sprzętowe

Uruchom projekt usługi internetowej Gemma na komputerze z procesorem graficznym (GPU) lub procesorem tensorowym (TPU) oraz wystarczającą ilością pamięci GPU lub TPU, aby pomieścić model. Aby uruchomić konfigurację Gemma 2 2B w tym projekcie usługi internetowej, potrzebujesz około 16 GB pamięci GPU, mniej więcej tyle samo zwykłej pamięci RAM i co najmniej 20 GB miejsca na dysku.

Jeśli wdrażasz projekt usługi internetowej Gemma na instancji maszyny wirtualnej Google Cloud, skonfiguruj instancję zgodnie z tymi wymaganiami:

  • Sprzęt GPU: do uruchomienia tego projektu wymagany jest procesor NVIDIA T4 (zalecany jest NVIDIA L4 lub nowszy).
  • System operacyjny: wybierz opcję Deep Learning on Linux, a konkretnie Deep Learning VM with CUDA 12.3 M124 z preinstalowanymi sterownikami oprogramowania GPU.
  • Rozmiar dysku rozruchowego: zarezerwuj co najmniej 20 GB miejsca na dysku na dane, model i oprogramowanie pomocnicze.

Konfigurowanie projektu

Ten projekt korzysta z języka Python 3 i wirtualnych środowisk (venv) do zarządzania pakietami i uruchamiania usługi internetowej. Zainstaluj biblioteki Pythona z aktywnym venv wirtualnym środowiskiem Pythona, aby zarządzać pakietami i zależnościami Pythona. Przed zainstalowaniem bibliotek Pythona za pomocą skryptu setup_python lub instalatora pip aktywuj wirtualne środowisko Pythona. Więcej informacji o korzystaniu ze środowisk wirtualnych Pythona znajdziesz w dokumentacji Python venv.

Aby zainstalować biblioteki Pythona:

  1. W oknie terminala przejdź do katalogu gemma-web-service:

    cd Demos/personal-code-assistant/gemma-web-service/
    
  2. Skonfiguruj i aktywuj wirtualne środowisko Pythona (venv) dla tego projektu:

    python3 -m venv venv
    source venv/bin/activate
    
  3. Zainstaluj wymagane biblioteki Pythona dla tego projektu za pomocą skryptu setup_python:

    ./setup_python.sh
    

Ustawianie zmiennych środowiskowych

Ten projekt wymaga do działania kilku zmiennych środowiskowych, w tym nazwy użytkownika Kaggle i tokena API Kaggle. Aby pobrać modele Gemma, musisz mieć konto Kaggle i poprosić o dostęp do nich. W tym projekcie dodajesz nazwę użytkownika Kaggle i token interfejsu API Kaggle w .envpliku, który jest używany przez program usługi internetowej do pobierania modelu.

Aby ustawić zmienne środowiskowe:

  1. Uzyskaj nazwę użytkownika Kaggle i token API, postępując zgodnie z instrukcjami w dokumentacji Kaggle.
  2. Uzyskaj dostęp do modelu Gemma, postępując zgodnie z instrukcjami w sekcji Uzyskiwanie dostępu do Gemma na stronie Konfiguracja Gemma.
  3. Utwórz plik zmiennych środowiskowych dla projektu, tworząc plik tekstowy.env w tej lokalizacji w sklonowanej wersji projektu:

    personal-code-assistant/gemma-web-service/.env
    
  4. Po utworzeniu pliku tekstowego .env dodaj do niego te ustawienia:

    KAGGLE_USERNAME=<YOUR_KAGGLE_USERNAME_HERE>
    KAGGLE_KEY=<YOUR_KAGGLE_KEY_HERE>
    

Uruchamianie i testowanie usługi internetowej

Po zakończeniu instalacji i konfiguracji projektu uruchom aplikację internetową, aby sprawdzić, czy została ona prawidłowo skonfigurowana. Zanim zaczniesz edytować projekt na własny użytek, przeprowadź ten test podstawowy.

Aby uruchomić i przetestować projekt:

  1. W oknie terminala przejdź do katalogu gemma-web-service:

    cd personal-code-assistant/gemma-web-service/
    
  2. Uruchom aplikację za pomocą skryptu run_service:

    ./run_service.sh
    
  3. Po uruchomieniu usługi internetowej kod programu wyświetla adres URL, pod którym można uzyskać dostęp do usługi. Zwykle jest to:

    http://localhost:8000/
    
  4. Przetestuj usługę, uruchamiając skrypt test_post:

    ./test/test_post.sh
    

Gdy usługa zostanie uruchomiona i przetestowana za pomocą tego skryptu, w następnej sekcji tego samouczka możesz połączyć się z nią za pomocą rozszerzenia VS Code.

Projekt rozszerzenia VS Code

Rozszerzenie VS Code tego projektu (pipet-code-agent-2) tworzy rozszerzenie oprogramowania aplikacji Microsoft Visual Studio Code, które ma na celu dodanie nowych poleceń kodowania AI. To rozszerzenie komunikuje się z usługą internetową Gemma opisaną wcześniej w tym samouczku. Rozszerzenie komunikuje się z usługami internetowymi przez HTTP za pomocą wiadomości w formacie JSON.

Konfigurowanie projektu

Te instrukcje przeprowadzą Cię przez proces konfigurowania projektu Pipet Code Agent w wersji 2 na potrzeby programowania i testowania. Ogólne kroki to instalacja wymaganego oprogramowania, uruchomienie instalacji konfiguracji, skonfigurowanie ustawienia rozszerzenia i przetestowanie rozszerzenia.

Instalowanie wymaganego oprogramowania

Projekt Pipet Code Agent działa jako rozszerzenie Microsoft Visual Studio Code i korzysta z Node.js oraz narzędzia Node Package Manager (npm) do zarządzania pakietami i uruchamiania aplikacji.

Aby zainstalować wymagane oprogramowanie:

  1. Pobierz i zainstaluj Visual Studio Code na swojej platformie.
  2. Sprawdź, czy Node.js jest zainstalowany. W tym celu wykonaj instrukcje instalacji odpowiednie dla Twojej platformy.

Konfigurowanie bibliotek projektu

Użyj narzędzia wiersza poleceń npm, aby pobrać wymagane zależności i skonfigurować projekt.

Aby skonfigurować kod projektu:

  1. Przejdź do głównego katalogu projektu Pipet Code Agent.

    cd Demos/personal-code-assistant/pipet-code-agent-2/
    
  2. Uruchom polecenie instalacji, aby pobrać zależności i skonfigurować projekt:

    npm install
    

Konfigurowanie rozszerzenia

Teraz możesz przetestować instalację, uruchamiając Pipet Code Agent jako rozszerzenie deweloperskie w VS Code na urządzeniu. Test otworzy osobne okno Extension Development Host w VS Code, w którym będzie dostępne nowe rozszerzenie. W tym nowym oknie skonfiguruj ustawienia, których rozszerzenie używa do uzyskiwania dostępu do Twojej osobistej usługi internetowej Gemma.

Agent kodu Pipet działający w oknie hosta rozszerzenia Rysunek 2. Okno VS Code Extension Development Host z ustawieniami rozszerzenia Pipet.

Aby skonfigurować i przetestować konfigurację:

  1. Uruchom aplikację VS Code.
  2. W VS Code utwórz nowe okno, klikając File > New Window (Plik > Nowe okno).
  3. Otwórz projekt Pipet Code Agent, klikając Plik > Otwórz folder i wybierając folder personal-code-assistant/pipet-code-agent-2/.
  4. Otwórz plik pipet-code-agent-2/src/extension.ts.
  5. Uruchom rozszerzenie w trybie debugowania, klikając Uruchom > Rozpocznij debugowanie, a w razie potrzeby wybierz opcję Host do tworzenia rozszerzeń VS Code. Ten krok otworzy osobne okno Extension Development Host.
  6. W nowym oknie VS Code otwórz ustawienia VS Code, klikając Code > Settings > Settings (Kod > Ustawienia > Ustawienia).
  7. Ustaw adres hosta serwera usługi internetowej Gemma jako ustawienie konfiguracji. W polu Search Settings (Ustawienia wyszukiwania) wpisz Gemma, wybierz kartę User (Użytkownik), a w ustawieniu Gemma > Service: Host (Gemma > Usługa: host) kliknij link Edit in settings.json (Edytuj w settings.json) i dodaj adres hosta, np. 127.0.0.1, localhost lub my-server.my-local-domain.com:

    "gemma.service.host": "your-host-address-here"
    
  8. Zapisz zmiany w pliku settings.json i zamknij karty ustawień.

Testowanie rozszerzenia

Teraz możesz przetestować instalację, uruchamiając Pipet Code Agent jako rozszerzenie deweloperskie w VS Code na urządzeniu. Test otworzy osobne okno Extension Development Host w VS Code, w którym będzie dostępne nowe rozszerzenie.

Aby przetestować polecenia rozszerzenia:

  1. W oknie VS Code Extension Development Host (Host do tworzenia rozszerzeń) wybierz dowolny kod w oknie edytora.
  2. Otwórz paletę poleceń, wybierając Widok > Paleta poleceń.
  3. Na palecie poleceń wpisz Pipet i wybierz jedno z poleceń z tym prefiksem.

Modyfikowanie istniejących poleceń

Modyfikowanie poleceń podanych w Pipet Code Agent to najprostszy sposób na zmianę działania i możliwości rozszerzenia. Te informacje o kontekście prompta pomagają modelowi generatywnemu Gemma w tworzeniu odpowiedzi. Zmieniając instrukcje prompta w istniejących poleceniach Pipet, możesz zmienić sposób działania każdego z nich.

Z tego zestawu instrukcji dowiesz się, jak zmodyfikować polecenie review.ts, zmieniając tekst promptu polecenia.

Aby przygotować się do edytowania polecenia review.ts:

  1. Uruchom aplikację VS Code.
  2. W VS Code utwórz nowe okno, klikając File > New Window (Plik > Nowe okno).
  3. Otwórz projekt Pipet Code Agent, klikając Plik > Otwórz folder i wybierając folder pipet-code-agent/.
  4. Otwórz plik pipet-code-agent/src/review.ts.

Aby zmodyfikować działanie polecenia review.ts:

  1. W pliku review.ts zmień przedostatni wiersz stałej PROMPT_INSTRUCTIONS, aby dodać 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. Zapisz zmiany w pliku review.ts.

Aby przetestować zmodyfikowane polecenie:

  1. W oknie projektu rozszerzenia VS Code Pipet otwórz plik src/extension.ts.
  2. Zbuduj zaktualizowany kod, wybierając Terminal > Run Build Task... (Terminal > Uruchom zadanie kompilacji…) i opcję npm: compile (npm: kompilacja).
  3. Uruchom ponownie debuger, wybierając Uruchom > Uruchom ponownie debugowanie.
  4. W oknie VS Code Extension Development Host (Host do tworzenia rozszerzeń) wybierz dowolny kod w oknie edytora.
  5. Otwórz paletę poleceń, wybierając Widok > Paleta poleceń.
  6. Na palecie poleceń wpisz Pipet i wybierz polecenie Pipet: Review the selected code (Pipeta: sprawdź wybrany kod).

Tworzenie nowych poleceń

Możesz rozszerzyć możliwości Pipeta, tworząc nowe polecenia, które wykonują zupełnie nowe zadania za pomocą modelu Gemma. Każdy plik poleceń, np. comment.ts lub review.ts, jest w większości samodzielny i zawiera kod do zbierania tekstu z aktywnego edytora, tworzenia prompta, łączenia się z usługą internetową Gemma, wysyłania prompta i obsługi odpowiedzi.

Z tego zestawu instrukcji dowiesz się, jak utworzyć nowe polecenie za pomocą kodu istniejącego polecenia question.ts jako szablonu.

Aby utworzyć polecenie, które rekomenduje nazwy funkcji:

  1. Utwórz kopię pliku pipet-code-agent-2/src/question.ts o nazwie new-service.ts w katalogu src/.
  2. W VS Code otwórz plik src/new-service.ts.
  3. Zmień instrukcje prompta w nowym pliku, edytując wartość 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. Dodaj tekst standardowy usługi, tworząc nową stałą 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. Zmień nazwę funkcji polecenia na newService() i zaktualizuj komunikat informacyjny.

    export async function newService() {
      vscode.window.showInformationMessage('Building new service from template...');
    ...
    
  6. Zaktualizuj kod prompta, aby zawierał tekst wybrany w edytorze i znak PROMPT_INSTRUCTIONS.

    // Build the full prompt using the template.
      const promptText = `${selectedCode}${PROMPT_INSTRUCTIONS}`;
    
  7. Zmień kod wstawiania odpowiedzi, aby uwzględnić odpowiedź i kod standardowy.

    // Insert answer after selection.
    editor.edit((editBuilder) => {
        editBuilder.insert(selection.end, "\n\n" + responseText);
        editBuilder.insert(selection.end, "\n" + BOILERPLATE_CODE);
    });
    
  8. Zapisz zmiany w pliku new-service.ts.

Zintegruj nowe polecenie

Po napisaniu kodu dla nowego polecenia musisz go zintegrować z pozostałą częścią rozszerzenia. Zaktualizuj pliki extension.tspackage.json, aby nowe polecenie było częścią rozszerzenia, i umożliw VS Code wywoływanie nowego polecenia.

Aby zintegrować polecenie new-service z kodem rozszerzenia:

  1. W VS Code otwórz pipet-code-agent-2/src/extension.tsplik.
  2. Dodaj nowy plik kodu do rozszerzenia, dodając nową instrukcję importu.

    import { newService } from './new-service';
    
  3. Zarejestruj nowe polecenie, dodając ten kod do funkcji activate().

    export function activate(context: vscode.ExtensionContext) {
        ...
        vscode.commands.registerCommand('pipet-code-agent.newService', newService);
    }
    
  4. Zapisz zmiany w pliku extension.ts.

Aby zintegrować polecenie name z pakietem rozszerzenia:

  1. W VS Code otwórz plik pipet-code-agent/package.json.
  2. Dodaj nowe polecenie do sekcji commands w pliku pakietu.

    "contributes": {
      "commands": [
        ...
        {
          "command": "pipet-code-agent.newService",
          "title": "Pipet: Generate a FastAPI service."
        }
      ],
    
  3. Zapisz zmiany w pliku package.json.

Testowanie nowego polecenia

Po zakodowaniu polecenia i zintegrowaniu go z rozszerzeniem możesz je przetestować. Nowe polecenie jest dostępne tylko w oknie Extension Development Host w VS Code, a nie w oknie VS Code, w którym edytowano kod rozszerzenia.

Aby przetestować zmodyfikowane polecenie:

  1. W oknie projektu rozszerzenia VS Code Pipet otwórz plik src/extension.ts.
  2. Zbuduj zaktualizowany kod, wybierając Terminal > Run Build Task... (Terminal > Uruchom zadanie kompilacji…) i opcję npm: compile (npm: kompilacja).
  3. W oknie projektu rozszerzenia Pipet w VS Code ponownie uruchom debuger, wybierając Run > Restart Debugging (Uruchom > Uruchom debugowanie ponownie). Spowoduje to ponowne uruchomienie osobnego okna Extension Development Host (Host do tworzenia rozszerzeń).
  4. W oknie Extension Development Host (Host do tworzenia rozszerzeń) w VS Code wybierz kod w oknie edytora.
  5. Otwórz paletę poleceń, wybierając Widok > Paleta poleceń.
  6. Na palecie poleceń wpisz Pipet i wybierz polecenie Pipet: Generate a FastAPI service (Pipet: wygeneruj usługę FastAPI).

Utworzyliśmy polecenie rozszerzenia VS Code, które współpracuje z modelem AI Gemma. Eksperymentuj z różnymi poleceniami i instrukcjami, aby stworzyć wspomagany przez AI proces tworzenia kodu, który będzie Ci odpowiadać.

Pakowanie i instalowanie rozszerzenia

Możesz spakować rozszerzenie jako plik .vsix do lokalnej instalacji w instancji VS Code. Użyj narzędzia wiersza poleceń vsce, aby wygenerować plik pakietu .vsix z projektu rozszerzenia, który możesz następnie zainstalować w instancji VS Code. Szczegółowe informacje o pakowaniu rozszerzenia znajdziesz w dokumentacji VS Code dotyczącej publikowania rozszerzeń. Po spakowaniu rozszerzenia jako pliku VSIX możesz zainstalować je ręcznie w VS Code.

Aby zainstalować rozszerzenie w pakiecie VSIX:

  1. W instancji VS Code otwórz panel Rozszerzenia, wybierając Plik > Rozszerzenia.
  2. W panelu Rozszerzenia kliknij menu z 3 kropkami w prawym górnym rogu, a następnie Zainstaluj z VSIX.
  3. Otwórz plik pakietu .vsix wygenerowany z projektu rozszerzenia, aby go zainstalować.

Dodatkowe materiały

Więcej informacji o kodzie tego projektu znajdziesz w repozytorium kodu Gemma Cookbook. Jeśli potrzebujesz pomocy przy tworzeniu aplikacji lub chcesz współpracować z innymi deweloperami, odwiedź serwer Google Developers Community Discord. Więcej projektów z serii Build with Google AI znajdziesz na tej playliście.