Trang này được dịch bởi Cloud Translation API.

Sử dụng Gemini Code Assistant để khám phá và tăng cường giải pháp Jump Start (Bắt đầu tóm tắt bằng AI)

1. Giới thiệu

Trong lớp học lập trình này, chúng ta sẽ xem xét một Giải pháp Jump Start hiện có, AI Summarization. Giải pháp này sử dụng các mô hình Vertex AI để tóm tắt các tài liệu PDF đã được tải lên Google Cloud Storage.

Sau đó, chúng tôi sẽ sử dụng tính năng Hỗ trợ mã của Gemini để:

Tìm hiểu về đoạn mã Python dùng để hỗ trợ Hàm Cloud. Hàm này thực hiện việc trích xuất văn bản từ tài liệu PDF, tóm tắt và ghi kết quả vào BigQuery.
Chúng tôi sẽ dựa vào tính năng Hỗ trợ mã của Gemini trong suốt quá trình này để viết chức năng mới. Chúng ta sẽ phát triển một ứng dụng web (Ứng dụng Python bình thường) và chạy ứng dụng này trên máy để xác minh mã nguồn của mình.
Nếu muốn, chúng ta cũng có thể xem xét việc triển khai ứng dụng này lên Cloud Run và cải thiện thiết kế (tính thẩm mỹ) của ứng dụng web bằng Material Design.

Bạn sẽ thực hiện...

Bạn sẽ triển khai Giải pháp bắt đầu nhanh cho việc tóm tắt bằng AI và kích hoạt quy trình để tìm hiểu cách hoạt động của giải pháp này.
Sau đó, bạn sẽ sử dụng Cloud Shell IDE để tải mã hiện có xuống cho Giải pháp Jump Start và sử dụng Gemini Code Assist để hiểu mã.
Bạn sẽ sử dụng Gemini Code Assist Cloud Shell IDE để tạo mã cho một chức năng mới.

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

Cách hoạt động của Giải pháp khởi động sự kiện tóm tắt bằng AI.
Cách sử dụng tính năng Hỗ trợ viết mã của Gemini cho một số nhiệm vụ của nhà phát triển như tạo mã, hoàn thành mã và tóm tắt mã.

Bạn cần...

Trình duyệt web Chrome
Tài khoản Gmail
Một dự án trên đám mây đã bật tính năng thanh toán
Tính năng Hỗ trợ mã Gemini đã được bật cho dự án của bạn trên Google Cloud

Phòng thí nghiệm này nhắm đến nhà phát triển ở mọi cấp độ, kể cả người mới bắt đầu. Mặc dù ứng dụng mẫu bằng ngôn ngữ Python, nhưng bạn không cần phải quen thuộc với lập trình Python để hiểu điều gì đang diễn ra. Trọng tâm của chúng tôi sẽ là làm quen với các chức năng của Gemini Code Assist cho nhà phát triển.

2. Thiết lập

Phần này bao gồm mọi việc bạn cần làm để bắt đầu với phòng thí nghiệm này.

Bật Gemini cho Cloud trong dự án Google Cloud

Giờ đây, chúng tôi sẽ bật Gemini cho Cloud trong dự án của mình trên Google Cloud. Hãy làm theo các bước dưới đây:

Truy cập vào https://console.cloud.google.com và đảm bảo rằng bạn đã chọn Dự án Google Cloud mà bạn định hợp tác trong phòng thí nghiệm này. Nhấp vào biểu tượng Mở Gemini mà bạn thấy ở trên cùng bên phải.

28f084ec1e159938.pngS

Cửa sổ trò chuyện của Gemini cho Cloud sẽ mở ra ở bên phải bảng điều khiển. Nhấp vào nút Bật như hình dưới đây. Nếu bạn không thấy nút Bật mà thay vào đó thấy giao diện Chat, thì có khả năng bạn đã bật Gemini cho Cloud cho dự án này và có thể chuyển thẳng đến bước tiếp theo.

