Halaman ini diterjemahkan oleh Cloud Translation API.

Membuat chatbot lokal dan yang dapat digunakan secara offline dengan WebLLM

Dipublikasikan: 13 Januari 2024

Christian Liebel

Artikel ini adalah bagian kedua dari seri tiga bagian tentang LLM dan chatbot. Artikel sebelumnya membahas manfaat dan kekurangan LLM di perangkat dan di browser.

Setelah lebih memahami AI sisi klien, Anda siap menambahkan WebLLM ke aplikasi web daftar tugas. Anda dapat menemukan kode di cabang web-llm dari repositori GitHub.

WebLLM adalah runtime berbasis web untuk LLM yang disediakan oleh Kompilasi Machine Learning. Anda dapat mencoba WebLLM sebagai aplikasi mandiri. Aplikasi ini terinspirasi oleh aplikasi chat yang didukung cloud, seperti Gemini, tetapi inferensi LLM dijalankan di perangkat Anda, bukan di cloud. Perintah dan data Anda tidak pernah dikirim ke luar perangkat, dan Anda dapat yakin bahwa perintah dan data tersebut tidak digunakan untuk melatih model.

Untuk melakukan inferensi model di perangkat, WebLLM menggabungkan WebAssembly dan WebGPU. Meskipun WebAssembly memungkinkan penghitungan yang efisien pada unit pemrosesan terpusat (CPU), WebGPU memberi developer akses tingkat rendah ke unit pemrosesan grafis (GPU) perangkat.

Browser Support

Source

Menginstal WebLLM

WebLLM tersedia sebagai paket npm. Anda dapat menambahkan paket ini ke aplikasi daftar tugas dengan menjalankan npm install @mlc-ai/web-llm.

Pilih model

Selanjutnya, Anda perlu menentukan LLM yang akan dieksekusi secara lokal. Berbagai model tersedia.

Untuk memutuskan, Anda harus mengetahui istilah dan angka penting berikut:

Token: Unit teks terkecil yang dapat diproses LLM.
Jendela konteks: Jumlah maksimum token yang dapat diproses model.
Parameter atau bobot: Variabel internal yang dipelajari selama pelatihan, yang dihitung dalam miliaran.
Kuantisasi: Jumlah bit yang mewakili bobot. Semakin banyak bit berarti presisi yang lebih tinggi, tetapi juga penggunaan memori yang lebih tinggi.
Format bilangan floating point: Bilangan floating point 32-bit (presisi penuh, F32) menawarkan akurasi yang lebih baik, sedangkan bilangan floating point 16-bit (presisi setengah, F16) memiliki kecepatan yang lebih tinggi dan penggunaan memori yang lebih sedikit, tetapi memerlukan hardware yang kompatibel.

Istilah kunci ini cenderung menjadi bagian dari nama model. Misalnya, Llama-3.2-3B-Instruct-q4f32_1-MLC berisi informasi berikut:

Modelnya adalah LLaMa 3.2.
Model ini memiliki 3 miliar parameter.
Model ini disesuaikan untuk asisten gaya perintah dan petunjuk (Instruct).
Model ini menggunakan kuantisasi seragam (_1) 4-bit (q4).
Format ini memiliki bilangan floating point 32-bit presisi penuh.
Ini adalah versi khusus yang dibuat oleh Kompilasi Machine Learning.

Anda mungkin perlu menguji berbagai model untuk menentukan model mana yang sesuai dengan kasus penggunaan Anda.

Model dengan 3 miliar parameter dan 4 bit per parameter sudah dapat memiliki ukuran file sebesar 1,4 GB pada saat penulisan ini, yang harus didownload aplikasi ke perangkat pengguna sebelum digunakan pertama kali. Anda dapat menggunakan model 3B, tetapi dalam hal kemampuan terjemahan atau pengetahuan trivi, model 7B memberikan hasil yang lebih baik. Namun, dengan ukuran 3,3 GB dan lebih, ukurannya akan jauh lebih besar.

Untuk membuat mesin WebLLM dan memulai download model untuk chatbot daftar tugas, tambahkan kode berikut ke aplikasi Anda:

import {CreateMLCEngine} from '@mlc-ai/web-llm';
const engine = await CreateMLCEngine('Llama-3.2-3B-Instruct-q4f32_1-MLC', {
  initProgressCallback: ({progress}) =>  console.log(progress);
});

Metode CreateMLCEngine akan mengambil string model dan objek konfigurasi opsional. Dengan menggunakan metode initProgressCallback, Anda dapat membuat kueri progres download model untuk menampilkannya kepada pengguna saat mereka menunggu.

