Cách sử dụng Gemini để khám phá và cải thiện một ứng dụng hiện có

1. Tổng quan

Lớp học lập trình này sẽ minh hoạ cách sử dụng Gemini để tạo một ứng dụng khách dựa trên một phần phụ trợ API hiện có.

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

Lớp học này nhằm minh hoạ cách sử dụng Gemini với một ứng dụng hiện có. Trong phòng thí nghiệm này, bạn sẽ tìm hiểu cách thực hiện những việc sau:

Triển khai Giải pháp khởi động nhanh cho hoạt động xử lý hình ảnh bằng AI/học máy
Dùng Gemini để khám phá ứng dụng API
Dùng Gemini để tạo một ứng dụng khách cho ứng dụng API

Thiết lập – Tạo dự án mới

Tuỳ thuộc vào chính sách tổ chức, bạn có thể không triển khai được giải pháp này một cách chính xác.

Đề xuất: Sử dụng tài khoản mà bạn có đầy đủ quyền (chẳng hạn như tài khoản cá nhân) thay vì tài khoản công ty hoặc trường học

Lưu ý: Nếu gần đây bạn đã tạo một dự án mà bạn có toàn quyền và đã bật Gemini API trên dự án đó, thì bạn có thể tiếp tục sử dụng dự án đó và bỏ qua bước này. Ví dụ: nếu gần đây bạn đã hoàn thành một lớp học lập trình khác về Gemini, thì bạn có thể bỏ qua bước này.

Chuyển đến Google Cloud Console
Nhấp vào trình đơn thả xuống dự án hiện tại.
Nhấp vào Dự án mới
Thêm tên dự án rồi nhấp vào TẠO
- Đề xuất: Sử dụng tên dự án riêng biệt để Project name và Project ID có cùng

2. Triển khai Giải pháp hỗ trợ khởi động

Jump Start Solutions là các mẫu giải pháp được tạo sẵn của Google Cloud. Phòng thí nghiệm này sử dụng Giải pháp hỗ trợ ban đầu để minh hoạ cách Gemini có thể giúp cải thiện một ứng dụng có sẵn.

Chuyển đến trang thông tin chi tiết về Giải pháp khởi động nhanh cho việc xử lý hình ảnh bằng AI/học máy
- Nhấp vào trình đơn có biểu tượng ba dấu gạch ngang
- Trong trình đơn phụ Sản phẩm và giải pháp, hãy nhấp vào Giải pháp hỗ trợ nhanh
- Nhấp vào Xử lý hình ảnh bằng AI/ML trên Cloud Functions
Nhấp vào TRIỂN KHAI
- Nếu dự án của bạn chưa bật tính năng thanh toán, hãy bật tính năng thanh toán.
- Xác nhận tên dự án rồi nhấp vào TIẾP TỤC
- Chọn us-central1 (Iowa) làm khu vực.
- Nếu được nhắc nhập thông tin khác, hãy chấp nhận các giá trị mặc định.
- Nhấp vào TRIỂN KHAI.
- Quá trình này có thể mất đến 15 phút.
- Bạn không cần thực hiện bất kỳ thay đổi nào, nhưng có thể khám phá việc triển khai Giải pháp hỗ trợ ban đầu.

Khắc phục sự cố

Vấn đề: Bạn có thấy thông báo lỗi Partial deployment. không?
- Giải pháp: Rất tiếc, điều này có nghĩa là bạn nên xoá hoạt động triển khai và bắt đầu lại. Bạn sẽ thấy một nút có nội dung XOÁ TRIỂN KHAI. Nhấp vào nút đó rồi triển khai lại Giải pháp hỗ trợ khởi động.

3. Bật Gemini

Thiết lập môi trường chỉnh sửa mã và bật Gemini

Chuyển đến Cloud Shell Editor
- Quay lại Google Cloud Console
- Nhập Cloud Shell Editor vào thanh tìm kiếm rồi nhấp vào Cloud Shell Editor trong trình đơn thả xuống.
- Nhấp vào Dùng thử Trình chỉnh sửa mới nếu bạn đang sử dụng Trình chỉnh sửa cũ.
  - Lưu ý: Nếu không thấy nút Dùng thử Editor mới, thì có thể bạn đã sử dụng Editor mới rồi. Trình chỉnh sửa cũ sẽ hoạt động, nhưng các khung hiển thị sẽ trông hơi khác.
