Tạo ứng dụng web dựa trên AI bằng Tiện ích Firebase cho API Gemini

1. Trước khi bắt đầu

Tiện ích Firebase cho phép bạn thêm chức năng đóng gói sẵn vào ứng dụng mà không cần lập trình nhiều, kể cả chức năng dựa trên AI. Lớp học lập trình này hướng dẫn bạn cách tích hợp 2 tiện ích của Firebase trong một ứng dụng web. Nhờ đó, bạn có thể tận dụng Gemini API để tạo nội dung mô tả hình ảnh, nội dung tóm tắt và thậm chí là các đề xuất được cá nhân hoá dựa trên bối cảnh có sẵn và thông tin do người dùng cuối cung cấp.

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách xây dựng ứng dụng web dựa trên AI mang đến trải nghiệm người dùng hấp dẫn bằng các tiện ích của Firebase.

Điều kiện tiên quyết

• Có kiến thức về Node.js, Next.js và TypeScript.

Kiến thức bạn sẽ học được

• Cách sử dụng Tiện ích Firebase cho Gemini API để xử lý ngôn ngữ.
• Cách sử dụng Cloud Functions cho Firebase để soạn bối cảnh tăng cường cho mô hình ngôn ngữ của bạn.
• Cách sử dụng JavaScript để truy cập vào kết quả do Tiện ích Firebase tạo ra.

Bạn cần có

• Một trình duyệt mà bạn chọn, chẳng hạn như Google Chrome
• Môi trường phát triển có trình soạn thảo mã và thiết bị đầu cuối
• Tài khoản Google để tạo và quản lý dự án Firebase của bạn

2. Xem xét ứng dụng web, dịch vụ Firebase và tiện ích

Trong phần này, bạn sẽ xem xét ứng dụng web mà bạn sẽ xây dựng thông qua lớp học lập trình này, cũng như tìm hiểu về các dịch vụ Firebase và Tiện ích Firebase mà bạn sẽ sử dụng.

Ứng dụng web

Trong lớp học lập trình này, bạn sẽ xây dựng một ứng dụng web có tên là Consumer Conf (Thân thiện với máy tính).

Nhân viên của Hội nghị thân thiện đã quyết định sử dụng trí tuệ nhân tạo (AI) để tạo ra trải nghiệm người dùng thú vị và được cá nhân hoá cho người tham dự. Ứng dụng hội nghị hoàn chỉnh này cung cấp cho người tham dự một bot trò chuyện dựa trên AI tạo sinh đa phương thức (còn gọi là mô hình ngôn ngữ lớn hay LLM). Ngoài ra, ứng dụng này có thể trả lời câu hỏi về các chủ đề chung, được điều chỉnh cho phù hợp với lịch trình và chủ đề hội nghị. Bot trò chuyện có bối cảnh lịch sử và kiến thức về ngày/giờ hiện tại, cũng như các chủ đề và lịch biểu của cuộc trò chuyện thân thiện, vì vậy, câu trả lời của bot có thể ảnh hưởng đến toàn bộ bối cảnh này.

Các dịch vụ của Firebase

Trong lớp học lập trình này, bạn sẽ sử dụng nhiều dịch vụ và tính năng của Firebase, đồng thời bạn sẽ nhận được hầu hết mã khởi đầu dành cho những tính năng và dịch vụ này. Bảng sau đây chứa những dịch vụ mà bạn sẽ sử dụng và lý do sử dụng những dịch vụ đó.

Tiện ích Firebase

Các tiện ích Firebase mà bạn sẽ sử dụng trong lớp học lập trình này bao gồm:

• Xây dựng Chatbot bằng Gemini API
• Những việc cần làm đa phương thức thông qua Gemini API

Phần mở rộng rất hữu ích vì chúng phản ứng với các sự kiện xảy ra trong dự án Firebase của bạn. Cả hai tiện ích dùng trong lớp học lập trình này đều phản hồi khi bạn tạo tài liệu mới trong các tập hợp được định cấu hình sẵn trên Cloud Firestore.

3. Thiết lập môi trường phát triển

Xác minh phiên bản Node.js

1. Trong dòng lệnh, hãy xác minh rằng bạn đã cài đặt Node.js phiên bản 20.0.0 trở lên:

   node -v
   

2. Nếu bạn không có Node.js phiên bản 20.0.0 trở lên, hãy tải phiên bản LTS mới nhất xuống và cài đặt.

Lấy mã nguồn cho lớp học lập trình

Nếu bạn có tài khoản GitHub:

1. Tạo một kho lưu trữ mới bằng cách sử dụng mẫu của chúng tôi trên github.com/FirebaseExtended/codelab-gemini-api-extensions
2. Sao chép kho lưu trữ GitHub của lớp học lập trình mà bạn vừa tạo:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

