การใช้ Gemini Code Assist เพื่อสำรวจและปรับปรุงโซลูชันการเริ่มต้นการสรุปข้อมูลโดย AI

1. บทนำ

ใน Codelab นี้ เราจะมาดูโซลูชัน Jump Start ที่มีอยู่แล้วอย่างการสรุปด้วย AI ซึ่งใช้โมเดล Vertex AI ในการสรุปเอกสาร PDF ที่อัปโหลดไปยัง Google Cloud Storage

จากนั้นเราจะใช้ Gemini Code Assist เพื่อดำเนินการต่อไปนี้

  • ทำความเข้าใจโค้ด Python ที่ขับเคลื่อน Cloud Function ที่ทำหน้าที่ดึงข้อความจากเอกสาร PDF สรุป และเขียนผลลัพธ์ลงใน BigQuery
  • เราจะนำ Gemini Code Assist ไปช่วยเหลือในกระบวนการเขียนใหม่ เราจะพัฒนาเว็บแอปพลิเคชัน (แอปพลิเคชัน Python Flask) และเรียกใช้แอปพลิเคชันในเครื่องเพื่อยืนยันโค้ดของเรา
  • นอกจากนี้ เรายังพิจารณาการทำให้แอปพลิเคชันนี้ใช้งานได้ใน Cloud Run และปรับปรุงการออกแบบ (ความสวยงาม) ของเว็บแอปพลิเคชันโดยใช้ดีไซน์ Material ด้วย

สิ่งที่จะต้องทำ...

  • คุณจะได้ติดตั้งใช้งานโซลูชันเริ่มต้นสำหรับการสรุปข้อมูลโดย AI และเริ่มขั้นตอนของกระบวนการเพื่อทําความเข้าใจวิธีการ
  • จากนั้นคุณจะใช้ Cloud Shell IDE เพื่อดาวน์โหลดโค้ดที่มีอยู่สำหรับ Jump Start Solution และใช้ Gemini Code Assist เพื่อทำความเข้าใจโค้ด
  • คุณจะใช้ Cloud Shell IDE ของ Gemini Code Assist เพื่อสร้างโค้ดสำหรับฟังก์ชันการทำงานใหม่

สิ่งที่คุณจะได้เรียนรู้...

  • วิธีการทํางานของโซลูชัน AI Summarization Jump Start
  • วิธีใช้ Gemini Code Assist สำหรับงานหลายอย่างของนักพัฒนาซอฟต์แวร์ เช่น การสร้างโค้ด การเติมโค้ด และการสรุปโค้ด

สิ่งที่คุณต้องมี...

  • เว็บเบราว์เซอร์ Chrome
  • บัญชี Gmail
  • โปรเจ็กต์ที่อยู่ในระบบคลาวด์ที่เปิดใช้การเรียกเก็บเงิน
  • เปิดใช้ Gemini Code Assist สำหรับโปรเจ็กต์ระบบคลาวด์ของคุณแล้ว

ห้องทดลองนี้มุ่งเป้าไปที่นักพัฒนาซอฟต์แวร์ทุกระดับ รวมถึงผู้เริ่มต้น แม้ว่าแอปพลิเคชันตัวอย่างจะเป็นภาษา Python แต่คุณไม่จําเป็นต้องทำความคุ้นเคยกับการเขียนโปรแกรม Python เพื่อทําความเข้าใจถึงสิ่งที่เกิดขึ้น เราจะมุ่งเน้นที่การทำความคุ้นเคยกับความสามารถของ Gemini Code Assist สำหรับนักพัฒนาซอฟต์แวร์

2. ตั้งค่า

ส่วนนี้จะครอบคลุมทุกสิ่งที่คุณต้องทำเพื่อเริ่มต้นใช้งานห้องทดลองนี้

เปิดใช้ Gemini สำหรับ Cloud ในโปรเจ็กต์ Google Cloud

