Giới Thiệu về Dự Án

Tôi đã phát triển Prompt-to-Puzzle, một ứng dụng web thực sự sống đúng với tên gọi của nó. Nó biến trí tưởng tượng của bạn thành một trò chơi 'Tìm Điểm Khác' có thể chơi được, sử dụng một quy trình AI đa phương thức mạnh mẽ.

Thay vì chơi từ một thư viện tĩnh của các câu đố đã được tạo sẵn, Prompt-to-Puzzle đặt người dùng vào vị trí sáng tạo. Bạn có thể mô tả bất kỳ cảnh nào tưởng tượng được—"Một thành phố tương lai với những chiếc xe bay vào lúc hoàng hôn" hoặc "Một quán cafe mèo ấm cúng vào một ngày mưa"—và ứng dụng sẽ tạo ra một bảng trò chơi hoàn toàn mới chỉ trong vài giây.

Ý tưởng cốt lõi là tạo ra một trải nghiệm thực sự sáng tạo, nơi AI đóng vai trò như một đối tác sáng tạo. Ứng dụng sử dụng quy trình AI hai bước:

1. Imagen 4 tạo ra một hình ảnh gốc chất lượng cao từ văn bản mà người dùng nhập.
2. Gemini 2.5 Flash Image sau đó sẽ tiếp nhận hình ảnh gốc và một prompt thứ hai, thay đổi một cách thông minh và tinh tế để tạo ra hình ảnh "khác" thứ hai.

Cuối cùng, ứng dụng sử dụng các kỹ thuật thị giác máy tính cổ điển (JavaScript và Canvas API) trên phía client để phát hiện những điểm khác nhau này một cách chính xác, biến nghệ thuật do AI tạo ra thành một trò chơi tương tác hoàn toàn.

Demo

Liên kết Ứng Dụng Đã Triển Khai: Prompt-to-Puzzle

Ảnh Chụp Màn Hình & Video

Dưới đây là một cái nhìn về ứng dụng khi hoạt động, từ việc tạo ra đến gameplay.

1. Tạo Trò Chơi Mới: Người dùng chỉ cần nhập một prompt để bắt đầu quy trình tạo ra của AI.

2. Bảng Trò Chơi Đã Tạo: Ứng dụng trình bày hai hình ảnh bên cạnh nhau, sẵn sàng để người dùng tìm ra sự khác biệt.

3. Trình Biên Tập Thủ Công: Để có kết quả hoàn hảo, người dùng có thể vào chế độ biên tập để tinh chỉnh các vùng "khác biệt" có thể nhấp mà thuật toán đã tìm ra.

Cách Tôi Sử Dụng Google AI Studio

Google AI Studio là trung tâm chính cho toàn bộ quy trình phát triển AI.

1. Prototyping và Kỹ Thuật Prompt: Trước khi viết một dòng mã ứng dụng nào, tôi đã sử dụng playground của AI Studio rất nhiều. Tôi đã thử nghiệm với các prompt khác nhau cho Imagen 4 để hiểu cách tạo ra hình ảnh gốc rõ ràng và chi tiết. Quan trọng hơn, tôi đã dành nhiều thời gian để tinh chỉnh prompt hoàn hảo cho Gemini 2.5 Flash Image. Mục tiêu là hướng dẫn nó hoạt động như một "trình biên tập hình ảnh" và thực hiện 3-5 thay đổi cấu trúc (như thêm hoặc xóa một đối tượng) trong khi tránh các thay đổi đơn giản về màu sắc hoặc độ sáng mà không tạo ra một trò chơi tốt. Quy trình phản hồi nhanh của AI Studio thật sự cần thiết cho điều này.

2. Tích Hợp API: Khi tôi có các prompt tạo ra kết quả tuyệt vời một cách nhất quán, tôi đã sử dụng tính năng "Lấy Mã" trong AI Studio để nhận mã gọi API khung. Điều này giúp việc chuyển từ prototype sang ứng dụng React trở nên liền mạch.