- Nhấp vào biểu tượng Mở trong cửa sổ mới
Nếu được nhắc, hãy đăng nhập hoặc uỷ quyền cho tài khoản của bạn.
- Tuỳ thuộc vào chế độ cài đặt, bạn có thể được nhắc uỷ quyền cho tài khoản của mình nhiều lần trong phòng thí nghiệm này. Khi được hỏi, hãy chọn uỷ quyền mỗi lần.
Nhấp vào nút Cloud Code – Sign in (Cloud Code – Đăng nhập) trong thanh trạng thái dưới cùng như minh hoạ. Uỷ quyền cho trình bổ trợ theo hướng dẫn.
Nếu thấy lời nhắc, hãy nhấp vào Chọn một dự án trên Google Cloud rồi chọn dự án mà bạn đang sử dụng
Bật Gemini
- Nhấp vào Cloud Code
  - Lưu ý: Tuỳ thuộc vào kích thước màn hình, bạn có thể phải thực hiện một hoặc hai bước.
- Nhấp vào Thay đổi chế độ cài đặt trong phần TRỢ GIÚP VÀ PHẢN HỒI
- Loại Gemini: Enable
- Chọn hộp đánh dấu (nếu chưa được chọn)
- Tải lại IDE.
- Thao tác này sẽ bật Gemini trong Cloud Code và thanh trạng thái Gemini sẽ xuất hiện trong IDE của bạn.
Nhấp vào nút Gemini ở góc dưới cùng bên phải như minh hoạ rồi chọn dự án Google Cloud phù hợp.
- Nếu bạn thấy lỗi Gemini has not been enabled for your selected project. Nhấp vào Bật Gemini API
Xác nhận rằng bạn có thể thấy dự án trên đám mây của Google Cloud chính xác ở bên trái (bạn sẽ thấy tên dự án của mình) và Gemini được bật ở bên phải, trong thanh trạng thái như minh hoạ bên dưới:

4. Tải mã Cloud Functions xuống

Tải mã xuống và dùng Gemini để tìm hiểu thêm về Jump Start Solutions cũng như mã bạn đã triển khai.

Nếu bạn đã chuyển sang một phần khác, hãy nhấp vào Cloud Code
Nhấp vào Cloud Functions
- Nếu bạn thấy nút Chọn một dự án, hãy nhấp vào nút đó rồi chọn dự án mà bạn đang làm việc.
- Nhấp vào hàm annotate-http
- Nhấp vào biểu tượng Tải xuống không gian làm việc mới
Sử dụng annotate-http-1 làm tên không gian làm việc (theo mặc định) rồi nhấp vào OK
Mở tệp main.py
- Nhấp vào biểu tượng Trình khám phá
- Nhấp vào tệp main.py để mở tệp đó
Nhấp vào biểu tượng Gemini Chat
- Lưu ý: Tuỳ thuộc vào kích thước màn hình, bạn có thể phải thực hiện một hoặc hai bước.
Hãy thử đặt câu hỏi cho Gemini. Nhập một câu lệnh, chẳng hạn như:
- What is a Jump Start Solution in Google Cloud?
- Explain this code.

Đặt lại Gemini Chat

Câu lệnh ảnh hưởng đến các câu lệnh trong tương lai. Ví dụ: nếu bạn nhập sai mã dự án hoặc khu vực, thì những thông tin đó sẽ được chuyển tiếp trong các câu lệnh và câu trả lời sau này, điều này có thể ảnh hưởng tiêu cực đến trải nghiệm của bạn. Nếu nhập sai hoặc muốn xoá nhật ký vì bất kỳ lý do nào khác, bạn có thể sử dụng biểu tượng thùng rác để đặt lại cuộc trò chuyện.

Đặt lại khoảnh khắc nổi bật trong thùng rác của cuộc trò chuyện với Duet

5. Gọi điểm cuối Cloud Functions hiện có

Khám phá mã và gọi điểm cuối mà bạn đã triển khai trong Giải pháp khởi động nhanh.

