Gemini Omni ও Cloud Run-এর সাহায্যে Formula E AI কিয়স্ক তৈরি ও ডিপ্লয় করা

১. ভূমিকা

আপনি কী তৈরি করবেন

Formula E AI Kiosk হল একটি ইন্টার‍্যাক্টিভ অভিজ্ঞতা যা Gemini Platform এবং Google GenAI Interactions API দ্বারা পরিচালিত। ব্যবহারকারীরা নিজেদের ফটো তোলেন, Formula E দৃশ্য (যেমন, পোডিয়ামে সেলিব্রেট করা বা পিট লেন থেকে লঞ্চ করা) বেছে নেন এবং Gemini-কে Gen4 ইলেকট্রিক রেস কার-এর পাশাপাশি Formula E রেস ড্রাইভার হিসেবে তাদের ট্রান্সফর্ম করতে দেন।

Kiosk Lab-এর জন্য সলিউশন ডায়াগ্রাম

ইন্টার‍্যাক্টিভ লার্নিং ফোকাস

এই কোডল্যাবে, আপনি Gemini প্ল্যাটফর্ম (enterprise=True)-এ Interactions API ব্যবহার করে মূল জেনারেটিভ AI লজিক লিখবেন। আপনি এগুলির জন্য মূল কোড গ্যাপ পূরণ করবেন:

  1. ক্লায়েন্ট ইনিশিয়ালাইজেশন: Gemini প্ল্যাটফর্মের জন্য genai.Client(enterprise=True) ইনিশিয়ালাইজ করা হচ্ছে।
  2. Gemini 3.8 Flash: ডিক্ট-ভিত্তিক মাল্টিমোডাল ইনপুট ([{"type": "text", ...}, {"type": "image", ...}]) এবং generation_config={"thinking_level": "high", "temperature": 0.2} ব্যবহার করে ব্যবহারকারীর ফটো থেকে একটি সমৃদ্ধ প্রম্পট তৈরি করা।
  3. Nano Banana 2/2.1 (gemini-3.1-flash-image or gemini-nano-banana-2.1): বিস্তারিত প্রম্পট ব্যবহার করে ইমেজ-টু-ইমেজ ড্রাইভার অবতার ও Gen4 লিভারি তৈরি করা।
  4. Gemini Omni 1.1 Flash (gemini-omni-1.1-flash-preview): background=True ব্যবহার করে অ্যাসিঙ্ক্রোনাস ভিডিও জেনারেশন এবং client.interactions.get() পোলিং।

কোথাও আটকে যাওয়ার চিন্তা নেই! প্রতিটি কোডিং এক্সারসাইজে একটি 💡 সমাধান ও ব্যাখ্যা ব্লক থাকে। আপনি কোনও সমস্যার সম্মুখীন হলে, সম্পূর্ণ কোড এবং প্যারামিটারের বিবরণ দেখতে স্ক্রল করুন।

AI-ভিত্তিক নয় এমন সেট-আপের ধাপগুলি (শেল স্ক্যাফোল্ডিং, Docker কনফিগারেশন এবং Cloud Run ডিপ্লয়মেন্ট) কপি-পেস্ট কমান্ড হিসেবে স্ট্রিমলাইন করা থাকে যাতে আপনি Interactions API-এর উপর সম্পূর্ণ মনোযোগ দিতে পারেন।

কোর ব্র্যান্ডিং ও অ্যাসেট

অ্যাসেট

বিবরণ

উৎস URL

Gen4 Formula E Car

অফিসিয়াল Gen4 অল-ইলেকট্রিক রেস কার রেফারেন্স

https://coffeecornermotorsport.com/wp-content/uploads/2026/04/m37258_GEN4-HERO3.webp

Formula E x Google Cloud লোগো

কো-ব্র্যান্ডেড ট্রান্সপারেন্ট লোগো

https://storage.googleapis.com/fe-demo-branding/formula_e_gc_logo_transparent.webp

Google Sans Regular Font

অফিসিয়াল ব্র্যান্ড টাইপোগ্রাফি

https://storage.googleapis.com/fe-demo-branding/GoogleSans-Regular.ttf

Google Sans Medium Font

অফিসিয়াল ব্র্যান্ড টাইপোগ্রাফি

https://storage.googleapis.com/fe-demo-branding/GoogleSans-Medium.ttf

২. 🛠️ এনভায়রনমেন্ট সেট-আপ ও প্রোজেক্ট স্ক্যাফোল্ডিং

আপনি মডিউলার CLI কমান্ড ব্যবহার করে সরাসরি Cloud Shell-এ ওয়ার্কস্পেস ডিরেক্টরি ও প্রোজেক্ট ফাইল তৈরি করবেন।

১. Cloud Shell খুলুন ও প্রোজেক্ট ডিরেক্টরি তৈরি করুন

👉 আপনার ব্রাউজারে Cloud Shell Editor খুলুন।

👉💻 ওয়ার্কস্পেসের স্ট্রাকচার তৈরি করুন:

mkdir -p ~/fe-genmedia-kiosk/{backend/app/{routers,services,prompts},frontend/{public/fonts,src},scripts}
cd ~/fe-genmedia-kiosk

২. প্রয়োজনীয় 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

৩. পরিষেবা অ্যাকাউন্ট তৈরি ও IAM অনুমতি কনফিগার করা

মনে রাখবেন, আপনি যদি কোনও প্রতিষ্ঠানের 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

৪. 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

৫. এনভায়রনমেন্ট ও ডিপেন্ডেন্সি কনফিগারেশন তৈরি করুন

