Menggunakan Gemini Code Assist untuk menjelajahi dan meningkatkan kualitas Solusi Peringkasan AI Mulai

1. Pengantar

Dalam codelab ini, kita akan melihat Solusi Praktis yang sudah ada, yakni Peringkasan AI, yang menggunakan model Vertex AI untuk meringkas dokumen PDF yang telah diupload ke Google Cloud Storage.

Kemudian, kami akan menggunakan Gemini Code Assist untuk:

• Pahami kode Python yang mendukung Cloud Function yang bertugas mengekstrak teks dari dokumen PDF, meringkasnya, dan menulis hasilnya ke BigQuery.
• Kami akan meminta bantuan Gemini Code Assist selama prosesnya untuk membantu menulis fungsi baru. Kami akan mengembangkan aplikasi Web (Aplikasi Python Flask) dan menjalankan aplikasi secara lokal untuk memverifikasi kode kami.
• Secara opsional, kita juga dapat melihat cara men-deploy aplikasi ini ke Cloud Run dan meningkatkan desain (estetika) aplikasi web menggunakan Desain Material.

Yang akan Anda lakukan ...

• Anda akan men-deploy Solusi Jump Start Peringkasan AI dan memicu alur proses untuk memahami cara kerjanya.
• Kemudian, Anda akan menggunakan Cloud Shell IDE untuk mendownload kode yang ada untuk Solusi Jump Start dan menggunakan Gemini Code Assist untuk memahami kodenya.
• Anda akan menggunakan Gemini Code Assist Cloud Shell IDE guna membuat kode untuk fungsi baru.

Yang akan Anda pelajari ...

• Cara kerja Solusi Praktis Ringkasan AI.
• Cara menggunakan Gemini Code Assist untuk beberapa tugas developer seperti pembuatan kode, penyelesaian kode, dan perangkuman kode.

Yang Anda butuhkan ...

• Browser web Chrome
• Akun Gmail
• Project Cloud dengan penagihan diaktifkan
• Gemini Code Assist diaktifkan untuk Project Cloud Anda

Lab ini ditujukan bagi developer dari semua level, termasuk para pemula. Meskipun aplikasi contoh menggunakan bahasa Python, Anda tidak harus familier dengan pemrograman Python untuk memahami maksudnya. Fokus kita memahami kemampuan Gemini Code Assist bagi developer.

2. Penyiapan

Bagian ini membahas semua hal yang perlu Anda lakukan untuk memulai lab ini.

Aktifkan Gemini untuk Cloud di Project Google Cloud

Sekarang kami akan mengaktifkan Gemini untuk Cloud di Project Google Cloud. Ikuti langkah-langkah berikut:

1. Buka https://console.cloud.google.com dan pastikan Anda telah memilih Project Google Cloud yang akan digunakan untuk lab ini. Klik ikon Buka Gemini yang Anda lihat di kanan atas.

2. Jendela percakapan Gemini untuk Cloud akan terbuka di sisi kanan konsol. Klik tombol Enable seperti yang ditunjukkan di bawah ini. Jika tombol Enable tidak ada dan yang terlihat adalah antarmuka Chat, Anda mungkin telah mengaktifkan Gemini untuk Cloud untuk project tersebut dan Anda dapat langsung melanjutkan ke langkah berikutnya.

3. Setelah diaktifkan, Anda dapat menguji Gemini untuk Cloud dengan mengajukan satu atau dua kueri. Beberapa contoh kueri ditampilkan, tetapi Anda dapat mencoba, misalnya, What is Cloud Run?

Gemini untuk Cloud akan merespons dengan menjawab pertanyaan Anda. Anda dapat mengklik ikon di pojok kanan atas untuk menutup jendela percakapan Gemini untuk Cloud.

Aktifkan Gemini Code Assist di Cloud Shell IDE

Kita akan menggunakan Cloud Shell IDE, lingkungan pengembangan berbasis Code OSS yang terkelola sepenuhnya, untuk mengikuti codelab ini secara penuh. Kita perlu mengaktifkan dan mengonfigurasi Code Assist di Cloud Shell IDE dan langkah-langkahnya dijelaskan di bawah ini:

