 So, GitHub co-pilot made this frequency spectrogram view for us. The problem with it is that it's only accessible by a different URL, so not even the same window. So, actually, I have to go to where the URL is, slash spectrogram, and we'll show the spectrogram in a separate, plotly window, which is obviously not quite what we want, but I think that's the whole data loaded, the whole hundred seconds, so you can see the seizure over there. Yeah, the colors are not great. For seizure, you kind of need more focus in the lower frequencies, potentially have the frequency scale logarithmic, right? So, that's how it's loaded. Yes, those inputs do not take effect over the spectrogram. Yes, we want to show the spectrogram in the HTML. So, in the HTML, we should have a spectrogram plotly container, the plots wrapper. Why do we have it twice? There's nothing wrong with that. Plots wrapper, plot container. We have the raw signal, the frequency spectrum. We have the output container. Okay, this is the wrong place for it. We want it over here somewhere. It will refresh this page. Now, in JavaScript code, to generate and display the spectrogram, we'll do the specifiers. Specifics of your agent. How do you want to process it? You might need to use library like scipy. Once you have the spectrum data, you can use plotly.js to create the plot. Use the generate sample file to do it. We have a get.fg.n render. It's actually changing. Okay, so instead of a separate window, I'm still using a get data. Okay, let's clear this up. Sounds like I need to explain the file first. So, it's actually to the GitHub. Gopal has access to it. Okay, then we have the JavaScript for pilot. Explain this. This is mainly so that Gopal has access to the files. Okay, so it's generating. So, what we want, really, is having an option to replace the spectrum by a spectrogram, which is much more detailed. Just create the gdata. The translation begins. Yes. Fetch.n render function is the core of the script. Okay, fetch. Fetch.n render. Okay. Explain this. Okay, we need to get the names. Do we have a runtime error or something? Is this still working? Right, closing that window didn't stop. Okay, app from working. That's working. Okay. Regards. Spectrogram. How to show it in the HTML. We don't want to use an image file. We don't want to spectrum an image file. We can convert the basics from code and streak and then directly into HTML. That's still using an image as none. We just use plot.ly or mat. Because we're using both, aren't we? Yeah, this is actually plotting the thing in a separate window. But how about plot.ly.js? Yeah, we need to send it down with a flask. So the problem won't be using that, which is okay. It's actually currently working in the window. It's displaying the thing in a separate window, but we already have JSON file imported. Now in spectrogram, it should be at the bottom here. Just place them side by side for a sec. It is no WAV file. The data is already loaded. Do you have access to the files or not? Never to show a control I. They use that. It is already loaded. Yeah, this is hard to troubleshoot this way, but it looks legit. Yeah, it's using the data variable. So we'll accept that. Okay, it's returning HTML and JSON. So in the HTML, we should already have that mean.js. Is that what it's using? Yeah, the latest mean.js. Why can't you just not use JavaScript for this? Don't get it. Why is JS code not in the EGJS? Yeah, that's fine. So in HTML, we have a section for this spectrogram plot. It should be underneath there. I'm trying to pull out, explain this. It's mainly doing this so Copad has access to that line. Okay, how did this JavaScript become so complicated? A spectrum. No, there is spectrum. How about spectrogram? Okay, I'm doing something wrong. Yeah, add. What did it change? No, that's not what I meant. Okay, it doesn't have the context of this thing. Let's try GPT. It's done a new chair, GPT4. No, that's discard. Let's do some rubbish. Yeah, confirm reading the code. Don't generate anything yet. Let's say sometimes it ignores this instruction. Yep, that's good. This one should also have this. Make the code don't generate anything at the bottom. That's great. Yes, the main thing is that the spectrogram is not showing in the HTML. There are two routes to spectrogram, which might be causing confusion. Flask might only be using the first one declared, rendering the second one unreachable. Ensure each route in a Flask app has a unique endpoint. Okay, that's a good suggestion. Yeah, I want to do the second one. To display plots on a web page, you typically need to use a JavaScript library like Plotly. JS, which can be integrated into the HTML template. Okay, that's a good advice. Yeah, we haven't changed the JavaScript yet. If using Plotly in the web page, you need to write JavaScript code that defines the data structure for a spectrogram and then calls Plotly. New plot, to render it within a specified lesson div greater than element. Right, I have to do that. Template rendering, the Flask route for spectrogram should pass the necessary data to the template rendering function in a format that can be used directly in a template. Okay, let's do that. Let's go with that one for now. And then in HTML, wait a second. We have one HTML. We should have the file structure. No, we don't have the file structure. The script should be separate. Okay, so first of all, it's getting mixed up. We have the spectrogram plot. Let's do JS first. Oh, let's do HTML first. Sorry for that. How to change this code in terms of the spectrogram. Then we need to do the same with JavaScript. Yeah, we want to use JavaScript to render it. Here's step by step. Okay, we already did this. The same changing it again. It's changing it. It's actually better because it's not generating an HTML file. It's just generating JSON data. This is better. In your script, JS file or within a lesson script greater than tag in your HTML had a function to fed the spectrogram data and render it. You can call fetch and display spectrogram when the page loads or when a user interacts with a control to show update the spectrogram, such as the channel selector or a button. It can just be placed on the function. There's not going to be any errors. And in the HTML, we have division. Yep, that's right. Make sure you have included the script. JS file after the potlilatestotmin. JS script tag in your HTML head or before the closing lesson body greater than tag. Let's do a proper list. Don't even see the placeholder for the plot. Is this clearing them somehow? Yeah, let's go back to GPT to see the spectrogram. Sorry, super long prompt. I hope we get penalized for it. But I need to keep the context intact. So that's the actual JS script. We need to change. I think I stopped something up in it. It's this bit here. Let's just remove that. It should be at the beginning of fetch and render. It should be at the end. It's done at the end. It doesn't matter what the function is, is it? Function. Fetch and render should be at the bottom. Place the second function over here. And make a call after the function. And it's actually working. It's displaying the spectrogram for the whole hundred seconds. The description is overlapping like that. The spectrogram is displayed okay, but it's using the entire data. I can just say this because hopefully if it understands the context, it should realize that we want to link to those controllers as well. We're doing the same thing. It's adding all the context and everything, which is awesome. So I don't need to do that anymore, do I? A fast scroller over here that is there. Let's change the key. And select the window size of 100. It should really go to the beginning of the file. Set this to around 50. Well, it's working pretty well. The amplitudes here is there for the axis. The color there are auto scaling, but it looks pretty good. We had a better one in this EEG review, which was a bit heavy. It's still loading, but it had this nice bit there. It was quite handy and it was nice. I'll see how we introduce that. Should we get rid of the frequency spectrum? For some of those controls, we don't need text on the side. Maybe that's what that sentence was there for this command. It should be over here perhaps. Yeah, clear something that is better. Just get rid of that. We also don't need log spectrum. Linear log could change that scale. What just happened to those? Let's display it again. Gold elsewhere. No, this is the problem. How to remove? How to remove this second board? Well, everything else is still shown correctly. Currently it's messing up those numbers there. Delete that. Find the element in CSS. We haven't touched the CSS file in a while. Copy it quickly. What's up? We have a couple of options. If the element is just scraped. Right, what the fuck is that? Just scraped. Okay, that should still... All right, now this one is working as well. It's good. Yeah, it's a bit grainy. It should be switching. Yeah, the way that the noise doesn't do anything anymore. Let's go one by one. What is it doing? Yeah, it's not actually changing anything. It doesn't actually seem to do anything. Shell script. It's actually changing the thing to change it in all the other applications. I think I only have the one. Swim the noise thing. Arguments. Get. Just find it like throughout the project. And also have it in the noise. We'll set it as well. One run at a time. We'll assume it's working okay. Not testing is a great idea, isn't it? Well, because we're essentially testing the same thing over here. It's working okay. Okay, now the Spectrogram is only being affected by this scroller in the frequencies scale to change Spectrogram Y axis. It should be straight forward. I don't know. Windows size HTML. Steps on one. So why? We actually have to click it. Okay, so Shell script fetch and display Spectrogram after fetching the data. Perfetching the data and within that. Then, where you process and plot the data. It's ready. Type in trace. The comma there. And then there's no change function. It's dead of dead. Doing this. Now it's working okay. The whole spectrum can be removed in HTML. Get rid of the dead. Okay, now we don't see what. That's not cool. This one. That's showing okay. Linear lock. Lock is default. That's good. Add this filter. Oh, that wasn't affecting the EG spectrum. Okay, get rid of it here. Now the input. Okay, it still doesn't work. Okay, that's working. And that's okay. That's for the denoising frequencies. Okay, that's working. Where's this coming from? Show it underneath this. Yeah, lock is default. That's fine. That's okay. Princess scale is a KGL number. Right. Now the main thing is the EG spectrum. They called a plot leaf if just. We have it over there. We needed to update when inputs change. Currently it's only updating when the file scroller is being used. This function should fetch the latest data using the current settings and re-render the spectrogram plot accordingly. Yeah, how to do it. Here's a step-by-step guide to updating the spectrogram plot leaf when input changes. Do I need to separate? Don't think I need a separate thing. Create a function to update the spectrogram. I already have a function for that. The whole seizure spectrogram in the frequency domain, by the way. When we have the window size at the full 100, you should, in theory, not be able to scroll through the file because the whole segment is loaded. This is how it looks like on different channels. On some channels you see more. On some channels you see less of it. There's a problem with this one because of the spike there. So also this is updating with the input instead of change. Just like the window size with input. We have the window size at... Change this to input quickly. Just to see it is becoming much slower. I can hear my server is going. There's much more data in there. It becomes less responsive as well. I just stick to change. It's kind of nice to see it changing live, but then it's taking a toll on my server. I'll get a huge electricity bill. It might actually, in this spectrogram as well, do it change the... Yes, you actually have to click release the button. Release the mouse button for the changes to take effect. Now this spectrogram also should change when you turn the noise on and off. As in you don't turn them on and off because they both displayed on the EG signal chat, but for the spectrogram it will display one and then the other. Yeah, that's the linear frequency scale. It's a logarithmic for the seizure on channel 7. That's what it looks like on channel 11. So now a channel gets the picture. So the only thing that is... The only controller that's working with input instead of change is the scroller. All other controllers you actually have to release the button for them to change anything. Yeah, log scale for the frequency here is default because you can see better, especially when there's a seizure. What's going on? So this is reloading the page. This is default. This is just showing you the low frequency component because the colors there are automatically scaled. Yeah, it's getting up to 6,000 during seizure and only 1,500 when there is no seizure. Just give me these arrows at the edges. We'll fix that a bit later. Yeah, so you see here you have this nice and stable line through the seizures but that's not always the case. If you want to train something, a seizure detector algorithm, you will use that line. Problem is it's not always there. That's the end of the seizure as well. But yes, there's higher energy in the low frequency components. That's for sure a throughout the seizure. Yeah, this channel 7 is not great as well. Some of them will be better than others. Check something. A chance like the window size. Yeah, that's fine. It's what's the three things that's changing the spectrogram. A channel number, a file scroller and window size and frequency scale, of course. But that's done in a different way. Okay, the spectrum should also be affected by a wavelet denoise because when it's on, it should be taking denoised signal and when it's off, the spectrum should show the original one. How do we turn this into a prompt? The noise would also affect the spectrogram. We might not prime it with any more information. If it gets the context and be able to tell straight away if it understands what we mean. If you want wavelet denoise, control to also change the spectrogram. You need to ensure that the event listener for the wavelet denoise checkbox calls the fetch and display spectrogram function with the current input values. Here's how you can set up the event listener for the wavelet denoise checkbox. I'm not entirely convinced it understands what we are trying to do. The checkbox state can be included in the fetch request as a parameter and the server side logic should then apply the wavelet denoising based on this parameter before sending back the data. I'm still not convinced it understands. With the wavelet denoise checkbox linked to your fetch and display spectrogram function, toggling the checkbox should now update the spectrogram according to the denoising setting. Remember to handle the checkbox state both on the client side when sending a request and on the server side when processing the request. The question is how the spectrogram will update in relation to wavelet denoise on and off? We know what the answer for that should be. We asked what will happen when the wavelet denoise input is toggled and how it will change the spectrogram. We also want to know why the spectrogram looks so granular. So low res. We had something like this in the lab before. So surely we could just change the settings. Check it out straight away. Actually using scipy. What are we using? Don't think we use this function as well, do we? Yeah, this is coming from a plot. Okay, where is the BLT mudplot label? The function called asspecgram. This is the one we are using. I don't think so. Surprised we're not using the scipy thing. Okay, the sexual function. Yeah, we're using signal spectrogram. Yes, that's what it does. And signal. Okay, it's a scipy function. Now the actual parameter can be returning on one side. That's okay. Has the train function in build. Yeah, this window. Window, window, window. Okay, this is a GitHub co-pilot suggesting stuff. That's the segment. Optional length of each segment defaults to none. But window is string what double is set to 256. Number of points to overlap for a window of 10. But add more of these parameters as inputs. Fire.