Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

🎬 Gemini, Veo, और Cloud Run की मदद से, एआई मोशन लैब बनाना और उसे डिप्लॉय करना

1. परिचय

आपको क्या बनाना है

Gemini Motion Lab, एआई की मदद से काम करने वाला एक कियॉस्क है. कोई उपयोगकर्ता, डांस या मोशन की छोटी क्लिप रिकॉर्ड करता है. इसके बाद, सिस्टम:

Gemini का इस्तेमाल करके, विश्लेषण करता है (शरीर के हिस्से, फ़ेज़, टेंपो, एनर्जी)
Nano Banana (Gemini Flash Image) का इस्तेमाल करके, स्टाइल वाली अवतार इमेज जनरेट करता है
Veo का इस्तेमाल करके, एआई वीडियो बनाता है. इसमें अवतार के साथ मोशन को फिर से बनाया जाता है
यह सुविधा, बनाती है. इसमें ओरिजनल वीडियो और एआई से जनरेट किया गया वीडियो, दोनों को साथ-साथ दिखाया जाता है
शेयर करें: यह विकल्प, मोबाइल के लिए ऑप्टिमाइज़ किए गए पेज पर क्यूआर कोड के ज़रिए नतीजे शेयर करता है

इस कोडलैब के आखिर तक, आपके पास Google Cloud Run पर डिप्लॉय किया गया पूरा डेमो होगा. साथ ही, आपको इसे बेहतर बनाने वाली एआई पाइपलाइन के बारे में भी जानकारी होगी.

आर्किटेक्चर के बारे में खास जानकारी

फ़ाइनल डेमो:

कवर

मुख्य टेक्नोलॉजी

कॉम्पोनेंट	टेक्नोलॉजी	मकसद
मोशन का विश्लेषण	Gemini Flash	शरीर के मूवमेंट, फ़ेज़, और स्टाइल के लिए वीडियो का विश्लेषण करना
अवतार जनरेट करने की सुविधा	Gemini Flash Image (Nano Banana)	किसी मुख्य फ़्रेम से, स्टाइल वाला 1024×1024 अवतार जनरेट करना
वीडियो जनरेट करने की सुविधा	Veo 3.1	अवतार + मोशन प्रॉम्प्ट की मदद से एआई वीडियो बनाना
बैकएंड	FastAPI + Python 3.11	एसिंक्रोनस पाइपलाइन ऑर्केस्ट्रेशन वाला एपीआई सर्वर
फ़्रंटएंड	React + Vite + TypeScript	कैमरा रिकॉर्डिंग और लाइव स्टेटस के साथ किऑस्क यूज़र इंटरफ़ेस (यूआई)
होस्टिंग	Cloud Run	सर्वरलेस कंटेनर वाला डिप्लॉयमेंट
डिवाइस का स्टोरेज	Google Cloud Storage	वीडियो अपलोड, फ़्रेम, काटे गए वीडियो, और कंपोज़ किए गए आउटपुट

2. 📦 रिपॉज़िटरी क्लोन करना

1. Cloud Shell Editor खोलें

👉 अपने ब्राउज़र में Cloud Shell Editor खोलें.

अगर टर्मिनल, स्क्रीन पर सबसे नीचे नहीं दिखता है, तो:

देखें पर क्लिक करें
टर्मिनल पर क्लिक करें

2. कोड क्लोन करना

👉💻 टर्मिनल में, रिपॉज़िटरी को क्लोन करें:

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

3. प्रोजेक्ट स्ट्रक्चर एक्सप्लोर करना

रिपॉज़िटरी के लेआउट पर एक नज़र डालें:

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. 🛠️ क्रेडिट का दावा करना और GCP प्रोजेक्ट बनाना

पहला हिस्सा: बिलिंग क्रेडिट पर दावा करना

👉 अपने Gmail खाते का इस्तेमाल करके, बिलिंग खाते के क्रेडिट पर दावा करें.

दूसरा हिस्सा: नया प्रोजेक्ट बनाना

