Tạo Manga AI với Next.js và Ký Ức Thị Giác Gemini

Tôi vừa hoàn thành bài dự thi cho Google Nano Banana Hackathon, và tôi rất phấn khích khi chia sẻ những gì tôi đã xây dựng: NanoManga Studio. Đây là một ứng dụng web sử dụng AI cho phép bạn tạo ra những câu chuyện manga hoàn chỉnh, đồng nhất về hình ảnh từ một ý tưởng đơn giản.

Giới thiệu về NanoManga Studio

Manga là một thể loại truyện tranh phổ biến ở Nhật Bản, và việc tạo ra một câu chuyện manga bằng AI không phải là một nhiệm vụ đơn giản. Một trong những vấn đề lớn nhất trong việc tạo hình ảnh AI cho câu chuyện là sự nhất quán. Làm thế nào để đảm bảo rằng nhân vật của bạn có cùng một kiểu tóc ở trang 3 như ở trang 1? Tôi đã quyết định giải quyết vấn đề này một cách trực tiếp.

🚀 Demo Trực Tiếp: nanomanga-studio.vercel.app
💻 Repo GitHub (Nhận sao là được cảm ơn! ⭐): github.com/Abubakr-Alsheikh/nanomanga-studio

Công Nghệ Sử Dụng

Tôi muốn một công nghệ hiện đại, nhanh chóng và an toàn về kiểu dữ liệu để có thể phát triển nhanh chóng cho hackathon. Dưới đây là công nghệ mà tôi đã sử dụng:

• Framework: Next.js 15 (App Router)
• Giao Diện: shadcn/ui & Tailwind CSS
• Quản Lý Trạng Thái: Sử dụng useState của React nâng lên thành component gốc.
• AI: Google AI JavaScript SDK (@google/generative-ai)
• Triển Khai: Vercel

Đổi Mới Cốt Lõi: Cung Cấp cho AI một "Ký Ức Thị Giác"

Điều đặc biệt của dự án này là khả năng trình bày đa phương thức. Thay vì chỉ gửi văn bản, tôi đã tạo ra một gói ngữ cảnh phong phú cho mô hình gemini-2.5-flash-image-preview (hay gọi là "Nano Banana") cho mỗi lần tạo trang mới.

Phân Tích Quy Trình Gọi API

Dưới đây là cách gọi fetch từ component PageGenerator:

// file: app/components/page-generator.tsx

const handleGeneratePage = async () => {
  // ... kiểm tra trạng thái và chỉ báo tải

  // 1. Lấy các trang trước và tài sản đã chọn cho cảnh này
  const previousPages = pages.slice(0, currentPageNumber - 1);
  const selectedAssets = allAssets.filter(asset => selectedAssetIds.has(asset.id));

  // 2. Tạo ra một prompt văn bản cụ thể
  const fullPrompt = `
    **Tạo Trang Manga**
    **Số Trang:** ${currentPageNumber}
    **Mô Tả Trang:** ${pagePrompt} // ví dụ: "Panel 1: Cận cảnh Kenji..."

    **HƯỚNG DẪN CHO THAM CHIẾU HÌNH ẢNH:**
    - ${previousPages.length} hình ảnh đầu tiên là các trang trước để đảm bảo tính liên tục.
    - ${selectedAssets.length} hình ảnh còn lại là các tài sản cụ thể cho TRANG NÀY.
  `.trim();

  // 3. Tạo mảng ngữ cảnh hình ảnh (PHẦN QUAN TRỌNG!)
  // Chúng tôi trích xuất dữ liệu base64 từ URL dữ liệu của chúng tôi
  const pageImages = previousPages.map(page => page.imageUrl.split(',')[1]);
  const assetImages = selectedAssets.map(asset => asset.imageUrl.split(',')[1]);

  // Các trang trước đi trước để thiết lập ngữ cảnh
  const baseImages = [...pageImages, ...assetImages];

  // 4. Thực hiện cuộc gọi API
  const response = await fetch('/api/generate', {
    method: 'POST',
    body: JSON.stringify({ prompt: fullPrompt, baseImages }),
  });

  // ... xử lý phản hồi
};

Bằng cách rõ ràng hướng dẫn cho AI cách diễn giải chuỗi hình ảnh, nó có thể duy trì diện mạo nhân vật, trang phục và thậm chí là sự hư hại qua nhiều trang.