Nhập câu lệnh:
- QUAN TRỌNG Thay thế my-project-with-duet trong câu lệnh sau bằng mã dự án của bạn.
- The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
- Bạn sẽ nhận được một phản hồi bao gồm một lệnh curl như sau:
```
curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
...
```
- Sao chép lệnh curl này để sử dụng trong bước tiếp theo
Thử lệnh trong một cửa sổ dòng lệnh mới
- Nhấp vào trình đơn có biểu tượng ba dấu gạch ngang
- Nhấp vào Terminal (Thiết bị đầu cuối)
- Nhấp vào New Terminal (Thiết bị đầu cuối mới)
- Dán lệnh curl từ bước trước vào cửa sổ dòng lệnh rồi nhấn Enter để chạy lệnh
- Bạn sẽ nhận được một câu trả lời bắt đầu như sau:
```
{
    "labelAnnotations": [
    {
    "mid": "/m/0csby",
    "description": "Cloud",
    "score": 0.97885925,
    "topicality": 0.97885925,
...
```
(Không bắt buộc) Bạn có thể làm việc này với một hình ảnh khác trên Internet công cộng bằng cách đưa ra câu lệnh cho Duet, chẳng hạn như:
- Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

Khắc phục sự cố

Lưu ý về tính không xác định: Gemini và các sản phẩm khác dựa trên Mô hình ngôn ngữ lớn (LLM) có tính không xác định, tức là khi đưa ra cùng một dữ liệu đầu vào, bạn có thể nhận được các kết quả đầu ra khác nhau. Ngay cả khi làm theo các bước một cách chính xác, bạn vẫn có thể không nhận được các lệnh hoạt động. Các bước khắc phục sự cố này sẽ giúp bạn giải quyết những vấn đề đó.

Lệnh curl được tạo sẽ có dạng như sau:

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

Gemini đang sử dụng TEST_IMAGE trong tệp main.py. Đây là hình ảnh về Tháp Eiffel.

Nếu lệnh curl không hoạt động, bạn có thể kiểm tra một số điều sau:

Vấn đề: Điểm cuối URL có chứa .a.run.app không?
- Giải pháp: Duet có thể cho rằng bạn đang triển khai lên Cloud Run. Thay thế my-project-with-duet bằng mã dự án của bạn trong https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate để lấy điểm cuối Cloud Functions chính xác và sử dụng điểm cuối đó cho lệnh curl.
Vấn đề: Điểm cuối URL có chứa my-project-with-duet không?
- Giải pháp: Thay thế my-project-with-duet bằng mã dự án của bạn.
Vấn đề: Điểm cuối URL có thiếu us-central1 không?
- Giải pháp: Đảm bảo URL bắt đầu bằng us-central1, chẳng hạn như: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate kèm theo mã dự án của bạn.
Vấn đề: Tuỳ thuộc vào câu lệnh được dùng, đôi khi điểm cuối được tạo sẽ có dạng cloudfunctions.net/annotate-http hoặc cloudfunctions.net/annotate. URL điểm cuối có thiếu /annotate-http/annotate ở cuối không?
- Giải pháp: Đảm bảo rằng điểm cuối URL kết thúc bằng đường dẫn ứng dụng API đầy đủ cloudfunctions.net/annotate-http/annotate
Vấn đề: Yêu cầu cURL hoạt động nhưng không nhận được nhiều thông tin. Yêu cầu có bao gồm các tính năng không?
- Giải pháp: Đây không phải là vấn đề lớn. Nếu bạn tiếp tục mà không thay đổi gì, phần còn lại của phòng thí nghiệm vẫn sẽ hoạt động. Nếu muốn nhận thêm thông tin, bạn có thể yêu cầu Duet thêm các tính năng vào yêu cầu cURL.
Vấn đề: Các câu trả lời có vẻ không chính xác hoặc thiếu ngữ cảnh cụ thể về mã. Bạn có đang sử dụng Gemini Chat trong Cloud Shell Editor không?
- Giải pháp: Thử mở tệp main.py và làm nổi bật mã liên quan đến câu lệnh của bạn trong khi sử dụng Gemini Chat trong Cloud Shell Editor. Trợ lý Gemini trên Google Cloud có nhiều bối cảnh khác nhau, dẫn đến các câu trả lời khác nhau.

Vấn đề: Câu trả lời cho câu lệnh vẫn chưa hoàn toàn chính xác.

Giải pháp: Thử một câu lệnh khác, trong đó bạn hướng dẫn Gemini chi tiết hơn về nội dung bạn muốn Gemini tạo ra. Nhớ thay thế my-project-with-duet bằng mã dự án của bạn. Dưới đây là ví dụ:

Give me the curl command for:

1- Cloud Function running in us-central1 and project my-project-with-duet
2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }

Vấn đề: Sau khi thực hiện tất cả các bước khắc phục sự cố này, thiết bị vẫn không hoạt động.
- Giải pháp: Do tính chất không xác định của các mô hình ngôn ngữ lớn (LLM), nên có thể Duet đã tạo ra một câu trả lời không phù hợp. Nếu điều đó xảy ra, hãy sao chép ví dụ về lệnh curl ở trên rồi thử chạy lệnh đó trong thiết bị đầu cuối. Nhớ thay thế my-project-with-duet bằng mã dự án của bạn.

6. Tạo một ứng dụng web cho API

Dùng Gemini để tạo một tệp index.html gọi điểm cuối của Cloud Functions trong Giải pháp hỗ trợ nhanh. Sau đó, hãy triển khai tệp index.html vào Lưu trữ Firebase để xem mã hoạt động.

Tạo mã phía máy khách
- Quay lại cuộc trò chuyện với Gemini, hãy nhập câu lệnh:
  - Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
- Sao chép tệp index.html được tạo trong phản hồi.
  - LƯU Ý: Bạn sẽ cần mã này sau này, vì vậy hãy lưu mã ở nơi nào đó nếu lo sợ có thể bị mất.
- Đóng main.py.
Tạo thư mục frontend mới
- Bạn có thể hỏi Gemini những câu hỏi như:
  - What are the console commands to create and navigate to a new frontend directory?
- Bạn sẽ thấy kết quả như mkdir frontend và cd frontend.
- Sử dụng Cloud Shell Terminal để xác nhận rằng bạn vẫn đang ở trong thư mục annotate-http-1 và chạy các lệnh đó:
  - cd ~/annotate-http-1
  - mkdir frontend
  - cd frontend
Xác nhận rằng bạn đã đăng nhập vào đúng dự án trong thiết bị đầu cuối Cloud Shell
- Bạn có thể hỏi Gemini những câu hỏi như:
  - What is the gcloud command to set my project?
- Bạn sẽ thấy kết quả như gcloud config set project my-project-with-duet
  - Xác nhận rằng mã dự án là chính xác, sau đó chạy lệnh trong thiết bị đầu cuối Cloud Shell.
Bật Firebase
- Trong một thẻ mới (để Cloud Shell Editor hiện tại mở), hãy truy cập vào https://console.firebase.google.com/
- Nhấp vào Thêm dự án
- Nhập mã dự án của bạn rồi đợi mã dự án đó xuất hiện trong trình đơn thả xuống
- Nhấp vào mã dự án của bạn
- Nhấp vào Tiếp tục
- Nhấp vào Xác nhận gói
- Nhấp vào Tiếp tục
- Bỏ chọn Bật Google Analytics cho dự án này
  - Firebase đề xuất sử dụng Google Analytics, nhưng Google Analytics sẽ không được dùng trong ứng dụng này.
- Nhấp vào Tiếp tục
- Đóng thẻ này và quay lại Cloud Shell Editor
- Lưu ý: Những bước này chỉ cần thiết cho những người dùng chưa từng sử dụng Firebase, nhưng mọi người đều có thể làm theo cùng một quy trình. Nếu thực hiện lại việc này trong tương lai, bạn có thể bỏ qua bước này.
Đăng nhập vào Firebase trong Cloud Shell
- Trong cửa sổ dòng lệnh của Cloud Shell Editor, hãy chạy lệnh firebase login --no-localhost
- Truy cập vào URL được cung cấp
  - Nhấp vào Có, tôi vừa chạy lệnh này
  - Nhấp vào Có, đây là mã phiên của tôi
  - Nhấp vào Sao chép
- Quay lại cửa sổ dòng lệnh của Cloud Shell Editor
- Dán giá trị đã sao chép vào thiết bị đầu cuối tại vị trí có nội dung: Enter authorization code:
- Nhấn Enter
Triển khai một trang web mới lên Lưu trữ Firebase
- Khởi chạy một dự án firebase mới
  - Bạn có thể hỏi Gemini những câu hỏi như:
    - What are the commands to initialize and deploy a new firebase application?
  - Bạn sẽ thấy kết quả như firebase init và firebase deploy kèm theo hướng dẫn.
  - Vì có nhiều cách để thực hiện việc này mà Gemini có thể đề xuất tuỳ theo lựa chọn ưu tiên của bạn, nên sau đây là một đề xuất cụ thể để bạn làm theo:
    - firebase init
      - Nhấn mũi tên xuống để chuyển đến Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
        
        Nhấn vào thanh Space
        
        Nhấn Enter
      - Nhấn mũi tên xuống để chuyển đến Use an existing project
        
        Nhấn Enter
      - Nếu bạn thấy danh sách dự án, hãy dùng mũi tên xuống để chuyển đến dự án mà bạn đang sử dụng
        
        Nhấn Enter
      - Nếu bạn được yêu cầu Please input the ID of the Google Cloud Project you would like to add Firebase:
        
        Nhập mã dự án cho dự án của bạn.
        
        Nhấn Enter
      - Đối với tất cả các lời nhắc còn lại, hãy nhấn Enter
    - firebase deploy
