🎬 Gemini, Veo ve Cloud Run ile Yapay Zeka Hareket Laboratuvarı Oluşturma ve Dağıtma

1. Giriş

Ne Oluşturacaksınız?

Gemini Motion Lab, yapay zeka destekli canlı bir kiosk deneyimidir. Bir kullanıcı kısa bir dans veya hareket klibi kaydettiğinde sistem:

  1. Gemini'ı kullanarak hareketi (vücut parçaları, aşamalar, tempo, enerji) analiz eder.
  2. Nano Banana (Gemini Flash Image) kullanarak stilize edilmiş bir avatar resmi oluşturur.
  3. Veo'yu kullanarak, avatarla hareketi yeniden oluşturan bir yapay zeka videosu oluşturur.
  4. Yan yana video (orijinal + yapay zekayla üretilmiş) oluşturur.
  5. Sonucu, mobil cihazlar için optimize edilmiş bir sayfada QR kodu aracılığıyla paylaşır.

Bu codelab'i tamamladığınızda, tam demoyu Google Cloud Run'a dağıtmış ve demoyu destekleyen yapay zeka ardışık düzenini anlamış olacaksınız.

Mimarisine Genel Bakış

Son Demo:

cover

Temel Teknolojiler

Bileşen

Teknoloji

Amaç

Hareket Analizi

Gemini 3 Flash

Vücut hareketi, aşamalar ve stil için videoyu analiz etme

Avatar Oluşturma

Gemini Flash Image (Nano Banana)

Önemli bir kareden stilize edilmiş 1024x1024 boyutunda bir avatar oluşturun

Video Üretme

Veo 3.1

Avatar ve hareket isteminden yapay zeka videosu oluşturma

Arka uç

FastAPI + Python 3.11

Eş zamansız ardışık düzen düzenlemeli API sunucusu

Frontend

React + Vite + TypeScript

Kamera kaydı ve canlı durum içeren kiosk kullanıcı arayüzü

Barındırma

Cloud Run

Sunucusuz container dağıtımı

Depolama

Google Cloud Storage

Video yüklemeleri, çerçeveler, kırpılmış ve oluşturulmuş çıkışlar

2. 📦 Depoyu Klonlama

1. Cloud Shell Düzenleyici'yi açma

👉 Tarayıcınızda Cloud Shell Düzenleyici'yi açın.

Terminal ekranın alt kısmında görünmüyorsa:

  • Görünüm'ü tıklayın.
  • Terminal'i tıklayın.

2. Kodu Klonlama

👉💻 Terminalde depoyu klonlayın:

cd ~
git clone https://github.com/cuppibla/gemini-motion-lab-starter.git
cd gemini-motion-lab-starter

3. Proje Yapısını Keşfetme

Depo düzenine hızlıca göz atın:

gemini-motion-lab-starter/
├── backend/                     # FastAPI backend (Python 3.11)
│   ├── app/
│   │   ├── main.py              # FastAPI app entry point
│   │   ├── config.py            # Environment-based settings
│   │   ├── routers/             # API endpoints (upload, analyze, generate, share...)
│   │   ├── services/            # Business logic (Gemini, Veo, storage, pipeline...)
│   │   └── prompts/             # AI prompt templates
│   ├── Dockerfile
│   └── pyproject.toml
├── frontend/                    # React + Vite + TypeScript
│   ├── src/                     # React components
│   ├── public/                  # Static assets
│   ├── Dockerfile
│   └── nginx.conf
├── init.sh                      # Create GCP project & link billing
├── billing-enablement.py        # Auto-link billing account
├── setup.sh                     # Create GCS bucket, service account, .env
└── scripts/                     # Utility scripts

3. 🛠️ Kredi Talep Etme ve GCP Projesi Oluşturma

1. Bölüm: Faturalandırma Kredilerinizi Alma

👉 Gmail hesabınızı kullanarak faturalandırma hesabı kredinizi talep edin.

