DEV Community: Amine ZAMANI

🌍✨ MapShot : From Landmarks to Local Shops: Capture Yourself Anywhere using Gemini-2.5-flash-image-preview

Amine ZAMANI — Sun, 14 Sep 2025 22:25:43 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

An applet that lets users create realistic travel photos of themselves in iconic places (New York, Rome, Amsterdam, Marrakesh, etc.).
The user takes a live photo, then enters a studio to:

pick a city and either a curated landmark or a precise spot via a 3D map,

tune scene parameters (day/night, weather, clothing style, selfie vs normal),

optionally use voice to navigate the map to a place.

Two generation modes:

Immersive Map → Street View (2-step compose): user positions a virtual camera; the app captures the center lat/lng, fetches a Street View image for that location, then composes the user into that background with Gemini.

Landmark Grid (text-to-image compose): user picks a famous place; the app describes the place (no Street View fetch) and asks Gemini to generate the scene + integrate the user.

Demo

CANVA VIDEO DEMO 🎥

YOUTUBE VIDEO DEMO 🎥

LIVE DEMO 📸

Take a live photo in-app 📸
Choose a city 🌍
Select Landmark (grid) or switch to Map and place the camera at the exact spot 🗺️
Adjust time, weather, clothing, selfie/normal ✨
Generate → preview → download/share the image 🎉

(Optional) Say: “Navigate to Times Square” → the map centers there via voice command

How I Used Google AI Studio

Gemini 2.5 Flash (text)

Parse voice commands into a {placeName, lat, lng} result.
Build the final scene prompt (lighting, outfit, style, constraints).

Gemini 2.5 Flash Image (image)

Image-to-image compose: merge the user’s live photo with either (a) Street View background (map mode) or (b) text-described landmark scene (grid mode).
Enforce constraints (single subject, photorealism, perspective/lighting consistency).

Models used in code:

gemini-2.5-flash (text) for NLU & JSON extraction
gemini-2.5-flash-image-preview (image) for generation/compose

Multimodal Features

Pipeline A — Immersive Map → Street View → Compose (2 steps)
Step A1. 3D Map camera placement

API: Google Maps JS API (v=beta) with libraries=maps3d,marker
Component: Web Component (props: center, range, tilt, heading)
Action: User moves camera; we read center lat/lng from the map element.
Optional: Voice navigation (see Step A0).

Step A0. Voice → Place → Lat/Lng (optional)

API (browser): Web Speech API (webkitSpeechRecognition) for STT
AI: gemini-2.5-flash to interpret the transcript and return JSON:

{ "placeName": "Times Square", "lat": 40.7580, "lng": -73.9855 }

Action: Fly the camera to that coordinate via flyCameraTo.

Step A2. Fetch Street View

API: Street View Static API

GET https://maps.googleapis.com/maps/api/streetview/metadata?location={lat},{lng}&key=GMAP_API_KEY (check availability)

GET https://maps.googleapis.com/maps/api/streetview?size=640x480&location={lat},{lng}&fov=90&heading=…&pitch=…&key=GMAP_API_KEY

Output: background image (base64) for the exact spot.

Step A3. Compose with Gemini (image)

Model: gemini-2.5-flash-image-preview
Inputs:

Inline image 1 = user live photo (base64)

Inline image 2 = Street View background (base64)

Text prompt = scene params (time, weather, clothing, selfie/normal) + constraints (1 person only, photorealism, light/shadow match).

Output: final image (base64, shown + downloadable).

Pipeline B — Landmark Grid → Text-described Scene → Compose
Step B1. Select a famous place

Data: curated places[] per city (name + description).
No Street View call in this mode.

Step B2. Generate with Gemini (image)

Model: gemini-2.5-flash-image-preview
Inputs:

Inline image 1 = user live photo (base64)

Text prompt = detailed scene description of the landmark (lighting, weather, outfit, selfie/normal, constraints).

Output: final photorealistic image.

Multimodal Features (Why it helps)

3D map + camera metaphors: users choose the exact angle and spot, leading to more believable compositions.
Voice navigation: faster targeting of places (hands-free) before capture.
Dual generation paths: precision (Street View background) or speed (landmark text scene).
One-tap export: download/share directly.

✨Vocabia: Multilingual Story-Based Vocabulary Learning with Gemini 2.5 Flash & Imagen 4.0

Amine ZAMANI — Thu, 11 Sep 2025 20:02:23 +0000

What I Built

I built Vocabia, an app that helps students at three levels—Primary, Middle School, and High School—enrich their vocabulary in three languages (English, French, Spanish).

Instead of passively reading, learners actively rebuild stories sentence by sentence:

Each sentence is broken down into words.

Learners must connect the words in the correct order.

They can flip any word to see its translation in the other two languages.

