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 terbaru di perangkat ke aplikasi Web Anda. Jika Anda menggunakan model Gemma-3n terbaru, input gambar dan audio juga didukung.

Untuk menambahkan LLM Inference API dengan cepat ke aplikasi Web Anda, 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 cara kerja tugas ini 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 yang kompatibel dengan WebGPU. Untuk mengetahui daftar lengkap browser yang kompatibel, lihat Kompatibilitas browser GPU.

Menambahkan dependensi

LLM Inference API menggunakan paket @mediapipe/tasks-genai.

Instal paket yang diperlukan untuk penyiapan 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 namanya 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 jelajahi halaman Komunitas HuggingFace kami, yang menawarkan beberapa varian Gemma 3 tambahan yang tidak tercakup dalam dokumentasi, tetapi 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

Lakukan 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 kode berikut:

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

Prompt multimodal

Untuk model Gemma-3n, API Web LLM Inference API mendukung perintah multimodal. Dengan mengaktifkan multimodalitas, pengguna dapat menyertakan kombinasi gambar, audio, dan teks yang berurutan dalam perintah mereka. Kemudian, LLM akan 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 dokumentasi Gemma-3n.

Untuk mengaktifkan dukungan visual, pastikan maxNumImages disetel ke nilai positif. Hal ini menentukan jumlah maksimum potongan gambar yang dapat diproses LLM dalam satu perintah.

Untuk mengaktifkan dukungan audio, pastikan supportAudio disetel 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 dibuat seperti sebelumnya, tetapi menggunakan array string, gambar, dan data audio yang berurutan:

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

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

Contoh aplikasi

Aplikasi contoh ini 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. Contoh kode dihosting di GitHub.

Clone 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 tempat model disimpan dalam direktori project. JALUR 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 teks yang lebih kreatif, sedangkan temperatur yang lebih rendah menghasilkan generasi 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: opsi 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 AI Edge 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, dengan 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 di-fine-tune pada 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 dilatih pada set data yang disiapkan dan model disimpan, bobot model LoRA yang di-fine-tune 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 mengganti berbagai model LoRA 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 menghasilkan 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;
});