Cache API: Membuat LLM berjalan secara offline

Model didownload ke penyimpanan cache situs Anda. Cache API diperkenalkan bersama dengan Pekerja Layanan untuk membuat situs atau aplikasi web Anda berjalan secara offline. Ini adalah mekanisme penyimpanan terbaik untuk meng-cache model AI. Berbeda dengan cache HTTP, Cache API adalah cache yang dapat diprogram dan sepenuhnya berada di bawah kontrol developer.

Setelah didownload, WebLLM akan membaca file model dari Cache API, bukan memintanya melalui jaringan, sehingga WebLLM sepenuhnya dapat digunakan secara offline.

Seperti semua penyimpanan situs, cache diisolasi per origin. Artinya, dua origin, example.com dan example.net, tidak dapat berbagi penyimpanan yang sama. Jika kedua situs tersebut ingin menggunakan model yang sama, mereka harus mendownload model secara terpisah.

Anda dapat memeriksa cache menggunakan DevTools dengan membuka Aplikasi > Penyimpanan dan membuka Penyimpanan cache.

Menyiapkan percakapan

Model dapat diinisialisasi dengan serangkaian perintah awal. Biasanya, ada tiga peran pesan:

Perintah sistem: Perintah ini menentukan perilaku, peran, dan karakter model. Model ini juga dapat digunakan untuk grounding, yaitu memasukkan data kustom ke dalam model yang bukan bagian dari set pelatihannya (seperti data khusus domain Anda). Anda hanya dapat menentukan satu perintah sistem.
Perintah pengguna: Perintah yang dimasukkan oleh pengguna.
Perintah Asisten: Jawaban dari asisten, opsional.

Perintah pengguna dan asisten dapat digunakan untuk perintah N-shot dengan memberikan contoh bahasa alam kepada LLM tentang perilaku atau responsnya.

Berikut adalah contoh minimal untuk menyiapkan percakapan untuk aplikasi daftar tugas:

const messages = [
  { role: "system",
    content: `You are a helpful assistant. You will answer questions related to
    the user's to-do list. Decline all other requests not related to the user's
    todos. This is the to-do list in JSON: ${JSON.stringify(todos)}`
  },
  {role: "user", content: "How many open todos do I have?"}
];

Menjawab pertanyaan pertama Anda

Kemampuan penyelesaian chat diekspos sebagai properti pada mesin WebLLM yang dibuat sebelumnya (engine.chat.completions). Setelah model didownload, Anda dapat menjalankan inferensi model dengan memanggil metode create() pada properti ini. Untuk kasus penggunaan, Anda ingin melakukan streaming respons sehingga pengguna dapat mulai membaca saat respons dibuat, sehingga mengurangi waktu tunggu yang dirasakan:

const chunks = await engine.chat.completions.create({  messages,  stream: true, });

Metode ini menampilkan AsyncGenerator, subclass dari class AsyncIterator tersembunyi. Gunakan loop for await...of untuk menunggu potongan saat datang. Namun, respons hanya berisi token baru (delta), sehingga Anda harus menyusun balasan lengkap sendiri.

let reply = '';

for await (const chunk of chunks) {
  reply += chunk.choices[0]?.delta.content ?? '';
  console.log(reply);
}

Ternyata web selalu harus menangani respons streaming. Anda dapat menggunakan API seperti DOMImplementation untuk menggunakan respons streaming ini dan memperbarui HTML secara efisien.

Hasilnya murni berbasis string. Anda harus mengurainya terlebih dahulu jika ingin menafsirkannya sebagai JSON atau sebagai format file lainnya.

Namun, WebLLM memiliki beberapa batasan: Aplikasi perlu mendownload model yang besar sebelum penggunaan pertama, yang tidak dapat dibagikan di seluruh origin, sehingga aplikasi web lain mungkin harus mendownload model yang sama lagi. Meskipun WebGPU mencapai performa inferensi yang mendekati native, WebGPU tidak mencapai kecepatan native penuh.

Demo

Kekurangan ini diatasi oleh Prompt API, API eksplorasi yang diusulkan oleh Google yang juga berjalan di sisi klien, tetapi menggunakan model pusat yang didownload ke Chrome. Artinya, beberapa aplikasi dapat menggunakan model yang sama dengan kecepatan eksekusi penuh.

Baca selengkapnya tentang menambahkan kemampuan chatbot menggunakan Prompt API di artikel berikutnya.