Mevcut bir uygulamayı keşfetmek ve geliştirmek için Gemini'ı kullanma

1. Genel Bakış

Bu Codelab'de, mevcut bir API arka ucunun üzerinde istemci uygulaması oluşturmak için Gemini'ın nasıl kullanılacağı gösterilecektir.

Öğrenecekleriniz

Bu laboratuvar, Gemini'ı mevcut bir uygulamayla kullanmayı göstermek için tasarlanmıştır. Bu laboratuvarda şunları yapmayı öğreneceksiniz:

AI/ML Image Processing Jump Start Solution'ı dağıtın.
API uygulamasını keşfetmek için Gemini'ı kullanma
API uygulaması için istemci oluşturmak üzere Gemini'ı kullanma

Kurulum - Yeni proje oluşturma

Kuruluş politikalarınıza bağlı olarak bu çözümü doğru şekilde dağıtma olanağınız olmayabilir.

Öneri: Şirket veya okul hesabı yerine tam izinlere sahip olduğunuz bir hesap (ör. kişisel hesap) kullanın.

Not: Yakın zamanda tam izinlere sahip olduğunuz bir proje oluşturduysanız ve bu projede Gemini API'yi etkinleştirdiyseniz bu projeyi kullanmaya devam edebilir ve bu adımı atlayabilirsiniz. Örneğin, kısa süre önce başka bir Gemini codelab'i tamamladıysanız bu adımı atlayabilirsiniz.

Google Cloud Console'a gidin.
Mevcut proje açılır listesini tıklayın.
Yeni Proje'yi tıklayın.
Proje adı ekleyin ve OLUŞTUR'u tıklayın.
- Öneri: Project name ve Project ID değerlerinin aynı olması için benzersiz bir proje adı kullanın.

2. Hızlıca kullanabileceğiniz çözümü dağıtma

Hızlıca kullanılabilen çözümler, Google Cloud'un önceden hazırlanmış çözüm şablonlarıdır. Bu laboratuvarda, Gemini'ın önceden var olan bir uygulamayı geliştirmeye nasıl yardımcı olabileceğini göstermek için bir Jump Start Solution kullanılır.

Yapay Zeka/Makine Öğrenimi Görüntü İşleme Hızlıca Kullanabileceğiniz Çözüm ayrıntıları sayfasına gidin
- Hamburger menüsünü tıklayın
- Ürünler ve çözümler alt menüsünde Hızlıca Kullanabileceğiniz Çözümler'i tıklayın.
- Cloud Functions'da Yapay Zeka/Makine Öğrenimi Görüntü İşleme'yi tıklayın.
DEPLOY'u (Dağıt) tıklayın.
- Projenizde faturalandırma etkin değilse faturalandırmayı etkinleştirin.
- Proje adını onaylayın ve DEVAM'ı tıklayın.
- Bölge olarak us-central1 (Iowa) simgesini seçin.
- Başka girişler istenirse varsayılanları kabul edin.
- DEPLOY'u (DAĞIT) tıklayın.
- Bu işlem 15 dakika kadar sürebilir.
- Herhangi bir değişiklik yapmanız gerekmez ancak Hızlıca Kullanabileceğiniz Çözüm dağıtımını inceleyebilirsiniz.

Sorun giderme

Sorun: Partial deployment. hatasını görüyor musunuz?
- Çözüm: Maalesef bu durumda dağıtımı silmeniz ve baştan başlamanız gerekir. DAĞITIMI SİL düğmesi olmalıdır. Bu düğmeyi tıklayın ve ardından Hızlıca Kullanabileceğiniz Çözümü yeniden dağıtın.

3. Gemini'ı etkinleştirme

Kod düzenleme ortamınızı ayarlama ve Gemini'ı etkinleştirme

Cloud Shell Düzenleyici'ye gidin.
- Google Cloud Console'a dönün.
- Arama çubuğuna Cloud Shell Editor yazın ve açılır listeden Cloud Shell Editor'ı (Cloud Shell Düzenleyici) tıklayın.
- Eski Düzenleyici'yi kullanıyorsanız Yeni Düzenleyici'yi deneyin'i tıklayın.
  - Not: Yeni Düzenleyici'yi deneyin düğmesini görmüyorsanız yeni Düzenleyici'yi kullanıyor olabilirsiniz. Eski düzenleyici çalışır ancak görünümler biraz farklı görünür.