Nếu bạn chưa cài đặt git hoặc không muốn tạo một kho lưu trữ mới:

Tải kho lưu trữ GitHub xuống dưới dạng tệp zip.

Xem cấu trúc thư mục

Thư mục gốc bao gồm một tệp README.md giúp khởi động nhanh ứng dụng web bằng cách sử dụng các hướng dẫn đơn giản. Tuy nhiên, nếu là người mới học lần đầu, bạn nên hoàn thành lớp học lập trình này (thay vì bắt đầu nhanh) vì lớp học lập trình này có chứa bộ hướng dẫn toàn diện nhất.

Nếu không chắc liệu mình đã áp dụng đúng mã như hướng dẫn trong lớp học lập trình này hay chưa, bạn có thể tìm đoạn mã giải pháp trong nhánh git end.

Cài đặt Firebase CLI

1. Xác minh rằng bạn đã cài đặt Firebase CLI và phiên bản đó là 13.6 trở lên:

   firebase --version
   

2. Nếu bạn đã cài đặt Giao diện dòng lệnh (CLI) của Firebase nhưng phiên bản này không phải là phiên bản 13.6 trở lên, hãy cập nhật giao diện người dùng:

   npm update -g firebase-tools
   

3. Nếu bạn chưa cài đặt Firebase CLI, hãy cài đặt:

   npm install -g firebase-tools
   

Nếu bạn không thể cập nhật hoặc cài đặt Firebase CLI do lỗi về quyền, hãy xem tài liệu npm hoặc sử dụng một tuỳ chọn cài đặt khác.

Đăng nhập vào Firebase

1. Trong dòng lệnh, hãy chuyển đến thư mục codelab-gemini-api-extensions rồi đăng nhập vào Firebase:

   cd codelab-gemini-api-extensions
   firebase login
   

   Nếu thiết bị đầu cuối của bạn cho biết bạn đã đăng nhập vào Firebase, bạn có thể chuyển đến phần Thiết lập dự án Firebase của lớp học lập trình này.
2. Trong dòng lệnh, tuỳ thuộc vào việc bạn muốn Firebase thu thập dữ liệu, hãy nhập Y hoặc N. (một trong hai cách đều phù hợp với lớp học lập trình này)
3. Trong trình duyệt, hãy chọn Tài khoản Google của bạn rồi nhấp vào Cho phép.

4. Thiết lập dự án Firebase

Trong phần này, bạn sẽ thiết lập một dự án Firebase và đăng ký Ứng dụng web Firebase trong đó. Bạn cũng sẽ bật một số dịch vụ Firebase mà ứng dụng web mẫu sử dụng sau này trong lớp học lập trình này.

Tất cả các bước trong phần này đều được thực hiện trong bảng điều khiển của Firebase.

Tạo một dự án Firebase

1. Đăng nhập vào bảng điều khiển của Firebase bằng Tài khoản Google.
2. Nhấp vào Tạo dự án, sau đó nhập tên dự án (ví dụ: AI Extensions Codelab).
   Ghi nhớ mã dự án được chỉ định tự động cho dự án Firebase của bạn (hoặc nhấp vào biểu tượng Chỉnh sửa để đặt mã dự án mà bạn muốn). Sau này, bạn sẽ cần mã này để xác định dự án Firebase của mình trong Giao diện dòng lệnh (CLI) của Firebase. Nếu quên mã nhận dạng, bạn luôn có thể tìm lại mã nhận dạng này sau trong phần Cài đặt dự án.
3. Nhấp vào Tiếp tục.
4. Nếu được nhắc, hãy xem xét và chấp nhận các điều khoản của Firebase, sau đó nhấp vào Tiếp tục.
5. Đối với lớp học lập trình này, bạn không cần đến Google Analytics, vì vậy, hãy tắt tuỳ chọn Google Analytics.
6. Nhấp vào Tạo dự án, đợi dự án được cấp phép rồi nhấp vào Tiếp tục.

Thêm ứng dụng web vào dự án Firebase

1. Chuyển đến màn hình Project Overview (Tổng quan về dự án) trong dự án Firebase, sau đó nhấp vào Web.
2. Trong hộp văn bản Biệt hiệu ứng dụng, nhập biệt hiệu dễ nhớ của ứng dụng, chẳng hạn như My AI Extensions
3. Nhấp vào Đăng ký ứng dụng > Tiếp theo > Tiếp theo > Tiếp tục đến bảng điều khiển.
   Bạn có thể bỏ qua tất cả các bước liên quan đến việc "lưu trữ" trong quy trình của Ứng dụng web vì bạn có thể thiết lập dịch vụ lưu trữ ở phần sau của lớp học lập trình này.

