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 hỗ trợ khởi động hiện có (Tóm tắt bằng AI) 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 ta sẽ dùng Gemini Code Assist để:

  • Tìm hiểu mã Python hỗ trợ Cloud Function 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ăn bản đó và ghi kết quả vào BigQuery.
  • Chúng ta sẽ sử dụng Gemini Code Assist 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 Flask) và chạy ứng dụng này cục bộ để xác minh mã của mình.
  • Ngoài ra, chúng ta cũng có thể xem xét việc triển khai ứng dụng này vào 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.

Những việc bạn sẽ làm...

  • Bạn sẽ triển khai Giải pháp khởi động tính năng tóm tắt bằng AI và kích hoạt quy trình để hiểu cách giải pháp này hoạt động.
  • Sau đó, bạn sẽ sử dụng Cloud Shell IDE để tải mã hiện có xuống cho Giải pháp khởi động nhanh và sử dụng Gemini Code Assist để tìm hiểu mã này.
  • 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 tóm tắt bằng AI.
  • Cách sử dụng Gemini Code Assist cho một số tác vụ của nhà phát triển như tạo mã, hoàn thành mã và tóm tắt mã.

Những thứ 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
  • Gemini Code Assist được bật cho Dự án trên đám mây

Lớp học này dành cho 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 này sử dụng ngôn ngữ Python, nhưng bạn không cần phải quen thuộc với việc lập trình bằng Python để hiểu những gì đang diễn ra. Chúng ta sẽ tập trung tìm hiểu các tính năng của Gemini Code Assist dành cho nhà phát triển.

2. Thiết lập

Phần này trình bày mọi việc bạn cần làm để bắt đầu với lớp học này.

Bật Gemini cho Cloud trong Dự án trên Google Cloud

Giờ đây, chúng ta sẽ bật Gemini cho Cloud trong Dự án Google Cloud. Hãy làm theo các bước dưới đây:

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

28f084ec1e159938.png

  1. Cửa sổ trò chuyện 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ư minh hoạ bên dưới. Nếu không thấy nút Bật mà thấy giao diện Chat, thì có thể 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.

e8df9adc4ea43a37.png

  1. Sau khi bật, 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ẽ xuất hiện nhưng bạn có thể thử một 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 f68286b2b2ea5c0a.png ở góc trên cùng bên phải để đóng cửa sổ trò chuyện Gemini cho Cloud.

Bật Gemini Code Assist trong Cloud Shell IDE

Chúng ta sẽ dùng Cloud Shell IDE, một môi trường phát triển dựa trên Code 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. Chúng ta cần bật và định cấu hình Trợ lý mã trong Cloud Shell IDE. Các bước thực hiện như sau:

  1. Truy cập vào ide.cloud.google.com. Có thể mất một lúc thì IDE mới xuất hiện, vì vậy, vui lòng kiên nhẫn chờ đợi.
  2. 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 bạn thấy "Cloud Code – no project" (Cloud Code – không có dự án) trong thanh trạng thái, hãy chọn mục đó rồi chọn Dự án cụ thể trên Google Cloud trong danh sách các dự án mà bạn dự định làm việc.

6f5ce865fc7a3ef5.png

  1. 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 trên đám mây của Google chính xác thêm một lần nữa. Nếu được yêu cầu bật Cloud AI Companion API, vui lòng bật và tiếp tục.
  2. Sau khi chọn dự án Google Cloud, hãy đảm bảo rằng bạn có thể thấy dự án đó trong thông báo trạng thái Cloud Code trên thanh trạng thái và bạn cũng đã bật Trợ lý lập trình ở bên phải, trong thanh trạng thái như minh hoạ bên dưới:

709e6c8248ac7d88.png