1. Buka ide.cloud.google.com. Mungkin perlu waktu beberapa saat sampai IDE muncul, jadi harap bersabar.
2. Klik tombol Cloud Code - Sign in di status bar bawah seperti yang ditunjukkan. Otorisasi plugin seperti yang ditunjukkan. Jika Anda melihat "Cloud Code - no project" di status bar, pilih opsi tersebut, lalu pilih Project Google Cloud tertentu dari daftar project yang akan dikerjakan.

3. Klik tombol Gemini di pojok kanan bawah seperti yang ditunjukkan dan pilih untuk terakhir kalinya project Google Cloud yang benar. Jika Anda diminta untuk mengaktifkan Cloud AI Companion API, harap lakukan dan lanjutkan.
4. Setelah memilih project Google Cloud, pastikan Anda dapat melihatnya di pesan status Cloud Code di status bar dan Code Assist juga telah diaktifkan di sebelah kanan status bar seperti yang ditunjukkan di bawah:

Gemini Code Assist siap digunakan.

Gemini Code Assist juga tersedia di IDE lokal seperti Visual Studio Code, atau JetBrains IntelliJ. Alat ini juga tersedia di Google Cloud Workstation. Codelab ini berfokus pada Cloud Shell IDE sebagai cara agar semua orang menggunakan lingkungan yang sama, tetapi jangan ragu untuk mencoba penyiapan favorit Anda dan melihat link ini untuk detail selengkapnya.

Opsional: Jika tidak melihat Gemini di status bar di bagian kanan bawah, Anda harus mengaktifkan Gemini di Cloud Code. Sebelum Anda melakukannya, pastikan Gemini telah diaktifkan di IDE dengan membuka Cloud Code Extension → Settings, lalu masukkan teks Gemini seperti yang ditunjukkan di bawah. Pastikan kotak centang sudah dipilih. IDE Anda harus dimuat ulang.Tindakan ini akan mengaktifkan Gemini di Cloud Code, dan ikon Gemini di status bar akan muncul di IDE Anda.

3. Men-deploy Solusi Praktis Ringkasan AI

1. Buka solusi peringkasan dokumen AI generatif
2. Klik Deploy

• Jika project Anda tidak mengaktifkan penagihan, aktifkan penagihan.
• Pilih us-central1 sebagai region.
• Klik deploy.
• Proses ini dapat memerlukan waktu hingga 15 menit.
• Anda tidak perlu membuat perubahan apa pun, tetapi jangan ragu untuk mempelajari deployment Solusi Jump Start dengan mengklik tombol JELAJAHI SOLUSI INI di halaman detail deployment solusi.

4. Mulai percakapan dengan Gemini

Kita akan mulai dengan mempelajari cara memulai percakapan dengan Gemini. Gemini tersedia sebagai asisten chat dalam Cloud Shell IDE sebagai bagian dari ekstensi Cloud Code di VS Code. Anda dapat menampilkannya dengan mengklik tombol Gemini di menu navigasi sebelah kiri. Cari ikon Gemini di toolbar navigasi sebelah kiri, lalu klik ikon tersebut.

Tindakan ini akan menampilkan panel Chat: GeminiI di dalam Cloud Shell IDE dan Anda dapat melakukan percakapan dengan Gemini untuk mendapatkan bantuan di Google Cloud.

Mari kita gunakan panel percakapan Gemini untuk memasukkan perintah dan melihat respons dari Gemini. Masukkan perintah berikut:

What is Cloud Run? 

Gemini akan merespons dengan memberikan detail tentang Cloud Run. Perintah adalah pertanyaan atau pernyataan yang menjelaskan bantuan yang Anda butuhkan. Perintah dapat menyertakan konteks dari kode yang sudah ada yang dianalisis Google Cloud untuk memberikan respons yang lebih bermanfaat atau lengkap. Untuk mengetahui informasi selengkapnya tentang cara menulis perintah agar dapat menghasilkan respons yang baik, baca Menulis perintah yang lebih baik untuk Gemini di Google Cloud.

Cobalah contoh perintah berikut atau perintah buatan Anda sendiri untuk mengajukan pertanyaan tentang 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?

Perhatikan ikon tempat sampah di bagian atas - ini adalah cara Anda untuk mereset konteks histori chat Code Assist. Perhatikan juga bahwa interaksi chat ini bersifat kontekstual dengan file yang sedang Anda kerjakan di IDE.