ตอนนี้เราจะเปิดใช้ Gemini สำหรับ Cloud ในโปรเจ็กต์ Google Cloud โปรดทำตามขั้นตอนที่ระบุไว้ด้านล่าง

  1. ไปที่ https://console.cloud.google.com และตรวจสอบว่าได้เลือกโปรเจ็กต์ Google Cloud ที่คุณวางแผนจะทํางานด้วยสําหรับ Lab นี้ คลิกไอคอน "เปิด Gemini" ที่คุณเห็นที่ด้านขวาบน

28f084ec1e159938.png

  1. หน้าต่างแชท Gemini สำหรับ Cloud จะเปิดขึ้นทางด้านขวาของคอนโซล คลิกปุ่ม "เปิดใช้" ตามที่แสดงด้านล่าง หากไม่เห็นปุ่มเปิดใช้ แต่เห็นอินเทอร์เฟซ Chat แทน แสดงว่าคุณอาจเปิดใช้ Gemini สำหรับ Cloud สำหรับโปรเจ็กต์แล้ว และไปที่ขั้นตอนถัดไปได้โดยตรง

e8df9adc4ea43a37.png

  1. เมื่อเปิดใช้แล้ว คุณจะทดสอบ Gemini สำหรับ Cloud ได้โดยถามจากคำค้นหาสัก 1-2 ข้อความ ตัวอย่างการค้นหาแสดงอยู่ 2-3 ข้อ แต่คุณลองใช้คำอย่างเช่น What is Cloud Run? ได้

9859ea86a8310cb.png

Gemini สำหรับ Cloud จะตอบกลับด้วยคำตอบของคำถามของคุณ คุณสามารถคลิกไอคอน f68286b2b2ea5c0a.png ที่มุมขวาบนเพื่อปิดหน้าต่างแชท Gemini สำหรับ Cloud

เปิดใช้ Gemini Code Assist ใน Cloud Shell IDE

เราจะใช้ Cloud Shell IDE ซึ่งเป็นสภาพแวดล้อมการพัฒนาซอฟต์แวร์ที่อิงตาม Code OSS ที่มีการจัดการครบวงจรสำหรับ Codelab อื่นๆ เราจำเป็นต้องเปิดใช้และกำหนดค่า Code Assist ใน Cloud Shell IDE โดยทำตามขั้นตอนดังนี้

  1. ไปที่ ide.cloud.google.com อาจใช้เวลาสักครู่กว่าที่ IDE จะปรากฏ ดังนั้นโปรดอดทนรอ
  2. คลิกปุ่ม Cloud Code - Sign inในแถบสถานะด้านล่างตามที่แสดง ให้สิทธิ์ปลั๊กอินตามคำแนะนำ หากเห็น "Cloud Code - ไม่มีโปรเจ็กต์" ในแถบสถานะ ให้เลือกโปรเจ็กต์ดังกล่าวแล้วเลือกโปรเจ็กต์ Google Cloud ที่ต้องการจากรายการโปรเจ็กต์ที่คุณวางแผนจะทำงานด้วย

6f5ce865fc7a3ef5.png

  1. คลิกปุ่ม Gemini ที่มุมขวาล่างตามที่แสดง แล้วเลือกโปรเจ็กต์ Google Cloud ที่ถูกต้องเป็นครั้งสุดท้าย หากระบบขอให้คุณเปิดใช้ Cloud AI Companion API โปรดเปิดใช้และดําเนินการต่อ
  2. เมื่อคุณเลือกโปรเจ็กต์ Google Cloud แล้ว ให้ตรวจสอบว่าคุณเห็นในข้อความสถานะ Cloud Code ในแถบสถานะ รวมทั้งได้เปิดใช้ Code Assist ทางด้านขวาในแถบสถานะดังที่แสดงด้านล่างแล้ว

709e6c8248ac7d88.png

Gemini Code Assist พร้อมใช้งานแล้ว