2. Bölüm: Yeni proje oluşturma

👉💻 Terminalde init komut dosyasını yürütülebilir hale getirin ve çalıştırın:

cd ~/gemini-motion-lab-starter
chmod +x init.sh
./init.sh

init.sh komut dosyası:

  1. gemini-motion-lab önekini kullanarak yeni bir GCP projesi oluşturun.
  2. Proje kimliğini ~/project_id.txt dosyasına kaydedin.
  3. Faturalandırma bağımlılarını yükleme ve faturalandırma hesabınızı otomatik olarak bağlama

3. bölüm: Projeyi yapılandırma ve API'leri etkinleştirme

👉💻 Proje kimliğinizi terminalde ayarlayın:

gcloud config set project $(cat ~/project_id.txt) --quiet

👉💻 Bu proje için gereken Google Cloud API'lerini etkinleştirin (bu işlem yaklaşık 1-2 dakika sürer):

gcloud services enable \
    run.googleapis.com \
    cloudbuild.googleapis.com \
    aiplatform.googleapis.com \
    storage.googleapis.com \
    artifactregistry.googleapis.com

4. 🧠 [YALNIZCA OKUMA] Mimariyi Anlama

Bu bölümde, yapay zeka işlem hattının uçtan uca işleyiş şekli açıklanmaktadır. Herhangi bir işlem yapmanız gerekmez. Yalnızca dağıtımdan önce sistemi anlamak için okuyun.

Yapay Zeka Ardışık Düzeni

Kullanıcı kioskta hareketli klip kaydettiğinde sırayla beş aşama gerçekleşir:

1. Aşama: Video Yükleme

Ön uç, kullanıcının kamerasından 5 saniyelik bir WebM klip kaydeder ve arka ucun /api/upload uç noktası üzerinden Google Cloud Storage'a yükler.

POST /api/upload/{video_id}  →  gs://BUCKET/uploads/{video_id}.webm

2. aşama: Gemini ile hareket analizi

Arka uç, yüklenen videoyu yapılandırılmış analiz için Gemini Flash'e (gemini-3-flash-preview) gönderir.

İşleyiş şekli (backend/app/services/gemini_service.py):

Hizmet, Part.from_uri giriş olarak video ve yapılandırılmış bir istemle birlikte Vertex AI SDK'nın client.models.generate_content() işlevini kullanır. response_mime_type="application/json", Gemini'ın ayrıştırılabilir JSON döndürmesini sağlar. Model, hareket aşamaları hakkında daha iyi akıl yürütmek için ThinkingConfig(thinking_budget=1024) da kullanır.

# Simplified from gemini_service.py
response = client.models.generate_content(
    model="gemini-3-flash-preview",
    contents=[
        types.Part.from_uri(file_uri=gcs_uri, mime_type="video/webm"),
        MOTION_ANALYSIS_PROMPT,  # detailed prompt template
    ],
    config=types.GenerateContentConfig(
        response_mime_type="application/json",
        thinking_config=types.ThinkingConfig(thinking_budget=1024),
    ),
)
analysis = json.loads(response.text)

3. Aşama: Nano Banana Avatar Oluşturma

Videodan çıkarılan en iyi kareyi kullanan Gemini Flash Image (gemini-3.1-flash-image-preview), 1024×1024 boyutunda stilize bir avatar oluşturur.

İşleyiş şekli (backend/app/services/nano_banana_service.py):

# Simplified from nano_banana_service.py
response = client.models.generate_content(
    model="gemini-3.1-flash-image-preview",
    contents=[
        types.Content(role="user", parts=[
            types.Part.from_bytes(data=frame_bytes, mime_type="image/png"),
            types.Part.from_text(text=avatar_prompt),
        ])
    ],
    config=types.GenerateContentConfig(
        response_modalities=["IMAGE"],
        image_config=types.ImageConfig(
            aspect_ratio="1:1",
            output_mime_type="image/png",
        ),
    ),
)