Sau khi bật Gemini cho Cloud, bạn có thể dùng thử Gemini cho Cloud bằng cách đặt một hoặc hai câu hỏi. Một vài truy vấn mẫu sẽ được hiển thị nhưng bạn có thể thử những truy vấn như What is Cloud Run?

9859ea86a8310cb.png.

Gemini cho Cloud sẽ trả lời câu hỏi của bạn. Bạn có thể nhấp vào biểu tượng ở góc trên cùng bên phải để đóng cửa sổ trò chuyện của Gemini cho Cloud.

Bật tính năng Hỗ trợ mã Gemini trong IDE Cloud Shell

Chúng ta sẽ sử dụng Cloud Shell IDE, một môi trường phát triển dựa trên Mã OSS được quản lý hoàn toàn, cho phần còn lại của lớp học lập trình này. Chúng ta cần bật và định cấu hình tính năng Hỗ trợ mã trong IDE Cloud Shell và thực hiện các bước dưới đây:

Truy cập vào ide.cloud.google.com. Có thể mất chút thời gian để IDE xuất hiện, vì vậy hãy kiên nhẫn.
Nhấp vào nút Cloud Code – Đăng nhập trên thanh trạng thái ở dưới cùng như minh hoạ. Uỷ quyền trình bổ trợ theo hướng dẫn. Nếu bạn thấy dòng chữ "Cloud Code - no project" (Mã đám mây – không có dự án) trên thanh trạng thái, hãy chọn mục đó rồi chọn Dự án Google Cloud cụ thể trong danh sách các dự án mà bạn dự định hợp tác.

6f5ce865fc7a3ef5.png.

Nhấp vào nút Gemini ở góc dưới cùng bên phải như minh hoạ rồi chọn một lần cuối cùng vào đúng dự án Google Cloud. Nếu bạn được yêu cầu bật Cloud AI Companion API, vui lòng bật và tiếp tục.
Sau khi chọn dự án trên Google Cloud, hãy đảm bảo rằng bạn có thể thấy điều đó trong thông báo trạng thái Mã đám mây trên thanh trạng thái và bạn cũng đã bật tính năng Hỗ trợ mã ở bên phải, trên thanh trạng thái như sau:

709e6c8248ac7d88.pngS

Gemini Code Assistant đã sẵn sàng cho bạn sử dụng!

Không bắt buộc: Nếu không thấy Gemini trong thanh trạng thái ở dưới cùng bên phải, bạn sẽ cần bật Gemini trong Mã đám mây. Trước khi thực hiện việc này, hãy đảm bảo rằng Gemini đã được bật trong IDE bằng cách chuyển đến Cloud Code Extension → Settings (Tiện ích mã đám mây → Cài đặt) rồi nhập văn bản Gemini như hình bên dưới. Đảm bảo rằng hộp đánh dấu đã được chọn. Bạn nên tải lại IDE.Thao tác này sẽ bật Gemini trong Cloud Code và biểu tượng Gemini trên thanh trạng thái sẽ xuất hiện trong IDE của bạn.

228c9c9c6b956c8e.png.

3. Triển khai giải pháp Bắt đầu ngay khi bắt đầu tóm tắt bằng AI

Chuyển đến giải pháp tóm tắt tài liệu dựa trên AI tạo sinh
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.
Chọn us-central1 làm khu vực.
Nhấp vào triển khai.
Quá trình này có thể mất tối đa 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á cách triển khai giải pháp Jump Start Solution bằng cách nhấp vào nút KHÁM PHÁ GIẢI PHÁP NÀY trên trang chi tiết về việc triển khai giải pháp.

4. Trò chuyện với Gemini

Chúng ta sẽ bắt đầu từ việc tìm hiểu cách trò chuyện với Gemini. Gemini có thể hoạt động như một trợ lý trò chuyện trong IDE Cloud Shell như một phần của tiện ích Cloud Code trong VS Code. Bạn có thể hiển thị công cụ này bằng cách nhấp vào nút Gemini trên thanh điều hướng bên trái. Tìm biểu tượng Gemini trên thanh công cụ điều hướng bên trái rồi nhấp vào biểu tượng đó.