ไม่บังคับ: หากไม่เห็น Gemini ในแถบสถานะด้านขวาล่าง คุณจะต้องเปิดใช้ Gemini ใน Cloud Code ก่อนตรวจสอบว่าเปิดใช้ Gemini ใน IDE แล้ว โดยไปที่ส่วนขยาย Cloud Code → การตั้งค่า แล้วป้อนข้อความ Gemini ดังที่แสดงด้านล่าง ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายแล้ว คุณควรโหลด IDE ซ้ำ การดำเนินการนี้จะเปิดใช้ Gemini ใน Cloud Code และไอคอน Gemini ในแถบสถานะจะปรากฏใน IDE ของคุณ

228c9c9c6b956c8e.png

3. ติดตั้งใช้งานโซลูชันการเริ่มต้นสำหรับการสรุปข้อมูลโดย AI

  1. ไปที่โซลูชันการสรุปเอกสาร Generative AI
  2. คลิก "ทำให้ใช้งานได้"
  • หากโปรเจ็กต์ไม่ได้เปิดใช้การเรียกเก็บเงิน ให้เปิดใช้การเรียกเก็บเงิน
  • เลือก us-central1 เป็นภูมิภาค
  • คลิกติดตั้งใช้งาน
  • การดำเนินการนี้อาจใช้เวลาสูงสุด 15 นาที
  • คุณไม่จำเป็นต้องทำการเปลี่ยนแปลงใดๆ แต่สามารถสำรวจการใช้งานโซลูชัน Jump Start ได้โดยคลิกปุ่มสำรวจโซลูชันนี้ในหน้ารายละเอียดการติดตั้งใช้งานโซลูชัน

4. แชทกับ Gemini

เราจะเริ่มต้นด้วยการดูวิธีแชทกับ Gemini Gemini พร้อมให้บริการเป็นผู้ช่วยแชทภายใน Cloud Shell IDE โดยเป็นส่วนหนึ่งของส่วนขยาย Cloud Code ใน VS Code คุณสามารถเริ่มใช้งานได้โดยคลิกปุ่ม Gemini ในแถบนำทางด้านซ้าย มองหาไอคอน Gemini a489f98a34898727.png ในแถบเครื่องมือการนำทางด้านซ้าย แล้วคลิกไอคอนนั้น

การดำเนินการนี้จะแสดงแผง Chat: GeminiI ภายใน Cloud Shell IDE ขึ้นมา และคุณจะแชทกับ Gemini เพื่อรับความช่วยเหลือบน Google Cloud ได้

14ad103efaa0ddaa.png

ให้เราใช้แผงแชทของ Gemini เพื่อป้อนพรอมต์และดูคำตอบจาก Gemini ป้อนพรอมต์ต่อไปนี้

What is Cloud Run?

Gemini ควรตอบกลับพร้อมรายละเอียดเกี่ยวกับ Cloud Run ข้อความแจ้งคือคำถามหรือข้อความที่อธิบายความช่วยเหลือที่คุณต้องการ พรอมต์อาจรวมบริบทจากโค้ดที่มีอยู่ซึ่ง Google Cloud วิเคราะห์เพื่อให้คำตอบที่เป็นประโยชน์หรือครบถ้วนมากขึ้น โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการเขียนพรอมต์เพื่อสร้างคำตอบที่ดีในหัวข้อเขียนพรอมต์ที่ดีขึ้นสำหรับ Gemini ใน Google Cloud

ลองใช้พรอมต์ต่อไปนี้หรือใช้พรอมต์ของคุณเองเพื่อถามคำถามเกี่ยวกับ 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?

สังเกตที่ไอคอนถังขยะที่ด้านบน - นี่คือวิธีการรีเซ็ตบริบทสำหรับประวัติการแชทของ Code Assist โปรดทราบด้วยว่าการโต้ตอบทางแชทนี้เป็นไปตามบริบทของไฟล์ที่คุณกำลังดำเนินการใน IDE

5. ดาวน์โหลด Cloud Function ของโซลูชัน Jump Start ใน Cloud Code

