1. परिचय
आपको क्या बनाना होगा
Formula E AI Kiosk एक इंटरैक्टिव अनुभव है. इसे Gemini प्लैटफ़ॉर्म और Google GenAI Interactions API की मदद से तैयार किया गया है. उपयोगकर्ता अपनी फ़ोटो लेते हैं और फ़ॉर्मूला ई का कोई सीन चुनते हैं. जैसे, पोडियम पर जश्न मनाना या पिट लेन से लॉन्च करना. इसके बाद, Gemini उन्हें Gen4 इलेक्ट्रिक रेस कार के साथ फ़ॉर्मूला ई रेस ड्राइवर के तौर पर दिखाता है.
इंटरैक्टिव लर्निंग फ़ोकस
इस कोडलैब में, Gemini प्लैटफ़ॉर्म (enterprise=True) पर Interactions API का इस्तेमाल करके, जनरेटिव एआई का मुख्य लॉजिक लिखा जाएगा. आपको इनके लिए कोड के मुख्य गैप भरने होंगे:
- क्लाइंट को शुरू करना: Gemini प्लैटफ़ॉर्म के लिए
genai.Client(enterprise=True)को शुरू करना. - Gemini 3.8 Flash: डिक्शनरी पर आधारित मल्टीमॉडल इनपुट (
[{"type": "text", ...}, {"type": "image", ...}]) औरgeneration_config={"thinking_level": "high", "temperature": 0.2}का इस्तेमाल करके, उपयोगकर्ता की फ़ोटो से ज़्यादा जानकारी वाला प्रॉम्प्ट जनरेट करना. - Nano Banana 2/2.1 (
gemini-3.1-flash-image or gemini-nano-banana-2.1): इमेज-टू-इमेज वाहन का आइकॉन और Gen4 लिवरी क्रिएशन, जिसमें ज़्यादा जानकारी वाले प्रॉम्प्ट का इस्तेमाल किया जाता है. - Gemini Omni 1.1 Flash (
gemini-omni-1.1-flash-preview):background=Trueका इस्तेमाल करके एसिंक्रोनस तरीके से वीडियो जनरेट करना औरclient.interactions.get()का इस्तेमाल करके पोल करना.
किसी भी समस्या के लिए चिंता न करें! कोडिंग की हर एक्सरसाइज़ में, 💡 Solution & Explanation ब्लॉक शामिल होता है. अगर आपको कोई समस्या आती है, तो पूरा कोड और पैरामीटर की जानकारी देखने के लिए स्क्रोल करें.
नॉन-एआई सेटअप के चरणों (शेल स्कैफ़ोल्डिंग, Docker कॉन्फ़िगरेशन, और Cloud Run डिप्लॉयमेंट) को कॉपी-पेस्ट करने के आसान कमांड के तौर पर रखा गया है, ताकि आप Interactions API को बेहतर तरीके से इस्तेमाल करने पर ध्यान दे सकें.
कोर ब्रैंडिंग और ऐसेट
एसेट | ब्यौरा | सोर्स यूआरएल |
Gen4 Formula E Car | चौथी जनरेशन की पूरी तरह से इलेक्ट्रिक रेस कार का आधिकारिक रेफ़रंस |
|
Formula E x Google Cloud का लोगो | को-ब्रैंडेड ट्रांसपेरेंट लोगो |
|
Google Sans Regular फ़ॉन्ट | ब्रैंड की आधिकारिक टाइपोग्राफ़ी |
|
Google Sans Medium फ़ॉन्ट | ब्रैंड की आधिकारिक टाइपोग्राफ़ी |
|
2. 🛠️ एनवायरमेंट सेटअप और प्रोजेक्ट स्कैफ़ोल्डिंग
मॉड्यूलर सीएलआई कमांड का इस्तेमाल करके, सीधे Cloud Shell में वर्कस्पेस डायरेक्ट्री और प्रोजेक्ट फ़ाइलें बनाई जा सकती हैं.
1. Cloud Shell खोलना और प्रोजेक्ट डायरेक्ट्री बनाना
👉 अपने ब्राउज़र में Cloud Shell Editor खोलें.
👉💻 वर्कस्पेस का स्ट्रक्चर बनाएं:
mkdir -p ~/fe-genmedia-kiosk/{backend/app/{routers,services,prompts},frontend/{public/fonts,src},scripts}
cd ~/fe-genmedia-kiosk
2. ज़रूरी Google Cloud API चालू करना
👉💻 अपना मौजूदा प्रोजेक्ट आईडी सेट करें और ज़रूरी सेवाएं चालू करें:
export PROJECT_ID=$(gcloud config get-value project)
echo "Using Project ID: $PROJECT_ID"
gcloud services enable \
run.googleapis.com \
cloudbuild.googleapis.com \
aiplatform.googleapis.com \
storage.googleapis.com \
artifactregistry.googleapis.com \
compute.googleapis.com
3. सेवा खाता बनाना और आईएएम अनुमतियां कॉन्फ़िगर करना
ध्यान दें कि अगर संगठन के GCP खाते का इस्तेमाल किया जा रहा है और सेवा खाता जनरेट नहीं किया जा सकता, तो आपके पास पहले से कॉन्फ़िगर की गई अनुमतियों वाला डिफ़ॉल्ट Compute Engine सेवा खाता होगा.
👉💻 रनटाइम सेवा खाते और Cloud Build के लिए, कॉन्फ़िगरेशन कमांड चलाएं:
# 1. Configure Cloud Build permissions for default Compute Service Account
# (Cloud Run source deployments use Cloud Build and the default Compute Engine SA)
export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format="value(projectNumber)")
for role in roles/storage.admin roles/logging.logWriter roles/artifactregistry.writer; do
gcloud projects add-iam-policy-binding $PROJECT_ID \
--member="serviceAccount:${PROJECT_NUMBER}-compute@developer.gserviceaccount.com" \
--role="$role"
done
# 2. Create Cloud Storage Bucket
export BUCKET_NAME="fe-genmedia-kiosk-${PROJECT_ID}"
gcloud storage buckets create gs://${BUCKET_NAME} --location=us-central1
# 3. Configure CORS for web browser uploads
cat << 'EOF' > cors.json
[
{
"origin": ["*"],
"method": ["GET", "POST", "PUT", "DELETE", "HEAD"],
"responseHeader": ["*"],
"maxAgeSeconds": 3600
}
]
EOF
gcloud storage buckets update gs://${BUCKET_NAME} --cors-file=cors.json
4. Formula E की ब्रैंड ऐसेट डाउनलोड करें
👉💻 को-ब्रैंडेड ऐसेट को अपने सार्वजनिक फ़ोल्डर में फ़ेच करें:
cd ~/fe-genmedia-kiosk/frontend/public
# Download Co-Branded Logo
curl -o formula_e_gc_logo.webp "https://storage.googleapis.com/fe-demo-branding/formula_e_gc_logo_transparent.webp"
# Download Gen4 Reference Car Image
curl -o gen4_car_reference.jpg "https://resources.formula-e.pulselive.com/photo-resources/2026/04/21/7c76418b-85af-492c-8ba6-81dabd6f3b4c/JAZ_3586-FE-2026-Gen4-Unleashed-JazzVian-for-ParcFerme.jpg?width=1280"
# Download Typography
curl -o fonts/GoogleSans-Regular.ttf "https://storage.googleapis.com/fe-demo-branding/GoogleSans-Regular.ttf"
curl -o fonts/GoogleSans-Medium.ttf "https://storage.googleapis.com/fe-demo-branding/GoogleSans-Medium.ttf"
cd ~/fe-genmedia-kiosk
5. एनवायरमेंट और डिपेंडेंसी कॉन्फ़िगरेशन बनाना
👉💻 .env और backend/pyproject.toml बनाएं:
cat << EOF > .env
GOOGLE_CLOUD_PROJECT=${PROJECT_ID}
GOOGLE_CLOUD_LOCATION=global
GCS_BUCKET=${BUCKET_NAME}
GCS_SIGNING_SA=fe-kiosk-sa@${PROJECT_ID}.iam.gserviceaccount.com
EOF
cat << 'EOF' > backend/pyproject.toml
[project]
name = "fe-genmedia-backend"
version = "1.0.0"
description = "Formula E Generative Media Kiosk Backend"
dependencies = [
"fastapi>=0.110.0",
"uvicorn[standard]>=0.28.0",
"google-genai>=2.22.0",
"google-cloud-storage>=2.14.0",
"pydantic>=2.6.0",
"python-multipart>=0.0.9",
"pillow>=10.2.0",
"aiofiles>=23.2.0"
]
EOF
cat << 'EOF' > backend/app/config.py
import os
from pydantic import BaseModel
class Settings(BaseModel):
project_id: str = os.getenv("GOOGLE_CLOUD_PROJECT", "")
location: str = os.getenv("GOOGLE_CLOUD_LOCATION", "global")
gcs_bucket: str = os.getenv("GCS_BUCKET", "")
settings = Settings()
EOF
6. Seed Starter Gemini Service (backend/app/services/gemini_service.py)
👉💻 स्टार्टर सर्विस फ़ाइल बनाएं. इसमें, हैंड-ऑन चैलेंज के लिए स्कैफ़ोल्डिंग और TODO गैप शामिल करें. साथ ही, स्टार्टर कोड को कॉपी करके चिपकाएं:
touch backend/app/services/gemini_service.py
import base64
import json
import time
from google import genai
from google.genai import types
from google.cloud import storage
from app.config import settings
# =====================================================================
# TODO 1: Initialize the Google GenAI Client for Gemini Platform
# Use genai.Client() with enterprise=True, project, and location from settings.
# =====================================================================
client = None # REPLACE THIS WITH YOUR CODE
def upload_to_gcs(data_bytes: bytes, filename: str, content_type: str) -> str:
"""Uploads binary data to Cloud Storage bucket and returns public URL."""
storage_client = storage.Client()
bucket = storage_client.bucket(settings.gcs_bucket)
blob = bucket.blob(filename)
blob.upload_from_string(data_bytes, content_type=content_type)
return f"https://storage.googleapis.com/{settings.gcs_bucket}/{filename}"
def generate_driver_prompt(image_bytes: bytes, scene_option: str) -> str:
"""Uses Gemini 3.8 Flash via Interactions API to craft a detailed prompt from the driver photo."""
base64_image = base64.b64encode(image_bytes).decode("utf-8")
# =====================================================================
# TODO 2: Call client.interactions.create()
# Model: "gemini-3.8-flash"
# Input: list of dicts [{"type": "text", ...}, {"type": "image", "bytes": ..., "mime_type": "image/jpeg"}]
# Generation Config: {"thinking_level": "high", "temperature": 0.2}
# =====================================================================
interaction = None # REPLACE THIS WITH YOUR CODE
return interaction.output_text
def generate_driver_avatar(driver_prompt: str, image_bytes: bytes) -> bytes:
"""Uses Nano Banana 2 (gemini-3.1-flash-image) to generate stylized driver avatar."""
base64_image = base64.b64encode(image_bytes).decode("utf-8")
# =====================================================================
# TODO 3: Call client.interactions.create() for image generation
# Model: "gemini-3.1-flash-image"
# Input: list of dicts containing prompt text and input driver image
# Generation Config: {"aspect_ratio": "16:9", "output_mime_type": "image/png"}
# =====================================================================
interaction = None # REPLACE THIS WITH YOUR CODE
if interaction and interaction.output_image:
return base64.b64decode(interaction.output_image.data)
raise ValueError("Failed to generate avatar image.")
def generate_formula_e_video(driver_prompt: str, avatar_bytes: bytes) -> bytes:
"""Uses Gemini Omni Flash to generate an 8-second cinematic Formula E video."""
base64_avatar = base64.b64encode(avatar_bytes).decode("utf-8")
# =====================================================================
# TODO 4a: Start async video generation with 'gemini-omni-1.1-flash-preview'
# Input: list of dicts with avatar image and prompt text. Set background=True!
# =====================================================================
interaction = None # REPLACE THIS WITH YOUR CODE
# =====================================================================
# TODO 4b: Write polling loop with client.interactions.get(interaction.id)
# Loop every 5 seconds until status == "completed" or "failed".
# Return base64.b64decode(status_check.output_video.data)
# =====================================================================
while True:
# REPLACE THIS LOOP BODY WITH YOUR CODE
time.sleep(5)
3. ⚡ Interactions API और जनरेटिव मॉडल लागू करना
इस सेक्शन में, Gemini प्लैटफ़ॉर्म पर Interactions API और GenerateContent API का इस्तेमाल करके, backend/app/services/gemini_service.py में जनरेटिव एआई का मुख्य लॉजिक लिखा जाएगा.
Cloud Shell Editor में backend/app/services/gemini_service.py खोलें. आपको पूरा करने के लिए, चार 'पूरा करना बाकी है' चैलेंज गैप दिखेंगे.
पहला चैलेंज: Gemini Enterprise क्लाइंट को शुरू करना
backend/app/services/gemini_service.py खोलें. Gemini Enterprise (enterprise=True) के लिए कॉन्फ़िगर किए गए genai.Client को शुरू करके, TODO 1 को पूरा करें.
import base64
import json
import time
from google import genai
from google.genai import types
from app.config import settings
# =====================================================================
# TODO 1: Initialize the Google GenAI Client for Gemini Platform
# Use genai.Client() with enterprise=True, project, and location from settings.
# =====================================================================
client = None # REPLACE THIS WITH YOUR CODE
💡 क्या आपको कोई हिंट चाहिए या कहीं कोई समस्या आ रही है? स्क्रोल करके, TODO 1 का समाधान देखें
client = genai.Client(
enterprise=True,
project=settings.project_id,
location=settings.location
)
चैलेंज 2: gemini-3.8-flash की मदद से, ड्राइवर प्रॉम्प्ट को बेहतर बनाना
generate_driver_prompt() में TODO 2 को पूरा करें. ड्राइवर की फ़ोटो का विश्लेषण करने और Nano Banana 2 के लिए ज़्यादा जानकारी वाला प्रॉम्प्ट लिखने के लिए, gemini-3.8-flash का इस्तेमाल करें. input को डिक्शनरी की सूची पास करें और generation_config={"thinking_level": "high", "temperature": 0.2} पास करें.
def generate_driver_prompt(image_bytes: bytes, scene_option: str) -> str:
"""Uses Gemini 3.8 Flash via Interactions API to craft a detailed prompt from the driver photo."""
base64_image = base64.b64encode(image_bytes).decode("utf-8")
# =====================================================================
# TODO 2: Call client.interactions.create()
# Model: "gemini-3.8-flash"
# Input: list of dicts [{"type": "text", ...}, {"type": "image", "bytes": ..., "mime_type": "image/jpeg"}]
# Generation Config: {"thinking_level": "high", "temperature": 0.2}
# =====================================================================
interaction = None # REPLACE THIS WITH YOUR CODE
return interaction.output_text
💡 क्या आपको कोई हिंट चाहिए या कहीं कोई समस्या आ रही है? TODO 2 का समाधान देखने के लिए क्लिक करें
interaction = client.interactions.create(
model="gemini-3.8-flash",
input=[
{"type": "text", "text": f"Analyze this photo and write a prompt describing this person as a Formula E race driver in a high-tech suit for a {scene_option} scene beside a Gen4 car."},
{"type": "image", "bytes": base64_image, "mime_type": "image/jpeg"}
],
generation_config={
"thinking_level": "high",
"temperature": 0.2
}
)
तीसरा चैलेंज: Nano Banana 2 की मदद से अवतार जनरेट करना (GenerateContent API के ज़रिए gemini-3.1-flash-image)
generate_driver_avatar() में TODO 3 को पूरा करें. gemini-3.1-flash-image (Nano Banana 2) की मदद से client.models.generate_content() को कॉल करें, ताकि Formula E ड्राइवर के अवतार और Gen4 कार को रेंडर किया जा सके.
def generate_driver_avatar(driver_prompt: str, image_bytes: bytes) -> bytes:
"""Uses Nano Banana 2 (gemini-3.1-flash-image) to generate stylized driver avatar."""
text_parts = types.Part.from_text(text=f"Generate a stylized Formula E driver portrait: {driver_prompt}")
image_parts = types.Part.from_bytes(data=image_bytes,
mime_type='image/jpeg',)
gen4_image_parts = types.Part.from_uri(file_uri="https://coffeecornermotorsport.com/wp-content/uploads/2026/04/m37258_GEN4-HERO3.webp", mime_type="image/webp")
# =====================================================================
# TODO 3: Call client.models.generate_content() for image generation
# Model: "gemini-3.1-flash-image" or "gemini-nano-banana-2.1"
# Content: A list with the parts
# Generation Config: Image Response Modality and 16:9 Aspect ratio
# =====================================================================
response = None # REPLACE THIS WITH YOUR CODE
generated_bytes = None
if response.candidates and response.candidates[0].content.parts:
for part in response.candidates[0].content.parts:
if part.inline_data and part.inline_data.data:
generated_bytes = part.inline_data.data
break
return base64.b64encode(generated_bytes).decode('utf-8')
💡 क्या आपको कोई हिंट चाहिए या कोई समस्या आ रही है? तीसरे टास्क का समाधान देखने के लिए स्क्रोल करें
response = client.models.generate_content(
model="gemini-3.1-flash-image", # Or "gemini-nano-banana-2.1"
content=[text_parts, image_parts, gen4_image_parts],
config=types.GenerateContentConfig(
response_modalities=["IMAGE"],
image_config=types.ImageConfig(aspect_ratio="16:9"),
)
)
चौथा चैलेंज: Gemini Omni 1.1 Flash की मदद से वीडियो जनरेट करना
generate_formula_e_video() में TODO 4 को पूरा करें. background=True का इस्तेमाल करके, gemini-omni-1.1-flash-preview के साथ एसिंक्रोनस वीडियो इंटरैक्शन शुरू करें. इसके बाद, स्टेटस "पूरा हो गया" होने तक client.interactions.get() को पोल करें और base64-डिकोड किए गए वीडियो बाइट (output_video.data) दिखाएं.
def generate_formula_e_video(driver_prompt: str, avatar_bytes: bytes) -> bytes:
"""Uses Gemini Omni 1.1 Flash to generate an 8-second cinematic Formula E video."""
base64_avatar = base64.b64encode(avatar_bytes).decode("utf-8")
# =====================================================================
# TODO 4a: Start async video generation with 'gemini-omni-1.1-flash-preview'
# Input: list of dicts with avatar image and prompt text. Set background=True!
# =====================================================================
interaction = None # REPLACE THIS WITH YOUR CODE
# =====================================================================
# TODO 4b: Write polling loop with client.interactions.get(interaction.id)
# Loop every 5 seconds until status == "completed" or "failed".
# Return base64.b64decode(status_check.output_video.data)
# =====================================================================
while True:
# REPLACE THIS LOOP BODY WITH YOUR CODE
time.sleep(5)
💡 क्या आपको कोई हिंट चाहिए या कहीं कोई समस्या आ रही है? चौथे टास्क का समाधान देखने के लिए क्लिक करें
# TODO 4a Solution:
interaction = client.interactions.create(
model="gemini-omni-1.1-flash-preview",
input=[
{"type": "text", "text": f"Generate an 8-second 60fps cinematic video: {driver_prompt}. Formula E racing atmosphere."},
{"type": "image", "bytes": base64_avatar, "mime_type": "image/png"}
],
background=True
)
# TODO 4b Solution:
while True:
status_check = client.interactions.get(interaction.id)
if status_check.status == "completed":
return base64.b64decode(status_check.output_video.data)
elif status_check.status in ["failed", "cancelled"]:
raise RuntimeError(f"Video generation failed: {status_check.status}")
time.sleep(5)
4. 🏗️ मुख्य ऐप्लिकेशन और फ़्रंटएंड को असेंबल करना
अब ऐप्लिकेशन रैपर की बाकी फ़ाइलें, एपीआई एंडपॉइंट, और React इंटरफ़ेस बनाएं.
[!IMPORTANT] पक्का करें कि आपने इस सेक्शन में फ़ाइल बनाने के सभी कमांड, रूट फ़ोल्डर डायरेक्ट्री (~/fe-genmedia-kiosk) से चलाए हों.
👉💻 प्रोजेक्ट की रूट डायरेक्ट्री पर जाएं:
cd ~/fe-genmedia-kiosk
1. मुख्य FastAPI ऐप्लिकेशन (backend/app/main.py)
👉💻 backend/app/main.py बनाएं और यहां दिया गया Python कोड कॉपी करके चिपकाएं:
touch backend/app/main.py
from fastapi import FastAPI, UploadFile, File, Form, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
import asyncio
import uuid
from app.services.gemini_service import (
generate_driver_prompt,
generate_driver_avatar,
generate_formula_e_video,
upload_to_gcs
)
app = FastAPI(title="Formula E AI Kiosk API")
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
jobs_db = {}
class JobStatus(BaseModel):
job_id: str
status: str
stage: str
result_url: str | None = None
@app.get("/api/health")
def health_check():
return {"status": "ok", "experience": "Formula E Gen4 AI Kiosk"}
@app.post("/api/process-driver")
async def process_driver(
file: UploadFile = File(...),
option: str = Form("podium_celebration")
):
job_id = str(uuid.uuid4())
image_bytes = await file.read()
jobs_db[job_id] = {
"status": "processing",
"stage": "generating_prompt",
"result_url": None
}
asyncio.create_task(run_kiosk_pipeline(job_id, image_bytes, option))
return {"job_id": job_id, "status": "queued"}
async def run_kiosk_pipeline(job_id: str, image_bytes: bytes, option: str):
try:
jobs_db[job_id]["stage"] = "Writing driver prompt with Gemini 3.8 Flash..."
driver_prompt = generate_driver_prompt(image_bytes, option)
jobs_db[job_id]["stage"] = "Rendering Nano Banana 2 avatar..."
avatar_bytes = generate_driver_avatar(driver_prompt, image_bytes)
jobs_db[job_id]["stage"] = "Generating Gemini Omni Flash video..."
video_bytes = generate_formula_e_video(driver_prompt, avatar_bytes)
jobs_db[job_id]["stage"] = "Publishing generated video to Cloud Storage..."
result_url = upload_to_gcs(video_bytes, f"videos/{job_id}.mp4", "video/mp4")
jobs_db[job_id]["status"] = "completed"
jobs_db[job_id]["stage"] = "Done"
jobs_db[job_id]["result_url"] = result_url
except Exception as e:
jobs_db[job_id]["status"] = "failed"
jobs_db[job_id]["stage"] = str(e)
@app.get("/api/job/{job_id}", response_model=JobStatus)
def get_job_status(job_id: str):
if job_id not in jobs_db:
raise HTTPException(status_code=404, detail="Job not found")
data = jobs_db[job_id]
return JobStatus(
job_id=job_id,
status=data["status"],
stage=data["stage"],
result_url=data.get("result_url")
)
2. बैकएंड Dockerfile (backend/Dockerfile)
👉💻 बैकएंड कंटेनर कॉन्फ़िगरेशन बनाएं:
cat << 'EOF' > backend/Dockerfile
FROM python:3.11-slim
RUN apt-get update && apt-get install -y ffmpeg libgl1 libglib2.0-0 && rm -rf /var/lib/apt/lists/*
WORKDIR /app
COPY pyproject.toml .
RUN pip install --no-cache-dir .
COPY app/ ./app/
EXPOSE 8080
CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8080"]
EOF
3. फ़्रंटएंड React ऐप्लिकेशन और कॉन्फ़िगरेशन
फ़्रंटएंड कॉन्फ़िगरेशन और सोर्स फ़ाइलें सिलसिलेवार तरीके से बनाएं. इससे यह पक्का किया जा सकेगा कि हर फ़ाइल, Cloud Shell में बिना किसी गड़बड़ी के जनरेट हो और पेस्ट बफ़र से जुड़ी समस्याएं न आएं.
3.1 पैकेज मेनिफ़ेस्ट (frontend/package.json)
👉💻 फ़्रंटएंड डिपेंडेंसी की डेफ़िनिशन बनाएं:
cat << 'EOF' > frontend/package.json
{
"name": "fe-genmedia-frontend",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@vitejs/plugin-react": "^4.2.1",
"typescript": "^5.2.2",
"vite": "^5.1.6"
}
}
EOF
3.2 TypeScript कॉन्फ़िगरेशन (frontend/tsconfig.json)
👉💻 frontend/tsconfig.json बनाएं, ताकि TypeScript कंपाइलर (tsc) प्रोजेक्ट की पुष्टि कर सके और उसे बना सके:
cat << 'EOF' > frontend/tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": false
},
"include": ["src"]
}
EOF
3.3 Vite बिल्ड कॉन्फ़िगरेशन (frontend/vite.config.ts)
👉💻 Vite कॉन्फ़िगरेशन बनाएं:
cat << 'EOF' > frontend/vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
port: 8080,
host: true
}
});
EOF
3.4 एचटीएमएल एंट्री पॉइंट (frontend/index.html)
👉💻 रूट एचटीएमएल एंट्री पॉइंट बनाएं:
cat << 'EOF' > frontend/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Formula E AI Kiosk</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
EOF
3.5 ब्रैंड की स्टाइलशीट (frontend/src/index.css)
👉💻 Formula E के लिए, गहरे रंग वाले मोड की कस्टम थीम बनाएं:
cat << 'EOF' > frontend/src/index.css
@font-face {
font-family: 'Google Sans';
src: url('/fonts/GoogleSans-Regular.ttf') format('truetype');
font-weight: 400;
}
@font-face {
font-family: 'Google Sans';
src: url('/fonts/GoogleSans-Medium.ttf') format('truetype');
font-weight: 500;
}
body {
margin: 0;
font-family: 'Google Sans', sans-serif;
background-color: #0b0e14;
color: #ffffff;
}
.fe-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.fe-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: rgba(15, 23, 42, 0.8);
border-bottom: 2px solid #00e5ff;
}
.fe-btn {
background: linear-gradient(135deg, #00e5ff 0%, #0066ff 100%);
color: #000;
font-weight: bold;
padding: 0.8rem 2rem;
border: none;
border-radius: 30px;
cursor: pointer;
font-size: 1.1rem;
transition: all 0.2s ease;
}
.fe-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 229, 255, 0.4);
}
.fe-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.fe-btn-secondary {
background: rgba(30, 41, 59, 0.8);
color: #00e5ff;
border: 1px solid #00e5ff;
font-weight: bold;
padding: 0.6rem 1.6rem;
border-radius: 30px;
cursor: pointer;
font-size: 1rem;
transition: all 0.2s ease;
}
.fe-btn-secondary:hover:not(:disabled) {
background: rgba(0, 229, 255, 0.15);
box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}
.fe-card {
background: #151c28;
border: 1px solid #1e293b;
border-radius: 16px;
padding: 2rem;
margin: 1.5rem auto;
max-width: 720px;
}
.fe-tabs {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.fe-tab-btn {
background: #0f172a;
border: 1px solid #334155;
color: #94a3b8;
font-size: 1rem;
font-weight: 500;
padding: 0.6rem 1.4rem;
border-radius: 20px;
cursor: pointer;
transition: all 0.2s ease;
}
.fe-tab-btn.active {
background: #1e293b;
border-color: #00e5ff;
color: #00e5ff;
box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}
.fe-camera-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 1.5rem auto;
}
.fe-camera-feed-box {
position: relative;
width: 100%;
max-width: 480px;
aspect-ratio: 4/3;
background: #0b0e14;
border-radius: 12px;
overflow: hidden;
border: 2px solid #334155;
display: flex;
align-items: center;
justify-content: center;
}
.fe-video {
width: 100%;
height: 100%;
object-fit: cover;
transform: scaleX(-1);
}
.fe-captured-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.fe-alert {
background: rgba(239, 68, 68, 0.15);
border: 1px solid #ef4444;
color: #fca5a5;
padding: 0.8rem 1.2rem;
border-radius: 8px;
margin: 1rem auto;
max-width: 480px;
font-size: 0.95rem;
}
.fe-file-picker {
margin: 1.5rem 0;
}
.fe-file-picker input[type="file"] {
background: #0f172a;
border: 1px dashed #334155;
padding: 1.5rem;
border-radius: 12px;
color: #94a3b8;
width: 80%;
max-width: 400px;
cursor: pointer;
}
.fe-file-picker input[type="file"]:hover {
border-color: #00e5ff;
color: #ffffff;
}
EOF
3.6 React रूट कॉम्पोनेंट (frontend/src/main.tsx)
👉💻 React ऐप्लिकेशन की बूटस्ट्रैप फ़ाइल बनाएं:
cat << 'EOF' > frontend/src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
EOF
3.7 इंटरैक्टिव कीऑस्क यूज़र इंटरफ़ेस (frontend/src/App.tsx)
👉💻 App.tsx बनाकर और React कोड को कॉपी करके चिपकाएं. इससे, मुख्य इंटरैक्टिव कीऑस्क इंटरफ़ेस बन जाएगा:
touch frontend/src/App.tsx
import React, { useState, useRef, useEffect, useCallback } from 'react';
import './index.css';
export default function App() {
const [inputMode, setInputMode] = useState<'camera' | 'upload'>('camera');
const [file, setFile] = useState<File | null>(null);
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
const [cameraActive, setCameraActive] = useState<boolean>(false);
const [cameraError, setCameraError] = useState<string | null>(null);
const [option, setOption] = useState('podium_celebration');
const [jobId, setJobId] = useState<string | null>(null);
const [status, setStatus] = useState<string>('');
const [stage, setStage] = useState<string>('');
const [resultUrl, setResultUrl] = useState<string | null>(null);
const videoRef = useRef<HTMLVideoElement | null>(null);
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const streamRef = useRef<MediaStream | null>(null);
const stopCamera = useCallback(() => {
if (streamRef.current) {
streamRef.current.getTracks().forEach((track) => track.stop());
streamRef.current = null;
}
if (videoRef.current) {
videoRef.current.srcObject = null;
}
setCameraActive(false);
}, []);
const startCamera = useCallback(async () => {
stopCamera();
setCameraError(null);
try {
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
throw new Error('Camera is not supported on this browser or device.');
}
const stream = await navigator.mediaDevices.getUserMedia({
video: {
width: { ideal: 1280 },
height: { ideal: 720 },
facingMode: 'user',
},
audio: false,
});
streamRef.current = stream;
if (videoRef.current) {
videoRef.current.srcObject = stream;
await videoRef.current.play();
}
setCameraActive(true);
} catch (err: any) {
console.error('Error accessing camera:', err);
setCameraError(err.message || 'Unable to access camera. Please check permissions or switch to file upload.');
setCameraActive(false);
}
}, [stopCamera]);
useEffect(() => {
if (inputMode === 'camera' && !file && !jobId) {
startCamera();
} else {
stopCamera();
}
return () => {
stopCamera();
};
}, [inputMode, file, jobId, startCamera, stopCamera]);
const handleCapture = () => {
const video = videoRef.current;
const canvas = canvasRef.current;
if (!video || !canvas) return;
const width = video.videoWidth || 640;
const height = video.videoHeight || 480;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
if (!ctx) return;
// Flip horizontally to match selfie preview
ctx.translate(width, 0);
ctx.scale(-1, 1);
ctx.drawImage(video, 0, 0, width, height);
canvas.toBlob((blob) => {
if (!blob) return;
const capturedFile = new File([blob], `driver_photo_${Date.now()}.jpg`, {
type: 'image/jpeg',
});
setFile(capturedFile);
setPreviewUrl(URL.createObjectURL(blob));
stopCamera();
}, 'image/jpeg', 0.95);
};
const handleRetake = () => {
if (previewUrl) {
URL.revokeObjectURL(previewUrl);
}
setFile(null);
setPreviewUrl(null);
if (inputMode === 'camera') {
startCamera();
}
};
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const selected = e.target.files?.[0] || null;
if (selected) {
setFile(selected);
if (previewUrl) {
URL.revokeObjectURL(previewUrl);
}
setPreviewUrl(URL.createObjectURL(selected));
}
};
const handleModeChange = (mode: 'camera' | 'upload') => {
if (mode === inputMode) return;
if (previewUrl) {
URL.revokeObjectURL(previewUrl);
}
setFile(null);
setPreviewUrl(null);
setInputMode(mode);
};
const handleUpload = async () => {
if (!file) return;
stopCamera();
const formData = new FormData();
formData.append('file', file);
formData.append('option', option);
const apiBase = (import.meta as any).env.VITE_API_BASE || '';
const res = await fetch(`${apiBase}/api/process-driver`, { method: 'POST', body: formData });
const data = await res.json();
setJobId(data.job_id);
pollJob(data.job_id);
};
const pollJob = (id: string) => {
const apiBase = (import.meta as any).env.VITE_API_BASE || '';
const interval = window.setInterval(async () => {
try {
const res = await fetch(`${apiBase}/api/job/${id}`);
const data = await res.json();
setStatus(data.status);
setStage(data.stage);
if (data.status === 'completed') {
setResultUrl(data.result_url);
clearInterval(interval);
} else if (data.status === 'failed') {
clearInterval(interval);
}
} catch (err) {
console.error('Error polling job:', err);
}
}, 3000);
};
const handleReset = () => {
if (previewUrl) {
URL.revokeObjectURL(previewUrl);
}
setFile(null);
setPreviewUrl(null);
setJobId(null);
setStatus('');
setStage('');
setResultUrl(null);
};
return (
<div>
<header className="fe-header">
<img src="/formula_e_gc_logo.webp" alt="Formula E Google Cloud" height="45" />
<h2>GEN4 AI DRIVER EXPERIENCE</h2>
</header>
<main className="fe-container">
<h1>Transform into a Formula E Driver</h1>
<p>Powered by Gemini Platform & Google Cloud Run</p>
{!jobId ? (
<div className="fe-card">
<h3>Step 1: Take or Upload Your Driver Photo</h3>
<div className="fe-tabs">
<button
type="button"
className={`fe-tab-btn ${inputMode === 'camera' ? 'active' : ''}`}
onClick={() => handleModeChange('camera')}
>
📷 Take Photo
</button>
<button
type="button"
className={`fe-tab-btn ${inputMode === 'upload' ? 'active' : ''}`}
onClick={() => handleModeChange('upload')}
>
📁 Upload Photo
</button>
</div>
{/* Mode: Camera */}
{inputMode === 'camera' && (
<div className="fe-camera-container">
{cameraError && (
<div className="fe-alert">
<p>{cameraError}</p>
<button type="button" className="fe-btn-secondary" onClick={startCamera} style={ { marginTop: '0.5rem' } }>
Try Camera Again
</button>
</div>
)}
<div className="fe-camera-feed-box">
{!file ? (
<video
ref={videoRef}
className="fe-video"
autoPlay
playsInline
muted
/>
) : (
previewUrl && (
<img src={previewUrl} alt="Captured Driver" className="fe-captured-img" />
)
)}
</div>
<canvas ref={canvasRef} style={ { display: 'none' } } />
<div style={ { marginTop: '1rem', display: 'flex', gap: '0.75rem', justifyContent: 'center' } }>
{!file ? (
<button
type="button"
className="fe-btn"
onClick={handleCapture}
disabled={!cameraActive}
>
📸 Snap Photo
</button>
) : (
<button
type="button"
className="fe-btn-secondary"
onClick={handleRetake}
>
🔄 Retake Photo
</button>
)}
</div>
</div>
)}
{/* Mode: Upload */}
{inputMode === 'upload' && (
<div className="fe-file-picker">
{!file ? (
<input
type="file"
accept="image/*"
onChange={handleFileChange}
/>
) : (
<div>
{previewUrl && (
<div className="fe-camera-feed-box" style={ { margin: '0 auto 1rem auto' } }>
<img src={previewUrl} alt="Uploaded Driver" className="fe-captured-img" />
</div>
)}
<button type="button" className="fe-btn-secondary" onClick={handleRetake}>
Choose Different Photo
</button>
</div>
)}
</div>
)}
<h3>Step 2: Choose Your Experience</h3>
<select
value={option}
onChange={(e) => setOption(e.target.value)}
style={ { padding: '0.6rem 1rem', fontSize: '1rem', background: '#0f172a', color: '#fff', border: '1px solid #334155', borderRadius: '8px' } }
>
<option value="podium_celebration">🏆 Podium Winner Celebration</option>
<option value="pit_lane_launch">⚡ Pit Lane Gen4 Launch</option>
</select>
<div style={ { marginTop: '2rem' } }>
<button className="fe-btn" onClick={handleUpload} disabled={!file}>
START GENERATIVE PIPELINE
</button>
</div>
</div>
) : (
<div className="fe-card">
<h2>Pipeline Progress</h2>
<p><strong>Status:</strong> {status.toUpperCase() || 'INITIALIZING...'}</p>
<p><strong>Stage:</strong> {stage || 'Starting processing...'}</p>
{resultUrl && (
<div style={ { marginTop: '2rem' } }>
<h3>Your Formula E Generative Video</h3>
<video src={resultUrl} controls autoPlay loop style={ { width: '100%', maxWidth: '720px', borderRadius: '12px' } } />
</div>
)}
{(status === 'completed' || status === 'failed') && (
<div style={ { marginTop: '2rem' } }>
<button type="button" className="fe-btn-secondary" onClick={handleReset}>
CREATE ANOTHER DRIVER
</button>
</div>
)}
</div>
)}
</main>
</div>
);
}
3.8 Nginx सर्वर कॉन्फ़िगरेशन (frontend/nginx.conf)
👉💻 एक पेज के ऐप्लिकेशन की रूटिंग के लिए, Nginx वेब सर्वर कॉन्फ़िगरेशन बनाएं:
cat << 'EOF' > frontend/nginx.conf
server {
listen 8080;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
}
EOF
3.9 फ़्रंटएंड कंटेनर बिल्ड सेटअप (frontend/Dockerfile और frontend/.dockerignore)
👉💻 .dockerignore और अलग-अलग लेवल पर प्रोडक्शन की सुविधा Dockerfile:
cat << 'EOF' > frontend/.dockerignore
node_modules
dist
.git
EOF
touch frontend/Dockerfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json tsconfig.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 8080
5. 🚀 Cloud Run पर डिप्लॉय करना
1. बैकएंड कंटेनर बनाना और डिप्लॉय करना
👉💻 Cloud Run पर बैकएंड सर्वर को डिप्लॉय करें:
cd ~/fe-genmedia-kiosk/backend
gcloud run deploy fe-kiosk-backend \
--source . \
--region us-central1 \
--allow-unauthenticated \
--port 8080
2. फ़्रंटएंड कंटेनर बनाना और डिप्लॉय करना
बैकएंड का काम पूरा होने के बाद, उसका यूआरएल कैप्चर करें. इसके बाद, उसे सीधे .env.production में लिखें और फ़्रंटएंड को डिप्लॉय करें
cd ~/fe-genmedia-kiosk/frontend
# 1. Fetch Backend URL
export BACKEND_URL=$(gcloud run services describe fe-kiosk-backend \
--region us-central1 \
--format="value(status.url)")
echo "Configuring frontend with Backend URL: $BACKEND_URL"
# 2. Write it into the Vite production environment file
echo "VITE_API_BASE=${BACKEND_URL}" > .env.production
# 3. Deploy frontend (Vite will read .env.production during build)
gcloud run deploy fe-kiosk-frontend \
--source . \
--region us-central1 \
--allow-unauthenticated \
--port 8080
6. 🏁 Formula E एआई किऑस्क की टेस्टिंग और उसे आज़माना
$FRONTEND_URLको Google Chrome में खोलें.- कोई सेल्फ़ी या पोर्ट्रेट फ़ोटो अपलोड करें.
- रेसिंग का अपना पसंदीदा सीन चुनें (Podium Winner Celebration या Pit Lane Gen4 Launch).
- START GENERATIVE PIPELINE पर क्लिक करें.
- एआई के तीनों चरणों में रीयल-टाइम प्रोग्रेस देखें:
- Gemini 3.8 Flash: ड्राइवर प्रॉम्प्ट जनरेट करने के लिए.
- Nano Banana 2: Gen4 कार और रेस सूट अवतार को पसंद के मुताबिक रेंडर करना.
- Gemini Omni Flash: 60 एफ़पीएस पर आठ सेकंड का एचडी वीडियो जनरेट करने की सुविधा.
- जनरेटिव एआई से बनाए गए अपने वीडियो को चलाएं!
7. 🎉 निष्कर्ष और क्लीन-अप
आपने क्या सीखा
✅ Gemini Platform और Interactions API: genai.Client(enterprise=True) को शुरू करना और client.interactions.create() को कॉल करना.
✅ Interactions API का मल्टीमोडल डेटा स्कीमा: डिक्शनरी की सूची input और generation_config डिक्शनरी पैरामीटर का इस्तेमाल करना.
✅ मल्टीमोडल एआई पाइपलाइन:
gemini-3.8-flash: ड्राइवर के लिए, पसंद के मुताबिक प्रॉम्प्ट जनरेट किए जा रहे हैं.gemini-3.1-flash-image(Nano Banana 2): ड्राइवर का अवतार और Gen4 लिवरी बनाना.gemini-omni-1.1-flash-preview: बैकग्राउंड टास्क पोलिंग के साथ एसिंक्रोनस वीडियो जनरेशन.
✅ सर्वरलेस डिप्लॉयमेंट: Google Cloud Run पर कंटेनर में रखी गई और डिप्लॉय की गई सेवाएं.
संसाधन हटाना
👉💻 अपने Google Cloud एनवायरमेंट को क्लीन अप करें:
gcloud run services delete fe-kiosk-backend --region us-central1 --quiet
gcloud run services delete fe-kiosk-frontend --region us-central1 --quiet
gcloud storage rm -r gs://${BUCKET_NAME}
gcloud iam service-accounts delete fe-kiosk-sa@${PROJECT_ID}.iam.gserviceaccount.com --quiet