Events Add an event Speakers Talks Collections
 
Google I/O 2021
May 18, 2021, Online, USA
Google I/O 2021
Request Q&A
Google I/O 2021
From the conference
Google I/O 2021
Request Q&A
Video
Future-proof web apps with Angular and TensorFlow.js | Session
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Add to favorites
11.09 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About the talk

In this Session, we share how you can build an intelligent User Interface (UI) at any scale by combining Angular and TensorFlow.js. First we explore how you can start with machine learning declaratively in your Angular templates in just a few minutes. Then you learn how to build an ML model with data from Google Analytics to better predict a user’s browsing patterns. Finally, we show a powerful TensorFlow Extended (TFX) based training pipeline to automate the training and deployment process.

Resources:

Predictive prefetching demo → https://goo.gle/3fIgUAj

Optimize your website with machine learning → https://goo.gle/3u5nyGz

TensorFlow Extended (TFX) → https://goo.gle/3gLqu7n

Speakers: Minko Gechev, David Zats

Watch more:

Web at Google I/O 2021 Playlist → https://goo.gle/io21-ChromeDevs

All Google I/O 2021 Technical Sessions → https://goo.gle/io21-technicalsessions

All Google I/O 2021 Sessions → https://goo.gle/io21-allsessions

Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs​

#GoogleIO #Web #ML/AI

product: TensorFlow - TensorFlow Extended, TensorFlow - TensorFlow JS; event: Google I/O 2021; fullname: Minko Gechev, David Zats; re_ty: Premiere;

About speakers

Minko Gechev
Senior Developer Programs Engineer at Google
David Zats
Software Engineer at Google

Engineer in the Angular team at Google, author, and keynote speaker on worldwide technical conferences. Awarded by Google and the President of the Republic of Bulgaria for impactful and influential open source projects and publications. The first laureate awarded in two categories in the prestige contest "John Atanasoff" of the President of the Republic of Bulgaria. Author of the best selling book of Packt Publishing "Switching to Angular." Interested in theoretical computer science, software design and architecture, purely functional user interface, type theory, computational theory, category theory, graph theory, and web technologies. Organizer of the meet-ups of the Angular San Francisco user group and founder of the Bulgarian JavaScript user groups SofiaJS and BeerJS Sofia.

View the profile
Share

Hello everyone. My name is Michael. Yes. I'm working,. And you are at Google today, Davis and I will share with you how to build future-proof web applications with anger and stands before, Jess in the machine learning space, with different products. For example, with Google Assistant, using voice recognition, image recognition in Google photos and smart compose, in Gmail. We've been using tensorflow Js. Does your phone Jess is an open source project which

allows anyone to run existing ml modos, retrain them, or develop custom orders for more specific use cases. One of the strengths of tensorflow JS is that it set the foundation for many successful Library, centrioles are examples are down for Jess, face CPI and many others in the browser, usually involves installing it or referencing it with script acts after that configuring hits and finally wearing them. Although you'll first have to start by installing tensorflow JS Emoto and the back

and that's who executes is a small though. I forgot you can configure the Moto and integrate it with your existing front end Tech stack, for example, with a framework that you're using. Finally used query. The mole potentially multiple times getting a stream of results. Angular Izzy platform which comes with batteries includes little. See how using the framework and your sea lie and rxjs. We can make this process even simpler. And you are so like an automatically installed the packages you needs and integrate them with your

application. And your Housey Goods integration with our address, which knows how to handle a stream of results and who helped you query the model. The anger framework offers an expressive Optimizer bow template syntax, which can hide all the complexity of interacting with machine learning. And now, let us look at an example. Let's see. The forbidding a chat application where we can send messages to other users. When we type something into the chat box, the app gives us heads up. If the message could be considered offensive by the people. We're chatting with when

the user starts typing, something came to the textbooks. We used to check if their message is toxic or not, a new approach would be to get the words in the sentence and check if any of them belongs to a dictionary of toxic works. This whoever can return, some. Has this for example calling a person horrible is toxic but expressing her opinion that the weather is horrible will probably not hurt anyone's feelings and should be considered non-toxic. This music, our basic heuristic is not going to work. Well in the general case,

toxicity model with by using natural language processing, categorizes. A sentence as toxic based on different criteria. You can find a small do in the notes package registry. Do you think another application will first have to install it? Astronauts will have to import it together with tensorflow JS in the application. Next, you'll have to come see her tomorrow and load it. I forgot to have to add sea change event listener to the chat box. And finally, we'll have to query them. Although on each change of the

input updating the label manually. If the message is toxic or not. How many death cases and race condition would make this still too cold, even more complicated and Tangled? Although, that's hurtful. Jesse's fast and well optimized brings a moto on a large input could also blocked the main threats and Coast raindrops. Let us see how we can implement this with angular and its tensorflow JS. Bindings. We need to do to install and configure. The app is just rum Angie at in Jax. Give Jess. This would automatically,

install all the required modules and integrates answer for jazz with our application, folding best practices. It will also export a pipe that allows us to use of Christy model and we're eat outside of the main threat. So that we don't drop frames and provide 60 frames per second experience. Now, let us see how to implement the entire app by using angular. First to show all the messages we would use the message list components. I forgot school provides an input binding kids to a tax property. This

way, when the input changes, we update the value of the property. Now, we just need to categorize the text as toxic or nuts will start by showing the value of the tax property on the screen. Will buy tickets to a 250 motor and right after that on the rap, the prediction by using the existing pipe. Finally, we'll just emojify the results to give the user heads up visually, if they need to give their message a second salt before sending it. And here is the final results seeing about the weather is great, is not considered toxic, but calling a person horrible

