Jak używać Gemini do odkrywania i ulepszania istniejącej aplikacji

1. Przegląd

W tym ćwiczeniu w Codelabs dowiesz się, jak używać Gemini do tworzenia aplikacji klienckiej na podstawie istniejącego backendu API.

Czego się nauczysz

Ten moduł ma na celu pokazanie, jak korzystać z Gemini w istniejącej aplikacji. W tym module nauczysz się:

• Wdróż rozwiązanie ułatwiające szybsze rozpoczęcie pracy z przetwarzaniem obrazu z wykorzystaniem AI/ML.
• Korzystanie z Gemini do eksplorowania aplikacji API
• Tworzenie klienta aplikacji API za pomocą Gemini

Konfiguracja – tworzenie nowego projektu

W zależności od zasad organizacji możesz nie mieć możliwości prawidłowego wdrożenia tego rozwiązania.

Rekomendacja: używaj konta, na którym masz pełne uprawnienia (np. konta osobistego), zamiast konta firmowego lub szkolnego.

Uwaga: jeśli masz niedawno utworzony projekt, w którym masz pełne uprawnienia i w którym masz już włączony interfejs Gemini API, możesz nadal korzystać z tego projektu i pominąć ten krok. Jeśli na przykład niedawno udało Ci się ukończyć inne ćwiczenia z kodem dotyczące Gemini, możesz pominąć ten krok.

1. Otwórz konsolę Google Cloud.
2. Kliknij menu bieżącego projektu.
3. Kliknij Nowy projekt.
4. Dodaj nazwę projektu i kliknij UTWÓRZ
   .
   • Rekomendacja: użyj unikalnej nazwy projektu, aby właściwości Project name i Project ID były takie same.

2. Wdrażanie rozwiązania ułatwiającego szybsze rozpoczęcie pracy

Gotowe rozwiązania ułatwiające szybsze rozpoczęcie pracy to gotowe szablony rozwiązań z Google Cloud. W tym module wykorzystujemy rozwiązanie ułatwiające szybsze rozpoczęcie pracy, aby pokazać, jak Gemini może pomóc w ulepszaniu istniejącej aplikacji.

1. Otwórz stronę z informacjami o rozwiązaniu ułatwiającym szybsze rozpoczęcie pracy w zakresie przetwarzania obrazu z wykorzystaniem sztucznej inteligencji i systemów uczących się
   • Kliknij menu z 3 kreskami
   • W podmenu Usługi i rozwiązania kliknij Rozwiązania ułatwiające szybsze rozpoczęcie pracy
   • Kliknij Przetwarzanie obrazu z wykorzystaniem sztucznej inteligencji i uczenia maszynowego w Cloud Functions
2. Kliknij WDRÓŻ.
   • Jeśli w projekcie nie masz włączonych płatności, włącz je.
   • Potwierdź nazwę projektu i kliknij DALEJ.
   • Wybierz region us-central1 (Iowa).
   • Jeśli pojawi się prośba o podanie innych danych, zaakceptuj wartości domyślne.
   • Kliknij WDROŻ.
   • Może to potrwać do 15 minut.
   • Nie musisz wprowadzać żadnych zmian, ale możesz zapoznać się z wdrożeniem rozwiązania ułatwiającego szybsze rozpoczęcie pracy.

Rozwiązywanie problemów

1. Problem: czy widzisz błąd Partial deployment.?
   • Rozwiązanie: w takiej sytuacji prawdopodobnie należy usunąć wdrożenie i zacząć od nowa. Powinien być widoczny przycisk USUŃ WDRAŻANIE. Kliknij ten przycisk, a następnie ponownie wdróż rozwiązanie ułatwiające szybsze rozpoczęcie pracy.

3. Włącz Gemini

Konfigurowanie środowiska do edycji kodu i włączanie Gemini

1. Otwórz edytor Cloud Shell
   • Wróć do konsoli Google Cloud.
   • Na pasku wyszukiwania wpisz Cloud Shell Editor i w menu kliknij Edytor Cloud Shell.
   • Jeśli korzystasz ze starszej wersji edytora, kliknij Wypróbuj nowy edytor.
     • Uwaga: jeśli nie widzisz przycisku Wypróbuj nowy edytor, prawdopodobnie korzystasz już z nowego edytora. Starszy edytor będzie działać, ale widoki będą wyglądać nieco inaczej.
   • Kliknij ikonę Otwórz w nowym oknie .
