ติดตั้งใช้งานเว็บแอป Svelte ของ Generative AI จากระบบควบคุมเวอร์ชันไปยัง Cloud Run โดยอัตโนมัติ

1. ภาพรวม

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

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

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

  • เขียนเว็บแอปพลิเคชันด้วยเครื่องมือแก้ไข Cloud Shell
  • จัดเก็บโค้ดแอปพลิเคชันใน GitHub
  • ทำให้แอปพลิเคชันใช้งานได้ใน Cloud Run โดยอัตโนมัติ
  • เพิ่ม Generative AI ลงในแอปพลิเคชันโดยใช้ Vertex AI

2. ข้อกำหนดเบื้องต้น

  1. หากยังไม่มีบัญชี Google คุณต้องสร้างบัญชี Google
    • ใช้บัญชีส่วนตัวแทนบัญชีงานหรือบัญชีโรงเรียน บัญชีงานและบัญชีโรงเรียนอาจมีข้อจํากัดที่ทำให้คุณเปิดใช้ API ที่จําเป็นสําหรับห้องทดลองนี้ไม่ได้
  2. หากยังไม่มีบัญชี GitHub คุณต้องสร้างบัญชี GitHub

3. การตั้งค่าโปรเจ็กต์

  1. ลงชื่อเข้าใช้คอนโซล Google Cloud
  2. เปิดใช้การเรียกเก็บเงินในคอนโซล Cloud
    • การทำแล็บนี้ให้เสร็จสมบูรณ์ควรใช้ทรัพยากรในระบบคลาวด์ไม่ถึง $1 USD
    • คุณสามารถทำตามขั้นตอนที่ส่วนท้ายของห้องทดลองนี้เพื่อลบทรัพยากรเพื่อหลีกเลี่ยงการเรียกเก็บเงินเพิ่มเติม
    • ผู้ใช้ใหม่มีสิทธิ์รับช่วงทดลองใช้ฟรีมูลค่า$300 USD
    • หากจะไปเข้าร่วมกิจกรรม Gen AI for Devs คุณอาจได้รับเครดิตมูลค่า$1 USD
  3. สร้างโปรเจ็กต์ใหม่หรือเลือกนําโปรเจ็กต์ที่มีอยู่มาใช้ซ้ำ
  4. ยืนยันว่าเปิดใช้การเรียกเก็บเงินในโปรเจ็กต์ของฉันในการเรียกเก็บเงินใน Cloud
    • หากโปรเจ็กต์ใหม่แสดง Billing is disabled ในคอลัมน์ Billing account ให้ทำดังนี้
      1. คลิกจุด 3 จุดในคอลัมน์ Actions
      2. คลิกเปลี่ยนการเรียกเก็บเงิน
      3. เลือกบัญชีสำหรับการเรียกเก็บเงินที่ต้องการใช้
    • หากคุณเข้าร่วมกิจกรรม Gen AI for Devs บัญชีมีแนวโน้มที่จะชื่อว่าบัญชีสำหรับการเรียกเก็บเงินของ Google Cloud Platform เวอร์ชันทดลองใช้

4. เปิดเครื่องมือแก้ไข Cloud Shell

  1. ไปที่ Cloud Shell Editor
  2. หากเทอร์มินัลไม่ปรากฏที่ด้านล่างของหน้าจอ ให้เปิดเทอร์มินัลโดยทำดังนี้
    • คลิกเมนู 3 ขีด ไอคอนเมนู 3 ขีด
    • คลิก Terminal
    • คลิก New Terminalเปิดเทอร์มินัลใหม่ในเครื่องมือแก้ไข Cloud Shell
  3. ในเทอร์มินัล ให้ตั้งค่าโปรเจ็กต์ด้วยคำสั่งนี้
    • รูปแบบ:
      gcloud config set project [PROJECT_ID]
    • ตัวอย่าง
      gcloud config set project lab-project-id-example
    • หากจำรหัสโปรเจ็กต์ไม่ได้ ให้ทำดังนี้
      • คุณแสดงรายการรหัสโปรเจ็กต์ทั้งหมดได้โดยทำดังนี้
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      ตั้งค่ารหัสโปรเจ็กต์ในเทอร์มินัลของเครื่องมือแก้ไข Cloud Shell
  4. หากได้รับข้อความแจ้งให้ให้สิทธิ์ ให้คลิกให้สิทธิ์เพื่อดำเนินการต่อ คลิกเพื่อให้สิทธิ์ Cloud Shell
  5. คุณควรเห็นข้อความนี้
    Updated property [core/project].
    หากเห็น WARNING และระบบถาม Do you want to continue (Y/N)? แสดงว่าคุณอาจป้อนรหัสโปรเจ็กต์ไม่ถูกต้อง กด N แล้วกด Enter แล้วลองเรียกใช้คำสั่ง gcloud config set project อีกครั้ง

