 We're using NetworkX, creating node, blinking nodes. You want to add attributes. Assume the attributes will be providing more context. Hopefully, the port will already understand the context. We obviously want to change those entities in the Python code. Yeah, so we have the same code. The matplotlib2plot and the NetworkX to do the structure. Something wrong with the changeBt page. Is it going under? Hopefully, not just right now. So this eventually will. The problem is just need the code. Might grab the code and start a new chair. Obviously, it's not having a good time. Okay, this thing is the whole page as I was letting it not just snap. Okay, did they change the interface again? Yeah, I think that's what happened. They must have, OpenAir must have changed the interface life because before all the previous stuff was on the side here, now it's top left, and they keep changing stuff. But the chair is still there. Okay, so we have main nodes of the child node, building graph visualization, that's size 15. Okay, let's just run this. Should be taking the data. Okay, now it's running. Okay, so it's scaling quite nicely. The nodes do not move and also is it going to be different when I reload the page? By the way, eventually we want to turn it into a web application available on a website hosted on Apache server. It is a budget server, but no, that's not what I said. I said Apache. Let's just run it again. See, it looks quite different, isn't it? So we have this graph construction. Yeah, it's always in a different position, but then I'm reloaded from here. Okay, several requirements. Well, I mean, it's okay for them to move, but yeah, maybe they will be loading in the same way, but then you can move them around. Graph layout should be considered each time page is reloaded. Yeah, that's not a bad idea. Yes, loading it in the same, exactly the same way, every time the page is loaded, and then allowing a moving the nodes around as per user request. Also color can be improved with a JavaScript spring layout seed 42. How does that work? Why do I set a random set to get consistent result? Anything random sets would not yield consistent results, but what do I know? Okay, so we have a JavaScript file. The question is, how do I link them all together? Yes, save that. We have the data file that has all these nodes. Don't have positions at the moment, do we? No, we do. We're already using a spring layout, we just had to fix seed, comment that out. Okay, we need to continue to turn this into a Flask application first. Okay, more information on this. Okay, the website. I think it's again, OpenAI website is stuck. Can't scroll through it, it will know. Yeah, give me. It didn't used to get this error message just before. This is a new one. Let's wait a couple times, see if anything is happening. Yeah, Chrome is currently using like 5% of my CPU, which is quite a lot considering it doesn't actually do anything anymore. Is the website back? No, it's not back. Is that to reinstall it? I think they OpenAI making some changes to the chat page. So this is happening real time. I don't know many of the pages are just for me. Snap. Yeah, I don't know what they changed. Doesn't seem like major change, but yeah, the response is still there. Yeah, we have done this multiple times before, haven't we? But we should know how to do it. Tell me that for the knowledge graph. Our question is if we should turn the data text file into a JSON file. Yeah, okay. So this goes in the static directory into graph.js. Can run it from here. We have the link for it and it doesn't show anything. Okay, why not? Yeah, let's see if it has any, it's giving any errors. Probably does. No, it does not. It's actually worse that it doesn't. No errors, but it's not showing anything. It's not showing anything. Yeah, there's some sort of integration thing. Yes, we know the problem is the JS wasn't referenced correctly. It's actually in a different folder, but now it's also giving an error. Right, we need to load this D3JS to include an HTML. Okay, so this is some sort of CDN to check that that link is actually working. Okay, it is working. Copyright 2021 is another error. Trying to show a graph that actually explains a EEG data processing. So it's called the knowledge graph. It's quite useful. We'll eventually make it accessible for everyone to see and use and look. Hopefully we'll be able to move these nodes around or expand on certain sections. But yeah, this is what the generally EEG data involves is analysis, data acquisition, challenges, feature extraction, visualization, machine learning, integration. So hopefully we will improve on this graph and make it more interactive. So you start with a few nodes like, well, maybe like this, and then you can expand on some of these sections. And so it helps you learn about EEG processing. Still having some problems with this. We actually have to run this app. So we're doing a flash application and we don't see anything. Why a co-pilot fix this? Let's fix anything. Just change it from nodes to node. Okay, so node actually is there. That means GPT-4 was wrong. We have a random template that's right and show the table and start it fast. Okay, the other thing is, where is it taking the data from? That's probably should be translated into a different format, like JSON probably be ideal. Yeah, we need to pass this file. That's correct. We already did this before. Okay, how about we stop this page? Something is happening at OpenAI again. It's the CEO back. And while the CEO was away, they managed to break the site. It keeps crashing. I also have a feeling it might be using this add-on for extension, for GPD voice control thing. Maybe we turn it off, see. Because that's changing that page. Maybe that's where the problem was coming from. It's actually finished. God, we might as well use it. Okay, so it's not suggesting a JSON file. It's suggesting going straight for dictionary or tuples. Oh, wait a second. Now we should be using JavaScript, the HTML plot. This one's using matplotlib. That's not the Flask application. So we need to turn this into a web application. Just do full path for now. So it works. Okay, so how do I integrate this with the Flask application? Going in circles as if it forgot the context of what it generated prior. Give me dummy stuff again. Yeah, this fuck shit. So I should that point to the other Python code. Save that for sec. The HTML. I have a console log. And this HTML doesn't work as it is. So I'm as well in an OpenAI. That is stuck. Again, it's like the fourth time today. Probably should start a new shit because this one keep hallucinating because we restarted it several times. So far, so good. Yeah, we're not getting any errors. Don't see the graph. Get graph data. Let's see if this works. Okay, it does have the nodes and everything. I don't see anything displayed on the page. T3.js. It's probably loaded in HTML. It's running before any other script. Okay, so we want to update the graph.js. Move all the.js code into graph.js and update HTML. Yeah, we have a graph.js. It's never actually working. Okay, so we're generating a graph. Pagecraft data. Render graph is graph.js in HTML. Don't need this script anymore. We're linking to graph.js. It's in a static folder. See if this still works. Yes, see something jumping around. That was the same here. Can't move them. There's no lines. There's no text. That's a good start. Considering this is our first knowledge graph. It's not too bad. The graph is loading now, but it doesn't have any text. I cannot move the nodes. So how to improve this? I get the text labels separately to the nodes themselves. And the nodes are not movable. And so it does kind of work. Okay, we could rewrite the data. Okay, this is working much better. I can move nodes around. There are two problems. One is that there are no lines between the nodes. And the second problem is that the text is too long and overlaps on top of one another between the different nodes. Yes, further. First of all, regarding the lines, I already have the links. A constant, I guess we have to date. Yeah, ideally they would not overlap to begin with. We already have a pen text. Yes, we do. Right, this is bad collusion avoidance. Yeah, I want to spread them, spread them out. This just works as a function as past the code, even in error. Performance for large graphs, this collision avoidance method may be computationally expensive. Consider optimizing it or using a more sophisticated algorithm for complex graphs. Okay, so replace the output image HTML, flat complication, front panel directly into GPT-4. Which before it said that the D3 does not have collusion avoidance. Now it says it does. Is padding be added to the data? Why is it not staying where it is? We need to make those adaptive somehow, depending on the screen size. So it's loading always in the same way, which is good. We have that data acquisition. It's looking good so far. Yeah, we need to do more with the size of this knowledge graph. It's kind of still, it's this weird direction bit. The other stuff is keeps moving. Right, so stop moving. Still some major overlap. You know why it even lets me select the text. Yeah, there's a lot of improvement that can be done, but it's a good start. So I'll see you next time.