วิธีใช้ Gemini เพื่อสำรวจและปรับปรุงแอปพลิเคชันที่มีอยู่

วิธีใช้ Gemini เพื่อสำรวจและปรับปรุงแอปพลิเคชันที่มีอยู่

เกี่ยวกับ Codelab นี้

subjectอัปเดตล่าสุดเมื่อ มิ.ย. 6, 2024
account_circleเขียนโดย Luke Schlangen

1 ภาพรวม

Codelab นี้จะสาธิตวิธีใช้ Gemini เพื่อสร้างแอปพลิเคชันไคลเอ็นต์ โดยเสริมจากแบ็กเอนด์ API ที่มีอยู่

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

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

ตั้งค่า - สร้างโปรเจ็กต์ใหม่

คุณอาจไม่สามารถทำให้โซลูชันนี้ใช้งานได้อย่างถูกต้อง ทั้งนี้ขึ้นอยู่กับนโยบายขององค์กร

คำแนะนำ: ใช้บัญชีที่คุณมีสิทธิ์โดยสมบูรณ์ (เช่น บัญชีส่วนตัว) แทนที่จะใช้บัญชีของบริษัทหรือโรงเรียน

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

  1. ไปที่คอนโซล Google Cloud
  2. คลิกเมนูแบบเลื่อนลงของโปรเจ็กต์ปัจจุบัน
  3. คลิกโปรเจ็กต์ใหม่ปุ่มโปรเจ็กต์ใหม่
  4. เพิ่มชื่อโปรเจ็กต์แล้วคลิกสร้าง
    • คำแนะนำ: ใช้ชื่อโปรเจ็กต์ที่ไม่ซ้ำกันเพื่อให้ Project name และ Project ID เป็น สร้างแบบฟอร์มโปรเจ็กต์ เดียวกัน

2 ปรับใช้โซลูชัน Jump Start

Jump Start Solutions คือเทมเพลตโซลูชันที่สร้างไว้ล่วงหน้าจาก Google Cloud ห้องทดลองนี้ใช้โซลูชันเริ่มต้นอย่างรวดเร็วเพื่อแสดงให้เห็นว่า Gemini จะช่วยปรับปรุงแอปพลิเคชันที่มีอยู่แล้วได้อย่างไร

  1. ไปที่หน้ารายละเอียดโซลูชันการเริ่มต้นการประมวลผลรูปภาพ AI/ML
    • คลิกเมนู 3 ขีด
    • ในแท็บผลิตภัณฑ์และ เมนูย่อย ให้คลิก Jump Start Solutionsขั้นตอนการนำทางโซลูชันการเริ่มต้นอย่างรวดเร็ว
    • คลิกการประมวลผลรูปภาพ AI/ML บน Cloud Functionsการไปยังส่วนต่างๆ ของโซลูชันการเริ่มต้นโซลูชันการประมวลผลรูปภาพ AI ML
  2. คลิกทำให้ใช้งานได้
    • หากโปรเจ็กต์ไม่ได้เปิดใช้การเรียกเก็บเงิน ให้เปิดใช้การเรียกเก็บเงิน
    • ยืนยันชื่อโปรเจ็กต์แล้วคลิกดำเนินการต่อ
    • เลือก us-central1 (Iowa) เป็นภูมิภาค
    • หากได้รับแจ้งสำหรับอินพุตอื่น ให้ยอมรับค่าเริ่มต้น
    • คลิกทำให้ใช้งานได้
    • การดำเนินการนี้อาจใช้เวลาสูงสุด 15 นาที
    • คุณไม่จำเป็นต้องทำการเปลี่ยนแปลงใดๆ แต่คุณสามารถสำรวจการใช้งานโซลูชัน Jump Start ได้