Vậy thì tuyệt quá! Bạn hiện đã đăng ký một ứng dụng web trong dự án Firebase mới của mình.

Nâng cấp gói thanh toán Firebase của bạn

Để sử dụng các tiện ích Firebase và các dịch vụ đám mây cơ bản của chúng, bạn cần phải nâng cấp dự án Firebase của mình để bật tính năng thanh toán.

Ngoài ra, xin lưu ý rằng khi bật tính năng thanh toán trong dự án Firebase, bạn sẽ bị tính phí đối với các lệnh gọi mà tiện ích này thực hiện đến Gemini API (bất kể bạn chọn nhà cung cấp nào, AI của Google hay Vertex AI). Tìm hiểu thêm về giá của AI của Google và Vertex AI.

Để nâng cấp gói thanh toán của dự án, hãy làm theo các bước sau:

1. Chuyển đến mục Kế hoạch thanh toán Firebase trong dự án Firebase của bạn.
2. Trong hộp thoại Gói thanh toán Firebase, hãy chọn Gói linh hoạt rồi mua gói đó.

Bật tính năng xác thực Firebase

1. Chuyển đến mục Xác thực bằng ngăn điều hướng bên trái.
2. Nhấp vào Bắt đầu.
3. Trong cột Nhà cung cấp khác, hãy nhấp vào Google > Bật.
4. Trong hộp văn bản Tên hiển thị công khai của dự án, hãy nhập một tên hữu ích, chẳng hạn như My AI Extensions Codelab.
5. Trong trình đơn Email hỗ trợ cho dự án, hãy chọn địa chỉ email của bạn.
6. Nhấp vào Lưu.

Bật Cloud Firestore

1. Chuyển đến mục Firestore bằng ngăn điều hướng bên trái.
2. Nhấp vào Tạo cơ sở dữ liệu > Bắt đầu ở chế độ thử nghiệm > Tiếp theo. Trong phần sau của lớp học lập trình này, bạn sẽ triển khai các Quy tắc bảo mật Firebase mạnh mẽ hơn.
3. Chọn vị trí mà bạn muốn trên Cloud Firestore (hoặc để nguyên như mặc định).
4. Nhấp vào Bật.

Bật Cloud Storage cho Firebase

1. Chuyển đến phần Storage (Bộ nhớ) bằng ngăn điều hướng bên trái.
2. Nhấp vào Get started > Start in test mode > Next (Bắt đầu > Bắt đầu ở chế độ thử nghiệm > Tiếp theo). Trong phần sau của lớp học lập trình này, bạn sẽ triển khai các Quy tắc bảo mật Firebase mạnh mẽ hơn.
3. Vì bạn thiết lập Firestore trong dự án của mình trước, nên vị trí của bộ chứa mặc định trong Cloud Storage đã được thiết lập.
4. Nhấp vào Xong.

Trong phần tiếp theo của lớp học lập trình này, bạn sẽ cài đặt và định cấu hình 2 tiện ích Firebase mà bạn sẽ sử dụng trong ứng dụng web xuyên suốt lớp học lập trình này.

5. Thiết lập tiện ích "Tạo bot trò chuyện bằng Gemini API"

Cài đặt tiện ích "Tạo bot trò chuyện bằng Gemini API"

1. Chuyển đến phần "Tạo tiện ích bot trò chuyện bằng Gemini API".
2. Nhấp vào Cài đặt trong bảng điều khiển của Firebase.
3. Chọn dự án Firebase của bạn, sau đó nhấp vào Tiếp theo.
4. Trong phần Review API đã bật và đã tạo tài nguyên, hãy nhấp vào Bật bên cạnh những dịch vụ được đề xuất cho bạn, sau đó nhấp vào Tiếp theo.
5. Đối với mọi quyền được đề xuất cho bạn, hãy chọn Cấp, rồi nhấp vào Tiếp theo.
6. Định cấu hình tiện ích:
   1. Trong trình đơn Nhà cung cấp Gemini API, hãy chọn xem bạn muốn sử dụng Gemini API của Google AI hay Vertex AI. Đối với các nhà phát triển sử dụng Firebase, bạn nên dùng Vertex AI.
   2. Trong hộp văn bản Firestore Collection Path (Đường dẫn bộ sưu tập Firestore), hãy nhập: users/{uid}/messages.
      Trong các bước sau của lớp học lập trình này, việc thêm tài liệu vào bộ sưu tập này sẽ kích hoạt tiện ích để gọi Gemini API.
   3. Trong trình đơn Vị trí Cloud Functions, hãy chọn vị trí bạn muốn (như Iowa (us-central1) hoặc vị trí mà trước đó bạn đã chỉ định cho cơ sở dữ liệu Firestore của mình).
   4. Giữ nguyên tất cả giá trị khác theo mặc định.
