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

1. Omówienie

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak używać Gemini do tworzenia aplikacji klienckich w oparciu o istniejący backend interfejsu API.

Czego się nauczysz

Ten moduł ma na celu zilustrowanie korzystania z Gemini w istniejącej aplikacji. Z tego modułu nauczysz się:

• Wdróż rozwiązanie ułatwiające szybsze rozpoczęcie pracy z obrazem w AI/ML.
• Używanie Gemini do poznawania aplikacji interfejsu API
• Użyj Gemini do utworzenia klienta aplikacji API

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.

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

Uwaga: jeśli niedawno został przez Ciebie utworzony projekt, w którym masz pełne uprawnienia, i masz już w nim włączony interfejs Gemini API, możesz kontynuować korzystanie z tego projektu i pominąć ten krok. Jeśli na przykład niedawno ukończyłeś(-aś) inne ćwiczenia z programowania w Gemini, możesz pominąć ten krok.

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

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

Rozwiązania ułatwiające szybsze rozpoczęcie pracy to gotowe szablony rozwiązań Google Cloud. W tym module wykorzystano rozwiązanie ułatwiające szybsze rozpoczęcie pracy, aby zademonstrować, jak Gemini może pomóc ulepszyć istniejącą aplikację.

1. Otwórz stronę z informacjami o rozwiązaniu ułatwiającego szybsze rozpoczęcie pracy z przetwarzaniem obrazów w AI/ML
   • Kliknij menu z 3 kreskami.
   • W sekcji Produkty i podmenu rozwiązań, kliknij Rozwiązania ułatwiające szybsze rozpoczęcie pracy.
   • Kliknij Przetwarzanie obrazu za pomocą AI/ML w Cloud Functions.
2. Kliknij WDRÓŻ.
   • Jeśli w Twoim projekcie nie włączono płatności, włącz płatności.
   • Potwierdź nazwę projektu i kliknij DALEJ.
   • Wybierz us-central1 (Iowa) jako region.
   • Jeśli pojawi się prośba o podanie innych danych, zaakceptuj wartości domyślne.
   • Kliknij WDRÓŻ.
   • Może to potrwać do 15 minut.
   • Nie musisz wprowadzać żadnych zmian, ale możesz samodzielnie 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: niestety oznacza to prawdopodobnie, że należy usunąć wdrożenie i zacząć od nowa. Powinien być tam widoczny przycisk USUŃ WDROŻENIE. Kliknij ten przycisk, a następnie wdróż ponownie rozwiązanie ułatwiające szybsze rozpoczęcie pracy.

3. Włącz Gemini

Skonfiguruj środowisko edycji kodu i włącz 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 używasz starszej wersji edytora, kliknij Wypróbuj nowy edytor.
     • Uwaga: jeśli nie widzisz przycisku Wypróbuj nowy edytor, prawdopodobnie używasz już nowego edytora. Starsza wersja edytora 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 Twoich ustawień w tym module kilka razy poprosimy Cię o autoryzację konta. Za każdym razem trzeba będzie wtedy wybrać autoryzację.
3. Kliknij przycisk Cloud Code – Zaloguj się na dolnym pasku stanu, 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 potrwać jeden lub dwa kroki.
   • Kliknij Zmień ustawienia w sekcji POMOC I OPINIA.
   • Typ: Gemini: Enable
   • Zaznacz pole wyboru (jeśli nie jest jeszcze zaznaczone)
   • Załaduj ponownie IDE.
   • Spowoduje to włączenie Gemini w Cloud Code i w Twoim IDE pojawi się pasek stanu Gemini.
6. W prawym dolnym rogu kliknij przycisk Gemini, jak pokazano na ilustracji, i wybierz odpowiedni projekt Google Cloud.
   • Jeśli pojawia się błąd: Gemini has not been enabled for your selected project. Kliknij Włącz interfejs Gemini API.
7. Sprawdź, czy po lewej stronie, na pasku stanu, na pasku stanu widzisz właściwy projekt Google Cloud (zobaczysz nazwę swojego projektu) i czy Gemini jest włączony:

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 jesteś aktualnie zalogowanym użytkownikiem, kliknij Cloud Code .
2. Kliknij Cloud Functions.
   • Jeśli widzisz przycisk Wybierz projekt, kliknij go i wybierz projekt, z którym pracujesz.
   • Kliknij funkcję annotate-http.
   • Kliknij ikonę Pobierz do nowego obszaru roboczego .
3. Jako nazwy obszaru roboczego wpisz 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 potrwać jeden lub dwa kroki.
6. Spróbuj zadać pytanie Gemini. Wpisz prompt, na przykład:
   • What is a Jump Start Solution in Google Cloud?
   • Explain this code.

Resetuję Gemini Chat

Prośby mają wpływ na przyszłe prompty. Jeśli na przykład popełnisz literówkę w identyfikatorze lub regionie projektu, pojawią się one w kolejnych promptach i odpowiedziach, co może mieć negatywny wpływ na działanie usługi. Jeśli popełnisz literówkę lub zechcesz wyczyścić historię z jakiegokolwiek innego powodu, możesz zresetować czat, klikając ikonę kosza.

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