- Yeni Pencerede Aç simgesini tıklayın.
İstenirse hesabınıza giriş yapın veya hesabınızı yetkilendirin.
- Ayarlarınıza bağlı olarak, bu laboratuvar sırasında hesabınızı birkaç kez yetkilendirmeniz istenebilir. Her istendiğinde yetkilendirmeyi seçin.
Alt durum çubuğunda Cloud Code - Sign in (Cloud Code - Oturum aç) düğmesini tıklayın. Eklentiyi talimatlara uygun şekilde yetkilendirin.
İstenirse Google Cloud projesi seçin'i tıklayın ve kullandığınız projeyi seçin
Gemini'ı etkinleştirme
- Cloud Code'u
  - Not: Ekranınızın boyutuna bağlı olarak bir veya iki adım sürebilir.
- YARDIM VE GERİ BİLDİRİM bölümünde Ayarları Değiştir'i tıklayın.
- Tür Gemini: Enable
- Henüz seçilmemişse onay kutusunu işaretleyin .
- IDE'nizi yeniden yükleyin.
- Bu işlem, Cloud Code'da Gemini'ı etkinleştirir ve IDE'nizde Gemini durum çubuğu görünür.
Gösterildiği gibi sağ alt köşedeki Gemini düğmesini tıklayın ve doğru Google Cloud projesini seçin.
- Gemini has not been enabled for your selected project hatası görürseniz. Gemini API'yi etkinleştir'i tıklayın.
Aşağıda gösterildiği gibi, durum çubuğunda solda doğru Google Cloud projesini (proje adınız gösterilir) ve sağda Gemini'ın etkinleştirildiğini gördüğünüzü onaylayın:

4. Cloud Functions kodunu indirme

Kodu indirin ve Gemini'ı kullanarak Hızlıca Kullanabileceğiniz Çözümler ile dağıttığınız kod hakkında daha fazla bilgi edinin.

Başka bir sayfaya gittiyseniz Cloud Code 'u tıklayın.
Cloud Functions'ı tıklayın.
- Proje seçin düğmesini görürseniz bu düğmeyi tıklayın ve üzerinde çalıştığınız projeyi seçin.
- annotate-http işlevini tıklayın.
- Yeni çalışma alanına indir simgesini tıklayın.
Çalışma alanı adı olarak annotate-http-1'i kullanın (varsayılan olmalıdır) ve Tamam'ı tıklayın.
main.py dosyasını açın.
- Gezgin simgesini tıklayın.
- main.py dosyasını tıklayarak açın
Gemini Chat simgesini
- Not: Ekranınızın boyutuna bağlı olarak bir veya iki adım sürebilir.
Gemini'a soru sormayı deneyin. Aşağıdaki gibi bir istem girin:
- What is a Jump Start Solution in Google Cloud?
- Explain this code.

Gemini Chat'i sıfırlama

İstemler, gelecekteki istemleri etkiler. Örneğin, proje kimliğinde veya bölgede yazım hatası yaparsanız bu hatalar gelecekteki istemlere ve yanıtlara yansıtılır. Bu durum, deneyiminizi olumsuz etkileyebilir. Yazım hatası yaptıysanız veya başka bir nedenle geçmişi temizlemek istiyorsanız sohbeti sıfırlamak için çöp kutusu simgesini kullanabilirsiniz.

Düet sohbeti çöp kutusu vurgusunu sıfırlama

5. Mevcut Cloud Functions uç noktasını çağırma

Kodu inceleyin ve Hızlıca Kullanabileceğiniz Çözüm'de dağıttığınız uç noktayı çağırın.

