 And let's start a new chat. So we will do 3.5 first and move to 4, we have both open and running. We have GitHub Copilot running in the code. So finished this one earlier this week. The pretty basic, a real EEG, sorry for the ads. A real EEG, you can select your channels, the 16 channel EEG recording, intracranial, with seizures. You can scroll through the file, you can select your window size. Let's select here. Yeah, this is not great. Don't like those controls. They're not fun at all. In the info, let's say make a note to use. What is this called? Control Shift C. Yeah, those spin buttons. Make sure to use spin buttons only if absolutely necessary. Right, this un-desimated thing is actually right. So okay, let's do it step by step. So we're not getting all over the shop. Right, so this is the tool that is working. Now we're doing a similar one that looks more like this. The main difference is that that also have 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. We can play around with it. Provide your feedback. Now the problem is, the problem is, just start with 3.5. There's quite a lot of problems, but mainly, I wish there was a way to move from 3.5 to 4 in a less, in a more seamless way. So we don't get to the 50 messages every three, three 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 goal. So this will give us a description. JavaScript code you've provided is an event listener that executes when the DOM content is loaded. It sets up various event listeners for different elements in your web page and fetches and renders EEG data based on user interactions. Right, that's right. Here's the breakdown of what the code does. 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. Yeah, let's do those, see what it suggests. EEG data visualization. Here are some possible reasons and suggestions for improving it. Right, well, that's actually interesting. Let's see what it says. Wavet selection. The choice of Wavet can significantly impact denoising effectiveness. Different Wavets are suitable for different types of signals and noise. Experiment with different Wavets to find one that works better for EEG data. We have a Wavelet selection option, a Wavelet type selection. Now with GPT-4, 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. And that's an interesting white memory 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 actually try to optimize for those. My mouth is barely moving. It's not very great. We don't have the playback feature at the moment. One thing I noticed if GPT-4 or 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 GPT-3.5, see and compare the results. This is back to 3.5. What else is it suggesting? This is not a bad suggestion. So we're good. It's actually a pretty good suggestion. So let's load a flash application and see actually what it looks like at the moment. Right, this is what we have. And yes, considering, yeah, we could just plot both of them. Another option would be to have options for both displays. So have, say, red and blue. Well, then the problem would be how do you do those in different colors? I guess we could do another tool later that just has the time domain where it's comparing side by side the noise than the original signal. 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, when it's a picture. Decomposition levels. Okay, that's pretty much similar to what the GPT-3.5 said. GPT-3.5's present 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 underscore data is a common one based on the universal threshold. However, there are other thresholding methods such as soft and hard thresholding, and you could adjust the multiplier to change the threshold value. Yeah, I 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 on the original eG signal, is displayed, is grayed out, and the denoised signal is in color. The denoised on by default. Okay, let's do step by step, how 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 NListener, you can set the check property of the wavered denoised checkbox to true. html, no default option selected, which is unusual. Okay, so we changed it in the JavaScript, it should be fine. Adjust the default value for the wavered denoised 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, the wavelet 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 denoised 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. Right, so in the back end, the Python code in get data, prepare the database on the original and denoised signal. Right, so we have a response, 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. Can generate the whole, generate the whole, we should say regenerate, they complete, they get that root 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 dataset channel. Yep, that's all the same true log wavelet denoise. By the way, not using frequency scale yet. Even though pretty sure it's working, okay. Yeah, I want to check linear. Yes, it's, I don't know what's talking about, it's a leading problem. So 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? JSON file, original IG data, the trend. Okay, let's move it, move it long, quicker, otherwise we'll never get anywhere. Just checking that it didn't miss anything major, sending with return JSON file. So we can place this whole thing. Yes, we need to find 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 grayed out if wavelet denoising is on, and the denoised EEG signal will be in color blue. If wavelet denoising is off, the original EEG signal will be in color, and the denoised signal will be grayed out. Okay, that didn't work. Get any, don't get any errors in the terminal. Thrill load, type error cannot read. It is, you know what I'm using. Okay, so the vital code returning response data, let's check that. Lotly new plot, just call data. Response JSON. Okay, what's going on? Let me generate stuff. Let me regenerate this response. I don't like it. No, it's like it was working as second goal, right? So, check the error again, that JavaScript seemed to be more specific response. Fully integrate the changes made to the backend code. You will need to update the JavaScript, JS code, especially if you are using any front-end library or framework to display the data. Here's what you need to consider. Handling multiple EEG lines. The updated backend now returns two signals, original underscore signal and denoised underscore signal. You need to ensure that your JS code can handle and display both signals on the same plot. Currently, I don't have an update plot function. Okay, 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. Yep, need to plot both signals. That makes sense. So, this one has two signals. Wait, how is it different from what we already have? Why do we have new plot? It doesn't make sense. Signal X, signal Y, signal name. So, there should be two signals in there. So, that's the raw EEG. Wait, where is the original? It should be original and denoised. Plot function to render both the original and denoised EEG signals. Right, so the both included rest of the plotting code. I don't have anything. It's meant to be the frequency domain. So, that would remain the same, at least for now. Yeah, let's check. Right, 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. Okay, 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. Yeah, you can barely. Right, 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 actually displaying the same tone as 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 make. Let's make it 5 and max 10. Yeah, this is the trending. Makes them overlaid. Yeah, this is the effect of the levels. Now, the problem is, as you can imagine, yeah, that during seizures it's behaving not quite the same. It's not quite clear what's happening with the colors. When you switch wavelet denoise off, I 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 wavelet 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. And it's not working well during seizures. 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 episode. You know what I mean, the episode. Yeah, this weather seizure is happening. Even it's hard to see what's going on with the denoising. Yeah, it's not too bad. Don't particularly like those buttons. Let's see what it says if we get those spin buttons. All right, 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. We replace spin buttons. It's these little annoying things. Drop menus are not great, but okay. But those are horrible. And spin buttons be replaced. Certainly. The type of control you're referring to, often known as a spin button, is commonly implemented using the HTML less than input greater than element with type equals, number. 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. Yeah, we try like this, the slider control instead of spin button. Yeah, window size. Okay, window size input. Yeah, this one. So replacing it with attack branch. It's the same ID. This should just works. Why the label is behind right in this one. Update the event listener to display the current value of the slider in the label. Window size. Is it just called input now? Window size label. So it should update that number 10, when you're changing the window size, it's going up to 100. It's all messed up a bit. Yeah, when I display whole spectrum should we turn it 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, it's channel should be a one second. Yes, that's what the levels are doing. Yeah, refresh the page. That's the default view. 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 select choose to show the whole spectrum. Those three components should be at the bottom. We should rearrange the page. Should have channel number, window size. Can we do something crazy? We tried this before, but it didn't work. If we go print screen, just select the bloody thing and we pop it into chgpt to how it will pop this in. We'll think for some time. Let's see what it says. Yeah, we have a color theme and actually the thing about this stasis is that we have this standard styling for 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 background things that will be taken care by the global CSS file. We'll have two of them. Yeah, so that's the global one and the local one in a static folder for this specific web application. So this is a bit painful to debug because it will look different. When in production. So yeah, the color palette, consistent 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. In the end slide. Display the current. Yeah, we want to display the current value. Yeah, we also want to change the language. Should we do it first or should we have all the controls in one place? Let me know what you think. So in that sense, because generally speaking, at 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 the the window size, affecting the whole thing. Yeah, this one is not the trending is not affecting the frequency spectrum, which makes sense. Now it does a bit filled this filter orders 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 of the also only affecting the frequency spectrum. So in theory, all at this filter order. Okay, let's let's sort it out. A filter order all spectrum and frequency scale should appear next to each other and frequency chart. Yeah, we have to help 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. It would be easier just to have all the inputs in one place. But then kind of doesn't make sense. Again, because this filter order only affects the the frequency spectrum. Those like to remove so we change the window size. Can we use co pilot? But that pilot is just not to anything whatsoever. Nothing useful, at least all spectrum. Why was it filter? Yeah, one change. Make sure the original thing all all all spin balance be replaced by sliders. Yes, CSS HTML. So I have control group. Doesn't make sense. Being in layout group filter order whole 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. If feasible, 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. This one goes window size. Just click on there. And in the event listener section, we have window size input. Let's see what it does. So it's changing that. Now we want this to be changed. This is better. Now we want it to be displayed top. So in CSS, okay, let's finish this. So we're changing the spin buttons because we don't like them. HTML. Replace the input type from number spin button to range slider. This number, how many of those do we have? F2. We filled the order and levels. Just replace them by range, the window size. So we should have, yeah, get rid of play. Right. So many ranges, levels, window size, filter order, and of course, yeah, the file scroll. 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. Live styling for now. To capture the value from the slider, you can use JavaScript event listeners, similar to how you'd capture values from spin buttons. Okay. And this, what it does is 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. When you toggle, it doesn't. It would be nice to have icons in there. Okay. So replace when it denies, give the toggle switch at one, at one work. Would it just create, channel select, filter, replace this specific toggle switch. Is this all for the switch on? Yeah, change the colors in sec in JavaScript. If you were using the original check box, wavelet denoise in your JavaScript code, you need to replace any references to it with the new wavelet denoise to the ID. For instance, yeah, we have a different name now to replace. Now with these changes, the original check box for wavelet denoise will be replaced by visually appealing toggle switch while retaining the same underlying functionality. We'll still use that. If fault go first, is it? Is it error? Of course. Right. That's actually, it does work in the same way. In JavaScript, 120, 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 wavelet denoise. We changed it to toggle. You can get rid of that. Change to image. Yeah, it's not changing the trend through filter whole spectrum. This is not an agate request. Right, this should be changed to toggle. It just remained the same thing. And in HTML, okay, this is not a check box. It should be passed in the get request. Wavelet denoise, it was changing the colors. That number should be in span. Wavelet denoise, be in get data. And we might not need that. It doesn't look 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. I'm probably gonna hit the limit pretty soon. The 50 messages per three hours. I would say that this is for reference. Only read the code and do not confirm reading the code and don't generate anything else. This will be pretty amazing. I suspect that the confirmed, I read the code. That's pretty amazing. It's actually more confirmed. That was the HTML, that was the JavaScript. We added the HTML prior and we have the Python code. Confirm reading, don't generate anything else. And same here and now. Wavelet denoise button, it doesn't work. Now what's it called, Slider? A toggle, toggle switch. See what it says. The provided CSS contains styling for a toggle switch, switch class with a slider. But 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. Okay, I'm pretty sure we have something to denoise. Then, integrate the toggle state into your Flask app request when getting later. Okay, yeah, that's what we had before in my search with Python. 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. Okay, can you do this for me? See above. Is this specific stuff or generic? You have the code, have the code above annoying. It's the problem with the name or something. Come on, are you joking me? I just gave you the code. Okay, I'm going to get funny. Yeah, so I have this, that, Js, that in HTML, HTML, this, and then Python. I think it's the order of things in Flask. This, okay, so 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. You can achieve this by placing your JS code at the end of the HTML body or using a DOM content loaded event. Yeah, we have the downloaded event defined. 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. Add this one. Yeah, we're not using playback. The moment all that function can go, right. 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. Okay, I think we're going to end for today. We did quite a bit of progress. Yeah, I want to later change the detrain button also into, let's forget what's called, switch, switch, switch, switch. Should we do it now? Do we have some time? Probably not, but we'll do it anyway. 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. We'll do three parts. Inputs, shoot in into three parts. And spectrum, that's right. Fill the order, roll, channel, number, window size, 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, wavelet denoise. Does this have a label? It should have a label. It's two key variables. I forgot about it. Yeah, we'll continue this next time. Let me know if there's any questions. Let me know if you had a chance to review this site. That's the previous one, just a simple scroll through the data. And currently, and this one will be essentially an advanced version of it. Don't forget to, you know what to do on YouTube. You know, subscribe, like, comment, tickle the Google, the YouTube algorithm. See you next time.