Memperkenalkan Google AI Edge Portal: Lakukan benchmark Edge AI dalam skala besar. Daftar untuk meminta akses selama pratinjau pribadi.

Panduan Inferensi LLM untuk Web

LLM Inference API memungkinkan Anda menjalankan model bahasa besar (LLM) sepenuhnya di perangkat untuk aplikasi Web, yang dapat Anda gunakan untuk melakukan berbagai tugas, seperti membuat teks, mengambil informasi dalam bentuk bahasa alami, dan meringkas dokumen. Tugas ini menyediakan dukungan bawaan untuk beberapa model bahasa besar text-to-text, sehingga Anda dapat menerapkan model AI generatif di perangkat terbaru ke aplikasi Web. Jika Anda menggunakan model Gemma-3n terbaru, input gambar dan audio juga didukung.

Untuk menambahkan LLM Inference API ke aplikasi Web Anda dengan cepat, ikuti Panduan Memulai. Untuk contoh dasar aplikasi Web yang menjalankan LLM Inference API, lihat contoh aplikasi. Untuk pemahaman yang lebih mendalam tentang cara kerja LLM Inference API, lihat bagian opsi konfigurasi, konversi model, dan penyesuaian LoRA.

Anda dapat melihat tugas ini beraksi dengan demo MediaPipe Studio. Untuk mengetahui informasi selengkapnya tentang kemampuan, model, dan opsi konfigurasi tugas ini, lihat Ringkasan.

Panduan memulai

Gunakan langkah-langkah berikut untuk menambahkan LLM Inference API ke aplikasi Web Anda. LLM Inference API memerlukan browser web dengan kompatibilitas WebGPU. Untuk daftar lengkap browser yang kompatibel, lihat Kompatibilitas browser GPU.

Menambahkan dependensi

LLM Inference API uses the @mediapipe/tasks-genai package.

Instal paket yang diperlukan untuk penahapan lokal:

npm install @mediapipe/tasks-genai

Untuk men-deploy ke server, gunakan layanan jaringan penayangan konten (CDN) seperti jsDelivr untuk menambahkan kode langsung ke halaman HTML Anda:

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

Mendownload model

Download Gemma-3n E4B atau E2B dari HuggingFace. Model dengan "-Web" dalam nama dikonversi secara khusus untuk penggunaan web, jadi sebaiknya selalu gunakan salah satu model ini.

Untuk mengetahui informasi selengkapnya tentang model yang tersedia, lihat dokumentasi Model, atau telusuri halaman Komunitas HuggingFace kami, yang menawarkan Gemma 4 E2B dan E4B yang baru dirilis, serta beberapa varian Gemma 3 tambahan yang tidak dibahas dalam dokumentasi, tetapi semuanya telah dikonversi khusus untuk web, seperti 270M, 4B, 12B, 27B, dan MedGemma-27B-Text.

Simpan model dalam direktori project Anda:

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

Tentukan jalur model dengan parameter modelAssetPath objek baseOptions:

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

Menginisialisasi Tugas

Inisialisasi tugas dengan opsi konfigurasi dasar:

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
});

Menjalankan Tugas

Gunakan fungsi generateResponse() untuk memicu inferensi.

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

Untuk melakukan streaming respons, gunakan hal berikut:

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

Multimodal prompting

Untuk model Gemma-3n, LLM Inference API Web API mendukung multimodal prompting. Dengan multimodality yang diaktifkan, pengguna dapat menyertakan kombinasi gambar, audio, dan teks yang diurutkan dalam perintah mereka. LLM kemudian memberikan respons teks.

Untuk memulai, gunakan Gemma-3n E4B atau Gemma-3n E2B, dalam format yang kompatibel dengan MediaPipe dan Web. Untuk mengetahui informasi selengkapnya, lihat Gemma-3n dokumentasi.

Untuk mengaktifkan dukungan visi, pastikan maxNumImages ditetapkan ke nilai positif. Hal ini menentukan jumlah maksimum bagian gambar yang dapat diproses LLM dalam satu perintah.

Untuk mengaktifkan dukungan audio, pastikan supportAudio ditetapkan ke 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,
});

Respons kini dapat dihasilkan seperti sebelumnya, tetapi menggunakan array string, gambar, dan data audio yang diurutkan:

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',
]);

Untuk visi, URL gambar dan objek gambar, video, atau kanvas yang paling umum didukung. Untuk audio, hanya URL AudioBuffer satu saluran dan file audio satu saluran yang didukung. Detail selengkapnya dapat ditemukan dengan menelusuri kode sumber.

Contoh aplikasi