การแก้ปัญหา

  1. ปัญหา: คุณเห็นข้อผิดพลาดที่ระบุว่า Partial deployment. ไหม
    • วิธีแก้ไข: ขออภัย ซึ่งหมายความว่าคุณควรลบการติดตั้งใช้งานและเริ่มต้นใหม่ โดยควรมีปุ่มที่ระบุว่าลบการทำให้ใช้งานได้ คลิกปุ่มดังกล่าวและทำให้โซลูชันเริ่มต้น Jump Start ใช้งานได้อีกครั้ง

3 เปิดใช้ Gemini

ตั้งค่าสภาพแวดล้อมการแก้ไขโค้ดและเปิดใช้ Gemini

  1. ไปที่ Cloud Shell Editor
    • กลับไปที่คอนโซล Google Cloud
    • พิมพ์ Cloud Shell Editor ในแถบค้นหา แล้วคลิก Cloud Shell Editor จากเมนูแบบเลื่อนลง ขั้นตอนในการเปิด Cloud Shell Editor
    • คลิกลองใช้เครื่องมือแก้ไขใหม่ หากคุณใช้เครื่องมือแก้ไขเดิม
      • หมายเหตุ: หากไม่เห็นปุ่มลองใช้เครื่องมือแก้ไขใหม่ อาจเป็นไปได้ว่าคุณกำลังใช้เครื่องมือแก้ไขใหม่อยู่ เครื่องมือแก้ไขเดิมจะยังทำงานได้ แต่มุมมองจะแตกต่างออกไปเล็กน้อย
    • คลิกไอคอนเปิดในหน้าต่างใหม่ ไอคอนเปิดในหน้าต่างใหม่ขั้นตอนในการเปิดในหน้าต่างใหม่
  2. หากได้รับข้อความแจ้ง ให้เข้าสู่ระบบหรือให้สิทธิ์บัญชีของคุณ
    • คุณอาจได้รับแจ้งให้อนุญาตบัญชีของคุณหลายครั้งในระหว่างห้องทดลองนี้ เมื่อระบบขอ ให้เลือกให้สิทธิ์ทุกครั้ง ทั้งนี้ขึ้นอยู่กับการตั้งค่าของคุณ
  3. คลิกปุ่ม Cloud Code - Sign inในแถบสถานะด้านล่างตามที่แสดง ให้สิทธิ์ปลั๊กอินตามคำแนะนำ ปุ่มลงชื่อเข้าใช้สำหรับรหัสในระบบคลาวด์
  4. หากได้รับข้อความแจ้ง ให้คลิกเลือกโปรเจ็กต์ Google Cloud แล้วเลือกโปรเจ็กต์ที่คุณใช้ คลิกเลือกโปรเจ็กต์ Google Cloud
  5. เปิดใช้ Gemini
    • คลิก Cloud Code โลโก้ Cloud Code
      • หมายเหตุ: อาจใช้เวลา 1 หรือ 2 ขั้นตอน ทั้งนี้ขึ้นอยู่กับขนาดหน้าจอของคุณ เปิดรหัสระบบคลาวด์
    • คลิกเปลี่ยนการตั้งค่าในส่วนความช่วยเหลือและความคิดเห็น
    • ประเภท Gemini: Enable
    • เลือกช่องทำเครื่องหมาย (หากยังไม่ได้เลือกไว้) เปิดใช้การตั้งค่า Duet ใน Cloud Shell Editor
    • โหลด IDE ซ้ำ
    • การดำเนินการนี้จะเปิดใช้ Gemini ใน Cloud Code และแถบสถานะ Gemini จะปรากฏใน IDE ของคุณ แถบสถานะ Gemini พร้อมใช้งาน
  6. คลิกปุ่ม Gemini ที่มุมขวาล่างตามที่แสดง แล้วเลือกโปรเจ็กต์ Google Cloud ที่ถูกต้อง เลือกโปรเจ็กต์ Gemini
    • หากคุณเห็นข้อผิดพลาดว่า Gemini has not been enabled for your selected project คลิกเปิดใช้ Gemini APIเลือกโปรเจ็กต์ Gemini
  7. ยืนยันว่าคุณเห็นโปรเจ็กต์ Google Cloud ที่ถูกต้องทางด้านซ้าย (คุณจะเห็นชื่อโปรเจ็กต์ของคุณ) และเปิดใช้ Gemini ทางด้านขวาในแถบสถานะดังที่แสดงด้านล่าง มุมมองของมุมมอง Gemini ที่ถูกต้องเมื่อเปิดใช้

