Advanced Content Recommendations

Introduction to More Complex Content-Based Recommendations

In previous lessons, you learned about content-based recommendation systems and how they rely on user and item profiles. We covered how to extract content features such as likes, clicks, and genres, and how to compute similarities using straightforward methods like the dot product. This lesson will build on those foundations to guide you through a more complex example, using more advanced techniques for simulating user preferences and calculating genre similarities. We'll explore how to simulate user preferences, calculate genre similarities, and score songs based on those similarities, offering you a glimpse into the practical applications of these systems in real-world scenarios, such as music streaming services. We'll also introduce the basics of feature standardization and linear regression—two important concepts that will help you build more sophisticated recommendation models. Let's dive into this sophisticated example step by step.

Recap of Initial Setup

As a reminder from our previous lessons, let's quickly revisit how to load and merge datasets. In JavaScript, we typically represent data as arrays of objects. Suppose we have two datasets: one for tracks and one for authors. We can merge these datasets by matching a common key, such as author_id. Here's how you might do this in JavaScript: JavaScript// Example data for tracks and authors const tracks = [ { id: 1, title: "Song A", genre: "Rock", likes: 100, clicks: 300, full_listens: 90, author_id: 1 }, { id: 2, title: "Song B", genre: "Pop", likes: 150, clicks: 400, full_listens: 120, author_id: 2 }, { id: 3, title: "Song C", genre: "Jazz", likes: 80, clicks: 200, full_listens: 70, author_id: 3 } ]; const authors = [ { author_id: 1, name: "Artist X", author_listeners: 5000 }, { author_id: 2, name: "Artist Y", author_listeners: 7000 }, { author_id: 3, name: "Artist Z", author_listeners: 3000 } ]; // Merge tracks and authors by author_id const mergedTracks = tracks.map(track => { const author = authors.find(a => a.author_id === track.author_id); return { ...track, ...author }; }); console.log(mergedTracks); By merging the two arrays, we create a unified view of our music tracks, integrating both track details and author information, which will serve as a foundation for our recommendation system.

Simulating User Preferences

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Calculating Genre Similarities: Part 2

Now, let's build the code to calculate similarities between the user profile and songs. We'll use cosine similarity to measure how closely the user's genre preferences align with each track's genre.

First, let's define a function to calculate cosine similarity between two vectors. To ensure correctness and consistency with the practice section, we'll use a robust implementation:

JavaScript

// Function to calculate cosine similarity between two arrays
function cosineSimilarity(vecA, vecB) {
  let dot = 0, magA = 0, magB = 0;
  for (let i = 0; i < vecA.length; i++) {
    dot += vecA[i] * vecB[i];
    magA += vecA[i] * vecA[i];
    magB += vecB[i] * vecB[i];
  }
  if (magA === 0 || magB === 0) return 0;
  return dot / (Math.sqrt(magA) * Math.sqrt(magB));
}

Next, let's map each track's genre to its vector and create a user genre preference vector:

JavaScript

// Create user genre preference vector
const userGenrePreferences = [
  userProfile.rock_preference,
  userProfile.pop_preference,
  userProfile.jazz_preference
];

// Calculate similarity for each track and add it to the mergedTracks array
const tracksWithSimilarity = mergedTracks.map(track => {
  const trackGenreVector = genreMap[track.genre];
  const similarity = cosineSimilarity(trackGenreVector, userGenrePreferences);
  return { ...track, similarity };
});

console.log(tracksWithSimilarity);

What cosineSimilarity actually does (worked example)

Intuition: Think of each vector as an arrow from the origin. Cosine similarity is the cosine of the angle between these arrows. If they point in the same direction, the cosine is 1 (perfect match). If they are orthogonal (unrelated), the cosine is 0. With non-negative features like ours, values lie between 0 and 1.
Step-by-step with our user and one-hot genres:
- User preferences vector: U = [5, 4, 2] (Rock, Pop, Jazz)
- Rock track vector: R = [1, 0, 0]
- Pop track vector: P = [0, 1, 0]
- Jazz track vector: J = [0, 0, 1]
Compute once:
- Dot products with user:
  - U·R = 51 + 40 + 2*0 = 5
  - U·P = 50 + 41 + 2*0 = 4
  - U·J = 50 + 40 + 2*1 = 2
- Magnitudes:
  - |U| = sqrt(5^2 + 4^2 + 2^2) = sqrt(45) ≈ 6.708
  - |R| = |P| = |J| = 1