7. Nhấp vào Cài đặt tiện ích rồi chờ cài đặt tiện ích.

Dùng thử tiện ích "Tạo chatbot bằng Gemini API"

Mặc dù mục tiêu của lớp học lập trình này là tương tác với tiện ích "Tạo Chatbot bằng Gemini API" thông qua một ứng dụng web, nhưng bạn nên tìm hiểu cách hoạt động của tiện ích này bằng cách dùng thử trong bảng điều khiển của Firebase trước.

Tiện ích này được kích hoạt bất cứ khi nào tài liệu trên Firestore được tạo trong tập hợp users/{uid}/discussion/{discussionId}/messages. Bạn có thể thực hiện việc này trong bảng điều khiển của Firebase.

1. Trong bảng điều khiển của Firebase, hãy chuyển đến Firestore rồi nhấp vào Bắt đầu thu thập trong cột đầu tiên.
2. Trong hộp văn bản Mã bộ sưu tập, hãy nhập users rồi nhấp vào Tiếp theo.
3. Trong hộp văn bản ID tài liệu, hãy nhấp vào Tự động nhận dạng, sau đó nhấp vào Lưu.
4. Trong bộ sưu tập users, hãy nhấp vào Bắt đầu thu thập.
5. Trong hộp văn bản Mã bộ sưu tập, hãy nhập messages rồi nhấp vào Tiếp theo.
   1. Trong hộp văn bản ID tài liệu, nhấp vào Tự động nhận dạng.
   2. Trong hộp văn bản Trường, hãy nhập prompt
   3. Trong hộp văn bản Giá trị, hãy nhập Tell me 5 random fruits
6. Nhấp vào Lưu rồi đợi vài giây.

Khi bạn thêm tài liệu này, tài liệu này đã kích hoạt tiện ích để gọi API Gemini. Tài liệu bạn vừa thêm vào tập hợp messages hiện không chỉ bao gồm prompt mà còn bao gồm response của mô hình trong truy vấn của bạn.

Kích hoạt lại tiện ích bằng cách thêm một tài liệu khác vào bộ sưu tập messages:

1. Trong bộ sưu tập messages, hãy nhấp vào Thêm tài liệu.
2. Trong hộp văn bản ID tài liệu, nhấp vào Tự động nhận dạng.
3. Trong hộp văn bản Trường, hãy nhập prompt
4. Trong hộp văn bản Giá trị, hãy nhập And now, vegetables
5. Nhấp vào Lưu rồi đợi vài giây. Tài liệu bạn vừa thêm vào bộ sưu tập messages hiện đã có một response vào câu hỏi của bạn.
   
   Khi tạo câu trả lời này, mô hình Gemini cơ bản đã sử dụng kiến thức trong quá khứ từ câu hỏi trước đó của bạn.

6. Thiết lập ứng dụng web

Để chạy ứng dụng web, bạn cần chạy các lệnh trong dòng lệnh và thêm mã trong trình soạn thảo mã.

Thiết lập Giao diện dòng lệnh (CLI) của Firebase để chạy trên dự án Firebase

Trong dòng lệnh, hãy yêu cầu CLI sử dụng dự án Firebase của bạn bằng cách chạy lệnh sau:

firebase use YOUR_PROJECT_ID

Triển khai các quy tắc bảo mật cho Firestore và Cloud Storage

Cơ sở mã của lớp học lập trình này đã có một bộ Quy tắc bảo mật của Firestore và Quy tắc bảo mật của Cloud Storage được viết riêng cho bạn. Sau khi bạn triển khai các Quy tắc bảo mật này, các dịch vụ Firebase trong dự án Firebase của bạn sẽ được bảo vệ tốt hơn khỏi việc sử dụng sai mục đích.

1. Để triển khai Quy tắc bảo mật, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn:

   firebase deploy --only firestore:rules,storage
   

2. Nếu bạn được hỏi có cấp cho Cloud Storage Vai trò IAM để sử dụng quy tắc nhiều dịch vụ hay không, hãy nhập Y hoặc N. (một trong hai cách đều phù hợp với lớp học lập trình này)

Kết nối ứng dụng web với dự án Firebase của bạn

Cơ sở mã của ứng dụng web của bạn cần biết ứng dụng web nên sử dụng dự án Firebase nào cho cơ sở dữ liệu, bộ nhớ, v.v. Bạn thực hiện việc này bằng cách thêm cấu hình Firebase vào cơ sở mã của ứng dụng.