3. Lựa Chọn Mô Hình: AI Studio đã giúp tôi dễ dàng duyệt và chọn mô hình phù hợp cho công việc. Tôi đã chọn imagen-4.0-generate-001 vì chất lượng tuyệt vời trong việc chuyển đổi văn bản thành hình ảnh và gemini-2.5-flash-image-preview vì khả năng hiểu biết hình ảnh và văn bản nhanh chóng và mạnh mẽ.

Tính Năng Đa Phương Thức

Applet này hoàn toàn được xây dựng xung quanh một quy trình đa phương thức sáng tạo hai giai đoạn. Các tính năng cụ thể được sử dụng là tạo hình ảnh từ văn bản và sửa đổi hình ảnh và văn bản thành hình ảnh.

1. Tạo Cảnh Ban Đầu (Tạo Hình Ảnh từ Văn Bản với Imagen 4)

Trải nghiệm bắt đầu khi prompt văn bản của người dùng được gửi đến mô hình Imagen 4. Đây là bước đầu tiên trong quy trình đa phương thức, dịch một khái niệm ngôn ngữ ("Một thư viện kỳ diệu với những cuốn sách bay") thành một hình ảnh phong phú, hình thành nền tảng cho trò chơi của chúng tôi.

2. Tạo Điểm Khác Thông Minh (Sửa Đổi Hình Ảnh và Văn Bản với Gemini 2.5 Flash Image)

Đây là phần kỳ diệu cốt lõi của ứng dụng. Chúng tôi cung cấp cho Gemini 2.5 Flash Image hai đầu vào khác nhau:

3. Hình ảnh gốc được tạo ra bởi Imagen.

4. Một prompt văn bản hướng dẫn nó sửa đổi hình ảnh theo các cách cụ thể.

Prompt là "gia vị bí mật", nói với mô hình: "Đây là một hình ảnh. Vui lòng thực hiện 3 đến 5 thay đổi quan trọng nhưng tinh tế. Thêm một đối tượng mới, xóa một đối tượng hiện có, hoặc thay đổi cấu trúc của một cái gì đó. Đừng chỉ thay đổi màu sắc hoặc kết cấu."

Quá trình lý luận hình ảnh cộng văn bản này là điều làm cho applet trở nên khả thi. Gemini không chỉ nhìn thấy pixel; nó hiểu nội dung của hình ảnh và có thể thực hiện các lệnh chỉnh sửa phức tạp dựa trên ngôn ngữ tự nhiên. Điều này nâng cao trải nghiệm người dùng bằng cách tạo ra một dòng chảy vô tận của những câu đố mới mẻ và bất ngờ mà cảm giác như được làm thủ công, biến một ý tưởng văn bản đơn giản thành một trải nghiệm tương tác hoàn chỉnh.

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

• Luôn kiểm tra các prompt để đảm bảo rằng AI hiểu đúng ý tưởng bạn muốn truyền đạt.
• Sử dụng hình ảnh có chất lượng cao để đảm bảo trải nghiệm người dùng tốt hơn.

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

• Không nên quá phụ thuộc vào AI để tạo hình ảnh, luôn cần một sự điều chỉnh và tinh chỉnh thủ công từ người dùng.
• Cần lưu ý rằng không phải mọi thay đổi đều có thể được AI thực hiện chính xác như mong đợi.

Mẹo Hiệu Suất

• Tối ưu hóa kích thước hình ảnh để giảm thời gian tải trang.
• Sử dụng bộ nhớ cache để cải thiện tốc độ xử lý cho các trò chơi đã được tạo trước đó.

Khắc Phục Sự Cố

• Nếu hình ảnh không được tạo ra đúng cách, kiểm tra lại prompt đã nhập và điều chỉnh cho phù hợp.
• Kiểm tra kết nối Internet nếu ứng dụng không phản hồi.

Kết Luận

Prompt-to-Puzzle không chỉ là một trò chơi; nó là một nền tảng sáng tạo mạnh mẽ cho phép người dùng thể hiện trí tưởng tượng của họ. Với sự kết hợp giữa công nghệ AI tiên tiến và khả năng tương tác, ứng dụng này mang đến một trải nghiệm giải trí độc đáo. Hãy thử ngay và khám phá những điều kỳ diệu mà bạn có thể tạo ra!

Hãy truy cập Prompt-to-Puzzle ngay hôm nay và bắt đầu hành trình sáng tạo của bạn!