5. เปิดใช้ API

เปิดใช้ API ต่อไปนี้ในเทอร์มินัล

gcloud services enable \
  run.googleapis.com \
  cloudbuild.googleapis.com \
  aiplatform.googleapis.com

คำสั่งนี้อาจใช้เวลาสักครู่จึงจะเสร็จสมบูรณ์ แต่สุดท้ายแล้วควรแสดงข้อความสำเร็จรูปคล้ายกับข้อความนี้

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

6. กำหนดค่า Git

  1. ตั้งค่าอีเมลผู้ใช้ Git ทั่วโลก
    git config --global user.email "you@example.com"
  2. ตั้งชื่อผู้ใช้ Git ทั่วโลก
    git config --global user.name "Your Name"
  3. ตั้งค่าสาขาเริ่มต้น Git ทั่วโลกเป็น main โดยทำดังนี้
    git config --global init.defaultBranch main

7. เขียนโค้ด

วิธีเขียนแอปพลิเคชันใน Svelte

  1. ไปที่ไดเรกทอรีบ้านด้วยคำสั่งต่อไปนี้
    cd ~
  2. สร้างcodelab-genaiแอปพลิเคชัน Svelte ใหม่: แอปพลิเคชันใช้ SvelteKit เป็นเฟรมเวิร์กสำหรับแสดงผลเว็บ
     npx sv create codelab-genai \
     --template=minimal \
     --types=ts \
     --no-add-ons
  3. หากระบบขอให้คุณติดตั้งแพ็กเกจ sv ให้กด Enter เพื่อดำเนินการต่อ
    Need to install the following packages:
sv@0.6.4
Ok to proceed? (y)
  4. เมื่อระบบถามว่าจะใช้เครื่องมือจัดการแพ็กเกจใด ให้เลือก npm แล้วกด Enter
    Which package manager do you want to install dependencies with?
│  ○ None
│  ● npm
│  ○ yarn
│  ○ pnpm
│  ○ bun
  5. ไปที่ไดเรกทอรี codelab-genai ด้วยคำสั่งต่อไปนี้
    cd codelab-genai
  6. เปิดไฟล์ +page.svelte ใน Cloud Shell Editor โดยทำดังนี้
    cloudshell edit src/routes/+page.svelte
    ตอนนี้ไฟล์ควรปรากฏที่ด้านบนของหน้าจอ คุณสามารถแก้ไขไฟล์ +page.svelte นี้ได้ แสดงรหัสนั้นในส่วนด้านบนของหน้าจอ
  7. ลบโค้ดที่มีอยู่ คัดลอกโค้ดต่อไปนี้และวางลงในไฟล์ +page.svelte ที่เปิดอยู่
    <script lang="ts">
    let greeting="Hello, World!"
</script>

<main>
    {greeting}
</main>
    หลังจากผ่านไป 2-3 วินาที เครื่องมือแก้ไข Cloud Shell จะบันทึกโค้ดโดยอัตโนมัติ โค้ดนี้จะตอบสนองต่อคำขอ HTTP ด้วยคําทักทาย "Hello World"

โค้ดเริ่มต้นสําหรับแอปพลิเคชันเสร็จสมบูรณ์แล้วและพร้อมที่จะจัดเก็บไว้ในระบบควบคุมเวอร์ชัน