Cosine similarities:
- cos(U, R) = 5 / (6.708 * 1) ≈ 0.745
- cos(U, P) = 4 / 6.708 ≈ 0.596
- cos(U, J) = 2 / 6.708 ≈ 0.298
Interpretation:
- Rock is the best match for this user (0.745), then Pop (0.596), then Jazz (0.298).
- This matches the user's stated preferences while normalizing for overall activity level.

Worked Example: From Features to Weights

Below is a minimal end-to-end example that:

Builds a feature matrix from our tracks (including the cosine similarity we computed),
Standardizes each feature column,
Solves for weights using the pseudo-inverse,
Uses the weights to make a prediction.

JavaScript

import { Matrix } from 'ml-matrix';

// 1) Collect feature columns from the tracks (after we've computed similarities)
const likesCol = tracksWithSimilarity.map(t => t.likes);
const clicksCol = tracksWithSimilarity.map(t => t.clicks);
const fullListensCol = tracksWithSimilarity.map(t => t.full_listens);
const authorListenersCol = tracksWithSimilarity.map(t => t.author_listeners);
const similarityCol = tracksWithSimilarity.map(t => t.similarity);

// Helpers to get mean/std and to z-scale values (so we can transform new items later)
function mean(arr) {
  return arr.reduce((a, b) => a + b, 0) / arr.length;
}
function std(arr) {
  const m = mean(arr);
  return Math.sqrt(arr.reduce((a, b) => a + Math.pow(b - m, 2), 0) / arr.length);
}
function z(v, m, s) {
  return (v - m) / s;
}

// 2) Fit scaler (compute mean/std per column)
const stats = {
  likes: { m: mean(likesCol), s: std(likesCol) },
  clicks: { m: mean(clicksCol), s: std(clicksCol) },
  full: { m: mean(fullListensCol), s: std(fullListensCol) },
  author: { m: mean(authorListenersCol), s: std(authorListenersCol) },
  sim: { m: mean(similarityCol), s: std(similarityCol) },
};

// 3) Build standardized design matrix X with intercept column of 1s
const X = tracksWithSimilarity.map(t => ([
  1, // intercept
  z(t.likes, stats.likes.m, stats.likes.s),
  z(t.clicks, stats.clicks.m, stats.clicks.s),
  z(t.full_listens, stats.full.m, stats.full.s),
  z(t.author_listeners, stats.author.m, stats.author.s),
  z(t.similarity, stats.sim.m, stats.sim.s)
]));

// 4) Create a target vector y (e.g., user’s past ratings for these tracks)
// In practice, you’d collect these from user interactions (explicit ratings or a proxy).
const y = [4.5, 4.0, 3.2]; // example ratings aligned with the three tracks

// 5) Solve for weights using pseudo-inverse via ml-matrix
const Xmat = new Matrix(X);
const yMat = Matrix.columnVector(y);

const w = Xmat.pseudoInverse().mmul(yMat); // SVD-based pseudo-inverse

console.log('Weights (w):', w.to1DArray());

// 6) Use the weights to predict ratings
function predictRating(track, w, stats) {
  const row = [
    1,
    z(track.likes, stats.likes.m, stats.likes.s),
    z(track.clicks, stats.clicks.m, stats.clicks.s),
    z(track.full_listens, stats.full.m, stats.full.s),
    z(track.author_listeners, stats.author.m, stats.author.s),
    z(track.similarity, stats.sim.m, stats.sim.s)
  ];
  // dot product between row and weights
  let pred = 0;
  for (let i = 0; i < row.length; i++) {
    pred += row[i] * w.get(i, 0);
  }
  return pred;
}

// Example: predict for the first track (or any new track if you have its features)
const predicted = predictRating(tracksWithSimilarity[0], w, stats);
console.log('Predicted rating for first track:', predicted);

Note:

The pseudoInverse() method in ml-matrix uses SVD internally to compute the Moore-Penrose pseudo-inverse, which is robust even when the matrix is not square or is singular.
You do not need to call SVD directly or use a non-existent svd.inverse() method.

Introduction to More Complex Content-Based Recommendations

Recap of Initial Setup

Simulating User Preferences

Join the 1M+ learners on CodeSignal

Calculating Genre Similarities: Part 1

Calculating Genre Similarities: Part 2

Why Cosine Similarity Instead of Dot Product?

Feature Standardization (Scaling)

Introduction to Linear Regression for Recommendations

Solving Linear Regression with the Pseudo-Inverse

Worked Example: From Features to Weights

Terms explained in this example:

Summary and Preparation for Practice