Thao tác này sẽ mở Chat: Ngăn GeminiI bên trong IDE Cloud Shell và bạn có thể trò chuyện với Gemini để được trợ giúp trên Google Cloud.

14ad103efaa0ddaa.png.

Hãy cho phép chúng tôi sử dụng ngăn trò chuyện của Gemini để nhập câu lệnh và xem câu trả lời của Gemini. Nhập câu lệnh sau:

What is Cloud Run?

Gemini sẽ trả lời kèm theo thông tin chi tiết về Cloud Run. Lời nhắc là các câu hỏi hoặc câu lệnh mô tả sự trợ giúp bạn cần. Câu lệnh có thể bao gồm bối cảnh trong đoạn mã hiện có mà Google Cloud phân tích để đưa ra câu trả lời hữu ích hoặc hoàn chỉnh hơn. Để biết thêm thông tin về cách viết câu lệnh nhằm tạo ra câu trả lời phù hợp, hãy xem bài viết Viết những câu lệnh phù hợp hơn cho Gemini trong Google Cloud.

Hãy thử các câu lệnh mẫu sau đây hoặc bất kỳ câu lệnh nào của bạn để đặt câu hỏi về Google Cloud:

What is the difference between Cloud Run and Cloud Functions?
What services are available on Google Cloud to run containerized workloads?
What are the best practices to optimize costs while working with Google Cloud Storage?

Lưu ý biểu tượng thùng rác ở trên cùng – đây là cách bạn dùng để đặt lại ngữ cảnh cho lịch sử trò chuyện của tính năng Hỗ trợ mã. Ngoài ra, xin lưu ý rằng hoạt động tương tác này theo bối cảnh đối với(các) tệp mà bạn đang xử lý trong IDE.

5. Tải hàm đám mây của giải pháp Jump Start trong Cloud Code

Giả sử bạn đang dùng Cloud Shell Editor, hãy làm theo các bước sau:

Nhấp vào Mã đám mây
Lưu ý: Tuỳ thuộc vào kích thước màn hình, quá trình này có thể mất một bước hoặc hai bước.

4bf4e654a1749030.pngS hoặc

Nhấp vào Cloud Functions.
Nếu được nhắc, hãy đăng nhập hoặc cấp quyền cho tài khoản của bạn.
Nhấp vào chức năng webhook.
Nhấp vào biểu tượng Tải xuống không gian làm việc mới
Sử dụng webhook-1 làm tên không gian làm việc (sẽ là tên mặc định) hoặc bất kỳ tên nào khác, rồi nhấp vào OK.
Thao tác này sẽ mở mã trong IDE Cloud Shell.

6. Xem xét dự án hiện có

Giải pháp Jump Start này được minh hoạ bên dưới:

Xem lại quy trình từ chức năng Tải tệp PDF lên Cloud Storage. Hàm đám mây sẽ được gọi nếu tệp PDF được tải lên được cung cấp trong tệp main.py.

Nhấp vào tệp đó. Điểm truy cập cho hàm đám mây là hàm entrypoint. Cuối cùng, hàm này sẽ gọi hàm cloud_event_entrypoint trích xuất văn bản từ tệp PDF, sau đó gọi summarization_entrypoint. Hàm này sử dụng Mô hình Vertex AI để tóm tắt và ghi kết quả vào GCS và BigQuery tương ứng.

Đánh dấu tất cả đoạn mã trong tệp main.py hoặc bất kỳ đoạn mã cụ thể nào. Nhấp vào Gemini Chat rồi đưa ra câu lệnh sau: Explain this.

Thao tác này sẽ giải thích cho bạn về mã.

7. Thực thi lần chạy mẫu

Theo sơ đồ cấu trúc, chúng ta sẽ tải một tệp lên bộ chứa <PROJECT_ID>_uploads để Hàm đám mây được gọi.

Hãy đảm bảo rằng bạn đã có sẵn một tệp PDF mẫu để tải lên và muốn nhận bản tóm tắt.

Chuyển đến Google Cloud Storage trong Cloud Console.
Chuyển đến bộ chứa <PROJECT_ID>_uploads. Nhấp vào đường liên kết TẢI TỆP LÊN rồi tải một tệp PDF mẫu lên.