👉💻 टर्मिनल में, init स्क्रिप्ट को एक्ज़ीक्यूटेबल बनाएं और उसे चलाएं:

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

init.sh स्क्रिप्ट:

gemini-motion-lab प्रीफ़िक्स वाला नया GCP प्रोजेक्ट बनाएं
प्रोजेक्ट आईडी को ~/project_id.txt में सेव करें
बिलिंग की ज़रूरी शर्तें पूरी करना और बिलिंग खाते को अपने-आप लिंक करना

तीसरा चरण: प्रोजेक्ट को कॉन्फ़िगर करना और एपीआई चालू करना

👉💻 टर्मिनल में अपना प्रोजेक्ट आईडी सेट करें:

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

👉💻 इस प्रोजेक्ट के लिए ज़रूरी Google Cloud API चालू करें. इसमें ~1 से 2 मिनट लगते हैं:

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

हर एपीआई का काम:

एपीआई	मकसद
`run.googleapis.com`	Cloud Run — यह हमारे बैकएंड और फ़्रंटएंड को सर्वरलेस कंटेनर के तौर पर होस्ट करता है
`cloudbuild.googleapis.com`	Cloud Build — यह सोर्स कोड से Docker इमेज बनाता है
`aiplatform.googleapis.com`	Vertex AI — Gemini और Veo के मॉडल का ऐक्सेस
`storage.googleapis.com`	Cloud Storage — इसमें अपलोड किए गए वीडियो, फ़्रेम, और जनरेट की गई ऐसेट सेव होती हैं
`artifactregistry.googleapis.com`	Artifact Registry — इसमें बनाई गई Docker इमेज सेव होती हैं

4. 🧠 [READ ONLY] Understanding the Architecture

इस सेक्शन में, एआई पाइपलाइन के एंड-टू-एंड काम करने का तरीका बताया गया है. कोई कार्रवाई ज़रूरी नहीं है — बस सिस्टम को लागू करने से पहले, इसे समझ लें.

एआई पाइपलाइन

जब कोई उपयोगकर्ता कीऑस्क पर मोशन क्लिप रिकॉर्ड करता है, तो पांच चरण क्रम से चलते हैं:

पहला चरण: वीडियो अपलोड करना

फ़्रंटएंड, उपयोगकर्ता के कैमरे से पांच सेकंड का WebM क्लिप रिकॉर्ड करता है. इसके बाद, इसे बैकएंड के /api/upload एंडपॉइंट के ज़रिए Google Cloud Storage पर अपलोड करता है.

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

दूसरा चरण: Gemini की मदद से मोशन का विश्लेषण करना

बैकएंड, अपलोड किए गए वीडियो को स्ट्रक्चर्ड विश्लेषण के लिए Gemini Flash (gemini-3-flash-preview) को भेजता है.

Gemini क्या-क्या जानकारी निकालता है: Gemini वीडियो देखता है और स्ट्रक्चर्ड JSON के साथ यह जानकारी दिखाता है:

movement_summary — मोशन के बारे में सामान्य भाषा में जानकारी
body_parts — शरीर के कौनसे हिस्से शामिल हैं (हाथ, धड़, पैर वगैरह)
phases — समय के हिसाब से बंटा हुआ ब्यौरा (समयसीमा, ऐक्शन, टेंपो, एनर्जी)
best_frame_timestamp — किसी फ़ोटो को निकालने का सबसे सही समय
veo_prompt — Veo की मदद से वीडियो जनरेट करने के लिए, सोच-समझकर बनाया गया प्रॉम्प्ट
person_description — अवतार जनरेट करने के लिए, व्यक्ति के बारे में जानकारी

यह सुविधा कैसे काम करती है (backend/app/services/gemini_service.py):

यह सेवा, Vertex AI SDK के client.models.generate_content() का इस्तेमाल करती है. इसमें वीडियो को Part.from_uri इनपुट और स्ट्रक्चर्ड प्रॉम्प्ट के तौर पर इस्तेमाल किया जाता है. response_mime_type="application/json" से यह पक्का होता है कि Gemini, पार्स किया जा सकने वाला JSON दिखाता है. यह मॉडल, मोशन फ़ेज़ के बारे में बेहतर तरीके से तर्क देने के लिए, ThinkingConfig(thinking_budget=1024) का भी इस्तेमाल करता है.

