Gemma 3n เปิดตัวพร้อมอินพุตเสียงและเพิ่มประสิทธิภาพเพื่อใช้ในอุปกรณ์ทั่วไป ดูข้อมูลเพิ่มเติม

สร้างผู้ช่วยการเขียนโค้ด AI ส่วนตัวด้วย Gemma

การรับความช่วยเหลือด้านโค้ดจากโมเดลปัญญาประดิษฐ์ (AI) อาจมีประโยชน์มาก แต่จะเกิดอะไรขึ้นหากคุณถูกจำกัดไม่ให้ใช้โมเดล Generative AI ของบุคคลที่สามที่โฮสต์ไว้เนื่องจากข้อจำกัดด้านการเชื่อมต่อ ค่าใช้จ่าย หรือความปลอดภัยของข้อมูล กลุ่มโมเดล Gemma ของ Google พร้อมให้ดาวน์โหลดและเรียกใช้ในฮาร์ดแวร์ของคุณเอง เพื่อให้คุณเก็บทุกอย่างไว้ในเครื่องและยังมีตัวเลือกในการปรับแต่งโมเดลให้ ทำงานกับโค้ดเบสได้ดียิ่งขึ้น

การเรียกใช้อินสแตนซ์ของ Gemma หรือ CodeGemma ด้วยตนเองจะช่วยให้คุณได้รับ ความช่วยเหลือด้านการเขียนโค้ดจาก AI ที่มีความหน่วงต่ำ ความพร้อมใช้งานสูง ต้นทุนที่อาจต่ำกว่า และความสามารถในการเก็บข้อมูลการเขียนโค้ดทั้งหมดไว้ในเครือข่ายของคุณเอง โปรเจ็กต์นี้แสดงวิธีตั้งค่าบริการเว็บของคุณเองเพื่อโฮสต์ Gemma และเชื่อมต่อกับส่วนขยาย Microsoft Visual Studio Code เพื่อให้ใช้โมเดลได้สะดวกยิ่งขึ้นขณะเขียนโค้ด โปรเจ็กต์นี้มี 2 โปรเจ็กต์ย่อย ได้แก่ โปรเจ็กต์หนึ่งสำหรับตั้งค่าและรวม Gemma เข้ากับบริการเว็บ และอีกโปรเจ็กต์หนึ่งสำหรับส่วนขยาย VS Code ที่เชื่อมต่อและใช้บริการเว็บ

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

ภาพรวม

บทแนะนำนี้แสดงวิธีตั้งค่าและขยาย 2 โปรเจ็กต์ ได้แก่ เว็บเซอร์วิสสำหรับ Gemma และส่วนขยาย VS Code เพื่อใช้กับเซอร์วิสนั้น บริการเว็บใช้ไลบรารี Python, Keras, JAX และ FastAPI เพื่อให้บริการโมเดล Gemma และ จัดการคำขอ ส่วนขยาย VS Code ที่ชื่อ Pipet จะเพิ่มคำสั่งลงใน Command Palette ซึ่งช่วยให้คุณส่งคำขอไปยังเว็บเซอร์วิสของ Gemma ได้โดยการเลือก โค้ด ข้อความ หรือความคิดเห็นในหน้าต่างการแก้ไขโค้ด ดังที่แสดงในรูปที่ 1

ภาพหน้าจออินเทอร์เฟซผู้ใช้ของส่วนขยาย VS Code

รูปที่ 1 อินเทอร์เฟซผู้ใช้คำสั่งโปรเจ็กต์สำหรับส่วนขยาย Pipet ใน Visual Studio Code

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

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

วิธีการเหล่านี้จะแนะนำขั้นตอนการเตรียมโปรเจ็กต์นี้ให้พร้อมสำหรับการพัฒนา และการทดสอบ ขั้นตอนการตั้งค่าทั่วไป ได้แก่ การติดตั้งซอฟต์แวร์ที่จำเป็น การโคลนโปรเจ็กต์จากที่เก็บโค้ด การตั้งค่าตัวแปร สภาพแวดล้อม 2-3 รายการ การติดตั้งไลบรารี Python และ Node.js และการทดสอบเว็บ แอปพลิเคชัน