👉💻 .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

৬. Seed Starter Gemini পরিষেবা (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)

৩. ⚡ Interactions API ও জেনারেটিভ মডেল প্রয়োগ করা

এই বিভাগে, আপনি Gemini প্ল্যাটফর্মে Interactions API এবং GenerateContent API ব্যবহার করে backend/app/services/gemini_service.py-এ মূল জেনারেটিভ AI লজিক লিখবেন।

Cloud Shell এডিটরে backend/app/services/gemini_service.py খুলুন। আপনি সম্পূর্ণ করার জন্য চারটি TODO চ্যালেঞ্জ গ্যাপ দেখতে পাবেন।

চ্যালেঞ্জ ১: 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
)

চ্যালেঞ্জ ২: 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-এর সাহায্যে অবতার জেনারেশন (gemini-3.1-flash-image GenerateContent API-এর মাধ্যমে)

generate_driver_avatar()-এ TODO 3 সম্পূর্ণ করুন। স্টাইলাইজড Formula E ড্রাইভার অবতার এবং Gen4 কার রেন্ডার করতে gemini-3.1-flash-image (Nano Banana 2) সহ client.models.generate_content() কল করুন।

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

💡 কোনও ইঙ্গিত প্রয়োজন নাকি আটকে গেছেন? TODO 3-এর সমাধান দেখতে স্ক্রল করুন

    
    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 4-এর সমাধান বড় করতে ক্লিক করুন

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

৪. 🏗️ মূল অ্যাপ্লিকেশন ও ফ্রন্টএন্ড অ্যাসেম্বল করা হচ্ছে

এখন বাকি অ্যাপ্লিকেশন র‍্যাপার ফাইল, API এন্ডপয়েন্ট এবং React ইন্টারফেস তৈরি করুন।

[!IMPORTANT] এই বিভাগে ফাইল তৈরি করার সব কমান্ড রুট ওয়ার্কস্পেস ডিরেক্টরি (~/fe-genmedia-kiosk) থেকে রান করছেন কিনা তা নিশ্চিত করুন।

👉💻 প্রোজেক্টের রুট ডিরেক্টরিতে নেভিগেট করুন:

cd ~/fe-genmedia-kiosk

১. প্রধান 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")
    )

২. ব্যাকএন্ড 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

৩. ফ্রন্টএন্ড React অ্যাপ্লিকেশন ও কনফিগারেশন

পেস্ট বাফার সংক্রান্ত সমস্যা ছাড়াই Cloud Shell-এ প্রতিটি ফাইল যাতে পরিষ্কারভাবে তৈরি হয় তা নিশ্চিত করতে ধাপে ধাপে ফ্রন্টএন্ড কনফিগারেশন এবং সোর্স ফাইল তৈরি করুন।

৩.১ প্যাকেজ ম্যানিফেস্ট (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

৩.২ 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

৩.৩ 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

৩.৪ HTML এন্ট্রি পয়েন্ট (frontend/index.html)

👉💻 রুট 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

৩.৫ ব্র্যান্ড স্টাইলশিট (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

৩.৬ React Root Component (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

৩.৭ ইন্টার‍্যাক্টিভ কিয়স্ক UI (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>
  );
}

৩.৮ 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 Container Build Setup (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

৫. 🚀 Cloud Run-এ ডিপ্লয় করা হচ্ছে

১. ব্যাকএন্ড কন্টেনার তৈরি ও ডিপ্লয় করা

👉💻 Cloud Run-এ ব্যাকএন্ড সার্ভার ডিপ্লয় করুন:

cd ~/fe-genmedia-kiosk/backend

gcloud run deploy fe-kiosk-backend \
  --source . \
  --region us-central1 \
  --allow-unauthenticated \
  --port 8080

২. ফ্রন্টএন্ড কন্টেনার তৈরি ও ডিপ্লয় করুন

ব্যাকএন্ডের কাজ শেষ হয়ে গেলে, এর URL ক্যাপচার করুন, সরাসরি .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

৬. 🏁 Formula E AI Kiosk পরীক্ষা ও অভিজ্ঞতা নেওয়া

  1. Google Chrome-এ $FRONTEND_URL খুলুন।
  2. সেলফি বা পোর্ট্রেট ফটো আপলোড করুন।
  3. আপনার রেসিং সিনারিও (পোডিয়াম উইনার সেলিব্রেশন অথবা পিট লেন Gen4 লঞ্চ) বেছে নিন।
  4. জেনারেটিভ পাইপলাইন শুরু করুন বিকল্পে ক্লিক করুন।
  5. তিনটি AI স্টেজে রিয়েল-টাইম প্রোগ্রেস দেখুন:
    • Gemini 3.8 Flash: ড্রাইভার প্রম্পট জেনারেশন।
    • Nano Banana 2: কাস্টম Gen4 কার ও রেস স্যুট অবতার রেন্ডারিং।
    • Gemini Omni Flash: ৮-সেকেন্ডের ৬০fps HD ভিডিও জেনারেশন।
  6. আপনার ফাইনাল জেনারেটিভ ভিডিও প্লেব্যাক করুন!

৭. 🎉 উপসংহার ও ক্লিন-আপ

আপনি যা শিখেছেন

✅ Gemini Platform ও Interactions API: genai.Client(enterprise=True) শুরু করা ও client.interactions.create() কল করা।

✅ Interactions API মাল্টিমোডাল ডেটা স্কিমা: list-of-dicts input এবং generation_config dict প্যারামিটার ব্যবহার করা।

✅ মাল্টিমোডাল AI পাইপলাইন:

  • 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