4 ดาวน์โหลดโค้ด Cloud Function

ดาวน์โหลดโค้ดและใช้ Gemini เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับ Jump Start Solutions และโค้ดที่คุณทำให้ใช้งานได้

  1. หากคุณออกไปแล้ว ให้คลิก Cloud Code โลโก้ Cloud Code
  2. คลิก Cloud Functions
    • หากเห็นปุ่มเลือกโปรเจ็กต์ ให้คลิกปุ่มโปรเจ็กต์ แล้วเลือกโปรเจ็กต์ที่ใช้งานอยู่
    • คลิกฟังก์ชัน annotate-http
    • คลิกไอคอนดาวน์โหลดไปยังพื้นที่ทำงานใหม่ ไอคอนดาวน์โหลดไอคอนดาวน์โหลดในแผงโค้ดของระบบคลาวด์
  3. ใช้ annotate-http-1 เป็นชื่อพื้นที่ทำงาน (ควรเป็นค่าเริ่มต้น) และคลิกตกลง
  4. เปิดไฟล์ main.py
    • คลิกไอคอนนักสำรวจ ไอคอนการนำทางของนักสำรวจ
    • คลิกไฟล์ main.py เพื่อเปิด เปิดไฟล์สำรวจโดยคลิกโลโก้ Gemini
  5. คลิกไอคอน Gemini Chat โลโก้ Gemini
    • หมายเหตุ: อาจใช้เวลา 1 หรือ 2 ขั้นตอน ทั้งนี้ขึ้นอยู่กับขนาดหน้าจอของคุณ เปิด Gemini
  6. ลองถามคำถาม Gemini ป้อนพรอมต์ เช่น
    • What is a Jump Start Solution in Google Cloud?
    • Explain this code.

กำลังรีเซ็ต Gemini Chat

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

ไฮไลต์การไฮไลต์ข้อความในถังขยะสำหรับ Duot

5 การเรียกใช้ปลายทาง Cloud Function ที่มีอยู่