8. สร้างที่เก็บ

  1. กลับไปที่เทอร์มินัล Cloud Shell ที่ด้านล่างของหน้าจอ
  2. ตรวจสอบว่าคุณยังอยู่ในไดเรกทอรีที่ถูกต้อง
    cd ~/codelab-genai
  3. เริ่มต้นที่เก็บ Git
    git init -b main
  4. เข้าสู่ระบบ GitHub CLI
    gh auth login
    กด Enter เพื่อยอมรับตัวเลือกเริ่มต้นและทำตามวิธีการในเครื่องมือ GitHub CLI ซึ่งรวมถึง
    1. คุณต้องการเข้าสู่ระบบบัญชีใด GitHub.com
    2. โปรโตคอลที่คุณต้องการสำหรับการดำเนินการ Git ในโฮสต์นี้คืออะไร HTTPS
    3. ตรวจสอบสิทธิ์ Git ด้วยข้อมูลเข้าสู่ระบบ GitHub ใช่ไหม Y (ข้ามหากรายการนี้ไม่ปรากฏขึ้น)
    4. คุณต้องการตรวจสอบสิทธิ์ GitHub CLI ด้วยวิธีใด Login with a web browser
    5. คัดลอกรหัสแบบใช้ครั้งเดียว
    6. เปิด https://github.com/login/device
    7. วางรหัสแบบใช้ครั้งเดียว
    8. คลิกให้สิทธิ์ GitHub
    9. เข้าสู่ระบบให้เสร็จสมบูรณ์
  5. ตรวจสอบว่าคุณได้เข้าสู่ระบบแล้ว
    gh api user -q ".login"
    หากเข้าสู่ระบบสำเร็จ คำสั่งนี้จะแสดงชื่อผู้ใช้ GitHub
  6. สร้างตัวแปร GITHUB_USERNAME
    GITHUB_USERNAME=$(gh api user -q ".login")
  7. ยืนยันว่าคุณได้สร้างตัวแปรสภาพแวดล้อมแล้ว โดยทำดังนี้
    echo ${GITHUB_USERNAME}
    หากสร้างตัวแปรสำเร็จ การดำเนินการนี้จะแสดงชื่อผู้ใช้ GitHub
  8. สร้างที่เก็บ GitHub ว่างชื่อ codelab-genai โดยทำดังนี้
    gh repo create codelab-genai --private
    หากได้รับข้อผิดพลาด
    GraphQL: Name already exists on this account (createRepository)
    แสดงว่าคุณมีที่เก็บชื่อ codelab-genai อยู่แล้ว คุณมี 2 ตัวเลือกในการดูบทแนะนำนี้ต่อ
  9. เพิ่มที่เก็บ codelab-genai เป็น origin ระยะไกล โดยทำดังนี้
    git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai

9. แชร์รหัส

  1. ตรวจสอบว่าคุณอยู่ในไดเรกทอรีที่ถูกต้อง
    cd ~/codelab-genai
  2. เพิ่มไฟล์ทั้งหมดในไดเรกทอรีปัจจุบันไปยังการคอมมิตนี้
    git add .
  3. สร้างการคอมมิตแรก
    git commit -m "add http server"
  4. พุชการคอมมิตไปยัง Branch main ของที่เก็บ origin โดยทำดังนี้
    git push -u origin main

คุณสามารถเรียกใช้คําสั่งนี้และไปที่ URL ที่ปรากฏขึ้นเพื่อดูโค้ดแอปพลิเคชันบน GitHub

echo -e "\n\nTo see your code, visit this URL:\n \
    https://github.com/${GITHUB_USERNAME}/codelab-genai/blob/main/src/routes/+page.svelte \n\n"