Zbadaj kod i wywołaj punkt końcowy wdrożony w rozwiązaniu Jump Start.

1. Wpisz prompt:
   • WAŻNE: zastąp my-project-with-duet w poniższym komunikacie 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 do użycia w następnym kroku
2. Przetestuj polecenie w nowym terminalu
   • Kliknij menu z 3 kreskami.
   • Kliknij Terminal.
   • Kliknij Nowy terminal.
   • Wklej w terminalu polecenie curl z poprzedniego kroku i naciśnij Enter, aby je uruchomić
   • Otrzymasz odpowiedź podobną do tej:

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

3. (Opcjonalnie) Zrób to z innym obrazem z publicznego internetu. W tym celu użyj polecenia Duet, na przykład:
   • 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 korzystające z dużych modeli językowych (LLM) nie są deterministyczne: przy tych samych danych wejściowych możesz otrzymywać różne wyniki. Nawet jeśli dokładnie wykonasz te czynności, możesz nie otrzymać działających poleceń. Podane niżej wskazówki powinny Ci pomóc.

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 pola TEST_IMAGE w pliku main.py, który jest obrazem wieży Eiffla.

Jeśli polecenie curl nie działa, oto kilka rzeczy, które warto sprawdzić:

1. Problem: czy punkt końcowy adresu URL zawiera atrybut .a.run.app?
   • Rozwiązanie: Duet może sądzić, że wdrażasz wdrożenie 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żyć go w poleceniu curl.
2. Problem: czy punkt końcowy adresu URL zawiera atrybut my-project-with-duet?
   • Rozwiązanie: zastąp my-project-with-duet identyfikatorem projektu.
3. Problem: czy w punkcie końcowym adresu URL brakuje parametru us-central1?
   • Rozwiązanie: upewnij się, że adres URL zaczyna się od us-central1, np. https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate to identyfikator projektu.
4. Problem: w zależności od użytego prompta czasami wygenerowany punkt końcowy może wyglądać tak: cloudfunctions.net/annotate-http lub cloudfunctions.net/annotate. Czy na końcu adresu końcowego adresu URL brakuje znaku /annotate-http/annotate?
   • Rozwiązanie: upewnij się, że punkt końcowy adresu URL kończy się pełną ścieżką aplikacji interfejsu API cloudfunctions.net/annotate-http/annotate
5. Problem: żądanie cURL działa, ale nie otrzymuje wielu informacji. Czy prośba obejmuje funkcje?
   • Rozwiązanie: to nie jest poważny problem. Jeśli będziesz kontynuować bez wprowadzania zmian, pozostałe elementy modułu będą nadal działać. Jeśli chcesz otrzymać więcej informacji, możesz poprosić Duet o dodanie funkcji do żądania cURL.
6. Problem: odpowiedzi wydają się nieprawidłowe lub nie mają kontekstu dotyczącego kodu. Czy używasz Gemini Chat w edytorze Cloud Shell?
   • Rozwiązanie: podczas korzystania z Gemini Chat w edytorze Cloud Shell spróbuj otworzyć plik main.py i wyróżnić kod związany z promptem. Asystent Gemini w Google Cloud ma różne konteksty, co prowadzi do różnych odpowiedzi.
7. Problem: odpowiedź na prompt nadal nie jest poprawna.
   • Rozwiązanie: wypróbuj inny prompt, w którym wskażesz Gemini jeszcze dokładniej, co ma generować. 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 wypróbowaniu wszystkich rozwiązań problem nadal nie działa.
   • Rozwiązanie: ze względu na niedeterministyczny charakter LLM istnieje możliwość, że Duet wygenerował odpowiedź, która nie zadziała. Jeśli tak się stanie, skopiuj podane wyżej przykładowe polecenie curl i spróbuj uruchomić je w terminalu. Pamiętaj, aby zastąpić my-project-with-duet identyfikatorem projektu.

6. Tworzenie klienta aplikacji internetowej na potrzeby interfejsu API

Użyj Gemini, aby wygenerować plik index.html, który będzie wywoływał punkt końcowy funkcji Jump Start w Cloud Functions. Następnie wdróż plik index.html w Hostingu Firebase, aby zobaczyć, jak działa kod.

1. Generowanie kodu po stronie klienta
   • Wróć do okna czatu z Gemini i wpisz prompt:
     • 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 go zgubisz.
   • Zamknij aplikację main.py.
2. Utwórz nowy katalog frontend
   • Możesz zapytać Gemini na przykład:
     • What are the console commands to create and navigate to a new frontend directory?
   • Powinny wyświetlić się wyniki takie jak mkdir frontend i cd frontend.
   • Użyj terminala Cloud Shell, aby sprawdzić, czy nadal jesteś w katalogu annotate-http-1, i uruchom te polecenia:
     • cd ~/annotate-http-1
     • mkdir frontend
     • cd frontend
