ขอแนะนํา Google AI Edge Portal: เปรียบเทียบประสิทธิภาพ AI บนอุปกรณ์ขอบในวงกว้าง ลงชื่อสมัครใช้เพื่อขอสิทธิ์เข้าถึงในช่วงเวอร์ชันตัวอย่างก่อนเปิดตัว

หน้านี้ได้รับการแปลโดย Cloud Translation API

คู่มือการสรุป LLM สำหรับเว็บ

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

หากต้องการเพิ่ม LLM Inference API ลงในเว็บแอปพลิเคชันอย่างรวดเร็ว ให้ทำตามQuickstart ดูตัวอย่างพื้นฐานของเว็บแอปพลิเคชันที่เรียกใช้ LLM Inference API ได้ที่แอปพลิเคชันตัวอย่าง หากต้องการทำความเข้าใจวิธีการทำงานของ LLM Inference API อย่างละเอียด โปรดดูส่วนตัวเลือกการกำหนดค่า การแปลงโมเดล และการปรับแต่ง LoRA

คุณดูตัวอย่างการทำงานของงานนี้ได้ในเดโม MediaPipe Studio ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถ โมเดล และตัวเลือกการกำหนดค่า ของงานนี้ได้ที่ภาพรวม

คู่มือเริ่มใช้งานฉบับย่อ

ทําตามขั้นตอนต่อไปนี้เพื่อเพิ่ม LLM Inference API ลงในเว็บแอปพลิเคชัน LLM Inference API ต้องใช้เว็บเบราว์เซอร์ที่รองรับ WebGPU ดูรายการเบราว์เซอร์ที่เข้ากันได้ทั้งหมดได้ที่ความเข้ากันได้ของเบราว์เซอร์กับ GPU

เพิ่มทรัพยากร Dependency

LLM Inference API ใช้แพ็กเกจ @mediapipe/tasks-genai

ติดตั้งแพ็กเกจที่จำเป็นสำหรับการจัดเตรียมในเครื่อง

npm install @mediapipe/tasks-genai

หากต้องการติดตั้งใช้งานในเซิร์ฟเวอร์ ให้ใช้บริการเครือข่ายนำส่งข้อมูล (CDN) เช่น jsDelivr เพื่อเพิ่มโค้ดลงในหน้า HTML โดยตรง

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai/genai_bundle.cjs"
    crossorigin="anonymous"></script>
</head>

ดาวน์โหลดโมเดล

ดาวน์โหลด Gemma-3n E4B หรือ E2B จาก HuggingFace โมเดลที่มี "-Web" ในชื่อจะได้รับการแปลงสำหรับการใช้งานบนเว็บโดยเฉพาะ ดังนั้นเราขอแนะนำให้ใช้โมเดลเหล่านี้เสมอ

ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่พร้อมใช้งานได้ที่เอกสารประกอบเกี่ยวกับโมเดล หรือเรียกดูหน้าชุมชน HuggingFace ซึ่งมี Gemma 3 อีกหลายเวอร์ชันที่ไม่ได้กล่าวถึงในเอกสารประกอบ แต่ได้รับการแปลงเป็นพิเศษสำหรับเว็บ เช่น 270M 4B 12B 27B และ MedGemma-27B-Text

จัดเก็บโมเดลไว้ในไดเรกทอรีโปรเจ็กต์

<dev-project-root>/assets/gemma-3n-E4B-it-int4-Web.litertlm

ระบุเส้นทางของโมเดลด้วยพารามิเตอร์ออบเจ็กต์ baseOptions modelAssetPath

baseOptions: { modelAssetPath: `/assets/gemma-3n-E4B-it-int4-Web.litertlm`}

เริ่มต้นงาน

เริ่มต้นงานด้วยตัวเลือกการกำหนดค่าพื้นฐาน

const genai = await FilesetResolver.forGenAiTasks(
    // path/to/wasm/root
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai@latest/wasm"
);
llmInference = await LlmInference.createFromOptions(genai, {
    baseOptions: {
        modelAssetPath: '/assets/gemma-3n-E4B-it-int4-Web.litertlm'
    },
    maxTokens: 1000,
    topK: 40,
    temperature: 0.8,
    randomSeed: 101
});

เรียกใช้งาน

ใช้ฟังก์ชัน generateResponse() เพื่อทริกเกอร์การอนุมาน

const response = await llmInference.generateResponse(inputPrompt);
document.getElementById('output').textContent = response;

หากต้องการสตรีมคำตอบ ให้ใช้สิ่งต่อไปนี้

llmInference.generateResponse(
  inputPrompt,
  (partialResult, done) => {
        document.getElementById('output').textContent += partialResult;
});

