Korzystanie z Gemini Code Assist do odkrywania i ulepszania podsumowywania za pomocą AI

1. Wprowadzenie

W tym ćwiczeniu w Codelabs przyjrzymy się istniejącemu rozwiązaniu ułatwiającemu szybsze rozpoczęcie pracy, czyli podsumowywaniu za pomocą AI, które wykorzystuje modele Vertex AI do podsumowywania dokumentów PDF przesłanych do Google Cloud Storage.

Następnie użyjemy Gemini Code Assist, aby:

• Poznaj kod Pythona, który obsługuje funkcję Cloud Functions wyodrębniającą tekst z dokumentu PDF, podsumowującą go i zapisującą wyniki w BigQuery.
• W trakcie całego procesu będziemy korzystać z pomocy Gemini Code Assist, aby pisać nowe funkcje. Utworzymy aplikację internetową (aplikację Flask w Pythonie) i uruchomimy ją lokalnie, aby zweryfikować kod.
• Opcjonalnie możemy też wdrożyć tę aplikację internetową w Cloud Run i ulepszyć jej wygląd za pomocą Material Design.

Co musisz zrobić...

• Wdrożysz rozwiązanie ułatwiające szybsze rozpoczęcie podsumowywania przy użyciu AI i uruchomisz przepływ procesu, aby zrozumieć, jak ono działa.
• Następnie użyjesz środowiska IDE Cloud Shell, aby pobrać istniejący kod rozwiązania ułatwiającego szybsze rozpoczęcie pracy, i wykorzystasz Gemini Code Assist do zrozumienia tego kodu.
• Użyjesz Gemini Code Assist w środowisku IDE Cloud Shell, aby wygenerować kod nowej funkcji.

Czego się nauczysz...

• Jak działa rozwiązanie ułatwiające szybsze rozpoczęcie pracy z podsumowywaniem przy użyciu AI.
• Jak korzystać z Gemini Code Assist w przypadku różnych zadań programistycznych, takich jak generowanie, uzupełnianie i streszczanie kodu.

Co będzie Ci potrzebne...

• przeglądarki Chrome,
• konto Gmail,
• Projekt w chmurze z włączonymi płatnościami
• Usługa Gemini Code Assist jest włączona w Twoim projekcie w Cloud

Ten moduł jest przeznaczony dla deweloperów na wszystkich poziomach zaawansowania, w tym dla początkujących. Chociaż przykładowa aplikacja jest napisana w języku Python, nie musisz znać tego języka, aby zrozumieć, co się dzieje. Skupimy się na zapoznaniu się z możliwościami Gemini Code Assist dla programistów.

2. Konfiguracja

W tej sekcji znajdziesz wszystko, co musisz zrobić, aby rozpocząć ten moduł.

Włącz Gemini w Google Cloud Project

Teraz włączymy Gemini w Cloud w naszym projekcie Google Cloud. Wykonaj te czynności:

1. Otwórz https://console.cloud.google.com i upewnij się, że masz wybrany projekt Google Cloud, w którym chcesz pracować w tym module. Kliknij ikonę Otwórz Gemini w prawym górnym rogu.

2. Po prawej stronie konsoli otworzy się okno czatu Gemini w Cloud. Kliknij przycisk Włącz, jak pokazano poniżej. Jeśli nie widzisz przycisku Włącz, a zamiast niego widzisz interfejs czatu, prawdopodobnie masz już włączoną usługę Gemini w Cloud w projekcie i możesz przejść bezpośrednio do następnego kroku.

3. Po włączeniu możesz przetestować Gemini w Cloud, zadając mu kilka pytań. Wyświetlonych jest kilka przykładowych zapytań, ale możesz też wypróbować zapytanie What is Cloud Run?.

Gemini w Cloud odpowie na Twoje pytanie. Aby zamknąć okno czatu Gemini w Cloud, w prawym górnym rogu kliknij ikonę .

Włączanie Gemini Code Assist w środowisku IDE Cloud Shell

W pozostałej części tego samouczka będziemy używać Cloud Shell IDE, w pełni zarządzanego środowiska programistycznego opartego na Code OSS. Musimy włączyć i skonfigurować Code Assist w środowisku IDE Cloud Shell. Poniżej znajdziesz instrukcje:

1. Otwórz stronę ide.cloud.google.com. Wyświetlenie środowiska IDE może zająć trochę czasu, więc uzbrój się w cierpliwość.
2. Na pasku stanu u dołu kliknij przycisk Cloud Code – zaloguj się, jak pokazano na ilustracji. Autoryzuj wtyczkę zgodnie z instrukcjami. Jeśli na pasku stanu widzisz „Cloud Code – brak projektu”, wybierz tę opcję, a następnie wybierz z listy projekt Google Cloud, z którym chcesz pracować.

