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 được đóng gói sẵn vào ứng dụng của mình với mã tối thiểu – ngay 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 Firebase trong một ứng dụng web để có thể tận dụng Gemini API nhằm tạo nội dung mô tả hình ảnh, bản tóm tắt và thậm chí cả đề xuất được cá nhân hoá dựa trên ngữ cảnh được cung cấp và thông tin đầu vào của người dùng cuối.

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách tạo một ứ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 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 để tạo một ngữ 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 đầu ra 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 chỉnh sửa mã và cửa sổ dòng lệnh
• Một Tài khoản Google để tạo và quản lý dự án Firebase

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

Trong phần này, bạn sẽ xem xét ứng dụng web mà bạn sẽ tạo bằng lớp học lập trình này, cũng như tìm hiểu về các dịch vụ của 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ẽ tạo một ứng dụng web có tên là Friendly Conf.

Nhân viên của Friendly Conference quyết định sử dụng AI để mang đến trải nghiệm thú vị và phù hợp với từng người dùng cho người tham dự. Ứng dụng hội nghị hoàn chỉnh cung cấp cho người tham dự một chatbot AI đàm thoại dựa trên mô hình AI tạo sinh đa phương thức (còn gọi là mô hình ngôn ngữ lớn hoặc LLM). Chatbot này có thể trả lời các câu hỏi về các chủ đề chung, phù hợp với lịch trình và chủ đề của hội nghị. Chatbot có thông tin về bối cảnh trước đây và kiến thức về ngày/giờ hiện tại cũng như các chủ đề và lịch trình của Friendly Conf, vì vậy, câu trả lời của chatbot có thể xem xét tất cả 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 hầu hết mã khởi đầu cho các dịch vụ và tính năng đó đều được cung cấp cho bạn. Bảng sau đây chứa các dịch vụ mà bạn sẽ sử dụng và lý do sử dụng các 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:

• Tạo Chatbot bằng Gemini API
• Các tác vụ đa phương thức bằng Gemini API

Tiện ích 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 được 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 bộ sưu tập được định cấu hình sẵn trong 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 thiết bị đầu cuối, 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 chưa 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 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 xét cấu trúc thư mục

Thư mục gốc có một tệp README.md giúp bạn nhanh chóng bắt đầu chạy ứng dụng web bằng cách sử dụng các hướng dẫn tinh giản. Tuy nhiên, nếu là ngườ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ì hướng dẫn bắt đầu nhanh) vì lớp học lập trình này có bộ hướng dẫn toàn diện nhất.

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

Cài đặt Giao diện dòng lệnh (CLI) của Firebase

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

   firebase --version
   

2. Nếu bạn đã cài đặt Firebase CLI nhưng không phải là phiên bản 13.6 trở lên, hãy cập nhật:

   npm update -g firebase-tools
   

3. Nếu bạn chưa cài đặt Giao diện dòng lệnh (CLI) của Firebase, 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 Giao diện dòng lệnh (CLI) của Firebase do lỗi về quyền, hãy xem tài liệu npm hoặc sử dụng lựa chọn cài đặt khác.

Đăng nhập vào Firebase