สมมติว่าคุณอยู่ใน Cloud Shell Editor ให้ทำตามขั้นตอนต่อไปนี้

  • คลิก Cloud Code c0231861cba4b5d2.png
  • หมายเหตุ: อาจใช้เวลา 1 หรือ 2 ขั้นตอน ทั้งนี้ขึ้นอยู่กับขนาดหน้าจอของคุณ

4bf4e654a1749030.pngหรือa0baa1d1c1c30151.png

  • คลิกฟังก์ชันระบบคลาวด์
  • หากได้รับข้อความแจ้ง ให้เข้าสู่ระบบหรือให้สิทธิ์บัญชีของคุณ
  • คลิกฟังก์ชันเว็บฮุค
  • คลิกไอคอนดาวน์โหลดไปยังพื้นที่ทำงานใหม่ 21c63666e951f7b4.png
  • 196780f852e1a99e.png
  • ใช้เว็บฮุค-1 เป็นชื่อพื้นที่ทำงาน (ควรเป็นค่าเริ่มต้น) หรือชื่ออื่น แล้วคลิกตกลง
  • ซึ่งจะเปิดโค้ดใน Cloud Shell IDE

6. ตรวจสอบโปรเจ็กต์ที่มีอยู่

โซลูชัน Jump Start นี้แสดงอยู่ด้านล่าง

ddf9ee7ff5346f23.png

ตรวจสอบขั้นตอนจากฟังก์ชันการอัปโหลด PDF ไปยัง Cloud Storage Cloud Function ที่จะมีการเรียกใช้หากมีการอัปโหลดไฟล์ PDF ไว้ในไฟล์ main.py

คลิกที่ไฟล์นั้น จุดแรกเข้าสำหรับฟังก์ชันระบบคลาวด์คือฟังก์ชัน entrypoint ซึ่งจะเรียกใช้ฟังก์ชัน cloud_event_entrypoint ที่ดึงข้อความจาก PDF จากนั้นเรียกใช้ summarization_entrypoint ที่ใช้โมเดล Vertex AI เพื่อสรุปและเขียนผลลัพธ์ไปยัง GCS และ BigQuery ตามลำดับ

ไฮไลต์โค้ดทั้งหมดในไฟล์ main.py หรือข้อมูลโค้ดที่เฉพาะเจาะจง คลิก Gemini Chat แล้วพูดคำสั่งต่อไปนี้: Explain this

ซึ่งจะให้คำอธิบายเกี่ยวกับโค้ด

7. ดำเนินการเรียกใช้ตัวอย่าง

ตามแผนภาพสถาปัตยกรรม เราจะอัปโหลดไฟล์ลงในที่เก็บข้อมูล <PROJECT_ID>_uploads เพื่อให้มีการเรียกใช้ Cloud Function

ตรวจสอบว่าคุณมีไฟล์ PDF ตัวอย่างพร้อมอัปโหลดได้และต้องการการสรุป

  • ไปที่ Google Cloud Storage ใน Cloud Console
  • ไปที่ที่เก็บข้อมูล <PROJECT_ID>_uploads คลิกลิงก์อัปโหลดไฟล์ แล้วอัปโหลด PDF ตัวอย่าง

หากคุณไม่มีตัวอย่างไฟล์ PDF คุณสามารถใช้ตัวอย่างใดตัวอย่างหนึ่งที่เราสร้างขึ้นได้ จาก Cloud Shell ให้เรียกใช้คำสั่งต่อไปนี้

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

เมื่ออัปโหลดไฟล์เรียบร้อยแล้ว ระบบจะเรียกใช้ฟังก์ชันระบบคลาวด์ webhook และจะสรุปข้อความที่พบในเอกสาร ระบบจะเขียนเอาต์พุตไปยังชุดข้อมูล BigQuery ที่ชื่อ summary_dataset และในตาราง summary_table

ค้นหาตารางเพื่อดูผลลัพธ์ของสรุป

f2ed627e3e96d84e.png

8. สร้างไคลเอ็นต์เว็บแอปพลิเคชันสำหรับแอปพลิเคชัน

