UX Hyper-Personalization 2026: Xây Dựng Real-Time Adaptive Layouts Với AI Cho Dev Việt

// Khởi tạo bộ thu thập signals hành vi người dùng
const UserSignalCollector = (() => {
  const signals = {
    scrollDepth: 0,
    readingSpeed: 0,    // pixel/giây
    clickSequence: [],
    sessionStart: Date.now(),
    lastScrollY: 0,
    lastScrollTime: Date.now(),
  };

  // Throttle scroll để không fire quá nhiều
  const throttle = (fn, delay) => {
    let timer;
    return (...args) => {
      if (!timer) {
        timer = setTimeout(() => { fn(...args); timer = null; }, delay);
      }
    };
  };

  // Tính tốc độ đọc qua scroll speed
  const trackScroll = throttle(() => {
    const now = Date.now();
    const deltaY = window.scrollY - signals.lastScrollY;
    const deltaT = (now - signals.lastScrollTime) / 1000; // giây

    signals.scrollDepth = (window.scrollY + window.innerHeight)
      / document.body.scrollHeight;
    signals.readingSpeed = deltaT > 0 ? Math.abs(deltaY / deltaT) : 0;
    signals.lastScrollY = window.scrollY;
    signals.lastScrollTime = now;
  }, 100); // Chỉ fire mỗi 100ms

  // Ghi lại chuỗi click để detect pattern
  const trackClick = (e) => {
    const target = e.target.closest('[data-content-type]');
    if (!target) return;
    signals.clickSequence.push({
      type: target.dataset.contentType, // 'video' | 'text' | 'quiz'
      timestamp: Date.now() - signals.sessionStart,
    });
    // Giữ tối đa 20 clicks gần nhất
    if (signals.clickSequence.length > 20) signals.clickSequence.shift();
  };

  window.addEventListener('scroll', trackScroll, { passive: true });
  document.addEventListener('click', trackClick);

  // Xuất feature vector cho ML model
  return {
    getFeatures: () => [
      signals.scrollDepth,
      Math.min(signals.readingSpeed / 1000, 1), // normalize 0-1
      signals.clickSequence.filter(c => c.type === 'video').length / 20,
      signals.clickSequence.filter(c => c.type === 'text').length / 20,
      Math.min((Date.now() - signals.sessionStart) / 600000, 1), // max 10 phút
    ],
  };
})();

import * as tf from '@tensorflow/tfjs';

// Khởi tạo model layout preference
async function createLayoutModel() {
  // Model đơn giản: input 5 features -> output 3 layout weights
  const model = tf.sequential({
    layers: [
      tf.layers.dense({ units: 16, activation: 'relu', inputShape: [5] }),
      tf.layers.dropout({ rate: 0.2 }), // Tránh overfit
      tf.layers.dense({ units: 8, activation: 'relu' }),
      tf.layers.dense({ units: 3, activation: 'softmax' }), // 3 loại layout
    ]
  });

  model.compile({
    optimizer: tf.train.adam(0.001),
    loss: 'categoricalCrossentropy',
  });

  return model;
}

// Chạy inference và cập nhật layout
async function runPersonalization(model, userSignals) {
  const features = userSignals.getFeatures();

  // Wrap trong tf.tidy() để tự động giải phóng tensor - quan trọng!
  const layoutWeights = tf.tidy(() => {
    const input = tf.tensor2d([features]);
    const prediction = model.predict(input);
    return prediction.dataSync(); // [videoWeight, textWeight, quizWeight]
  });

  // Gọi update layout với weights mới
  applyAdaptiveLayout(layoutWeights);

  return layoutWeights;
}

// Áp dụng layout thích nghi dựa trên prediction weights
function applyAdaptiveLayout(weights) {
  // weights[0] = video content preference
  // weights[1] = text/article preference
  // weights[2] = trending/quiz preference

  const modules = {
    video: document.querySelector('.module-video'),
    article: document.querySelector('.module-articles'),
    trending: document.querySelector('.module-trending'),
  };

  // Reorder bằng CSS flex order
  const ranked = [
    { el: modules.video, weight: weights[0] },
    { el: modules.article, weight: weights[1] },
    { el: modules.trending, weight: weights[2] },
  ].sort((a, b) => b.weight - a.weight);

  // Module quan trọng nhất = order thấp nhất = hiển thị trên cùng
  ranked.forEach((item, index) => {
    if (!item.el) return;
    item.el.style.order = index;
    // Tăng kích thước cho module ưu tiên nhất
    item.el.style.flexBasis = index === 0 ? '100%' : '48%';
    // Transition mượt
    item.el.style.transition = 'all 0.3s ease';
  });
}

// Predictive recommendations: gợi ý bài tiếp theo
function generateRecommendations(weights, articlePool) {
  // articlePool: mảng bài viết với tags
  const scoredArticles = articlePool.map(article => ({
    ...article,
    score:
      article.hasVideo ? weights[0] * 2 : 0 +
      article.wordCount > 800 ? weights[1] * 1.5 : weights[1] +
      article.trending ? weights[2] * 2 : 0,
  }));

  return scoredArticles
    .sort((a, b) => b.score - a.score)
    .slice(0, 5); // Top 5 gợi ý
}