1. Lấy cấu hình Firebase của bạn:
   1. Trong bảng điều khiển của Firebase, hãy chuyển đến phần Cài đặt dự án trong dự án Firebase của bạn.
   2. Cuộn xuống phần Ứng dụng của bạn rồi chọn ứng dụng web bạn đã đăng ký.
   3. Trong ngăn Thiết lập và cấu hình SDK, hãy sao chép mã initializeApp đầy đủ, bao gồm cả hằng số firebaseConfig.
2. Thêm cấu hình Firebase vào cơ sở mã của ứng dụng web:
   1. Trong trình soạn thảo mã, hãy mở tệp src/app/lib/firebase/firebase.config.js.
   2. Chọn tất cả trong tệp và thay thế bằng mã mà bạn đã sao chép.
   3. Lưu tệp.

Xem trước ứng dụng web trong trình duyệt

1. Trong dòng lệnh, hãy cài đặt các phần phụ thuộc rồi chạy ứng dụng web:

   npm install
   npm run dev
   

2. Trong trình duyệt, hãy chuyển đến URL lưu trữ được lưu trữ cục bộ để xem ứng dụng web. Ví dụ: trong hầu hết các trường hợp, URL là http://localhost:3000/ hoặc URL tương tự.

Dùng bot trò chuyện của ứng dụng web

1. Trong trình duyệt, hãy quay lại thẻ có ứng dụng web Thân thiện với Conf đang chạy trên thiết bị.
2. Nhấp vào Sign in with Google (Đăng nhập bằng Google) và chọn Tài khoản Google của bạn, nếu cần.
3. Sau khi đăng nhập, bạn sẽ thấy một cửa sổ trò chuyện trống.
4. Nhập lời chào (như hi) rồi nhấp vào Gửi.
5. Đợi một vài giây để bot trò chuyện phản hồi.

Bot trò chuyện trong ứng dụng sẽ phản hồi bằng một câu trả lời chung chung.

Chuyên biệt chatbot cho ứng dụng

Bạn cần có mô hình Gemini cơ bản mà bot trò chuyện của ứng dụng web sử dụng để biết thông tin chi tiết dành riêng cho hội nghị khi mô hình tạo câu trả lời cho người tham dự sử dụng ứng dụng. Có nhiều cách để kiểm soát và định hướng những câu trả lời này. Trong phần phụ của lớp học lập trình này, chúng tôi sẽ hướng dẫn bạn một cách rất cơ bản bằng cách đưa ra "bối cảnh" trong câu lệnh ban đầu (thay vì chỉ đưa ra thông tin từ người dùng ứng dụng web).

1. Trong ứng dụng web trên trình duyệt, hãy xoá cuộc trò chuyện bằng cách nhấp vào nút "x" màu đỏ (bên cạnh tin nhắn trong lịch sử trò chuyện).
2. Trong trình soạn thảo mã, hãy mở tệp src/app/page.tsx.
3. Di chuyển xuống rồi thay thế mã trên hoặc gần dòng 77 cho biết prompt: userMsg bằng đoạn mã sau:
   prompt: preparePrompt(userMsg, messages),
4. Lưu tệp.
5. Quay lại ứng dụng web đang chạy trên trình duyệt.
6. Một lần nữa, hãy nhập lời chào (chẳng hạn như hi), sau đó nhấp vào Gửi.
7. Đợi một vài giây để bot trò chuyện phản hồi.

Bot trò chuyện phản hồi bằng kiến thức được hướng dẫn dựa trên ngữ cảnh được nêu trong src/app/lib/context.md. Mặc dù bạn không nhập một yêu cầu cụ thể, nhưng mô hình Gemini cơ bản sẽ tạo nội dung đề xuất được cá nhân hoá dựa trên bối cảnh này cũng như ngày/giờ hiện tại. Giờ đây, bạn có thể nêu các câu hỏi tiếp theo và tìm hiểu kỹ hơn.

Ngữ cảnh mở rộng này rất quan trọng đối với bot trò chuyện, nhưng bạn không nên hiển thị cho người dùng ứng dụng web. Sau đây là cách ẩn ngữ cảnh này:

1. Trong trình soạn thảo mã, hãy mở tệp src/app/page.tsx.
2. Di chuyển xuống rồi thay thế mã trên hoặc gần dòng 56 cho biết ...doc.data(), bằng đoạn mã sau:
   ...prepareMessage(doc.data()),
3. Lưu tệp.
4. Quay lại ứng dụng web đang chạy trên trình duyệt.
5. Tải lại trang.

Bạn cũng có thể thử trò chuyện với bot trò chuyện khi có bối cảnh lịch sử:

