Trang này được dịch bởi Cloud Translation API.

Thông báo cho người dùng về việc tải mô hình xuống

Thomas Steiner

Ngày xuất bản: 1 tháng 10 năm 2025

Trước khi có thể sử dụng bất kỳ API AI tích hợp nào, bạn phải tải mô hình cơ bản và mọi hoạt động tuỳ chỉnh (chẳng hạn như tinh chỉnh) xuống từ mạng, trích xuất dữ liệu nén và cuối cùng là tải vào bộ nhớ. Hướng dẫn này trình bày một số phương pháp hay nhất để cải thiện trải nghiệm người dùng trong khi họ chờ tải xuống.

Theo dõi và chia sẻ tiến trình tải xuống

Mọi API AI tích hợp đều có hàm create() để bắt đầu một phiên. Hàm create() có một lựa chọn monitor để bạn có thể truy cập vào tiến trình tải xuống để chia sẻ với người dùng.

Mặc dù các API AI tích hợp được tạo cho AI phía máy khách, nơi dữ liệu được xử lý trong trình duyệt và trên thiết bị của người dùng, nhưng một số ứng dụng có thể cho phép xử lý dữ liệu trên máy chủ. Cách bạn giải quyết vấn đề này cho người dùng trong quá trình tải mô hình xuống phụ thuộc vào câu hỏi đó: việc xử lý dữ liệu có phải chỉ chạy cục bộ hay không? Nếu điều này đúng, thì ứng dụng của bạn chỉ có phía máy khách. Nếu không, ứng dụng của bạn có thể sử dụng chế độ triển khai kết hợp.

Chỉ phía máy khách

Trong một số trường hợp, bạn cần xử lý dữ liệu phía máy khách. Ví dụ: một ứng dụng chăm sóc sức khoẻ cho phép bệnh nhân đặt câu hỏi về thông tin cá nhân của họ có thể muốn thông tin đó vẫn ở chế độ riêng tư trên thiết bị của người dùng. Người dùng phải đợi cho đến khi mô hình và tất cả các chế độ tuỳ chỉnh được tải xuống và sẵn sàng thì mới có thể sử dụng bất kỳ tính năng xử lý dữ liệu nào.

Trong trường hợp này, nếu mô hình chưa có sẵn, bạn nên cho người dùng biết thông tin về tiến trình tải xuống.

<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>

Trong khi mô hình tích hợp đang tải xuống, bạn chưa thể dùng ứng dụng.

Để làm cho chức năng này hoạt động, bạn cần có một chút JavaScript. Đầu tiên, mã sẽ đặt lại giao diện tiến trình về trạng thái ban đầu (ẩn và bằng 0), kiểm tra xem API có được hỗ trợ hay không, sau đó kiểm tra trạng thái sẵn có của API:

API là 'unavailable': Bạn không thể sử dụng ứng dụng phía máy khách trên thiết bị này. Cảnh báo cho người dùng rằng tính năng này không dùng được.
API là 'available': Bạn có thể sử dụng API này ngay mà không cần hiển thị giao diện người dùng tiến trình.
API là 'downloadable' hoặc 'downloading': Bạn có thể sử dụng API này sau khi quá trình tải xuống hoàn tất. Hiện chỉ báo tiến trình và cập nhật chỉ báo này bất cứ khi nào sự kiện downloadprogress kích hoạt. Sau khi tải xuống, hãy cho người dùng thấy trạng thái không xác định để báo hiệu rằng trình duyệt đang trích xuất và tải mô hình vào bộ nhớ.

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

Nếu người dùng truy cập vào ứng dụng trong khi mô hình đang được tải xuống trình duyệt, thì giao diện tiến trình sẽ cho biết trình duyệt đang ở bước nào trong quy trình tải xuống dựa trên dữ liệu vẫn còn thiếu.

Hãy xem bản minh hoạ cho thấy quy trình này đang hoạt động. Nếu không có API AI tích hợp (trong ví dụ này là Prompt API), thì không thể sử dụng ứng dụng. Nếu người dùng vẫn cần tải mô hình AI tích hợp xuống, thì họ sẽ thấy một chỉ báo tiến trình. Bạn có thể xem mã nguồn trên GitHub.

Triển khai kết hợp

Nếu muốn sử dụng AI phía máy khách nhưng có thể tạm thời gửi dữ liệu lên đám mây, bạn có thể thiết lập một chế độ triển khai kết hợp. Điều này có nghĩa là người dùng có thể trải nghiệm các tính năng ngay lập tức, đồng thời tải mô hình cục bộ xuống. Sau khi tải mô hình xuống, hãy chuyển đổi linh hoạt sang phiên cục bộ.

Bạn có thể sử dụng mọi hoạt động triển khai phía máy chủ cho mô hình kết hợp, nhưng có lẽ tốt nhất là bạn nên sử dụng cùng một họ mô hình ở cả đám mây và cục bộ để đảm bảo bạn nhận được chất lượng kết quả tương đương. Làm quen với Gemini API và Các ứng dụng trên web nêu bật nhiều phương pháp cho Gemini API.

Trong khi mô hình tích hợp đang tải xuống, ứng dụng sẽ quay lại mô hình đám mây và đã có thể sử dụng.

Bản minh hoạ cho thấy quy trình này đang hoạt động. Nếu không có AI API tích hợp, bản minh hoạ sẽ quay lại Gemini API trên đám mây. Nếu vẫn cần tải mô hình tích hợp xuống, thì chỉ báo tiến trình sẽ xuất hiện với người dùng và ứng dụng sẽ sử dụng Gemini API trên đám mây cho đến khi mô hình được tải xuống. Hãy xem toàn bộ mã nguồn trên GitHub.

Kết luận

Ứng dụng của bạn thuộc danh mục nào? Bạn có yêu cầu xử lý 100% phía ứng dụng hay có thể sử dụng phương pháp kết hợp? Sau khi bạn trả lời câu hỏi này, bước tiếp theo là triển khai chiến lược tải mô hình xuống phù hợp nhất với bạn.

Hãy đảm bảo người dùng luôn biết thời điểm và liệu họ có thể sử dụng phía máy khách của ứng dụng hay không bằng cách cho họ thấy tiến trình tải mô hình xuống như được nêu trong hướng dẫn này.

Hãy nhớ rằng đây không chỉ là một thử thách một lần: nếu trình duyệt xoá mô hình do áp lực lưu trữ hoặc khi có phiên bản mô hình mới, trình duyệt cần tải mô hình xuống lại. Cho dù bạn làm theo phương pháp phía máy khách hay phương pháp kết hợp, bạn đều có thể chắc chắn rằng mình sẽ tạo ra trải nghiệm tốt nhất có thể cho người dùng và để trình duyệt xử lý phần còn lại.