2. Jeśli pojawi się taka prośba, zaloguj się lub autoryzuj swoje konto.
   • W zależności od ustawień podczas tego modułu możesz kilka razy zobaczyć prośbę o autoryzację konta. Za każdym razem, gdy się pojawi, wybierz opcję autoryzacji.
3. Na pasku stanu u dołu kliknij przycisk Cloud Code – zaloguj się, jak pokazano na ilustracji. Autoryzuj wtyczkę zgodnie z instrukcjami.
4. Jeśli pojawi się taka prośba, kliknij Wybierz projekt Google Cloud, a następnie wybierz projekt, którego używasz .
5. Włącz Gemini
   • Kliknij Cloud Code 
     .
     • Uwaga: w zależności od rozmiaru ekranu może to wymagać 1 lub 2 kroków.
   • W sekcji POMOC I OPINIE kliknij Zmień ustawienia.
   • Typ: Gemini: Enable
   • Zaznacz pole wyboru (jeśli nie jest jeszcze zaznaczone) .
   • Ponownie załaduj środowisko IDE.
   • Spowoduje to włączenie Gemini w Cloud Code, a na pasku stanu w IDE pojawi się Gemini.
6. Kliknij przycisk Gemini w prawym dolnym rogu, jak pokazano na ilustracji, i wybierz odpowiedni projekt Google Cloud.
   • Jeśli zobaczysz błąd, który Gemini has not been enabled for your selected project. Kliknij Włącz Gemini API
7. Sprawdź, czy po lewej stronie widzisz prawidłowy projekt w chmurze Google Cloud (zobaczysz nazwę projektu), a po prawej stronie na pasku stanu włączoną usługę Gemini, jak pokazano poniżej:

4. Pobieranie kodu funkcji w Cloud Functions

Pobierz kod i użyj Gemini, aby dowiedzieć się więcej o rozwiązaniach ułatwiających szybsze rozpoczęcie pracy i wdrożonym kodzie.

1. Jeśli nie widzisz tego widoku, kliknij Cloud Code .
2. Kliknij Cloud Functions
   .
   • Jeśli widzisz przycisk Wybierz projekt, kliknij go i wybierz projekt, nad którym pracujesz.
   • Kliknij funkcję annotate-http.
   • Kliknij ikonę Pobierz do nowego obszaru roboczego .
3. Użyj nazwy obszaru roboczego annotate-http-1 (powinna być domyślna) i kliknij OK.
4. Otwórz plik main.py.
   • Kliknij ikonę Eksploratora .
   • Kliknij plik main.py, aby go otworzyć.
5. Kliknij ikonę Gemini Chat 
   .
   • Uwaga: w zależności od rozmiaru ekranu może to wymagać 1 lub 2 kroków.
6. Spróbuj zadać Gemini pytanie. Wpisz prompta, np.:
   • What is a Jump Start Solution in Google Cloud?
   • Explain this code.

Resetowanie Gemini Chat

Prompty mają wpływ na przyszłe prompty. Jeśli na przykład zrobisz błąd w identyfikatorze projektu lub regionie, będzie on powtarzany w przyszłych promptach i odpowiedziach, co może negatywnie wpłynąć na Twoje wrażenia. Jeśli popełnisz błąd lub chcesz wyczyścić historię z innego powodu, możesz zresetować czat, klikając ikonę kosza.

5. Wywoływanie istniejącego punktu końcowego funkcji w Cloud Functions

Zapoznaj się z kodem i wywołaj punkt końcowy wdrożony w ramach rozwiązania ułatwiającego szybsze rozpoczęcie pracy.

1. Wpisz prompta:
   • WAŻNE: w poniższym prompcie zastąp my-project-with-duet identyfikatorem projektu.
   • The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
   • Otrzymasz odpowiedź zawierającą polecenie curl podobne do tego:

     curl -X POST \
         -H "Authorization: Bearer $(gcloud auth print-access-token)" \
     ...
     

   • Skopiuj to polecenie curl, aby użyć go w następnym kroku.