กระบวนการข้างต้นเป็นกระบวนการอัปโหลด PDF ที่เราต้องการแบบสรุปทีละขั้นตอนโดยเจ้าหน้าที่ หากต้องการสร้างฟรอนท์เอนด์ของเว็บในแอปพลิเคชัน

ข้อกำหนดสำหรับฟรอนท์เอนด์ของเว็บนั้นไม่ซับซ้อน

  1. แบบฟอร์ม HTML พื้นฐานที่ช่วยให้เราเลือกและอัปโหลดไฟล์ซึ่งต้องมีการสรุปได้
  2. คุณควรเขียนไฟล์ในเมื่อการอัปโหลดเสร็จสมบูรณ์ลงในที่เก็บข้อมูล <PROJECT_ID>_uploads เพื่อให้ฟังก์ชันที่เหลือทำงานได้ตามเดิม

เราจะใช้เฟรมเวิร์ก Python และ Flask สำหรับเว็บแอปพลิเคชันเพื่อใช้ประโยชน์จาก Duet AI

มาเริ่มกันเลย เราจะถือว่าคุณยังคงมีพื้นที่ทำงานเดียวกันเปิดอยู่ใน Cloud Shell IDE

ปิดไฟล์ทั้งหมดและระบุพรอมต์ต่อไปนี้ในหน้าต่าง 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.

ซึ่งตามหลักแล้วควรจะสร้างโค้ดดังนี้

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)

บันทึกโค้ดด้านบนเป็น app.py ในรูทของพื้นที่ทำงาน IDE

เราต้องการให้แอปพลิเคชันทำงานบนพอร์ต 8080 และใช้ที่อยู่โฮสต์ 0.0.0.0 ดังนั้นขอให้ Gemini แก้ไขคำสั่ง app.run

ระบุพรอมต์ต่อไปนี้

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

โค้ดของคุณควรมีลักษณะดังนี้

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)

ต่อไป เราอยากให้สร้าง index.html ด้วย ใส่พรอมต์ต่อไปนี้ในหน้าต่าง Gemini Chat

Provide the index.html file

ซึ่งควรมีโค้ดสำหรับ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>

เราขอให้ Gemini บอกให้เราทราบได้ว่าจะบันทึกไฟล์ index.html ไว้ที่ใด ระบุพรอมต์ต่อไปนี้

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

ซึ่งควรให้คำตอบที่คล้ายกับข้อความต่อไปนี้

c666ee4af5039728.png

ดำเนินการต่อและสร้างโฟลเดอร์ชื่อเทมเพลตในโฟลเดอร์รากและบันทึกไฟล์index.htmlในนั้น

เราต้องการการจัดการข้อยกเว้นบางอย่างในไฟล์ app.py ในกรณีที่ไม่สามารถบันทึกไฟล์ในที่เก็บข้อมูล Google Cloud Storage ได้ ให้เปิดไฟล์ app.py ไว้และแสดงพรอมต์ต่อไปนี้ในหน้าต่าง 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.

ซึ่งควรเพิ่มการจัดการข้อยกเว้นบางอย่างดังที่แสดงด้านล่าง

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)

เนื่องจากเราต้องแสดงข้อความแสดงข้อผิดพลาดในindex.html เราจึงต้องแก้ไขด้วยเช่นกัน ลองขอให้ Gemini ดำเนินการดังกล่าวผ่านพรอมต์ด้านล่าง

update the index.html to display the error message

ซึ่งควรมี index.html ที่อัปเดตแล้วตามที่แสดงไว้ด้านล่าง

<!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>

ตรวจสอบว่าในแต่ละขั้นตอนข้างต้น คุณได้บันทึกการเปลี่ยนแปลงในไฟล์ app.py และ index.html ตามลำดับ