ติดตั้งซอฟต์แวร์ที่จำเป็น

โปรเจ็กต์นี้ใช้ Python 3, สภาพแวดล้อมเสมือน (venv), Node.js และ Node Package Manager (npm) เพื่อจัดการแพ็กเกจและเรียกใช้โปรเจ็กต์ทั้ง 2 รายการ

วิธีติดตั้งซอฟต์แวร์ที่จำเป็น

ติดตั้ง Python 3, สภาพแวดล้อมเสมือน (venv)แพ็กเกจสำหรับ Python, Node.js และตัวจัดการแพ็กเกจ Node.js (npm) โดยทำดังนี้
```
sudo apt update
sudo apt install git pip python3-venv nodejs npm
```

โคลนโปรเจ็กต์

ดาวน์โหลดโค้ดโปรเจ็กต์ลงในคอมพิวเตอร์ที่ใช้พัฒนา คุณต้องมีซอฟต์แวร์ควบคุมแหล่งที่มา git เพื่อดึงข้อมูล ซอร์สโค้ดของโปรเจ็กต์

วิธีดาวน์โหลดโค้ดโปรเจ็กต์

โคลนที่เก็บ Git โดยใช้คำสั่งต่อไปนี้
```
git clone https://github.com/google-gemini/gemma-cookbook.git
```
ไม่บังคับ: กำหนดค่าที่เก็บ Git ในเครื่องให้ใช้การชำระเงินแบบ Sparse เพื่อให้มีเฉพาะไฟล์สำหรับโปรเจ็กต์
```
cd gemma-cookbook/
git sparse-checkout set Demos/personal-code-assistant/
git sparse-checkout init --cone
```

โปรเจ็กต์บริการเว็บของ Gemma

ส่วนบริการเว็บของโปรเจ็กต์นี้ (gemma-web-service) จะสร้างอินสแตนซ์ของ Gemma 2 2B ที่โฮสต์แยกต่างหากซึ่งห่อหุ้มด้วยบริการเว็บพื้นฐานเพื่อจัดการคำขอและการตอบกลับการสร้าง ส่วนขยาย VS Code ซึ่งจะกล่าวถึงในภายหลังในบทแนะนำนี้ จะเชื่อมต่อกับบริการนี้เพื่อจัดการคำขอความช่วยเหลือเกี่ยวกับโค้ด

วิธีการเหล่านี้จะแนะนำขั้นตอนการเตรียมโปรเจ็กต์นี้ให้พร้อมสำหรับการพัฒนา และการทดสอบ ขั้นตอนการตั้งค่าทั่วไป ได้แก่ การติดตั้งซอฟต์แวร์ที่จำเป็น การโคลนโปรเจ็กต์จากที่เก็บโค้ด การตั้งค่าตัวแปรสภาพแวดล้อม บางรายการ การติดตั้งไลบรารี Python และการทดสอบเว็บเซอร์วิส

ข้อกำหนดเกี่ยวกับฮาร์ดแวร์

เรียกใช้โปรเจ็กต์บริการเว็บ Gemma ในคอมพิวเตอร์ที่มีหน่วยประมวลผลกราฟิก (GPU) หรือหน่วยประมวลผล Tensor (TPU) และมีหน่วยความจำ GPU หรือ TPU เพียงพอที่จะ จัดเก็บโมเดล หากต้องการเรียกใช้การกำหนดค่า Gemma 2 2B ในโปรเจ็กต์บริการเว็บนี้ คุณต้องมีหน่วยความจำ GPU ประมาณ 16 GB, RAM ปกติประมาณเท่ากัน และพื้นที่ดิสก์อย่างน้อย 20 GB

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

ฮาร์ดแวร์ GPU: ต้องใช้ NVIDIA T4 เพื่อเรียกใช้โปรเจ็กต์นี้ (แนะนำให้ใช้ NVIDIA L4 ขึ้นไป)
ระบบปฏิบัติการ: เลือกตัวเลือกการเรียนรู้เชิงลึกใน Linux โดยเฉพาะ VM สำหรับการเรียนรู้เชิงลึกที่มี CUDA 12.3 M124 พร้อมด้วย โปรแกรมควบคุมซอฟต์แวร์ GPU ที่ติดตั้งไว้ล่วงหน้า
ขนาดดิสก์บูท: จัดสรรพื้นที่ดิสก์อย่างน้อย 20 GB สำหรับ ข้อมูล โมเดล และซอฟต์แวร์สนับสนุน

