Trong hướng dẫn này, bạn sẽ chạy một ứng dụng web mẫu sử dụng TensorFlow.js để thực hiện tìm nạp trước tài nguyên mang tính dự đoán. Được xây dựng bằng Angular , ví dụ này được lấy cảm hứng từ Google Merchandise Store nhưng không chia sẻ bất kỳ dữ liệu hoặc chi tiết triển khai nào với nó.
Ví dụ này sử dụng mô hình được đào tạo trước để đưa ra dự đoán. Trong tình huống thực tế, bạn sẽ cần đào tạo một mô hình bằng cách sử dụng số liệu phân tích từ trang web của mình. Bạn có thể sử dụng TFX để thực hiện đào tạo như vậy. Để tìm hiểu thêm về cách đào tạo mô hình tùy chỉnh cho tìm nạp trước dự đoán, hãy xem bài đăng trên blog này .
Mã ví dụ có sẵn trên GitHub .
Điều kiện tiên quyết
Để hoàn thành hướng dẫn này, bạn cần cài đặt những thứ sau trong môi trường phát triển của mình:
Cài đặt ví dụ
Lấy mã nguồn và cài đặt các phụ thuộc:
- Sao chép hoặc tải xuống kho lưu trữ
tfjs-examples. Thay đổi vào thư mục
angular-predictive-prefetching/clientvà cài đặt các phần phụ thuộc:cd tfjs-examples/angular-predictive-prefetching/client && yarnThay đổi vào thư mục
angular-predictive-prefetching/servervà cài đặt các phần phụ thuộc:cd ../server && yarn
Chạy ví dụ
Khởi động cả máy chủ và máy khách:
Khởi động máy chủ: Trong thư mục
server, chạyyarn start.Khởi động máy khách:
- Mở một cửa sổ terminal khác.
- Thay đổi thành
tfjs-examples/angular-predictive-prefetching/client. Chạy các lệnh sau:
yarn build cd dist/merch-store npx serve -s .Bạn có thể được nhắc cài đặt gói phục vụ . Nếu vậy, hãy nhập y để cài đặt gói.
Điều hướng đến
http://localhost:3000trong trình duyệt của bạn. Bạn sẽ thấy một cửa hàng bán hàng hóa mô phỏng của Google.
Khám phá với DevTools
Sử dụng Chrome DevTools để xem hoạt động tìm nạp trước:
- Mở DevTools và chọn Console .
Điều hướng đến một số trang khác nhau trong ứng dụng để khởi động ứng dụng. Sau đó chọn Bán ở điều hướng bên trái. Bạn sẽ thấy đầu ra nhật ký như thế này:
Navigating from: 'sale' 'quickview' -> 0.381757915019989 'apparel-unisex' -> 0.3150934875011444 'store.html' -> 0.1957530975341797 '' -> 0.052346792072057724 'signin.html' -> 0.0007763378671370447Đầu ra này hiển thị các dự đoán cho trang mà bạn (người dùng) sẽ truy cập tiếp theo. Ứng dụng tìm nạp tài nguyên dựa trên những dự đoán này.
Để xem các yêu cầu tìm nạp, hãy chọn Mạng . Đầu ra hơi ồn một chút, nhưng bạn sẽ có thể tìm thấy các yêu cầu về tài nguyên cho các trang được dự đoán. Ví dụ: sau khi dự đoán
quickview, ứng dụng sẽ đưa ra yêu cầu tớihttp://localhost:8000/api/merch/quickview.
Cách hoạt động của tính năng tìm nạp trước mang tính dự đoán
Ứng dụng ví dụ sử dụng mô hình được đào tạo trước để dự đoán trang mà người dùng sẽ truy cập tiếp theo. Khi người dùng điều hướng đến một trang mới, ứng dụng sẽ truy vấn mô hình và sau đó tìm nạp trước hình ảnh liên quan đến các trang được dự đoán.
Ứng dụng thực hiện tìm nạp trước dự đoán trên một nhân viên dịch vụ để ứng dụng có thể truy vấn mô hình mà không chặn luồng chính. Dựa trên lịch sử điều hướng của người dùng, nhân viên dịch vụ đưa ra dự đoán cho việc điều hướng trong tương lai và tìm nạp trước hình ảnh sản phẩm có liên quan.
Nhân viên dịch vụ được tải trong tệp chính của ứng dụng Angular, main.ts :
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/prefetch.service-worker.js', { scope: '/' });
}
Đoạn mã ở trên tải xuống tập lệnh prefetch.service-worker.js và chạy nó ở chế độ nền.
Trong merch-display.comComponent.ts , ứng dụng sẽ chuyển tiếp các sự kiện điều hướng đến nhân viên dịch vụ:
this.route.params.subscribe((routeParams) => {
this.getMerch(routeParams.category);
if (this._serviceWorker) {
this._serviceWorker.postMessage({ page: routeParams.category });
}
});
Trong đoạn mã trên, ứng dụng sẽ theo dõi những thay đổi đối với các tham số của URL. Khi thay đổi, tập lệnh sẽ chuyển tiếp danh mục của trang tới nhân viên dịch vụ.
Tập lệnh của nhân viên dịch vụ, prefetch.service-worker.js , xử lý các tin nhắn từ luồng chính, đưa ra dự đoán dựa trên chúng và tìm nạp trước các tài nguyên có liên quan.
Nhân viên dịch vụ sử dụng loadGraphModel để tải mô hình được đào tạo trước :
const MODEL_URL = "/assets/model.json";
let model = null;
tf.loadGraphModel(MODEL_URL).then((m) => (model = m));
Dự đoán xảy ra trong biểu thức hàm sau:
const predict = async (path, userId) => {
if (!model) {
return;
}
const page = pages.indexOf(path);
const pageId = tf.tensor1d([parseInt(page)], "int32");
const sessionIndex = tf.tensor1d([parseInt(userId)], "int32");
const result = model.predict({
cur_page: pageId,
session_index: sessionIndex,
});
const values = result.dataSync();
const orders = sortWithIndices(values).slice(0, 5);
return orders;
};
Hàm predict sau đó được gọi bởi hàm tìm nạp trước :
const prefetch = async (path, sessionId) => {
const predictions = await predict(path, sessionId);
const formattedPredictions = predictions
.map(([a, b]) => `'${b}' -> ${a}`)
.join("\n");
console.log(`Navigating from: '${path}'`);
console.log(formattedPredictions);
const connectionSpeed = navigator.connection.effectiveType;
const threshold = connectionSpeeds[connectionSpeed];
const cache = await caches.open(ImageCache);
predictions.forEach(async ([probability, category]) => {
if (probability >= threshold) {
const merchs = (await getMerchList(category)).map(getUrl);
[...new Set(merchs)].forEach((url) => {
const request = new Request(url, {
mode: "no-cors",
});
fetch(request).then((response) => cache.put(request, response));
});
}
});
};
Đầu tiên, prefetch dự đoán các trang mà người dùng có thể truy cập tiếp theo. Sau đó, nó lặp lại các dự đoán. Đối với mỗi dự đoán, nếu xác suất vượt quá một ngưỡng nhất định dựa trên tốc độ kết nối thì hàm sẽ tìm nạp tài nguyên cho trang được dự đoán. Bằng cách tìm nạp các tài nguyên này trước yêu cầu trang tiếp theo, ứng dụng có thể phân phát nội dung nhanh hơn và cung cấp trải nghiệm người dùng tốt hơn.
Cái gì tiếp theo
Trong hướng dẫn này, ứng dụng ví dụ sử dụng mô hình được đào tạo trước để đưa ra dự đoán. Bạn có thể sử dụng TFX để đào tạo mô hình tìm nạp trước mang tính dự đoán. Để tìm hiểu thêm, hãy xem Tăng tốc trang web của bạn bằng tính năng tìm nạp trước trang web bằng Machine Learning .