5. Mendownload Cloud Function Solusi Jump Start di Cloud Code

Dengan asumsi bahwa Anda berada di Cloud Shell Editor, ikuti langkah-langkah berikut:

• Klik Cloud Code
• Catatan: Bergantung pada ukuran layar Anda, mungkin diperlukan satu atau dua langkah.

atau

• Klik Cloud Functions.
• Jika diminta, login atau beri akun Anda otorisasi.
• Klik fungsi webhook.
• Klik ikon Download ke ruang kerja baru
• 
• Gunakan webhook-1 sebagai nama ruang kerja (harus dijadikan default) atau nama lainnya, lalu klik OK.
• Tindakan ini akan membuka kode di Cloud Shell IDE.

6. Meninjau project yang ada

Solusi Jump Start ini ditampilkan di bawah ini:

Tinjau alur dari fungsi Upload PDF ke Cloud Storage. Cloud Function yang akan dipanggil jika file PDF diupload diberikan dalam file main.py.

Klik file tersebut. Titik entri untuk fungsi cloud adalah fungsi entrypoint, yang pada akhirnya memanggil fungsi cloud_event_entrypoint yang mengekstrak teks dari PDF, lalu memanggil summarization_entrypoint, yang menggunakan Model Vertex AI untuk meringkas dan menulis hasilnya masing-masing ke GCS dan BigQuery.

Tandai semua kode dalam file main.py atau cuplikan kode tertentu. Klik Gemini Chat, lalu berikan perintah berikut: Explain this.

Langkah ini akan memberi Anda penjelasan tentang kode tersebut.

7. Menjalankan contoh operasi

Sesuai dengan diagram arsitektur, kita akan mengupload file ke bucket <PROJECT_ID>_uploads agar Cloud Function dipanggil.

Pastikan Anda memiliki PDF sampel yang dapat diupload dan ingin dijadikan tujuan perangkuman.

• Buka Google Cloud Storage di Konsol Cloud.
• Buka bucket <PROJECT_ID>_uploads. Klik link UPLOAD FILES, lalu upload PDF contoh.

Jika Anda tidak memiliki contoh file PDF, Anda dapat menggunakan salah satu contoh yang telah kami buat. Jalankan perintah berikut dari Cloud Shell:

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

Setelah file berhasil diupload, fungsi cloud webhook akan dipanggil dan akan meringkas teks yang ditemukan dalam dokumen. Output akan ditulis ke set data BigQuery bernama summary_dataset dan di tabel summary_table.

Buat kueri tabel untuk melihat hasil ringkasan.

8. Membuat klien aplikasi web untuk aplikasi

Proses di atas merupakan proses manual langkah demi langkah untuk mengupload PDF yang ingin kita rangkum. Bagaimana dengan membangun front end web untuk aplikasi?

Persyaratan untuk front-end web sederhana:

1. Formulir HTML dasar yang memungkinkan kita untuk memilih dan mengupload file yang perlu diringkas.
2. File pada upload yang berhasil, harus ditulis ke bucket <PROJECT_ID>_uploads, agar fungsi lainnya dapat berfungsi sebagaimana mestinya.

Kita akan menggunakan Python dan framework Flask untuk aplikasi web guna membangunnya dengan bantuan Duet AI.

Mari kita mulai. Kami akan menganggap bahwa Anda masih memiliki ruang kerja yang sama yang terbuka di Cloud Shell IDE.

Tutup semua file dan berikan perintah berikut di jendela Gemini Chat:

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.

Idealnya, ini akan menghasilkan kode seperti berikut:

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)

Simpan kode di atas sebagai app.py di root ruang kerja IDE.

Kita ingin aplikasi berjalan di port 8080 dan menggunakan alamat host 0.0.0.0. Jadi , mari perintah Gemini untuk mengubah pernyataan app.run.

Berikan perintah berikut:

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

Kode Anda akan terlihat seperti ini sekarang:

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)

Selanjutnya, kami ingin index.html juga dibuat. Berikan perintah berikut di jendela Gemini Chat:

Provide the index.html file

Anda akan mendapatkan kode seperti yang diberikan di bawah ini untuk 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>