การเขียนพรอมต์แบบหลายรูปแบบ

สำหรับโมเดล Gemma-3n, Web API ของ LLM Inference API รองรับการแจ้งแบบมัลติโมดัล เมื่อเปิดใช้ความสามารถแบบมัลติโมดัล ผู้ใช้จะใส่รูปภาพ เสียง และข้อความที่เรียงลำดับไว้ในพรอมต์ได้ จากนั้น LLM จะให้คำตอบเป็นข้อความ

หากต้องการเริ่มต้นใช้งาน ให้ใช้ Gemma-3n E4B หรือ Gemma-3n E2B ในรูปแบบที่เข้ากันได้กับ MediaPipe และเว็บ ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบของ Gemma-3n

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

หากต้องการเปิดใช้การรองรับเสียง ให้ตรวจสอบว่าตั้งค่า supportAudio เป็น true

llmInference = await LlmInference.createFromOptions(genai, {
    baseOptions: {
        modelAssetPath: '/assets/gemma-3n-E4B-it-int4-Web.litertlm'
    },
    maxTokens: 1000,
    topK: 40,
    temperature: 0.8,
    randomSeed: 101,
    maxNumImages: 5,
    supportAudio: true,
});

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

const response = await llmInference.generateResponse([
  '<ctrl99>user\nDescribe ',
  {imageSource: '/assets/test_image.png'},
  ' and then transcribe ',
  {audioSource: '/assets/test_audio.wav'},
  '<ctrl100>\n<ctrl99>model\n',
]);

สำหรับวิชัน URL ของรูปภาพและออบเจ็กต์รูปภาพ วิดีโอ หรือ Canvas ที่ใช้กันโดยทั่วไปส่วนใหญ่จะ รองรับ สำหรับเสียง รองรับเฉพาะ AudioBuffer แบบช่องเดียวและ URL ไฟล์เสียงแบบช่องเดียวเท่านั้น ดูรายละเอียดเพิ่มเติมได้โดยการเรียกดูซอร์สโค้ด

แอปพลิเคชันตัวอย่าง

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

โคลนที่เก็บ Git โดยใช้คำสั่งต่อไปนี้

git clone https://github.com/google-ai-edge/mediapipe-samples

ดูข้อมูลเพิ่มเติมได้ที่คู่มือการตั้งค่าสำหรับ เว็บ

ตัวเลือกการกำหนดค่า

ใช้ตัวเลือกการกำหนดค่าต่อไปนี้เพื่อตั้งค่าเว็บแอป

ชื่อตัวเลือก	คำอธิบาย	ช่วงค่า	ค่าเริ่มต้น
`modelPath`	เส้นทางไปยังตำแหน่งที่จัดเก็บโมเดลภายในไดเรกทอรีโปรเจ็กต์	เส้นทาง	ไม่มี
`maxTokens`	จำนวนโทเค็นสูงสุด (โทเค็นอินพุต + โทเค็นเอาต์พุต) ที่โมเดลจัดการ	จำนวนเต็ม	512
`topK`	จำนวนโทเค็นที่โมเดลพิจารณาในแต่ละขั้นตอนของการสร้าง จำกัดการคาดการณ์ไว้ที่โทเค็นที่มีแนวโน้มมากที่สุด k อันดับแรก	จำนวนเต็ม	40
`temperature`	ระดับความสุ่มที่ใช้ระหว่างการสร้าง อุณหภูมิที่สูงขึ้นจะทำให้ข้อความที่สร้างขึ้นมีความคิดสร้างสรรค์มากขึ้น ขณะที่อุณหภูมิที่ต่ำลงจะทำให้การสร้างข้อความคาดการณ์ได้มากขึ้น	ทศนิยม	0.8
`randomSeed`	ค่าเริ่มต้นแบบสุ่มที่ใช้ระหว่างการสร้างข้อความ	จำนวนเต็ม	0
`loraRanks`	อันดับ LoRA ที่โมเดล LoRA จะใช้ในระหว่างรันไทม์ หมายเหตุ: ใช้ได้กับรุ่น GPU เท่านั้น	อาร์เรย์จำนวนเต็ม	ไม่มี

การแปลงโมเดล

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

โมเดล	วิธีการ Conversion	แพลตฟอร์มที่รองรับ	ประเภทไฟล์
Gemma-3 1B	ไม่จำเป็นต้องแปลง	Android, เว็บ	.task
Gemma 2B, Gemma 7B, Gemma-2 2B	ไม่จำเป็นต้องแปลง	Android, iOS, เว็บ	.bin
Phi-2, StableLM, Falcon	สคริปต์การแปลง MediaPipe	Android, iOS, เว็บ	.bin
โมเดล LLM ของ PyTorch ทั้งหมด	ไลบรารีการสร้าง AI Edge Torch	Android, iOS	.task