3. Kliknij przycisk Gemini w prawym dolnym rogu, jak pokazano, i jeszcze raz wybierz właściwy projekt w chmurze Google. Jeśli pojawi się prośba o włączenie interfejsu Cloud AI Companion API, zrób to i przejdź dalej.
4. Po wybraniu projektu Google Cloud sprawdź, czy jest on widoczny w komunikacie o stanie Cloud Code na pasku stanu oraz czy po prawej stronie na pasku stanu masz włączoną funkcję Code Assist, jak pokazano poniżej:

Usługa Gemini Code Assist jest gotowa do użycia.

Gemini Code Assist jest też dostępny w lokalnych środowiskach IDE, takich jak Visual Studio Code czy JetBrains IntelliJ. Jest też dostępna w Cloud Workstations. Ten przewodnik skupia się na środowisku Cloud Shell IDE jako sposobie na zapewnienie wszystkim użytkownikom tego samego środowiska, ale możesz też wypróbować swoją ulubioną konfigurację. Więcej informacji znajdziesz pod tym linkiem.

Opcjonalnie: jeśli nie widzisz Gemini na pasku stanu w prawym dolnym rogu, musisz włączyć Gemini w Cloud Code. Zanim to zrobisz, upewnij się, że Gemini jest włączony w IDE. W tym celu otwórz rozszerzenie Cloud Code → Ustawienia, a następnie wpisz tekst Gemini, jak pokazano poniżej. Sprawdź, czy pole wyboru jest zaznaczone. Należy ponownie załadować IDE.Włączy to Gemini w Cloud Code, a ikona Gemini na pasku stanu pojawi się w IDE.

3. Wdrażanie rozwiązania ułatwiającego szybsze rozpoczęcie pracy z podsumowywaniem z użyciem AI

1. Otwórz rozwiązanie do podsumowywania dokumentów z użyciem generatywnej AI
2. Kliknij Wdróż.

• Jeśli w projekcie nie włączono płatności, włącz je.
• Jako region wybierz us-central1.
• Kliknij Wdróż.
• 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, klikając przycisk ZAPOZNAJ SIĘ Z TYM ROZWIĄZANIEM na stronie szczegółów wdrożenia rozwiązania.

4. Czat z Gemini

Zacznijmy od nauki czatowania z Gemini. Gemini jest dostępny jako asystent czatu w środowisku IDE Cloud Shell w ramach rozszerzenia Cloud Code w VS Code. Aby go otworzyć, kliknij przycisk Gemini na pasku nawigacyjnym po lewej stronie. Na pasku narzędzi nawigacyjnych po lewej stronie znajdź ikonę Gemini  i kliknij ją.

Spowoduje to wyświetlenie panelu Czat: GeminiI w środowisku IDE Cloud Shell. Możesz czatować z Gemini, aby uzyskać pomoc dotyczącą Google Cloud.

Użyjmy panelu rozmowy z Gemini, aby wpisać prompta i wyświetlić odpowiedź Gemini. Wpisz ten prompt:

What is Cloud Run? 

Gemini powinien odpowiedzieć, podając szczegóły dotyczące Cloud Run. Prompty to pytania lub stwierdzenia opisujące, w czym potrzebujesz pomocy. Prompty mogą zawierać kontekst z istniejącego kodu, który Google Cloud analizuje, aby udzielać bardziej przydatnych lub pełniejszych odpowiedzi. Więcej informacji o pisaniu promptów, które generują dobre odpowiedzi, znajdziesz w artykule Pisanie lepszych promptów dla Gemini w Google Cloud.

Wypróbuj te prompty lub dowolne inne, aby zadawać pytania o Google Cloud:

• What is the difference between Cloud Run and Cloud Functions?
• What services are available on Google Cloud to run containerized workloads?
• What are the best practices to optimize costs while working with Google Cloud Storage?

U góry zobaczysz ikonę kosza na śmieci – to sposób na zresetowanie kontekstu historii czatu Code Assist. Pamiętaj też, że ta rozmowa na czacie jest powiązana z plikami, nad którymi pracujesz w IDE.

5. Pobieranie funkcji Cloud Functions z rozwiązania Jump Start w Cloud Code

Jeśli korzystasz z edytora Cloud Shell, wykonaj te czynności:

• Kliknij Cloud Code .
• Uwaga: w zależności od rozmiaru ekranu może to wymagać 1 lub 2 kroków.

lub