toxic. Drum, many applications of machine learning in web development, varying from natural language. Processing image processing, recommender systems and so on and so forth. In this example, we looked at one sample used case. Now, baby to share a sample case study on how we can improve the performance and user experience in e-commerce by using predictive provisions. Thanks, man,. No, let's take a look at the e-commerce site yusuke. E-commerce sites, provide many opportunities to

leverage ml to improve the user experience. We will make our example concrete by using data from the Google merchandise store. In this case, we're going to focus on how we can use machine learning to drive down user licensing. Wait and see is highly important to e-commerce site because it has been directly linked to user satisfaction and can even increase the rate of conversion. For example, newest shirt, that reducing latency through their profession solution improved, their conversions by 50% by making

transitions, four times as fast, here is an example of how was door would look without any latency optimization, as you can see her. Whenever the user clicks on a different page. They suffer irritating delay, while the images load this harms user interactivity and prevent users from having a smooth experience. So, how do we profess the next page before the user clicks on it? Because it has different usage patterns. They have to lay out some very content as a result. It is not

trivial to predict the next page that the user will visit. At the same time, the devices that are likely to benefit most from prefetching, our bandwidth constraints. And we have to be careful not to overwhelm them by profession too many pages. So, the trivial solution of prefetching, the whole site won't work. We are going to address this problem by creating a custom emblem for every site that learns traffic patterns to provide at Taylor high quality predictions on site data from Google analytics and will be run by angular to perform the steps

will look as follows. We will export Google analytics data to pick which is a large-scale data store. We will then use data flow are managed service for data processing to convert the data into features that we wish to train on. Next we will run gfx, which is our machine learning pipeline to create a tfjs model model with angler to make all of this happen. We simply configure Google analytics to export a big Corey and use an AI notebook to work with data flow and the

effects. No, let's talk about how we can use data flow to obtain the features. We wish to train on this code highlights how we obtained, the training features for every user session using data. We take a simple assorted list of Google analytics events, which rivers through the list of events, taking both the index and the page path associated with the current event as input features. We didn't take the page path associated with the following event as the label. Please know that every site is different than any other features that would be useful to the

model can be added simply by extending the features which are there. Other steps. We need to take in data flow, such as reading data from Victoria for storing training. Damn, but these should stay consistent across pipelines and we've provided example to help you get started. Tf-x is our machine learning pipeline. The word using to take the training data obtained from data flow and training, evaluate machine learning models. In this case. We will use the effects to create a dress tomorrow, as you can see from the code here to run to FX. You will have to modify to function the

pre-processing function and the Run function. The pre-processing function is used to specify the operations that you want to perform on the data before it is used by the model. This can include actions such as normalization. The Run function is where you define and train your 10. Model and converted to tfjs. We provide examples how to use these functions to create a tfjs model for prefetching. The next page in addition to FX provides a rich set of examples for creating models for a wide range of roles. Know why I used your facts are many benefits

to using the effects, including enter and integration import data from cloud storage or many other locations. It automatically expects the training data for abnormalities that can harm model quality. It doesn't rain tomorrow at scale, using gpus and TP use if needed. Finally, it evaluates invalidates, the models to ensure. They are high-quality before. They are made available to the user, which means that the exported tfjs models are ready to use with angular. Finally

is a general-purpose pipeline. It allows you to design your model architecture or use one of the latest state-of-the-art models with a ruby or image processing, or many other demands. And now why use tfjs just works in any JavaScript environment? Whether it be browsers server-side with no Jas mobile devices. For client-side, inference, that are lightweight station, which can reduce model, size way up there for us. There's many benefits to client site inference, it both preserved user, privacy and saves server cost. Finally,

such as cheap, or webassembly to speed up in France, for a variety of devices, including IOS and Android. Let's talk about how we would integrate with our tangler and tf-x. Integration can legally load the model to avoid impacting load Time Performance, which would harm the user experience. Similarly, he can run the model off. The main spread as a worker. Thread to ensure the frames are not drop negatively affecting the user. Finally. Prefetch Pages striking the right balance, based on the user's connection. Our approach has many benefits

able to build a custom machine learning model. That is tailored to every site by leveraging. Existing automation, the connect, Google analytics, data flow, and angular. Our approach is TurnKey. We can leverage the services and data that are readily available to provide a high-quality solution. Finally, creating a personalized experience for every user. We can use custom machine learning models to provide an experience that is tailored to every users individual needs. You can

think of this predictive experience as a progressive enhancement over your existing e-commerce platform. Thank you. We hope that you will visit the examples to learn more.

Cackle comments for the website

Buy this talk

Access to the talk “Future-proof web apps with Angular and TensorFlow.js | Session”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Ticket

Get access to all videos “Google I/O 2021”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “IT & Technology”?

You might be interested in videos from this event

November 9 - 17, 2020
Online
50
254
future of ux, behavioral science, design engineering, design systems, design thinking process, new product, partnership, product design, the global experience summit 2020, ux research

Similar talks

Pete LePage
Developer Advocate at Google
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Phil Walton
Developer Programs Engineer at Google
+ 1 speaker
Minhaz Kazi
Developer Advocate at Google
+ 1 speaker
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Sam Dutton
Developer Advocate at Google
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Buy this video

Video
Access to the talk “Future-proof web apps with Angular and TensorFlow.js | Session”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
944 conferences
37486 speakers
14316 hours of content
Minko Gechev
David Zats