ดูวิธีแปลงโมเดลอื่นๆ ได้ในส่วนการแปลงโมเดล

การปรับแต่ง LoRA

LLM Inference API รองรับการปรับแต่ง LoRA (Low-Rank Adaptation) โดยใช้ไลบรารี PEFT (Parameter-Efficient Fine-Tuning) การปรับแต่ง LoRA จะปรับแต่งลักษณะการทำงานของ LLM ผ่านกระบวนการฝึกที่มีต้นทุนต่ำ โดยสร้างชุดน้ำหนักที่ฝึกได้ขนาดเล็กตามข้อมูลการฝึกใหม่แทนที่จะฝึกโมเดลทั้งหมดอีกครั้ง

LLM Inference API รองรับการเพิ่มน้ำหนัก LoRA ลงในเลเยอร์ความสนใจของโมเดล Gemma-2 2B, Gemma 2B และ Phi-2 ดาวน์โหลดโมเดลในรูปแบบ safetensors

โมเดลพื้นฐานต้องอยู่ในรูปแบบ safetensors เพื่อสร้างน้ำหนัก LoRA หลังจากการฝึก LoRA คุณจะแปลงโมเดลเป็นรูปแบบ FlatBuffers เพื่อเรียกใช้ใน MediaPipe ได้

เตรียมน้ำหนัก LoRA

ใช้คู่มือวิธีการ LoRA จาก PEFT เพื่อฝึกโมเดล LoRA ที่ปรับแต่งแล้วในชุดข้อมูลของคุณเอง

LLM Inference API รองรับเฉพาะ LoRA ในเลเยอร์ความสนใจ ดังนั้นให้ระบุเฉพาะเลเยอร์ความสนใจใน LoraConfig ดังนี้

# For Gemma
from peft import LoraConfig
config = LoraConfig(
    r=LORA_RANK,
    target_modules=["q_proj", "v_proj", "k_proj", "o_proj"],
)

# For Phi-2
config = LoraConfig(
    r=LORA_RANK,
    target_modules=["q_proj", "v_proj", "k_proj", "dense"],
)

หลังจากฝึกในชุดข้อมูลที่เตรียมไว้และบันทึกโมเดลแล้ว น้ำหนักของโมเดล LoRA ที่ปรับแต่งแล้วจะพร้อมใช้งานใน adapter_model.safetensors safetensors คือจุดตรวจสอบ LoRA ที่ใช้ในระหว่างการแปลงโมเดล

การแปลงโมเดล

ใช้แพ็กเกจ Python ของ MediaPipe เพื่อแปลงน้ำหนักของโมเดลเป็นรูปแบบ Flatbuffer ConversionConfig ระบุตัวเลือกโมเดลพื้นฐานพร้อมกับตัวเลือก LoRA เพิ่มเติม

import mediapipe as mp
from mediapipe.tasks.python.genai import converter

config = converter.ConversionConfig(
  # Other params related to base model
  ...
  # Must use gpu backend for LoRA conversion
  backend='gpu',
  # LoRA related params
  lora_ckpt=LORA_CKPT,
  lora_rank=LORA_RANK,
  lora_output_tflite_file=LORA_OUTPUT_FILE,
)

converter.convert_checkpoint(config)

ตัวแปลงจะสร้างไฟล์ที่เข้ากันได้กับ MediaPipe 2 ไฟล์ ไฟล์หนึ่งสำหรับโมเดลพื้นฐาน และอีกไฟล์หนึ่งสำหรับโมเดล LoRA

การอนุมานโมเดล LoRA

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

const genai = await FilesetResolver.forGenAiTasks(
    // path/to/wasm/root
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai@latest/wasm"
);
const llmInference = await LlmInference.createFromOptions(genai, {
    // options for the base model
    ...
    // LoRA ranks to be used by the LoRA models during runtime
    loraRanks: [4, 8, 16]
});

โหลดโมเดล LoRA ในระหว่างรันไทม์หลังจากเริ่มต้นโมเดลพื้นฐาน ทริกเกอร์ โมเดล LoRA โดยส่งการอ้างอิงโมเดลเมื่อสร้างคำตอบ LLM

// Load several LoRA models. The returned LoRA model reference is used to specify
// which LoRA model to be used for inference.
loraModelRank4 = await llmInference.loadLoraModel(loraModelRank4Url);
loraModelRank8 = await llmInference.loadLoraModel(loraModelRank8Url);

// Specify LoRA model to be used during inference
llmInference.generateResponse(
  inputPrompt,
  loraModelRank4,
  (partialResult, done) => {
        document.getElementById('output').textContent += partialResult;
});