10. ตั้งค่าการทำให้ใช้งานได้แบบอัตโนมัติ

  1. เปิดแท็บ Cloud Shell Editor ค้างไว้ เราจะกลับมาที่แท็บนี้ในภายหลัง
  2. ในแท็บใหม่ ให้ไปที่หน้า Cloud Run
  3. เลือกโปรเจ็กต์ Google Cloud ที่ถูกต้องในคอนโซล เมนูแบบเลื่อนลงของโปรเจ็กต์ใน Google Cloud Console
  4. คลิกเชื่อมต่อที่เก็บ
  5. คลิกตั้งค่าด้วย Cloud Build
    1. เลือก GitHub เป็นผู้ให้บริการที่เก็บ
      • หากคุณไม่ได้เข้าสู่ระบบบัญชี GitHub ในเบราว์เซอร์ ให้เข้าสู่ระบบด้วยข้อมูลเข้าสู่ระบบ
    2. คลิกตรวจสอบสิทธิ์ แล้วคลิกต่อไป
    3. หลังจากเข้าสู่ระบบ คุณจะเห็นข้อความในหน้า Cloud Run ที่ระบุว่าแอป GitHub ยังไม่ได้ติดตั้งอยู่บนที่เก็บของคุณ
    4. คลิกปุ่มติดตั้ง Google Cloud Build
      • ในหน้าการตั้งค่าการติดตั้ง ให้เลือกเฉพาะที่เก็บข้อมูลบางแห่ง แล้วเลือกที่เก็บข้อมูล codelab-genai ที่คุณสร้างผ่าน CLI
      • คลิกติดตั้ง
      • หมายเหตุ: หากคุณมีที่เก็บ GitHub จำนวนมาก การดำเนินการนี้อาจใช้เวลา 2-3 นาทีในการโหลด
    5. เลือก your-user-name/codelab-genai เป็นที่เก็บ
      • หากไม่มีที่เก็บ ให้คลิกลิงก์จัดการที่เก็บที่เชื่อมต่อ
    6. ปล่อยBranch เป็น ^main$
    7. คลิก Go, Node.js, Python, Java, .NET Core, Ruby หรือ PHP ผ่าน Buildpack ของ Google Cloud
      • ปล่อยช่องอื่นๆ (Build context directory, Entrypoint และ Function target) ไว้ตามเดิม
    8. คลิกบันทึก
  6. เลื่อนลงไปที่การตรวจสอบสิทธิ์
  7. คลิกอนุญาตคำขอที่ไม่ผ่านการตรวจสอบสิทธิ์
  8. คลิกสร้าง

เมื่อการบิลด์เสร็จสิ้น (ซึ่งอาจใช้เวลาหลายนาที) ให้เรียกใช้คําสั่งนี้และไปที่ URL ที่ปรากฏขึ้นเพื่อดูแอปพลิเคชันที่ทํางานอยู่

echo -e "\n\nOnce the build finishes, visit your live application:\n \
    "$( \
        gcloud run services list | \
        grep codelab-genai | \
        awk '/URL/{print $2}' | \
        head -1 \
    )" \n\n"

11. เปลี่ยนรหัส

กลับไปที่เครื่องมือแก้ไข Cloud Shell

หากยังเปิดเครื่องมือแก้ไข Cloud Shell อยู่ ให้ข้ามขั้นตอนเหล่านี้

  1. ไปที่ Cloud Shell Editor
  2. หากเทอร์มินัลไม่ปรากฏที่ด้านล่างของหน้าจอ ให้เปิดเทอร์มินัลโดยทำดังนี้
    • คลิกเมนู 3 ขีด ไอคอนเมนู 3 ขีด
    • คลิก Terminal
    • คลิก New Terminalเปิดเทอร์มินัลใหม่ในเครื่องมือแก้ไข Cloud Shell
  3. ในเทอร์มินัล ให้ตั้งค่าโปรเจ็กต์ด้วยคำสั่งนี้
    • รูปแบบ:
      gcloud config set project [PROJECT_ID]
    • ตัวอย่าง
      gcloud config set project lab-project-id-example
    • หากจำรหัสโปรเจ็กต์ไม่ได้ ให้ทำดังนี้
      • คุณแสดงรายการรหัสโปรเจ็กต์ทั้งหมดได้โดยทำดังนี้
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      ตั้งค่ารหัสโปรเจ็กต์ในเทอร์มินัลของเครื่องมือแก้ไข Cloud Shell
  4. หากได้รับข้อความแจ้งให้ให้สิทธิ์ ให้คลิกให้สิทธิ์เพื่อดำเนินการต่อ คลิกเพื่อให้สิทธิ์ Cloud Shell
  5. คุณควรเห็นข้อความนี้
    Updated property [core/project].
    หากเห็น WARNING และระบบถาม Do you want to continue (Y/N)? แสดงว่าคุณอาจป้อนรหัสโปรเจ็กต์ไม่ถูกต้อง กด N แล้วกด Enter แล้วลองเรียกใช้คำสั่ง gcloud config set project อีกครั้ง