Contoh aplikasi adalah contoh aplikasi pembuatan teks dasar untuk Web, menggunakan LLM Inference API. Anda dapat menggunakan aplikasi ini sebagai titik awal untuk aplikasi Web Anda sendiri, atau merujuknya saat mengubah aplikasi yang ada. Kode contoh dihosting di GitHub.

Kloning repositori git menggunakan perintah berikut:

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

Untuk mengetahui informasi selengkapnya, lihat Panduan Penyiapan untuk Web.

Opsi konfigurasi

Gunakan opsi konfigurasi berikut untuk menyiapkan aplikasi Web:

Nama Opsi	Deskripsi	Rentang Nilai	Nilai Default
`modelPath`	Jalur ke tempat model disimpan dalam direktori project.	PATH	T/A
`maxTokens`	Jumlah maksimum token (token input + token output) yang ditangani model.	Bilangan bulat	512
`topK`	Jumlah token yang dipertimbangkan model pada setiap langkah pembuatan. Membatasi prediksi ke k token dengan probabilitas tertinggi.	Bilangan bulat	40
`temperature`	Jumlah keacakan yang diperkenalkan selama pembuatan. Temperatur yang lebih tinggi menghasilkan lebih banyak kreativitas dalam teks yang dibuat, sedangkan temperatur yang lebih rendah menghasilkan pembuatan yang lebih dapat diprediksi.	Float	0,8
`randomSeed`	Seed acak yang digunakan selama pembuatan teks.	Bilangan bulat	0
`loraRanks`	Peringkat LoRA yang akan digunakan oleh model LoRA selama runtime. Catatan: ini hanya kompatibel dengan model GPU.	Array bilangan bulat	T/A

Konversi model

LLM Inference API kompatibel dengan jenis model berikut, yang beberapa di antaranya memerlukan konversi model. Gunakan tabel untuk mengidentifikasi metode langkah yang diperlukan untuk model Anda.

Model	Metode konversi	Platform yang kompatibel	Jenis file
Gemma-3 1B	Tidak diperlukan konversi	Android, web	.task
Gemma 2B, Gemma 7B, Gemma-2 2B	Tidak diperlukan konversi	Android, iOS, web	.bin
Phi-2, StableLM, Falcon	Skrip konversi MediaPipe	Android, iOS, web	.bin
Semua model LLM PyTorch	Library Generatif LiteRT Torch	Android, iOS	.task

Untuk mempelajari cara mengonversi model lain, lihat bagian Konversi Model.

Penyesuaian LoRA

LLM Inference API mendukung penyesuaian LoRA (Low-Rank Adaptation) menggunakan library PEFT (Parameter-Efficient Fine-Tuning). Penyesuaian LoRA menyesuaikan perilaku LLM melalui proses pelatihan yang hemat biaya, membuat sekumpulan kecil bobot yang dapat dilatih berdasarkan data pelatihan baru, bukan melatih ulang seluruh model.

LLM Inference API mendukung penambahan bobot LoRA ke lapisan perhatian model Gemma-2 2B, Gemma 2B dan Phi-2. Download model dalam format safetensors.

Model dasar harus dalam format safetensors untuk membuat bobot LoRA. Setelah pelatihan LoRA, Anda dapat mengonversi model ke format FlatBuffers untuk dijalankan di MediaPipe.

Menyiapkan bobot LoRA

Gunakan panduan Metode LoRA dari PEFT untuk melatih model LoRA yang disesuaikan dengan set data Anda sendiri.

LLM Inference API hanya mendukung LoRA pada lapisan perhatian, jadi hanya tentukan lapisan perhatian di 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"],
)

Setelah pelatihan pada set data yang disiapkan dan menyimpan model, bobot model LoRA yang disesuaikan tersedia di adapter_model.safetensors. File safetensors adalah checkpoint LoRA yang digunakan selama konversi model.

Konversi model

Gunakan Paket Python MediaPipe untuk mengonversi bobot model ke format Flatbuffer. ConversionConfig menentukan opsi model dasar beserta opsi LoRA tambahan.

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)

Konverter akan menghasilkan dua file yang kompatibel dengan MediaPipe, satu untuk model dasar dan satu lagi untuk model LoRA.

Inferensi model LoRA

Web mendukung LoRA dinamis selama runtime, yang berarti pengguna mendeklarasikan peringkat LoRA selama inisialisasi. Artinya, Anda dapat menukar model LoRA yang berbeda selama runtime.

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]
});

Muat model LoRA selama runtime, setelah menginisialisasi model dasar. Picu model LoRA dengan meneruskan referensi model saat membuat respons 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;
});