// Orchestrator: kết nối tất cả lại
async function initHyperPersonalization() {
  const model = await createLayoutModel();

  // Load weights đã train sẵn nếu có
  try {
    await model.loadWeights('path/to/pretrained-weights.bin');
  } catch (e) {
    console.log('Chạy với model khởi tạo ngẫu nhiên - sẽ học theo thời gian');
  }

  // Fire mỗi 500ms - đủ reactive, không quá tốn CPU
  const personalize = throttle(async () => {
    const weights = await runPersonalization(model, UserSignalCollector);
    const recs = generateRecommendations(weights, window.__articlePool || []);
    renderRecommendations(recs);
  }, 500);

  window.addEventListener('scroll', personalize, { passive: true });
  document.addEventListener('click', personalize);
}

document.addEventListener('DOMContentLoaded', initHyperPersonalization);

// Learning state tracker cho e-learning
const LearningStateTracker = {
  state: {
    completedLessons: new Set(),
    quizScores: {},       // lessonId -> score (0-100)
    videoWatchRatio: {},  // lessonId -> ratio xem được (0-1)
    strugglingConcepts: [], // concepts có quiz score < 60
  },

  // Cập nhật sau khi làm quiz
  recordQuiz(lessonId, score, concepts) {
    this.state.quizScores[lessonId] = score;
    if (score < 60) {
      concepts.forEach(c => {
        if (!this.state.strugglingConcepts.includes(c)) {
          this.state.strugglingConcepts.push(c);
        }
      });
    }
  },

  // Feature vector cho ML model
  getFeatures() {
    const avgScore = Object.values(this.state.quizScores);
    return [
      this.state.completedLessons.size / 100, // progress ratio
      avgScore.length > 0
        ? avgScore.reduce((a, b) => a + b, 0) / avgScore.length / 100
        : 0.5,                                // avg performance
      this.state.strugglingConcepts.length > 0 ? 1 : 0, // có đang vật lộn không
      Object.values(this.state.videoWatchRatio)
        .reduce((a, b) => a + b, 0) /
        Math.max(Object.keys(this.state.videoWatchRatio).length, 1), // video engagement
    ];
  },

  // Gợi ý bài học tiếp theo
  getNextLessonRecommendation(allLessons) {
    const features = this.getFeatures();
    const isStruggling = features[2] === 1;
    const avgPerformance = features[1];

    if (isStruggling) {
      // Ưu tiên review bài liên quan đến concept đang yếu
      return allLessons.filter(lesson =>
        lesson.concepts.some(c =>
          this.state.strugglingConcepts.includes(c)
        ) && !this.state.completedLessons.has(lesson.id)
      ).slice(0, 3);
    }

    if (avgPerformance > 0.8) {
      // Học tốt -> đẩy lên bài khó hơn
      return allLessons
        .filter(l => l.difficulty === 'hard' && !this.state.completedLessons.has(l.id))
        .slice(0, 3);
    }

    // Default: bài tiếp theo theo thứ tự
    return allLessons
      .filter(l => !this.state.completedLessons.has(l.id))
      .slice(0, 3);
  },
};

// Consent gate - bắt buộc trước khi bật personalization
async function requestPersonalizationConsent() {
  const hasConsent = localStorage.getItem('personalization_consent');
  if (hasConsent === 'true') return true;

  // Hiện dialog consent đơn giản
  const userConsent = await showConsentDialog({
    title: 'Cá nhân hóa trải nghiệm của bạn',
    description:
      'Chúng tôi phân tích hành vi đọc của bạn ngay trên thiết bị '
      + '(không gửi lên server) để gợi ý nội dung phù hợp hơn.',
    options: [
      { label: 'Đồng ý', value: true },
      { label: 'Không, cảm ơn', value: false },
    ],
  });

  localStorage.setItem('personalization_consent', String(userConsent));
  localStorage.setItem('personalization_consent_timestamp', Date.now());
  return userConsent;
}

// Chỉ khởi động personalization sau khi có consent
document.addEventListener('DOMContentLoaded', async () => {
  const canPersonalize = await requestPersonalizationConsent();
  if (canPersonalize) {
    initHyperPersonalization();
  }
});

// Lazy load TensorFlow.js - chỉ khi thật sự cần
async function lazyLoadPersonalization() {
  // Chờ trang render xong trước
  if (document.readyState !== 'complete') {
    await new Promise(resolve => window.addEventListener('load', resolve));
  }

  // Delay thêm 2 giây để không cạnh tranh với critical resources
  await new Promise(resolve => setTimeout(resolve, 2000));

  // Dynamic import - chỉ download khi cần
  const tf = await import('@tensorflow/tfjs');
  return tf;
}

// Offload inference sang Web Worker để không block main thread
const personalizationWorker = new Worker('/workers/personalization.worker.js');

personalizationWorker.onmessage = (e) => {
  const { layoutWeights } = e.data;
  applyAdaptiveLayout(layoutWeights); // Cập nhật DOM trên main thread
};

// Gửi features sang worker để xử lý
function requestPersonalization(features) {
  personalizationWorker.postMessage({ type: 'INFER', features });
}