Nếu không có tệp PDF mẫu, bạn có thể sử dụng một trong những mẫu mà chúng tôi đã tạo. Trên Cloud Shell, hãy chạy lệnh sau:

gsutil cp \
    gs://arxiv-dataset/arxiv/cmp-lg/pdf/9410/9410009v1.pdf \
    gs://<PROJECT_ID>_uploads/

Sau khi tệp được tải lên thành công, chức năng đám mây webhook sẽ được gọi và tóm tắt văn bản có trong tài liệu. Kết quả sẽ được ghi vào tập dữ liệu BigQuery có tên summary_dataset và trong bảng summary_table.

Truy vấn bảng để xem kết quả của bản tóm tắt.

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

Quy trình trên là quy trình từng bước theo cách thủ công để tải tệp PDF mà chúng tôi muốn tóm tắt lên. Vậy còn việc xây dựng giao diện người dùng web cho ứng dụng thì sao?

Yêu cầu đối với giao diện người dùng web rất đơn giản:

Biểu mẫu HTML cơ bản cho phép chúng ta chọn và tải tệp lên. Biểu mẫu này cần được tóm tắt.
Tệp này khi tải lên thành công phải được ghi vào bộ chứa <PROJECT_ID>_uploads để các chức năng còn lại hoạt động như bình thường.

Chúng tôi sẽ sử dụng Python và khung Flask cho các ứng dụng web để xây dựng nền tảng này với sự hỗ trợ của Duet AI.

Chúng ta hãy bắt đầu. Chúng tôi sẽ giả định rằng bạn vẫn đang mở chính không gian làm việc đó trong IDE Cloud Shell.

Đóng tất cả các tệp và đưa ra câu lệnh sau trong cửa sổ Gemini Chat:

Write a Python Flask application that has a couple of routes:
The root route / should serve the index.html page using the render_template framework. The /upload route should accept a file being uploaded and write that file to a Cloud Storage bucket.

Tốt nhất là thao tác này sẽ tạo mã như sau:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

Lưu mã trên dưới dạng app.py trong gốc của không gian làm việc IDE.

Chúng ta muốn ứng dụng chạy trên cổng 8080 và sử dụng địa chỉ máy chủ lưu trữ 0.0.0.0. Vì vậy , hãy nhắc Gemini sửa đổi câu lệnh app.run.

Đưa ra câu lệnh sau:

Modify the app.py to run on port 8080 and host address 0.0.0.0

Mã của bạn bây giờ sẽ có dạng như sau:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

Tiếp theo, chúng ta cũng muốn tạo index.html. Đưa ra câu lệnh sau trong cửa sổ Gemini Chat:

Provide the index.html file

URL này sẽ cung cấp cho bạn mã như được cung cấp bên dưới choindex.html.

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

Chúng ta có thể yêu cầu Gemini cho chúng tôi biết vị trí lưu tệp index.html. Đưa ra câu lệnh sau:

Since this is using the render_template framework, where should this file be saved?

Ứng dụng này sẽ đưa ra câu trả lời tương tự như sau:

Hãy tiếp tục và tạo một thư mục có tên là mẫu trong thư mục gốc và lưu tệpindex.html trong thư mục đó.

Chúng tôi muốn một số cách xử lý ngoại lệ trong tệp app.py trong trường hợp không thể lưu tệp vào bộ chứa Google Cloud Storage. Không đóng tệp app.py và đưa ra câu lệnh sau trong cửa sổ Gemini Chat.

modify the app.py to have exception handling in the upload() function. The success or failure should be returned to the index page.

Thao tác này sẽ thêm một số cách xử lý ngoại lệ như trình bày dưới đây:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client().bucket('your-bucket-name')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

Vì chúng tôi cần hiển thị thông báo lỗi trong chỉ mục.html nên chúng tôi cũng cần sửa đổi thông báo đó. Hãy yêu cầu Gemini làm việc đó thông qua câu lệnh bên dưới:

update the index.html to display the error message

Thao tác này sẽ cung cấp một index.html đã cập nhật như minh hoạ dưới đây:

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  {% if error %}
    <p style="color: red;">{{ error }}</p>
  {% endif %}
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

Đảm bảo rằng ở mỗi bước trên, bạn đang lưu các thay đổi tương ứng trong tệp app.py và index.html.

app.py không có tên bộ chứa chính xác nên chúng ta có thể cung cấp thông tin đó cho Gemini và yêu cầu Gemini thực hiện thay đổi. Ngoài ra, chúng ta phải cung cấp mã dự án cho thực thể storage.Client(). Do đó, hãy làm theo một số câu lệnh sau (thay thế <PROJECT_ID> bằng Mã dự án trên Google Cloud) trong cửa sổ Gemini Chat và kết hợp các thay đổi:

Câu lệnh 1

My bucket name is gemini-for-devs-demo_uploads, please change the code to use that.

Câu lệnh 2

My project id is gemini-for-devs-demo, please change the storage.Client() to use that.

Tệp app.py cuối cùng có dạng như sau (mã dự án của tôi hiển thị bên dưới, nhưng lý tưởng nhất là tệp mà bạn đang làm việc và bạn đã đưa ra trong lời nhắc ở trên):

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client(project='gcp-experiments-349209').bucket('gcp-experiments-349209_uploads')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

9. Chạy ứng dụng web trên máy

Tạo một môi trường Python với các phần phụ thuộc được xác định trong tệp requirements.txt. Chuyển đến Command Palette (Bảng khung hiển thị) trong Cloud Shell IDE như minh hoạ dưới đây:

Nhập Python: Create Environment rồi làm theo các bước để tạo Môi trường ảo bằng (venv), sau đó sử dụng trình thông dịch Python 3.x và tệp requirements.txt. Thao tác này sẽ tạo môi trường được yêu cầu.

Khởi chạy cửa sổ dòng lệnh ngay bây giờ, như minh hoạ dưới đây:

6ede24cb97a4e9c5.pngS

Nhập lệnh sau vào cửa sổ dòng lệnh:

python app.py

Ứng dụng Flask sẽ khởi chạy và bạn sẽ thấy như sau:

(.venv) romin@cloudshell:~/webhook-2 (gcp-experiments-349209)$ python app.py 
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:8080
 * Running on http://10.88.0.3:8080
Press CTRL+C to quit
 * Restarting with watchdog (inotify)
 * Debugger is active!
 * Debugger PIN: 989-296-833

Truy cập vào URL http://127.0.0.1:8080 và URL này sẽ hiển thị trang index.html

Tải tệp lên từ máy cục bộ của bạn và tệp sẽ được xử lý thành công.

Bạn có thể kiểm tra dữ liệu tóm tắt bằng cách chuyển đến tập dữ liệu và bảng BigQuery mà chúng ta đã thấy trước đó trong phòng thí nghiệm. Ngoài ra, bạn có thể xem bộ chứa Cloud Storage (<PROJECT_ID>_output).

10. (Không bắt buộc) Khám phá mở – Triển khai cho Cloud Run

Bạn có thể triển khai ứng dụng lên Cloud Run.
Hỏi Gemini Code Hỗ trợ bằng câu lệnh sau (Có thể bạn cần thử một vài biến thể của câu lệnh trên):

I don't want to build a container image but deploy directly from source. What is the gcloud command for that?

11. (Không bắt buộc) Khám phá mở – Thêm kiểu CSS

Hãy sử dụng Trợ lý mã của 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!
Mở tệp index.html rồi đưa ra câu lệnh sau trong Gemini Chat: Can you apply material design styles to this index.html?
Hãy kiểm tra xem mã có hoạt động không.

12. Xin chúc mừng!

Xin chúc mừng! Bạn đã làm việc thành công với Gemini Code Assist trong một dự án mẫu để hiểu cách Gemini có thể hỗ trợ việc tạo mã, hoàn thành mã, tóm tắt mã, cũng như giúp bạn giải đáp các thắc mắc về Google Cloud.