# 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)

तीसरा चरण: Nano Banana की मदद से अवतार जनरेट करना

वीडियो से निकाले गए सबसे अच्छे फ़्रेम का इस्तेमाल करके, Gemini Flash Image (gemini-3.1-flash-image-preview) 1024×1024 साइज़ का स्टाइलिश अवतार जनरेट करता है.

यह सुविधा कैसे काम करती है (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",
        ),
    ),
)

जनरेट किया गया अवतार PNG, GCS पर अपलोड हो जाता है और अगले चरण पर चला जाता है.

चौथा चरण: Veo की मदद से वीडियो जनरेट करना

अवतार की इमेज का इस्तेमाल, Veo 3.1 (veo-3.1-fast-generate-001) के लिए रेफ़रंस ऐसेट के तौर पर किया जाता है. इससे आठ सेकंड का एआई वीडियो जनरेट होता है.

यह सुविधा कैसे काम करती है (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 जनरेशन एसिंक्रोनस है. यह तुरंत ऑपरेशन आईडी दिखाता है. बैकएंड, ऑपरेशन पूरा होने तक (10 मिनट तक) पोल करता है.

पांचवां चरण: पोस्ट-प्रोसेसिंग पाइपलाइन

Veo के प्रोसेस पूरी करने के बाद, बैकग्राउंड पाइपलाइन (backend/app/services/pipeline.py) अपने-आप शुरू हो जाती है:

Veo के 8 सेकंड के आउटपुट को 3 सेकंड तक काट-छांट करो
साइड-बाय-साइड वीडियो कंपोज़ करें (बाएं ओर ओरिजनल रिकॉर्डिंग और दाईं ओर एआई वीडियो)
कंपोज़ किए गए वीडियो को GCS पर अपलोड करें
कतार में मौजूद स्लॉट को रिलीज़ करें

यह पाइपलाइन बैकग्राउंड में चलती है asyncio.Task — कीऑस्क के फ़्रंटएंड को इंतज़ार करने की ज़रूरत नहीं होती.

कतार वाला सिस्टम

Veo जनरेट करने के लिए, ज़्यादा संसाधनों की ज़रूरत होती है. इसलिए, सिस्टम एक साथ ज़्यादा से ज़्यादा तीन टास्क पूरे कर सकता है:

# 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,
    }

फ़्रंटएंड, नए उपयोगकर्ता को सेशन शुरू करने की अनुमति देने से पहले GET /api/queue/status की जांच करता है. जब कोई पाइपलाइन पूरी हो जाती है और complete(video_id) को कॉल करती है, तो अगले उपयोगकर्ता के लिए स्लॉट खुल जाता है.

Cloud Run — बिना सर्वर वाले कंटेनर

बैकएंड और फ़्रंटएंड, दोनों को Cloud Run सेवाओं के तौर पर डिप्लॉय किया जाता है:

Cloud Run क्यों?

सर्वर को मैनेज करने की ज़रूरत नहीं होती — Google, स्केलिंग, पैचिंग, और हार्डवेयर को मैनेज करता है
स्केल टू ज़ीरो — सिर्फ़ तब शुल्क लगता है, जब अनुरोध चालू हों
कंटेनर पर आधारित — Dockerfile की मदद से किसी भी भाषा या फ़्रेमवर्क को डिप्लॉय करें
पहले से मौजूद एचटीटीपीएस — हर सेवा को स्थायी और सुरक्षित यूआरएल मिलता है
ऑटो-स्केलिंग — ट्रैफ़िक में अचानक होने वाली बढ़ोतरी को अपने-आप मैनेज करता है (इस डेमो में 1 से 3 इंस्टेंस)