กำหนดค่าโปรเจ็กต์

โปรเจ็กต์นี้ใช้ Python 3 และสภาพแวดล้อมเสมือน (venv) เพื่อจัดการแพ็กเกจและเรียกใช้เว็บเซอร์วิส ติดตั้งไลบรารี Python โดยเปิดใช้งานvenvสภาพแวดล้อมเสมือนของ Python เพื่อจัดการแพ็กเกจและการอ้างอิงของ Python โปรดตรวจสอบว่าคุณได้เปิดใช้งานสภาพแวดล้อมเสมือนของ Python ก่อนติดตั้งไลบรารี Python ด้วยสคริปต์ setup_python หรือด้วยโปรแกรมติดตั้ง pip ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้สภาพแวดล้อมเสมือนของ Python ได้ในเอกสารประกอบของ Python venv

วิธีติดตั้งไลบรารี Python

ในหน้าต่างเทอร์มินัล ให้ไปที่ไดเรกทอรี gemma-web-service
```
cd Demos/personal-code-assistant/gemma-web-service/
```
กำหนดค่าและเปิดใช้งานสภาพแวดล้อมเสมือนของ Python (venv) สำหรับโปรเจ็กต์นี้
```
python3 -m venv venv
source venv/bin/activate
```
ติดตั้งไลบรารี Python ที่จำเป็นสำหรับโปรเจ็กต์นี้โดยใช้สคริปต์ setup_python
```
./setup_python.sh
```

ตั้งค่าตัวแปรสภาพแวดล้อม

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

วิธีตั้งค่าตัวแปรสภาพแวดล้อม

รับชื่อผู้ใช้ Kaggle และโทเค็น API โดยทำตามวิธีการในเอกสารประกอบของ Kaggle
รับสิทธิ์เข้าถึงโมเดล Gemma โดยทำตามวิธีการรับสิทธิ์เข้าถึง Gemma ในหน้าการตั้งค่า Gemma
สร้างไฟล์ตัวแปรสภาพแวดล้อมสำหรับโปรเจ็กต์โดยสร้าง.envไฟล์ข้อความในตำแหน่งนี้ในสำเนาของโปรเจ็กต์
```
personal-code-assistant/gemma-web-service/.env
```
หลังจากสร้าง.envไฟล์ข้อความแล้ว ให้เพิ่มการตั้งค่าต่อไปนี้ลงในไฟล์
```
KAGGLE_USERNAME=<YOUR_KAGGLE_USERNAME_HERE>
KAGGLE_KEY=<YOUR_KAGGLE_KEY_HERE>
```

เรียกใช้และทดสอบบริการเว็บ

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

วิธีเรียกใช้และทดสอบโปรเจ็กต์

ในหน้าต่างเทอร์มินัล ให้ไปที่ไดเรกทอรี gemma-web-service
```
cd personal-code-assistant/gemma-web-service/
```
เรียกใช้แอปพลิเคชันโดยใช้สคริปต์ run_service
```
./run_service.sh
```
หลังจากเริ่มบริการเว็บแล้ว โค้ดโปรแกรมจะแสดง URL ที่คุณใช้เข้าถึงบริการได้ โดยปกติแล้วที่อยู่นี้คือ
```
http://localhost:8000/
```
ทดสอบบริการโดยเรียกใช้สคริปต์ test_post ดังนี้
```
./test/test_post.sh
```

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

โปรเจ็กต์ส่วนขยาย VS Code

ส่วนขยาย VS Code ของโปรเจ็กต์นี้ (pipet-code-agent-2) สร้างส่วนขยายซอฟต์แวร์ของแอปพลิเคชัน Microsoft Visual Studio Code ซึ่งออกแบบมาเพื่อเพิ่มคำสั่งการเขียนโค้ด AI ใหม่ ส่วนขยายนี้สื่อสารกับบริการเว็บ Gemma ที่อธิบายไว้ก่อนหน้านี้ในบทแนะนำนี้ ส่วนขยายจะสื่อสารกับบริการบนเว็บผ่าน HTTP โดยใช้ข้อความในรูปแบบ JSON

