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

คู่มือการสรุป 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`}

เริ่มต้นใช้งาน Task

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

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([
  '<start_of_turn>user\n',
  'Describe ',
  {imageSource: '/assets/test_image.png'},
  ' and then transcribe ',
  {audioSource: '/assets/test_audio.wav'},
  '<end_of_turn>\n<start_of_turn>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	ไลบรารีการสร้าง LiteRT 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;
});