Oluşturulan avatar PNG'si GCS'ye yüklenir ve sonraki aşamaya aktarılır.

4. Aşama: Veo ile video üretimi

Avatar resmi, 8 saniyelik bir yapay zeka videosu oluşturmak için Veo 3.1 (veo-3.1-fast-generate-001) tarafından referans öğesi olarak kullanılır.

İşleyiş şekli (backend/app/services/veo_service.py):

# Simplified from veo_service.py
config = GenerateVideosConfig(
    reference_images=[
        VideoGenerationReferenceImage(
            image=Image(gcs_uri=avatar_gcs_uri, mime_type="image/png"),
            reference_type="ASSET",
        )
    ],
    aspect_ratio="16:9",
    duration_seconds=8,
    output_gcs_uri=f"gs://{BUCKET}/output/{video_id}/",
)
operation = client.models.generate_videos(
    model="veo-3.1-fast-generate-001",
    prompt=veo_prompt,
    config=config,
)

Veo'da üretim eşzamansızdır. Yani, işlem kimliği hemen döndürülür. Arka uç, işlem tamamlanana kadar (en fazla 10 dakika) yoklama yapar.

5. Aşama: Son İşleme İşlem Hattı

Veo tamamlandığında arka plan ardışık düzeni (backend/app/services/pipeline.py) otomatik olarak çalışır:

  1. 8 saniyelik Veo çıktısını 3 saniyeye kırpın.
  2. Yan yana video oluşturma (solda orijinal kayıt, sağda yapay zeka videosu)
  3. Oluşturulan videoyu GCS'ye yükleyin.
  4. Sıra alanını serbest bırakın.

Bu işlem hattı arka planda çalışır asyncio.Task. Kiosk ön ucunun beklemesi gerekmez.

Sıra Sistemi

Veo üretimi kaynak yoğun olduğundan sistem, en fazla 3 eşzamanlı iş çalıştırılmasına izin verir:

# backend/app/routers/queue.py
MAX_CONCURRENT_JOBS = 3

@router.get("/queue/status")
async def queue_status():
    return {
        "active_jobs": len(_active_jobs),
        "max_jobs": MAX_CONCURRENT_JOBS,
        "available": len(_active_jobs) < MAX_CONCURRENT_JOBS,
    }

Ön uç, yeni bir kullanıcının oturum başlatmasına izin vermeden önce GET /api/queue/status kontrol eder. Bir ardışık düzen tamamlanıp complete(video_id) çağrıldığında, sonraki kullanıcı için slot açılır.

Cloud Run - Sunucusuz Container'lar

Hem arka uç hem de ön uç Cloud Run hizmetleri olarak dağıtılır:

Hizmet

Amaç

Anahtar Yapılandırması

Arka uç

FastAPI API sunucusu

2 GiB bellek (ffmpeg üzerinden video işleme için)

Ön uç

Nginx tarafından sunulan statik React uygulaması

Varsayılan bellek

5. ⚙️ Kurulum komut dosyasını çalıştırın

1. Otomatik Kurulum'u çalıştırma

setup.sh komut dosyası, gerekli bulut kaynaklarını oluşturur ve .env dosyanızı üretir.

👉💻 Komut dosyasını yürütülebilir hale getirin ve uygulayın:

cd ~/gemini-motion-lab-starter
chmod +x setup.sh
./setup.sh

2. IAM rolleri verme

Şimdi hizmet hesabına gerekli izinleri verin.

👉💻 Proje kimliğinizi ayarlamak ve üç rolün tamamını vermek için aşağıdaki komutları çalıştırın:

export PROJECT_ID=$(cat ~/project_id.txt)

# 1. Storage Admin — upload/download videos and frames
gcloud projects add-iam-policy-binding $PROJECT_ID \
  --member="serviceAccount:gemini-motion-lab-sa@${PROJECT_ID}.iam.gserviceaccount.com" \
  --role="roles/storage.admin"