กำหนดค่าโปรเจ็กต์

วิธีการเหล่านี้จะแนะนำขั้นตอนการตั้งค่าโปรเจ็กต์ Pipet Code Agent v2 สำหรับการพัฒนาและการทดสอบ ขั้นตอนทั่วไปคือการติดตั้งซอฟต์แวร์ที่จำเป็น การเรียกใช้การติดตั้งการกำหนดค่า การกำหนดค่าการตั้งค่าส่วนขยาย และการทดสอบส่วนขยาย

ติดตั้งซอฟต์แวร์ที่จำเป็น

โปรเจ็กต์ Pipet Code Agent ทำงานเป็นส่วนขยายของ Microsoft Visual Studio Code และใช้ Node.js และเครื่องมือ Node Package Manager (npm) เพื่อ จัดการแพ็กเกจและเรียกใช้แอปพลิเคชัน

วิธีติดตั้งซอฟต์แวร์ที่จำเป็น

ดาวน์โหลดและติดตั้ง Visual Studio Code สำหรับแพลตฟอร์มของคุณ
ตรวจสอบว่าได้ติดตั้ง Node.js โดยทำตามวิธีการติดตั้งสำหรับแพลตฟอร์มของคุณ

กำหนดค่าไลบรารีของโปรเจ็กต์

ใช้เครื่องมือบรรทัดคำสั่ง npm เพื่อดาวน์โหลดการอ้างอิงที่จำเป็นและกำหนดค่าโปรเจ็กต์

วิธีกำหนดค่ารหัสโปรเจ็กต์

ไปที่ไดเรกทอรีรากของโปรเจ็กต์ Pipet Code Agent
```
cd Demos/personal-code-assistant/pipet-code-agent-2/
```
เรียกใช้คำสั่งติดตั้งเพื่อดาวน์โหลดการอ้างอิงและกำหนดค่าโปรเจ็กต์
```
npm install
```

กำหนดค่าส่วนขยาย

ตอนนี้คุณควรจะทดสอบการติดตั้งได้โดยการเรียกใช้ Pipet Code Agent เป็น ส่วนขยายการพัฒนาใน VS Code บนอุปกรณ์ การทดสอบจะเปิดหน้าต่าง VS Code Extension Development Host แยกต่างหาก ซึ่งส่วนขยายใหม่จะพร้อมใช้งาน ในหน้าต่างใหม่นี้ คุณจะกำหนดค่าการตั้งค่าสำหรับส่วนขยายที่ใช้เพื่อเข้าถึง บริการเว็บ Gemma ส่วนตัว

Pipet Code Agent ทำงานในหน้าต่างโฮสต์การพัฒนาส่วนขยาย รูปที่ 2 หน้าต่างโฮสต์การพัฒนาส่วนขยาย VS Code ที่มีการตั้งค่าส่วนขยาย Pipet

วิธีกำหนดค่าและทดสอบการตั้งค่า

เริ่มแอปพลิเคชัน VS Code
ใน VS Code ให้สร้างหน้าต่างใหม่โดยเลือกไฟล์ > หน้าต่างใหม่
เปิดโปรเจ็กต์ Pipet Code Agent โดยเลือกไฟล์ > เปิดโฟลเดอร์ แล้วเลือกโฟลเดอร์ personal-code-assistant/pipet-code-agent-2/
เปิดไฟล์ pipet-code-agent-2/src/extension.ts
เรียกใช้ส่วนขยายในโหมดแก้ไขข้อบกพร่องโดยเลือกเรียกใช้ > เริ่มการแก้ไขข้อบกพร่อง และ หากจำเป็น ให้เลือกตัวเลือกโฮสต์การพัฒนาส่วนขยาย VS Code ขั้นตอนนี้จะเปิดหน้าต่างโฮสต์การพัฒนาส่วนขยายแยกต่างหาก
ในหน้าต่าง VS Code ใหม่ ให้เปิดการตั้งค่า VS Code โดยเลือก Code > การตั้งค่า > การตั้งค่า
ตั้งค่าที่อยู่โฮสต์ของเซิร์ฟเวอร์บริการเว็บ Gemma เป็นการตั้งค่าการกำหนดค่า ในช่องการตั้งค่าการค้นหา ให้พิมพ์ Gemma เลือกแท็บผู้ใช้ และในการตั้งค่า Gemma > บริการ: โฮสต์ ให้คลิกลิงก์แก้ไขใน settings.json แล้วเพิ่มที่อยู่โฮสต์ เช่น 127.0.0.1 localhost หรือ my-server.my-local-domain.com
```
"gemma.service.host": "your-host-address-here"
```
บันทึกการเปลี่ยนแปลงในไฟล์ settings.json แล้วปิดแท็บการตั้งค่า

