 So please welcome our first speaker, a new year for OpenMedia, Arnold. Hello, everybody. I'm pleased to see that much people so early on a Sunday. So I'm here to present to you Tessel, which is an image viewer and annotator for the web. I'm working at Sciences Po-Media Lab, which is a sociology laboratory. And down there, I'm sponsored by the forecast CURSUS, which aims to teach students and therefore future researchers to study controversies on the web and how controversies is preferrated on the web with the new tools. So that means that my work is to build tools for researchers and students. So researchers are really strange people, like everyone, like every group of person. We have very different set of technical capabilities for our researchers. For example, the guy on the right, Donato, he's known for a lot of skill. I know researchers that train their own AI with their own neural networks and everything. And there are others that can't even auto-correct the iPad auto-correct. If you read some emails written by Donato, you'll know that some phrases are unreadable because he doesn't correct. And well, it's easy to say you are not post-modern when you can't correct your iPad. And they have a need to share their work easily and in a permanent way. If they have a publication and everything or work that's published on scientific reviews, well, the publication need to stay and to be fixed. And the main point is that researchers want to explore things and they don't want to have to install EV machinery or EV things on computers. They can't build their own infrastructure to, well, for example, open big images. I can't ask a researcher to set up a title server for himself. I have to build tools which are easy to use. And yeah, that's it, easy to use. And my journey with big images, well, that's why I recall HD images. I think it's funnier. My journey with big images started not because of an unskilled, technically unskilled researcher, but because of the skilled one. One day, Donato came to me and said, well, I need to annotate and build some storytelling around the network. Yeah, well, that's good. We already have tools in the media lab to do that. The problem is that, yeah, he know a little bit of JavaScript. So he made something terrible on his graph, SVH graph. He replaced all the nodes, just a circle in SVJ, by HD images. Well, I don't know, well, I know why he did it, but it resolved to a really, really big image. So he told me, ah, my computer does not work anymore. It's too slow. I can't open this graph, this network, because, well, the image generated was 700 mega octets. So when you try to open an image that big, well, at least his or my computer explodes. The other question he asked me is, wow, why are you always using the same picture of me? Don't you have any other picture of me? I know I don't. That would be creepy. So my journey started with this conversation. And to sum up, I needed to be able to open really big images. So if you can imagine, a network is already kind of a big image. If you take one of these nodes and make it, well, an HD image, everything scales up, and it's way too much for a computer. Let's define what's kind of a big image. Well, we stumble upon big image and how to use it, especially in cartography, when you use graph networks for any, well, high-resolution photography. Is it the weight that counts? Not really. There is big HD images that are not that heavy. We will talk more about size in pixels. And for me, a big image is around 100 megapixels. So it's starting to, well, they see some example of big images. This one I love is the Andromeda Galaxy. It's really big because it is 40,000 light years long. This is big. It represents hundreds of millions of stars. And the original TIF size is, I don't know, 4 giga. So it is a big image. We will try to open it now to see how a computer works. So I clicked on it. Sorry. I have to leave the window mode. And, well, OK. This is unexpected. I can't even show it to you. Nice. Well, this is kind of the point. This wasn't how it was supposed to happen. But the thing that was supposed to happen, that even the Mac native image viewer cannot zoom on an image that big. If you zoom a bit in it, the image just fade out. You can't see every bit of, you can see the stars. And that's a shame if you have 40, 100 million of stars. So OK, I'll do it faster. There is another picture that I love is the Tabula Puntingeriana, which is a beautiful map, kind of map network. So it was drawn in 1265 in Colmar in France. It's seven meters long, 30 centimeters high image. It's a cool one because it represents networks because it's not projected by a geographical standard. It's projected with travel duration between points. So let's try to open it also. But I'm hearing the same problem will come. Yeah, excuse me. So this is the Tabula Puntingeriana. So this is what happens when I try to open it. It crashed. So this is a problem. I am a bit lost. Sorry. Where is? OK. What's the problem? The image are too big. A big image is big. The computer cannot handle it. We could sample it down, but that's not what I want to do. I want to be able to navigate through the image and build a story telling about it. So I don't want any trade-off. So who do you think is going to save us? When we talk about big images, who are you going to call? This is not the Ghostbusters. This is the triple IF, which is an amazing group of persons working especially in museum archives, libraries, which have developed an entire standard on how to open big images. This standard describes how to deliver images following an API. It's how to resize and rotate and change the quality of an image. But as you can see here, I want the standard is using a server. And I don't want any server because I just want to drag and drop things. Because researchers don't have time to put on a titling server for their research and other exploration. This next one is bugged. So I needed to do some front-end titling. This was a fun exploration. How would you do that? Well, there is one big solution is to bring image magic into the browser. It's possible. Well, we'll talk about it. And the other point will be to use the tools inside the browser, which is the converse, when we want to modify our rest of images. So the last image magic has been compiled and is open sourced on GitHub. We can open it. No. Yes. So this is an example. And there is already something that I will replay it. Why is it so slow to put only one image? Well, we'll see it next. There is two solutions. So we can use image magic to crop every images and boot image magic every time. Or we can build one really, really long command to tell image magic to build everything in one execution. Those two solutions aren't very great. First, the last version of image magic is slow to start. This is what's happening here when I reload. For me, to generate a black and white image and just rotate it, it should not take that half a second that you can see. And if I want to generate and cut 100 of images, I can't wait. I can't have half a second for every images on boot time. The other point to auto, if I generate every images in one command line, my memory will crash because I already have one big image in my RAM. And if I generate 1,000 smaller images for the tidying, it will make my computer explode again. My computer exploded a lot of time, often. So the both solutions with image magic was not working for me. They were not working for me. It was not that fast. I am really sorry. I lost my benchmarks. So please believe me, I will try to make them again. But it takes a long time to tie images. So I preferred I will do other things. So my next solution was to use the tools inside the browser, which is the canvas. And we have now in JavaScript something really cool that we call generators. I guess from other language, you all know what is it. So we can now only generate image one by one, so storing them and going to the next image. So there is some code for the nodes like me. This is how you resize an image using canvas in JavaScript. You send the image x and y position, the area you want to show, and the width and height of the output image. Yeah, the problem is for the moment that using canvas blocked the main thread, there is something called off-screen canvas that is supposed to exist, but is not implemented in well, I guess only in Quorum beta that will allow me to draw images without blocking the UI. But well, it doesn't exist yet on every negator. So to sum up how the generation works, I calculate my coordinates for the tiles. Scale factors is the level of zoom, so how much I will have to zoom to generate this matrix of images. For each of these images, well, this is a quick sample. This is not a real code, but this is approximately how it works. And well, I calculate the number of lines and columns I need and go through this matrix and generate image. It just yields positions and area with an 8. And I just generate an image, generate a neural for this image, save it to the local storage. And voila, I can go to the next image. The first one can be garbage collected, so memory is freed and can be freed for each generation. But yeah, so generated, but what? It's a blob fish, because now, thanks to index debate, I can stop blobs in the memory of the browser. And you've seen it here. I generate a URL. But why will generate a URL on local if you're doing everything locally? It is to follow the triple IF standard, but with less thing, because I said to you, I don't need to server, so I just generate those images, those URLs. And after that, well, so the image is stored in index debate with a corresponding URL that will match the EEF standard, or any other cartography. Well, if you use cartography and if you know, well, all tiles work, this is the really simple part of this visualization. So it's just a leaflets layer, which instead of going to the network to fetch images, it just goes to the browser memory. And we still save a little bit of memory by using our LRU cache, which is really cool. It's the least recently updated image. So I, well, this is a way of saying I don't want to stock a lot of URLs. So when the list called URL is kicked off the list, I analog it and memory is freed again. OK, I will just show you some results of how does it work. This is the tabula annotated. And now we can navigate through it. Oh, yeah, up. So this is just by drag-and-dropping an image into TESL. It takes a little bit of time to parse it like a few minutes and I have nine seconds left. So I won't be able to show it to you. But we can now navigate into the image and explore it. We can build storytelling. Now I'm supposed to explain you this whole perfect map. This is Britannia, my country in France. Well, we'll follow this up. This is Laval. This is Luters, Lutern, which will come to become Paris. So, well, hold this. All this part is France. Mm-mm-mm. We can continue. This is obviously now Italy, up with Roma in the middle. And yeah, we can stop. And so this image is also Tunis, which is kind of here. Constantinop, which is on the other side. So yeah, this is the result of the presentation. And the tool will soon be used in the paper. Oh, yeah, too much security. Excuse me. I just want to show you one thing. And we'll go back to the collection. This is a network built to show the discussions while controversies over AI. So this is a researcher who's done that up. And it will be published. And people will navigate on this image and see, well, this is the part I don't remember. Well, we'll switch a bit. But we can navigate and see the storytelling built by the user. I will stop now because I have talked too much. Thank you. So last I checked, we have no question, online question. Is there any question from the floor? Well, the question was, can I use Tesla with an image that the browser cannot handle by itself? Yes or no? I'm at the limit because the image, the sky image, you can append it on Firefox. But it will take time to load even if you're on local network. It will zoom really well. I'm sorry, I'm losing my words. And maybe sometimes the image just fades out. And it's just, I don't know what's happening, just fades out and I need to move again. And the loading will start again and everything. So yes, but navigator, to be honest, really good already at opening images and everything. Well, the size limit, it depends. Yeah, what's the limit of the image, the size of the image I can stock in Tesla? Well, the whole point is the memory allocated to the browser by the system is approximately 10% of the free space on your hard drive. So this is my limit. And time to pass everything because the sky one takes some like 20 minutes to pass entirely. And it's like 10 levels of zoom. OK, and yeah, sorry for my.