app.py ไม่มีชื่อที่เก็บข้อมูลที่ถูกต้อง เราจึงให้ข้อมูลนั้นกับ Gemini และขอให้ทำการเปลี่ยนแปลงได้ นอกจากนี้ เราต้องระบุรหัสโปรเจ็กต์สำหรับอินสแตนซ์ storage.Client() ดังนั้นให้ส่งพรอมต์ต่อไปนี้ 2 รายการ (แทนที่ <PROJECT_ID> ด้วยรหัสโปรเจ็กต์ Google Cloud ของคุณ) ในหน้าต่าง Gemini Chat และรวมการเปลี่ยนแปลงไว้ด้วย

พรอมต์ 1

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

พรอมต์ 2

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

ไฟล์ app.py สุดท้ายมีลักษณะดังนี้ (รหัสโปรเจ็กต์แสดงอยู่ด้านล่าง แต่ควรเป็นไฟล์ที่คุณกําลังทำงานด้วยและได้ระบุไว้ในข้อความแจ้งด้านบน)

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. เรียกใช้เว็บแอปพลิเคชันในเครื่อง

สร้างสภาพแวดล้อม Python ด้วยทรัพยากร Dependency ที่กำหนดในไฟล์ requirements.txt ไปที่ชุดคำสั่งใน Cloud Shell IDE ตามที่แสดงด้านล่าง

55dffeed9fe6e9c0.png

พิมพ์ Python: Create Environment จากนั้นทำตามขั้นตอนในการสร้างสภาพแวดล้อมเสมือนโดยใช้ (venv) จากนั้นใช้ล่าม Python 3.x และไฟล์ requirements.txt ซึ่งจะสร้างสภาพแวดล้อมที่จำเป็น

เปิด Terminal ทันที ตามที่แสดงด้านล่าง

6ede24cb97a4e9c5.png

ใช้คำสั่งต่อไปนี้ในเทอร์มินัล

python app.py

แอป Flask จะเปิดขึ้นและคุณควรเห็นหน้าตาแบบนี้

(.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

ไปที่ URL http://127.0.0.1:8080 ซึ่งควรแสดงหน้า index.html

อัปโหลดไฟล์จากเครื่องของคุณเองและระบบควรจะประมวลผลไฟล์ได้สำเร็จ

คุณสามารถตรวจสอบการสรุปได้โดยไปที่ชุดข้อมูล BigQuery และตารางที่เราเห็นก่อนหน้านี้ในห้องทดลอง หรือคุณจะตรวจสอบที่เก็บข้อมูล Cloud Storage (&lt;PROJECT_ID&gt;_output) ก็ได้

10. (ไม่บังคับ) เปิดการสำรวจ - ทำให้ใช้งานได้กับ Cloud Run

  • คุณทำให้แอปพลิเคชันใช้งานได้กับ Cloud Run ได้
  • ถาม Gemini Code Assist ด้วยพรอมต์ต่อไปนี้ (อาจต้องลองใช้พรอมต์ด้านบน 2-3 รูปแบบ)
I don't want to build a container image but deploy directly from source. What is the gcloud command for that?

11. (ไม่บังคับ) เปิดการสำรวจ - เพิ่มรูปแบบ CSS

  • ใช้ Gemini Code Assist และผู้ช่วยในเครื่องมือแก้ไขเพื่อเพิ่มรูปแบบ CSS ให้กับแอปพลิเคชัน และทำให้แอปพลิเคชันใช้งานได้อีกครั้งเมื่อทำเสร็จแล้ว
  • เปิดไฟล์ index.html แล้วใส่พรอมต์ต่อไปนี้ใน Gemini Chat Can you apply material design styles to this index.html?
  • ตรวจสอบโค้ดและดูว่าใช้งานได้หรือไม่

12. ยินดีด้วย

ยินดีด้วย คุณได้ทำงานกับ Gemini Code Assist ในโปรเจ็กต์ตัวอย่างเสร็จสมบูรณ์แล้ว เพื่อทำความเข้าใจว่าโปรเจ็กต์จะช่วยเรื่องการสร้างโค้ด การเติมโค้ด การสรุปโค้ด และช่วยให้คุณตอบคำถามเกี่ยวกับ Google Cloud ได้อย่างไร

13. เอกสารอ้างอิง