1. Trong hộp văn bản Nhập tin nhắn, hãy đặt một câu hỏi như: Any other interesting talks about AI?bot trò chuyện sẽ trả lời tin nhắn.
2. Trong hộp văn bản Nhập tin nhắn, hãy tiếp tục đặt câu hỏi liên quan đến câu hỏi trước: Give me a few more details about the last one.

Bot trò chuyện sẽ phản hồi bằng thông tin lịch sử. Vì nhật ký trò chuyện giờ đây đã được đưa vào ngữ cảnh, nên bot trò chuyện sẽ hiểu được các câu hỏi tiếp theo.

Bật mí thêm cho bạn: Chạy ứng dụng web bằng Bộ công cụ mô phỏng cục bộ Firebase

Bộ công cụ mô phỏng cục bộ của Firebase cho phép bạn kiểm thử cục bộ hầu hết các tính năng của ứng dụng web.

1. Trong dòng lệnh, đảm bảo rằng bạn đang ở thư mục gốc của ứng dụng web.
2. Chạy lệnh sau để cài đặt rồi chạy Bộ mô phỏng cục bộ của Firebase:

   firebase init emulators
   firebase emulators:start
   

7. Thiết lập tiện ích "Việc cần làm đa phương thức bằng Gemini API"

Phần mở rộng "Việc cần làm đa phương thức thông qua API Gemini" gọi API Gemini bằng các câu lệnh đa phương thức có chứa câu lệnh dạng văn bản cũng như URL của tệp được hỗ trợ hoặc URL của tệp trong Cloud Storage (lưu ý rằng ngay cả Google AI Gemini API cũng sử dụng URL của Cloud Storage làm cơ sở hạ tầng URL cho tệp cơ bản). Tiện ích này cũng hỗ trợ các biến trên tay điều khiển để thay thế các giá trị trong tài liệu trên Cloud Firestore nhằm tuỳ chỉnh lời nhắc dạng văn bản.

Trong ứng dụng của mình, bất cứ khi nào tải một hình ảnh lên một bộ chứa trên Cloud Storage, bạn đều có thể tạo một URL rồi thêm URL đó vào một tài liệu mới trên Cloud Firestore. Nhờ đó, tiện ích sẽ kích hoạt tiện ích để tạo một câu lệnh đa phương thức và gọi Gemini API. Trong mã nguồn của lớp học lập trình này, chúng ta đã cung cấp mã để tải hình ảnh lên và ghi URL vào tài liệu trên Firestore.

Cài đặt tiện ích "Việc cần làm đa phương thức bằng Gemini API"

1. Chuyển đến phần "Thao tác đa phương thức bằng Gemini API".
2. Nhấp vào Cài đặt trong bảng điều khiển của Firebase.
3. Chọn dự án Firebase của bạn.
4. Nhấp vào Tiếp theo > Tiếp theo > Tiếp theo cho đến khi bạn đến mục Định cấu hình tiện ích.
   1. Trong trình đơn Nhà cung cấp Gemini API, hãy chọn xem bạn muốn sử dụng Gemini API của Google AI hay Vertex AI. Đối với các nhà phát triển sử dụng Firebase, bạn nên dùng Vertex AI.
   2. Trong hộp văn bản Firestore Collection Path (Đường dẫn bộ sưu tập Firestore), hãy nhập: gallery
   3. Trong hộp văn bản Prompt (Lời nhắc), hãy nhập: Please describe the provided image; if there is no image, say "no image"
   4. Trong hộp văn bản Trường hình ảnh, hãy nhập: image
   5. Trong trình đơn Vị trí Cloud Functions, hãy chọn vị trí bạn muốn (như Iowa (us-central1) hoặc vị trí mà trước đó bạn đã chỉ định cho cơ sở dữ liệu Firestore của mình).
   6. Giữ nguyên tất cả giá trị khác theo mặc định.
5. Nhấp vào Cài đặt tiện ích rồi chờ cài đặt tiện ích.

Dùng thử tiện ích "Việc cần làm đa phương thức bằng Gemini API"

Mặc dù mục tiêu của lớp học lập trình này là tương tác với tiện ích "Thao tác đa phương thức bằng Gemini API" thông qua ứng dụng web, nhưng bạn nên tìm hiểu cách hoạt động của tiện ích này bằng cách dùng thử trong bảng điều khiển của Firebase trước.

Tiện ích này được kích hoạt bất cứ khi nào tài liệu trên Firestore được tạo trong tập hợp users/{uid}/gallery. Bạn có thể thực hiện việc này trong bảng điều khiển của Firebase. Sau đó, tiện ích này sẽ lấy URL hình ảnh của Cloud Storage trong tài liệu trên Cloud Firestore rồi truyền dưới dạng một phần của câu lệnh đa phương thức trong lệnh gọi đến Gemini API.

