Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

1. Genel Bakış

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

Öğrenecekleriniz

Bu laboratuvarın amacı, Gemini'ı mevcut bir uygulamada kullanmayı göstermektir. Bu laboratuvarda aşağıdakileri nasıl yapacağınızı öğreneceksiniz:

AI/Makine Öğrenimi Görüntü İşleme Hızlı Başlangıç Çözümü'nü 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şturun

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

Öneri: Şirket veya okul hesabı yerine tüm izinlere (kişisel hesap gibi) sahip olduğunuz bir hesabı kullanın

Not: Yakın zamanda tüm izinlere sahip olduğunuz bir proje oluşturduysanız ve bu projede Gemini API zaten etkinse bu projeyi kullanmaya devam edip bu adımı atlayabilirsiniz. Örneğin, yakın zamanda başka bir Gemini codelab'ini tamamladıysanız bu adımı atlayabilirsiniz.

Google Cloud Console'a gidin.
Mevcut proje açılır menüsünü tıklayın.
Yeni Proje'yi tıklayın.
Bir proje adı ekleyin ve CREATE'i (OLUŞTUR) tıklayın
- Öneri: Project name ve Project ID öğelerinin aynı olması için benzersiz bir proje adı kullanın.

2. Jump Start Çözümünü Dağıtma

Jump Start Çözümleri, Google Cloud'un önceden oluşturulmuş çözüm şablonlarıdır. Bu laboratuvarda, Gemini'ın mevcut bir uygulamayı geliştirmeye nasıl yardımcı olabileceğini göstermek için bir Jump Start Çözümü kullanılmaktadır.

AI/ML Görüntü İşleme Jump Start Çözüm ayrıntıları sayfasına gidin
- Hamburger menüyü tıklayın
- Ürünler ve çözümleri alt menüsünden Hemen Başlayın'ı tıklayın.
- Cloud Functions'da AI/ML Görüntü İşleme'yi tıklayın.
DAĞIT'ı 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)'i seçin.
- Başka bir giriş istenirse varsayılanları kabul edin.
- DAĞIT'ı tıklayın.
- Bu işlem 15 dakika sürebilir.
- Herhangi bir değişiklik yapmanız gerekmiyor. Yine de Jump Start Çözümü dağıtımını dilediğiniz zaman inceleyebilirsiniz.

Sorun giderme

Sorun: Partial deployment. şeklinde bir hata görüyor musunuz?
- Çözüm: Maalesef bu durum dağıtımı silmeniz ve baştan başlamanız gerektiği anlamına gelir. DAĞITIMI SİL yazan bir düğme bulunur. Bu düğmeyi tıklayın ve ardından Jump Start Çözümü'nü yeniden dağıtın.

3. Gemini'ı etkinleştir

Kod düzenleme ortamınızı kurun ve Gemini'ı etkinleştirin

Cloud Shell Düzenleyici'ye gidin
- Google Cloud Console'a dönün
- Arama çubuğuna Cloud Shell Editor yazıp açılır listeden Cloud Shell Düzenleyici'yi 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 muhtemelen yeni Düzenleyici'yi zaten kullanıyorsunuzdur. Eski Düzenleyici çalışır ancak görünümler farklı görünecektir.
- Yeni pencerede aç simgesini tıklayın.
İstenirse giriş yapın veya hesabınızı yetkilendirin.
- Ayarlarınıza bağlı olarak bu laboratuvarda hesabınızı birkaç kez yetkilendirmeniz istenebilir. Sorulduğunda her seferinde Yetkilendir'i seçin.
Gösterilen durum çubuğunda Cloud Code - Oturum aç düğmesini tıklayın. Talimatlara göre eklentiyi yetkilendirin. .
İstenirse Google Cloud projesi seçin'i tıklayın ve kullandığınız projeyi seçin
Gemini'ı etkinleştir
- Cloud Code'u
  - Not: Ekranınızın boyutuna bağlı olarak, bu işlem 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
- Onay kutusunu işaretleyin (seçili değilse)
- 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österilen şekilde 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. Gemini API'yi etkinleştir'i tıklayın.
Sol tarafta doğru Google Cloud projesini görebildiğinizi (projenizin adını görürsünüz), sağ tarafta Gemini'ın etkin olduğunu ve durum çubuğunda aşağıda gösterildiği gibi yer aldığını onaylayın:

4. Cloud Functions işlevi kodunu indirme

Kodu indirin ve Jump Start Çözümleri ve dağıttığınız kod hakkında daha fazla bilgi edinmek için Gemini'ı kullanın.

Sayfadan çıktıysanız 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 tıklayın.
- Not: Ekranınızın boyutuna bağlı olarak, bu işlem bir veya iki adım sürebilir. .
Gemini'a soru sormayı deneyin. Şuna benzer bir istem girin:
- What is a Jump Start Solution in Google Cloud?
- Explain this code.