# 2. Vertex AI User — call Gemini and Veo models
gcloud projects add-iam-policy-binding $PROJECT_ID \
  --member="serviceAccount:gemini-motion-lab-sa@${PROJECT_ID}.iam.gserviceaccount.com" \
  --role="roles/aiplatform.user"

# 3. Service Account Token Creator — generate signed URLs for GCS
PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format="value(projectNumber)")
COMPUTE_SA="${PROJECT_NUMBER}-compute@developer.gserviceaccount.com"

gcloud iam service-accounts add-iam-policy-binding \
  gemini-motion-lab-sa@${PROJECT_ID}.iam.gserviceaccount.com \
  --project=$PROJECT_ID \
  --member="serviceAccount:${COMPUTE_SA}" \
  --role="roles/iam.serviceAccountTokenCreator"

3. .env Dosyanızı Doğrulama

👉💻 Oluşturulan .env dosyasını kontrol edin:

cat .env

Aşağıdaki bilgileri görürsünüz:

GOOGLE_CLOUD_PROJECT=your-project-id
GOOGLE_CLOUD_LOCATION=us-central1
GCS_BUCKET=gemini-motion-lab-your-project-id
GCS_SIGNING_SA=gemini-motion-lab-sa@your-project-id.iam.gserviceaccount.com
GOOGLE_GENAI_USE_VERTEXAI=true
MOCK_AI=false

6. 🚀 Arka ucu dağıtma

1. Arka uç Dockerfile'ını anlama

Dağıtmadan önce kapsayıcının nasıl göründüğünü anlayalım:

# backend/Dockerfile
FROM python:3.11-slim                           # Python base image
RUN apt-get update && apt-get install -y \
    ffmpeg libgl1 libglib2.0-0 \                # ffmpeg for video processing
    && rm -rf /var/lib/apt/lists/*
WORKDIR /app
COPY pyproject.toml .
RUN pip install --no-cache-dir .                # Install Python dependencies
COPY app/ ./app/                                # Copy application code
EXPOSE 8080
CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8080"]

2. Cloud Run'a dağıt

👉💻 Ortam değişkenlerinizi yükleyin ve dağıtın:

source .env

cd ~/gemini-motion-lab-starter/backend

gcloud run deploy gemini-motion-lab-backend \
  --source . \
  --region us-central1 \
  --allow-unauthenticated \
  --min-instances 1 \
  --max-instances 3 \
  --memory 2Gi \
  --port 8080 \
  --project $GOOGLE_CLOUD_PROJECT \
  --set-env-vars "GOOGLE_CLOUD_PROJECT=$GOOGLE_CLOUD_PROJECT,GOOGLE_CLOUD_LOCATION=$GOOGLE_CLOUD_LOCATION,GCS_BUCKET=$GCS_BUCKET,GCS_SIGNING_SA=$GCS_SIGNING_SA,GOOGLE_GENAI_USE_VERTEXAI=$GOOGLE_GENAI_USE_VERTEXAI,MOCK_AI=$MOCK_AI"

Bu işlem yaklaşık 3-5 dakika sürer. Cloud Build:

  1. Kaynak kodunuzu yükleme
  2. Docker görüntüsünü oluşturma
  3. Artifact Registry'ye aktarın.
  4. Cloud Run'a dağıtma

3. Arka uç URL'sini kaydetme

👉💻 Dağıtım tamamlandıktan sonra arka uç URL'sini kaydedin:

BACKEND_URL=$(gcloud run services describe gemini-motion-lab-backend \
  --region us-central1 \
  --format="value(status.url)" \
  --project $GOOGLE_CLOUD_PROJECT)

echo "Backend URL: $BACKEND_URL"

4. Arka uç paylaşım URL'sini güncelleme

Arka uç, kullanıcıların videolarını indirebilmesi için QR kodları oluşturur. Bunu yapabilmesi için kendi herkese açık URL'sini bilmesi gerekir.

👉💻 Arka uç yapılandırmasını kendi URL'siyle güncelleyin:

gcloud run services update gemini-motion-lab-backend \
  --region us-central1 \
  --update-env-vars PUBLIC_BASE_URL=$BACKEND_URL \
  --project $GOOGLE_CLOUD_PROJECT

5. Arka ucu doğrulama

👉💻 Durum uç noktasını test edin:

curl $BACKEND_URL/api/health

Beklenen çıkış:

{"status":"ok"}

👉💻 Kuyruk durumunu kontrol etme:

curl $BACKEND_URL/api/queue/status

Beklenen çıkış:

{"active_jobs":0,"max_jobs":3,"available":true}

7. 🎨 Ön ucu dağıtma

1. Ön uç Dockerfile'ını anlama

Ön uçta çok kademeli bir derleme kullanılır. Önce React uygulaması derlenir, ardından Nginx ile sunulur:

# frontend/Dockerfile
FROM node:20-alpine AS builder               # Stage 1: Build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
ARG VITE_API_BASE=https://...                # Backend URL baked at build time
ENV VITE_API_BASE=$VITE_API_BASE
RUN npm run build                            # Produces static files in /app/dist

FROM nginx:alpine                            # Stage 2: Serve
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 8080

2. Cloud Run'a dağıt

👉💻 Öncelikle, arka uç URL'sini bir .env dosyasına yazın. Böylece Vite, derleme sırasında bu URL'yi dahil edebilir:

cd ~/gemini-motion-lab-starter/frontend
echo "VITE_API_BASE=$BACKEND_URL" > .env

👉💻 Şimdi ön ucu dağıtın:

gcloud run deploy gemini-motion-lab-frontend \
  --source . \
  --region us-central1 \
  --allow-unauthenticated \
  --min-instances 1 \
  --max-instances 3 \
  --port 8080 \
  --project $GOOGLE_CLOUD_PROJECT

Bu işlem yaklaşık 2-3 dakika sürer.

3. Ön uç URL'sini alma

👉💻 Ön uç URL'sini alıp açın:

FRONTEND_URL=$(gcloud run services describe gemini-motion-lab-frontend \
  --region us-central1 \
  --format="value(status.url)" \
  --project $GOOGLE_CLOUD_PROJECT)

echo "🎬 Your Gemini Motion Lab is live at: $FRONTEND_URL"

👉 URL'yi tarayıcınızda açın. Gemini Motion Lab kiosk arayüzünü görmelisiniz.

8. 🎮 [İSTEĞE BAĞLI] Demoyla Oynama

1. Hareket kaydetme

  1. Tarayıcınızda (en iyi kamera desteği için tercihen Chrome) Frontend URL'yi açın.
  2. Kaydı başlatmak için Başlat'ı tıklayın.
  3. Yaklaşık 5 saniye boyunca dans edin veya hareket edin. En iyi sonuç için kolunuzu büyük hareketlerle oynatın ve dinamik pozlar verin.
  4. Kayıt otomatik olarak durdurulur ve yüklenir.

2. Yapay Zeka Ardışık Düzenini İzleme

Yükleme işleminden sonra, işlem hattının gerçek zamanlı olarak çalıştığını görürsünüz:

Faz

Neler oluyor?

Süre

Analiz ediliyor...

Gemini Flash, videonuzdaki hareket kalıplarını analiz eder.

~5-10 sn

Avatar oluşturuluyor...

Nano Banana, en iyi karenizden stilize bir avatar oluşturur.

~8-12 sn

Video oluşturuluyor...

Veo 3.1, avatar ve hareket isteminden yapay zeka videosu oluşturur.

~60-120 sn.

Oluşturuluyor...

ffmpeg, videoyu kırpar ve yan yana karşılaştırma oluşturur

~5-10 sn

3. Üretiminizi paylaşma

İşlem hattı tamamlandıktan sonra:

  1. Kiosk ekranında bir QR kodu görünür.
  2. Telefonunuzla QR kodunu tarayın.
  3. Oluşturduğunuz videonun yer aldığı, mobil cihazlar için optimize edilmiş bir paylaşım sayfası görürsünüz.

4. Arka uç günlüklerini kontrol etme

👉💻 Kamera arkasında neler olduğunu görün:

gcloud logging read \
  "resource.type=cloud_run_revision AND resource.labels.service_name=gemini-motion-lab-backend" \
  --limit=30 \
  --project $GOOGLE_CLOUD_PROJECT \
  --format="value(timestamp,textPayload)" \
  --freshness=10m

Ardışık düzeni izleyen günlük satırları görürsünüz:

Pipeline started for video_id=abc123
Gemini model used: gemini-3-flash-preview
Avatar generated: style=pixel-hero size=450KB time=8.2s
Veo model used: veo-3.1-fast-generate-001
Pipeline: Veo complete for video_id=abc123
Pipeline: trimmed video uploaded
Pipeline: composed video uploaded
Pipeline complete for video_id=abc123

5. Sırayı izleme

👉💻 Kaç işin çalıştığını kontrol edin:

curl $BACKEND_URL/api/queue/status

Aynı anda 3 oturum etkinse yanıtta şu bilgiler gösterilir:

{"active_jobs":3,"max_jobs":3,"available":false}

Yeni kullanıcılardan yer açılana kadar beklemeleri istenir.

9. 🎉 Sonuç

Oluşturduklarınız

✅ Yapay Zeka ile Hareket Analizi: Gemini Flash, videoyu hareket, tempo ve stil açısından analiz eder.

✅ Avatar üretme: Nano Banana, video karelerinden stilize edilmiş avatarlar oluşturur.

✅ Yapay Zeka Video Oluşturma Aracı: Veo 3.1, kullanıcının hareketine uygun yeni videolar oluşturur.

✅ Eş Zamansız Ardışık Düzen: Kuyruk yönetimiyle arka plan işleme (en fazla 3 eşzamanlı)

✅ Yan Yana Kompozisyon: ffmpeg destekli video kompozisyonu

✅ Cloud Run dağıtımı: Sunucusuz, otomatik ölçeklendirme, sunucu yönetimi gerektirmez

Öğrendiğiniz Temel Kavramlar

  1. Gemini Multimodal: Giriş olarak video gönderme ve yapılandırılmış JSON analizi alma
  2. Nano Banana (Gemini Görüntü Üretme): Referans görseller ve stil istemleri kullanarak avatar oluşturma
  3. Veo 3.1: Referans öğeler ve metin istemleriyle eşzamansız video üretimi
  4. Cloud Run: Ortam değişkenleri ve otomatik ölçeklendirme ile container dağıtma
  5. Eş Zamansız İşlem Hattı Kalıbı: Uzun süren yapay zeka işlemleri için asyncio.Task ile arka planda çalışan, başlatılıp unutulan görevler
  6. Sıra Yönetimi: Maliyetleri ve API kotalarını kontrol etmek için eşzamanlı yapay zeka görevlerine hız sınırı uygulama

Mimari Özeti

Sırada ne var?

  • Daha fazla avatar stili ekleme: Düzenle backend/app/prompts/avatar_generation.py
  • Veo istemini özelleştirme: Düzenle'yi backend/app/prompts/video_generation.py tıklayın.
  • Sahte modda yerel olarak çalıştırma: API çağrıları olmadan geliştirme için .env içinde MOCK_AI=true'ı ayarlayın.
  • Etkinlikler için ölçeklendirme: --max-instances ve MAX_CONCURRENT_JOBS değerlerini artırın.

Kaynaklar