Gemini Code Assist đã sẵn sàng để 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 cần bật Gemini trong Cloud Code. Trước khi thực hiện, hãy đảm bảo bạn đã bật Gemini trong IDE bằng cách chuyển đến Cloud Code Extension → Settings (Tiện ích Cloud Code → Cài đặt), rồi nhập văn bản Gemini như minh hoạ bên dưới. Đảm bảo bạn đã chọn hộp đánh dấu. 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 trong 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 hỗ trợ nhanh về tính năng tóm tắt bằng AI

  1. Chuyển đến Giải pháp tóm tắt tài liệu bằng AI tạo sinh
  2. 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 này.
  • 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á việc triển khai Giải pháp khởi động nhanh 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 bằng cách tìm hiểu cách trò chuyện với Gemini. Gemini có sẵn dưới dạng trợ lý trò chuyện trong Cloud Shell IDE trong phần mở rộng Cloud Code trong VS Code. Bạn có thể mở bảng điều khiển này bằng cách nhấp vào nút Gemini trong thanh điều hướng bên trái. Tìm biểu tượng Gemini a489f98a34898727.png trong 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ở ngăn Chat: GeminiI trong Cloud Shell IDE và bạn có thể trò chuyện với Gemini để được trợ giúp về Google Cloud.

14ad103efaa0ddaa.png

Hãy sử dụng ngăn trò chuyện với Gemini để nhập câu lệnh và xem câu trả lời từ Gemini. Nhập câu lệnh sau:

What is Cloud Run?

Gemini nên trả lời bằng thông tin chi tiết về Cloud Run. Câu lệnh là những câu hỏi hoặc câu nói mô tả thông tin trợ giúp mà bạn cần. Câu lệnh có thể bao gồm ngữ cảnh từ mã hiện có mà Google Cloud phân tích để đưa ra câu trả lời hữu ích hoặc đầy đủ hơn. Để biết thêm thông tin về cách viết câu lệnh để tạo ra câu trả lời hiệu quả, hãy xem bài viết Viết câu lệnh hiệu quả 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 riêng 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?

Hãy chú ý đến biểu tượng thùng rác ở trên cùng. Đây là cách để bạn đặt lại ngữ cảnh cho nhật ký trò chuyện của Code Assist. Cũng lưu ý rằng cuộc trò chuyện này có liên quan đến(các) tệp mà bạn đang làm việc trong IDE.

5. Tải Cloud Function Giải pháp Jump Start xuống trong Cloud Code

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

  • Nhấp vào Cloud Code c0231861cba4b5d2.png
  • 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 hoặc hai bước.