• Kliknij Cloud Functions.
• Jeśli pojawi się taka prośba, zaloguj się lub autoryzuj swoje konto.
• Kliknij funkcję webhook.
• Kliknij ikonę Pobierz do nowego obszaru roboczego .
• 
• Użyj nazwy obszaru roboczego webhook-1 (powinna być domyślna) lub dowolnej innej nazwy i kliknij OK.
• Spowoduje to otwarcie kodu w środowisku IDE Cloud Shell.

6. Sprawdź istniejący projekt

To rozwiązanie ułatwiające szybsze rozpoczęcie pracy jest pokazane poniżej:

Sprawdź przepływ danych od funkcji przesyłania plików PDF do Cloud Storage. Funkcja w Cloud Functions, która zostanie wywołana po przesłaniu pliku PDF, jest podana w pliku main.py.

Kliknij ten plik. Punktem wejścia funkcji w Cloud Functions jest funkcja entrypoint, która ostatecznie wywołuje funkcję cloud_event_entrypoint wyodrębniającą tekst z pliku PDF, a następnie wywołuje funkcję summarization_entrypoint, która wykorzystuje modele Vertex AI do podsumowania i zapisania wyników odpowiednio w GCS i BigQuery.

Zaznacz cały kod w pliku main.py lub dowolny fragment kodu. Kliknij Gemini Chat i wpisz ten prompt: Explain this.

Powinno to wyświetlić wyjaśnienie kodu.

7. Uruchamianie przykładowego przebiegu

Zgodnie z diagramem architektury prześlemy plik do zasobnika <PROJECT_ID>_uploads, aby wywołać funkcję w Cloud Functions.

Upewnij się, że masz gotowy przykładowy plik PDF, który możesz przesłać i dla którego chcesz uzyskać podsumowanie.

• W konsoli Cloud otwórz Google Cloud Storage.
• Otwórz zasobnik <PROJECT_ID>_uploads. Kliknij link PRZEŚLIJ PLIKI i prześlij przykładowy plik PDF.

Jeśli nie masz przykładowego pliku PDF, możesz użyć jednego z naszych przykładów. W Cloud Shell uruchom to polecenie:

gsutil cp \
    gs://arxiv-dataset/arxiv/cmp-lg/pdf/9410/9410009v1.pdf \
    gs://<PROJECT_ID>_uploads/

Po przesłaniu pliku zostanie wywołana funkcja chmury webhook, która podsumuje tekst znaleziony w dokumencie. Dane wyjściowe zostaną zapisane w zbiorze danych BigQuery o nazwie summary_dataset i w tabeli summary_table.

Wyślij zapytanie do tabeli, aby zobaczyć wyniki podsumowania.

8. Utwórz klienta aplikacji internetowej dla aplikacji.

Powyższy proces to ręczny sposób przesyłania pliku PDF, który ma zostać podsumowany. A może utworzyć interfejs internetowy aplikacji?

Wymagania dotyczące interfejsu internetowego są proste:

1. Podstawowy formularz HTML, który umożliwia wybór i przesłanie pliku, który ma zostać podsumowany.
2. Po przesłaniu plik powinien zostać zapisany w buckecie <PROJECT_ID>_uploads, aby pozostałe funkcje działały prawidłowo.

Do stworzenia tego rozwiązania przy pomocy Duet AI użyjemy Pythona i platformy Flask do tworzenia aplikacji internetowych.

Zaczynajmy! Zakładamy, że w środowisku IDE Cloud Shell masz nadal otwarty ten sam obszar roboczy.

Zamknij wszystkie pliki i wpisz w oknie Gemini Chat ten prompt:

Write a Python Flask application that has a couple of routes:
The root route / should serve the index.html page using the render_template framework. The /upload route should accept a file being uploaded and write that file to a Cloud Storage bucket.

W idealnej sytuacji kod powinien wyglądać tak:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

Zapisz powyższy kod jako app.py w katalogu głównym obszaru roboczego IDE.

Chcemy, aby aplikacja działała na porcie 8080 i korzystała z adresu hosta 0.0.0.0, więc poprośmy Gemini o zmodyfikowanie instrukcji app.run.

Wpisz ten prompt:

Modify the app.py to run on port 8080 and host address 0.0.0.0

Kod powinien teraz wyglądać tak:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

Chcemy też, aby wygenerowany został plik index.html. Wpisz w oknie Gemini Chat ten prompt:

Provide the index.html file

Powinien on zawierać kod podobny do tego poniżej w przypadku pliku index.html.

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

Możemy poprosić Gemini o wskazanie miejsca, w którym należy zapisać plik index.html. Wpisz ten prompt:

Since this is using the render_template framework, where should this file be saved?

Powinna wyświetlić się odpowiedź podobna do tej:

Utwórz folder o nazwie templates w folderze głównym i zapisz w nim plik index.html.