1. Trong cửa sổ 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 cho biết bạn đã đăng nhập vào Firebase, thì 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 thiết bị đầu cuối, tuỳ thuộc vào việc bạn muốn Firebase thu thập dữ liệu hay không, hãy nhập Y hoặc N. (cả hai lựa chọn đề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ý một Ứng dụng web Firebase trong dự án đó. Sau đó, bạn cũng sẽ bật một số dịch vụ Firebase mà ứng dụng web mẫu sử dụng 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 chính Tài khoản Google mà bạn đã dùng ở bước trước.
2. Nhấp vào nút này để tạo một dự án mới, rồi nhập tên dự án (ví dụ: AI Extensions Codelab).
   
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, rồi nhấp vào Tiếp tục.
5. (Không bắt buộc) Bật tính năng hỗ trợ của AI trong bảng điều khiển của Firebase (còn gọi là "Gemini trong Firebase").
6. Đối với lớp học lập trình này, bạn không cần Google Analytics, vì vậy hãy tắt lựa chọn Google Analytics.
7. 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.

Nâng cấp gói giá của Firebase

Để sử dụng Tiện ích Firebase (và các dịch vụ đám mây cơ bản của tiện ích) cũng như Cloud Storage cho Firebase, dự án Firebase của bạn cần phải sử dụng gói giá trả theo mức sử dụng (Blaze), tức là dự án đó được liên kết với một tài khoản thanh toán trên đám mây.

• Tài khoản thanh toán trên Cloud yêu cầu bạn phải có một phương thức thanh toán, chẳng hạn như thẻ tín dụng.
• Nếu bạn mới sử dụng Firebase và Google Cloud, hãy kiểm tra xem bạn có đủ điều kiện nhận khoản tín dụng trị giá 300 USD và Tài khoản thanh toán trên đám mây dùng thử miễn phí hay không.
• Nếu bạn đang thực hiện lớp học lập trình này trong một sự kiện, hãy hỏi người tổ chức xem có tín dụng Cloud nào không.

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

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

1. Trong bảng điều khiển của Firebase, hãy chọn nâng cấp gói.
2. Chọn gói Blaze. Làm theo hướng dẫn trên màn hình để liên kết một tài khoản thanh toán trên Cloud với dự án của bạn.
   Nếu cần tạo một tài khoản thanh toán trên Cloud trong quá trình nâng cấp này, bạn có thể cần quay lại quy trình nâng cấp trong bảng điều khiển Firebase để hoàn tất quá trình nâng cấp.

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

1. Chuyển đến màn hình Tổng quan về dự án trong dự án Firebase của bạn, rồi nhấp vào Web.
2. Trong hộp văn bản Biệt hiệu của ứng dụng, hãy nhập một biệt hiệu dễ nhớ cho ứ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 "lưu trữ" trong quy trình Ứng dụng web vì bạn có thể thiết lập một dịch vụ lưu trữ sau trong lớp học lập trình này.

Vậy thì tuyệt quá! Giờ đây, bạn đã đăng ký một ứng dụng web trong dự án Firebase mới.

Thiết lập tính năng Xác thực Firebase

1. Chuyển đến phần 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 bổ sung, hãy nhấp vào Google > Bật.
4. Trong hộp văn bản Tên dự án công khai, 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.

Thiết lập Cloud Firestore

1. Trong bảng điều khiển bên trái của bảng điều khiển Firebase, hãy mở rộng mục Tạo rồi chọn Cơ sở dữ liệu Firestore.
2. Nhấp vào Tạo cơ sở dữ liệu.
3. Để nguyên Mã cơ sở dữ liệu được đặt thành (default).
4. Chọn một vị trí cho cơ sở dữ liệu của bạn, rồi nhấp vào Tiếp theo.
   Đối với một ứng dụng thực tế, bạn nên chọn một vị trí gần với người dùng của mình.
5. Nhấp vào Bắt đầu ở chế độ thử nghiệm. Đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.
   Sau này trong lớp học lập trình này, bạn sẽ thêm Quy tắc bảo mật để bảo mật dữ liệu của mình. Không phân phối hoặc công khai một ứng dụng mà không thêm Quy tắc bảo mật cho cơ sở dữ liệu của bạn.
6. Nhấp vào Tạo.

Thiết lập Cloud Storage cho Firebase

1. Trong bảng điều khiển bên trái của bảng điều khiển Firebase, hãy mở rộng Tạo rồi chọn Bộ nhớ.
2. Nhấp vào Bắt đầu.
3. Chọn một vị trí cho bộ chứa lưu trữ mặc định.
   Các bộ chứa ở US-WEST1, US-CENTRAL1 và US-EAST1 có thể tận dụng cấp"Luôn miễn phí" của Google Cloud Storage. Các bộ chứa ở tất cả những vị trí khác đều tuân theo mức giá và mức sử dụng của Google Cloud Storage.
4. Nhấp vào Bắt đầu ở chế độ thử nghiệm. Đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.
   Sau này trong lớp học lập trình này, bạn sẽ thêm các quy tắc bảo mật để bảo mật dữ liệu của mình. Không phân phối hoặc công khai ứng dụng mà không thêm Quy tắc bảo mật cho Nhóm lưu trữ.
5. Nhấp vào Tạo.

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 trong suốt lớp học lập trình này.

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

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

1. Chuyển đến tiện ích "Build Chatbot with the Gemini API" (Tạo chatbot 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, rồi nhấp vào Tiếp theo.
4. Trong phần Xem xét các API đã bật và tài nguyên đã tạo, hãy nhấp vào Bật bên cạnh mọi dịch vụ được đề xuất cho bạn, rồi 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 Gemini API Provider (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 những 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 đến bộ sưu tập trên Firestore), hãy nhập: users/{uid}/messages.
      Trong các bước tiếp theo 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í của Cloud Functions, hãy chọn vị trí mà bạn muốn (chẳng hạn như Iowa (us-central1) hoặc vị trí mà bạn đã chỉ định trước đó cho cơ sở dữ liệu Firestore).
   4. Giữ nguyên tất cả các giá trị khác theo mặc định.
7. Nhấp vào Cài đặt tiện ích rồi đợi tiện ích cài đặt xong.

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 tiện ích này hoạt động bằng cách dùng thử trong bảng điều khiển Firebase trước.

Tiện ích này sẽ được kích hoạt bất cứ khi nào một tài liệu 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ã nhận dạng 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 Mã nhận dạng tài liệu, hãy nhấp vào Mã nhận dạng tự động, rồi nhấp vào Lưu.
4. Trong bộ sưu tập users, hãy nhấp vào Bắt đầu bộ sưu tập.
5. Trong hộp văn bản Mã nhận dạng 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 Mã nhận dạng tài liệu, hãy nhấp vào Tự động tạo mã nhận dạng.
   2. Trong hộp văn bản Field, 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, tiện ích sẽ gọi Gemini API. Tài liệu mà bạn vừa thêm vào bộ sưu tập messages hiện không chỉ bao gồm prompt của bạn mà còn bao gồm cả response của mô hình vào câu hỏi 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 biểu tượng Thêm tài liệu.
2. Trong hộp văn bản Mã nhận dạng tài liệu, hãy nhấp vào Tự động tạo mã nhận dạng.
3. Trong hộp văn bản Field, 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 mà bạn vừa thêm vào bộ sưu tập messages hiện có một response cho 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 thiết bị đầu cuối và thêm mã trong trình chỉnh sửa mã.

Thiết lập Firebase CLI để chạy trên dự án Firebase

Trong cửa sổ 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 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ó sẵn 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 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 hành vi 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:

   firebase deploy --only firestore:rules,storage
   

2. Nếu được hỏi có cấp cho Cloud Storage vai trò IAM để sử dụng các quy tắc trên nhiều dịch vụ hay không, hãy nhập Y hoặc N. (cả hai lựa chọn đề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ơ sở mã của ứng dụng web cần biết dự án Firebase nào mà ứng dụng đó nên sử dụng 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. Di chuyển xuống phần Ứng dụng của bạn rồi chọn ứng dụng web đã đăng ký.
   3. Trong ngăn Thiết lập và định cấu hình SDK, hãy sao chép toàn bộ mã initializeApp, bao gồm cả firebaseConfig const.
2. Thêm cấu hình Firebase vào cơ sở mã của ứng dụng web:
   1. Trong trình chỉnh sửa mã, hãy mở tệp src/lib/firebase/firebase.config.js.
   2. Chọn tất cả trong tệp rồi 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 thiết bị đầu cuối, 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 tương tự.

Sử dụng chatbot của ứng dụng web

1. Trong trình duyệt, hãy quay lại thẻ có ứng dụng web Friendly Conf đang chạy cục bộ.
2. Nhấp vào Đăng nhập bằng Google, rồi 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 (chẳng hạn như hi), rồi nhấp vào Gửi.
5. Chờ vài giây để chatbot phản hồi.

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

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

Bạn cần mô hình Gemini cơ bản mà chatbot của ứng dụng web sử dụng để biết thông tin cụ thể về hội nghị khi mô hình tạo câu trả lời cho người tham dự bằng ứng dụng. Có rất nhiều cách để kiểm soát và điều 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ẽ cho bạn thấy một cách rất cơ bản bằng cách cung cấp "bối cảnh" trong câu lệnh ban đầu (thay vì chỉ có đầu vào 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 nhật ký trò chuyện).
2. Trong trình chỉnh sửa mã, hãy mở tệp src/app/page.tsx.
3. Di chuyển xuống và thay thế đoạn mã ở dòng 93 hoặc gần đó có nội dung 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 trong trình duyệt của bạn.
6. Tiếp theo, hãy nhập một lời chào (chẳng hạn như hi), rồi nhấp vào Gửi.
7. Chờ vài giây để chatbot phản hồi.

Chatbot phản hồi bằng kiến thức dựa trên ngữ cảnh được cung cấp 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 một đề xuất phù hợp với bạn dựa trên ngữ cảnh này cũng như ngày/giờ hiện tại. Giờ đây, bạn có thể chỉ định các câu hỏi nối tiếp và tìm hiểu sâu hơn.

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

1. Trong trình chỉnh sửa mã, hãy mở tệp src/app/page.tsx.
2. Di chuyển xuống và thay thế đoạn mã ở dòng 56 hoặc gần đó có nội dung ...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 trong trình duyệt của bạn.
5. Tải lại trang.

Bạn cũng có thể thử trò chuyện với chatbot trong bối cảnh trước đây:

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?Chatbot sẽ trả lời.
2. Trong hộp văn bản Nhập tin nhắn, hãy đặt một câu hỏi tiếp theo liên quan đến câu hỏi trước: Give me a few more details about the last one.

Chatbot phản hồi bằng kiến thức trong quá khứ. Vì nhật ký trò chuyện hiện là một phần của ngữ cảnh, nên chatbot hiểu được các câu hỏi nối tiếp.

7. Thiết lập tiện ích "Multimodal Tasks with the Gemini API" (Các tác vụ đa phương thức bằng Gemini API)

Tiện ích "Multimodal Tasks with the Gemini API" (Các tác vụ đa phương thức bằng Gemini API) gọi Gemini API bằng các câu lệnh đa phương thức có chứa một câu lệnh văn bản cũng như một URL tệp hoặc URL Cloud Storage được hỗ trợ (xin lưu ý rằng ngay cả Google AI Gemini API cũng sử dụng URL Cloud Storage làm cơ sở hạ tầng URL tệp cơ bản). Tiện ích này cũng hỗ trợ các biến handlebars để thay thế các giá trị trong tài liệu Cloud Firestore nhằm tuỳ chỉnh câu lệnh văn bản.

Trong ứng dụng, bất cứ khi nào tải một hình ảnh lên một vùng lưu trữ Cloud Storage, bạn có thể tạo một URL và thêm URL đó vào một tài liệu Cloud Firestore mới – nhờ đó 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 tôi đã cung cấp mã để tải hình ảnh lên và ghi URL vào một tài liệu Firestore.

Cài đặt tiện ích "Multimodal Tasks with the Gemini API" (Các tác vụ đa phương thức bằng Gemini API)

1. Chuyển đến tiện ích "Các tác vụ đ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 chuyển đến phần Định cấu hình tiện ích.
   1. Trong trình đơn Gemini API Provider (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 những 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 đến bộ sưu tập trên Firestore), hãy nhập: gallery
   3. Trong hộp văn bản Câu lệnh, 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 Image field, hãy nhập: image
   5. Trong trình đơn Vị trí của Cloud Functions, hãy chọn vị trí mà bạn muốn (chẳng hạn như Iowa (us-central1) hoặc vị trí mà bạn đã chỉ định trước đó cho cơ sở dữ liệu Firestore).
   6. Giữ nguyên tất cả các giá trị khác theo mặc định.
5. Nhấp vào Cài đặt tiện ích rồi đợi tiện ích cài đặt xong.

Dùng thử tiện ích "Multimodal Tasks with the Gemini API" (Các tác vụ đ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 "Multimodal Tasks with the Gemini API" (Các tác vụ đa phương thức 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 Firebase trước.

Tiện ích này sẽ được kích hoạt bất cứ khi nào một tài liệu 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 sẽ lấy URL hình ảnh trong Cloud Storage trong tài liệu Cloud Firestore và truyền URL đó làm một phần của câu lệnh đa phương thức trong một lệnh gọi đến Gemini API.

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

1. Chuyển đến Bộ nhớ trong dự án Firebase của bạn.
2. Nhấp vào biểu tượng 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 một tệp hình ảnh JPEG để tải lên.

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

1. Chuyển đến 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ã nhận dạng 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 Mã nhận dạng tài liệu, hãy nhấp vào Tự động tạo mã nhận dạng.
   2. Trong hộp văn bản Field (Trường), hãy nhập: image. Trong hộp Giá trị, hãy nhập uri Vị trí lưu trữ của hình ảnh mà 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 Field (Trường), hãy nhập: published. Trong hộp 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 có một tài liệu chứa câu trả lời cho truy vấn của bạn.

Sử dụng thư viện ảnh của ứng dụng web

1. Trong trình duyệt, hãy quay lại thẻ có ứng dụng web Friendly Conf đang chạy cục bộ.
2. Nhấp vào thẻ điều hướng Thư viện.
3. Bạn sẽ thấy một thư viện gồm những hình ảnh đã tải lên và nội dung mô tả do AI tạo. Thư mục này phải có hình ảnh mà bạn đã tải lên trước đó vào thư mục gallery trong Nhóm lưu trữ.
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 vài giây để hình ảnh xuất hiện trong thư viện. Một lát 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 tìm hiểu mã về cách triển khai này, hãy xem src/app/gallery/page.tsx trong cơ sở mã của ứng dụng web.

8. Phần thưởng: Triển khai ứng dụng

Firebase cung cấp một số cách để bạn có thể triển khai một ứ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:

• Lựa chọn 1: Firebase Hosting – 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 trữ mã nguồn cục bộ trên máy).
• Lựa chọn 2: Dịch vụ 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 bất cứ khi nào 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 để đáp ứng 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

Hãy 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 trữ mã nguồn trên máy tính).

1. Trong thiết bị đầu cuối, hãy khởi động Firebase Hosting 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í mà bạn đã sử dụng trước đó trong lớp học lập trình này. Sau đó, nhấn phím 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 lên Hosting bằng cách chạy lệnh sau:

   firebase deploy --only hosting
   

Tất cả đã hoàn tất! Nếu bạn cập nhật ứng dụng và muốn triển khai phiên bản mới đó, chỉ cần chạy lại firebase deploy --only hosting và Firebase Hosting sẽ tạo cũng như triển khai lại ứng dụng của bạn.

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

Hãy sử dụng lựa chọn này nếu bạn muốn triển khai tự động bất cứ khi nào bạn đẩ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 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à Kho lưu trữ của bạn. Nhấp vào Tiếp theo.
5. Trong phần Deployment setting > Root directory (Chế độ 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 trực tiếp, hãy chọn nhánh main của kho lưu trữ GitHub. Nhấp vào Tiếp theo.
7. Nhập một mã nhận dạng cho phần phụ trợ của bạn (ví dụ: chatbot).
8. Nhấp vào Hoàn tất và triển khai.

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

Từ thời điểm này trở đi, mỗi khi bạn đẩy một thay đổi vào kho lưu trữ GitHub, Dịch vụ lưu trữ ứng dụng Firebase sẽ tự động tạo 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ựu 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 Firebase sử dụng AI tạo sinh. Việc sử dụng Tiện ích Firebase rất thuận tiện vì bạn không cần tìm hiểu và viết nhiều mã khởi động để xử lý việc xác thực bằng các dịch vụ Google Cloud hoặc logic Cloud Functions phụ trợ để theo dõi và tương tác với Firestore cũng như các dịch vụ và API của Google Cloud.

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

Thay vì đi thẳng vào mã, bạn đã dành thời gian để tìm hiểu cách hoạt động của các tiện ích genAI 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. Điều này có thể đặc biệt hữu ích trong khi gỡ lỗi đầu ra của một tiện ích.

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

Bạn đã tạo một ứng dụng web dựa trên AI sử dụng Tiện ích Firebase để truy cập vào một số ít chức năng của mô hình Gemini.

Trong ứng dụng web, bạn sử dụng tiện ích "Chatbot with Gemini API" (Chatbot có Gemini API) để cung cấp cho người dùng một giao diện trò chuyện tương tác, bao gồm cả ngữ cảnh dành riêng cho ứng dụng và ngữ cảnh trước đây 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 Firestore dành riêng cho một người dùng cụ thể.

Ứng dụng web này cũng sử dụng tiện ích "Multimodal Tasks with the Gemini API" (Các tác vụ đa phương thức bằng Gemini API) để tự động tạo nội dung mô tả hình ảnh cho những hình ảnh được tải lên.

Các bước tiếp theo

• Thử nghiệm với các 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 dựa trên AI tạo sinh tăng cường khả năng truy xuất (RAG).
• Hãy thử một lớp học lập trình tự học cho thấy cách thêm một chatbot vào một ứng dụng Firebase hiện có bằng 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.
• Dạy chatbot của bạn gọi vào ứng dụng hiện có bằng tính năng gọi hàm.