AI như một Giám Đốc Nghệ Thuật và Biên Tập Viên Câu Chuyện

Trước khi tạo ra hình ảnh, tôi sử dụng gemini-2.5-flash với trình bày dựa trên nhân vật để cấu trúc toàn bộ dự án.

• Lập Kế Hoạch Câu Chuyện: Tôi yêu cầu AI đóng vai trò là "biên tập viên manga chính" và trả về một kế hoạch câu chuyện hoàn chỉnh dưới định dạng JSON nghiêm ngặt. Kế hoạch này bao gồm mô tả nhân vật, môi trường và một cốt truyện theo từng trang theo một cấu trúc truyền thống.

• Thiết Kế Tài Sản: Khi lấy cảm hứng cho các ý tưởng tài sản, AI đảm nhận hai vai trò:

  • Một "họa sĩ ý tưởng nhân vật" thiết kế bảng nhân vật toàn thân trên nền trung tính.
  • Một "họa sĩ nền" thiết kế một cảnh môi trường có không khí mà không có nhân vật.

Điều này đảm bảo rằng các tài sản được tạo ra sạch sẽ và hoàn hảo để sử dụng làm tài liệu tham khảo sau này.

Những Điều Tôi Học Được

Dự án này thật sự rất thú vị. Nó nhấn mạnh rằng tương lai của AI tạo ra không chỉ là những prompt mạnh mẽ đơn lẻ. Mà còn là việc xây dựng các hệ thống duy trì ngữ cảnh, tạo ra các vòng phản hồi và cho phép hợp tác thật sự giữa con người và AI. Khả năng đa phương thức của các mô hình như Gemini là chìa khóa để mở khóa điều này.

Tôi rất muốn bạn thử nghiệm và xem bạn có thể tạo ra điều gì! Hãy cho tôi biết ý kiến của bạn trong phần bình luận. Bạn sẽ xây dựng điều gì với loại "ký ức thị giác" này?

Nếu bạn muốn đọc báo cáo kỹ thuật đầy đủ của tôi trên Kaggle:
https://www.kaggle.com/competitions/banana/writeups/nanomanga-studio

Chúc bạn lập trình vui vẻ!

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

• Lên kế hoạch trước: Trước khi bắt đầu, hãy lên kế hoạch rõ ràng cho từng trang và nhân vật.
• Kiểm tra thường xuyên: Thực hiện kiểm tra thường xuyên trên các trang đã tạo để đảm bảo tính nhất quán.
• Tối ưu hóa hình ảnh: Sử dụng hình ảnh có độ phân giải cao nhưng không quá lớn để đảm bảo hiệu suất.

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

• Thiếu sự nhất quán: Đảm bảo rằng các nhân vật không thay đổi hình dạng hoặc trang phục giữa các trang.
• Quá tải thông tin: Tránh cung cấp quá nhiều thông tin cho AI cùng một lúc, có thể gây nhầm lẫn.

Mẹo Tăng Tốc Độ Hiệu Suất

• Sử dụng bộ nhớ cache cho các hình ảnh đã tạo để giảm thời gian tải.
• Tối ưu hóa mã nguồn để giảm thiểu độ trễ khi gọi API.

Giải Quyết Vấn Đề

Nếu gặp khó khăn khi tạo trang, hãy kiểm tra lại các thông số đầu vào và đảm bảo rằng chúng tuân thủ định dạng mong đợi. Đối với lỗi phản hồi từ API, hãy xem lại các log và xử lý lỗi.

Câu Hỏi Thường Gặp (FAQ)

Q1: NanoManga Studio có miễn phí không?
A1: Có, bạn có thể sử dụng ứng dụng miễn phí tại trang web.

Q2: Tôi có thể sử dụng hình ảnh được tạo ra cho mục đích thương mại không?
A2: Xin vui lòng xem chính sách sử dụng trên trang web để biết thêm thông tin.

Q3: Có thể kết hợp với các công cụ AI khác không?
A3: Có, NanoManga Studio có thể tích hợp với các mô hình AI khác để mở rộng khả năng sáng tạo.

Hãy bắt đầu tạo ra những câu chuyện manga thú vị ngay hôm nay!