Chcielibyśmy, aby w pliku app.py była obsługa wyjątków na wypadek, gdyby nie udało się zapisać pliku w zasobniku Google Cloud Storage. Pozostaw otwarty plik app.py i wpisz w oknie czatu z Gemini ten prompt:

modify the app.py to have exception handling in the upload() function. The success or failure should be returned to the index page.

Powinno to teraz dodać obsługę wyjątków, jak pokazano poniżej:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client().bucket('your-bucket-name')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

Ponieważ musimy wyświetlić komunikat o błędzie w pliku index.html, musimy go też zmodyfikować. Poprośmy Gemini o wykonanie tego zadania za pomocą prompta poniżej:

update the index.html to display the error message

Powinien się pojawić zaktualizowany plik index.html, jak pokazano poniżej:

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  {% if error %}
    <p style="color: red;">{{ error }}</p>
  {% endif %}
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

Upewnij się, że na każdym z powyższych etapów zapisujesz zmiany odpowiednio w plikach app.py i index.html.

app.py nie ma prawidłowej nazwy zasobnika, więc możemy przekazać te informacje Gemini i poprosić o wprowadzenie zmian. Musimy też podać identyfikator projektu dla instancji storage.Client(). Wpisz w oknie czatu Gemini te 2 prompty (zastąp <PROJECT_ID> identyfikatorem projektu Google Cloud) i wprowadź zmiany:

Prompt 1

My bucket name is gemini-for-devs-demo_uploads, please change the code to use that.

Prompt 2

My project id is gemini-for-devs-demo, please change the storage.Client() to use that.

Ostateczny plik app.py wygląda tak (poniżej podaję identyfikator mojego projektu, ale w Twoim przypadku powinien to być identyfikator projektu, nad którym pracujesz i który został podany w powyższym promcie):

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client(project='gcp-experiments-349209').bucket('gcp-experiments-349209_uploads')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

9. Lokalne uruchamianie aplikacji internetowej

Utwórz środowisko Pythona ze zależnościami zdefiniowanymi w pliku requirements.txt. Otwórz paletę poleceń w IDE Cloud Shell, jak pokazano poniżej:

Wpisz Python: Create Environment, a następnie wykonaj czynności, aby utworzyć środowisko wirtualne za pomocą (venv), a potem interpretera Pythona 3.x i pliku requirements.txt. Spowoduje to utworzenie wymaganego środowiska.

Uruchom teraz terminal, jak pokazano poniżej:

Wpisz w terminalu to polecenie:

python app.py

Aplikacja Flask powinna się uruchomić i powinien pojawić się ekran podobny do tego:

(.venv) romin@cloudshell:~/webhook-2 (gcp-experiments-349209)$ python app.py 
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:8080
 * Running on http://10.88.0.3:8080
Press CTRL+C to quit
 * Restarting with watchdog (inotify)
 * Debugger is active!
 * Debugger PIN: 989-296-833

Otwórz adres URL http://127.0.0.1:8080. Powinna się wyświetlić strona index.html.

Prześlij plik z komputera lokalnego. Powinien zostać przetworzony prawidłowo.

Podsumowanie możesz sprawdzić, przechodząc do zbioru danych i tabeli BigQuery, które były widoczne wcześniej w tym module. Możesz też sprawdzić zasobnik Cloud Storage (<PROJECT_ID>_output).

10. (Opcjonalnie) Eksploracja otwarta – wdrażanie w Cloud Run

• Aplikację możesz wdrożyć w Cloud Run.
• Zadaj Gemini Code Assist pytanie, używając tego prompta (może być konieczne wypróbowanie kilku jego wersji):

I don't want to build a container image but deploy directly from source. What is the gcloud command for that?

11. (Opcjonalnie) Otwórz eksplorację – dodaj style CSS

• Użyj Gemini Code Assist i asystenta w edytorze, aby dodać style CSS do aplikacji, a po zakończeniu ponownie ją wdrożyć.
• Otwórz plik index.html i wpisz w Gemini Chat ten prompt: Can you apply material design styles to this index.html?
• Sprawdź kod i zobacz, czy działa.

12. Gratulacje!

Gratulacje! Udało Ci się skorzystać z Gemini Code Assist w projekcie przykładowym, aby dowiedzieć się, jak może on pomagać w generowaniu, uzupełnianiu i podsumowywaniu kodu oraz w uzyskiwaniu odpowiedzi na pytania dotyczące Google Cloud.

13. Dokumentacja

• Strona główna Gemini Code Assist
• Korzystanie z Gemini do pomocy w zakresie AI i tworzenia – dokumentacja
• Zastosowania Gemini