เพิ่ม Vertex AI ลงในแอปพลิเคชัน

  1. กลับไปที่เทอร์มินัล Cloud Shell ที่ด้านล่างของหน้าจอ
  2. ตรวจสอบว่าคุณยังอยู่ในไดเรกทอรีที่ถูกต้อง
    cd ~/codelab-genai
  3. ติดตั้ง Node.js Vertex AI SDK โดยทำดังนี้
    npm install @google-cloud/vertexai
  4. ติดตั้ง Google Auth SDK ของ Node.js โดยทำดังนี้
    npm install google-auth-library
  5. สร้าง src/routes/facts/+server.ts ในเทอร์มินัล
    mkdir src/routes/facts
touch src/routes/facts/+server.ts
  6. เปิด +server.ts ในเครื่องมือแก้ไข Cloud Shell
    cloudshell edit src/routes/facts/+server.ts
  7. คัดลอกโค้ดต่อไปนี้และวางลงในไฟล์ +server.ts ที่เปิดอยู่
    import { VertexAI } from '@google-cloud/vertexai';
import { GoogleAuth } from 'google-auth-library';

const auth = new GoogleAuth();
const project = await auth.getProjectId();

const getAnimalFacts = async (animal: string): Promise<string> => {

    const vertex = new VertexAI({ project: project });
    const generativeModel = vertex.getGenerativeModel({
        model: 'gemini-1.5-flash'
    });

    const prompt = `Give me 10 fun facts about ${animal || 'dog'}. 
            Return as json as an array in the format ['fact 1', 'fact 2']
            Remove backticks and other markdown formatting.`;
    const resp = await generativeModel.generateContent(prompt);

    if (!resp.response.candidates) {
        throw new Error('Did not receive response candidates.')
    }

    console.log({ text: resp.response.candidates[0].content.parts[0].text })

    return JSON.stringify(JSON.parse(resp.response.candidates[0].content.parts[0].text || '[]'));
}

export async function GET({ url }:{ url:URL}): Promise<Response> {

    let animal: string = url.searchParams.get('animal') || 'dog';

    const animalFacts = await getAnimalFacts(animal);

    return new Response(animalFacts, {
        headers: {
            'Content-Type': 'application/json'
        }
    });
}
  8. เปิด +page.svelte ในเครื่องมือแก้ไข Cloud Shell
    cloudshell edit src/routes/+page.svelte
  9. แทนที่โค้ดในไฟล์ +page.svelte ด้วยโค้ดต่อไปนี้
    <script lang="ts">
    let animal: string = $state("");
    let animalFacts: string[] = $state([]);

    async function getNewFunFacts() {
        animalFacts = ["(loading...)"];
        const response = await fetch(`/facts?animal=${animal}`);
        animalFacts = await response.json();
    }
</script>