If the word represents a physical object, they can view a flashcard-style image of it.

A timer adds challenge and motivation.

Once the story is completed, Vocabia reads it aloud and generates a single illustration that represents the whole narrative.

Vocabia transforms vocabulary building into an interactive, visual, and multilingual journey.

Demo

Here’s a walkthrough of Vocabia in action:

Choose a difficulty level (Primary / Middle School / High School).

Choose a language (English / Français / Español).

Connect the word nodes to form sentences.

Flip words to see translations in two other languages.

If it’s an object, view a flashcard-style image.

Complete all sentences before time runs out.

Get the narrated story + a generated illustration as a reward.

Visual presentation

Word linking (React Flow graph)

Flip-to-translate feature

Object image pop-up

Confetti on success

Final story narration + illustration

Video Demo 🎥

Live demo 🚀

How I Used Google AI Studio

I leveraged Google AI Studio to integrate Gemini’s multimodal capabilities into Vocabia:

Story generation (Gemini 2.5 Flash) → Generates stories in structured JSON format (sentences → words → translations → object flag).

Per-word translation & classification → For each word, Gemini provides translations in the two other languages and identifies whether it’s a visualizable object.

Per-word images (Imagen 4.0) → Generates simple flashcard-like images of objects (clean white background, no text).

Final story illustration (Imagen 4.0) → Generates a single, colorful illustration summarizing the entire story.

Code generation & debugging → Gemini helped scaffold React components, manage state transitions, and integrate React Flow.

This mix of AI-driven structured outputs and image generation made Vocabia both engaging for learners and efficient to build.

Multimodal Features

Vocabia enhances the learning experience through multimodality:

Text → Structured JSON: Gemini generates coherent stories broken down word by word.

Text + Image Generation: Each object word gets a visual flashcard image, reinforcing memory.

Text → Full Story Illustration: Completed stories are turned into illustrations to reward learners.

Text-to-Speech: Stories are read aloud for pronunciation and listening practice.

By combining language learning, storytelling, visuals, and narration, Vocabia delivers an immersive, playful, and multilingual experience.

Travel360 : ✈️ Explore, 📸 Selfie — Boosted by Gemini-2.5-flash-image-preview

Amine ZAMANI — Sat, 06 Sep 2025 00:29:31 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

I built Travel360, an app that offers guided tours of a city’s top landmarks through Google Maps’ immersive 3D view. Along the journey, users can capture AI-powered selfies at iconic spots.

Travel360 turns repetitive selfies into unique, shareable moments and makes city exploration fun, accessible, and engaging — without the cost or limits of physical travel.

With just a camera or a simple drag & drop, Gemini’s Nano Banana AI instantly places users in front of world-famous monuments like Times Square, Tower Bridge, or the Statue of Liberty.

💡 Update: From my original Travel360 idea, I created MapShot — a more refined version with a pretty design and extra multimodal features.
Discover the MapShot submission here 👉 : MapShot

Demo

Here’s a walkthrough of Travel360 in action:

1) Navigate to a city in immersive view : https://travel360-50134736379.us-west1.run.app/

2) Click on start tour

3) Upload or take a selfie using camera.

4) Generate a realistic selfie in the selected place.

👁️ Canva Visual presentation

👁️ Youtube Visual presentation

Current deployed version demos (added features : quick capture mode, and selfie custom weather & daytime) : View NEW live demo :

🎥 Canva Video Demo

🎥 Youtube Video Demo

How I Used Google AI Studio

I leveraged Google AI Studio to bring Gemini’s multimodal capabilities into Travel360 and speed up development:

Code & Debugging Support: Gemini helped generate React/TypeScript snippets, fix bugs, and streamline integration with Google Maps immersive 3D view.
Landmark Data: Gemini suggested the best places to feature in each city and provided their geographic coordinates to build a guided tour experience.
Selfie Generation (Prototype): With Gemini Nano Banana, I connected uploaded user images with context prompts (e.g., “Place the user at Times Square”) to generate realistic selfies at landmarks.
Multimodal Flow: Gemini processed both image + text inputs and produced image outputs, enabling a seamless flow between the guided city tour and selfie creation.

This mix of AI-assisted development and multimodal integration made Travel360 both faster to build and more engaging to use.

Multimodal Features

Travel360 enhances the user experience through multimodality in several ways:

Image + Text Inputs → users upload a photo and Gemini interprets instructions (via prompt) about where to place them.

Immersive Map + AI Output → Google Maps 3D provides the navigation, while Gemini (gemini-2.5-flash-image-preview) generates a personalized selfie at the selected landmark.

By combining the Google Maps immersive API with Gemini’s multimodal image generation API, Travel360 delivers a unique and playful experience — making every city feel instantly accessible.