Kita dapat meminta Gemini untuk memberi tahu kita tempat menyimpan file index.html. Berikan perintah berikut:

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

Perintah ini akan memberikan jawaban yang mirip dengan yang berikut ini:

Lanjutkan dan buat folder bernama {i>template<i} di folder {i>root<i} dan simpan file index.html di dalamnya.

Kami memerlukan penanganan pengecualian di file app.py untuk mengantisipasi jika file tersebut tidak dapat disimpan di bucket Google Cloud Storage. Tetap buka file app.py dan berikan perintah berikut di jendela Gemini Chat.

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

Sekarang ini akan menambahkan beberapa penanganan pengecualian seperti yang ditunjukkan di bawah ini:

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)

Karena kita perlu menampilkan pesan {i>error<i} di index.html, kita juga perlu mengubahnya. Mari minta Gemini untuk melakukannya melalui perintah di bawah:

update the index.html to display the error message

Ini akan memberikan index.html yang diperbarui seperti yang ditunjukkan di bawah:

<!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>

Pastikan bahwa pada setiap langkah di atas, Anda menyimpan perubahan dalam file app.py dan index.html.

app.py tidak memiliki nama bucket yang benar sehingga kita dapat memberikan informasi tersebut kepada Gemini dan memintanya untuk melakukan perubahan. Selain itu, kita harus memberikan project ID untuk instance storage.Client(). Oleh karena itu, berikan beberapa perintah berikut (ganti <PROJECT_ID> dengan Project ID Google Cloud Anda) di jendela Gemini Chat dan terapkan perubahan tersebut:

Perintah 1

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

Perintah 2

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

File app.py akhir terlihat seperti ini (ID project saya ditampilkan di bawah, tetapi idealnya file tersebut adalah file yang sedang Anda kerjakan dan yang telah Anda berikan dalam perintah di atas):

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. Menjalankan aplikasi web secara lokal

Buat lingkungan Python dengan dependensi yang ditentukan dalam file requirements.txt. Buka Palet Perintah di Cloud Shell IDE seperti yang ditunjukkan di bawah ini:

Ketik Python: Create Environment lalu ikuti langkah-langkah untuk membuat Lingkungan Virtual menggunakan (venv), lalu penafsir Python 3.x, dan file requirements.txt. Tindakan ini akan membuat lingkungan yang diperlukan.

Luncurkan Terminal sekarang, seperti yang ditunjukkan di bawah ini:

Berikan perintah berikut di terminal:

python app.py

Aplikasi Flask akan diluncurkan dan Anda akan melihat tampilan seperti ini:

(.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

Buka URL http://127.0.0.1:8080 dan URL akan menampilkan halaman index.html

Upload file dari komputer lokal Anda dan file seharusnya berhasil diproses.

Anda dapat memeriksa rangkuman dengan membuka set data dan tabel BigQuery yang telah kita lihat sebelumnya di lab. Atau, Anda dapat memeriksa bucket Cloud Storage (&lt;PROJECT_ID&gt;_output).

10. (Opsional) Eksplorasi Terbuka - Men-deploy ke Cloud Run

• Anda dapat men-deploy aplikasi ke Cloud Run.
• Minta Gemini Code Assist dengan perintah berikut (Mungkin perlu mencoba beberapa variasi perintah di atas):

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

11. (Opsional) Eksplorasi Terbuka - Menambahkan Gaya CSS

• Gunakan Gemini Code Assist dan asisten dalam editor untuk menambahkan gaya CSS ke aplikasi Anda dan men-deploy aplikasi lagi setelah selesai.
• Buka file index.html dan berikan perintah berikut di Gemini Chat: Can you apply material design styles to this index.html?
• Lihat kodenya dan lihat apakah kodenya berfungsi.

12. Selamat!

Selamat! Anda telah berhasil bekerja dengan Gemini Code Assist dalam sebuah project contoh untuk memahami bagaimana Gemini Code Assist dapat membantu Pembuatan Kode, Penyelesaian Kode, Peringkasan Kode, dan membantu Anda mendapatkan jawaban atas pertanyaan tentang Google Cloud.

13. Dokumen referensi

• Halaman beranda Gemini Code Asssit
• Menggunakan Gemini untuk Bantuan dan Pengembangan AI - Dokumentasi
• Kasus penggunaan Gemini