Memberi tahu pengguna tentang download model

Thomas Steiner

Dipublikasikan: 1 Oktober 2025

Sebelum API AI bawaan dapat digunakan, model pokok dan penyesuaian apa pun (seperti penyesuaian) harus didownload dari jaringan, data yang dikompresi harus diekstrak, dan akhirnya dimuat ke dalam memori. Panduan ini mendokumentasikan beberapa praktik terbaik untuk meningkatkan pengalaman pengguna saat mereka menunggu download ini.

Memantau dan membagikan progres download

Setiap API AI bawaan memiliki fungsi create() untuk memulai sesi. Fungsi create() memiliki opsi monitor sehingga Anda dapat mengakses progres download untuk membagikannya kepada pengguna.

Meskipun API AI bawaan dibuat untuk AI sisi klien, yang memproses data di browser dan di perangkat pengguna, beberapa aplikasi dapat memungkinkan data diproses di server. Cara Anda menyapa pengguna dalam progres download model bergantung pada pertanyaan tersebut: apakah pemrosesan data harus dijalankan secara lokal saja atau tidak? Jika benar, aplikasi Anda hanya sisi klien. Jika tidak, aplikasi Anda dapat menggunakan implementasi hibrida.

Khusus sisi klien

Dalam beberapa skenario, pemrosesan data sisi klien diperlukan. Misalnya, aplikasi kesehatan yang memungkinkan pasien mengajukan pertanyaan tentang informasi pribadi mereka kemungkinan ingin informasi tersebut tetap bersifat pribadi di perangkat pengguna. Pengguna harus menunggu hingga model dan semua penyesuaian didownload dan siap sebelum dapat menggunakan fitur pemrosesan data.

Dalam hal ini, jika model belum tersedia, Anda harus menampilkan informasi progres download kepada pengguna.

<style>
  progress[hidden] ~ label {
    display: none;
  }
</style>

<button type="button">Create LanguageModel session</button>
<progress hidden id="progress" value="0"></progress>
<label for="progress">Model download progress</label>

Sekarang, agar berfungsi, diperlukan sedikit JavaScript. Kode ini pertama-tama mereset antarmuka progres ke status awal (progres tersembunyi dan nol), memeriksa apakah API didukung, lalu memeriksa ketersediaan API:

• API adalah 'unavailable': Aplikasi Anda tidak dapat digunakan di sisi klien di perangkat ini. Memberi tahu pengguna bahwa fitur tidak tersedia.
• API adalah 'available': API dapat digunakan segera, tidak perlu menampilkan UI progres.
• API adalah 'downloadable' atau 'downloading': API dapat digunakan setelah download selesai. Tampilkan indikator progres dan perbarui setiap kali peristiwa downloadprogress dipicu. Setelah download, tunjukkan status tidak ditentukan untuk memberi sinyal kepada pengguna bahwa browser sedang mengekstrak model dan memuatnya ke dalam memori.

const createButton = document.querySelector('.create');
const promptButton = document.querySelector('.prompt');
const progress = document.querySelector('progress');
const output = document.querySelector('output');

let sessionCreationTriggered = false;
let session = null;

const createSession = async (options = {}) => {
  if (sessionCreationTriggered) {
    return;
  }

  progress.hidden = true;
  progress.value = 0;

  try {
    if (!('LanguageModel' in self)) {
      throw new Error('LanguageModel is not supported.');
    }

    const availability = await LanguageModel.availability();
    if (availability === 'unavailable') {
      throw new Error('LanguageModel is not available.');
    }

    let modelNewlyDownloaded = false;
    if (availability !== 'available') {
      modelNewlyDownloaded = true;
      progress.hidden = false;
    }
    console.log(`LanguageModel is ${availability}.`);
    sessionCreationTriggered = true;

    const llmSession = await LanguageModel.create({
      monitor(m) {
        m.addEventListener('downloadprogress', (e) => {
          progress.value = e.loaded;
          if (modelNewlyDownloaded && e.loaded === 1) {
            // The model was newly downloaded and needs to be extracted
            // and loaded into memory, so show the undetermined state.
            progress.removeAttribute('value');
          }
        });
      },
      ...options,
    });

    sessionCreationTriggered = false;
    return llmSession;
  } catch (error) {
    throw error;
  } finally {
    progress.hidden = true;
    progress.value = 0;
  }
};

createButton.addEventListener('click', async () => {
  try {
    localSession = await createSession({
      expectedInputs: [{ type: 'text', languages: ['en'] }],
      expectedOutputs: [{ type: 'text', languages: ['en'] }],
    });
    promptButton.disabled = false;
  } catch (error) {
    output.textContent = error.message;
  }
});

promptButton.addEventListener('click', async () => {
  output.innerHTML = '';
  try {
    const stream = localSession.promptStreaming('Write me a poem');
    for await (const chunk of stream) {
      output.append(chunk);
    }
  } catch (err) {
    output.textContent = err.message;
  }
});

Jika pengguna membuka aplikasi saat model sedang aktif didownload ke browser, antarmuka progres akan menunjukkan posisi browser dalam proses download berdasarkan data yang masih belum ada.

Lihat demo yang menunjukkan alur ini. Jika API AI bawaan (dalam contoh ini, Prompt API) tidak tersedia, aplikasi tidak dapat digunakan. Jika model AI bawaan masih perlu didownload, indikator progres akan ditampilkan kepada pengguna. Anda dapat melihat kode sumber di GitHub.

Implementasi hybrid

Jika Anda lebih memilih menggunakan AI sisi klien, tetapi dapat mengirim data ke cloud untuk sementara, Anda dapat menyiapkan penerapan hybrid. Artinya, pengguna dapat langsung mencoba fitur sambil mendownload model lokal secara paralel. Setelah model didownload, beralihlah secara dinamis ke sesi lokal.

Anda dapat menggunakan implementasi sisi server apa pun untuk hybrid, tetapi sebaiknya gunakan keluarga model yang sama di cloud dan secara lokal untuk memastikan Anda mendapatkan kualitas hasil yang sebanding. Mulai menggunakan Gemini API dan Aplikasi web menyoroti berbagai pendekatan untuk Gemini API.

Demo menunjukkan alur ini dalam tindakan. Jika API AI bawaan tidak tersedia, demo akan menggunakan Gemini API di cloud. Jika model bawaan masih perlu didownload, indikator progres akan ditampilkan kepada pengguna dan aplikasi akan menggunakan Gemini API di cloud hingga model didownload. Lihat kode sumber lengkap di GitHub.

Kesimpulan

Aplikasi Anda termasuk dalam kategori apa? Apakah Anda memerlukan pemrosesan 100% sisi klien atau dapat menggunakan pendekatan hybrid? Setelah Anda menjawab pertanyaan ini, langkah selanjutnya adalah menerapkan strategi download model yang paling sesuai untuk Anda.

Pastikan pengguna selalu tahu kapan dan apakah mereka dapat menggunakan aplikasi Anda di sisi klien dengan menunjukkan progres download model kepada mereka seperti yang diuraikan dalam panduan ini.

Ingatlah bahwa ini bukan hanya tantangan satu kali: jika browser menghapus model karena tekanan penyimpanan atau saat versi model baru tersedia, browser perlu mendownload model lagi. Baik Anda mengikuti pendekatan sisi klien maupun hybrid, Anda dapat yakin bahwa Anda membangun pengalaman terbaik bagi pengguna, dan membiarkan browser menangani sisanya.