2. Przetestuj polecenie w nowym terminalu.
   • Kliknij menu z 3 kreskami
   • Kliknij Terminal.
   • Kliknij Nowy terminal.
   • Wklej polecenie curl z poprzedniego kroku do terminala i naciśnij Enter, aby je uruchomić.
   • Otrzymasz odpowiedź, która zaczyna się tak:

     {
         "labelAnnotations": [
         {
         "mid": "/m/0csby",
         "description": "Cloud",
         "score": 0.97885925,
         "topicality": 0.97885925,
     ...
     

3. (Opcjonalnie) Możesz to zrobić z innym obrazem z internetu publicznego, wpisując w Duet AI prompta w stylu:
   • Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

Rozwiązywanie problemów

Uwaga dotycząca niedeterminizmu: Gemini i inne usługi oparte na dużych modelach językowych (LLM) są niedeterministyczne, co oznacza, że przy tych samych danych wejściowych mogą generować różne wyniki. Nawet jeśli wykonasz wszystkie czynności, polecenia mogą nie działać. Te czynności powinny pomóc w rozwiązaniu problemów.

Wygenerowane polecenie curl powinno wyglądać mniej więcej tak:

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

Gemini używa TEST_IMAGE w pliku main.py, który jest zdjęciem wieży Eiffla.

Jeśli polecenie curl nie działa, sprawdź te kwestie:

1. Problem: czy punkt końcowy adresu URL zawiera znak .a.run.app?
   • Rozwiązanie: Duet może sądzić, że wdrażasz w Cloud Run. Zastąp my-project-with-duet identyfikatorem projektu w https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate, aby uzyskać prawidłowy punkt końcowy Cloud Functions, i użyj go w poleceniu curl.
2. Problem: czy punkt końcowy adresu URL zawiera znak my-project-with-duet?
   • Rozwiązanie: zastąp my-project-with-duet identyfikatorem projektu.
3. Problem: czy w adresie URL punktu końcowego brakuje znaku us-central1?
   • Rozwiązanie: sprawdź, czy adres URL zaczyna się od us-central1, np. https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate z identyfikatorem projektu.
4. Problem: w zależności od użytego promptu wygenerowany punkt końcowy może wyglądać jak cloudfunctions.net/annotate-http lub cloudfunctions.net/annotate. Czy na końcu adresu URL punktu końcowego brakuje znaku /annotate-http/annotate?
   • Rozwiązanie: upewnij się, że punkt końcowy adresu URL kończy się pełną ścieżką aplikacji API cloudfunctions.net/annotate-http/annotate
5. Problem: żądanie cURL działa, ale nie zwraca zbyt wielu informacji. Czy prośba dotyczy funkcji?
   • Rozwiązanie: nie jest to poważny problem. Jeśli przejdziesz dalej bez wprowadzania zmian, reszta modułu będzie nadal działać. Jeśli chcesz uzyskać więcej informacji, możesz poprosić Duet o dodanie funkcji do żądania cURL.
6. Problem: odpowiedzi wydają się nieprawidłowe lub brakuje w nich kontekstu związanego z kodem. Czy korzystasz z Gemini Chat w edytorze Cloud Shell?
   • Rozwiązanie: otwórz plik main.py i podczas korzystania z Gemini Chat w edytorze Cloud Shell wyróżnij kod związany z Twoim promptem. Asystent Gemini w Google Cloud ma inny kontekst, co prowadzi do różnych odpowiedzi.
7. Problem: odpowiedź na prompt nadal nie jest do końca prawidłowa.
   • Rozwiązanie: spróbuj użyć innego prompta, w którym podasz Gemini jeszcze więcej wskazówek dotyczących tego, co chcesz uzyskać. Pamiętaj, aby zastąpić my-project-with-duet identyfikatorem projektu. Oto przykład:

     Give me the curl command for:
     
     1- Cloud Function running in us-central1 and project my-project-with-duet
     2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
     3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }
     

8. Problem: po wykonaniu wszystkich tych czynności problem nadal występuje.
   • Rozwiązanie: ze względu na niedeterministyczny charakter dużych modeli językowych Duet może wygenerować odpowiedź, która nie będzie działać. Jeśli tak się stanie, skopiuj przykładowe polecenie curl powyżej i spróbuj uruchomić je w terminalu. Pamiętaj, aby zastąpić my-project-with-duet identyfikatorem projektu.

6. Utwórz klienta interfejsu API w postaci aplikacji internetowej.

Użyj Gemini, aby wygenerować plik index.html, który wywołuje punkt końcowy funkcji Cloud Functions rozwiązania ułatwiającego szybsze rozpoczęcie pracy. Następnie wdróż plik index.html w Hostingu Firebase, aby zobaczyć działanie kodu.

1. Generowanie kodu po stronie klienta
   • Wróć do rozmowy z Gemini i wpisz prompta:
     • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
   • Skopiuj plik index.html wygenerowany w odpowiedzi.
     • UWAGA: ten kod będzie potrzebny później, więc zapisz go gdzieś, jeśli obawiasz się, że możesz go zgubić.
   • Zamknij main.py.
2. Utwórz nowy katalog frontend
   • Możesz na przykład zapytać Gemini:
     • What are the console commands to create and navigate to a new frontend directory?
   • Powinny się wyświetlić wyniki takie jak mkdir frontend i cd frontend.
   • Użyj terminala Cloud Shell, aby potwierdzić, że nadal jesteś w katalogu annotate-http-1, i uruchom te polecenia:
     • cd ~/annotate-http-1
     • mkdir frontend
     • cd frontend
3. Sprawdź, czy w terminalu Cloud Shell logujesz się w odpowiednim projekcie.
   • Możesz na przykład zapytać Gemini:
     • What is the gcloud command to set my project?
   • Powinien pojawić się wynik podobny do tego: gcloud config set project my-project-with-duet
     • Sprawdź, czy identyfikator projektu jest prawidłowy, a następnie uruchom polecenie w terminalu Cloud Shell.
4. Włącz Firebase
   • Na nowej karcie (nie zamykaj bieżącego edytora Cloud Shell) otwórz stronę https://console.firebase.google.com/.
   • Kliknij Dodaj projekt.
   • Wpisz identyfikator projektu i zaczekaj, aż pojawi się w menu.
   • Kliknij identyfikator projektu.
   • Kliknij Dalej.
   • Kliknij Potwierdź abonament.
   • Kliknij Dalej.
   • Odznacz opcję Włącz Google Analytics w tym projekcie
     .
     • Firebase zaleca korzystanie z Google Analytics, ale w tej aplikacji nie będą one używane.
   • Kliknij Dalej.
   • Zamknij tę kartę i wróć do edytora Cloud Shell.
   • Uwaga: te kroki są potrzebne tylko użytkownikom, którzy wcześniej nie korzystali z Firebase, ale dzięki temu wszyscy mogą postępować w ten sam sposób. Jeśli w przyszłości zrobisz to ponownie, możesz pominąć ten krok.
5. Logowanie się w Firebase w Cloud Shell
   • W terminalu edytora Cloud Shell uruchom polecenie firebase login --no-localhost
   • Otwórz podany adres URL.
     • Kliknij Tak, to polecenie zostało właśnie uruchomione.
     • Kliknij Tak, to jest mój identyfikator sesji.
     • Kliknij Kopiuj.
   • Powrót do terminala edytora Cloud Shell
   • Wklej skopiowaną wartość w terminalu w miejscu, w którym jest napisane: Enter authorization code:
   • Naciśnij klawisz Enter
6. Wdrażanie nowej witryny w Hostingu Firebase
   • Inicjowanie nowego projektu Firebase
     • Możesz na przykład zapytać Gemini:
       • What are the commands to initialize and deploy a new firebase application?
     • Powinny się wyświetlić wyniki podobne do firebase init i firebase deploy wraz z instrukcjami.
     • Istnieje wiele sposobów na wykonanie tej czynności, które Gemini może Ci polecić w zależności od Twoich preferencji. Oto konkretna rekomendacja, której możesz się trzymać:
       • firebase init
         • Za pomocą strzałki w dół przejdź do sekcji Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
           .
           • Naciśnij pasek Space.
           • Naciśnij klawisz Enter
         • Za pomocą strzałki w dół przejdź do sekcji Use an existing project
           .
           • Naciśnij klawisz Enter
         • Jeśli widzisz listę projektów, za pomocą strzałki w dół przejdź do projektu, którego obecnie używasz.
           • Naciśnij klawisz Enter
         • Jeśli poprosimy Cię o Please input the ID of the Google Cloud Project you would like to add Firebase:
           • Wpisz identyfikator projektu.
           • Naciśnij klawisz Enter
         • W przypadku wszystkich pozostałych pytań naciśnij Enter.
       • firebase deploy
7. Ponownie wdróż aplikację, wywołując punkt końcowy Cloud Functions API
   • Poprzednie polecenia powinny utworzyć katalog public z plikiem index.html w katalogu frontend utworzonym wcześniej. W pliku ~/annotate-http-1/frontend/public/index.html należy wprowadzić kolejne zmiany.
   • Otwórz plik index.html.
     • Kliknij ikonę Eksploratora .
     • Kliknij folder frontend.
     • Kliknij folder public.
     • Kliknij plik index.html typu .
   • Wyczyść istniejący plik index.html.
   • Wklej skopiowany wcześniej kod do pliku index.html.
   • Uruchom firebase deploy, aby wdrożyć nową aplikację.
   • Otwórz adres URL Hostingu Firebase, aby sprawdzić, czy działa.
     • Uwaga: aby zobaczyć zmiany, prawdopodobnie musisz odświeżyć stronę.

Rozwiązywanie problemów

Plik index.html powinien wyglądać mniej więcej tak:

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

Jeśli witryna nie działa, sprawdź te kwestie:

1. Problem: 404 (nie znaleziono). Czy adres URL użyty w metodzie fetch zawiera my-project-with-duet?
   • Rozwiązanie: zastąp my-project-with-duet identyfikatorem projektu.
2. Problem: 404 (nie znaleziono). Czy w adresie URL używanym w metodzie fetch brakuje pełnego adresu URL?
   • Rozwiązanie: pamiętaj, aby w metodzie fetch podać pełny adres URL. Powinna ona wyglądać mniej więcej tak: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
3. Problem: odpowiedź na prompt nadal nie jest do końca prawidłowa.
   • Rozwiązanie: spróbuj użyć innego prompta, w którym podasz Gemini jeszcze więcej wskazówek dotyczących tego, co chcesz uzyskać. Pamiętaj, aby zastąpić my-project-with-duet identyfikatorem projektu. Oto przykład:
     • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
4. Problem: czy Twoja witryna została wdrożona, ale nie działa?
   • Rozwiązanie: ze względu na niedeterministyczny charakter dużych modeli językowych Duet może wygenerować odpowiedź, która nie będzie działać. W takim przypadku skopiuj przykład index.html powyżej i spróbuj ponownie wdrożyć go za pomocą polecenia firebase deploy. Pamiętaj, aby zastąpić my-project-with-duet identyfikatorem projektu.

7. (Opcjonalnie) Eksploracja otwarta

1. Użyj Gemini i asystenta w edytorze, aby dodać style CSS do aplikacji, a po zakończeniu ponownie ją wdróż. Jeśli szukasz inspiracji, możesz wypróbować ten prompt:
   • Make this index.html file use material design.
2. Inne czynności, które możesz wypróbować:
   • Wygenerowana witryna powinna działać z dowolnym publicznym http obrazem. Poproś Duet o wyświetlenie obrazu na stronie.

8. (Opcjonalnie) Usuwanie projektu

Jeśli chcesz uniknąć obciążenia konta opłatami za utworzone dziś zasoby, możesz zapytać Duet, jak to zrobić.

1. Wpisz prompta:
   • How can I delete my project?
   • Powinien pojawić się wynik podobny do gcloud projects delete my-project-with-duet.
   • WAŻNE: w poprzednim poleceniu zastąp my-project-with-duet identyfikatorem projektu.
2. Uruchom polecenie gcloud projects delete, aby usunąć wszystkie zasoby utworzone dzisiaj.