3. Sprawdź, czy korzystasz z odpowiedniego projektu w terminalu Cloud Shell
   • Możesz zapytać Gemini na przykład:
     • 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 (pozostaw otwarty edytor Cloud Shell) wejdź na https://console.firebase.google.com/
   • Kliknij Dodaj projekt.
   • Wpisz identyfikator projektu i poczekaj, aż pojawi się w menu.
   • Kliknij identyfikator projektu
   • Kliknij Dalej.
   • Kliknij Potwierdź abonament.
   • Kliknij Dalej.
   • Odznacz Włącz Google Analytics dla tego projektu.
     • Firebase zaleca korzystanie z Google Analytics, ale nie będą one używane w tej aplikacji.
   • Kliknij Dalej.
   • Zamknij tę kartę i wróć do edytora Cloud Shell
   • Uwaga: te czynności należy wykonać tylko w przypadku użytkowników, którzy jeszcze nie korzystali z Firebase, ale dzięki temu wszyscy mogą przejść tę samą ścieżkę. Jeśli zrobisz to ponownie w przyszłości, możesz pominąć ten krok.
5. Zaloguj się do Firebase w Cloud Shell
   • W terminalu edytora Cloud Shell uruchom polecenie firebase login --no-localhost
   • Przejdź pod podany adres URL
     • Kliknij Tak, właśnie uruchomiłem to polecenie.
     • Kliknij Tak, to jest mój identyfikator sesji.
     • Kliknij Kopiuj.
   • Wróć do terminala edytora Cloud Shell
   • Wklej skopiowaną wartość w terminalu w miejsce: Enter authorization code:
   • Naciśnij klawisz Enter
6. Wdrażanie nowej witryny w Hostingu Firebase
   • Zainicjowanie nowego projektu Firebase
     • Możesz zapytać Gemini na przykład:
       • What are the commands to initialize and deploy a new firebase application?
     • Powinny wyświetlić się wyniki takie jak firebase init i firebase deploy wraz z instrukcjami.
     • Gemini może to zrobić na wiele sposobów w zależności od Twoich preferencji, dlatego oto konkretna rekomendacja, którą warto zastosować:
       • firebase init
         • Strzałka w dół do Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
           • Naciśnij pasek Space
           • Naciśnij klawisz Enter
         • Strzałka w dół do Use an existing project
           • Naciśnij klawisz Enter
         • Jeśli widzisz listę projektów, naciśnij strzałkę w dół 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 swojego projektu.
           • Naciśnij klawisz Enter
         • Aby wyświetlić wszystkie pozostałe prompty, naciśnij Enter
       • firebase deploy
7. Wdróż ponownie aplikację za pomocą wywołania punktu końcowego interfejsu Cloud Functions API
   • Poprzednie polecenia powinny utworzyć katalog public z plikiem index.html znajdującym się w utworzonym wcześniej katalogu frontend. Plik ~/annotate-http-1/frontend/public/index.html to miejsce, w którym należy wprowadzić kilka następnych zmian.
   • Otwórz plik index.html.
     • Kliknij ikonę Eksploratora .
     • Kliknij folder frontend
     • Kliknij folder public
     • Kliknij plik (index.html).
   • Opróżnij istniejący plik index.html.
   • Wklej skopiowany wcześniej kod do pliku index.html.
   • Uruchom firebase deploy, aby wdrożyć nową aplikację
   • Wejdź na stronę Hostingu Firebase, aby sprawdzić, czy to działa.
     • Uwaga: aby zobaczyć zmiany, prawdopodobnie będzie trzeba 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 strona nie działa, sprawdź te kwestie:

1. Problem: 404 (nie znaleziono) czy 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żytym w metodzie fetch brakuje pełnego adresu URL?
   • Rozwiązanie: pamiętaj o podaniu pełnego adresu URL w metodzie fetch. Powinien 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 poprawna.
   • Rozwiązanie: wypróbuj inny prompt, w którym wskażesz Gemini jeszcze dokładniej, co ma generować. 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: jeśli witryna jest wdrożona, ale nie działa?
   • Rozwiązanie: ze względu na niedeterministyczny charakter LLM istnieje możliwość, że Duet wygenerował odpowiedź, która nie zadziała. Jeśli tak się stanie, skopiuj przykład index.html powyżej i spróbuj wdrożyć go ponownie za pomocą narzędzia firebase deploy. Pamiętaj, aby zastąpić my-project-with-duet identyfikatorem projektu.

7. (Opcjonalnie) Otwórz eksplorację

1. Za pomocą Gemini i asystenta w edytorze możesz dodać style CSS do swojej aplikacji, a gdy skończysz, ponownie ją wdrożyć. Jeśli szukasz inspiracji, oto przykładowy prompt, który możesz wypróbować:
   • Make this index.html file use material design.
2. Inne rzeczy, które możesz wypróbować:
   • Wygenerowana witryna powinna działać z dowolnym publicznym obrazem http. Użyj usługi Duet, aby wyświetlić obraz na stronie.

8. (Opcjonalnie) Usuń projekt

Jeśli nie chcesz naliczyć opłat za utworzone dziś zasoby, możesz zapytać Duet, jak to zrobić.

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