ทดสอบส่วนขยาย

วิธีทดสอบคำสั่งของส่วนขยาย

ในหน้าต่าง Extension Development Host ของ VS Code ให้เลือกโค้ดใดก็ได้ ในหน้าต่างเอดิเตอร์
เปิดพาเล็ตคำสั่งโดยเลือกดู > พาเล็ตคำสั่ง
ในแผงคำสั่ง ให้พิมพ์ Pipet แล้วเลือกคำสั่งใดคำสั่งหนึ่งที่มี คำนำหน้านั้น

แก้ไขคำสั่งที่มีอยู่

การแก้ไขคำสั่งที่ระบุใน Pipet Code Agent เป็นวิธีที่ง่ายที่สุดในการเปลี่ยนลักษณะการทำงานและความสามารถของส่วนขยาย ข้อมูลบริบทของพรอมต์นี้ จะแนะนำโมเดล Generative ของ Gemma ในการสร้างคำตอบ การเปลี่ยน วิธีการในพรอมต์ในคำสั่ง Pipet ที่มีอยู่จะช่วยให้คุณเปลี่ยน ลักษณะการทำงานของแต่ละคำสั่งได้

ชุดวิธีการนี้อธิบายวิธีแก้ไขคำสั่ง review.ts โดย เปลี่ยนข้อความพรอมต์ของคำสั่ง

วิธีเตรียมแก้ไขคำสั่ง review.ts

เริ่มแอปพลิเคชัน VS Code
ใน VS Code ให้สร้างหน้าต่างใหม่โดยเลือกไฟล์ > หน้าต่างใหม่
เปิดโปรเจ็กต์ Pipet Code Agent โดยเลือกไฟล์ > เปิดโฟลเดอร์ แล้วเลือกโฟลเดอร์ pipet-code-agent/
เปิดไฟล์ pipet-code-agent/src/review.ts

วิธีแก้ไขลักษณะการทำงานของคำสั่ง review.ts

ในreview.tsไฟล์ ให้เปลี่ยนบรรทัดที่ 2 จากท้ายของค่าคงที่ PROMPT_INSTRUCTIONSเพื่อเพิ่ม Also note potential performance improvements

const PROMPT_INSTRUCTIONS = `
Reviewing code involves finding bugs and increasing code quality. Examples of
bugs are syntax errors or typos, out of memory errors, and boundary value
errors. Increasing code quality entails reducing complexity of code, eliminating
duplicate code, and ensuring other developers are able to understand the code.
Also note potential performance improvements.

Write a review of the following code:
`;

บันทึกการเปลี่ยนแปลงลงในไฟล์ review.ts

วิธีทดสอบคำสั่งที่แก้ไขแล้ว

ในหน้าต่างโปรเจ็กต์ส่วนขยาย Pipet ของ VS Code ให้เปิดsrc/extension.ts ไฟล์
สร้างโค้ดที่อัปเดตโดยเลือกเทอร์มินัล > เรียกใช้งานสร้างงาน... แล้วเลือกตัวเลือก npm: compile
รีสตาร์ทโปรแกรมแก้ไขข้อบกพร่องโดยเลือกเรียกใช้ > รีสตาร์ทการแก้ไขข้อบกพร่อง
ในหน้าต่าง Extension Development Host ของ VS Code ให้เลือกโค้ดใดก็ได้ ในหน้าต่างเอดิเตอร์
เปิดพาเล็ตคำสั่งโดยเลือกดู > พาเล็ตคำสั่ง
ในแผงคำสั่ง ให้พิมพ์ Pipet แล้วเลือกคำสั่ง Pipet: ตรวจสอบโค้ดที่เลือก

