 Okay, we need to possibly simplify, so we have this EEG A music, so we want to turn EEG into music There is reason why I do it, it's not just a game Well, it kinda is We're having a couple of issues Then she was also having a too complicated project structure Yeah, we actually don't do upload and mount I'll leave this for now, dashboard I thought my index HTML is the dashboard I was just different from index HTML So I had data folder, data folder can be in study, can it? I need utilities, we have filter, EEG, music conversion Load data, what else do we need to do? Generate those dashboards for more interactive to conduct EEG music The dashboard could display more detailed information about user EEG data Okay, might leave it for now Now currently we are having a problem in main.js Probably enough to regenerate it It's now thinking forever Right, that's quick, I don't know what happened there Then with comments explaining each part Okay, now we have a fetch EEG data K main.js document, event listener Is this event listener? Yes For the whole document, yes This one is using fetch EEG data What's my actual endpoint? Don't actually know it's the actual endpoint URL path for the flask route that serves the EEG data Assuming you have flask route setup to provide the EEG data You would replace if the actual route For example, you have flask get EEG data No, I don't have get EEG data So this would call load data, would it? In a JavaScript fetch Can it just give me, I won't be able to integrate the whole thing Give me the whole main.js I fixed the Python, not fixed I changed the Python code as expected And this bit in GitHub co-pilot It's such a no Let's select load data The utility's folder Yes, that is correct I think, yes, this is complete I'm sure it's better than what we had So it will be main.js, is it? Yes, charges is already in HTML So that should be fine Main.js How do we fix this? Don't need to explain the whole thing Just care let it run for a bit Yeah, this bit we need to sort this bit out Is that it? Is this all we need to do? It's not actually running Okay, having an error This is load data And we're getting the following error Can you fix this for us? We actually need a function in there Can pretend I knew that But no, I did not In returning data Looks legit Run, surprisingly yes Main.js I get that Where's that? Get the gdata Some error handling Right, get this one Convert data frame into format that can be serialized into JSON Yeah, I had this problem before I don't remember how to solve it It's suggesting to convert two common projects To list or data frame To dictionary So converting to dictionary or list Which one makes more sense Probably doesn't matter How did I do this? To list In the spectrogram This is byte encode Yes, we did To list Okay Okay, go with lists Get the gdata Chat is not defined Main.js Why is it giving me all this? gds21 egchat Sticklet Button gchat Anyone? I wouldn't know how to fix this Main.js Chat.js New html I'm pretty sure it's already there Main.js I know it's not there In header Pretty sure we have that already Double check Yes, check of the types errors Console log Chat object This will help me verify the chat It's available It's loading forever It's showing something Get rid of that about us I don't know why it's there html Not displaying anything JavaScript fetch htdata Console log Empty array That actually has stuff in it Too much Too many This is the 16 channels The data is there I don't want to pop this in But the chat configuration It's back on the sediment Chat configuration It's a simple array Chat configuration might look like It's not as simple as 16 channels It's also why it's loading for so long The egdata has 16 channels Can we load only one? They have names I'm not sure they have names I'm not sure channels have names Can we check and also display The first 10 rows of data Yeah, we did this before for now too But we'll do it quickly again We need to know what the data structure is Okay So in Python This is in load.princl Names egdata But it's not called that It's not called egdata It's just called data No, we just have the numbers Or we just have numbers And that time array So in load data Read of that for now Selecting channels 0 Again, this thing is not called egdata It's called data You should know that Control is Obviously we're not there We can't just think Chalice script code In load egdata Get context egdata New chat Line Okay Data Load egdata egdata Because it's now called something else, isn't it? Get egdata egload Don't need to do Do list again Right That's working And display about 100 and be able We want to display Say, 100 points at a time And also be able To move back and forth Through the file Through the channel data Using a slider of some sort Yeah, I wish I had a teacher like that Back in school And maybe I would Loved programming egdata In load data I've selected Existing code That's the returning channel That I want an option to select The channel as well But we'll go with this On now With the start Don't have a start Do a front-end Chalice script modification I find the Chalice script input This slider Loading for some time Don't need to display The egdata We'll need to do Some sort of the training The training HTML Over here Some sort of slider Slider can't be made Wider Wider slider We want the wider slider Chalice script Update Data Another function H Data Start Returns Patch egdata What's loading For quite some time PPPP Problem Problem Problem It's working Why is it loading forever? Yeah, this one There's something Something low A wrong logic That it's taking forever To load reload Doesn't sound to be played As you move this slider So you can do like a dj In one What's option two And destroy the chart Before creating a new one Date The existing chart I thought we'd do that already Yeah, because I think it's called Chalice script Is this okay? I'm getting that I'm going It's going places images talking.com DOM content loaded Okay, so we have the checked console logs And there's this one Right, so that's loading Should be scrolling through the file It's doing something Just takes forever It is scrolling It is super slow Expect this will work Yes, that's fine Yes, it's working It's just really slow Can hear the CPU going Can reduce Should we reduce the window size or something Anyway, so we Want to be turning this Into music Okay, so we want to be turning That EEG signal into music But first Can we also add an input For selecting the channel number And also An input to change The window size It's loading forever to begin with It kind of looks like the stock market As well, doesn't it? I think I know the problem Is in JavaScript that the Event should be changed Yeah, it's this event bit Let's see what the GPD says Channel, modify HTML Yeah, we need some more inputs It's a drop-down list, isn't it? The window size It's the default We need a default We have the data slide It's okay So the channel selector Yeah, we can have them All the controls at the bottom Can we? Or the top? Or the side? Well, and why the screen Should be on the side On a phone? Well, yeah It's a whole different story Let's put them on the bottom We'll be after the scroller The data slider So we have that We have window size And the slider Yeah, the slider can change Just format the document Right, channel It's not updating, is it? It doesn't look like it's actually Taking effect Because we need to update the JavaScript We haven't done it yet So in update data I'll just replace that hhg.startcount So I have channel as an input That's great I think so It's still loading It was some time to begin with It's 10 Right, channel 1 Should be different Can hear the CPU doing something Yeah, I'll need the training I can remove the access there Don't really need them We actually have another tool Where you can review the data This one Specifically turning this into Well, trying to turn it into music That's probably a seizure Onset Yeah, there should be a seizure somewhere In the middle of this file Could have loaded much quicker I reckon Would GitHub co-pilot do the job Yeah, ideally we'll have some sort of It looks like a DJ DJ set But for now Okay Yes, there are 16 of them And yes GPT-4 could have done the whole lot Yeah, there are only 60 It should be 8 Let's reload this quickly Should change the plot Do I have any errors? Or is it still loading? There are errors No, but that's okay Yeah, maybe it's low Because we're actually Displaying the data points Where do we do that? That must be JavaScript That's what it's called A log Log something Yeah, console log Can get rid of that Maybe it will be a bit faster Am I getting cash security lab? Where is the network? Yeah, when I do this Sending another GetRequest That's working okay When I do this It's also sending a GetRequest The chat The chat is not updating more It's a bit odd But okay Okay, we need to do more stuff Except channel parameter So in Flask Now that's the definition of GetEGData So it should be Now that's loadData GetEGData In here StartCountChannel DefaultChannel0 ChannelEGData Replace with channel EGData SE That's the same Take your loadData CountChannel And select the data Yeah, this is data Not the gdata I don't know why it's getting confused Considering it's wrote the code itself It's still loading forever That's also because I'm getting an error That shouldn't be happening Where is that coming from? HTML What's the problem with HTML? It shows a chance like that It has a default value When the page loads Okay, I'm pretty sure one of them Already has a problem Let's check Let's check Java script ChannelSelect DocumentList What is this? HandleList HGGata Why do this? Do I add a channel one like this? No Back in the saveCut To handle cases where channel parameter Might not be valid integer Should be a valid integer What's the problem? Let's do the HTML And this one Select the channel Still doing something Three errors ChannelNumber is undefined What? That's all GetEGata Okay, we need to invite GetEGata Yeah, we'll have to continue this Next time