Khám Phá Sáng Tạo: Tạo Hình Ảnh Với Gemini và Angular

Trong bối cảnh phát triển web ngày càng thay đổi, hình ảnh hấp dẫn không còn là một sự xa xỉ mà là một nhu cầu thiết yếu. Hãy tưởng tượng bạn có thể tạo ra những hình ảnh tuyệt đẹp một cách động, chỉnh sửa những hình ảnh hiện có bằng ngôn ngữ tự nhiên, và thậm chí lồng ghép các hình minh họa một cách liền mạch vào nội dung của bạn – tất cả từ ứng dụng web của bạn.

Với các mô hình Gemini của Google, khả năng mạnh mẽ này giờ đây đã nằm trong tầm tay, giúp các nhà phát triển xây dựng những trải nghiệm thực sự sống động và tương tác.

Gemini cho Tạo Hình Ảnh

Gemini tận dụng kiến thức rộng lớn của nó để tạo ra những hình ảnh có liên quan đến ngữ cảnh, giúp hình ảnh của bạn trở nên có ý nghĩa hơn. Khác với các mô hình chỉ sản xuất hình ảnh, Gemini có thể kết hợp liền mạch văn bản và hình ảnh trong một phản hồi duy nhất, hoàn hảo cho các hướng dẫn minh họa, câu chuyện và hơn thế nữa. Gemini nổi bật trong việc tạo ra hình ảnh với văn bản chính xác và chất lượng cao, lý tưởng cho logo, banner, hoặc hình minh họa có chú thích.

Tạo Hình Ảnh Với Angular và @google/genai

Cách đơn giản nhất để tạo ra hình ảnh là cung cấp một gợi ý văn bản.

Bạn có thể khởi động một ứng dụng Angular bằng Angular CLI và cài đặt Google AI cần thiết:

pnpm install @google/genai

Sau đó, hãy sử dụng Google AI trong ứng dụng Angular của bạn. Đây là một thành phần sẵn sàng để sao chép và bắt đầu làm việc với Angular và AI.

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Tạo Hình Ảnh</h1>
    <input
      type="text"
      (keydown.enter)="send(input)"
      #input
      value="Gấu bông dưới Tháp Eiffel"
      style="width: 100%"
    />

    @if (pending()) {
    <div>đang tải...</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 = '';
  }
}

Thành phần Angular này sử dụng AI Sinh điều kiện của Google để tạo hình ảnh từ các gợi ý văn bản. Nó nhập các mô-đun cần thiết từ @angular/core và @google/genai. Thành phần khởi tạo một đối tượng GoogleGenAI với một khóa API và sử dụng các tín hiệu để quản lý trạng thái phản ứng: pending để chỉ định trạng thái tải và generatedImages để lưu trữ các hình ảnh đã được tạo.

Hàm send sẽ được kích hoạt khi người dùng nhập một gợi ý văn bản. Nó đặt pending thành true, xóa bất kỳ hình ảnh trước đó, và gọi phương thức ai.models.generateImages với gợi ý và cấu hình như tỷ lệ khung hình và số lượng hình ảnh. Các hình ảnh được tạo sau đó được lưu trữ trong tín hiệu generatedImages, chỉ báo tải được dừng lại, và trường nhập liệu được xóa. Mẫu hiển thị một thông báo tải trong khi pending là true và sau đó lặp qua các generatedImages để hiển thị từng hình ảnh bằng dữ liệu mã hóa base64 của nó.

Các trường hợp sử dụng thực tế cho việc tạo hình ảnh bằng Gemini là đa dạng và có ảnh hưởng.

Các nền tảng thương mại điện tử có thể sử dụng nó để tạo hình ảnh sản phẩm động với nền tùy chỉnh hoặc chú thích cá nhân hóa, nâng cao trải nghiệm mua sắm. Các trang web giáo dục có thể tạo ra các hướng dẫn minh họa và tài liệu học tập tương tác, giúp các khái niệm phức tạp trở nên dễ tiếp cận và hấp dẫn hơn.

Các nhóm marketing có thể tận dụng Gemini để tạo ra các quảng cáo nhắm mục tiêu với hình ảnh và văn bản hấp dẫn, cải thiện hiệu suất chiến dịch. Hơn nữa, các phương tiện truyền thông có thể sử dụng nó để tạo ra những tóm tắt hấp dẫn về các bài viết, và các nền tảng mạng xã hội có thể cho phép người dùng tạo ra các hình đại diện cá nhân hoặc nội dung hình ảnh cho bài đăng của họ.

Khả năng của Gemini trong việc hiểu ngữ cảnh và tạo ra các hình ảnh chính xác, chất lượng cao giúp các nhà phát triển xây dựng những giải pháp sáng tạo đáp ứng các nhu cầu cụ thể của người dùng, biến đổi cách chúng ta tương tác với nội dung kỹ thuật số.

Thực Hành Tốt Nhất

• Thử nghiệm với các gợi ý văn bản khác nhau: Hãy thử với nhiều loại gợi ý khác nhau để xem cách Gemini phản ứng và tạo ra hình ảnh.
• Tối ưu hóa kích thước hình ảnh: Đảm bảo rằng hình ảnh được tạo ra có kích thước phù hợp với giao diện người dùng của bạn để tối ưu hóa hiệu suất.

Cạm Bẫy Thường Gặp

• Không cung cấp gợi ý rõ ràng: Nếu gợi ý không đủ rõ ràng, Gemini có thể không tạo ra hình ảnh như mong đợi.
• Thiếu cấu hình cần thiết: Đảm bảo rằng bạn đã cấu hình đúng các tham số như tỷ lệ khung hình và số lượng hình ảnh.

Mẹo Hiệu Suất

• Giảm số lượng hình ảnh được tạo trong một lần: Để cải thiện tốc độ tải, hãy giới hạn số lượng hình ảnh được yêu cầu trong một lần gọi API.
• Sử dụng bộ nhớ cache: Lưu trữ hình ảnh đã tạo để giảm thiểu số lần gọi API cho những gợi ý giống nhau.

Khắc Phục Sự Cố

• Kiểm tra khóa API: Nếu không nhận được hình ảnh, hãy kiểm tra xem khóa API của bạn có hợp lệ không.
• Xem lại cấu hình: Đảm bảo rằng bạn đã cấu hình đúng các tham số cho mô hình.

Kết luận, các mô hình Gemini cung cấp một cách tiếp cận cách mạng để tích hợp hình ảnh động vào các ứng dụng web. Bằng cách tận dụng kiến thức rộng lớn của Gemini và khả năng kết hợp văn bản và hình ảnh, các nhà phát triển có thể tạo ra những trải nghiệm người dùng thú vị và tương tác hơn. Việc tích hợp liền mạch với các framework như Angular, thông qua các thư viện như @google/genai, đơn giản hóa quy trình tạo và thao tác hình ảnh trực tiếp trong ứng dụng.

Bạn có thể theo dõi tôi trên GitHub, nơi tôi đang tạo ra những dự án thú vị.

Hy vọng bạn thích bài viết này, đừng quên cho ❤️.
Hẹn gặp lại lần sau 👋

Giorgio Boa

Giorgio Boa là một nhà phát triển full stack và hệ sinh thái front-end là đam mê của anh. Anh cũng là một diễn giả quốc tế, hoạt động trong hệ sinh thái mã nguồn mở, anh yêu thích việc học hỏi và nghiên cứu những điều mới.