Yapay Zeka Özetleme, Hızlı Başlangıç Çözümü'nü keşfetmek ve geliştirmek için Gemini Code Assist'i kullanma

1. Giriş

Bu codelab'de, Google Cloud Storage'a yüklenen PDF belgelerini özetlemek için Vertex AI modellerini kullanan mevcut bir Jump Start çözümü olan AI Summarization'ı inceleyeceğiz.

Ardından, Gemini Code Assist'i kullanarak:

• PDF belgesinden metni çıkarma, özetleme ve sonuçları BigQuery'ye yazma işlemlerini yapan Cloud Function'ı destekleyen Python kodunu anlayın.
• Yeni işlevler yazmaya yardımcı olması için süreç boyunca Gemini Code Assist'ten yararlanacağız. Bir web uygulaması (Python Flask uygulaması) geliştireceğiz ve kodumuzu doğrulamak için uygulamayı yerel olarak çalıştıracağız.
• İsteğe bağlı olarak, bu uygulamayı Cloud Run'da dağıtmayı ve web uygulamasının tasarımını (estetik) Materyal Tasarım'ı kullanarak iyileştirmeyi de düşünebiliriz.

Yapacaklarınız...

• Nasıl çalıştığını anlamak için Yapay Zeka Özetleme Hızlı Başlangıç Çözümü'nü dağıtacak ve süreç akışını tetikleyeceksiniz.
• Ardından, Jump Start Solution'ın mevcut kodunu indirmek için Cloud Shell IDE'yi kullanacak ve kodu anlamak için Gemini Code Assist'ten yararlanacaksınız.
• Yeni bir işlev için kod oluşturmak üzere Gemini Code Assist Cloud Shell IDE'yi kullanacaksınız.

Öğrenecekleriniz...

• Yapay Zeka Özetleme Hızlıca Kullanabileceğiniz Çözümünün işleyiş şekli
• Kod oluşturma, kodu tamamlama ve kodu özetleme gibi çeşitli geliştirici görevleri için Gemini Code Assist'i kullanma

İhtiyacınız olanlar...

• Chrome web tarayıcısı
• Gmail hesabı
• Faturalandırmanın etkin olduğu bir Cloud projesi
• Cloud projeniz için Gemini Code Assist'in etkinleştirilmesi

Bu laboratuvar, yeni başlayanlar da dahil olmak üzere her seviyeden geliştiriciye yöneliktir. Örnek uygulama Python dilinde olsa da neler olduğunu anlamak için Python programlamayı bilmeniz gerekmez. Bu oturumda, geliştiriciler için Gemini Code Assist'in özelliklerini tanımaya odaklanacağız.

2. Kurulum

Bu bölümde, laboratuvarı kullanmaya başlamak için yapmanız gereken her şey açıklanmaktadır.

Google Cloud projesinde Cloud için Gemini'ı etkinleştirme

Şimdi Google Cloud projemizde Cloud için Gemini'ı etkinleştireceğiz. Aşağıdaki adımları uygulayın:

1. https://console.cloud.google.com adresini ziyaret edin ve bu laboratuvarda çalışmayı planladığınız Google Cloud projesini seçtiğinizden emin olun. Sağ üstte gördüğünüz Gemini'ı Aç simgesini tıklayın.

2. Cloud için Gemini sohbet penceresi, konsolun sağ tarafında açılır. Aşağıda gösterildiği gibi Etkinleştir düğmesini tıklayın. Etkinleştir düğmesini görmeyip bunun yerine bir sohbet arayüzü görüyorsanız proje için Gemini for Cloud'u daha önce etkinleştirmiş olabilirsiniz. Bu durumda doğrudan sonraki adıma geçebilirsiniz.

3. Etkinleştirildikten sonra Gemini for Cloud'a bir veya iki sorgu sorarak bu özelliği deneyebilirsiniz. Birkaç örnek sorgu gösterilir ancak What is Cloud Run? gibi bir sorgu da deneyebilirsiniz.

Cloud için Gemini, sorunuzun yanıtını verir. Cloud için Gemini sohbet penceresini kapatmak üzere sağ üst köşedeki simgesini tıklayabilirsiniz.

Cloud Shell IDE'de Gemini Code Assist'i etkinleştirme

Bu codelab'in geri kalanında, tamamen yönetilen bir Code OSS tabanlı geliştirme ortamı olan Cloud Shell IDE'yi kullanacağız. Cloud Shell IDE'de Code Assist'i etkinleştirip yapılandırmamız gerekiyor. Adımlar aşağıda verilmiştir:

1. ide.cloud.google.com adresini ziyaret edin. IDE'nin görünmesi biraz zaman alabilir. Lütfen bekleyin.
2. Alt durum çubuğunda Cloud Code - Sign in (Cloud Code - Oturum aç) düğmesini tıklayın. Eklentiyi talimatlara uygun şekilde yetkilendirin. Durum çubuğunda "Cloud Code - no project" (Cloud Code - proje yok) ifadesini görürseniz bu ifadeyi ve ardından çalışmayı planladığınız projeler listesinden belirli bir Google Cloud projesini seçin.

3. Gösterildiği gibi sağ alt köşedeki Gemini düğmesini tıklayın ve doğru Google Cloud projesini son bir kez daha seçin. Cloud AI Companion API'yi etkinleştirmeniz istenirse lütfen etkinleştirin ve devam edin.
4. Google Cloud projenizi seçtikten sonra, durum çubuğundaki Cloud Code durum mesajında projenizi görebildiğinizden ve sağ tarafta, durum çubuğunda Code Assist'in etkinleştirildiğinden emin olun (aşağıdaki resimde gösterildiği gibi).

Gemini Code Assist kullanıma hazır!

Gemini Code Assist, Visual Studio Code veya JetBrains IntelliJ gibi yerel IDE'lerde de kullanılabilir. Google Cloud Workstations'da da kullanılabilir. Bu codelab'de, herkesin aynı ortamı kullanmasını sağlamak için Cloud Shell IDE'ye odaklanılmıştır. Ancak istediğiniz kurulumu deneyebilir ve daha fazla bilgi için bu bağlantıyı inceleyebilirsiniz.

İsteğe bağlı: Sağ alttaki durum çubuğunda Gemini'ı görmüyorsanız Cloud Code'da Gemini'ı etkinleştirmeniz gerekir. Bunu yapmadan önce Cloud Code Uzantısı → Ayarlar'a gidip aşağıdaki şekilde Gemini metnini girerek Gemini'ın IDE'de etkinleştirildiğinden emin olun. Onay kutusunun işaretli olduğundan emin olun. IDE'nizi yeniden yüklemeniz gerekir.Bu işlem, Cloud Code'da Gemini'ı etkinleştirir ve durum çubuğundaki Gemini simgesi IDE'nizde görünür.

3. Yapay Zeka Özetleme Hızlıca Kullanabileceğiniz Çözümünü dağıtma

1. Üretken yapay zeka ile belge özetleme çözümüne gidin.
2. Dağıt'ı tıklayın.

• Projenizde faturalandırma etkin değilse faturalandırmayı etkinleştirin.
• Bölge olarak us-central1'i seçin.
• Dağıt'ı tıklayın.
• Bu işlem 15 dakika kadar sürebilir.
• Herhangi bir değişiklik yapmanız gerekmez ancak çözüm dağıtımı ayrıntıları sayfasındaki BU ÇÖZÜMÜ KEŞFEDİN düğmesini tıklayarak Jump Start Solution dağıtımını inceleyebilirsiniz.

4. Gemini ile sohbet edin

İlk olarak Gemini ile nasıl sohbet edeceğinizi öğreneceğiz. Gemini, VS Code'daki Cloud Code uzantısının bir parçası olarak Cloud Shell IDE'de sohbet asistanı olarak kullanılabilir. Sol gezinme çubuğundaki Gemini düğmesini tıklayarak Gemini'ı açabilirsiniz. Soldaki gezinme araç çubuğunda Gemini simgesini bulun ve tıklayın.

Bu işlem, Cloud Shell IDE'de Chat: GeminiI bölmesini açar. Google Cloud ile ilgili yardım almak için Gemini ile sohbet edebilirsiniz.

İstem girmek ve Gemini'ın yanıtını görüntülemek için Gemini ile etkileşim bölmesini kullanabiliriz. Aşağıdaki istemi girin:

What is Cloud Run? 

Gemini, Cloud Run ile ilgili ayrıntıları yanıt olarak vermelidir. İstemler, ihtiyacınız olan yardımı açıklayan sorular veya ifadelerdir. İstemler, Google Cloud'un daha faydalı veya eksiksiz yanıtlar sağlamak için analiz ettiği mevcut kodlardan bağlam içerebilir. İyi yanıtlar oluşturmak için istem yazma hakkında daha fazla bilgi edinmek istiyorsanız Google Cloud'da Gemini için daha iyi istemler yazma başlıklı makaleyi inceleyin.

Google Cloud hakkında soru sormak için aşağıdaki örnek istemleri veya kendi istemlerinizi deneyin:

• 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?