İstemi girin:
- ÖNEMLİ: Aşağıdaki istemde my-project-with-duet yerine proje kimliğinizi yazın.
- 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.
- Şuna benzer bir curl komutu içeren bir yanıt alırsınız:
```
curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
...
```
- Sonraki adımda kullanmak üzere bu curl komutunu kopyalayın.
Komutu yeni bir terminalde test edin.
- Hamburger menüsünü tıklayın
- Terminal'i tıklayın.
- Yeni Terminal'i tıklayın.
- Önceki adımdaki curl komutunu terminale yapıştırın ve komutu çalıştırmak için Enter tuşuna basın.
- Şu şekilde başlayan bir yanıt almanız gerekir:
```
{
    "labelAnnotations": [
    {
    "mid": "/m/0csby",
    "description": "Cloud",
    "score": 0.97885925,
    "topicality": 0.97885925,
...
```
(İsteğe bağlı) Duet'e
- Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

Sorun giderme

Non-determinizm hakkında not: Gemini ve büyük dil modelleri (LLM'ler) tarafından desteklenen diğer ürünler non-deterministiktir. Yani aynı girişle farklı çıkışlar elde edebilirsiniz. Adımları eksiksiz bir şekilde uygulasanız bile komutlar çalışmayabilir. Bu sorun giderme adımları, bu sorunları çözmenize yardımcı olabilir.

Oluşturulan curl komutu aşağıdaki gibi görünmelidir:

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, main.py dosyasındaki TEST_IMAGE öğesini kullanıyor. Bu öğe, Eyfel Kulesi'nin resmi.

Curl komutu sizin için çalışmıyorsa kontrol etmeniz gereken birkaç nokta şunlardır:

Sorun: URL uç noktası .a.run.app içeriyor mu?
- Çözüm: Duet, Cloud Run'a dağıtım yaptığınızı düşünüyor olabilir. Doğru Cloud Functions uç noktasını almak için my-project-with-duet kısmını https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate içindeki proje kimliğinizle değiştirin ve curl komutunda bu uç noktayı kullanın.
Sorun: URL uç noktası my-project-with-duet içeriyor mu?
- Çözüm: my-project-with-duet yerine proje kimliğinizi yazın.
Sorun: URL uç noktasında us-central1 eksik mi?
- Çözüm: URL'nin us-central1 ile başladığından emin olun. Örneğin: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate ile proje kimliğiniz.
Sorun: Kullanılan isteme bağlı olarak, bazen oluşturulan uç nokta cloudfunctions.net/annotate-http veya cloudfunctions.net/annotate gibi görünebilir. URL uç noktasının sonunda /annotate-http/annotate işareti eksik mi?
- Çözüm: URL uç noktasının tam API uygulama yoluyla bittiğinden emin olun cloudfunctions.net/annotate-http/annotate
Sorun: cURL isteği çalışıyor ancak çok fazla bilgi geri alınmıyor. İstek özellik içeriyor mu?
- Çözüm: Bu büyük bir sorun değildir. Hiçbir şeyi değiştirmeden devam ederseniz laboratuvarın geri kalanı çalışmaya devam eder. Daha fazla bilgi almak istiyorsanız Duet'ten cURL isteğine özellik eklemesini isteyebilirsiniz.
Sorun: Yanıtlar yanlış veya koda özgü bağlamdan yoksun görünüyor. Cloud Shell Düzenleyici'de Gemini Chat'i mi kullanıyorsunuz?
- Çözüm: main.py dosyasını açmayı ve Cloud Shell Düzenleyici'de Gemini Sohbet'i kullanırken isteminizle ilgili kodu vurgulamayı deneyin. Google Cloud'daki Gemini asistanının bağlamı farklıdır. Bu nedenle, farklı yanıtlar verir.

Sorun: İstem yanıtı hâlâ tam olarak doğru değil.

Çözüm: Gemini'a ne üretmesini istediğiniz konusunda daha fazla yönlendirme yaptığınız farklı bir istem deneyin. my-project-with-duet yerine proje kimliğinizi yazdığınızdan emin olun. Örnek:

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" }

Sorun: Tüm bu sorun giderme adımlarından sonra hâlâ çalışmıyor.
- Çözüm: LLM'lerin deterministik olmayan yapısı nedeniyle Duet'in çalışmayacak bir yanıt oluşturması mümkündür. Bu durumda, yukarıdaki örnek curl komutunu kopyalayıp terminalde çalıştırmayı deneyin. my-project-with-duet yerine proje kimliğinizi yazdığınızdan emin olun.

6. API için web uygulaması istemcisi oluşturma

Jump Start Solution Cloud Functions uç noktasını çağıran bir index.html dosyası oluşturmak için Gemini'ı kullanın. Ardından, kodu çalışırken görmek için index.html dosyasını Firebase Hosting'e dağıtın.

İstemci tarafı kodunu oluşturma
- Gemini ile etkileşim kutusuna geri dönüp şu istemi girin:
  - 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.
- Yanıtta oluşturulan index.html dosyasını kopyalayın.
  - NOT: Bu koda daha sonra ihtiyacınız olacağından kaybetme ihtimaline karşı bir yere kaydedin.
- Kapat'ı main.py tıklayın.
Yeni bir frontend dizini oluşturun
- Gemini'a şuna benzer bir soru sorabilirsiniz:
  - What are the console commands to create and navigate to a new frontend directory?
- mkdir frontend ve cd frontend gibi sonuçlar görürsünüz.
- Cloud Shell Terminal'i kullanarak annotate-http-1 dizininde olduğunuzu onaylayın ve bu komutları çalıştırın:
  - cd ~/annotate-http-1
  - mkdir frontend
  - cd frontend
Cloud Shell terminalinde doğru projeye giriş yaptığınızı onaylayın.
- Gemini'a şuna benzer bir soru sorabilirsiniz:
  - What is the gcloud command to set my project?
- gcloud config set project my-project-with-duet
  - Proje kimliğinin doğru olduğunu onaylayın ve ardından komutu Cloud Shell terminalinde çalıştırın.
Firebase'i etkinleştirin.
- Yeni bir sekmede (mevcut Cloud Shell Düzenleyicinizi açık bırakın) https://console.firebase.google.com/ adresini ziyaret edin.
- Proje Ekle'yi tıklayın.
- Proje kimliğinizi yazın ve açılır listede görünmesini bekleyin.
- Proje kimliğinizi tıklayın.
- Devam et'i tıklayın.
- Planı onayla'yı tıklayın.
- Devam et'i tıklayın.
- Bu proje için Google Analytics'i etkinleştir'in seçimini kaldırın.
  - Firebase, Google Analytics'i kullanmanızı önerir ancak bu uygulamada kullanılmayacaktır.
- Devam et'i tıklayın.
- Bu sekmeyi kapatıp Cloud Shell Düzenleyici'ye dönün.
- Not: Bu adımlar yalnızca daha önce Firebase'i kullanmamış olan kullanıcılar için gereklidir ancak herkesin aynı yolu izlemesine olanak tanır. Gelecekte bu işlemi tekrar yaparsanız bu adımı atlayabilirsiniz.
Cloud Shell'de Firebase'e giriş yapma
- Cloud Shell Düzenleyici terminalinde firebase login --no-localhost komutunu çalıştırın.
- Belirtilen URL'yi ziyaret edin
  - Evet, bu komutu şimdi çalıştırdım'ı tıklayın.
  - Evet, bu benim oturum kimliğim'i tıklayın.
  - Kopyala'yı tıklayın.
- Cloud Shell Düzenleyici terminaline dönme
- Kopyalanan değeri, terminalde Enter authorization code: yazan yere yapıştırın.
- Enter tuşuna basın
Firebase Hosting'e yeni bir web sitesi dağıtma
- Yeni bir Firebase projesi başlatma
  - Gemini'a şuna benzer bir soru sorabilirsiniz:
    - What are the commands to initialize and deploy a new firebase application?
  - Talimatlarla birlikte firebase init ve firebase deploy gibi sonuçlar görürsünüz.
  - Gemini, tercihlerinize bağlı olarak bu işlemi yapmanın birçok olası yolunu önerebilir. Bu nedenle, izlemeniz için belirli bir öneri sunuyoruz:
    - firebase init
      - Aşağı okla Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
        seçeneğine gidin.
        Space çubuğuna basın
        
        Enter tuşuna basın
      - Aşağı okla Use an existing project
        seçeneğine gidin.
        Enter tuşuna basın
      - Proje listesi görüyorsanız aşağı ok tuşunu kullanarak şu anda kullandığınız projeye gidin.
        
        Enter tuşuna basın
      - Please input the ID of the Google Cloud Project you would like to add Firebase:
        
        Projenizin proje kimliğini girin.
        
        Enter tuşuna basın
      - Kalan tüm istemler için Enter tuşuna basın.
    - firebase deploy
Uygulamanızı Cloud Functions API uç noktasına yapılan bir çağrıyla yeniden dağıtın.
- Önceki komutlar, daha önce oluşturduğunuz frontend dizininin içinde index.html dosyası bulunan bir public dizini oluşturmalıdır. Birkaç değişikliği ~/annotate-http-1/frontend/public/index.html dosyasında yapmanız gerekir.
- index.html dosyasını açın.
  - Gezgin simgesini tıklayın.
  - frontend klasörünü tıklayın.
  - public klasörünü tıklayın.
  - index.html dosyasını tıklayın.
- Mevcut index.html dosyasını boşaltın.
- Daha önce kopyaladığınız kodu index.html dosyasına yapıştırın.
- Yeni uygulamayı dağıtmak için firebase deploy komutunu çalıştırın.
- Çalışıp çalışmadığını görmek için Firebase Hosting URL'sini ziyaret edin.
  - Not: Güncellemelerinizi görmek için web sitesini zorunlu olarak yenilemeniz gerekebilir.

Sorun giderme

index.html dosyası aşağıdaki gibi görünmelidir:

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

Web sitesi sizin için çalışmıyorsa kontrol etmeniz gereken birkaç nokta şunlardır:

Sorun: 404 (Bulunamadı) fetch yönteminde kullanılan URL, my-project-with-duet içeriyor mu?
- Çözüm: my-project-with-duet yerine proje kimliğinizi yazın.
Sorun: 404 (Bulunamadı) fetch yönteminde kullanılan URL'de tam URL eksik mi?
- Çözüm: fetch yöntemine tam URL'yi eklediğinizden emin olun. Şöyle görünmelidir: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
Sorun: İstem yanıtı hâlâ tam olarak doğru değil.
- Çözüm: Gemini'a ne üretmesini istediğiniz konusunda daha fazla yönlendirme yaptığınız farklı bir istem deneyin. my-project-with-duet yerine proje kimliğinizi yazdığınızdan emin olun. Örnek:
  - 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.
Sorun: Siteniz dağıtıldı ancak çalışmıyor mu?
- Çözüm: LLM'lerin deterministik olmayan yapısı nedeniyle Duet'in çalışmayacak bir yanıt oluşturması mümkündür. Bu durumda, yukarıdaki index.html örneğini kopyalayın ve firebase deploy ile yeniden dağıtmayı deneyin. my-project-with-duet yerine proje kimliğinizi yazdığınızdan emin olun.

7. (İsteğe bağlı) Açık uçlu keşif

Uygulamanıza CSS stilleri eklemek için Gemini'ı ve düzenleyici içi asistanı kullanın. İşiniz bittiğinde uygulamayı tekrar dağıtın. İlham almak istiyorsanız deneyebileceğiniz bir istem örneğini aşağıda bulabilirsiniz:
- Make this index.html file use material design.
Denenecek diğer şeyler:
- Oluşturulan web sitesi, herkese açık tüm http resimlerle çalışmalıdır. Resmi sayfada göstermek için Duet ile çalışın.

8. (İsteğe bağlı) Projeyi silme

Bugün oluşturduğunuz kaynaklar için ücretlendirilmek istemiyorsanız Duet'e bunu nasıl yapacağınızı sorabilirsiniz.

İstemi girin:
- How can I delete my project?
- gcloud projects delete my-project-with-duet gibi bir sonuç görmeniz gerekir.
- ÖNEMLİ: Önceki komuttaki my-project-with-duet yerine proje kimliğinizi yazın.
Bugün oluşturduğunuz tüm kaynakları kaldırmak için gcloud projects delete komutunu çalıştırın.