Migrating to Nano Banana 2: Enhancing Your Angular Firebase AI App

# Migrating to Nano Banana 2: Enhancing Your Angular Firebase AI App In the rapidly evolving world of AI, staying up-to-date with the latest models is crucial for performance and feature accessibility. In this guide, we’ll walk through the process of migrating an Angular application using Firebase AI Logic to the new **Nano Banana 2** model. We will also explore how to implement advanced features like "Thinking Levels," custom aspect ratios, and the use of experimental Angular Signal Forms. ## Introduction Nano Banana 2 (often associated with the Gemini 3.1 Flash series) brings significant improvements to image and content generation. Specifically, it introduces: - New aspect ratios (8:1 and 1:8). - High-resolution options (512px and up). - **Thinking Levels**: Allowing you to toggle between "Minimal" and "High" reasoning for complex generation tasks. Let’s dive into the architecture and the code changes required to make this transition. --- ## Architecture Overview The application follows a modern serverless AI architecture, leveraging the Google Cloud and Firebase ecosystem. ### Diagram Description 1. **Angular Frontend**: Handles the user interface, prompt input, and displays generated media. It uses **Signals** for reactive state management. 2. **Firebase Remote Config**: Acts as the central brain for model parameters, allowing you to swap model names or reasoning levels without redeploying code. 3. **Firebase AI Logic (Vertex AI for Firebase SDK)**: The bridge between the frontend and the Gemini/Nano Banana models. 4. **Media Generation**: Images generated via Nano Banana 2 can be piped into other models, such as **Veo 3.1**, to generate high-quality video content. ### Architectural Advice For a robust AI application, avoid hardcoding model parameters in your TypeScript files. Use **Firebase Remote Config** to manage `modelName`, `thinkingLevel`, and `location`. This allows for A/B testing and instant updates if a newer model version becomes available. --- ## Step 1: Update Firebase Remote Config The first step is updating your configuration in the Firebase Console. You need to point the application to the new model and define the thinking levels. **Key Changes:** - `geminiImageModelName`: Update to `gemini-3.1-flash-image-preview`. - `thinkingLevel`: Set to `HIGH` or `MINIMAL`. ### Remote Config JSON (Snippet) ```json { "geminiImageModelName": "gemini-3.1-flash-image-preview", "thinkingLevel": "HIGH", "vertexAlLocation": "us-central1" } ``` After updating the console, download the `remotemconfig.json` and sync it with your local project's default template. --- ## Step 2: Angular Service Configuration In the Angular app, you need to map the Remote Config values to the AI Logic generation parameters. ### `firebase.provider.ts` We update the generation config to include the `thinkingLevel`. Since this is an enum in the SDK, we map the string from Remote Config. ```typescript function getGenerativeAIImageModel(configService: ConfigService) { const { firebaseApp, remoteConfig } = configService.firebaseObjects; const modelName = getValue(remoteConfig, 'geminiImageModelName').asString(); const rawThinkingLevel = getValue(remoteConfig, 'thinkingLevel').asString(); // Map string to ThinkingLevel enum const thinkingLevel = rawThinkingLevel as keyof typeof ThinkingLevel; const modelParams: ModelParams = { model: modelName, generationConfig: { candidateCount: 1, thinkingConfig: { thinkingLevel: ThinkingLevel[thinkingLevel] } } }; return getGenerativeModel(getAI(firebaseApp), modelParams); } ``` --- ## Step 3: Prompt Workaround for Aspect Ratio & Resolution Currently, some Firebase AI Logic SDKs might not support `aspectRatio` or `resolution` as first-class parameters in the `generationConfig`. A reliable workaround is appending these instructions directly to the prompt. ### `prompt-form.component.ts` ```typescript onGenerateClick(event: Event) { event.preventDefault(); const inputValue = this.promptForm.value.prompt; const aspectRatio = this.genConfigValues().aspectRatio; const resolution = this.genConfigValues().resolution; let trimmedPrompt = inputValue; // Workaround: Append instructions to the prompt if (aspectRatio) { trimmedPrompt = `${trimmedPrompt} \nApply this aspect ratio to the image: ${aspectRatio}`; } if (resolution) { trimmedPrompt = `${trimmedPrompt} \nApply this resolution to the image: ${resolution}`; } this.generate.emit({ trimmedPrompt, inputValue }); } ``` --- ## Step 4: UI with Experimental Signal Forms To handle the dropdown selections for Aspect Ratio and Resolution, the app uses Angular's experimental **Signal Forms**. This provides a more reactive approach compared to standard Reactive Forms. ### `generate-options-form.component.html` ```html <form [formRoot]="generateConfigForm" class="flex flex-col gap-4"> <label>Aspect Ratio</label> <select [formField]="aspectRatio"> @for (opt of aspectRatios; track opt) { <option [value]="opt">{{ opt }}</option> } </select> <label>Resolution</label> <select [formField]="resolution"> @for (opt of resolutions; track opt) { <option [value]="opt">{{ opt }}</option> } </select> </form> ``` --- ## Conclusion Migrating to Nano Banana 2 allows developers to tap into higher-quality image generation and nuanced reasoning levels. By combining Angular Signals with Firebase Remote Config, you create a flexible architecture that can adapt to the next model update with minimal code changes. Happy coding! --- ## Resources - [Angular Signal Forms (Experimental)](https://github.com/angular/angular) - [Firebase AI Logic Documentation](https://firebase.google.com/docs/vertex-ai) - [Google AI Studio](https://aistudio.google.com/) - [Connie Leung on GitHub](https://github.com/connieleung)