En üstteki çöp kutusu simgesine dikkat edin. Bu simge, Code Assist sohbet geçmişinin bağlamını sıfırlamanın yoludur. Bu sohbet etkileşiminin, IDE'de üzerinde çalıştığınız dosyalarla ilgili olduğunu da unutmayın.

5. Cloud Code'da Jump Start Solution Cloud Functions'ı indirme

Cloud Shell Düzenleyici'de olduğunuzu varsayarak aşağıdaki adımları uygulayın:

• Cloud Code'u tıklayın.
• Not: Ekranınızın boyutuna bağlı olarak bir veya iki adım sürebilir.

veya

• Cloud Functions'ı tıklayın.
• İstenirse hesabınıza giriş yapın veya hesabınızı yetkilendirin.
• Webhook işlevini tıklayın.
• Yeni çalışma alanına indir simgesini tıklayın.
• 
• Çalışma alanı adı olarak webhook-1'i (varsayılan olmalıdır) veya başka bir adı kullanıp Tamam'ı tıklayın.
• Bu işlem, kodu Cloud Shell IDE'de açar.

6. Mevcut projeyi inceleyin

Bu Jump Start çözümü aşağıda gösterilmektedir:

PDF yükleme işlevinden Cloud Storage'a kadar olan akışı inceleyin. PDF dosyası yüklendiğinde çağrılacak Cloud Functions işlevi, main.py dosyasında verilmiştir.

Bu dosyayı tıklayın. Cloud işlevinin giriş noktası, PDF'den metni çıkaran entrypoint işlevidir. Bu işlev, sonuçları özetlemek ve sırasıyla GCS ile BigQuery'ye yazmak için Vertex AI modellerini kullanan cloud_event_entrypoint işlevini çağırır.summarization_entrypoint

main.py dosyasındaki tüm kodu veya belirli bir kod snippet'ini vurgulayın. Gemini Chat'i tıklayın ve şu istemi girin: Explain this.

Bu işlem, kodla ilgili bir açıklama gösterir.

7. Örnek çalıştırma gerçekleştirme

Mimari diyagramına göre, Cloud Functions işlevinin çağrılması için <PROJECT_ID>_uploads paketine bir dosya yükleyeceğiz.

Yükleyebileceğiniz ve özetlenmesini istediğiniz bir örnek PDF dosyanızın olduğundan emin olun.

• Cloud Console'da Google Cloud Storage'a gidin.
• <PROJECT_ID>_uploads paketine gidin. DOSYA YÜKLE bağlantısını tıklayın ve örnek bir PDF yükleyin.

Örnek PDF dosyanız yoksa oluşturduğumuz örneklerden birini kullanabilirsiniz. Cloud Shell'de aşağıdaki komutu çalıştırın:

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

Dosya başarıyla yüklendikten sonra webhook bulut işlevi çağrılır ve dokümandaki metni özetler. Çıkış, summary_dataset adlı BigQuery veri kümesine ve summary_table tablosuna yazılır.

Özetin sonuçlarını görmek için tabloya sorgu gönderin.

8. Uygulama için bir web uygulaması istemcisi oluşturun.

Yukarıdaki işlem, özetlenmesini istediğimiz PDF'yi yüklemek için manuel olarak adım adım uygulanan bir işlemdir. How about building a web front-end to the application?

Web ön ucu için gerekenler basittir:

1. Özetlenmesi gereken dosyayı seçip yüklememize olanak tanıyan temel bir HTML formu.
2. Dosya, başarılı bir yüklemenin ardından <PROJECT_ID>_uploads paketine yazılmalıdır. Böylece işlevlerin geri kalanı olduğu gibi çalışır.

Bu özelliği Duet AI'ın yardımıyla geliştirmek için Python ve web uygulamaları için Flask çerçevesini kullanacağız.

Haydi başlayalım. Cloud Shell IDE'de aynı çalışma alanının açık olduğunu varsayacağız.

Tüm dosyaları kapatın ve Gemini Chat penceresinde aşağıdaki istemi girin:

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.

İdeal olarak bu işlem sonucunda aşağıdaki gibi bir kod oluşturulmalıdır:

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)

Yukarıdaki kodu IDE çalışma alanının kök dizininde app.py olarak kaydedin.

Uygulamanın 8080 bağlantı noktasında çalışmasını ve 0.0.0.0 ana makine adresini kullanmasını istiyoruz. Bu nedenle , Gemini'dan app.run ifadesini değiştirmesini isteyelim.

Aşağıdaki istemi girin:

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

Kodunuz artık aşağıdaki gibi görünmelidir:

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)

Ardından, index.html dosyasının da oluşturulmasını istiyoruz. Gemini Chat penceresinde aşağıdaki istemi girin:

Provide the index.html file

Bu işlem, index.html için aşağıda verilen kodu sağlar.

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

Gemini'dan index.html dosyasını nereye kaydedeceğimizi söylemesini isteyebiliriz. Aşağıdaki istemi girin:

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

Aşağıdakine benzer bir yanıt vermelidir:

Kök klasörde templates adlı bir klasör oluşturun ve index.html dosyasını bu klasöre kaydedin.

Dosyanın Google Cloud Storage paketine kaydedilememesi durumunda app.py dosyasında bazı istisna işleme işlemleri yapmak istiyoruz. app.py dosyasını açık tutun ve Gemini Chat penceresinde aşağıdaki istemi girin.

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

Bu işlem, aşağıda gösterildiği gibi bazı istisna işleme işlevleri ekler:

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)

Hata mesajını index.html dosyasında göstermemiz gerektiğinden bu dosyayı da değiştirmemiz gerekiyor. Gemini'a aşağıdaki istemi kullanarak bunu yapmasını isteyelim:

update the index.html to display the error message

Bu işlem sonucunda, aşağıda gösterildiği gibi güncellenmiş bir index.html dosyası elde edilir:

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

Yukarıdaki adımların her birinde, değişiklikleri sırasıyla app.py ve index.html dosyasına kaydettiğinizden emin olun.

app.py doğru paket adına sahip değil. Bu nedenle, bu bilgiyi Gemini'a verip değişiklikleri yapmasını isteyebiliriz. Ayrıca, storage.Client() örneği için proje kimliğini de sağlamamız gerekir. Bu nedenle, Gemini Chat penceresinde aşağıdaki istemleri verin (<PROJECT_ID> yerine Google Cloud proje kimliğinizi girin) ve değişiklikleri uygulayın:

İstem 1

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

2. istem

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

Son app.py dosyası aşağıdaki gibi görünür (proje kimliğim aşağıda gösterilmiştir ancak ideal olarak üzerinde çalıştığınız ve yukarıdaki istemde verdiğiniz kimlik olmalıdır):

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. Web uygulamasını yerel olarak çalıştırma

requirements.txt dosyasında tanımlanan bağımlılıklarla bir Python ortamı oluşturun. Cloud Shell IDE'de aşağıdaki resimde gösterildiği gibi komut paletine gidin:

Python: Create Environment yazın ve ardından (venv) kullanarak sanal ortam oluşturma, Python 3.x yorumlayıcısı ve requirements.txt dosyası oluşturma adımlarını uygulayın. Bu işlem, gerekli ortamı oluşturur.

Terminali aşağıdaki şekilde başlatın:

Terminalde aşağıdaki komutu verin:

python app.py

Flask uygulaması başlatılmalı ve aşağıdakine benzer bir ekran görmelisiniz:

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

http://127.0.0.1:8080 URL'sini ziyaret edin. index.html sayfası gösterilmelidir.

Yerel makinenizden bir dosya yükleyin. Bu dosya başarıyla işlenmelidir.

Özetlemeyi kontrol etmek için laboratuvarın önceki bölümlerinde gördüğümüz BigQuery veri kümesine ve tablosuna gidebilirsiniz. Alternatif olarak, Cloud Storage paketini (<PROJECT_ID>_output) inceleyebilirsiniz.

10. (İsteğe bağlı) Açık uçlu keşif - Cloud Run'a dağıtma

• Uygulamayı Cloud Run'a dağıtabilirsiniz.
• Gemini Code Assist'e aşağıdaki istemi girin (Yukarıdaki istemin birkaç farklı versiyonunu denemeniz gerekebilir):

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

11. (İsteğe bağlı) Keşfi açın - CSS stilleri ekleyin

• Uygulamanıza CSS stilleri eklemek için Gemini Code Assist'i ve düzenleyici içi asistanı kullanın. İşiniz bittiğinde uygulamayı tekrar dağıtın.
• index.html dosyasını açın ve Gemini Chat'te şu istemi girin: Can you apply material design styles to this index.html?
• Kodu inceleyin ve çalışıp çalışmadığına bakın.

12. Tebrikler!

Tebrikler. Gemini Code Assist'in kod oluşturma, kod tamamlama ve kod özetleme konusunda nasıl yardımcı olabileceğini ve Google Cloud ile ilgili sorularınıza nasıl yanıt bulabileceğinizi anlamak için örnek bir projede Gemini Code Assist'i başarıyla kullandınız.

13. Referans belgeleri

• Gemini Code Assist ana sayfası
• Yapay Zeka Yardımı ve Geliştirme için Gemini'ı Kullanma - Dokümanlar
• Gemini kullanım alanları