सेवा	मकसद	कुंजी का कॉन्फ़िगरेशन
बैकएंड	FastAPI API सर्वर	2 जीबी मेमोरी (ffmpeg के ज़रिए वीडियो प्रोसेस करने के लिए)
फ़्रंटएंड	Nginx से स्टैटिक React ऐप्लिकेशन को दिखाया गया	डिफ़ॉल्ट मेमोरी

5. ⚙️ सेटअप स्क्रिप्ट चलाना

1. ऑटोमेटेड सेटअप की सुविधा का इस्तेमाल करना

setup.sh स्क्रिप्ट, ज़रूरी क्लाउड संसाधन बनाती है और आपकी .env फ़ाइल जनरेट करती है.

👉💻 स्क्रिप्ट को एक्ज़ीक्यूटेबल बनाएं और उसे चलाएं:

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

2. आईएएम की भूमिकाएं असाइन करना

अब सेवा खाते को ज़रूरी अनुमतियां दें.

👉💻 अपना प्रोजेक्ट आईडी सेट करने और तीनों भूमिकाएं असाइन करने के लिए, ये कमांड चलाएं:

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"

हर भूमिका के बारे में जानकारी:

भूमिका	मकसद
`roles/storage.admin`	Cloud Storage में ऑब्जेक्ट को पढ़ने, लिखने, और मैनेज करने का पूरा ऐक्सेस — वीडियो अपलोड करने, फ़्रेम, और कंपोज़ किए गए आउटपुट के लिए ज़रूरी है
`roles/aiplatform.user`	Vertex AI मॉडल का इस्तेमाल करके अनुमान लगाना — यह Gemini की मदद से विश्लेषण करने, Nano Banana अवतार जनरेट करने, और Veo की मदद से वीडियो बनाने के लिए ज़रूरी है
`roles/iam.serviceAccountTokenCreator`	हस्ताक्षर किए गए यूआरएल जनरेट करें, ताकि शेयर पेज, सीमित समय के लिए उपलब्ध लिंक के ज़रिए मोबाइल फ़ोन पर वीडियो दिखा सके

3. अपनी `.env` फ़ाइल की पुष्टि करना

👉💻 जनरेट की गई .env फ़ाइल देखें:

cat .env

आपको यह दिखना चाहिए:

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. 🚀 बैकएंड डिप्लॉय करना

1. बैकएंड Dockerfile के बारे में जानकारी

डप्लॉय करने से पहले, आइए जानते हैं कि कंटेनर कैसा दिखता है:

# 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"]

क्यों ffmpeg? बैकएंड, ffmpeg का इस्तेमाल इन कामों के लिए करता है:

अपलोड किए गए वीडियो से सबसे अच्छा फ़्रेम निकालना (अवतार जनरेट करने के लिए)
Veo के आउटपुट को 8 सेकंड से घटाकर 3 सेकंड करो
अगल-बगल में तुलना करने वाला वीडियो (ओरिजनल + एआई) कंपोज़ करना

इसलिए, बैकएंड को --memory 2Gi की ज़रूरत होती है. वीडियो प्रोसेसिंग में ज़्यादा मेमोरी लगती है.

2. Cloud Run पर डिप्लॉय करना

👉💻 अपने एनवायरमेंट वैरिएबल लोड करें और उन्हें डिप्लॉय करें:

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"

डिप्लॉयमेंट के मुख्य फ़्लैग के बारे में जानकारी:

झंडा	मकसद
`--source .`	सोर्स से सीधे तौर पर डॉकर इमेज बनाना (इसे Cloud Build मैनेज करता है)
`--allow-unauthenticated`	इस कुकी की मदद से, एपीआई को सार्वजनिक तौर पर ऐक्सेस किया जा सकता है. यह फ़्रंटएंड के लिए ज़रूरी है
`--min-instances 1`	कम से कम एक इंस्टेंस को वॉर्म रखें, ताकि कोल्ड स्टार्ट से बचा जा सके
`--max-instances 3`	स्केलिंग को सीमित करें (क्योंकि हम एक साथ तीन Veo जॉब को भी सीमित करते हैं)
`--memory 2Gi`	ffmpeg की मदद से वीडियो प्रोसेस करने के लिए ज़रूरी है
`--set-env-vars`	सभी कॉन्फ़िगरेशन को एनवायरमेंट वैरिएबल के तौर पर पास करें

