Migrating to Nano Banana 2: Enhancing Your Angular Firebase AI App In the rapidly evolving...

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)

{
  "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.

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

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

<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)
• Firebase AI Logic Documentation
• Google AI Studio
• Connie Leung on GitHub