Page 1

essay on republic day in hindi 05 02

super paper mario chapter 1 3 walkthrough 05 04

writing a research evolution writers 05 05

how to evolution writers mache dry fast 05 04


apa format example for essay 05 12


discursive essay zwroty 05 02

essay generator online 05 02


virus writing tutorial 05 10

description of my school essay 05 02

evolution writers mario sticker star 4 3 walkthrough youtube 05 05

essay report format 05 03

hsc belonging creative writing question 05 15


looking for someone to do research paper on presidential terms please 08 21

good cause report santa clara county library 05 15

evolution writers mario ds cheats 05 05

ip telephony powerpoint presentation 05 14

selma essays 05 10

research paper writing service reviews 05 03

bamboo evolution writers app alternative 05 05

classical type of argumentative essay 05 15

stone age non chronological report definition 05 11

autocad evolution writers size scale 05 05

essay proposal outline 05 02


essay on my aim in life to become a doctor in hindi 05 05

gta 4 paper trail help 05 03

breastfeeding vs bottle feeding presentation software 05 11

vanity fair movie review 1932 05 14

holbrook primary school gosport ofsted report 05 13




start a research evolution writers first paragraph 05 05


i need help with a research evolution writers 05 05

writing satirical articles 05 13

reporting telerik wpf controls 05 10

compare and contrast psychotherapy and counselling pdf 05 10

15 august essay 05 02



i want to be a doctor someday essay 05 04

250 word essay yale 05 02


write an essay online for free 08 21


Helene Fuld College of Nursing ​thank you everybody it's really nice to be here I'm very excited and I really want to thank the organizers for putting everything together so well it's it's really honor to be here thank you for that right so our story starts in Vienna which also happens to be my favorite City it's also the city with the city hall where I wanted to become the first lady mayor when I was around 18 which is when I first visited the country and so the story begins somewhere last year it was in May I was attending we are devs conference I was hanging out with a kind of a bunch of really really cool people they're really one of my favorite some of my favorite friends but today we're gonna focus especially on this guy and if you don't know him you really should that's Martin he's the most amazing person I know and so you know we were at we are devs and we were talking and talking and Martin and I go a really a long way back we've we've had our share of parties and dancing together and so we have a thing in common we both like web components we really believe in web components and we were talking a lot about it and he's he's working with it and I was giving talks about it and working with it a little bit and so he takes me aside and he said Carmen I really want to show you something so he pulls me aside and he opens his laptop and he starts coding and he was like so this is a frame and we're gonna build something together with it and then you know it's like one custom element after the other and in like no time we had this this running app and I was like and it it really hit me because I was I was always talking about web components but somehow when he used it and I saw the power of it it was like the coin drop for me I was like yeah I mean it makes total sense now so if you fast forward that to today it was like so how cool would it if you could do with web components what a frame does but then pour that to machine learning and this brings us to our talk today which is smart angular elements and it's an experiment for me because I had no idea what will be possible with it but I really really wanted to try it because I find it like to be a very very good idea so I'm Carmen I'm Carmen Popovich on Twitter I work at a really cool company called creative AI with the most amazing team I had ever had the pleasure to work with I I was thinking how should I go about this talk like should I just like go there and prepare a big bunch of slides and then just you know like go and explain things but then I thought it would be much cooler to just have a demo where we can see how these things work together so I prepare the demo and we're gonna do a bit of live coding and at the end I have a small surprise for you but before we do that I just want like with a quick raise of hands I want to know how many people are familiar with web components okay so for those of you who aren't web components is basically a web standard that will allow you to do something like this right so you can just have a custom HTML tag in this case the Horta does everybody knows that her torta oh it's the cake that you eat in it the Vienna cake so if you ever go to Vienna you have to eat the socket order so this is this is basically what web components allow you they allow you to create custom elements that the browser will understand now who is familiar with machine learning all right so for those of you who aren't like a very very very quick intro to it there are many types of artificial neural nets and a lot of machine learning algorithms but I'm just gonna stick to a very very basic example because you will need it in order to understand a little bit of how our demo works so think of this think image classifier right you have an image you have an artificial neural network and you would like the network to be able to predict what what the image is right so if you have an image of a dog you would like the network to be able to tell you this is the image of a dog so what this means is that you have the network you feed it an input which is the raw image data right it's the pixels and the network will output something it will output whether it's a dog or not for instance now in order to do that you have to train this network so you have to show it a lot of images in order for the network to understand what a dog is and so each time you train this network this network has a state and this is very important this state this internal state is characterized by what we call weights and biases like really take a snapshot of this this is really important right so what it does is you feed you feed it the raw image data it does the processing and then it outputs its prediction if the prediction is correct thumbs up if the prediction is wrong then what the network will do is it will go back through its internal state and it will update it so that with the next pass it will recognize that image right so it will update its internal state it will update its weights and biases that's about it I don't want to go too much into detail because it's it's not so much in the scope of our talk but in a nutshell this is kind of how I how I think about it so let's start the demo so the demo is going to be about generative art and for that we're going to use an algorithm which is called CPP n I don't want to go into too the details of that the link is in the slides but basically you can produce images like this this is the work of David ha which I have a lot of respect for he has a lot of articles about this I I really recommend it but this is basically what we're what we're aiming for so does everybody see this all right ok right so let