इसमें करीब तीन से पांच मिनट लगते हैं. Cloud Build ये काम करेगा:

अपना सोर्स कोड अपलोड करना
Docker इमेज बनाना
इसे Artifact Registry में पुश करें
इसे Cloud Run पर डिप्लॉय करें

3. बैकएंड यूआरएल सेव करना

👉💻 डिप्लॉय करने के बाद, बैकएंड यूआरएल सेव करें:

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"

बैकएंड, क्यूआर कोड जनरेट करता है, ताकि लोग अपने वीडियो डाउनलोड कर सकें. इसके लिए, इसे अपने सार्वजनिक यूआरएल की जानकारी होनी चाहिए.

👉💻 बैकएंड कॉन्फ़िगरेशन को उसके यूआरएल से अपडेट करें:

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

5. बैकएंड की पुष्टि करना

👉💻 हेल्थ एंडपॉइंट की जांच करें:

curl $BACKEND_URL/api/health

अनुमानित आउटपुट:

{"status":"ok"}

👉💻 कतार का स्टेटस देखें:

curl $BACKEND_URL/api/queue/status

अनुमानित आउटपुट:

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

7. 🎨 फ़्रंटएंड डिप्लॉय करना

1. फ़्रंटएंड Dockerfile के बारे में जानकारी

फ़्रंटएंड, मल्टी-स्टेज बिल्ड का इस्तेमाल करता है. इसमें सबसे पहले React ऐप्लिकेशन बनाया जाता है. इसके बाद, उसे Nginx के साथ परोसा जाता है:

# 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

क्यों ARG VITE_API_BASE? Vite, बिल्ड-टाइम टूल है. एनवायरमेंट वैरिएबल को रनटाइम के बजाय, बिल्ड टाइम पर इंजेक्ट किया जाना चाहिए. ARG निर्देश की मदद से, हम docker build के दौरान बैकएंड यूआरएल पास कर सकते हैं. साथ ही, Vite इसे JavaScript बंडल में शामिल कर देता है.

इसका मतलब है कि अगर बैकएंड यूआरएल में कभी बदलाव होता है, तो आपको नया यूआरएल पाने के लिए, फ़्रंटएंड को फिर से डिप्लॉय करना होगा.

2. Cloud Run पर डिप्लॉय करना

👉💻 सबसे पहले, बैकएंड यूआरएल को .env फ़ाइल में लिखें, ताकि Vite इसे बिल्ड टाइम में शामिल कर सके:

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

👉💻 अब फ़्रंटएंड डिप्लॉय करें:

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

इसमें करीब दो से तीन मिनट लगते हैं.

3. फ़्रंटएंड यूआरएल पाना

👉💻 फ़्रंटएंड यूआरएल वापस पाएं और उसे खोलें:

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"

👉 अपने ब्राउज़र में यूआरएल खोलें. आपको Gemini Motion Lab का कियॉस्क इंटरफ़ेस दिखेगा!

8. 🎮 [ज़रूरी नहीं] डेमो के साथ खेलना

1. मोशन रिकॉर्ड करना

अपने ब्राउज़र में फ़्रंटएंड यूआरएल खोलें. बेहतर होगा कि आप Chrome ब्राउज़र का इस्तेमाल करें, ताकि कैमरे की सुविधा का बेहतर तरीके से इस्तेमाल किया जा सके
रिकॉर्डिंग शुरू करने के लिए, शुरू करें पर क्लिक करें
करीब पांच सेकंड तक नाचें या हिलें-डुलें — हाथ को तेज़ी से घुमाने और अलग-अलग पोज़ देने से बेहतर नतीजे मिलते हैं
रिकॉर्डिंग अपने-आप बंद हो जाएगी और अपलोड हो जाएगी