Gemini Chat sıfırlanıyor

İstemler gelecekteki istemleri etkiler. Örneğin, proje kimliğinde ya da bölgede yazım hatası yaparsanız, bunlar gelecekteki istemlerde ve yanıtlarda da ilerlemeye devam eder ve 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 sohbetinde öne çıkanları sıfırla

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

Kodu keşfedin ve Jump Start Çözümü'nde 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 yanıt almalısı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üyü tıklayın
- Terminal'i tıklayın.
- Yeni Terminal'i tıklayın.
- Önceki adımda kullandığınız 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 alırsınız:
```
{
    "labelAnnotations": [
    {
    "mid": "/m/0csby",
    "description": "Cloud",
    "score": 0.97885925,
    "topicality": 0.97885925,
...
```
(İsteğe bağlı) Duet'e aşağıdaki gibi bir istem girerek bu işlemi herkese açık internetten başka bir resimle yapabilirsiniz:
- Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

Sorun giderme

Belirsizlikle ilgili not: Gemini ve büyük dil modelleri (LLM) tarafından desteklenen diğer ürünler deterministik değildir. Yani aynı girdi verildiğinde farklı çıkışlar alabilirsiniz. Adımları mükemmel bir şekilde uygulasanız bile çalışan komutlar alamayabilirsiniz. Buradaki sorun giderme adımları, sorununuzu çözmeye yardımcı olacaktır.

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, Eyfel Kulesi'nin resmi olan main.py dosyasında TEST_IMAGE kullanıyor.

curl komutu çalışmıyorsa kontrol etmeniz gereken birkaç şey vardır:

Sorun: URL uç noktasında .a.run.app var mı?
- Çözüm: Duet, Cloud Run'a dağıtım yaptığınızı düşünebilir. Doğru Cloud Functions uç noktasını elde etmek ve curl komutunda bunu kullanmak için my-project-with-duet öğesini https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate içindeki proje kimliğinizle değiştirin.
Sorun: URL uç noktasında my-project-with-duet var mı?
- Çö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 proje kimliğinizle).
Sorun: Kullanılan isteme bağlı olarak, bazen oluşturulan uç nokta cloudfunctions.net/annotate-http veya cloudfunctions.net/annotate gibi görünür. URL uç noktasının sonunda /annotate-http/annotate eksik mi?
- Çözüm: URL uç noktasının, cloudfunctions.net/annotate-http/annotate tam API uygulama yoluyla bittiğinden emin olun
Sorun: cURL isteği çalışıyor ancak fazla bilgi geri gelmiyor. İstek özellik içeriyor mu?
- Çözüm: Bu büyük bir sorun değildir. Hiçbir değişiklik yapmadan devam ederseniz laboratuvarın geri kalanı çalışmaya devam eder. Daha fazla bilgiyi tekrar almak isterseniz Duet'ten cURL isteğine özellik eklemesini isteyebilirsiniz.
Sorun: Yanıtlar yanlış görünüyor veya koda özgü bağlam bilgisi yok gibi görünüyor. Gemini Chat'i Cloud Shell Düzenleyici'de kullanıyor musunuz?
- Çözüm: Cloud Shell Düzenleyici'de Gemini Chat'i kullanırken main.py dosyasını açıp isteminizle ilgili kodu vurgulamayı deneyin. Google Cloud genelindeki Gemini asistan farklı bağlamlara sahiptir. Bu da farklı yanıtlar sağlar.

Sorun: Hızlı yanıt hâlâ pek doğru değil.

Çözüm: Gemini'a ne üretmesini istediğiniz konusunda daha fazla yön vermek için farklı bir istem deneyin. my-project-with-duet yerine proje kimliğinizi girdiğinizden 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ına rağmen hâlâ çalışmıyor.
- Çözüm: LLM'lerin deterministik olmayan yapısı nedeniyle Duet, çalışmayacak bir yanıt oluşturmuş olabilir. Bu durumda, yukarıdaki örnek curl komutunu kopyalayıp terminalde çalıştırmayı deneyin. my-project-with-duet yerine proje kimliğinizi girdiğinizden emin olun.

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

Jump Start Çözümü Cloud Functions işlevi uç noktasını çağıran bir index.html dosyası oluşturmak için Gemini'ı kullanın. Ardından, kodun nasıl çalıştığını görmek için index.html dosyasını Firebase Hosting'e dağıtın.

İstemci tarafı kodunu oluşturun
- Gemini sohbet kutusuna geri dönün ve ş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 kod daha sonra gerekli olacağından endişeleniyorsanız kodu bir yere kaydedin.
- Kapat: main.py.
Yeni bir frontend dizini oluşturun
- Gemini'a şöyle sorular sorabilirsiniz:
  - What are the console commands to create and navigate to a new frontend directory?