Trước tiên, hãy tải hình ảnh lên một bộ chứa Cloud Storage:

1. Chuyển đến phần Bộ nhớ trong dự án Firebase.
2. Nhấp vào Tạo thư mục.
3. Trong hộp văn bản Folder name (Tên thư mục), hãy nhập gallery
4. Nhấp vào Thêm thư mục.
5. Trong thư mục gallery, hãy nhấp vào Tải tệp lên.
6. Chọn tệp hình ảnh JPEG để tải lên.

Tiếp theo, hãy thêm URL của Cloud Storage cho hình ảnh đó vào một tài liệu trên Firestore (là yếu tố kích hoạt tiện ích):

1. Chuyển đến mục Firestore trong dự án Firebase của bạn
2. Nhấp vào Bắt đầu thu thập trong cột đầu tiên.
3. Trong hộp văn bản Mã bộ sưu tập, hãy nhập: gallery rồi nhấp vào Tiếp theo.
4. Thêm tài liệu vào bộ sưu tập:
   1. Trong hộp văn bản ID tài liệu, nhấp vào Tự động nhận dạng.
   2. Trong hộp văn bản Trường, hãy nhập: image. Trong hộp Giá trị, hãy nhập URI Vị trí bộ nhớ của hình ảnh bạn vừa tải lên.
5. Nhấp vào Thêm trường.
6. Trong hộp văn bản Trường, hãy nhập: published. Trong hộp Type (Loại), hãy chọn boolean. Trong hộp Giá trị, hãy chọn true.
7. Nhấp vào Lưu rồi đợi vài giây.

Tập hợp gallery hiện bao gồm một tài liệu có chứa phản hồi cho truy vấn của bạn.

Dùng thư viện hình ảnh của ứng dụng web

1. Trong trình duyệt, hãy quay lại thẻ có ứng dụng web Thân thiện với Conf đang chạy trên thiết bị.
2. Nhấp vào tab điều hướng Thư viện.
3. Bạn sẽ thấy thư viện hình ảnh đã tải lên và nội dung mô tả do AI tạo. Tệp này phải có hình ảnh mà bạn đã tải trước đó lên thư mục gallery trong bộ chứa Bộ nhớ.
4. Nhấp vào nút để "Tải lên" rồi chọn một hình ảnh JPEG khác.
5. Đợi một vài giây để hình ảnh hiển thị trong thư viện. Vài giây sau, nội dung mô tả do AI tạo cho hình ảnh mới tải lên cũng sẽ xuất hiện.

Nếu bạn muốn hiểu mã về cách triển khai việc này, hãy xem src/app/gallery/page.tsx trong cơ sở mã của ứng dụng web.

8. Bật mí thêm cho bạn: Triển khai ứng dụng

Firebase cung cấp một số cách để bạn có thể triển khai ứng dụng web. Đối với lớp học lập trình này, hãy chọn một trong các lựa chọn sau:

• Cách 1: Lưu trữ Firebase – Sử dụng lựa chọn này nếu bạn quyết định không tạo kho lưu trữ GitHub của riêng mình (và chỉ lưu mã nguồn trên máy của bạn).
• Lựa chọn 2: Lưu trữ ứng dụng Firebase – Sử dụng lựa chọn này nếu bạn muốn triển khai tự động mỗi khi bạn đẩy các thay đổi vào kho lưu trữ GitHub của riêng mình. Dịch vụ Firebase mới này được xây dựng riêng để phù hợp với nhu cầu của các ứng dụng Next.js và Angular động.

Cách 1: Triển khai bằng tính năng Lưu trữ Firebase

Sử dụng lựa chọn này nếu bạn quyết định không tạo kho lưu trữ GitHub của riêng mình (và chỉ lưu mã nguồn trên máy của bạn).

1. Trong thiết bị đầu cuối của bạn, hãy khởi chạy tính năng Lưu trữ Firebase bằng cách chạy các lệnh sau:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. Đối với câu lệnh: Detected an existing Next.js codebase in your current directory, should we use this?, hãy nhấn Y.
3. Đối với lời nhắc: In which region would you like to host server-side content, if applicable?, hãy chọn vị trí mặc định hoặc vị trí bạn đã sử dụng trước đó trong lớp học lập trình này. Sau đó, nhấn Enter (hoặc return trên macOS).
4. Đối với câu lệnh: Set up automatic builds and deploys with GitHub?, hãy nhấn N.
5. Triển khai ứng dụng web của bạn sang chế độ Lưu trữ bằng cách chạy lệnh sau:

   firebase deploy --only hosting
   