2. एआई पाइपलाइन देखना

अपलोड करने के बाद, आपको पाइपलाइन के रीयल टाइम में चलने की जानकारी दिखेगी:

फ़ेज़ (चरण)	क्या हो रहा है	कुल समय
विश्लेषण किया जा रहा है...	Gemini Flash, वीडियो में मौजूद चीज़ों की गतिविधियों के पैटर्न का विश्लेषण करता है	~5-10 सेकंड
अवतार जनरेट किया जा रहा है...	Nano Banana, आपके सबसे अच्छे फ़्रेम से स्टाइल वाला अवतार बनाता है	~8-12 से°
वीडियो बनाया जा रहा है...	Veo 3.1, अवतार और मोशन प्रॉम्प्ट के आधार पर एआई वीडियो जनरेट करता है	~60 से 120 सेकंड
लिखा जा रहा है...	ffmpeg, वीडियो को ट्रिम करता है और अगल-बगल में तुलना करने की सुविधा देता है	~5-10 सेकंड

पाइपलाइन पूरी होने के बाद:

कियोस्क की स्क्रीन पर क्यूआर कोड दिखता है
अपने फ़ोन से क्यूआर कोड स्कैन करें
आपको मोबाइल के लिए ऑप्टिमाइज़ किया गया शेयर पेज दिखेगा. इस पर आपका बनाया गया वीडियो होगा

4. बैकएंड लॉग देखना

👉💻 पर्दे के पीछे की गतिविधियां देखें:

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

आपको पाइपलाइन को ट्रेस करने वाली लॉग लाइनें दिखेंगी:

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. कतार को मॉनिटर करना

👉💻 देखें कि कितने जॉब चल रहे हैं:

curl $BACKEND_URL/api/queue/status

अगर तीन सेशन एक साथ चालू हैं, तो जवाब में यह दिखेगा:

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

नए उपयोगकर्ताओं को तब तक इंतज़ार करने के लिए कहा जाएगा, जब तक कोई स्लॉट उपलब्ध नहीं हो जाता.

9. 🎉 निष्कर्ष

आपने क्या बनाया है

✅ एआई की मदद से मोशन का विश्लेषण करने की सुविधा — Gemini Flash, वीडियो में मौजूद मोशन, टेंपो, और स्टाइल का विश्लेषण करता है

✅ अवतार जनरेट करना — Nano Banana, वीडियो फ़्रेम से स्टाइल वाले अवतार जनरेट करता है

✅ एआई से वीडियो जनरेट करना — Veo 3.1, उपयोगकर्ता की गति से मेल खाने वाले नए वीडियो जनरेट करता है

✅ एसिंक पाइपलाइन — इसमें बैकग्राउंड प्रोसेसिंग और क्यू मैनेजमेंट की सुविधा मिलती है. एक साथ ज़्यादा से ज़्यादा तीन प्रोसेस की जा सकती हैं

✅ साइड-बाय-साइड कंपोज़िशन — ffmpeg की मदद से वीडियो कंपोज़िट करना

✅ Cloud Run डिप्लॉयमेंट — सर्वरलेस, ऑटो-स्केलिंग, सर्वर मैनेजमेंट की ज़रूरत नहीं

आपने जो मुख्य कॉन्सेप्ट सीखे

Gemini Multimodal — वीडियो को इनपुट के तौर पर भेजना और स्ट्रक्चर्ड JSON विश्लेषण पाना
Nano Banana (Gemini की इमेज जनरेट करने की सुविधा) — अवतार जनरेट करने के लिए, रेफ़रंस इमेज और स्टाइल प्रॉम्प्ट का इस्तेमाल करना
Veo 3.1 — इसमें रेफ़रंस ऐसेट और टेक्स्ट प्रॉम्प्ट की मदद से, एसिंक्रोनस तरीके से वीडियो जनरेट करने की सुविधा मिलती है
Cloud Run — एनवायरमेंट वैरिएबल और अपने-आप स्केल होने की सुविधा के साथ कंटेनर डिप्लॉय करना
एसिंक पाइपलाइन पैटर्न — लंबे समय तक चलने वाले एआई ऑपरेशनों के लिए, asyncio.Task के साथ बैकग्राउंड टास्क को तुरंत शुरू करें और भूल जाएं
कतार मैनेजमेंट — एआई से जुड़े एक साथ कई टास्क पूरे करने की सुविधा पर दर सीमा लागू करना, ताकि लागत और एपीआई कोटा को कंट्रोल किया जा सके