me show you what we have so far so we have an index page and so we're gonna start with a very basic component which I have already prepared here I'm not going to go into the details of of how the all the machine learning part is implemented that's up on the github repo and you can have a look over there but I have this in an art component and I want to show you what it does so I have this component layers and it takes a couple of parameters so it takes the number of layers of the network it also takes the activation function which I didn't tell you about but just trust me on this one for now right so I think this should be it and so this is an angular this is an angular component and what I want to do is I want to use it as a custom element right so then in order to do that I'm going to add it to the declarations of my module and add it as an entry component because this component is going to be dynamic right so let's see if this works probably okay this is compiled and of course it doesn't all right um let's see let's see an art oh yes of course sorry I forgot the most important parameter which is the canvas size and that's gonna be 128 so let's see if this works now right so this is our starting point this is our R in an art component right and this runs as a custom element this is not an angular app it has nothing to do with it but we did use angular elements to create this custom component so let's do well I mean that doesn't do very much in itself so let's do something else let's add some controls to this controls right and then let's do let's wrap this in a div and then say class this is container so let's add some controls to it class container and an art well so much for preparing the demo yeah demo god all right of course silly me so what I have here is I have a side nav component and the side nav component uses a slider so we need to add the slider to our entry components and this is the material slider and it uses an icon so we need to add the icon as well we're not declaring that but in order for that to work we need to add that dependency to our imports so we're gonna do math slider module right and then also Matt icon module is it there yes so let's see if now it works no it's not here oh thank you yay life coding together nope right no still no why not side nav entry components might slide around you might I can audio elements in art that slider that I can I'm not really sure why this doesn't work okay I'm sorry for this I'm not sure well so I'm sorry I'm not sure why didn't work but this is how it was supposed to look like and so if I go back to the index page sorry the main tears here a couple of things that we're doing so we're selecting them in an art component and we're also selecting the slider in the input and what we're gonna do is every time there is a change event in the slider we're gonna update the attributes of the in an art component and we're gonna do the same when the input value changes so what this looks like is something like this so notice that that the animation that the generated image changes its quality changes because we're increasing the number of layers in the network work we can also do is we can change the activation function and this would look like something like this or we can do reloj which is one of my favorites and then do something like this so this is what would look like is everybody following so far I mean is it clear what we're doing cool right so let's do something even cooler than this let's do and this I would not have time to live code this so I'm just gonna cheat again but let's assume you would have another custom element that is machine learning base let's assume that instead of the traditional slider and input controls you could have something like an input field where you could just draw digits and then you would have a neural network that would recognize that and I thought that would be a very very cool idea and so I worked really hard on that and then I made it happen so let's have a look at first of all let's have a look at how that looks like and see it's updated right so let's say we draw a three notice that the predicted value is three this still works we can still do this we can refresh it's gonna crash now because there's a lot of computation being done on the GPU and it's it's the the the memories is really polluted I'm not entirely sure what causes it but it's enough to I'm happy that it just I have this thing working as it is so let's have a look at what this looks like so here's how we made that work I took a pre trained model of an amnesty network of it and like a neural network trained on it on the M&S data set and what I'm basically doing is I'm I'm creating a network I'm training it and then when you're training that with sensor flow sensor flow can take a snapshot of that inner state of your network remember the things that I told you are really important like the weights and the biases so tensorflow can take a snapshot of that and then what I can do is I can take that snapshot and then initialize a network in the front end with those weights and those biases so that means that I have a neural net which is already pre trained on that data set but I'm not doing the training on the front end side you could but I'm not doing that at the moment and so how that looks like like that that model snapshot is like notice the biases and the ways here right so this is the model data this is what I can use to to initialize my network and so what i'm doing here is and i'm i'm using the deep learned reyes library for this one so i have this model snapshot and so what i do is i'll read it and then once I read everything that's in it I can create my model by my local model right and so what happens is when I have the canvas and I'm drawing the digits on it I'm calling this predict method right because I want to predict what like take the data the raw data that raw image data of what you've drawn I want to feed it through the network and I want the network to tell me okay that's a three or that's an eight or that's a one right and and this is basically the code that does that the prediction itself is pretty straightforward because you have the neural net and the neural net will just like take the raw data and it will just pass it

through it and then it will just output something the tricky thing here was however getting from the canvas raw data to a data format that the network can work with right so so this was a bit the tricky part and this is basically what we're doing here if you want to know more about that come pick my brain because I've spent a lot of time and trying to understand this this monster right so but this is this is what basically happens right and so there there there are two ways to go about this right so you could go the way that I did you could take like train the models somewhere in this case I'm I just there's a Python script that I'm just running and I'm trying I'm training it locally this can work just fine you can also create the net straight in JavaScript and just do the training there because things nowadays work with on GPU so that might be my I mean there's no such a there's not such a big performance loss there but my point is and the thing that I would like everybody to take with them is that I mean this could this could really be a thing you could really have custom elements that in which you have like machine learning algorithms that you could just drop a tag in your index dot HTML file and it will just work right and I find this very very powerful and I don't know it's just to me it was it was really that moment when Martin when I were talking I was like yeah I would really like to see this and I'm really happy I got this demo to work because it was it was really a challenge so to end that the demo is right over here it's on github do come to me if you have any questions I'm very excited about this so I'm very happy to talk about it followed Martin on Twitter he's the coolest guy ever and to end it in a very nice way I'm just gonna leave you with this [Music] [Applause] New York School of Interior Design.