4bf4e654a1749030.png hoặc a0baa1d1c1c30151.png

  • Nhấp vào Cloud Functions.
  • Nếu được nhắc, hãy đăng nhập hoặc uỷ quyền cho tài khoản của bạn.
  • Nhấp vào hàm webhook.
  • Nhấp vào biểu tượng Tải xuống vào không gian làm việc mới 21c63666e951f7b4.png
  • 196780f852e1a99e.png
  • Sử dụng webhook-1 làm tên không gian làm việc (theo 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 lại dự án hiện có

Giải pháp Jump Start này có dạng như dưới đây:

ddf9ee7ff5346f23.png

Xem quy trình từ chức năng Tải tệp PDF lên Cloud Storage. Hàm trên đám mây sẽ được gọi nếu tệp PDF được tải lên 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. 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 hàm summarization_entrypoint. Hàm này sử dụng Các mô hình AI của Vertex để tóm tắt và ghi kết quả vào GCS và BigQuery tương ứng.

Làm nổi bật tất cả 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úp bạn hiểu rõ về mã.

7. Thực thi một lượt chạy mẫu

Theo sơ đồ kiến trúc, chúng ta sẽ tải một tệp lên vùng chứa <PROJECT_ID>_uploads để gọi Cloud Functions.

Đảm bảo bạn đã chuẩn bị sẵn một tệp PDF mẫu mà bạn có thể tải lên và muốn tóm tắt.

  • Chuyển đến Google Cloud Storage trong Cloud Console.
  • Chuyển đến nhóm <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 các mẫu mà chúng tôi đã tạo. Trong 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, hàm đám mây webhook sẽ được gọi và hàm này sẽ tóm tắt văn bản có trong tài liệu. Kết quả sẽ được ghi vào một tập dữ liệu BigQuery có tên là 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.

f2ed627e3e96d84e.png

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 thủ công để tải tệp PDF mà chúng ta muốn tóm tắt lên. Bạn có muốn tạo một giao diện người dùng web cho ứng dụng không?

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

  1. Một biểu mẫu HTML cơ bản cho phép chúng ta chọn và tải tệp lên, cần được tóm tắt.
  2. Khi tải lên thành công, tệp sẽ được ghi vào nhóm <PROJECT_ID>_uploads để phần còn lại của chức năng hoạt động như bình thường.

Chúng ta sẽ sử dụng Python và khung Flask cho các ứng dụng web để xây dựng ứng dụng này với sự trợ giúp của Duet AI.

Bắt đầu nhé. Chúng tôi sẽ giả định rằng bạn vẫn mở cùng một không gian làm việc trong Cloud Shell IDE.

Đó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.

Lý tưởng nhất là mã này sẽ tạo ra 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 thư mục 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 yêu cầu 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. Nhập câu lệnh sau vào cửa sổ Gemini Chat:

Provide the index.html file

Công cụ này sẽ cung cấp cho bạn mã như dưới đây cho index.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 biết nơi 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?

Kết quả sẽ tương tự như sau:

c666ee4af5039728.png

Tiếp theo, hãy tạo một thư mục có tên là templates trong thư mục gốc rồi lưu tệp index.html vào thư mục đó.

Chúng tôi muốn có một số cơ chế xử lý ngoại lệ trong tệp app.py trong trường hợp không lưu được tệp vào vùng lưu trữ Google Cloud Storage. Mở 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ố hoạt động xử lý ngoại lệ như minh hoạ 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ì cần hiển thị thông báo lỗi trong index.html, nên chúng ta cũng cần sửa đổi tệp này. Hãy yêu cầu Gemini thực hiện 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ẽ tạo ra một tệp index.html mới 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 nêu trên, bạn đang lưu các thay đổi trong tệp app.py và index.html tương ứng.

app.py không có tên nhóm chính xác, do đó, chúng ta có thể cung cấp thông tin đó cho Gemini và yêu cầu Gemini thực hiện các 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 đưa ra một vài câu lệnh sau (thay thế <PROJECT_ID> bằng mã dự án Google Cloud của bạn) 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 xuất hiện bên dưới, nhưng lý tưởng nhất là mã dự án mà bạn đang làm việc và đã cung cấp 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 cục bộ

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 Bảng lệnh trong Cloud Shell IDE như minh hoạ dưới đây:

55dffeed9fe6e9c0.png

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

Khởi chạy Terminal ngay bây giờ, như minh hoạ dưới đây:

6ede24cb97a4e9c5.png

Đưa ra lệnh sau trong 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 nội dung 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 một tệp lên từ máy cục bộ và tệp đó sẽ được xử lý thành công.

Bạn có thể kiểm tra thông tin 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ể kiểm tra bộ chứa Cloud Storage (<PROJECT_ID>_output).

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

  • Bạn có thể triển khai ứng dụng lên Cloud Run.
  • Hỏi Gemini Code Assist bằng câu lệnh sau (Bạn có thể 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) Mở phần Khám phá – Thêm kiểu CSS

  • Sử dụng Gemini Code Assist 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?
  • Kiểm tra mã và 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 trên một dự án mẫu để hiểu cách công cụ này có thể hỗ trợ bạn trong việc Tạo mã, Hoàn tất mã, Tóm tắt mã và giúp bạn giải đáp các câu hỏi về Google Cloud.

13. Tài liệu tham khảo