สร้างคำสั่งใหม่

คุณสามารถขยาย Pipet ได้โดยการสร้างคำสั่งใหม่ที่ทำงานใหม่ทั้งหมด ด้วยโมเดล Gemma ไฟล์คำสั่งแต่ละไฟล์ เช่น comment.ts หรือ review.ts ส่วนใหญ่จะ มีเนื้อหาในตัว และมีโค้ดสำหรับการรวบรวมข้อความจากเอดิเตอร์ที่ใช้งานอยู่ การเขียนพรอมต์ การเชื่อมต่อกับเว็บเซอร์วิสของ Gemma การส่ง พรอมต์ และการจัดการคำตอบ

ชุดวิธีการนี้อธิบายวิธีสร้างคำสั่งใหม่โดยใช้โค้ดของ คำสั่งที่มีอยู่ question.ts เป็นเทมเพลต

วิธีสร้างคำสั่งที่แนะนำชื่อสำหรับฟังก์ชัน

ทำสำเนาของไฟล์ pipet-code-agent-2/src/question.ts ชื่อ new-service.ts ในไดเรกทอรี src/
เปิดไฟล์ src/new-service.ts ใน VS Code

เปลี่ยนวิธีการแจ้งในไฟล์ใหม่โดย แก้ไขค่า PROMPT_INSTRUCTIONS

// Provide instructions for the AI model
const PROMPT_INSTRUCTIONS = `
Build a Python web API service using FastAPI and uvicorn.
- Just output the code, DO NOT include any explanations.
- Do not include an 'if __name__ == "__main__":' statement.
- Do not include a '@app.get("/")' statement
- Do not include a '@app.get("/info")' statement
`;

เพิ่มข้อความมาตรฐานของบริการโดยสร้างค่าคงที่ BOILERPLATE_CODE ใหม่

const BOILERPLATE_CODE = `
# the following code for testing and diagnosis:
@app.get("/")
async def root():
    return "Server: OK"

@app.get("/info")
async def info():
    return "Service using FastAPI version: " + fastapi.__version__

# Run the service
if __name__ == "__main__":
    # host setting makes service available to other devices
    uvicorn.run(app, host="0.0.0.0", port=8000)
`;

เปลี่ยนชื่อฟังก์ชันคำสั่งเป็น newService() และอัปเดตข้อความข้อมูล
```
export async function newService() {
  vscode.window.showInformationMessage('Building new service from template...');
...
```
อัปเดตโค้ดการประกอบพรอมต์ให้มีข้อความที่เลือกในเอดิเตอร์ และ PROMPT_INSTRUCTIONS
```
// Build the full prompt using the template.
  const promptText = `${selectedCode}${PROMPT_INSTRUCTIONS}`;
```

เปลี่ยนโค้ดการแทรกคำตอบให้รวมคำตอบและ โค้ดสำเร็จรูป

// Insert answer after selection.
editor.edit((editBuilder) => {
    editBuilder.insert(selection.end, "\n\n" + responseText);
    editBuilder.insert(selection.end, "\n" + BOILERPLATE_CODE);
});

บันทึกการเปลี่ยนแปลงลงในไฟล์ new-service.ts

ผสานรวมคำสั่งใหม่

หลังจากเขียนโค้ดสำหรับคำสั่งใหม่เสร็จแล้ว คุณต้องผสานรวมโค้ดดังกล่าวกับส่วนที่เหลือของส่วนขยาย อัปเดตไฟล์ extension.ts และ package.json เพื่อ ทำให้คำสั่งใหม่เป็นส่วนหนึ่งของส่วนขยาย และเปิดใช้ VS Code เพื่อเรียกใช้ คำสั่งใหม่

วิธีผสานรวมคำสั่ง new-service กับโค้ดส่วนขยาย

เปิดpipet-code-agent-2/src/extension.ts ไฟล์ใน VS Code
เพิ่มไฟล์โค้ดใหม่ลงในส่วนขยายโดยเพิ่มคำสั่งนำเข้าใหม่
```
import { newService } from './new-service';
```