- mkdir frontend ve cd frontend gibi sonuçlar göreceksiniz.
- Hâlâ annotate-http-1 dizininde olduğunuzu onaylamak için Cloud Shell terminalini kullanın ve şu 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 şöyle sorular 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 Cloud Shell terminalinde komutu çalıştırın.
Firebase'i etkinleştirme
- 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'in kullanılmasını önerir, ancak bu uygulamada kullanılmaz.
- 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ış kullanıcılar için gereklidir, ancak bu sayede herkes aynı yolu izleyebilir. Bu işlemi daha sonra tekrar yaparsanız bu adımı atlayabilirsiniz.
Cloud Shell'de Firebase'e giriş yapın
- Cloud Shell Editor terminalinde firebase login --no-localhost komutunu çalıştırın
- Sağlanan URL'yi ziyaret edin
  - Evet, az önce bu komutu çalıştırdım'ı tıklayın.
  - Evet, bu benim oturum kimliğim'i tıklayın.
  - Kopyala'yı tıklayın.
- Cloud Shell Editor terminaline dön
- Kopyalanan değeri, Enter authorization code: yazan terminale yapıştırın.
- Enter tuşuna basın
Firebase Hosting'e yeni bir web sitesi dağıtın
- Yeni bir Firebase projesini başlatın
  - Gemini'a şöyle sorular sorabilirsiniz:
    - What are the commands to initialize and deploy a new firebase application?
  - Talimatlarla birlikte firebase init ve firebase deploy gibi sonuçlar göreceksiniz.
  - Tercihlerinize bağlı olarak Gemini'ın bunu yapmanın birçok olası yolu olduğundan uygulamanız gereken özel bir öneri:
    - firebase init
      - Aşağı okla Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
        gidin
        Space çubuğuna basın
        
        Enter tuşuna basın
      - Aşağı okla Use an existing project
        gidin
        Enter tuşuna basın
      - Projelerin listesini görüyorsanız aşağı ok tuşuna basarak ş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: istenirse
        
        Projenizin proje kimliğini yazın.
        
        Enter tuşuna basın
      - Kalan tüm istemler için Enter tuşuna basın.
    - firebase deploy
Cloud Functions API uç noktasına yapılan bir çağrıyla uygulamanızı yeniden dağıtma
- Önceki komutlar, daha önce oluşturduğunuz frontend dizininde index.html dosyasıyla bir public dizini oluşturmalıdır. Sonraki birkaç değişikliği yapmanız gereken ~/annotate-http-1/frontend/public/index.html dosyasıdır.
- 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 ç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 muhtemelen web sitesini tamamen yenilemeniz gerekecektir.

Sorun giderme

index.html dosyası şuna benzer şekilde görünecektir:

<!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 sitesini çalışmıyorsa kontrol etmeniz gereken birkaç nokta vardı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 mi eksik?
- Çözüm: fetch yöntemine tam URL'yi dahil ettiğinizden emin olun. https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate gibi bir değer olacaktır
Sorun: Hızlı yanıt hâlâ pek doğru değil.
- Çözüm: Gemini'a ne üretmesini istediğiniz konusunda daha fazla yön vermek için farklı bir istem deneyin. my-project-with-duet yerine proje kimliğinizi girdiğinizden 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ı mı ancak çalışmıyor mu?
- Çözüm: LLM'lerin deterministik olmayan yapısı nedeniyle Duet, çalışmayacak bir yanıt oluşturmuş olabilir. Bu durumda yukarıdaki index.html örneğini kopyalayıp firebase deploy ile yeniden dağıtmayı deneyin. my-project-with-duet yerine proje kimliğinizi girdiğinizden emin olun.

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

Gemini'ı ve düzenleyici asistanını kullanarak uygulamanıza CSS stilleri ekleyin ve işiniz bittiğinde uygulamayı tekrar dağıtın. İlham arıyorsanız deneyebileceğiniz bir örnek istem:
- Make this index.html file use material design.
Deneyebileceğiniz diğer şeyler:
- Oluşturulan web sitesi, herkese açık tüm http resimleriyle uyumlu olmalıdır. Resmi sayfada görüntülemek için Duet ile çalışın.

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

Bugün oluşturduğunuz kaynaklar için sizden ücret alınmasını istemiyorsanız Duet'e bunun nasıl yapılacağını sorabilirsiniz.

İstemi girin:
- How can I delete my project?
- gcloud projects delete my-project-with-duet gibi bir sonuç görürsünüz.
- ÖNEMLİ Önceki komutta bulunan my-project-with-duet değerini proje kimliğinizle değiştirin.
Bugün oluşturduğunuz tüm kaynakları kaldırmak için gcloud projects delete komutunu çalıştırın.