Triển khai lại ứng dụng của bạn bằng lệnh gọi đến điểm cuối API Cloud Functions
- Các lệnh trước đó sẽ tạo một thư mục public có tệp index.html bên trong thư mục frontend mà bạn đã tạo trước đó. Tệp ~/annotate-http-1/frontend/public/index.html là nơi bạn nên thực hiện một số thay đổi tiếp theo.
- Mở tệp index.html.
  - Nhấp vào biểu tượng Trình khám phá
  - Nhấp vào thư mục frontend
  - Nhấp vào thư mục public
  - Nhấp vào tệp index.html
- Xoá nội dung trong tệp index.html hiện có.
- Dán mã bạn đã sao chép trước đó vào tệp index.html
- Chạy firebase deploy để triển khai ứng dụng mới
- Truy cập vào URL Lưu trữ Firebase để xem URL đó có hoạt động hay không!
  - Lưu ý: Có thể bạn cần làm mới trang web hoàn toàn để xem nội dung cập nhật.

Khắc phục sự cố

Tệp index.html có dạng như sau:

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

Nếu trang web không hoạt động, bạn có thể kiểm tra một số vấn đề sau:

Vấn đề: 404 (Không tìm thấy) URL được dùng trong phương thức fetch có bao gồm my-project-with-duet không?
- Giải pháp: Thay thế my-project-with-duet bằng mã dự án của bạn.
Vấn đề: 404 (Không tìm thấy) URL được dùng trong phương thức fetch có thiếu URL đầy đủ không?
- Giải pháp: Nhớ thêm URL đầy đủ vào phương thức fetch. Mã này sẽ có dạng như https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
Vấn đề: Câu trả lời cho câu lệnh vẫn chưa hoàn toàn chính xác.
- Giải pháp: Thử một câu lệnh khác, trong đó bạn hướng dẫn Gemini chi tiết hơn về nội dung bạn muốn Gemini tạo ra. Nhớ thay thế my-project-with-duet bằng mã dự án của bạn. Dưới đây là một ví dụ:
  - Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
Vấn đề: Trang web của bạn đã được triển khai nhưng không hoạt động?
- Giải pháp: Do tính chất không xác định của các mô hình ngôn ngữ lớn (LLM), nên có thể Duet đã tạo ra một câu trả lời không phù hợp. Nếu điều đó xảy ra, hãy sao chép ví dụ index.html ở trên rồi thử triển khai lại bằng firebase deploy. Nhớ thay thế my-project-with-duet bằng mã dự án của bạn.

7. (Không bắt buộc) Khám phá không giới hạn

Sử dụng Gemini và trợ lý trong trình chỉnh sửa để thêm kiểu CSS vào ứng dụng của bạn và triển khai lại ứng dụng khi bạn hoàn tất! Nếu đang tìm ý tưởng, bạn có thể thử câu lệnh mẫu sau:
- Make this index.html file use material design.
Những việc khác bạn có thể thử:
- Trang web được tạo phải hoạt động với mọi hình ảnh công khai http. Yêu cầu Duet hiển thị hình ảnh trên trang.

8. (Không bắt buộc) Xoá dự án

Nếu muốn tránh bị tính phí cho các tài nguyên bạn đã tạo hôm nay, bạn có thể hỏi Duet cách thực hiện.

Nhập câu lệnh:
- How can I delete my project?
- Bạn sẽ thấy kết quả như gcloud projects delete my-project-with-duet.
- QUAN TRỌNG Thay thế my-project-with-duet trong lệnh trước bằng mã dự án của bạn.
Chạy lệnh gcloud projects delete để xoá tất cả tài nguyên bạn đã tạo trong ngày hôm nay.