 that we are having power outages that's not cool and I don't have a UPS that's probably the next thing I will be buying is a UPS except we need to make some profits first we are not for profit so everything goes towards back towards the project camera index is wrong show when my camera is being occupied it must be yes I have to stop it from here let's see which one webcam this one here change it to video source one it's running from here quickly it's no it didn't work camera is at zero to yes okay that's almost up on my camera a camera numbers I missed okay so it's number two I have to run it from different place so I can actually use Python for other things CPU okay that's working fine need to load it into a OBS select window detection hello hello hello it's working okay I want to jump straight into it we're having those power interruptions so better get into it quickly currently doing image feature detection we have this code that we did last time let's run it see what problems we get from memory it was giving some errors right so this is the original image we have this two examples we'll add more images later you can choose your image feature a detector and the processed image is not showing because we don't actually have it at the moment and that's why we're getting a 404 so start populating let's start a new HPD for default a pop in the index HTML should have a line at the bottom saying confirm reading the code and don't generate anything else and sometimes it ignores it sometimes it's actually yep it read through the HTML that's good we'll do the index last and normally we do JavaScript next and again it should have confirm reading don't generate anything else it's using Ajax requests as well as in outlines client we should take that so they are obviously place placeholders and things that we need to sort out that's a flask application button code that's okay so any placeholders in any of the of this script yes shell script can read this quickly yes in a provided flask application go there are few areas where placeholder logic or default behavior is used which you would typically update to fit your application specific requirements and we have this two placeholders in JavaScript the JavaScript functions fetch images and fetch detector types mentioned in your HTML JavaScript go to placeholders where you would implement the logic to populate the image and detector type selections okay but we need the first is this just a shell script alone this function is a utility that lists files in a given sub directory within the static folder you will want to ensure this function aligns with the actual directory structure and file types you're working with okay image files is this in shell script or yeah let's sort this one first list the file skin and folder you would want to ensure the function aligns with the actual directory structure and get a directory structure and this should be it yeah should have said do not explain this no really really have it it's okay it's all good relax relax keeps good and flask number actually we don't have the requirements file do we why it's far just in the main okay it's became much faster it was generating slower it takes the last time actually we do have violence file was different done by side by yeah we have more stuff we'll sort this later okay where is the code that does the image processing should be in my app yeah up by process image search for it process image this thing code and she was infactions process eyes yeah we have those a free ways of process images this is the function spots and straight this quickly these utility functions support the processing workflow by managing file parts and ensuring the front end can display the processed images remember place remember to replace the placeholders for the fetching logic in your JavaScript code with actual Ajax calls or other methods to retrieve images and detector types dynamically the Ajax calls should be set up to trigger the process underscore image endpoint with the selected options and update the web interface accordingly okay can you do this for us so while it's generating a hopefully this thing will appear on the site is sometime soon other tools on the slide that you can check out already let's assume that your flask app has two additional endpoints one for fetching available images fetch underscore images and another for fetching available detector types fetch underscore detectors you can replace the placeholder functions in your JavaScript code with Ajax calls to these endpoints here's an example of how you could implement these Ajax calls using fetching JavaScript which is a modern alternative to XML HTTP requests for making HTTP requests we have those two function fetch images okay fine fetch detector types like to do that is not placeholder it's better than before update detector type function is not actually being used and why so what about this the commented line you're referring to in the fetch detector types function is a placeholder for any additional logic you might want to implement after the detector types have been fetched and populated in the drop-down for instance you may want to automatically trigger an image processing action when the detector types are loaded we might simply update the interface to reflect the new options available yes I do want to do that yes if there is no extra logic required after populating a detector type drop-down you can remove the comment or leave it empty however if you want to say set a default detector type and update the processed image display based on this default you do the following it should be the same set default type image display catching any errors and make sense and then function date don't have do we do is like the image detector type yeah okay this should be better we haven't tried the previous one so I'll just use this one and what about the update detector type function will need to be fleshed out based on how you want to handle the image processing if the update detector type function is meant immediately reprocess the image with a new detector type upon selection make sure the Ajax called inside this function is correctly implemented to send the request for process underscore image endpoint as shown in the previous code snippet okay now there's something but by 10 main fetch which is don't have it process image you will need to implement the server side logic in flask for the endpoints fetch underscore images and fetch underscore detectors to respond with JSON objects containing the lists of images and detector types here's an example of what those flask groups might look like make sure your flask application has the appropriate root methods and that it is set up to handle cause if your front end and back end are served from different origins the provided JavaScript and Python code should be adapted according to the actual implementation details of your flask app the bad request key error you're encountering is a common issue when dealing with flash web forms it typically occurs when flask attempts to access a key in the request form dictionary that doesn't exist in this case the key image is not found in the form data that was sent with the post request ensure that the JavaScript making the Ajax call is correctly including image in the data being sent to server the name attribute of the input field for the image should matter the key you're trying to access on the server side and don't have a form that at all that might be the reason why nothing actually works how do I fix this on that a new form that image select getting value by getting value from here we'll deploy this in a say hopefully maybe if you can see it would be deployment of all the other tools on the side in the previous videos hopefully would be deploying this one well once it's working and for it to work we need to for it to actually show a processed image just getting some errors at the moment on the client side we actually we don't have this form that spot this in don't know why we don't have the Ajax call to do we still need the Ajax call see the Ajax call in the update detector type function triggers the process underscore image endpoint with the selected image and detector type and is necessary to process the image on the server however there are some adjustments to be made to ensure the data is sent in a way that's consistent with your flashback and expectations since you're dealing with potentially multi-part form data such as images the Ajax call should be modified to use form data instead of Jason here's the correct version of the update detector type function with form data okay update type so instead of an Ajax call that I'll just go with it I have no idea how to actually do it myself and so we're just the currently doesn't work whatever we have doesn't work so just go with this instead this change assumes your flask server is expecting image and detector as part of the form data right Jason that's working the form data object allows you to send files and text fields in the same request which is suitable for file uploads chitchat is actually really amazing and I'm highly skeptical of these things I wouldn't just say it I wasn't into like cryptocurrency in the like you know saying by you know by crypto but this thing is a whole and our care a whole other level a bit of a god level isn't there G in GPT stands for God yeah now we obviously it's generated that one processed image marked some stuff on it so detected some features in that image which is absolutely awesome yeah hopefully we will be able to yeah if we're going if we're making this progress we'll be able to deploy this today and also if we don't have another power outage already had to in a row to go get a UPS somewhere if you have a UPS that you are not using please let me know I am a not for profit this is a not for profit project so if you could donate a UPS and that will be awesome yeah let's get back to this now that that's working so this thing we need to make sure when you change the image the page is updated but let me double check first we need to get this absolutely correctly so in process there yeah we have that image generated in processed images but we need to make sure when we select a different image or a different detector type another image should be generated in this processed images folder who this really loud thunder suspect why a power gonna go out again can't see how do we fix it is put it this is where we put all ROMs in this file it's also published on the website and working and make sure yet that's the make sure the images have same name as original image that's okay same extension that's fine don't actually need it and yeah we want to how do I add this by the way github co-pilot so control make sure the images saved all the every time input is changed yet this sounds more like yet sorry the prompts that we haven't used yet just put them in the bottom this is the more than one this will fix the current issue from your flash code every time a detector type is selected in an image processing request is made to the process on the score image endpoint the resulting processed image is saved in the static processed underscore images directory with a specific naming convention that includes the detector type and the original image name yeah but it seemed to be only happening once the process underscore image function receives the post-request data containing the image and detector keys yes that's happening okay based on the detector value received it calls the appropriate processing function process underscore Harris process underscore she underscore tomati or process underscore fast okay let's restart the app just to make sure it's working correctly so these should have generated a same file but she to a instead of a Harris and it did not let's see the Ajax request in your JavaScript code sends the selected image and detector type to the flash back end upon successful processing the back end responds with the path to the new processed image which the JavaScript code then sets as the SRC attribute of the processed image element causing a new image to be displayed in a browser and say again Ajax request in your JavaScript code sends the selected image and detector type to the flash back end upon successful processing the back end responds with the path to the new processed image which the JavaScript code then sets as the SRC attribute of the processed image element causing the new image to be displayed in a browser okay to make sure a new processed image is saved and displayed every time the input is changed you should ensure that your eventlessness correctly invoke the processing logic and update the web pages image elements accordingly the flow is already correct in the provided code here's a quick rundown of how it happens and now it seemed to be only happening once image select and detector select event listeners detect a change in the drop-down selection currently it only happens one on page load they call update image display with the new image selection which updates the image your aisles update detector type is then called within update image display if the detector type is set which sends an Ajax request to process the image with the new settings upon completion the Ajax call updates the processed image dot SRC attribute with the path returned from the server displaying the new processed image make sure that the client sidecode appropriately handles the drop-down change events and that your server sidecode handles the file operations correctly to overwrite or update the existing processed images as intended okay why don't you do it then for me please and let's read this quickly because it is important certainly to ensure your client sidecode properly handles events and the server sidecode manages file operations correctly instead of the following aspects client side event handling drop-down change events ensure the change events on drop-down score the relevant functions to process images data submission make sure that the data submitted to the server includes all necessary information and in the correct format error handling implement appropriate error handling for failed HTTP requests or server errors server side file operations file naming processed images should be named uniquely to prevent overwriting previous images unintentionally unless overwriting is the desired behavior path handling when saving processed images build file paths correctly to save in the desired directory response correctness ensure the server sends back the correct relative path that the client can use to update the image display here is an outline of how you could ensure the functionality works as intended one handle drop-down changes make sure the change event listeners are correctly set up to trigger the image processing functions and update the display in network when I change when I load the page all that is happening which is fine when I change the detector type and nothing happens and let's see how I jump script so event listener change image select detector select right this is different isn't it make sure the change event listeners are correctly set up to trigger the image processing functions and update the display that's should be better in the ajax call you're setting the content type to application json which is correct for sending json payload okay if this is correct why do you mention it and you did change it why method post this one says do not let content type this one is sending a content type and so which one which one is which this process a fetch process image catch this one's taking from the form okay it's not currently working so might take that which is pretty much similar okay now let's and this one was working in the ajax call you're setting the content type to application json which is correct for sending json payload save this file just in case we stuff it up we'll have a copy of it and we will call with those changes error error and in the byte process arrays show function image path process image path processing process image path this one and the same create unique process image okay there's another function uh this function uh we can open it in here for the meantime okay this can go it's out of place is it right process image path and this will only work for arrays after processing the server should respond with a path that the client can use without additional modification if your process underscore image root returns a path that's directly usable by the client to set the image src the client side update should work flawlessly with these considerations your flask application should correctly handle feature extraction and image processing saving the results and the client side code should successfully request processing and update the UI dynamically um right well there's something uh wrong with the code at the moment stuffed something up there seems to be a mismatch in how you handle the request data in your process underscore image endpoint the error you mentioned earlier indicates that the server expects the image data to be in the form data it is actually in json format you need to change how you access the data on the server side to match the format being sent by the client since you're sending the data as json you should use request dot get underscore json instead of request form on the server side i'm not sure which one i should be using um okay can you regenerate the whole thing for us let's get back to the point where it was working yeah this gets too complicated with the image path okay what they were okay four four four fetch detectors get totally stuffed it up okay we add the lines for a generate oldness code for the update it just script save it there sometimes it can noise me and that starts generating very cold with a lot of placeholders and missing missing code this one looks legit so far currently we have about 95 and lines of code this one is like 10 lines i'm missing any doesn't look like there's any placeholders can we do the same for the python code you're writing a whole python code yeah we have about 125 yeah this stuff can you regenerate yeah it's that's uh really ignoring me yes sometimes just writing a app why kind of works still generating let's not letting me submit the whole whole thing doesn't let me change the prompt cable definitely hit the 50 prompts per three hour limit soon placeholders you know it's thinking bro this seems like the whole thing just jinxed it into this for me as well a new image this goes over there what else is missing all this missing must be putting me into some sort of second year you know after using it for a while it becomes super slow and select this era yeah it meant to be easy to have the previous a JavaScript and a python code should we just revit to it oh good and this one back to script.js and back up it's the one we want to run okay let's try once more and we'll start a new shed in gt 44 anything else and let's do the usual go through a html first with that line at the end saying confirm reading the code and do not generate anything else sometimes it decides to ignore it like now what does it say the html structure suggests this page is meant for feature extraction from images as indicated by the main heading less than h1 greater than it includes meta tags for sharing on social media a star sheet link which uses flasks url underscore for to generate urls for static content a plotly js library for rendering charts or graphs and it dynamically lists image files and detector types that a user can select from drop-down menus there's also a script tag at the bottom that asynchronously loads google ads and advertising scripts after a 10 second delay that's right so smart but i ask you not to generate anything i said confirm reading the code do not generate anything else sometimes it actually doesn't and other times it ignores that last line it's a bit odd but at least i know it read it any issues if this application this one however there is an assumption that selected underscore image from the form is a file name that will be directly found within the images subfolder if the file name doesn't exist or is incorrect the code might not handle these cases gracefully okay it's doing the detection something was deprecated but did it so it is working harris fast she too messy okay it's actually working so i haven't actually changed anything just restarted the thing yeah we don't want to change anything a burst rule of engineering if it's not broken don't fix it this one doesn't seem to work fast harris she too messy is working for the other image copied across it's a problem yeah one is png and one is jpeg having trouble with png for sick fast she too messy that's working saving at this png i suspect if we turn it into jpeg jpeg the issue will be resolved yeah it's not saving the file it's doing something this image meant to be different it's finding all the features it's really good i'm not sure there's all the peaks the edges it's not doing the other ones these three are working okay i'm not sure if it's to do any errors lots of errors yeah there's an error to begin with age if it is line 5756 in javascript 756 that's where the error is going from 87 is also as they should get both the code you provided appears to be a standard flask application for image processing with feature detection here are a few points to consider which might be relevant depending on your application specific requirements and setup your python code doesn't show explicit error handling around file operations or image processing steps if an error occurs during reading processing or writing the image files the server might return a generic error response without much information for debugging the use of secure underscore file name from works uge utils is good practice for sanitizing file names and avoiding security issues related to file system operations however there is an assumption that selected underscore image from the form is a file name that will be directly found within the images subfolder if the file name doesn't exist or is incorrect the code by no handle these cases gracefully the function get underscore image underscore files assumes all files any given subfolder or images it could potentially return non-image files if they exist in the directory a file extension check could be beneficial i can do this later the application could grow less responsive of the static images and static processed underscore images directories contain a large number of files because os this dea reads the entire directory contents into memory a concurrency is actually important if you use process the same image with the same detector simultaneously the results can interfere with each other since the processed image name is derived directly from the original implementing a method to handle unique naming for each processing request such as appending a timestamp or a unique identifier would be beneficial well we could also make sure the file age check if the file image was already yep let's save it again to prevent reprocessing and saving the image if it has already been processed and stored in the static processed underscore images folder you can implement a check before the image processing functions are called in the process underscore image route the problem of being seemed to work okay with jpeg we turn it into jpeg and it's i change this a bit first get rid of all the fluff just do that a layer canvas to layers spot this uh jpeg right this one it's actually working bad yeah i can read up the png maybe i was do you want to implement that this will check if the file was already processed would not process it again and take the the turn of process image files love this ticked time turn to prevent reprocessing and saving the image if it has already been processed and stored in the static processed underscore images folder you can implement a check before the image processing functions are called in the process underscore image route creating a processed underscore image underscore file name that constructs for the processed file name would be based on the selected detective type and now it's not working at all and not working at all changed the name so what i'm looking at it was working a second echo and it didn't really work the other thing is that the default rename this a this one zero the r1 should be loaded first again just the restart the thing right it's working a few things i would like to change to delete those is not the loading on the page reload very clear a control should see okay when input is changed getting error burst page load the 404 errors indicate that the routes fetch underscore images and fetch underscore detectors are not defined in your flask app but your javascript is making fit requests these endpoints from the page loads to resolve these errors you need to define these routes in your flask app and have them return the appropriate json data make sure you define these routes before you start the server with app.run debug equals true the fetch underscore images route uses the get underscore image underscore files function you already have to return a list of images in json format and the fetch underscore detectors route returns the predefined list of detector types let's just delete the python script by mistake it knows it's working just wondering about the order the right thing should come first image is set for the fault as well the default image is selected and set in the index route of your flask application the logic for choosing a default image upon loading a page is encapsulated in this section in the above code snippet the variable selected underscore image is assigned the first image from the list of images retrieved by get underscore image underscore files images if no images are found selected underscore image is set to none this variable is then passed to the template is selected underscore image this means the first image in the directory will be selected by default when the index page of your application is loaded if you want a specific image to be the default rather than just the first one in the directory you can set selected underscore image to that particular image's file name assuming it exists in your images folder well first in the directory it's fine but also don't understand just change the names and what did we we had a whole folder it would be with the image compression and all gfx static images don't want this one still coming first except because i placed it in the first so for that it's always resorting to that one i don't understand why anyway those are the default values they should be fine okay i'm not sure if we're gonna be deploying straight away but it's ready like how's it done there it's using i'm right this size of it yeah we're gonna have a this parameters available as an inputs and it's finding the text the image fastest finding too many things it's obviously missing that bit there which i think will be important even this will be bold just shows you how it works nothing fancy we'll continue next time see if we find this probably not so i'll see you next time bye