<main>
    <h1>Animal Fun Facts!</h1>
    <label for="animal">Animal</label>
    <input id="animal" placeholder="dog" bind:value={animal} />
    <button onclick={getNewFunFacts}> Get New Fun Facts </button>
    <ul>
        {#each animalFacts as animalFact}
            <li>{animalFact}</li>
        {/each}
    </ul>
</main>

12. ทำให้ใช้งานได้อีกครั้ง

  1. ตรวจสอบว่าคุณยังอยู่ในไดเรกทอรีที่ถูกต้องใน Cloud Shell
    cd ~/codelab-genai
  2. เรียกใช้คําสั่งเหล่านี้เพื่อคอมมิตแอปพลิเคชันเวอร์ชันใหม่ไปยังที่เก็บ Git ในเครื่อง
    git add .
git commit -m "add latest changes"
  3. พุชการเปลี่ยนแปลงไปยัง GitHub โดยทำดังนี้
    git push
  4. เมื่อการบิลด์เสร็จสิ้นแล้ว ให้เรียกใช้คําสั่งนี้และไปที่แอปพลิเคชันที่ติดตั้งใช้งาน
    echo -e "\n\nOnce the build finishes, visit your live application:\n \
    "$( \
        gcloud run services list | \
        grep codelab-genai | \
        awk '/URL/{print $2}' | \
        head -1 \
    )" \n\n"

ระบบอาจใช้เวลาหลายนาทีเพื่อให้บิลด์เสร็จสมบูรณ์ก่อนที่คุณจะเห็นการเปลี่ยนแปลง

คุณดูประวัติการแก้ไขทั้งหมดได้ที่นี่ https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

13. (ไม่บังคับ) ตรวจสอบการใช้ Vertex AI

คุณสามารถตรวจสอบการดำเนินการของ Vertex AI ได้เช่นเดียวกับบริการอื่นๆ ของ Google Cloud บันทึกการตรวจสอบจะช่วยตอบคําถามที่ว่า "ใครทําอะไร ที่ไหน และเมื่อใด" ระบบจะเปิดใช้บันทึกการตรวจสอบการดูแลระบบสําหรับ Vertex AI โดยค่าเริ่มต้น หากต้องการตรวจสอบคำขอสร้างเนื้อหา คุณต้องเปิดใช้บันทึกการตรวจสอบการเข้าถึงข้อมูล โดยทำดังนี้

  1. ในคอนโซล Google Cloud ให้ไปที่หน้าบันทึกการตรวจสอบ

    หากใช้แถบค้นหาเพื่อค้นหาหน้านี้ ให้เลือกผลลัพธ์ที่มีส่วนหัวย่อยเป็น IAM และผู้ดูแลระบบ
  2. ตรวจสอบว่าโปรเจ็กต์ Google Cloud ที่มีอยู่เป็นโปรเจ็กต์ที่คุณใช้สร้างแอปพลิเคชัน Cloud Run
  3. ในตารางการกําหนดค่าบันทึกการตรวจสอบการเข้าถึงข้อมูล ให้ค้นหาและเลือก Vertex AI API จากคอลัมน์บริการ
  4. ในแท็บประเภทบันทึก ให้เลือกประเภทบันทึกการตรวจสอบการเข้าถึงข้อมูล Admin read และ Data read
  5. คลิกบันทึก

หลังจากเปิดใช้แล้ว คุณจะดูบันทึกการตรวจสอบสําหรับการเรียกใช้แอปพลิเคชันแต่ละครั้งได้ หากต้องการดูบันทึกการตรวจสอบที่มีรายละเอียดการเรียกใช้ ให้ทําดังนี้

  1. กลับไปที่แอปพลิเคชันที่ติดตั้งใช้งานแล้วและรีเฟรชหน้าเว็บเพื่อเรียกใช้บันทึก
  2. ในคอนโซล Google Cloud ให้ไปที่หน้า Log Explorer

  3. ในหน้าต่างการค้นหา ให้พิมพ์ข้อมูลต่อไปนี้
    LOG_ID("cloudaudit.googleapis.com%2Fdata_access")
protoPayload.serviceName="aiplatform.googleapis.com"
  4. คลิกเรียกใช้การค้นหา

บันทึกการตรวจสอบจะบันทึกการใช้ Vertex AI API แต่จะไม่อนุญาตให้คุณดูข้อมูลที่เกี่ยวข้องกับเวิร์กโหลด เช่น พรอมต์หรือรายละเอียดคำตอบ

14. (ไม่บังคับ) เพิ่มความสามารถสังเกตการณ์ของภาระงาน AI

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

  1. เปิด +server.ts อีกครั้งในเครื่องมือแก้ไข Cloud Shell
    cloudshell edit src/routes/facts/+server.ts
  2. หลังจากการเรียก await generativeModel.generateContent(prompt) (บรรทัด 17) ให้เพิ่มบรรทัดต่อไปนี้
        console.log(JSON.stringify({
        severity: 'DEBUG',
        message: 'Content is generated',
        prompt: prompt,
        response: resp.response,
    }));
    โค้ดนี้จะเขียนข้อมูลเกี่ยวกับเนื้อหาที่สร้างขึ้นไปยัง stdout โดยใช้รูปแบบการบันทึก Structured ตัวแทนการบันทึกใน Cloud Run จะบันทึกเอาต์พุตที่พิมพ์ไปยัง stdout และเขียนรูปแบบนี้ไปยัง Cloud Logging
  3. เปิด Cloud Shell อีกครั้ง แล้วพิมพ์คําสั่งต่อไปนี้เพื่อให้แน่ใจว่าคุณอยู่ในไดเรกทอรีที่ถูกต้อง
    cd ~/codelab-genai
  4. คอมมิตการเปลี่ยนแปลง
    git commit -am "observe generated content"
  5. พุชการเปลี่ยนแปลงไปยัง GitHub เพื่อทริกเกอร์การปรับใช้งานเวอร์ชันที่แก้ไขแล้วอีกครั้ง
    git push

หลังจากติดตั้งใช้งานเวอร์ชันใหม่แล้ว คุณจะดูข้อมูลการแก้ไขข้อบกพร่องเกี่ยวกับการเรียกใช้ Vertex AI ได้

หากต้องการดูบันทึกของแอปพลิเคชัน ให้ทําดังนี้

  1. ในคอนโซล Google Cloud ให้ไปที่หน้า Log Explorer

  2. ในหน้าต่างการค้นหา ให้พิมพ์ข้อมูลต่อไปนี้
    LOG_ID("run.googleapis.com%2Fstdout")
severity=DEBUG
  3. คลิกเรียกใช้การค้นหา

ผลการค้นหาจะแสดงบันทึกพร้อมพรอมต์และการตอบกลับของ Vertex AI รวมถึง "คะแนนความปลอดภัย" ที่สามารถใช้ตรวจสอบแนวทางปฏิบัติด้านความปลอดภัย

15. (ไม่บังคับ) ล้าง

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

หากต้องการลบโปรเจ็กต์ ให้ทำดังนี้

gcloud projects delete $GOOGLE_CLOUD_PROJECT

คุณอาจต้องลบทรัพยากรที่ไม่จำเป็นออกจากดิสก์ CloudShell ด้วย ดังนี้

  1. ลบไดเรกทอรีโปรเจ็กต์ Codelab โดยทำดังนี้ 
    rm -rf ~/codelab-genai
  2. คำเตือน! การดำเนินการนี้จะยกเลิกไม่ได้ หากต้องการลบทุกอย่างใน Cloud Shell เพื่อเพิ่มพื้นที่ว่าง คุณสามารถลบไดเรกทอรีหน้าแรกทั้งหมดได้ โปรดตรวจสอบว่าคุณได้บันทึกข้อมูลทั้งหมดที่ต้องการเก็บไว้ไว้ที่อื่นแล้ว 
    sudo rm -rf $HOME

16. ขอแสดงความยินดี

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

หากชอบแล็บนี้ คุณสามารถลองทำอีกครั้งในภาษาการเขียนโค้ดหรือเฟรมเวิร์กอื่นได้ ดังนี้

หากสนใจเข้าร่วมการศึกษาวิจัยประสบการณ์ของผู้ใช้ (UX) เพื่อปรับปรุงผลิตภัณฑ์ที่คุณใช้อยู่ในปัจจุบัน โปรดลงทะเบียนที่นี่

ตัวเลือกในการเรียนต่อมีดังนี้