आर्किटेक्चर रीकैप

अगला चरण?

अवतार की और स्टाइल जोड़ना — बदलाव करें backend/app/prompts/avatar_generation.py
Veo के प्रॉम्प्ट को अपनी पसंद के मुताबिक बनाएं — बदलाव करें backend/app/prompts/video_generation.py
मॉक मोड में स्थानीय तौर पर चलाएं — एपीआई कॉल के बिना डेवलपमेंट के लिए, .env में MOCK_AI=true सेट करें
इवेंट के लिए स्केल करें — --max-instances और MAX_CONCURRENT_JOBS बढ़ाएं

🎬 Gemini, Veo, और Cloud Run की मदद से, एआई मोशन लैब बनाना और उसे डिप्लॉय करना

1. परिचय

आपको क्या बनाना है

आर्किटेक्चर के बारे में खास जानकारी

मुख्य टेक्नोलॉजी

2. 📦 रिपॉज़िटरी क्लोन करना

1. Cloud Shell Editor खोलें

2. कोड क्लोन करना

3. प्रोजेक्ट स्ट्रक्चर एक्सप्लोर करना

3. 🛠️ क्रेडिट का दावा करना और GCP प्रोजेक्ट बनाना

पहला हिस्सा: बिलिंग क्रेडिट पर दावा करना

दूसरा हिस्सा: नया प्रोजेक्ट बनाना

तीसरा चरण: प्रोजेक्ट को कॉन्फ़िगर करना और एपीआई चालू करना

4. 🧠 [READ ONLY] Understanding the Architecture

एआई पाइपलाइन

पहला चरण: वीडियो अपलोड करना

दूसरा चरण: Gemini की मदद से मोशन का विश्लेषण करना

तीसरा चरण: Nano Banana की मदद से अवतार जनरेट करना

चौथा चरण: Veo की मदद से वीडियो जनरेट करना

पांचवां चरण: पोस्ट-प्रोसेसिंग पाइपलाइन

कतार वाला सिस्टम

Cloud Run — बिना सर्वर वाले कंटेनर

5. ⚙️ सेटअप स्क्रिप्ट चलाना

1. ऑटोमेटेड सेटअप की सुविधा का इस्तेमाल करना

2. आईएएम की भूमिकाएं असाइन करना

3. अपनी .env फ़ाइल की पुष्टि करना

6. 🚀 बैकएंड डिप्लॉय करना

1. बैकएंड Dockerfile के बारे में जानकारी

2. Cloud Run पर डिप्लॉय करना

3. बैकएंड यूआरएल सेव करना

4. बैकएंड शेयर यूआरएल अपडेट करना

5. बैकएंड की पुष्टि करना

7. 🎨 फ़्रंटएंड डिप्लॉय करना

1. फ़्रंटएंड Dockerfile के बारे में जानकारी

2. Cloud Run पर डिप्लॉय करना

3. फ़्रंटएंड यूआरएल पाना

8. 🎮 [ज़रूरी नहीं] डेमो के साथ खेलना

1. मोशन रिकॉर्ड करना

2. एआई पाइपलाइन देखना

3. अपनी बनाई गई इमेज शेयर करना

4. बैकएंड लॉग देखना

5. कतार को मॉनिटर करना

9. 🎉 निष्कर्ष

आपने क्या बनाया है

आपने जो मुख्य कॉन्सेप्ट सीखे

आर्किटेक्चर रीकैप

अगला चरण?

संसाधन

3. अपनी `.env` फ़ाइल की पुष्टि करना