 Okay, we should be live, we check things, just share it quickly, tweet us, we'll start in a sec, we don't know if there are any questions, if you have tried Balikales.com, you can provide your feedback real time. Pop this in the chat as well, please provide your feedback. If there is just, by chance, if there is no feedback from human, we'll get some feedback from chat GPT. Let's start a new chat, we'll do 3.5 first, then move to 4. We have both open and running, we have GitHub Copilot running in the code. We have finished this one earlier this week, the pretty basic, a real EEG, sorry for the ads, a real EEG can select your channels, the 16 channel EEG recording, an intracranial with seizures, you can scroll through the file, you can select your window size, you select here, yeah, this is not great, don't like those controls, they're not fun at all. Let's say make a note to use, what is this called, control shift C button, yeah, those spin buttons, make sure to use spin buttons only if absolutely necessary. Let's do it step by step, we're not getting all over the shop, this is the tool that is working, now we're doing a similar one, it looks more like this, the main difference is that it also has a wavelet denoise option, now we really have some, so it's going to be a Flask application, so I can share it with you, you can play around with it, provide your feedback, now the problem is, just start with 3.5, there's quite a lot of problems, but I wish there was a way to move from 3.5 to 4 in a more seamless way, so we don't get to the 50 messages every 3 hours prompt limit, what we can do though is let the GPT do its thing, well mainly because it's running faster, just so it gives us more ideas, regards how we can improve the code, so this will give us a description. Right, that's right, now we don't need the breakdown for now, now this is the actual Flask application, it does its thing, now we'll have the styles CSS, but we'll deal with it later, let's do those, see what it suggests. Right, well that's actually interesting, let's see what it says. We have a wavelet selection option, a wavelet type selection, now with GPT4 that's the one that I actually expect to generate better code, might start populating it slowly, but surely it's also getting a breakdown, so we can already have that, the wavelet selection. The noising level, the level of denoising, thresholding is another critical parameter, adjust the threshold level or multiply in your denoising code to find the optimal balance between noise reduction and signal preservation, you may need to fine tune this parameter. And that's an interesting one, we might edit as well, what else we'll get. So this EEG is probably the cleanest signal you could possibly get, because it's being recorded directly from the surface of the brain, it's coming from an implant, the other unique thing about it is that it has epileptic seizures in it. So we're actually trying to optimise for those, my mouth is barely moving, it's not very great, I don't have the playback feature at the moment. One thing I noticed with GPT4 of 3 or whatever, actually needed to run for longer, for it to do something useful, as in clicking the stop generating button can yield all sorts of weird results, many to the fact that it's losing context, lazy loading of data, what's that? Let's ask it the same question, we did GPT3.5, let's see and compare the results, this is back to 3.5, what else is it suggesting? Visualise denoising, to assess the impact of denoising more clearly, instead of creating separate visualisations that compare the raw EEG signal with the denoised signal. This can help you visualise the noise reduction more effectively. This is not a bad suggestion, it's actually a pretty good suggestion. So let's load a flash application and see what it looks like at the moment. Right, this is what we have, and yes, considering, we could just plot both of them, another option would be to have options for both displays, we have say red and blue, well then the problem would be how do you do those in different colours? I guess we could do another tool later that just has the time domain, it's comparing side by side the noise than the original signal. It's important to strike a balance between noise reduction and preserving meaningful signal components. Yeah, these values are currently not displaying anything, make sure signal noise and mean square error are showing values. Okay, let's move to GPT-4, so we have that, it's the same wavelength selection. Decomposition levels. Decomposition levels, the level of decomposition can play a significant role. A high level of decomposition might capture more of the noise because it removes some of the original signal. You may want to experiment with different levels to see which gives the optimal balance between noise removal and signal preservation. Okay, that's pretty much similar to what the GPT-3.5 said. 3.5 surprisingly doesn't have a thresholding section. Thresholding, the thresholding technique and the threshold value can significantly impact the denoising result. The thresholding you're using, multiply asterisk nb, sqrt, to asterisk nb.log, then eg.data is a common one based on the universal threshold. However, there are other thresholding methods, such as soft and hard thresholding, and you can adjust the multiplier to change the threshold value. Yeah, probably want the original to be grayed out in the background. Make the regional eg signal and the denoised time domain. If the noise is original, eg signal is displayed, is grayed, and the denoised signal is in color. There's the denoise on by default. Okay, let's do step by step to change the code so that this should be simple. Start with a simple task, change the html. In your JavaScript code, inside the DOM content loaded of EndListener, you can set the check property of the wavered denoise checkbox to true. html, no default option selected, which is unusual. Okay, so we changed it in the JavaScript, it should be fire. Adjust the default value for the wavered denoise parameter in the get underscore data function to true. So those are different options, is it? Yeah, I can just use the, just modify the front end, the JavaScript, check it. Yes, so wavered is on by default. Now next thing, yeah, make the original eg signal and the denoised eg signal in the time domain. Make sure if the denoise is on the original eg signal is grayed out and the denoised eg signal is in color. Yes, let's do this. Next, so we need to do two things. One is modify the back end to always send both the original and denoised eg signals. Modify the front end to display both signals and adjust their appearances based on the denoised checkbox state. All right, so in the back end, the Python code in get data, the data based on the original and denoised signal. Right, so we have a response data. Okay, so there's quite a few changes. And let's create a copy of a Python script just in case we stuff something up. Generate the whole, generate the whole, we should say regenerate, then complete the get data function. Okay, let's see. So we have start second, window size, that's the same, calculate the indices using define the sampling rate. That's the same. Extract the segment from the full data set channel. That's all the same true log wavelet denoised, by the way, not using frequency scale yet. Even though I'm pretty sure it's working okay. Yeah, but it's linear. Yes, it's, I don't know what's talking about. It's a leading problem. To work okay levels. The same validate waveforms. Okay, we have some changes there. Yeah, we don't actually need to do this, do we? Chains and fire original in G data, the trend. Okay, let's move it, let's move it long quicker. Otherwise we'll never get anywhere. I think that it didn't miss anything major. And it's ending with return JSON file. So we can replace this whole thing. Yes, we need to modify anything else. This regenerated function takes into account the default ON state for wavelet denoising, and always sends back both the original and denoised EEG signals. The original EEG signal will be greyed out if wavelet denoising is on, and the denoised EEG signal will be in colour, blue. If wavelet denoising is off, the original EEG signal will be in colour, and the denoised signal will be greyed out. Okay, that didn't work. Don't get any errors in that terminal. It's real loud. Type error cannot read, but you know what I'm using. Okay, so the Python code returning response data. Let's check that. Lotley newplot is called data. Response JSON. Okay, what's going on? Give me generic stuff. They regenerate this response. I don't like it. No, it's like it was working as second goal, right? So let's check the error again to update JavaScript. It seems to be more specific response. You need to ensure that your JS code can handle and display both signals on the same plot. I currently don't have an update plot function. Can you do the whole thing to update this JS? Because I wouldn't know how to do it. That's what I have you here for. It seems to be specific. You need to update your JavaScript to reflect those changes. Yep, need to plot both signals. That makes sense. So this one has yet to... Wait, how is it different from what we already have? Why do we have newplot twice? Doesn't make sense. Signal X, signal Y, signal name. There should be two signals in there. So that's the raw EEG. Wait, where is the original? There should be original and denoised. This modification uses the map function to transform the raw underscore signals array from the back end into the format required for plotting with plotly. It then passes this transformed data to the plotly, new plot function to render both the original and denoised EEG signals. Right, so the both included the rest of the plotting code. I don't have anything. Ah, this meant to be the frequency domain. So that would remain the same, at least for now. Yeah, let's check. Right, let's check this out. Looks like our one is not... I don't know, this is the trend as well. Right, so this is showing both. Let's reduce. Doesn't make much difference, does it? I'm not sure why they're not exactly overlaid. Where is the trend? Yeah, one. Okay, the trend should apply to both of them. They can barely... Yeah, so that's what it does. This filter order is for the frequency spectrum. It will change the levels. This kind of indicates what the trending does. The problem that the frequency spectrum is playing the same tone. Just changing the colors, what? Yeah, that's where the denoises playing up. Probably better to be removed. Might want to add more levels to check what difference does it make. Let's make it 5 and max 10. Yeah, this trending makes them overlaid. Yeah, this is the effect of the levels. Now, the problem is, as you can imagine, that during seizures it's behaving not quite the same. Yeah, it's not quite clear what's happening with the colors. When you switch, the wavelength denoises off. Understand, when it's on, it's fairly clear what it does. Now, the original is also before the trending. And the blue one is detrended and the wavelength denoised. That's why you see offset, DC offset. Yeah, so this can be a bit misleading in the sense that you can only see the denoising working well when making the window size smaller. And you can actually see the difference. It's not working well during seizure. Yeah, so this is what it actually does, just kind of smoothing the signal in different ways. Yeah, this is the epicenter of the seizure. Sorry, not the epicenter. You know what I mean, the epicenter, yeah. This is where the seizure is happening. Yeah, but it's hard to see what's going on with the denoising. Yeah, it's not too bad, but don't particularly like those buttons. Let's see what it says if we, you know, spin buttons. Alright, let's streamline the JavaScript code to make sure unnecessary operations are avoided, especially with regards to spin button or any other interactions. No, that's not what I meant. Can we replace spin buttons? It's these little annoying things. Drop menus are not great, but okay. But those are horrible. Spin buttons be replaced. The exact nature of the replacement you're interested in depends on your specific needs. Yeah, sliders are better. So in HTML, you don't like drop-downs, text, no custom. Well, no. Can we try sliders? Slider control instead of spin button. Yeah, window size. Okay, window sizing port. Yeah, this one. So replacing it with a type wrench. It's the same ID, but it should just work. Why the label is right in this one. Update the event listener to display the current value of the slider in the label. Okay, window size. Is it just called input? No, window size label we're doing. So it should update that number 10 when you're changing the window size. It's going up to 100. Yeah, it's all messed up a bit. Yeah, when I display, all spectrum should be turned on by default. The trending is moving the signal around zero. This is working okay. The number of levels is really only visible when you turn the trending off. Select, say this one, and it's channel should be a one second. Yeah, so that's what the level is doing. Yeah, refresh the page. That's the default view. Yeah, channel seven is default. That wavelet is default. Yeah, I'm not sure that's some sort of bug when you deselect this. I'm not sure what's happening with the colors. I would expect it to do something else. That's how the trending work. This filter order is actually only affects the frequency domain. It's not clear from here. You can choose to show the whole spectrum. Those three components should be at the bottom. We should rearrange the page. We should have channel number, window size. Can we do something crazy? Let's try this before, but it didn't really work. If we go up on the screen, just select the bloody thing. We pop it into chgpt2, so it will pop this scene. We'll think for some time. Let's see what it says. The provided front-end design seems to be quite functional for the visualization of EEG data, but there's always room for improvements both aesthetically and in terms of user experience. Yeah, that's right. Yeah, we have a color theme, actually. The thing about this stasis is that we have this standard styling for our pages. We have a global CSS file and a local one. In the local one, the CSS should be only applied to the specific components on this page. Everything else, like text background, things that will be taken care of by the global CSS file. So we'll have two of them. Yeah, so that's the global one and the local one in the static folder for this specific web application. So this is a bit painful to debug because it will look different in production. So yeah, so the color palette consists in spacing, typography, key interactive elements, legend, graph, improvement, mobile, responsiveness, yeah, we'll have to sort it out later. Instructions, there are some instructions in the bottom. This one. Yeah, we also want to change the layout. Should we do it first or should we have all the controls in one place? Let me know what you think. So in essence, because generally speaking, these three, there will be more related to the wavelet transform that reduces noise. Then we have the overall things like the channel, select and window size affecting the whole thing. Yeah, this one is not, the training is not affecting the frequency spectrum, which makes sense. Now it does a bit. This filter is only affecting the spectrum. That's how sharp the band pass filters are in the spectrum domain. All spectrum is affecting the spectrum, is adding that extra line frequency scales also only affecting the frequency spectrum. So in theory, all these from filter order. Okay, let's sort it out. Filter order, all spectrum and frequency scale should appear next to each other and frequency spectrum chart. Yeah, we have to say out below or something. Yeah, on different screens it will appear differently. I kind of don't really want to spend too much time on it. Yeah, it would be easier just to have all the inputs in one place. Then kind of doesn't make sense. Again, because this filter order only affects the frequency spectrum. I'd also like to remove, so we change the window size. Can we use co-pilot? But that pilot is just not anything whatsoever. Nothing useful at least. All spectrum. Why was it filter? Yeah, I want to change. Let's make sure the original signal. All spin buttons be replaced by sliders. Okay, CSS, HTML. So we have control group. That doesn't make sense. Grouping and layout. All spectrum and frequency scale controls horizontally. You can achieve this using CSS flexbox or grid layout techniques. Position these controls directly above the frequency spectrum chart to ensure they're easily associated with the chart. Style each control to be of similar height and maintain consistent margins between them. This will present a more cohesive look. Consider adding light borders or subtle shadow effects to each control to provide a hint of depth. We don't want a hint of depth. For sure, don't like it. Make the frequency spectrum chart update in real-time or with a slight delay as these controls are modified. This gives instant feedback to users about the changes they're making. That's already working fine. Clearly label each control. If space becomes an issue, consider tooltips or drop-down hints. As the screen size changes, especially decreases, these controls should stack vertically above the chart. This ensures a good experience across all device sizes. Let me change the window size input with a slider. We did it in the HTML. Now we forget to do this in JavaScript. Update the event listener to display the current value of the slider in the label. We know. Window size label. Size label. This one goes window size. Let's click out there. In the event listener section a window size input can add this. Let's see what it does. It's changing that now. It's a bit... I sure want this to be changed. This is better. Now we want it to be displayed top. In CSS back in sec. We're going to sound check. Can't hear anything. Sounds okay. Okay, let's finish this. So we're changing the spin buttons because we don't like them. HTML. This number. How many of those do we have? Two. Filter. Filter order. And levels. Just replace them by range. And now the window size. We should have... Yeah, get rid of play. Right. So. Many ranges. Levels. Window size. And of course. The file scroll. Now. Levels. The label goes first. Size. That's working. Okay. So that's HTML. Installing. You can style sliders using CSS to match your design. Here's a basic example for styling. You can use JavaScript of endlessness, similar to how you capture values from spin buttons. This. Check box. Check box is replaced by buttons. Again. Check. Boxes be replaced. See if it gives us some options. Toggle switch. So I want a toggle switch or a button. Right here. Toggle. Doesn't work, does it? Yeah, well nice to have icons. Icon's in there. Okay, so. Replace when it denies the toggle switch. That won't work. With a channel script. Channel select. Filter. To replace this. More specific. Toggle switch. Is this? All for the switch. All. Yeah, I'll change the colors in sec. In channel script. Yeah, we have a different name now. And to replace. We'll be replaced by a visually appealing toggle switch while retaining the same underlying functionality. We'll still use that. Set. If. Fault. Not at all. Then. Go off. Rest, is it? And remove that. Is it error? Of course. 20. It's called denoise toggle now. It's not doing anything right. It's not giving any errors. Anything else seem to work. But that's okay. It's a nice little button, but it doesn't stop working. Yeah, we should know. I have no mention of where the noise changes to toggle. Can get rid of that. Change. Doing much. Yeah, it's not changing the trend through filter. All spectrum. This is not an agate request. Right, this should be changed to toggle. It just remained the same thing. Right. And in html this is not a check box. It should be passed in the get request. It was changing the colors. Right. That number should be in span and wavelet denoise in get data. And we might not need that. It looks like it's passing in the get request. Like everything else. Okay, let's do this quickly. Let's actually try GPT-3 for that. We're probably going to hit the limit pretty soon. The 50 messages per 3 hours. Let's say this is for reference only the code and do not confirm reading the code and don't generate anything else. This will be pretty amazing. I suspect that confirmed I've read the code. That's pretty amazing. It actually worked. Confirmed. That was the html. That was the JavaScript. We added the html prior and we have the python code and confirm reading don't generate anything and same here and now wavelet denoise button it doesn't work. What's it called? Slider? Toggle. Toggle switch. Let's see what it says. The provided CSS contains styling for a toggle switch. Switch class with a slider. There isn't any JavaScript provided to handle the behavior of the switch. Why not? For the wavelet denoise toggle switch to work, you typically need html. We have the html element. JavaScript to handle the toggle action eg. I'm pretty sure we have something in the noise. Then integrate the toggle state into your flask app request when getting data. Okay. That's what we had before. Anyway, so that should be fine. However, from the flask code you shared, it seems that wavelet denoise parameter is already expected in request. Therefore, ensure the toggle switch in your front-end correctly sets this parameter when making a request to server. Check if the html and JavaScript for the toggle switch is properly set up. Ensure that the state of the switch on, off correctly modifies the request sent to the flask server. Make sure the flask server correctly processes the wavelet denoise parameter and applies or doesn't apply the denoising accordingly. I'm going to do this for me. See above. Is this specific stuff or generic? You have the code. You have the code above. That's getting annoying. It's the problem with the name or something. Come on, are you choking me? I just gave you the code. Funny. So I have this that in html this and in python I think it's the order of things. Flask this case we need to consider. Ensure that the JavaScript code that initializes the checkbox and sets the event listener runs after the html is fully loaded. Yeah, we have the downloader event that should be fine. Ensure that the fetch data and render function is correctly defined and doesn't contain any errors that might prevent the listener from being executed. This one. Yeah, we're not using playback. At the moment all that function can go we have the element by this section. We have a wavelet denoise there. Okay. In fetch and const parameters it wavelet denoise as well. Right, now it's working. Pop, pop, pop, pop. Okay, I think we can run for today. We need quite a bit of progress. Yeah, I want to later change the detrend button also into let's forget what's called a switch. Switch, switch, switch. Should we do it now? Do we have some time? Probably not, but we'll do it anyway. Ah, it's actually working if you click on the text as well, that's handy. Yeah, we need to break down the inputs into different parts. Two, three parts inputs should begin into three parts and spectrum, that's right. Smart boy. Okay. Filter order channel number window size on top of the page filter order whole spectrum frequency scale should be next to each other should be next to frequency spectrum chart then you have trend noise does this have a label should have a label is to give errors, I forgot about it. Yeah, we'll continue this next time let me know if there's any questions is let me know if you had the chance to review this slide and this new tool will soon appear on it as well for you to play with look that's the previous one, just a simple scroll through the data and currently in this one will be essentially an advanced version of it so hopefully we'll finish it next time don't forget to you know what to do on youtube you know, subscribe like, comment tickle the google the youtube algorithm