Spaces:
Running
Running
Update index.html
Browse files- index.html +56 -54
index.html
CHANGED
|
@@ -418,25 +418,25 @@
|
|
| 418 |
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 419 |
<div class="hero-grid">
|
| 420 |
<div>
|
| 421 |
-
<div class="slide-tag">Decode the Tech ·
|
| 422 |
<h1 class="hero">SIMPLE<br><span>INTERFACE.</span><br>HIDDEN SYSTEM.</h1>
|
| 423 |
<div class="divider"></div>
|
| 424 |
<p class="subtitle">Your Netflix homepage feels effortless. That feeling is the product. Behind it sits a layered machine learning system making hundreds of decisions before a single thumbnail loads.</p>
|
| 425 |
<div class="hero-badges" style="margin-top:1.6rem;">
|
| 426 |
<span class="badge badge-red">Machine Learning</span>
|
| 427 |
-
<span class="badge badge-
|
| 428 |
-
<span class="badge badge-
|
| 429 |
<span class="badge badge-red">Personalization at Scale</span>
|
| 430 |
-
<span class="badge badge-
|
| 431 |
</div>
|
| 432 |
<div class="intro-reveal" style="margin-top:1.5rem;">
|
| 433 |
-
<p>Netflix <strong>personalizes</strong> more than which titles you see — it personalizes which rows appear, how titles are ordered within those rows, and even which thumbnail represents the same show to different viewers. <strong>
|
| 434 |
</div>
|
| 435 |
</div>
|
| 436 |
<div class="hero-stats">
|
| 437 |
-
<div class="hero-stat"><div class="num">
|
| 438 |
-
<div class="hero-stat"><div class="num">
|
| 439 |
-
<div class="hero-stat"><div class="num">$
|
| 440 |
<div class="hero-stat"><div class="num">190+</div><div class="lbl">Countries · 60+ Languages</div></div>
|
| 441 |
</div>
|
| 442 |
</div>
|
|
@@ -510,16 +510,18 @@
|
|
| 510 |
<!-- ══════════════ SLIDE 3: WHY NETFLIX ══════════════ -->
|
| 511 |
<section class="slide" id="s3">
|
| 512 |
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 513 |
-
<div class="slide-tag">
|
| 514 |
<h2 class="sec">WHY NETFLIX<br><span>IS THE RIGHT EXAMPLE</span></h2>
|
| 515 |
-
<p class="subtitle">
|
| 516 |
<div class="why-grid">
|
| 517 |
-
<div class="why-card"><div class="why-icon">🔭</div><div class="why-title">
|
| 518 |
-
<div class="why-card"><div class="why-icon">🧩</div><div class="why-title">
|
| 519 |
-
<div class="why-card"><div class="why-icon">📚</div><div class="why-title">
|
| 520 |
-
<div class="why-card"><div class="why-icon">
|
| 521 |
-
<div class="why-card"><div class="why-icon">
|
| 522 |
-
<div class="why-card"><div class="why-icon">
|
|
|
|
|
|
|
| 523 |
</div>
|
| 524 |
</div>
|
| 525 |
</section>
|
|
@@ -530,56 +532,56 @@
|
|
| 530 |
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 531 |
<div class="slide-tag">Decode the Tech · Inputs to the System</div>
|
| 532 |
<h2 class="sec">WHAT GOES<br><span>INTO THE SYSTEM</span></h2>
|
| 533 |
-
<p class="subtitle">Netflix's recommendations are shaped by four categories of signals —
|
| 534 |
<div class="signals-layout">
|
| 535 |
<div>
|
| 536 |
<div class="signal-categories">
|
| 537 |
<div class="sig-cat">
|
| 538 |
-
<div class="sig-cat-label">
|
| 539 |
-
<div class="sig-cat-title">
|
| 540 |
-
<div class="sig-cat-items"><span>Watch history</span>, <span>completion rate</span>, <span>
|
| 541 |
</div>
|
| 542 |
<div class="sig-cat">
|
| 543 |
<div class="sig-cat-label">Collaborative</div>
|
| 544 |
<div class="sig-cat-title">Patterns from Similar Members</div>
|
| 545 |
-
<div class="sig-cat-items">What
|
| 546 |
</div>
|
| 547 |
<div class="sig-cat">
|
| 548 |
<div class="sig-cat-label">Content</div>
|
| 549 |
-
<div class="sig-cat-title">Title
|
| 550 |
-
<div class="sig-cat-items"><span>Genre</span>, <span>
|
| 551 |
</div>
|
| 552 |
<div class="sig-cat">
|
| 553 |
-
<div class="sig-cat-label">
|
| 554 |
-
<div class="sig-cat-title">When
|
| 555 |
-
<div class="sig-cat-items"><span>Device type</span>
|
| 556 |
</div>
|
| 557 |
</div>
|
| 558 |
<div class="not-used">
|
| 559 |
<div class="not-used-label">⚠ Not used in recommendations</div>
|
| 560 |
-
<div class="not-used-desc">According to Netflix's
|
| 561 |
</div>
|
| 562 |
</div>
|
| 563 |
<div class="signal-story">
|
| 564 |
-
<div class="ss-title">WHAT NETFLIX <span>INFERS</span><br>FROM YOUR
|
| 565 |
<div class="signal-scenario">
|
| 566 |
-
<div class="sc-action">You
|
| 567 |
-
<div class="sc-inference">
|
| 568 |
-
<div class="sc-tag">
|
| 569 |
</div>
|
| 570 |
<div class="signal-scenario">
|
| 571 |
-
<div class="sc-action">You
|
| 572 |
-
<div class="sc-inference">
|
| 573 |
-
<div class="sc-tag">IMPLICIT NEGATIVE
|
| 574 |
</div>
|
| 575 |
<div class="signal-scenario">
|
| 576 |
-
<div class="sc-action">You
|
| 577 |
-
<div class="sc-inference">
|
| 578 |
-
<div class="sc-tag">
|
| 579 |
</div>
|
| 580 |
</div>
|
| 581 |
<div class="signals-footer">
|
| 582 |
-
<strong>The key insight:</strong> Netflix
|
| 583 |
</div>
|
| 584 |
</div>
|
| 585 |
</div>
|
|
@@ -590,43 +592,43 @@
|
|
| 590 |
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 591 |
<div class="slide-tag">System Design · What the System Optimizes For</div>
|
| 592 |
<h2 class="sec">WHAT IS THE SYSTEM<br><span>ACTUALLY TRYING TO DO?</span></h2>
|
| 593 |
-
<p class="subtitle">Before
|
| 594 |
<div class="objectives-grid">
|
| 595 |
<div class="obj-card featured">
|
| 596 |
<div class="obj-icon">🎯</div>
|
| 597 |
<div class="obj-title">Relevance</div>
|
| 598 |
-
<div class="obj-desc">
|
| 599 |
-
<div class="obj-note">PRIMARY ·
|
| 600 |
</div>
|
| 601 |
<div class="obj-card featured">
|
| 602 |
<div class="obj-icon">⚡</div>
|
| 603 |
<div class="obj-title">Discovery Speed</div>
|
| 604 |
-
<div class="obj-desc">
|
| 605 |
-
<div class="obj-note">CRITICAL ·
|
| 606 |
</div>
|
| 607 |
<div class="obj-card">
|
| 608 |
<div class="obj-icon">🔄</div>
|
| 609 |
-
<div class="obj-title">Freshness and
|
| 610 |
-
<div class="obj-desc">
|
| 611 |
-
<div class="obj-note">
|
| 612 |
</div>
|
| 613 |
<div class="obj-card">
|
| 614 |
<div class="obj-icon">🌱</div>
|
| 615 |
-
<div class="obj-title">Long-Term
|
| 616 |
-
<div class="obj-desc">
|
| 617 |
-
<div class="obj-note">Beyond
|
| 618 |
</div>
|
| 619 |
</div>
|
| 620 |
<div class="explore-exploit">
|
| 621 |
-
<div class="ee-label">
|
| 622 |
<div class="ee-cols">
|
| 623 |
<div>
|
| 624 |
-
<div class="ee-col-title ee-exploit">⚡ Exploitation —
|
| 625 |
-
<div class="ee-desc">
|
| 626 |
</div>
|
| 627 |
<div>
|
| 628 |
-
<div class="ee-col-title ee-explore">🌱 Exploration —
|
| 629 |
-
<div class="ee-desc">
|
| 630 |
</div>
|
| 631 |
</div>
|
| 632 |
</div>
|
|
|
|
| 418 |
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 419 |
<div class="hero-grid">
|
| 420 |
<div>
|
| 421 |
+
<div class="slide-tag">Decode the Tech · Episode 4</div>
|
| 422 |
<h1 class="hero">SIMPLE<br><span>INTERFACE.</span><br>HIDDEN SYSTEM.</h1>
|
| 423 |
<div class="divider"></div>
|
| 424 |
<p class="subtitle">Your Netflix homepage feels effortless. That feeling is the product. Behind it sits a layered machine learning system making hundreds of decisions before a single thumbnail loads.</p>
|
| 425 |
<div class="hero-badges" style="margin-top:1.6rem;">
|
| 426 |
<span class="badge badge-red">Machine Learning</span>
|
| 427 |
+
<span class="badge badge-red">Behavioral Signals</span>
|
| 428 |
+
<span class="badge badge-red">Multi-Stage Ranking</span>
|
| 429 |
<span class="badge badge-red">Personalization at Scale</span>
|
| 430 |
+
<span class="badge badge-red">Representation Learning</span>
|
| 431 |
</div>
|
| 432 |
<div class="intro-reveal" style="margin-top:1.5rem;">
|
| 433 |
+
<p>Netflix <strong>personalizes</strong> more than which titles you see — it personalizes which rows appear, how titles are ordered within those rows, and even which thumbnail represents the same show to different viewers. <strong>A deep dive into the layered machine learning system behind a familiar interface.</strong></p>
|
| 434 |
</div>
|
| 435 |
</div>
|
| 436 |
<div class="hero-stats">
|
| 437 |
+
<div class="hero-stat"><div class="num">325M+</div><div class="lbl">Paid Memberships Worldwide</div></div>
|
| 438 |
+
<div class="hero-stat"><div class="num">80%+</div><div class="lbl">Viewing Discovered via Recommendations</div></div>
|
| 439 |
+
<div class="hero-stat"><div class="num">$45.2B</div><div class="lbl">Annual Revenue (FY2025)</div></div>
|
| 440 |
<div class="hero-stat"><div class="num">190+</div><div class="lbl">Countries · 60+ Languages</div></div>
|
| 441 |
</div>
|
| 442 |
</div>
|
|
|
|
| 510 |
<!-- ══════════════ SLIDE 3: WHY NETFLIX ══════════════ -->
|
| 511 |
<section class="slide" id="s3">
|
| 512 |
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 513 |
+
<div class="slide-tag">Why This System Matters</div>
|
| 514 |
<h2 class="sec">WHY NETFLIX<br><span>IS THE RIGHT EXAMPLE</span></h2>
|
| 515 |
+
<p class="subtitle">Recommendation is not a side feature here — it shapes discovery, presentation, ranking, and long-term retention across the entire product.</p>
|
| 516 |
<div class="why-grid">
|
| 517 |
+
<div class="why-card"><div class="why-icon">🔭</div><div class="why-title">Discovery at Catalog Scale</div><div class="why-desc">With an enormous catalog, browsing alone does not work. Recommendation is the product layer that makes the catalog navigable and watchable at all.</div><span class="why-metric">Discovery problem at scale</span></div>
|
| 518 |
+
<div class="why-card"><div class="why-icon">🧩</div><div class="why-title">Layered Personalization</div><div class="why-desc">Netflix personalizes rows, the titles inside those rows, their order, and even the visual representation of the same title for different members.</div><span class="why-metric">Rows · Titles · Artwork</span></div>
|
| 519 |
+
<div class="why-card"><div class="why-icon">📚</div><div class="why-title">Public Technical Material</div><div class="why-desc">Netflix has published unusually useful explanations across its Help Center, Tech Blog, and Research site, making the system easier to decode than most commercial recommenders.</div><span class="why-metric">Rare public visibility</span></div>
|
| 520 |
+
<div class="why-card"><div class="why-icon">⚙️</div><div class="why-title">Multiple Models, Not One</div><div class="why-desc">Netflix describes specialized recommendation models for different homepage surfaces and use cases, which makes it a better real-world example than a single ranked-list demo.</div><span class="why-metric">Production system complexity</span></div>
|
| 521 |
+
<div class="why-card"><div class="why-icon">🖼️</div><div class="why-title">Presentation Is Personalized Too</div><div class="why-desc">The system does not stop after choosing a title. It also chooses how that title is shown, including which artwork is most likely to attract the right viewer.</div><span class="why-metric">Recommendation beyond ranking</span></div>
|
| 522 |
+
<div class="why-card"><div class="why-icon">⏱️</div><div class="why-title">Latency Meets Personalization</div><div class="why-desc">Netflix must make all of these decisions fast enough for a homepage to feel instant, which turns recommendation into both an ML problem and a systems problem.</div><span class="why-metric">Millisecond serving constraints</span></div>
|
| 523 |
+
<div class="why-card"><div class="why-icon">🧪</div><div class="why-title">Experimentation Culture</div><div class="why-desc">Rows, ranking logic, and visual treatments are continuously evaluated, which makes the system a strong example of ML tied directly to product experimentation.</div><span class="why-metric">Measured product iteration</span></div>
|
| 524 |
+
<div class="why-card"><div class="why-icon">🚀</div><div class="why-title">Clear Evolution Path</div><div class="why-desc">Netflix gives a rare view of how recommenders evolve — from collaborative filtering era ideas to deep learning, contextual personalization, and foundation-model direction.</div><span class="why-metric">From Prize era to foundation models</span></div>
|
| 525 |
</div>
|
| 526 |
</div>
|
| 527 |
</section>
|
|
|
|
| 532 |
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 533 |
<div class="slide-tag">Decode the Tech · Inputs to the System</div>
|
| 534 |
<h2 class="sec">WHAT GOES<br><span>INTO THE SYSTEM</span></h2>
|
| 535 |
+
<p class="subtitle">Netflix's recommendations are shaped by four categories of signals — interaction, collaborative, content, and context. Its public explanation also states that demographic attributes like age and gender are not part of the recommendation decision.</p>
|
| 536 |
<div class="signals-layout">
|
| 537 |
<div>
|
| 538 |
<div class="signal-categories">
|
| 539 |
<div class="sig-cat">
|
| 540 |
+
<div class="sig-cat-label">Interaction</div>
|
| 541 |
+
<div class="sig-cat-title">What You Actually Do</div>
|
| 542 |
+
<div class="sig-cat-items"><span>Watch history</span>, <span>completion rate</span>, <span>rewatches</span>, <span>thumbs feedback</span>, <span>searches</span>, <span>browse clicks</span>, <span>watch duration</span>, <span>session-to-session recency</span></div>
|
| 543 |
</div>
|
| 544 |
<div class="sig-cat">
|
| 545 |
<div class="sig-cat-label">Collaborative</div>
|
| 546 |
<div class="sig-cat-title">Patterns from Similar Members</div>
|
| 547 |
+
<div class="sig-cat-items">What members with <span>similar taste patterns</span> watched, finished, replayed, or ignored — useful for recommending titles you have never seen before</div>
|
| 548 |
</div>
|
| 549 |
<div class="sig-cat">
|
| 550 |
<div class="sig-cat-label">Content</div>
|
| 551 |
+
<div class="sig-cat-title">What the Title Is</div>
|
| 552 |
+
<div class="sig-cat-items"><span>Genre</span>, <span>cast and creators</span>, <span>release year</span>, <span>language</span>, <span>maturity profile</span>, <span>format</span>, <span>metadata tags</span>, <span>learned title representations</span></div>
|
| 553 |
</div>
|
| 554 |
<div class="sig-cat">
|
| 555 |
+
<div class="sig-cat-label">Context</div>
|
| 556 |
+
<div class="sig-cat-title">When the Request Happens</div>
|
| 557 |
+
<div class="sig-cat-items"><span>Device type</span>, <span>time of day</span>, <span>member language</span>, <span>current session state</span>, <span>recent actions</span>, <span>request-time context</span></div>
|
| 558 |
</div>
|
| 559 |
</div>
|
| 560 |
<div class="not-used">
|
| 561 |
<div class="not-used-label">⚠ Not used in recommendations</div>
|
| 562 |
+
<div class="not-used-desc">According to Netflix's public explanation, <strong style="color:var(--text);">age and gender are not used as recommendation inputs.</strong> The emphasis is on behavior, title information, similar-member patterns, and viewing context.</div>
|
| 563 |
</div>
|
| 564 |
</div>
|
| 565 |
<div class="signal-story">
|
| 566 |
+
<div class="ss-title">WHAT NETFLIX <span>INFERS</span><br>FROM YOUR SIGNALS</div>
|
| 567 |
<div class="signal-scenario">
|
| 568 |
+
<div class="sc-action">You finish three tense crime episodes in one night</div>
|
| 569 |
+
<div class="sc-inference">The system infers short-term intent, high current appetite, and strong affinity for that viewing mode. Similar titles and rows gain weight in the next request.</div>
|
| 570 |
+
<div class="sc-tag">SESSION INTENT → RE-RANK</div>
|
| 571 |
</div>
|
| 572 |
<div class="signal-scenario">
|
| 573 |
+
<div class="sc-action">You stop a slow series early but fully finish fast-paced thrillers</div>
|
| 574 |
+
<div class="sc-inference">The model updates your profile away from slow-burn pacing and toward tighter, faster narrative patterns — even across unseen titles.</div>
|
| 575 |
+
<div class="sc-tag">IMPLICIT NEGATIVE + POSITIVE SIGNALS</div>
|
| 576 |
</div>
|
| 577 |
<div class="signal-scenario">
|
| 578 |
+
<div class="sc-action">You browse on phone at lunch and on TV at night</div>
|
| 579 |
+
<div class="sc-inference">Context changes the recommendation surface. The same member can receive different rows, orderings, and emphasis depending on device, time, and recent session behavior.</div>
|
| 580 |
+
<div class="sc-tag">REQUEST-TIME CONTEXT MATTERS</div>
|
| 581 |
</div>
|
| 582 |
</div>
|
| 583 |
<div class="signals-footer">
|
| 584 |
+
<strong>The key insight:</strong> Netflix learns from both explicit actions and implicit behavior. The system combines long-term taste, short-term session intent, title metadata, and request-time context to decide what to surface next.
|
| 585 |
</div>
|
| 586 |
</div>
|
| 587 |
</div>
|
|
|
|
| 592 |
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 593 |
<div class="slide-tag">System Design · What the System Optimizes For</div>
|
| 594 |
<h2 class="sec">WHAT IS THE SYSTEM<br><span>ACTUALLY TRYING TO DO?</span></h2>
|
| 595 |
+
<p class="subtitle">Before architecture, understand the objective function. A modern recommender does not optimize for clicks alone — it balances satisfaction, speed, freshness, and long-term value under product constraints.</p>
|
| 596 |
<div class="objectives-grid">
|
| 597 |
<div class="obj-card featured">
|
| 598 |
<div class="obj-icon">🎯</div>
|
| 599 |
<div class="obj-title">Relevance</div>
|
| 600 |
+
<div class="obj-desc">Match each member with titles they are genuinely likely to value, using interaction history, similar-member patterns, metadata, and learned representations instead of a single rule.</div>
|
| 601 |
+
<div class="obj-note">PRIMARY · Personalized utility estimation</div>
|
| 602 |
</div>
|
| 603 |
<div class="obj-card featured">
|
| 604 |
<div class="obj-icon">⚡</div>
|
| 605 |
<div class="obj-title">Discovery Speed</div>
|
| 606 |
+
<div class="obj-desc">Reduce time-to-first-play. A strong homepage gets members to a good decision quickly, so ranking, row ordering, and presentation all help compress search time.</div>
|
| 607 |
+
<div class="obj-note">CRITICAL · Lower decision friction</div>
|
| 608 |
</div>
|
| 609 |
<div class="obj-card">
|
| 610 |
<div class="obj-icon">🔄</div>
|
| 611 |
+
<div class="obj-title">Freshness and Adaptation</div>
|
| 612 |
+
<div class="obj-desc">The model should react quickly when a member's taste shifts. Recent actions, session intent, and request-time context help prevent stale recommendations from dominating the page.</div>
|
| 613 |
+
<div class="obj-note">Fast profile updates from new behavior</div>
|
| 614 |
</div>
|
| 615 |
<div class="obj-card">
|
| 616 |
<div class="obj-icon">🌱</div>
|
| 617 |
+
<div class="obj-title">Long-Term Satisfaction</div>
|
| 618 |
+
<div class="obj-desc">The best system is not the one that only gets the next click. It should broaden the member's useful catalog over time and improve the chance they return tomorrow, next week, and next month.</div>
|
| 619 |
+
<div class="obj-note">Beyond immediate engagement</div>
|
| 620 |
</div>
|
| 621 |
</div>
|
| 622 |
<div class="explore-exploit">
|
| 623 |
+
<div class="ee-label">Exploration vs. Exploitation</div>
|
| 624 |
<div class="ee-cols">
|
| 625 |
<div>
|
| 626 |
+
<div class="ee-col-title ee-exploit">⚡ Exploitation — Maximize near-term confidence</div>
|
| 627 |
+
<div class="ee-desc">Rank what the system already believes is most likely to work: familiar genres, reliable franchises, strong collaborative matches, and high-confidence titles for the current session.</div>
|
| 628 |
</div>
|
| 629 |
<div>
|
| 630 |
+
<div class="ee-col-title ee-explore">🌱 Exploration — Spend a few slots learning</div>
|
| 631 |
+
<div class="ee-desc">Reserve limited surface area for calculated bets: adjacent genres, less-exposed titles, new launches, or representation changes that teach the system something new about the member.</div>
|
| 632 |
</div>
|
| 633 |
</div>
|
| 634 |
</div>
|