Hướng Dẫn Tự Xây Dựng App Tạo Hình Ảnh Bằng Google Studio

Prompt 2: Thêm tính năng Xóa phông nền

Cập nhật ứng dụng tạo ảnh hiện có bằng ReactJS + TypeScript.
Giữ nguyên toàn bộ các tính năng trước đó (tải ảnh, nút Tạo ảnh, bố cục hai cột, tích hợp Gemini).

Tính năng mới:

• Bên trái, bên dưới khu vực tải ảnh: thêm nút “Background Removal” (Xóa phông nền).

• Khi nhấn, sử dụng công cụ AI (tích hợp Gemini hoặc thư viện xử lý ảnh đơn giản) để tự động loại bỏ phông nền của ảnh tải lên, và hiển thị ảnh đã xử lý trong phần xem trước bên trái hoặc cập nhật lại ảnh tải lên.

• Sau khi xóa phông, ảnh kết quả sẽ được dùng làm đầu vào để tạo ảnh mới.

Prompt 3: Thêm thanh trượt Reference Influence

Cập nhật ứng dụng ReactJS + TypeScript hiện có, giữ lại toàn bộ tính năng cũ (tải ảnh, xóa phông, nút tạo ảnh, bố cục hai cột).

Tính năng mới:

• Bên trái, bên dưới nút “Background Removal”: thêm thanh trượt (slider) có nhãn “Reference Influence” (Ảnh hưởng từ ảnh gốc), phạm vi từ 0% đến 100%.

• Thanh này điều chỉnh mức độ ảnh hưởng của ảnh tham chiếu khi tạo ảnh mới (0% = bỏ qua ảnh gốc, 100% = giữ nguyên khuôn mặt gốc và chỉ làm cho trẻ hơn 3 tuổi so với ảnh gốc).

Prompt 4: Thêm ô nhập Mô tả Nhân vật

Cập nhật ứng dụng ReactJS + TypeScript, giữ lại tất cả các tính năng (tải ảnh, xóa phông, thanh trượt Reference Influence, nút Generate, bố cục hai cột).

Tính năng mới:

• Bên trái, bên dưới thanh trượt: thêm ô nhập văn bản “Description for Character” (Mô tả nhân vật), nơi người dùng có thể nhập mô tả chi tiết (ví dụ: “một chiến binh trẻ tóc đỏ”).

• Sử dụng phần mô tả này để tinh chỉnh nhân vật trong quá trình tạo ảnh bằng API Gemini. Lưu ý vẫn giữ nguyên khuôn mặt gốc
  
  

Triển khai:

• Đưa ứng dụng lên web (deploy).

Prompt 5: Thêm ô nhập Bối cảnh & Hành động

Cập nhật ứng dụng ReactJS + TypeScript, giữ nguyên toàn bộ tính năng (tải ảnh, xóa phông, Reference Influence, Mô tả nhân vật, nút Generate, bố cục hai cột).

Tính năng mới:

• Bên trái, bên dưới “Description for Character”: thêm ô nhập “Scene & Action” (Bối cảnh & Hành động) để người dùng mô tả cảnh và hành động (ví dụ: “đứng trong rừng, chiến đấu với rồng”).

Prompt 6: Thêm lựa chọn Chất lượng đầu ra

Cập nhật ứng dụng ReactJS + TypeScript, giữ nguyên toàn bộ các tính năng (tải ảnh, xóa phông, Reference Influence, Mô tả nhân vật, Bối cảnh & Hành động, nút Generate, bố cục hai cột).

Tính năng mới:

• Bên trái, bên dưới ô “Scene & Action”: thêm menu chọn “Output Quality” (Chất lượng ảnh xuất ra) với các tùy chọn:
  
  

• “Standard (720p)”

• “High (2K–4K)”
  
  

• Sử dụng lựa chọn này để điều chỉnh tham số API Gemini (độ phân giải hoặc mức chi tiết của ảnh tạo ra).

Prompt 7: Thêm nút tải ảnh đã tạo

Cập nhật ứng dụng ReactJS + TypeScript, giữ nguyên toàn bộ các tính năng và bố cục hiện có (tải ảnh, xóa phông, Reference Influence, Mô tả nhân vật, Bối cảnh & Hành động, Output Quality, nút Generate, bố cục hai cột).

Tính năng mới:
Sau khi ảnh đã được tạo thành công (có kết quả hiển thị ở cột phải), thêm nút “Download Image” (Tải ảnh) để người dùng có thể lưu ảnh đã tạo về máy.

Vị trí và chức năng cụ thể:

• Nút nằm bên cạnh nút Generate, trong cùng một hàng (ở dưới phần nhập thông tin).
  
  

• Khi ảnh đã được tạo xong, nút “Download Image” sẽ sáng lên (có thể bấm).
  
  

• Khi chưa có ảnh, nút ở trạng thái mờ hoặc không thể bấm.
  
  

• Khi người dùng bấm “Download Image”, ứng dụng tự động tải ảnh đang hiển thị (kết quả đã tạo) về máy với tên file mặc định:
  generated_image.png
  
  

• Không thay đổi bố cục, chỉ bổ sung chức năng tải ảnh.