 Hello! This video walks through a simple demo of the Topics API. I'll show you how Topics inference and calculation works, and how to try out the Topics machine learning model. Now, if you haven't heard of it before, Topics is a privacy sandbox proposal to allow interest-based advertising without resorting to tracking the site's user visits. As a user visits websites, the browser on the user's device infers topics of interest. And to find out more, take a look at the topics overview on developer.chrome.com. And this video will make more sense if you have a basic knowledge of the Topics API, so if you don't know much about it, you might want to read that article first. Now, once you've done that, you can also learn more about how to experiment and participate. So, first up, I'll show you the Topics API in action. Now, I'm actually going to run through a few different things. The Topics taxonomy, a demo of the API, and then a quick peek at Chrome Topics internals, which can help with debugging and understanding how topics are inferred from host names. And finally, I'll take a closer look at the Topics model using the Topics Colab. So, the Topics API selects topics of interest to the user from an advertising taxonomy. Now, you can view that taxonomy on the repo for the Topics explainer. There are currently 349 topics and subtopics. As you may know, the goal is that the Topics taxonomy becomes a resource maintained by trusted contributors, incorporating feedback from across the industry. So, the Topics taxonomy is not a fixed list, and you know, it's going to evolve. We've built a very simple demo of the Topics API at topicsdemo.glitch.me. To access the demo, you'll need to run Chrome from the command line with flags. Now, the flags required for the demo are shown on the demo page. And the Topics article explains what the flags mean. For testing its scale, you should take part in the Privacy Sandbox origin trial. But for a single user, you can activate the APIs using flags. And I'll do that for the demo. Now, one obvious thing to suggest, you know, if you're regularly running a browser from the command line with flags, set an alias for the command and add that alias to your terminal RC file. The example here means I can run Chrome beta with flags to open the Topics demo using the command TB as a shortcut. I have similar shortcuts for Canary and Stable. So, let's see how that works. I'm opening Chrome beta with those command line flags from my terminal using the alias, just like I was mentioning. Now, let's take a look at the Chrome version page to check that Chrome is running with the flags we set, as expected. One thing to bear in mind is that Chrome flag settings can interfere with command line settings. Now, if you remember, I set the epoch length to 15 seconds with the flags. If you enable Privacy Sandbox adds APIs from Chrome flags, that can override that setting with the default, which is one week. So, it's worth checking your Chrome flag settings before you run Chrome from the command line. Anyway, all looks good here. So, let's take a look at the code for the demo, which is hosted on the Glitch platform. Now, you'll see in the Observe directory, there's a page that includes a JavaScript file that calls the method document.browsingtopics. This page will be in an iframe embedded on other sites to observe topics. So, let's go through the code. First up, we check if the API is supported and available. Now, I'll run these checks in the console, just so you can see the results. We also check permissions policy, and if the document object has permission to run the browsing topics method. Likewise, I'll show that in the console and show you the result. You should always do feature detection, of course, before attempting to access an experimental feature, but be aware that feature support doesn't guarantee that the feature is available. User settings or, you know, other factors may mean that a feature isn't available. Now, as you can see, this code calls document.browsingtopics, and calling that method causes the browser to record topics inferred for the hostname of the current top-level web page. So, for any page the user visits that includes this page in an iframe, the browser will record the topics it observes for the hostname of that page. Now, the return value of the method is a promise that resolves to an array of topics. So, let's go to a site that embeds this iframe. This is called cats-cats-cats-cats.glitch-me. You know, I know the domain name is a bit over the top, but just imagine that this is any site whose hostname tells the topics API something about potential topics of interest. Let's look at the page source. You can see from the code that this page embeds the iframe from topicsdemo.glitch.me. Now, if a user visits a site with a hostname with cats in it, well, you'd expect the topics API to select cats or, you know, something related to cats as a topic of interest. You can see examples of possible topics of interest in the taxonomy. So, just to reiterate, the code in the iframe causes the browser for each user on their device to record a topic observation for any site that embeds it. Now, we can view the demo home page to see how that looks over time. The page displays topics observed for the current user on sites that embed the iframe we just saw. Now, of course, in the real world, the topics of interest for the current user would be accessed in JavaScript, running in an adtech iframe as a signal to help select relevant ads. So, I'm going to have a look at the code in Chrome DevTools. First, let's see the HTML for the page. Now, as you can see, the page includes two JavaScript files. One file defines a taxonomy object that matches topic numbers returned by a document.browsing topics with topic names from the taxonomy. And this page also includes a JavaScript file that runs code to display topics for the current user. You'll see that this file includes the taxonomy object from taxonomy.js. So, first, the code gets the array of objects that represent the topics observed for the current user. Each object in the array has a topic property, which is actually the number of the topic in the taxonomy. For each of the topics returned by the call to document.browsing topics, the code then gets the topic name given the topic number. And these topic names are collected in the returned topics array. Next, there's some code to avoid displaying topics repeatedly. And finally, the topics are displayed. This code is run every second. So, let's see that in action. Side by side, I'll keep the demo page open and see what topics are observed by the origin topics demo.glitch me for, you know, when I browse sites that include an iframe that runs code from the same origin to observe topics. So, I'm going to visit a few more pet-related sites that embed the iframe to observe topics. If the topics API is working as intended, you know, it should observe my interest in cats. And after a while, you'll see topics begin to appear in the logging div on the demo page. We'll need to wait a minute or two for topics to start being observed. And as expected, there may be some random topics showing up as well. Now, remember that I've set the epoch length to 15 seconds rather than the default of one week. So, let's take a look at what's going on from Chrome topics internals. First, let's check that the flags I set worked as expected. And everything looks good. Now, probably the main thing to notice is, again, epoch length, the interval between topics calculation. And you'll see that the value is 15 seconds, just as I said it from flags. Now, let's move to the topics state tab. Here you can see the top topics observed for the current user. Sites I visited recently, including the following, cats, cats, cats, don't glitch me, dogs, pets, animals, don't glitch me, and so on. Now, this caused the topics API to select pets, pets and animals and cats as the top topics for the current epoch. The remaining topics have been chosen at random since there is not enough browsing history on sites that observe topics to provide five topics. Remember also that Chrome selects one topic at random from the top five sites, but also with a 5% chance that a completely random topic is chosen. The observed by context domains hashed column provides the hashed value of a host name for which a topic was observed. You can also use the topics classifier tool here to view the topics inferred for host names. I'll add some sites here to show you just what I mean. Just remember that the current implementation of the topics API infers topics from host names only, including subnomains, but not any other part of a URL. Now, bear in mind that this approach is in testing and not final. The requirement, of course, is to balance privacy and utility. So topics of interest for the top 10,000 sites are actually manually curated, and beyond that, Chrome uses a classifier model, running on the user's device to infer topics from host names. So let's look at that model now. A file representing the TensorFlow Lite model used to infer topics is downloaded by Chrome so it can be used locally on your device. The model file is in an efficient portable format known as flat buffers, and that uses the TF Lite extension. You can actually get the file path for the model file from the Chrome topics internal page. And Chrome engineers have built what's called a co-lab for topics, which is a data analysis tool that combines code and output and then some descriptive text into a collaborative document. You can load the TF Lite model file into the co-lab, and then use that for experimentation. So let's do that now. On the co-lab page, click on the folder icon. You can actually run all the steps at once, but I'm going to go through each step one at a time. So first, you need to install the Python packages used by the co-lab. By the way, for each step in the co-lab, you'll see a green tick if all goes well. So next, install the TF Lite libraries and the topics taxonomy. And finally, you can run the model execution demo. For each of the domains defined, you can see the topics inferred by the classifier. So let's see what happens when we change the domains. Not bad. So that's it for the topics demo. To find out more about topics, check out our article on developer.chrome.com. You can learn more about TensorFlow Lite. And of course, the demo is at topics-demo.glitch.me. If you have comments about the API design, file an issue on the explainer. If you have feedback or questions about the demo, or any questions about using the API, file an issue on our dev support repo. Or you can just message me on Twitter. So thanks for watching, and be sure to check out the other videos in our Privacy Sandbox series.