Gemini for Visual Content Creation

Visual content has become essential in modern web development, not just an optional enhancement. The ability to generate images on the fly, modify existing visuals through natural language instructions, and incorporate illustrations directly into your application opens up new possibilities for user engagement.

Google's Gemini models bring this functionality within reach for developers, enabling the construction of immersive interfaces that respond dynamically to user input.

How Gemini Approaches Image Generation

Gemini draws upon its extensive world knowledge to produce images that fit the context of your request, giving you visuals that carry meaning beyond simple pixel output. A key differentiator is its ability to combine textual and visual elements within a single response, making it well-suited for illustrated documentation, narrative content, and similar use cases. Additionally, Gemini is capable of rendering legible, well-formed text within images, which proves valuable for creating logos, promotional banners, and illustrated captions.

Integrating Image Generation with Angular and @google/genai

The most direct method for generating visuals involves passing a text description as the input.

Start by scaffolding a new Angular project using the Angular CLI, then add the Google AI package as a dependency:

pnpm install @google/genai
Enter fullscreen mode Exit fullscreen mode

Next, integrate Google AI into your Angular application. Below is a ready-to-use component that lets you experiment with Angular and AI immediately:

import { Component, signal } from '@angular/core';
import { GeneratedImage, GoogleGenAI } from '@google/genai';

@Component({
  selector: 'app-root',
  template: `
    <h1>Generate Images</h1>
    <input
      type="text"
      (keydown.enter)="send(input)"
      #input
      value="Teddy bear under the Eiffel Tower"
      style="width: 100%"
    />

    @if (pending()) {
    <div>loading...</div>
    } @for (item of generatedImages(); track item) {
    <img [src]="'data:image/png;base64,' + item.image?.imageBytes" alt="" />
    }
  `,
})
export class App {
  ai = new GoogleGenAI({ apiKey: 'YOUR_API_KEY_HERE' });
  pending = signal(false);
  generatedImages = signal<GeneratedImage[]>([]);

  async send(input: HTMLInputElement) {
    this.generatedImages.set([]);
    this.pending.set(true);

    const response = await this.ai.models.generateImages({
      model: 'imagen-4.0-generate-preview-06-06',
      prompt: input.value,
      config: {
        aspectRatio: '16:9',
        numberOfImages: 1,
      },
    });
    this.generatedImages.set(response.generatedImages || []);

    this.pending.set(false);
    input.value = '';
  }
}
Enter fullscreen mode Exit fullscreen mode

This Angular component uses Google's Generative AI to produce images from text prompts. It pulls in the necessary imports from @angular/core and @google/genai. The component instantiates a GoogleGenAI object using an API key and relies on signals for its reactive state: a pending signal tracks loading status, while generatedImages holds the resulting images.

The send method fires when the user submits a text prompt. It sets pending to true, wipes out any previous results, and invokes the ai.models.generateImages method with the prompt along with settings such as aspect ratio and image count. Once the response arrives, the images are pushed into the generatedImages signal, the loading indicator is turned off, and the input field is reset. The template shows a loading message whenever pending is true, sparingly rendering each generated image afterwards via its base64 encoded data.

Gemini-powered image generation opens up a range of practical applications across different industries.

For e-commerce, developers can build features that automatically generate product shots with tailored backgrounds or personalized captions, enriching the shopping journey. Educational platforms can produce illustrated guides and interactive learning aids, turning abstract topics into something more concrete and engaging.

Marketing professionals can use Gemini to craft tailored ad creatives, pairing relevant imagery with persuasive copy to boost campaign engagement. News organizations can automatically create visual digests for articles, and social platforms can offer users the ability to generate custom avatars or shareable visual content directly within their posts.

Gemini's ability to understand context and generate accurate, high-quality images empowers developers to build innovative solutions that cater to the specific needs of their users, transforming the way we interact with digital content.

In summary, Gemini models present a fresh way to weave dynamic, self-generated visuals into web applications. Thanks to Gemini's deep understanding of the world and its seamless integration of text with imagery, developers have the tools to craft user experiences that are both more engaging and more interactive. The smooth compatibility with Angular, facilitated by libraries like @google/genai, makes it straightforward to generate and manipulate images from within the application itself.

You can follow me on GitHub, where I'm building interesting projects.

Thanks for reading, and don't forget to show some love with a ❤️.
Until next time 👋

gioboa image

Giorgio Boa

Giorgio Boa is a full stack developer and the front-end ecosystem is his passion. He is also international public speaker, active in open source ecosystem, he loves learn and studies new things.