Đã xong! Nếu cập nhật ứng dụng và muốn triển khai phiên bản mới đó, bạn chỉ cần chạy lại firebase deploy --only hosting, sau đó tính năng Lưu trữ Firebase sẽ tạo và triển khai lại ứng dụng của bạn.

Lựa chọn 2: Triển khai bằng tính năng Lưu trữ ứng dụng Firebase

Sử dụng lựa chọn này nếu bạn muốn tự động triển khai mỗi khi đẩy các thay đổi vào kho lưu trữ GitHub của riêng mình.

1. Xác nhận các thay đổi của bạn trên GitHub.
2. Trong bảng điều khiển của Firebase, hãy chuyển đến phần Lưu trữ ứng dụng trong dự án Firebase của bạn.
3. Nhấp vào Bắt đầu > Kết nối với GitHub.
4. Chọn tài khoản GitHub và Repository. Nhấp vào Tiếp theo.
5. Trong phần Cài đặt triển khai > Thư mục gốc, hãy nhập tên của thư mục có mã nguồn (nếu package.json không nằm trong thư mục gốc của kho lưu trữ).
6. Đối với Nhánh Live, hãy chọn nhánh chính của kho lưu trữ GitHub. Nhấp vào Tiếp theo.
7. Nhập mã nhận dạng cho phần phụ trợ (ví dụ: chatbot).
8. Nhấp vào Finish and Deploy (Hoàn tất và triển khai).

Quá trình triển khai mới của bạn sẽ mất vài phút để sẵn sàng. Bạn có thể kiểm tra trạng thái triển khai trong phần Lưu trữ ứng dụng trên bảng điều khiển của Firebase.

Từ thời điểm này trở đi, mỗi lần bạn đẩy một thay đổi vào kho lưu trữ GitHub, tính năng Lưu trữ ứng dụng Firebase sẽ tự động xây dựng và triển khai ứng dụng của bạn.

9. Kết luận

Xin chúc mừng! Bạn đã đạt được nhiều thành tích trong lớp học lập trình này!

Cài đặt và định cấu hình tiện ích

Bạn đã sử dụng bảng điều khiển của Firebase để định cấu hình và cài đặt nhiều Tiện ích của Firebase sử dụng AI tạo sinh. Việc sử dụng Tiện ích của Firebase rất thuận tiện vì bạn không cần phải tìm hiểu và viết nhiều mã nguyên mẫu để xử lý việc xác thực bằng các dịch vụ của Google Cloud hay logic Cloud Functions phụ trợ nhằm lắng nghe và tương tác với các dịch vụ và API của Firestore cũng như Google Cloud.

Dùng thử tiện ích bằng bảng điều khiển của Firebase

Thay vì đi thẳng vào đoạn mã, bạn cần thời gian tìm hiểu cách hoạt động của các tiện ích AI tạo sinh này, dựa trên dữ liệu đầu vào mà bạn cung cấp thông qua Firestore hoặc Cloud Storage. Thao tác này có thể đặc biệt hữu ích khi gỡ lỗi kết quả của một tiện ích.

Xây dựng ứng dụng web dựa trên AI

Bạn đã xây dựng một ứng dụng web dựa trên AI sử dụng Tiện ích của Firebase để chỉ sử dụng một số tính năng của mô hình Gemini.

Trong ứng dụng web, bạn sử dụng tiện ích "Chatbot với Gemini API" để cung cấp cho người dùng một giao diện trò chuyện mang tính tương tác, trong đó có bối cảnh trước đây và theo từng ứng dụng trong các cuộc trò chuyện. Trong đó, mỗi tin nhắn được lưu trữ trong một tài liệu trên Firestore dành cho một người dùng cụ thể.

Ứng dụng web này cũng sử dụng tiện ích "Việc cần làm đa phương thức thông qua Gemini API" để tự động tạo nội dung mô tả hình ảnh cho những hình ảnh đã tải lên.

Các bước tiếp theo

• Thử nghiệm với câu lệnh và tận dụng cửa sổ ngữ cảnh lớn trong Google AI Studio hoặc Vertex AI Studio.
• Tìm hiểu về tính năng tìm kiếm bằng AI tạo sinh tăng cường (RAG).
• Hãy thử tham gia một lớp học lập trình theo tiến độ riêng hướng dẫn cách thêm bot trò chuyện vào một ứng dụng Firebase hiện có bằng Firebase Genkit (một dịch vụ khung AI mới).
• Tìm hiểu về các chức năng tìm kiếm tương tự trong Firestore và Cloud SQL cho PostgreSQL.
• Hướng dẫn bot trò chuyện của bạn gọi vào ứng dụng hiện có bằng tính năng gọi hàm.