 we're doing this cg data viewer it's based on data from this kegel competition harmful productivity classification don't worry about the competition itself because we are using the correct microphone so currently yeah we have everything working except the spectrogram so we'll be loading the spectrogram the spectrogram is in the original data so currently we're trying to use charts j chart j s to plot the spectrogram which is obviously not a great idea let's ask i forget what's called the the other library what is the can chart j s plot the spectrograms if not what would be what would be a better library to use it should be a simple question for github co-pilot because it doesn't need the context of the whole thing spectrogram yeah we have four spectrograms okay apparently it was too difficult to answer for co-pilot all right plotly yeah that's the one we want to use yeah we had this sample code let's shut the flask application for a second so we're making a flask application we had this test a chart j s to plot the spectrogram actually showing something useful ah sorry that was a html file so it looked like this it's kind of okay not quite but okay but yes we were essentially weren't able to replicate this for the spectrogram unfortunately why my camera is frozen it should be better i don't know there's two cameras i have connected via usb it's probably what happens when you connect microsoft the gear well i mean they're not making any gear and labeled microsoft the webcam to a linux machine not a good idea right so we had this example in html i forget how we already have a tool on by any chaos.com by the way if you haven't checked by any chaos.com yet please go do so but this tool that does show e g spectrograms that is using a plotly so it's working fine so in this case we're meant to have four of those for different positions on the brain left lateral right lateral left parasagital parasagital and right parasagital sorry for mispronouncing these words hopefully you're not an expert if you are an expert too let me know i'd like to collaborate spectrograms and then we have frequencies for them so they're kind of low res they shouldn't be too many of them in the data and they're meant to be 10 minute long a spectrogram of a 10 window a 10 minute window and we have the frequency in her so we're not passing at that data correctly at the moment okay so a couple of issues the the spectrograms are loading forever and eventually give an error so even if i tried to load just one spectrum instead of the all four that we have okay what's happening is yeah the plotting is not correct i'm wondering if the data being passed correctly or not can we actually check the relevant part of the code for this and update it a worst case we'll need to move to using plotly js to display the spectrograms correctly let's pop it into both bots yeah we have full disclaimer we have the bots doing everything for us we can't code and yes it's also co-hosting the youtube channel so hopefully it can tell you some jokes relevant jokes not like haha hard jokes let's read this one because i've been talking enough already two main areas one data verification check if the spectrogram data fetched from the back end is correctly formatted and valid for plotting there might be issues with the data structure data types or the presence of unexpected values like nan null or infinity two chart rendering ensure that the data is being correctly passed to the chart rendering function and that chart.js or any other library you might use can handle this data format efficiently here's a step-by-step approach check data structure and integrity log the data in your fetch and display spectrogram function right after you receive the data from the back end log it to the console this way you can visually inspect the data structure data format ensure the data is in a format that your plotting library can handle for spectrograms this typically means arrays of numbers possibly organized by frequency bands or time steps validate the chart rendering process chart data preparation and get chart data for side check how the data is being prepared for the chart make sure the data sets are correctly constructed with appropriate labels and data points error handling add more robust error handling around the chart rendering code catch any errors and log them to see if the rendering process itself is failing simplify the plot as a test try rendering a very simplified version of the spectrogram with hard coded minimal data if this works the issue might be with the actual data being passed considerations for moving to plotly j s complexity of spectrograms if chart j s struggles with the complexity or size of spectrogram data plotly j s might be a better option it's more powerful for handling complex and large data sets implementation switching to plotly dot j s would mean adapting your data format to what plotly expects and reworking the rendering logic plotly provides more flexibility and interactive features which can be beneficial for eeg data visualization debugging steps isolate the issue try isolating the spectrogram rendering in a simple separate html file this helps to determine if the issue is within the chart rendering logic or somewhere else in your application browser tools use browser developer tools to monitor network responses console logs and potential javascript errors that might hint at what's going wrong by going through these checks you should be able to pinpoint whether the issue lies in data fetching formatting or in the rendering process once identified you can decide whether to fix the existing implementation or switch to a more robust library like plotly j s for your spectrograms biased language saying plotly is more robust isn't it that's good to know so question is should we continue with chart j s or just move to plotly a straight away considering we have this spectrogram working already i mean you can do heat maps with chart j s like you can see here yeah what do you think what do you think by the way only talking to the robot because we don't have a human on air we're also using github copilot if it's easier for gpt4 to provide prompts for github copilot to actually do the coding that would be okay yeah copilot doesn't have the overall context it's giving very narrow kind of responses don't understand why the data format between chart j s and plotly j s will be much different yeah we could fix the current format we have a get spectrogram side now that spectrogram id we have the consensus options that's the different labels have the electrodes patient id right it's a very long list that's the label for a current eg id have a spectrogram id uh what's that one those are the sub id's with the offset time that's okay we explained this in previous streams but that that's pretty straightforward the each label is for 50 seconds and in this case you have just over a hundred seconds of data so yes it's not clear why you have 18 labels in there already already complained about this in the past so we leave it leave it at that label for specific id is not working so that's something we need to fix because each sub id should have a label as well so this will be something simple to start with i have get the spectrogram patient id yet this get label we have a sub id that's actually being used yes just need to make sure or that in javascript we're actually using this id as well are we don't think so here's the response it's with data not bound refuse to connect anyway they have a problem with the spectrograms well right it's not running the application it's important when testing the application to actually run it yeah every time i do this drop down even if the flask application is not running it's loading forever what was that one for a sec um actually run the application that would help right now the label is working okay yeah yeah now it's actually populating okay as well so the spectrograms are currently being displayed when load a different sub id yeah so we get the plot the plot is linear instead of uh let's call javascript here i can close it javascript with the chart have lots of charts bottom display chart for side get chart data we have fetch and display spectrogram we can get rid of that get spectrogram id is working okay i'm pretty sure we will double check everything okay what else yeah so this bit the canvas create a chart and store it and it charges yeah we have some a trouble with those can let's say d chart data that's okay we have destroyed it's fine that's for re plotting now this chart should it's for sure they have a problem is time hopefully time is being passed correctly i don't think so we'll test it in a sec okay can we focus on how the spectrograms are being charted there's a couple things that are obviously wrong they should not be lines they should be boxes of color with intensity yeah you know what spectrograms uh like spectrograms yeah let's see can get anything out of it sometimes refusing uh to i don't know what's about i was just about to say it's sometimes refusing to actually generate a code in this case yeah so it moved to plot 2 using plotly it's kind of made that decision by itself that's interesting i see what you're aiming for spectrograms are indeed more complex visualizations that typically require a display of color intensity over two dimensions time and frequency which differs from the line charts you're currently using while chart js is versatile it may not be the best fit for spectrograms especially if you need to display them as color-coded heat maps that's where plotly.js shines plotly.js can easily handle such complex data visualizations including spectrograms it offers features for creating 2d color maps where each cell's color represents an intensity value which sounds like what you need for your eeg data here's a suggestion on how to proceed one switch to plotly js for spectrograms given the complexity and requirements of your spectrograms plotly js would be more suitable it's well equipped to handle heat maps and more complex visualizations that chart js may struggle with two adjusting data format while switching to plotly js you'll need to adjust the format of your data to suit plotly's requirements the good news is that plotly.js is quite flexible and can handle various data structures three redefining charting function you'll have to redefine your fetch and display spectrogram and related functions to work with plotly js this would involve creating a plotly heat map plot instead of a line chart four implementation example a basic plotly js heat map setup for a spectrogram might look something like this javascript plotly.new plot your diva d z data matrix 2d array of your data type heat map color scale veritas or any other color scale title spectrogram zaxis title time yaxis title frequency where data matrix is a 2d array with intensity values z axis and time and frequency are your x and y axes five handling asynchronous data ensure that your data fetching and plotly rendering logic are well handled within the asynchronous flow of your application six debugging as always thoroughly debug each part of the new implementation to catch any issues early seven enhancing user experience plotly.js also provides interactive features like zooming which could enhance the user experience significantly especially for detailed analyses this switch will certainly require some rework in your code but given the requirements for a proper spectrogram display it seems like a worthwhile investment it will also open up more possibilities for future data visualization needs in your application well yeah it sounds like we we are moving the bot made a decision we are moving to plotly so there was no like a plotting spectrograms with chart js anyone have ever managed to do it to let me know question question so i suspect we'll have to rewrite fetch an update let's see yes so from this point on on board we have a fetch an update chart get labels it's refusing to write the full code still need to get spectrogram it extract the frequency from column name we do need that it just can be generic stuff the spectrogram is not currently working can we change the code to use plotly js for the spectrogram plotting there should be four of them yes so what's his face their face her face uh copilot is writing code obviously that's not it certainly to transition your spectrogram visualization to plotly for a more appropriate and detailed representation you'll need to adjust the fetch and display spectrogram function and any other related parts of your code here's a step by step by step guide to modify your existing code to use plotly js for rendering four spectrograms one include plotly js first make sure to include plotly js in your html file you can use a cdn for simplicity html script sarco plus plotly at latest start from modify fetch and display spectrogram function you need to adjust this function to create a heat map with plotly js instead of using chart js here's a simplified version of how you can do it javascript async function fetch and display spectrogram spectrogram id side try const response equals await fetch slash fetch spectrogram spectrogram id equals spectrogram id and side equals side if response dot okay throw new error failed to fetch data response dot status const data equals await response dot json if data dot time array dot is array data dot time console dot error time data is missing or not an array for side side return const z data equal this will hold your frequency data object keys data for each column name equals if column name dot starts with side z data dot push data column name assuming each column is a frequency band const plot data equals z z data type heat map color scale veritas const layout equals title spectrogram side x axis title time y axis frequency plotly dot new plot spectrogram canvas side plot data layout catchel dot error error in fetch and display spectrogram error number three html changes ensure that your html has appropriate div elements to display the spectrograms for instance html disk spectrogram canvas lf spectrogram canvas rlv divide each spectrogram canvas lp number four adjust css if needed depending on your current css you may need to adjust styles to accommodate plotly charts five call fetch and display spectrogram for each spectrogram you'll need to ensure that this function is called for each of the four spectrograms after fetching the respective spectrogram id your existing code seems to already be doing this but make sure it aligns with the new function structure six testing and debugging after implementing these changes thoroughly test your application check for any console errors and ensure that the spectrograms are rendering as expected this approach should enable you to transition from chart js to plotly js for your spectrograms providing a more suitable visualization for your eeg data you need to make sure yeah copy pasting is a skill isn't it and let's see so we have this in update related data we should have the same a when loading this should be an initial loading this doesn't go here we actually have a function this something you need you need to need to need there should be a need data fetch and then a need plot something i don't think we have that and that's obviously wrong it's not updating properly fetch uh yeah this one yeah does it or yes it's actually we should have five charts let's clear the terminal go to the flask abscript run it load it problem console lots of errors fetch in display spectrogram why the eeg chart is not loading as well check that one spectrum id ll that's not cool assuming the spectrogram id is correct is it safe to assume so yeah that's spectrum id a bit weird okay the spectrum id was wrong it's wrong where did it get the number from that must be the eeg id not spectrum id yes it's an eeg id not spectrogram id silly goose fetch spectrogram silly little goose get this would be in a java script here we have spectrogram id we're feeling it's stuffed up no it is correct something spectrogram id back to java script spectrogram id okay it's just called differently oops okay we have it called 12 times i'm warping 12 times why yes we get the spectrum id yes that should be correct we're returning spectrogram id something wrong for some reason java script 271 that's the one yes something wrong okay this might be this may be converted to async function that's okay we don't worry about that it makes sure the spectrogram id is working correctly yeah this get spectrogram id should have been a called before we fetch the spectrogram that's for sure and there is a problem the get spectrogram id should run before fetch spectrogram text to speech am i using the right microphone uh yeah it should be okay should have been obvious okay function get spectrogram id function i won't be able to i won't be able to fix it myself is sorry for the can't know what might be wrong a synims that the fetch spectrogram is trying to load a spectrogram based on eeg id instead of based on the spectrogram id also the get spectrogram id seem to be running after the fetch spectrogram shouldn't that be the other way around could you fix the code yep yeah the initial fetch initial data fetch is there initial float as well i don't think so get spectrogram id is based on the eeg id that sounds legit let's read it as well certainly it looks like you've identified two key issues in your code first the fetch and display spectrogram function seems to be fetching data based on the eeg id instead of the spectrogram id which could be causing the 404 error second the sequence of fetching the spectrogram id and then displaying the spectrogram needs adjustment let's address these half slacker one correcting the fetching logic for spectrogram data update fetch and display spectrogram to ensure it uses the correct spectrogram id this might involve modifying how and when you call this function to adjust the order of function calls you should ensure that the spectrogram id is fetched before attempting to fetch and display the spectrogram data here's how you can restructure and correct your code a updating the fetch and display spectrogram function make sure this function is called with the correct spectrogram id it looks like you might be calling it with an eeg id instead modify the function signature if necessary to make it clear what type of id is expected tariff b correcting the order of execution you need to fetch the spectrogram id first then fetch and display the spectrogram this might involve restructuring the flow of your async calls here's a revised approach javascript function initial data fetch const eeg id equals document get element by id eg alu if eg id fetch data and update chart get spectrogram id again i don't know why it's reading the code instead of um just the comments the ava chat the ava text to speech well reads whatever you want but also it's actually disappeared you need to fetch the spectrogram id first then fetch and display the spectrogram yeah this one and if you do it for the whole um for the whole response that won't actually read the code which is better but it's need that last bit in this revised code initial data fetch now correctly fetches the spectrogram id first and then calls fetch and display spectrogram for each of the sides with a fetched id make sure your backend is correctly handling that get underscore spectrogram underscore id endpoint and is returning the appropriate spectrogram id also verify that your fetch underscore spectrogram endpoint is set up to respond with the correct data when queried with a spectrogram id after making these changes test your application thoroughly to ensure everything is working as expected debug any issues that arise paying close attention to the network requests and responses in the browser's developer console i'm sure if you we don't need to do that uh we have chart we don't need that actually because that's still from uh still coming from chart js uh we are not using chart js anymore we're sure we're not importing anything do we no are you actually looking at the code or what did i select the whole code not sure we are still trying to figure out how to use github copilot properly i mean a gpt just works in a better way this function does have to change because this is stuff when we were using uh um chart js sure if we still need that my chart i don't think so still being used like six times why it's not being used in update chart right that's all commented out so we can get let's just get rid of it we have update chart i see if you're no longer using chart js and have transitioned to plotly.js for your spectrogram visualizations you'll need to remove or modify the code related to chart js this includes the update chart function and any other references to chart js that are no longer needed here's what you should do one remove chart js dependency if you're sure you won't be using chart js at all in your project you can remove the chart js script tag from your html and also delete any code that initializes or updates chart js charts to update the update chart function since this function seems to be designed for chart js you'll either need to remove it if it's not being used or repurpose it for plotly js if you still need similar functionality if you need to update line charts using plotly js the approach will be different from chart js here's a simple example of how to use plotly.js to create a line chart java script function update chart data electrode label const labels equals data dot map x index sr adjust according to your data structure const plot data equals x labels y data type scatter for line chart mode lines name electrode label const layout equal title data for a dollar electrode label x axis title time y axis title amplitude plotly dot new plot chart div plot data layout chart div is the id of your chart container in this function you're assuming data is an array of numerical values and electrode label is a string adjust it based on your actual data structure three remove unnecessary chart js code any code that deals with creating or updating chart js charts like main okay okay okay okay um so we have a chart div add those uh okay did uh did something did another mistake well not a mistake i mean uh that's i didn't think it will it changed the plotly okay changed the plotly for everything that's fine we can deal with it i didn't actually think about it and the spectrum still uh still not showing i know they are and the data is showing as well okay we are in business the business of business is business oops commenting out in html is a pain isn't it painful can that be check everything don't we to check every bloody thing yeah we're getting rid of that it's actually working now so we yeah should we never use chart js i don't know is anyone using chart js and it's working for for them a plotly seemed to be way better if the bot would have recommended me to use plotly to begin with i wouldn't have even noticed okay so you know who lots of spectrogram id what's the problem with that bad request why missing eg or sub id pretty sure that the eg id does exist yes it's missing in a sub id so where are we calling get spectrogram id with only g id should have this sub id as well should we or not are they all the same i don't know well we shouldn't risk it as let's see g id get spectrogram id it's the actual function to do with this era coming from we do not do have it in the back end get spectrogram id now we should fix it we should have sub id in it just how the data is structured yeah we always should have a sub id not just the eg id for essentially everything that's why that era in the back end if you haven't checked by only kiosk.com please do so there's lots of tools that you might find interesting you'll be also supporting the project that way so hopefully i can make better content the most recent tool is this annoying thing it doesn't even fit the screen this video bought brought to you by that's not sponsored but why the you have to fix the thing is not fitting the screen i mean you can always make it small you can do meditation with this should wire it to eg well actually does have 24 particles each one wired to a different key there's an explanation there should be 24 of them originally 20 i don't think it's actually mentioned in the description bad description bad robot who wrote this description so now what do you feel like i don't know this segment was labeled seizure it starts a bit like a seizure but it looks like more like emg what do you think and it just abruptly stops and you have this dc component since labeled as well as a abnormal eg this channel has more noise on it ecg is actually pretty decent looking ah maybe not no it's okay it looks like a low low resolution like low sampling rate you only have the bugger roll samples but i've seen worse the way worse ecg is this data set it's good this one is labeled with hover because when you see stuff like this in one of the channels you can probably guarantee that the other channels will be a wrong well not wrong you know what i mean bad why is it not here ah yeah just clipping this channel is clipping very badly yeah very bad some eg there potentially but okay as it just yeah probably it's probably noise a 50 hertz or something something's wrong very wrong with that electrode so i could ignore it question is how do you automate this thing because this data set is not great here you have a dc component like through throughout the recording also labeled with hover do i have ecg no ecg yeah where are spectrograms so that the weirdest thing about this data set is that there's no a time window correlation between the raw eg on the different channels and the spectrograms currently they're not loading at all but i've seen them just a second ago that's something it's back through right so this one a k-spectrum i d should always have a pof eg id and sub id it's this code shall we ask a k-spectrum should always have both eg id and sub id as input can you fix the whole thing maybe maybe not to fix this one sometimes these things are links most of the time so they are not it's really annoying it's meant to modify the javascript so let's see modifying python it does look bad i'm not sure if it needs the rest of the code or not maybe it is supposedly this is what you're sending to the to the language model because sending all of it when selected maybe it needs it maybe not maybe not okay does it actually using it it can be an async function is it what if i just do control i update are they actually talking to me now they are okay maybe more errors yeah we know why it's happening feels like i'm just copy pasting stuff am i well maybe i am i don't know i'm never too sure who is developing you or the bot you would hope it's both but not certain another era 286 probably the fetching display the spectrogram canvas rp is not fun well that's because i removed it i thought they are being added sure i'm not actually calling them am i i have to check by the way this thing's meant to be interactive they can use the chat i'm live streaming on linkedin facebook youtube and twitch it's just because i can because ob s the streaming software allows me to do it because someone very nicely a published an add-on for it that allows a copy duplicating your stream normally it costs a lot of money with other services to do it talking about money a body kills is free go check it out there are ads running apologies for that this way you'll be supporting the project what do you feel like my brain is currently doing yeah maybe this by the way the default but get this window correctly yes sometimes the display is well some other times not so much and you need to interact with the window first for the sound to play ah funnily enough there is an interesting effect so when you have say one particle you make it go very fast when you add another one sometimes it goes much uh slower yeah so this one here for example and when another particle will bump into it it's for keep being slow like this yeah you saw that crazy stuff now there are some sort of physical model of particles bouncing the idea for it by the way does this described the bottom here is to actually map eeg to this so instead of reviewing eeg left to right like you normally will because this is traditionally how paper and those needle eeg machines was scrolling the idea is just to review it in a very different way so you could have in this case up to 24 particles because each is mapped to a different note it's what's called two octaves of notes on a piano so they each each one has a different note when it's bouncing against this blue drum and then something else intensity or frequency on its channel could be mapped to speed so essentially if you're having a seizure something it will do this and then slow down again fine you could also give them like a direction so maybe when it's baseline eeg it will just go random directions and once you have a certain frequency it will actually start going clockwise and when the intensity increases it will go faster it can make them bigger whatever makes sense currently i was thinking yeah if you also have like an eeg recorded off your own head and you map it to this you can then try and relax it well the number of particles is the number of channels can make sense to say you have 24 and then you're trying to relax yes i currently i feel like that my brain is active like that they can slow it down a notch to actually try and relax what do you think yes i'm pretty sure we had the spectrograms there already appearing once and they did look legit those they have to double check triple check quadruple check yeah we can bring them back they're still in chat container i don't know i don't think so and just to say that sub-id undefined what getting more and more okay yeah the spectrograms just didn't load them on the get go so we have rplpllll in different locations looks like there's something there yeah the intensity how many frequencies do we have like hundred different frequencies um be 600 seconds because it's 10 minutes more of data let's go to 3 30 it's a bit bored to check that how much the spectrum does look legit and this should be essentially 100 seconds within this 600 seconds so my guess would it be useful yeah this is just how the data set is is a bit odd it is working however those shots are just scanning forever are they so there's something wrong these frequencies are not mapped correctly that seem to be the continuation of this so we have ll rl let's get rid of that we're sick yes we have time rl lp and the rp this meant to be frequencies time ideal it should be in a separate in a separate variable i don't think it is at the moment should have those a frequencies going up to essentially 20 hertz it's a bit odd frequency in hertz so it is going up to 20 hertz it's a bit low normally eg is being reviewed the something missing is it cut off there's some examples of those some figures seem to be correct it's only going up to 20 hertz it's really odd but what's the sampling right this data set i keep discovering a more and more weird things about this data set yeah all like that are they it was expected to go at least uh to like 50 hertz or so maybe we'll have to finish up you know if there's any questions or you would like to team up for this competition or something don't particularly care about the terms of the competition primarily looking at this data set because it's publicly available i also hope to release this tool yeah that's something wrong also spectrogram id is not being shown on spectrogram label offset in second is not being shown to know why it's 300 instead of 600 it'd be 600 it's only plotting half expected it's only plotting half of it that actually goes from minus five to five it's a bit unusual anyhow we'll continue this test next time fix it up hopefully whoever's doing this competition can use it as well even though it's ending like 20 days yeah good luck to you all this data set is not great that's for sure i've seen better ones and yes i need to fix this yeah this is only showing half of it only five minutes should be 10 minutes in there we'll fix it next time i'll see you later did no questions