Upgraded Photo Edit App to Gemini 3 Pro Image (a.k.a Nano Banana Pro)

In this video, I walk you through upgrading my Photo Edit App to run on the Gemini 3 Pro Image model. I show you how this migration unlocks some really cool capabilities, such as displaying the AI's internal "thinking process" directly in the UI and tracking specific "thought tokens" alongside standard input and output. I also demonstrate how the model leverages Google Search for grounding, enabling me to generate images from real-time data—such as the current weather in Beijing—while showcasing conversational editing and high-quality photo restoration. Finally, I walk through the code to explain my shift toward a more secure architecture, in which I use Firebase Remote Config and Cloud Functions to manage environment variables and API keys dynamically, rather than relying on local configuration files.

#angular #firebase #firebaseailogic #firebasecloudfunctions #firebaseremoteconfig #gemini3 #generativeai #nanobananapro #webdevelopment #AISprintH2

| Start | End | Caption |
| :--- | :--- | :--- |
| 00:00 | 02:31 | Introduction: Overview of migrating the Photo Edit App to Gemini 3 Pro Image, featuring new capabilities like "Thinking Process" visualization, token usage tracking, and Google Search grounding. |
| 02:31 | 05:26 | Demo 1: Generating an image of Beijing based on real-time weather, showcasing the AI's internal thought process, search queries, and token breakdown in the UI. |
| 05:26 | 07:47 | Demo 2: Conversational Editing: Using natural language to iteratively refine the generated image (adding text, changing weather) in a multi-turn chat. |
| 07:47 | 09:40 | Demo 3: Photo Restoration: colorizing a black-and-white photo, demonstrating high-quality image-to-image capabilities without external search data. |
| 09:40 | 11:16 | Architecture: Reviewing the Firebase Remote Config setup for managing model parameters and the Google Cloud Run function for secure configuration. |
| 11:16 | 13:46 | Testing: Demonstrating how to use the Firebase Emulator Suite to test Cloud Functions and application logic locally before deployment. |
| 13:46 | 17:48 | Code Walkthrough: Angular app initialization, showing how the `bootstrapFirebase` function fetches configuration dynamically at runtime. |
| 17:48 | 20:19 | Code Walkthrough: The backend Cloud Function logic that securely loads API keys and environment variables, removing secrets from client-side code. |
| 20:19 | 24:41 | Code Walkthrough: The `provideFirebase` factory function and dependency injection setup for passing configuration to the application. |

Google Cloud credits are provided for this project.