สำรวจโค้ดและเรียกใช้ปลายทางที่คุณทำให้ใช้งานได้ใน Jump Start Solution

  1. ป้อนข้อความแจ้ง:
    • สำคัญ แทนที่ my-project-with-duet ในพรอมต์ต่อไปนี้ด้วยรหัสโปรเจ็กต์
    • 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.
    • คุณควรได้รับการตอบกลับที่มีคำสั่ง curl เช่นนี้:
      curl -X POST \
         
      -H "Authorization: Bearer $(gcloud auth print-access-token)" \
      ...
    • คัดลอกคำสั่ง curl นี้เพื่อใช้ในขั้นตอนถัดไป
  2. ทดสอบคำสั่งในเทอร์มินัลใหม่
    • คลิกเมนู 3 ขีด
    • คลิก Terminal
    • คลิกเทอร์มินัลใหม่ขั้นตอนในการเปิดเทอร์มินัลเครื่องมือแก้ไข Cloud Shell ใหม่
    • วางคำสั่ง curl จากขั้นตอนก่อนหน้าลงในเทอร์มินัลแล้วกด Enter เพื่อเรียกใช้คำสั่ง
    • คุณควรได้รับการตอบกลับที่ขึ้นต้นว่า
      {
         
      "labelAnnotations": [
         
      {
         
      "mid": "/m/0csby",
         
      "description": "Cloud",
         
      "score": 0.97885925,
         
      "topicality": 0.97885925,
      ...
  3. (ไม่บังคับ) ดำเนินการนี้กับรูปภาพอื่นจากอินเทอร์เน็ตสาธารณะโดยแจ้งให้ Duet ด้อยข้อมูลดังนี้
    • Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

การแก้ปัญหา

หมายเหตุเกี่ยวกับความไม่กําหนด: Gemini และผลิตภัณฑ์อื่นๆ ที่ขับเคลื่อนโดยโมเดลภาษาขนาดใหญ่ (LLM) นั้นไม่มีการกำหนดตายตัว ซึ่งหมายความว่าหากได้รับอินพุตเดียวกัน คุณอาจได้รับเอาต์พุตที่แตกต่างกัน แม้ว่าจะทำตามขั้นตอนอย่างสมบูรณ์แล้ว แต่คุณอาจยังไม่ได้รับคำสั่งที่ใช้งานได้ ขั้นตอนการแก้ปัญหาเหล่านี้น่าจะช่วยแก้ไขปัญหาเหล่านั้นได้

คำสั่ง curl ที่สร้างขึ้นควรมีลักษณะดังนี้

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 กำลังใช้ TEST_IMAGE ในไฟล์ main.py ซึ่งเป็นรูปภาพหอไอเฟล

หากคำสั่ง curl ไม่ทำงานสำหรับคุณ โปรดตรวจสอบสิ่งต่อไปนี้

  1. ปัญหา: ปลายทางของ URL มี .a.run.app ไหม
    • วิธีแก้ไข: Duet อาจคิดว่าคุณกำลังทำให้ใช้งานได้กับ Cloud Run แทนที่ my-project-with-duet ด้วยรหัสโปรเจ็กต์ใน https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate เพื่อรับปลายทาง Cloud Functions ที่ถูกต้องและใช้รหัสดังกล่าวสำหรับคำสั่ง curl
  2. ปัญหา: ปลายทางของ URL มี my-project-with-duet ไหม
    • วิธีแก้ไข: ใส่รหัสโปรเจ็กต์แทน my-project-with-duet
  3. ปัญหา: ปลายทางของ URL ไม่มี us-central1 ใช่ไหม
    • วิธีแก้ไข: ตรวจสอบว่า URL ขึ้นต้นด้วย us-central1 เช่น https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate ด้วยรหัสโปรเจ็กต์
  4. ปัญหา: บางครั้งปลายทางที่สร้างขึ้นจะมีลักษณะเป็น cloudfunctions.net/annotate-http หรือ cloudfunctions.net/annotate ทั้งนี้ขึ้นอยู่กับพรอมต์ที่ใช้ ปลายทาง URL ไม่มี /annotate-http/annotate ที่ส่วนท้ายใช่ไหม
    • วิธีแก้ไข: ตรวจสอบว่าปลายทาง URL ลงท้ายด้วยเส้นทางแอปพลิเคชัน API แบบเต็ม cloudfunctions.net/annotate-http/annotate
  5. ปัญหา: คำขอ cURL ใช้งานได้ แต่ไม่ได้รับข้อมูลกลับมามากนัก คำขอนี้มีฟีเจอร์ไหม
    • วิธีแก้ไข: นี่ไม่ใช่ปัญหาหลัก หากดำเนินการต่อโดยไม่ทำการเปลี่ยนแปลงใดๆ ที่เหลือในห้องทดลองจะยังคงใช้ได้ หากต้องการข้อมูลเพิ่มเติมกลับมา คุณขอให้ Duet เพิ่มฟีเจอร์ต่างๆ ลงในคำขอ cURL ได้
  6. ปัญหา: คำตอบดูเหมือนจะไม่ถูกต้องหรือไม่มีบริบทเฉพาะโค้ด คุณกำลังใช้ Gemini Chat ภายใน Cloud Shell Editor ใช่ไหม
    • วิธีแก้ปัญหา: ลองเปิดไฟล์ main.py และไฮไลต์โค้ดที่เกี่ยวข้องกับพรอมต์ของคุณขณะใช้ Gemini Chat ภายใน Cloud Shell Editor ผู้ช่วย Gemini ทั่วทั้ง Google Cloud นั้นมีบริบทที่แตกต่างกัน ซึ่งจะนำมาสู่คำตอบที่แตกต่างกันไป
  7. ปัญหา: คำตอบพรอมต์ยังไม่ถูกต้องนัก
    • วิธีแก้ไข: ลองใช้พรอมต์อื่นที่คุณให้ Gemini กำหนดทิศทางเพิ่มเติมเกี่ยวกับสิ่งที่คุณต้องการผลิต โปรดแทนที่ my-project-with-duet ด้วยรหัสโปรเจ็กต์ มีตัวอย่างดังต่อไปนี้
      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" }
  8. ปัญหา: หลังจากขั้นตอนการแก้ปัญหาเหล่านี้ทั้งหมดแล้ว ระบบก็ยังไม่ทำงาน
    • วิธีแก้ปัญหา: เนื่องจาก LLM มีลักษณะเฉพาะตัว จึงเป็นไปได้ว่า Duet จะสร้างคำตอบที่ใช้งานไม่ได้ ในกรณีนี้ ให้คัดลอกตัวอย่างคำสั่ง curl ด้านบน แล้วลองเรียกใช้ในเทอร์มินัล โปรดแทนที่ my-project-with-duet ด้วยรหัสโปรเจ็กต์

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

ใช้ Gemini เพื่อสร้างไฟล์ index.html ที่เรียกใช้ปลายทาง Cloud Function ของ Jump Start Solution จากนั้นทำให้ไฟล์ index.html ใช้งานได้ในโฮสติ้งของ Firebase เพื่อดูการทำงานของโค้ด

  1. สร้างโค้ดฝั่งไคลเอ็นต์
    • กลับไปที่ช่องแชทของ Gemini แล้วป้อนพรอมต์ต่อไปนี้
      • 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.
    • คัดลอกไฟล์ index.html ที่สร้างขึ้นในการตอบกลับ
      • หมายเหตุ: คุณต้องใช้โค้ดนี้ในภายหลัง ดังนั้นให้บันทึกรหัสนี้ไว้ที่ใดก็ได้เมื่อกังวลว่าอาจทำรหัสหาย
    • ปิด main.py
  2. สร้างไดเรกทอรี frontend ใหม่
    • คุณถาม Gemini ได้ เช่น
      • What are the console commands to create and navigate to a new frontend directory?
    • คุณควรเห็นผลลัพธ์ที่คล้ายกับ mkdir frontend และ cd frontend
    • ใช้ Cloud Shell Terminal เพื่อยืนยันว่าคุณยังอยู่ในไดเรกทอรี annotate-http-1 และเรียกใช้คำสั่งเหล่านั้น:
      • cd ~/annotate-http-1
      • mkdir frontend
      • cd frontend
  3. ยืนยันว่าคุณเข้าสู่ระบบโปรเจ็กต์ที่ถูกต้องในเทอร์มินัล Cloud Shell
    • คุณถาม Gemini ได้ เช่น
      • What is the gcloud command to set my project?
    • คุณควรเห็นผลลัพธ์ที่คล้ายกับ gcloud config set project my-project-with-duet
      • ยืนยันว่ารหัสโปรเจ็กต์ถูกต้อง แล้วเรียกใช้คำสั่งในเทอร์มินัล Cloud Shell
  4. เปิดใช้ Firebase
    • ในแท็บใหม่ (เปิด Cloud Shell Editor ปัจจุบันค้างไว้) ไปที่ https://console.firebase.google.com/
    • คลิกเพิ่มโครงการ
    • พิมพ์รหัสโปรเจ็กต์และรอให้รหัสปรากฏในเมนูแบบเลื่อนลง
    • คลิกรหัสโปรเจ็กต์
    • คลิกต่อไป
    • คลิกยืนยันแผน
    • คลิกต่อไป
    • ยกเลิกการเลือกเปิดใช้ Google Analytics สำหรับโปรเจ็กต์นี้
      • Firebase ขอแนะนําให้ใช้ Google Analytics แต่จะไม่ใช้ในแอปพลิเคชันนี้
    • คลิกต่อไป
    • ปิดแท็บนี้และกลับไปที่ Cloud Shell Editor
    • หมายเหตุ: ขั้นตอนเหล่านี้จำเป็นสำหรับผู้ใช้ที่ไม่เคยใช้ Firebase มาก่อนเท่านั้น แต่การดำเนินการนี้จะอนุญาตให้ทุกคนใช้เส้นทางเดียวกันได้ หากคุณทำแบบนี้อีกในอนาคต ก็ข้ามขั้นตอนนี้ได้
  5. เข้าสู่ระบบ Firebase ใน Cloud Shell
    • เรียกใช้คำสั่ง firebase login --no-localhost ในเทอร์มินัล Cloud Shell Editor
    • เข้าสู่ URL ที่ระบุ
      • คลิกใช่ ฉันเพิ่งเรียกใช้คำสั่งนี้
      • คลิกใช่ นี่คือรหัสเซสชันของฉัน
      • คลิกคัดลอก
    • กลับไปที่เทอร์มินัลเครื่องมือแก้ไข Cloud Shell
    • วางค่าที่คัดลอกลงในเทอร์มินัลที่มีข้อความว่า: Enter authorization code:
    • กด Enter
  6. ทำให้เว็บไซต์ใหม่ใช้งานได้ในโฮสติ้งของ Firebase
    • เริ่มต้นโปรเจ็กต์ Firebase ใหม่
      • คุณถาม Gemini ได้ เช่น
        • What are the commands to initialize and deploy a new firebase application?
      • คุณควรเห็นผลลัพธ์อย่างเช่น firebase init และ firebase deploy พร้อมวิธีการ
      • เนื่องจาก Gemini อาจแนะนำได้หลายวิธีหากพิจารณาจากความต้องการของคุณ เราจึงขอมอบคำแนะนำที่เฉพาะเจาะจงให้คุณทำตามต่อไปนี้
        • firebase init
          • ลูกศรลงไปยัง Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
            • กดแถบ Space
            • กด Enter
          • ลูกศรลงไปยัง Use an existing project
            • กด Enter
          • หากเห็นรายการโปรเจ็กต์ ให้กดลูกศรลงไปยังโปรเจ็กต์ที่คุณใช้งานอยู่ในวันนี้
            • กด Enter
          • หากระบบขอให้คุณ Please input the ID of the Google Cloud Project you would like to add Firebase:
            • พิมพ์รหัสโปรเจ็กต์
            • กด Enter
          • สำหรับข้อความแจ้งที่เหลือทั้งหมด ให้กด Enter
        • firebase deploy
  7. ทำให้แอปพลิเคชันใช้งานได้อีกครั้งด้วยการเรียกใช้ปลายทาง API ฟังก์ชันระบบคลาวด์
    • คำสั่งก่อนหน้าควรสร้างไดเรกทอรี public ด้วยไฟล์ index.html ภายในไดเรกทอรี frontend ที่คุณสร้างไว้ก่อนหน้านี้ คุณควรทำการเปลี่ยนแปลงไฟล์ ~/annotate-http-1/frontend/public/index.html ดังต่อไปนี้
    • เปิดไฟล์ index.html
      • คลิกไอคอนนักสำรวจ ไอคอนการนำทางของนักสำรวจ
      • คลิกโฟลเดอร์ frontend
      • คลิกโฟลเดอร์ public
      • คลิกไฟล์index.html "การไปยังไฟล์ index.html"
    • ล้างไฟล์ index.html ที่มีอยู่
    • วางโค้ดที่คุณคัดลอกไว้ก่อนหน้านี้ลงในไฟล์ index.html
    • เรียกใช้ firebase deploy เพื่อทำให้แอปพลิเคชันใหม่ใช้งานได้
    • ไปที่ URL โฮสติ้งของ Firebase เพื่อดูว่าใช้งานได้หรือไม่
      • หมายเหตุ: คุณอาจต้องรีเฟรชเว็บไซต์ใหม่ทั้งหมดเพื่อดูข้อมูลอัปเดต

การแก้ปัญหา

ไฟล์ index.html ควรมีลักษณะดังนี้

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

หากเว็บไซต์ไม่ทำงาน โปรดตรวจสอบสิ่งต่อไปนี้

  1. ปัญหา: 404 (ไม่พบ) URL ที่ใช้ในเมธอด fetch มี my-project-with-duet ด้วยไหม
    • วิธีแก้ไข: ใส่รหัสโปรเจ็กต์แทน my-project-with-duet
  2. ปัญหา: 404 (ไม่พบ) URL ที่ใช้ในเมธอด fetch ไม่มี URL แบบเต็มใช่ไหม
    • วิธีแก้ไข: อย่าลืมใส่ URL แบบเต็มในเมธอด fetch ซึ่งควรมีลักษณะคล้ายกับ https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
  3. ปัญหา: คำตอบพรอมต์ยังไม่ถูกต้องนัก
    • วิธีแก้ไข: ลองใช้พรอมต์อื่นที่คุณให้ Gemini กำหนดทิศทางเพิ่มเติมเกี่ยวกับสิ่งที่คุณต้องการผลิต โปรดแทนที่ my-project-with-duet ด้วยรหัสโปรเจ็กต์ ต่อไปนี้เป็นตัวอย่าง:
      • 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.
  4. ปัญหา: เว็บไซต์ของคุณใช้งานไม่ได้แล้ว แต่ใช้งานไม่ได้
    • วิธีแก้ปัญหา: เนื่องจาก LLM มีลักษณะเฉพาะตัว จึงเป็นไปได้ว่า Duet จะสร้างคำตอบที่ใช้งานไม่ได้ ในกรณีนี้ ให้คัดลอกตัวอย่าง index.html ด้านบนและลองใช้ firebase deploy อีกครั้ง โปรดแทนที่ my-project-with-duet ด้วยรหัสโปรเจ็กต์

7 (ไม่บังคับ) เปิดการสํารวจ

  1. ใช้ Gemini และผู้ช่วยในเครื่องมือแก้ไขเพื่อเพิ่มรูปแบบ CSS ให้กับแอปพลิเคชัน และทำให้แอปพลิเคชันใช้งานได้อีกครั้งเมื่อเสร็จแล้ว หากคุณกำลังมองหาแรงบันดาลใจ ต่อไปนี้เป็นตัวอย่างคำสั่งที่คุณสามารถลองใช้ได้:
    • Make this index.html file use material design.รูปภาพเว็บไซต์ที่ออกแบบด้วยดีไซน์ Material
  2. สิ่งอื่นๆ ที่ควรลอง:
    • เว็บไซต์ที่สร้างขึ้นควรใช้ได้กับรูปภาพ http สาธารณะทุกรูป ใช้งานร่วมกับ Duet เพื่อแสดงรูปภาพในหน้าเว็บ

8 (ไม่บังคับ) ลบโปรเจ็กต์

หากต้องการหลีกเลี่ยงไม่ให้มีการเรียกเก็บเงินสำหรับทรัพยากรที่สร้างขึ้นในวันนี้ คุณสอบถาม Duet เกี่ยวกับวิธีดำเนินการดังกล่าวได้

  1. ป้อนข้อความแจ้ง:
    • How can I delete my project?
    • คุณควรเห็นผลลัพธ์ที่คล้ายกับ gcloud projects delete my-project-with-duet
    • สำคัญ แทนที่ my-project-with-duet ในคำสั่งก่อนหน้าด้วยรหัสโปรเจ็กต์
  2. เรียกใช้คำสั่ง gcloud projects delete เพื่อนำทรัพยากรทั้งหมดที่คุณสร้างขึ้นในวันนี้ออก