ลงทะเบียนคำสั่งใหม่โดยเพิ่มโค้ดต่อไปนี้ลงในฟังก์ชัน activate()

export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.newService', newService);
}

บันทึกการเปลี่ยนแปลงลงในไฟล์ extension.ts

วิธีผสานรวมคำสั่ง name กับแพ็กเกจส่วนขยาย

เปิดไฟล์ pipet-code-agent/package.json ใน VS Code

เพิ่มคำสั่งใหม่ลงในส่วน commands ของไฟล์แพ็กเกจ

"contributes": {
  "commands": [
    ...
    {
      "command": "pipet-code-agent.newService",
      "title": "Pipet: Generate a FastAPI service."
    }
  ],

บันทึกการเปลี่ยนแปลงลงในไฟล์ package.json

ทดสอบคำสั่งใหม่

เมื่อเขียนโค้ดคำสั่งและผสานรวมกับส่วนขยายเสร็จแล้ว คุณจะทดสอบได้ คำสั่งใหม่จะใช้ได้เฉพาะในหน้าต่าง Extension Development Host ของ VS Code และไม่ใช่ในหน้าต่าง VS Code ที่คุณ แก้ไขโค้ดสำหรับส่วนขยาย

วิธีทดสอบคำสั่งที่แก้ไขแล้ว

ในหน้าต่างโปรเจ็กต์ส่วนขยาย Pipet ของ VS Code ให้เปิดsrc/extension.ts ไฟล์
สร้างโค้ดที่อัปเดตโดยเลือกเทอร์มินัล > เรียกใช้งานสร้างงาน... แล้วเลือกตัวเลือก npm: compile
ในหน้าต่างโปรเจ็กต์ส่วนขยาย Pipet ของ VS Code ให้รีสตาร์ทโปรแกรมแก้ไขข้อบกพร่องโดย เลือกเรียกใช้ > รีสตาร์ทการแก้ไขข้อบกพร่อง ซึ่งจะรีสตาร์ทหน้าต่างโฮสต์การพัฒนาส่วนขยายแยกต่างหาก
ในหน้าต่าง Extension Development Host ของ VS Code ให้เลือกโค้ดบางส่วน ในหน้าต่างเอดิเตอร์
เปิดพาเล็ตคำสั่งโดยเลือกดู > พาเล็ตคำสั่ง
ใน Command Palette ให้พิมพ์ Pipet แล้วเลือกคำสั่ง Pipet: Generate a FastAPI service

ตอนนี้คุณได้สร้างคำสั่งส่วนขยาย VS Code ที่ทำงานร่วมกับโมเดล Gemma AI แล้ว ลองทดสอบคำสั่งและวิธีการต่างๆ เพื่อสร้างเวิร์กโฟลว์การพัฒนาโค้ดที่ AI ช่วยซึ่งเหมาะกับคุณ

แพ็กเกจและติดตั้งส่วนขยาย

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

วิธีติดตั้งส่วนขยายที่แพ็กเป็น VSIX

ในอินสแตนซ์ VS Code ให้เปิดแผงส่วนขยายโดยเลือกไฟล์ > ส่วนขยาย
ในแผงส่วนขยาย ให้เลือกเมนู 3 จุดที่ด้านขวาบน แล้วเลือกติดตั้งจาก VSIX
เปิดไฟล์แพ็กเกจ .vsix ที่คุณสร้างจากโปรเจ็กต์ส่วนขยายเพื่อ ติดตั้ง

แหล่งข้อมูลเพิ่มเติม

ดูรายละเอียดเพิ่มเติมเกี่ยวกับโค้ดสำหรับโปรเจ็กต์นี้ได้ที่ที่เก็บโค้ด Gemma Cookbook หากต้องการความช่วยเหลือในการสร้างแอปพลิเคชันหรือกำลังมองหาการทำงานร่วมกับ นักพัฒนาแอปคนอื่นๆ โปรดดูเซิร์ฟเวอร์ Discord ของชุมชนนักพัฒนาแอป Google ดูโปรเจ็กต์ "สร้างด้วย Google AI" เพิ่มเติมได้ในเพลย์ลิสต์วิดีโอ